スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) | スポンサー広告 | トラックバック(-) | コメント(-)

XcodeでHelloWorld 【5】

XcodeでHelloWorld 【4】】の続きです

こんばんは、ちっち♀です。
11月ですね。肌寒し、すっかり紅葉の季節になりましたね。
MAC買ってから3ヶ月が経過しましたが・・・いやはや中々進まぬモノですねorz
今年中にはなんらかのアプリ公開まで至りたいものですが・・・はたして(--;)

さて、そんな事もこぼしつつ。
今日も今日とてお馴染みHelloWorldさんの作成に勤しみたいと思います。
前回、晴れてメインコードの搭載に成功した我がHelloWorldですが、
名前入力の後にキーボードが引っ込まなく、Helloのボタンが押せないという
元も子もない不便がおきてしまいましたので

今回はテキストフィールドのキーボードを、
文字入力の後に片付ける為の方法をみていきたいと思います。
ではでは。HelloWorld第五回、「デリゲートの謎!キーボード収集のメソッドとは?」
はじまるよー\(^o^)/ポンポンポンポンッポン

【テキストフィールドのデリゲート接続を作成する】

さぁ、イキナリ出て来ました、謎のデリゲートです。
デリゲート接続を作成する・・・って、一体どういう事??

まずはデリゲートとは一体どういうものなのか。
そこからお勉強をしていきたいところですが・・・と、その前に。
今回キーボードを引っ込ませるために何故、デリゲートが必要なのか。
一体デリゲートとは何の為の物なのか?と言う所からみてみますと。

入力枠に名前を入力した後、キーボードをしまう動きをプログラムする為には
まず、いつ名前の入力が終了したのか、
その瞬間をプログラム側に認識させる必要があるらしく。
それをするために必要になってくるのがこの、デリゲートなのだそうです。

つまりデリゲートとは、一つの動作が終わった事を
何かに知らせる働きを持っているもの、と言う事なんですね。
詳しくは「アプリの情報や機能などを変わりに受け持つ、請負人」
なるものらしいのですが、これを使用する事により
ある動きを引き金に別の動きを作動する事が出来たり、
必要なデータを色んな場面で引き出してこれたりと
さまざまな事が出来る様になるのだそうです。
これはいずれ使いこなす必要がありそうだ・・・!

んでは早速、今回のHelloWorldにもこのデリゲートとやらを搭載してみます。
まずはテキストフィールドのデリゲート接続の作成です。
デリゲートを設定したい対象のテキストフィールドと、
ViewControllerの下にある黒いエリアの中の丸いオレンジのアイコンとを
線でにょーんと繋ぎます。アレ・・・?これ何か覚えがある!

クリックで原寸大

やっぱりか!以前ボタンとhの画面を繋いだ時と同じですね(^^)
MACさんのキーボードの左側にある、Controlボタンを押しながら
名前の入力枠をクリック、下のアイコンまでそのままドラッグします。
にょ~ん。

クリックで原寸大

線の先が繋がると、黒い吹き出しが出てくるので
Outlet下のDelegateを選択。丸アイコンがチカチカしたらOK。
これにて「テキストフィールドのデリゲート接続を作成」は完了です。ヤッタネ!

【デリゲート機能の実装】

さて、お次は今さっき接続したデリゲートを実際に使う為の準備をします。
お馴染みhの画面を使いますので、ナビゲータエリアのファイルをクリック、
真ん中のエディターエリアに開きます。

クリックで原寸大

@interface HelloWorldViewController: UIViewController
の文の横に、UITextFieldDelegateの一文を、<>で囲んで追加します。

クリックで原寸大

こんな感じでしょうか。
これで、先ほど作成したデリゲートをプログラム内で
使う事が出来るようになったのだそうです。準備完了ですね。
あとは実際にデリゲートの機能を使う為の、コードを搭載しましょう。

クリックで原寸大

mの画面を使いますので、エディターエリアに開きます。
前回頑張って(´▽`笑)書いたchangeGreeting:メソッドの下、
@endの上に、次のコード文を書き込みます。

- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
if (theTextField == self.textField) {
[theTextField resignFirstResponder];
}
return YES;
}


・・・わぁ(~∇~;)
これまた訳のわからん長い暗号コードが出てきたぞーっと
い・・・いやいや落ち着こう。まずは深呼吸。
ゆっくりチュートリアルさんを読んで解読していけばきっと大丈夫!

結局、このコードは一体どう言う事なんだい?と言いますと、
入力枠、テイストフィールドの優先度(?)を下げる為のものなのだそうです。

元々テキストフィールドには、優先順位(自己解釈ですが)が一番高いと
自動でキーボードが出る機能が最初から備わっているらしいのですが、
つまりこのコードは、その順位を下げる事によって、
強制的にキーボードを引っ込ませてしまおう、と言うコードなのだそう。
なんでも、直接キーボードにプログラムで指令を出す事は
出来ないそうで、こういった手法をとっているのだとか何とか・・・

うーん・・・難しいですね。こう言った手法のアレコレは
プログラミングの基本を習得しないと理解できなさそうですが

テキストフィールドに関しては、こういう事ですね。
名前を入力しようとタップされたところで
自分を最優先だと認識し、キーボードを出現させるけど、
入力をし終わっても、ずっと自分が一番だと思い込んでしまうような子なので。
そこで、この上の暗号コードを使って、「もうアナタのお役目は終わったのよ」と
教えてあげようと。それにより、キーボードも引っ込むと。
どうやらそういう事みたいです。何だこれテキストフィールドって天然でカワイイ(笑)

そんな訳で、早速この可愛らしい子に引き下がるタイミングを教えてあげるべく
上の暗号を打ち込んでいきましょう。
えっと・・・changeGreeting:の下、 @endの上に、ですね。

クリックで原寸大

でけたよ先生。こんな感じでええのんかしら
これでテキストフィールドちゃんはきちんと自重してくれるハズ(笑)
はたしてアプリはちゃんと作動してくれるのか。
然らばシミュレータでテスト起動してみましょうか。

クリックで原寸大

おぉ!キーボードが引っ込んでくれました!
写真じゃちと分かりにくいですが(笑)ちゃんと改行ボタンで引っ込んでくれたよ!
テキストフィールドちゃんが空気読んでくれるようになって、おばさん嬉しい!

ようやくキーボードが引っ込んでくれましたので、
Helloのボタンが押せるようになりました。
前回は試せなかったこのボタンですが、これではたしてLableさんは
ちゃんと名前を表示し、挨拶を返してくれるのでしょうか。

押してみたいと思います。ドキドキ(; ・`ω・´)

クリックで原寸大

おっOK・・・おー・・・?
ちょっとLableのサイズが大きすぎたみたいですね(笑)
文字が画面に入りきらず、「・・・」と省略されてしまいました。

とりあえず、搭載したメインコードは無事機能しているみたいです。
はー、よかったー!て言うか、ビックリしたぁ(^^;)=3
なんらかのエラーかと思って一瞬ビクっとしたよ!
文字の大きさを修正し、もう一度Helloボタンにトライしてみます。

クリックで原寸大

で、でけた・・・完璧じゃあないかあ
これでやっと、やっとHelloWorld完成かー!?

クリックで原寸大

名前を変えてもう一度トライ。
うんうん、完全に思う通りに動いてくれております・・・!!
どうでもいいけど佐藤って誰やねん。
いや、ほら、日本一多い姓だと言うし、ね!

最後に。

クリックで原寸大

世界にこんにちはー!

いやー、もうパーフェクトですね。
これにてHelloWorld完全に完成です ワーイ!

長かったなぁ・・・
何も分からず、チュートリアルの言う通りに作っただけのアプリですが、
初めて自分で作ったモノとなると・・・っ、やっぱり感動しますね!
是非自分のiPhoneに入れて遊んでみたいものですが、
それにはお金がかかるのよね・・・んもう、アップルさんったらなんて鬼畜!

しかし、今回HelloWorldを作ってみて思いましたが、
いくらXcodeさんが初心者に親切とは言えど
やはりプログラムの知識がゼロのままでは
何も満足に作る事は出来ないんですね・・・
これじゃあオリジナルアプリを作るなんて夢のまた夢・・・!

ここは少し、言語のお勉強をした方がいいみたいです。
せめて基本や概念など、大体の仕組みだけでも理解したいっ・・・!
XcodeさんはObjective-Cと言う名のプログラム言語を使っているらしいので、
その土台となってますC言語のお勉強から始めたいと思います。

うん。今からでも遅くない!!私はやったるでー。
そんな訳で、次回からはC言語でプログラミングのお勉強に入りたいと思います。
HelloWorldの完成までお付き合い下さった方々、
こんな長々とした記事記事を、最後までお読みくださり
本当にありがとうございましたm(_ _)m

みなさんにも、HelloWorldー★

スポンサーサイト

2013/11/06(水) | HelloWorld | トラックバック(0) | コメント(2)

XcodeでHelloWorld 【4】

XcodeでHelloWorld 【3】】の続きだヨ。

前回やったこと。
入力されたユーザ名を保管しておくプロパティを作成する為に
コードを二行書きました。めっちゃ頑張った!!嘘だけどネ!!(笑)

さて、そんな訳で。設定コードを書き、ユーザ名保管の準備もできた事だし、
今回はガッツリ、メインコードの作成に取り掛かりたいと思います(○`・△・´○)ゞ!

【changeGreeting:メソッドの実装】

changeGreeting:メソッド=今回で言う、メインコードの事ですね。
前回同様、コードはチュートリアルから丸写しさせて貰いますー。

クリックで原寸大

前回@synthesizeのコードを書き込んだmの画面をそのまま使います。
画面に羅列されているコードたちの中から
- (IBAction)changeGreeting:(id)sender {
}

の一文を探し、その{と}のカッコの中に以下の文を書き足します。

self.userName = self.textField.text;
NSString *nameString = self.userName;
if ([nameString length] == 0) {
nameString = @"World";
}
NSString *greeting = [[NSString alloc] initWithFormat:@"Hello, %@!",
nameString];
self.label.text = greeting;


って何だこれ長っげぇえええええ(  Д )    ゚   ゚
これはもうほんと何かの暗号みたいですね!って言うか暗号なのか!
果たしてこれはお勉強をしたところで理解する事が出来るようになるのだろうか?!
そして理解したとしていつの日には自分の意図するコードを
自ら生み出す事が出来るようになるのだろうかー!?

・・・いやはや、一気に言わんと知れない不安が押し寄せましたが、
まずはちょっと落ち着く事にしましょう・・・深呼吸深呼吸。
えーっと・・・ですね。とりあえず、この暗号が一体どういう暗号なのか
見てみることにしましょうか。

テキストフィールドからテキストを取得して、
その結果をView ControllerのuserNameプロパティに代入します。
(NSString型の)新しい変数を生成し、
View ControllerのuserNameプロパティを設定します。
書式文字列で指定された書式に従って新規文字列を作成します。
ユーザがアプリケーションを起動したけれどもテキストを何も入力しなかった場合、
nameStringの値は「World」となります。


うーん、チュートリアルさんから主要部分のみ抽出してみましたが、
相変わらずなんだか分かりにくいですね・・・なんとなくしか理解できない・・・
えーつまり、自分なりの解釈ですが、ザックリまとめると、

「名前」欄に打ち込まれた文字を名前の記録装置に取り込み保存した後、
Lableにその名前を「Hello(名前)!」と言う形で表示しますよ。
でも、もしも欄に何も入力されなかった場合(記録文字数が0文字だった場合)
Lableの表示文字は自動的に「HelloWorld!」になるよ。


・・・と、どうもこう言う事らしいのです。なにこれすっごーい\(^o^)/
さり気なく「名前の入力なんてせんとポチっとしたろ(Θ艸Θ)」なんて輩にも
ちゃんと対策をとっております!これは盲点だったワ・・・!
絶対どこにでも居ますもんね、そういう悪戯心の強い輩は・・・(笑)
流石は公式チュートリアル、抜け目ない!

そんな訳で、早速ワタクシのHelloWorldにもこの暗号を搭載してみたいと思います。
この文章(もはや文章)を一文字も間違いなく打ち込むには
それなりに神経を使いますが、幸い邪魔するものはなにもありません。
ゆっくり、慎重に写します・・・

クリックで原寸大

で、でけたー!
正しく写すのが精一杯で何て打ったか覚えてないけど(ダメや)
で、でもなんとか打ち終わったよママン!
これでボタンもLableも上記どおりに動いてくれるようになったハズ・・・!
これはもうテストして自ら試すしかありませんね。なんだかドキドキするなぁ(*´ェ`*)

ちなみにですが。ここにてXcode5でのシミュレータ起動方法をちょっくら紹介。
というのも、私自身5以前のバージョンで作ってたこのアプリ、HelloWorldが
テスト起動できなくてかなりテンパッたので(笑)折角なのでその解決法をば。

【「Appをインストールできませんでした。」のメッセージが出たときの対処法】

クリックで原寸大

これです、これ。このメッセージ。
Xcode5にアップデートした後、今まで通りに再生ボタンでテスト起動
しようとしたところ、急に出てきたエラーメッセージです。
最初出たときはもう冷や汗が吹き出まくりでした。
何かコードに間違いがあったのか?とも思いましたが、ちゃんと
「Build Succeeded」の表示は出ていたし、
(コードに間違いがあると「Build Failed」と出る)
5になったから以前のデータは読み込めなくなったのか?そんなバカな!
などと一人慌てまくりでした。予期せぬエラーにはビクっと来ますよね・・・

しかし、慌てなくて大丈夫。この現象はクリックで簡単に解決できました。
Xcode画面の左上にある、再生&停止ボタンの右側に
アプリの名前が表示されてますね。そして「iPhone」、「iOS6.1」と続いてます。
これらの表示は、どの機種のどのOSでテスト起動するかって言う、
シミュレータの設定なのですが。

クリックで原寸大

「iPhone」の部分をクリックし、ドロップダウンで出てきた選択肢の中から
「iPhone Retina (3.5-inch)」の、「iOS7」をクリックで選択します。
(Retina の(4-inch)はiPhone5用の、長い画面でシミュレートする時用の物です)

クリックで原寸大

「iOS6.1」を選択すると、これまた動かなくなってしまうので注意。
どこかで、「6.1」のシミュレータもダウンロードすれば
使えるようになると見た気もしますが、私のXcodeでは未だ使えないので
大人しく「7.0」でテストする事にしています。

クリックで原寸大

シミュレータの設定変更が出来たら、
再生ボタンで今までどおりテスト起動する事ができるようになります。

クリックで原寸大

私のHelloWorldも無事起動できました。よかったー。
表示が以前のiPhone型でなくなってしまったのはちょっと残念ですが・・・
本来ならアップルさんで開発者登録をして実機でテストしなければならないところ。
無償でシミュレート(しかも最新OSで)できる機能を利用させて頂いてるのです、
そう贅沢は言えないでしょう。

さて、無事にテスト起動もできましたところで、
いよいよ搭載した機能を実際に試してみるとしましょうか!
それじゃあ・・・えーと、そうですね。
まずは最初に「HelloWorld!」の表示を試すべく、
何も入力してない状態でボタンを押してみましょう。

クリックで原寸大

おー!!でっかいですが、ちゃんと「HelloWorld!」と表示されましたね・・・!
私の書いた暗号がちゃんとボタンやLableに伝わったのですね!何だか感動~!
この「HelloWorld!」、もしやこれがこのアプリの名前の所以だったのですね?
世界へこんにちは!だなんて、なんだか粋なアプリですねぇ(*^^*)

さあ、では次は早速、実際に名前を入力してみて
Lableさんがその名前を表示してくれるかどうか試してみましょう。
「お名前を~」の欄に、名前を入力してみます。

クリックで原寸大

お名前欄をクリックすると、自動でキーボードが出てきます。
これはなんと、テキストフィールドに最初から搭載されてる機能なんです。
入力欄を配置するだけで、キーボードの用意まで全自動でやってくれるなんて、
Xcodeさんってばやっぱ親切~!

おや・・・?しかし・・・
よくみるとこの自動キーボード、なんと英語と数字しか打てません。
ちょっと待って、ひょっとしてもしやこれはXcodeは英語でしかないから・・・?
日本語をテスト確認する為には実機でテストしないと出来ないとか・・・!?

またもや少しヒヤっとしましたが、これも大丈夫です。そんな事はありません。
ちゃんとシミュレータ上で日本語キーボードを出現させる方法があります。
こちらも簡単に出来ますので、サクっと紹介してしまいますね。

【iOSシミュレータのキーボードで日本語入力出来るようにする】

クリックで原寸大

iOSシミュレータのツールバーから、「ハードウェア」の「ホーム」を選択し、
シミュレータのホーム画面に移行します。

クリックで原寸大

左フリップでメインページへ移動し、
設定のアイコンをクリック。

クリックで原寸大

「Setting」画面の「General」を選択。

クリックで原寸大

「Keyboard」を選択し・・・

クリックで原寸大

「Keyboard」画面の、「Keyboards」を選択。
(ちょっとややこしいけど(^^;))

クリックで原寸大

「Add New Keyboard」を選択し、

クリックで原寸大

たくさんあるキーボードの中からスクロールで「Japanese」を探し、選択。
「Romaji」は英数キーボードで日本語入力できるキーボードで、
「Kana」はフリップ等で日本語入力できる、あいうえおのキーボードです。
今回は折角なので両方足しちゃいます。

クリックで原寸大

「Keyboards」の画面に「Japanese」の二つが足されればOK。
両方ともシミュレータで使用できるようになります。
ちなみにこのキーボード、不要になった場合には削除する事もできます。
その際には右上の「Edit」をクリック、後に格キーボードの横に出てくる
赤ボタンを押して「Delete」しちゃいましょう。
これで、また英語しか使えないキーボードに戻るハズです。

ちなみにキーボードだけでなく、シミュレータ全体を日本語に設定する為には
今先キーボードの設定をしたときと同じく、設定アイコンをクリックし、
「General」→「International」→「Language」→「日本語」と選択し
右上の「Done」をクリックすればOKです。
シミュレータが語原を設定しなおし、次開いたときには
ホーム画面のアイコン達も皆日本語表示されてます。
(このとき、一度シミュレータが強制終了することもありますが、
一度閉じて、再度起動させれば何も問題なく動きます)

さて、少し長くなりましたが、
これで日本語入力のキーボードも設定できた事だし、
もう一度HelloWorldの画面に戻って、名前の入力をしてみましょう。

クリックで原寸大

OKですね★
キーボードの入れ替えは言うまでも無くiPhoneの本体同様、
左下のグローバルマーク?をクリックする事でできます。
さあ、後は右下の「改行」を押してHelloボタンをクリックすれば
Lableさんが私に挨拶をしてくれるワケですね!よおし。

いざ・・・!
・・・って、あれ?・・・(^^;)

キーボードが引っ込まない。

英語キーボードに戻して、「Return」もクリックしてみましたが引っ込みません。
これではキーボードに隠れたHelloのボタンが押せないですね・・・ガーン。

そうなんです。実はテキストフィールドを設置すると
自動でキーボードを用意してくれるXcodeさんですが、
そのキーボードをしまう機能までは面倒みてくれないのです。
どのようにキーボードをしまうかは自分で設定しないといけないんですね。
クソー、ついにHelloWorldの完成だと喜んでいたのに・・・!

さて次回、デリゲートの謎!キーボード収集のメソッドとは?
ついにHelloWorldとの決着なるのか・・・!?お楽しみに(笑)

XcodeでHelloWorld 【5】】へ続く。

2013/10/20(日) | HelloWorld | トラックバック(0) | コメント(0)

XcodeでHelloWorld 【3】

XcodeでHelloWorld 【2】の続きだよ

前回のあらすじ・・・
画面に設置したボタン達を実際に機能させるべく
必要なプログラムコードを書き込むために、
その前に記述しなければならない「設定のコード」を作成。
アシスタントエディタペインなるものを使って
ボタンとhの画面を線でにょーんと繋ぎました。

はい。大体そんな感じでしたね(どんな感じ)
結局どういう事なの★って方はゼヒ前の記事もお読みくださいね
無駄に長いだけの乱文記事となってますがヨロシクね(ゝω・)v キャピ

えー・・・。そんな訳でございまして。
今回から肝心なプログラムコードとやらを書き込んでいきたいと思います。
まずはもう一度、完成させたいHelloWorldのアプリがどんなだったか
振り返ってみますね。

HelloWorldとは。

クリックで原寸大

お見本画面(超縮小版)

一番上の「Your Name」欄に名前を入れて、
下のHelloボタンをクリックすると
真ん中の「Lable」が入力した名前を認識してくれて
「Hello 〇〇!」と挨拶を返してくれる
まさにその名の通りの「こんにちはをしてくれる」アプリ
※当ブログ【XcodeでHelloWorld 【1】】より引用(?)


・・・なんて。以前自分で書いた文を持って来てみただけですが(笑)
そうそう。確か、礼儀正しいアプリだなぁ!とか言ってたんだっけ。
では、そんなお上品なHelloWorldさんの機能を再度踏まえた上で
チュートリアルさんのお手順を辿っていきたいと思います(•̀ᴗ•́)=3

【ユーザ名を表すプロパティを追加する】

さて、本日のステップですが。
ユーザ名・・・を表す、プロパティを・・・追加・・・な、なんだって??
変数やらアクセサメソッド(?)やらまたも難しい言葉を並べちゃう
チュートリアルさんってば相変わらずのいけず(*ノωノ)イヤン
お陰でまたしてもさっそくワケわかめ~な感じなのですが、
流石に毎回わかめ~のままでもいかんので(´・ω・`)ゞ
なんとか理解できそうな文を一文だけピックアップしてみます。

以下チュートリアルさんのお言葉
ユーザ名を保持する文字列のプロパティ宣言を追加して、
コードからいつでも参照できるようにする必要があります。


・・・ユーザ名を保持する文字列の・・・うーんと・・・(="=)
とりあえず、素人なりに解釈をしてみますと、ユーザ名ってのはアレですよね。
ユーザ=何々を使う人(User。今回の場合はアプリを使う人)なので、
その人の名前=このアプリの「YourName」欄にユーザが入力する名前、
と言う事でいいんですよね。

そして、その名前を保持するなんたら~を追加する、っていう事は
入力されたユーザ名の情報を保っておける、つまり記録しておける
何かを作るって言う事ですよね!そうか、なるほどー!
そうやって名前を認識できるようにしておくのですねー。
上記の【文字列のプロパティ】がその「何か」にあたる物なのでしょう。

と言う事は、Lableの文字がユーザ名を表示するとき、
【プロパティ】を経由して情報が来る、という事でしょうか?
どっちにしてもLableの文字が直接名前を認識する訳では無かったのですね(笑)
何だか恥ずかしいな・・・(^^*)

それでは、なんとなく分かったつもりになったところで
実際にプロパティの追加に挑戦してみる事にします。

前回開いたhの画面を使うとの事なので、
今回は左のナビゲータエリアのファイルの中から
HelloWorldViewController.hをクリックして
真ん中のエディタエリアに開いてみました。

クリックで原寸大

ででん。hの画面です。
前回開いていたアシスタントエディタペインは、右上にある
Editorボタン郡の一番左をクリックして仕舞っちゃいました。
同じ画面が二つ並んでいても仕方ないもんね。

さて、開いたhの画面には前回追加した3つのコードが表示されてますね。
今回はそのコードの下と"@end"の間にもう一文コードを追加します。
追加する一文はコレです

@property (copy, nonatomic) NSString *userName;

言わずもがなチュートリアルさんからの丸写しですが何卒ご勘弁を(*'-'*)ゞ
せめてものお勉強としてここは全部自分で打ち込んでみる事にしましょう。
一文字でも間違えると機能しなくなるそうなので、ここは慎重に・・・フルフル
大文字小文字や半角全角も正確に打ち込まないとダメとの事なので注意です!

クリックで原寸大

よし、書けたましたっ。
何度かチェックを繰り返したので大丈夫なハズです。
Xcodeさんは親切ですので、コードの入力を始めると
携帯の予測変換のように候補をいくつか提示してくれます。
まぁ・・・間違ったのを選択してしまうと初心者には大変・・・なので。
最初はどのみち全部打ち込んでいくのが間違いないとは思いますが。

それに、打ち込んだ挙句、万が一間違えてしまっても
ある程度の間違いならXcodeさんがやらで指摘してくれるので大丈夫です。
とは言っても、Xcodeさんが認識できない程の間違いをしてしまうと
どうにもならん事態となってしまいます・・・ので。
どちらにせよ、コードを扱う時は確認しながらの作業が必要ですね!

と言う訳で。
@プロパティのコードは無事に追加することが出来ましたね。
しかしながらこの一文でプロパティの追加は完了なのかと思いきや、
名前の記録装置をちゃんと稼動させるためには
もう一文、コードを追加しなければならないそう。

今度は、先ほどコードを追加したhの画面ではなく
HelloWorldViewController.m(hじゃ無くてmの方)の画面を使います。
先ほどhの画面を開いたように、ナビゲータエリアからmのファイルを選び、
エディターエリアに開きましょう。

クリックで原寸大

mの画面です。
うーん・・・これまた何かいろいろ書いてありますねー。
間違ってどっか一文字でも消そうもんなら大惨事ですね!
分からないものは下手に触らないのが一番・・・と言う事で、
ここは書き足すべきコード書いて大人しくしておきましょう(^^;)
コードはコチラ

@synthesize userName = _userName;

この一文を@implementation HelloWorldViewControllerの下に書き足します。

クリックで原寸大

でけました=3
半角クリア、文字クリア、システムオールグリーンです ヤッタネ!
大分長くなってしまいましたが、これにて名前の記録装置の追加は完了です。
お疲れ様でした・・・って、実質コード二行書いただけだけどね!
しかし、それなのにこの記事の長さは一体何故なのか。おかしいよね。
お陰で今回書くって言ってた肝心なプログラムコードまでたどり着かなかったよ!
ストップやるやる詐欺・・・!

・・・えっと、そんな訳で
次回から改めて、「記録装置から情報を引き出し、Lableに応用する」
核のプログラムコードを書いて行きたいと思います。今度は本当だよ!
このアプリの一番のコアな部分と言っても過言ではない大事なコートです、
これがないと話にならないもんね!
HelloWorldも完成まであと少し。張り切って参りますよー!

XcodeでHelloWorld 【4】】に続くよ!

2013/10/14(月) | HelloWorld | トラックバック(0) | コメント(0)

XcodeでHelloWorld 【2】

XcodeでHelloWorld 【1】の続きです★

前回作った画面(超縮小版)

クリックで原寸大

そんな訳で今回からいよいよこの画面を実際に動く物にする為に
ボタン達に機能をつける作業に入りたいと思います

・・・とその前に。
一つしなければならぬお詫びをば・・・m(_ _)m

実はこっそりブログ端のPIYOでも呟いていたのですが、
前回の記事で使用していたXcode、あれアップデートされてませんでしたΣ(゚Д゚)!?
新Xcode使ってくから!とか勇んでたのにあれ嘘になっちゃってたよ・・・!
確かにインストール時間短かったんでアレ?なんて思ってたけどさ・・・ブツブツ

今回からはしっかりアップデートしなおした、正真正銘の新Xcode
VER5でやってきますのでよろしくお願い致します・・・スミマセンでしたーっε=\_○ノ
ちなみにXcodeのアップデートはダウンロードした時と同じく
AppStoreから出来ます。みんなもちゃんと完了したか確認しようねー!

さて、そんなワタクシがおまぬけだったお話は置いといて。
ちゃんと動くアプリを作る為にはどうしたらいいのか?って事ですよね。
画面の配置まではスーパーXcodeさんのお陰で難なくこなす事が出来ましたが、
ここからはついに素人が思わず身じろぐ
プログラミングの作業が必要となってきます。
流石のXcodeさんもプログラミングの補完まではできんよねー(^^)!はぁ・・・

もちろんワタクシもここに来て例外なく身じろぎまくってるわけなのですが・・・(苦笑)
しかし、これを通りぬけなければアプリの開発なんて夢のまた夢なワケさ!
そんな訳で、いつかはプログラミングを覚えなきゃならんのは間違いないのですが。
・・・のですが、なんにせよ今のところはチュートリアルさんのコードを見ても
何言ってんだか分かんなーい★と言う非常に残念な状態なので(´ー` )

とりあえずコードについては後ほどお勉強する事にして、
今回はその手順だけを追ってみる事にします。
実践第一ー!

※プログラミングの概念をほとんど理解してない素人が書いております
  おかしなところがありましたらご指摘いただけるとうれしいですm(_ _)m


【ボタンと接続とコード作成】

部屋とTシャツと私じゃなくてボタンと接続とコード作成(笑)
何やら早速チュートリアルの方では難しい横文字がたくさん羅列してますが・・・
一つずつ実際にやってみて、噛み砕いていってみるとしましょう。



今回使うのは3つ並ぶEditorボタンの真ん中、
ウエイターの制服みたいな格好をしたボタンです。
正式名は「アシスタントエディタボタン」と言うらしいです。長。
こいつをぽちっとやりますと、「アシスタントエディタペイン」と呼ばれる画面が
エディターエリアの右側に現れます。

クリックで原寸大

こんな感じです。
なんだか全体が以前に比べてノッペラリとしてるのは
Xcodeがver5になって画面仕様が変わったからですよ。
ちなみに、ユーティリティーエリアは今回邪魔になってしまうので
Viewボタンの一番右をクリックして閉じときました。

さて、今開いたアシスタントうんちゃらですが、
「HelloWorldViewController.h」を開いていたら正解だそうです。
何が開いてるかの確認は、開いた画面の上部でする事ができます。



うむ、ちゃんと「HelloWorldViewController.h」が開いてるみたい。
もしも違うもの(例えば「HelloWorldViewController.m」とか。hじゃなくてmの方)
が開いていても、~mと表示されてる部分をクリックする事によって
hの画面に変える事ができるので大丈夫。問題ナッシングです。

ところで、この開いたhの画面、一体どうするのかと言いますと。
動作を付け加えたい物(今回はボタン)と、線で引っ張って繋ぐんだそう。
ん?どう言うこと・・・?そう思ったらやってみるのが一番早いですネ!
MACさんの左端にある「Control」ボタンを押し、
そのままViewControllr上のボタンをクリック、h画面までドラッグします・・・

Hクリック原寸大

にょーん。
なんか伸びたよ・・・!
この線をh画面上でドロップしてボタンと繋ぐんですね!ラジャ(`・ω・´)ゞ
ドロップは「@interface~」の文と「@end」の間の行に来るようにとの事なので・・・

クリック原寸大

場所を合わせて指を離します。

クリックで原寸大

何か吹き出しの様なモノが出てきました。
この項目たちは今繋いだ接続の設定事項なのだそうです。
今回のボタンは上から「Action」、Nameには「changeGreeting:」(:も入れる)
Typeは「id」、Eventは「Touch Up Inside」最後のArguentsは「Sender」に指定。
右下の「Connect」をクリックし、接続を完了します。

クリックで原寸大

おー、なんかコードが一文追加されたよ!
これがこのボタン用のコードですね。
h画面と線で接続する事によって自動で作成してくれました。さすがXcode★

ちなみに今追加されたコードは、いわばボタンの設定を記しただけのものらしく、
機能についてはまだ何も書かれていないので、このままでは何も動きません。
しかし、この設定のコードが実はとても大事で、これを作っておかないと
この先機能のプログラムを書いてもちゃんと動いてくれないんだそうです。
それはえらいこっちゃ!

つまり、動かしたいものはとりあえず片っ端から h 画面と繋げて、
特定の設定コードを作ってもらわねば!と言う事なんですね!(`・ω・´)=3

今回のHelloWorldは、ボタンはもちろん、
入力枠に打ち込まれた名前を読み込んだり、
読み込んだ名前をラベル上に表示したりと
他二つの設置物にも、「機能」が関係してきますよね。
これは接続しなきゃあかんヤツなんじゃないの~ん?( ̄ー ̄)

なんて。チュートリアルさんにそう書いてあったので(笑)
他二つの設置物も上記と同じ方法でサクッと h の画面と繋いじゃいます★



テキストフィールド(入力枠)



文字(Lable)

吹き出しの部分は、それぞれチュートリアルに書いてある通りに入力しました。

クリックで原寸大

じゃーん。
これでコードが三つ分全部、追加されました。
とりあえずはひと段落といったところでしょうか。
動きを作る為のコードを書くための、準備が完了したワケですね。

今回設定した吹き出しの項目やらその他もろもろについてですが・・・
チュートリアルを読んではみたものの、なんとなくしか分からなかったので
後ほどちゃんとお勉強しなおしてまとめたいと思います
あとは触って覚えていけたらいいなー。

さて、そんな訳でボタン達の接続も済ませたし、
次は機能を持たせるためのプログラミング、行きまーす!(ガン〇ム)
しかしコードに関しては丸写s・・・いやいや。
人はみな始めは真似して覚えてく物だよね。きっとそうだよね・・・!

XcodeでHelloWorld 【3】】に続く!

2013/10/05(土) | HelloWorld | トラックバック(0) | コメント(0)

XcodeでHelloWorld 【1】

こんばんはー、ちっち♀です。
いやー、ついにiOS7が公開されましたね!
iPhoneも5S/5Cが発売されてどーんと盛り上がってるみたいですし、
この機会にiPhoneユーザーさんがたくさん増えてくれるといいですね・・・!

それにしても・・・Appleさんは相変わらず新しいのを作るのが早い・・・!
この間iPhone5が出てiOS6にアップデートされたばっかだってのに・・・
仕事が早すぎてこちとらついて行くので精一杯ですよ
我らがXcodeも早々とiOS7に対応した新しいバーションが配信されてましたし
どんどん進化してくアプリの開発環境に対応して行けるかが心配だ~っ(;・д・)!

さて、そんな更新好きなAppleさんに遅れを取らないように・・・
今回からはさっそく新Xcodeを使って行こうと思います。
初心者さんが挑戦するにはうってつけとされてます(?)チュートリアルアプリ、
「HelloWorld」の制作に挑戦しますよー(`・ω・´)ノ オーッ!!
今回もお供はお馴染みの『初めてのiOSアプリケーション』さんでござい。
まだまだお世話になります故、よろしくお願い致しまーす!

早速ですが、今回作っていくHelloWorldが一体どんなアプリなのか、
まずはお手本の画面から拝見してみる事にします。

【HelloWorldってこんなアプリ】

クリックで拡大

さあ、如何でしょう。これが今回作ってみるHelloWorldさんの完成画面です。
うーん・・・なんとも小ざっぱりとした画面ですね。
まぁ、初めて作ってみるアプリだもんね、そう難しいのは出来ません。
シンプルなのが一番ですよね。

このHelloWorldですが、一体何をするアプリなのかと言いますと。
一番上の「Your Name」欄に名前を入れて、下のHelloボタンをクリックすると
真ん中の「Lable」が入力した名前を認識してくれて
「Hello 〇〇!」と挨拶を返してくれるんです。
まさにその名の通りの「こんにちはをしてくれる」アプリなんですね!

何をするにもまずは挨拶から!って事でしょうか(笑)
礼儀と道徳を兼ねそろえた、まさに最初のアプリにはピッタリな代物です

さて、大体どんなアプリを作っていくのかが分かったところで
まずは見た目だけでもお手本と同じ物を作ってみたいと思います。
折角ですので、前回作ったピンク背景の画面を元にやってみますね(*^.^*)

【HelloWorldアプリの画面を作ってみる】

前回ボタンを設置した時の事を思い出しつつ、
同様の方法で、必要な物を画面に配置していきます・・・

クリックで拡大

うむ、こんな感じでしょうか。
とりあえずパっと見、お手本と同じような格好になりましたね。

今回画面に設置しましたのは、一番上の入力枠、
真ん中の文字、一番下のボタン、の3つです。
入力枠にはTextField、文字にはLable
ボタンにはお馴染みRoundRectButtonを使用してます。
ユーティリティーエリアからのドラッグ&ドロップで配置する事が出来ました。

もちろんこのままでもいいのですが、折角ですので
前回覚えた、設置物たちの基本設定も少し弄ってみる事にします。
またも例のホームベース型のボタンをクリック。
ユーティリティーエリアで格項目の設定をしていきます。

ちなみにですが、このホームベース型のボタンは
正式名称【Attributes インスペクター】と言うそうです。
Attributes・・・アトリビュート?シンボル?属性?なんのこっちゃ。
ようは対象物の属性(?)を設定できるボタンなんだよって事でいいですよね・・・


クリックで拡大

早速入力枠のアトリビュートインスペクタ(言ってみた(笑))を開いてみました。
テキストフィールドの、設定可能な項目がずらりと並んでいます。
ざっと見てみますと、枠内にあらかじめ文字を表示させたり、
枠の形を変えてみたりと色々な事ができるようになってるみたいです。

チュートリアルさんによりますと、お手本画面の入力枠に表示されてます
薄い「Your Name」のガイド文字はPlaceholderの項目を使う事によって
設定する事ができるらしいです。試しに何か入れて表示させてみましょう。
そのまんまYour Nameだと面白くないので・・・
ここは日本語で柔らかく、「お名前を入力して下さい」とでもしましょうか。



おー!薄い文字出ました!いい感じですねー♪
この文字は実際の入力が行われると自動的に消えてくれるそうです。便利!
左に寄っちゃってるのが少し気になりますね。真ん中寄せにしましょう。
Placeholderの上にある、Alignmentの項目で真ん中のボタンを選択します。



はい、バッチリです
枠内の文字設定が中央寄せに変更され、
ガイドの文字もちゃんと真ん中に表示されました。
Alignmentでは、Word等のテキストソフトではお馴染みの
文字列の左寄せ、中央寄せ、右寄せの設定を行う事が出来ます。
枠内に適応する設定なので、入力された名前も設定どおりに寄ってくれます

さて、これでちょっとだけ、アプリの使用者さんに親切なアプリになったね(*^^*)
折角なので、親切ついでにこの入力枠を拡大しちゃいましょうか。
大きいほうが目にも優しいし、きっと操作もしやすいよね。
大は小を兼ねると言うし、何事もデカイに越した事はないだろう・・・!

クリックで拡大

じゃーん★
どうでしょう!ちょっと調子に乗りすぎたでしょうか(笑)
入力枠のみならず、LableとButtonもデッカクしてみちゃいました!
お手本の画面と変わって来てしまいましたが・・・少しだけなら大丈夫だよね!

テキストフィールドはそのままの丸い枠だと横にしか長く出来なかったので
Border Styleの項目で右から二番目の四角い枠に変更。
枠の形を変えたら枠内の色が無くなり、背景と同色になってしまったので
下の方に隠れてたViewのメニューを開き、
Backgroundの色を変更して白に戻しました。

枠自体の大きさはマウスのドラッグで端っこをひっぱって、デッカクします。
表示文字の大きさも、エリア上部にあるFontの項目を弄ってででっかく、
フォント自体も少し可愛い丸めの文字に変更してみました。
LableとButtonも同じ方法で入力枠に見合うように調整。
サイズとフォントと文字色を変更しました。

ちなみに、シミュレータでテストしてみるとこんな感じです

クリックで拡大

細かい設定を弄ってみただけなので、大々的には変わりませんでしたが
雰囲気は多少変わったんじゃないかと思います。
少しは愛嬌のある画面になったでしょう~?
何より画面を調整していくのが楽しくて楽しくて(*´艸`*)
他にも改変可能な設定項目は沢山ありましたゆえ、
Xcodeさんをよりよく知る為にも、もっともっと色々試してみると面白いかも!

さて・・・なんだか画面を作って満足しちゃった感はありますが(笑)
アプリ作りは寧ろここからがスタートですよね!もちろんHelloWorldも叱りです。
このままでは前回同様、何の機能も持たない設置物たちが
ただ画面上に置いてあるだけの状態ですので
今回は実際に動くアプリを完成させる為に
ボタン達に「機能」をつけてく方法に挑戦したいと思います。

画面だけのハリボテアプリはもう卒業だーい\(^o^)/

XcodeでHelloWorld 【2】】に続くよ!

2013/09/26(木) | HelloWorld | トラックバック(0) | コメント(0)

 |  HOME  | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。