プログラミング学習コラム、今回は第1回目の勉強内容となります。
はじめての（言語が）Objective-C
ついにドコモがiPhoneを扱うようになり、カラフルなiPhone5Cや高速チップを積んだiPhone5Sの発売が話題になっているこの頃ですが、今後予想されるのは「スマホアプリの自作って面白そう！」とプログラミングの世界に飛び込んでくる新人プログラマの増加です。
確かにアプリ作りは面白いです。自分の作ったアプリが自分のスマホで動くのを初めて見た時、たいていの人は感動します。一点ものを生み出すものづくりの醍醐味を存分に味わうことが出来ます。経験者なら周囲の友人なども巻き込んでたくさんの人にこの感動を味わって欲しい、と思うことでしょう。
でも問題は「初めてのプログラム」にiPhoneアプリを選択してしまった場合、そのプログラミング言語が「Objective-C」である、ということです。初めて接するプログラミング言語がObjective-Cってどうなんでしょう？
Objective-Cは由緒正しき言語です。歴史あるC言語と、パーソナルコンピューティングの父、アラン・ケイが新しいオブジェクト指向言語として世に送り出したSmalltalk言語とのハイブリッド言語と言われています。しかもAppleを一時追い出されていたスティーブ・ジョブズによって光を与えられた言語でもあります。なんだかすごい背景を持った言語ですね。プログラム初心者がいきなりこんな言語を学び始めてもいいんでしょうか？
そもそもその背景から、Objective-CをやるならC言語とオブジェクト指向をそれぞれきちんと学んでから取り組むべきだ、と多くのプログラミング経験者はのたまうし、実際に本屋さんに行くとそういった切り口の書籍をたくさん見ることが出来ます。過去名著と言われたObjective-Cの書籍の大半は、もちろんプログラミング初心者を明らかに拒絶していて、それゆえの名著でもある訳です。
ではやはり初めての言語がObjective-C、というのは無謀なのでしょうか？
他の言語でプログラミングとオブジェクト指向の基礎をしっかり学んでから出直してくるべきなのでしょうか？
そこをなんとかしようじゃないか、というのがこの記事の骨子になります。スローガンは「当たって砕けろ、体で覚えろ」です。とにかくまずは動くものを作ってみましょう。おそらくなんとかなります。なんとかなった人たちが最近周囲に現れてきたので、きっと大丈夫でしょう。ものづくり志向のある人がうまくいっているみたいです。
ものづくりに惹かれる人は、たいてい粘り強くひとつのことに集中できます。苦労した後の達成感を知っていて、完成まで我慢できる人が多いと思います。
一部の才能を持った人を除けばふつう言語を学ぶのには時間がかかります。言語習得に王道なし。これは自然言語とプログラミング言語の共通点でもあります。要するにたくさん触れていればなんとか身に付く、ということです。はじめての言語がObjective-Cならば、言語とはそういうものだと体得していくはず、そう信じて行きましょう。
この記事ではひたすらお手本のソースコードを打ち込んで動かしてみることが中心となります。体で覚えていきます。なぜそういう風に書くのか、については名著と呼ばれる既存の書籍にお任せしましょう。
多くの初心者を救った『iPhoneの教科書』（現『iOSの教科書』）
実は筆者の周囲には『iPhoneの教科書』という本でプログラミングに目覚めた人が何人もいます。この本は現在『iOSの教科書』と名前を変えて、電子書籍版も出版されています。
著者は赤松正行先生。メディアアートの分野で活躍する教授です。メディアの専門家である赤松先生は、ものづくり志向の人たちがビンビン共感するメッセージをこの本にちりばめて下さいました。そのおかげでプログラミングに今まであまり縁のなかった人たちがアプリ造に目覚めました。かく言う筆者もこの書籍に刺激され、いったん挫折したプログラミングを10年ぶりに再開し、デザイナー仲間をそそのかし、いや、この書籍を薦めてプログラミングに目覚めさせ、共同でApp Storeにアプリ登録を果たしたのです。
さてこの書籍ではものづくり派にとって大切な、「何を作るか」の部分がしっかり解説されています。アプリ設計が貧弱だとせっかく苦労して作っても「使えない」アプリが生まれてしまいます。
それを避けるための設計時の注意点が述べられた後は、ひたすらサンプル通りソースプログラムを打ち込んでいくことになります。そしてとにかく実機転送までこぎ着けます。６つのアプリをとりあえず動かしてみた後、最後の章になってやっとObjective-C言語とオブジェクト指向についての簡単な説明が出てきて、今まで打ち込んできたソースコードの理解を深めていきます。
体で覚える派、まずは動かしてみるところから始めるものづくり派にとって、まさに理想的な章立てになっています。この書籍が多くのプログラミング初心者を救ったゆえんでもあります。
というわけで、ものづくり派がObjective-Cにチャレンジするなら、この「iOS教科書」に従ってサンプルプログラムを打ち込んで動かしてみる、どんどん打ち込んで体で覚えていく、これで決まり！と言いたいところです、が・・・
この書籍のレビューをご覧になった方はすぐにお気づきになると思いますが、「iOSの教科書」は現時点で最新の開発環境に対応していません。教科書通りに打ち込むとエラーが出て先に進めません。初心者ですからエラーの原因もわからないと思います。これからプログラミングを始める人にとっては、まさにこの部分が障害になってしまいます。
電子書籍に対応した時点で、しばらくは開発環境のバージョンアップに追従していたのですが、現在のXcode5（Apple純正のObjective-C統合開発環境）には今のところ対応していない状態です。
いずれ本家からXcode5対応版が出るかと思いますが、とりあえずそれまでの間は現行の「iOSの教科書」とこの記事の補足項目を合わせて読み進めていって下さい。バージョンの違いを吸収していきます。せっかくですから最新のiOS7に対応させましょう。Xcode5で開発すれば、自然とiOS7対応アプリになっていきます。
『iOSの教科書』の実践！（Xcode5、iOS7対応版）
まずは第１章から進めていきますが、Xcodeのダウンロードは問題ないと思います。バージョン番号が違うだけだと思われます。今なら最新のXcode5をダウンロードできます。
第２章のサンプル・コードはオーガナイザの構成が違ってきているので、現在見当たりません。もし見つけたらこの記事の中で補足していきます。ここは飛ばしても大丈夫です。
第３章のiOS Developer Programへの加入は、実はかなり難関です。現在ではやり方が変わっているのでWeb上の記事を参考にすることになるのですが、下記のページを参照するに、皆さんかなり苦労されているようです。
が、実はこの第３章、後回しでも大丈夫です。iOS Developer Programへの加入は、実機転送の時に必要になるからです。Xcodeさえインストールされていれば、その中のシミュレータでプログラムを実行することは可能です。加入作業で挫折したら当面は後回しに出来ます。
でも実機転送に成功すると感動もひとしおなので、どこかでこの問題はクリアしたいところです。あとで時間をたっぷり用意して、腰を据えてWeb記事の作業に取り組みましょう。
第４章は重要です。ものづくり派にとっては当然のことですが、そうでない人も先を焦らず、必ず目を通して下さい。アプリ作りにとても大切な部分です。ここをしっかり理解すれば、完成した時の喜びが倍増します。
さあ、いよいよ第５章です。ここからひとつひとつの作業が難しくなってきます。教科書のXcode4と現在のXcode5の違いを以下の補足項目でしっかりチェックしながら慎重に作業していきましょう。
以下、第５章・第６章の補足項目です。電子書籍版をベースにしているので、ページ数が無意味になります。項目の番号で参照して下さい。
5.1 プロジェクトの作成
10.「Use Storyboard」項目はXcode5では存在しない。そのまま進める。
11.「Use Automatic Reference Counting」項目もない。
12.「Include Unit Tests」項目もない。
17. スキーム・ポップアップメニューはあるが、「iPhone 5.1 Simulator」はなく、「iOS Simulator」のうち「iPhone Retina～」の３種類のどれかを選ぶ。
18.「Run」ボタン（右向き三角）をクリックするとiOSシミュレータが起動するが、ステータスバーは透明で、背景はグレーではなく白になる。もしディスプレイ画面が狭くて上下方向が見切れていたらステータスバーが見えない。その場合はiOSシミュレータの「ウィンドウ」メニュー→「表示サイズ」で75%以下を指定する
19. iOSシミュレータ下部にはホーム・ボタンがないので、「ハードウェア」メニュー→「ホーム」を選ぶ。
図. スキームポップアップメニューでは「iPhone Retina (3.5-inch)」を選んでおく
5.2 ボタンとラベルの作成
1. プロジェクト・ナビゲータに「CounterViewController.xib」という項目はない。代わりにMain.storyboardを選ぶ。以降全て「Xibファイル」「～.xib」といったファイル名が出てきたら、全てMain.storyboardファイルのことを指す。
7. オブジェクト・ライブラリに「Round Rect Button」はない。代わりに「Button」を選ぶ。
5.3 アウトレットとアクションの宣言と接続
2. エディタエリアが左右に二分割された時、右のペインにCounterViewController.hではなくCounterViewController.mが表示された時は、右ペインの上部、ファイル名が表示されてる部分の「◀ 2 ▶」と書いてある三角のどちらかをクリックすれば、CounterViewController.hを表示することができる。
- もしアシスタントエディタでOutlet名やAction名を間違えて設定してしまったら・・・ →「Edit」メニューの「Undo」が効かない！ ２～３カ所で自動的に設定が追加されるのでそれを全てクリアする。
- CounterViewController.hに追加された１行（@property行 または - (IBAction)行）を削除する。
- Actionを間違えた場合は、CounterViewController.mに追加された – (IBAction)アクション名 { ～ } （おそらく２行）を削除する。
- 後述のConnections inspectorの画面で左右が結びつけられている項目のうち白抜きの「！」マークがついている箇所が間違いなので、その項目の「×」マークをクリックして接続を切る。
- Connections inspector画面の出し方
- Main.storyboardを選択する。
- 画面右側のユティリティ・エリアの上部に小さいアイコンが６つ並んでいる。カーソルを近づけるとそれぞれの機能の名前（inspector名）が表示される。そのうち一番右の「Connections inspector」を選択する。
- storyboard画面のステータスバーのあたりをクリックする。CounterViewController全体が選択され、その時のユティリティ・エリアが今回必要としている画面。（画面中央部をクリックすると、ViewControllerではなくViewが選択されてしまうので注意。ユティリティ・エリアを良く見ること。）
5.4 アクションの定義
2. ソースコード４行目の「display.text」はエラーになる。「self.display.text」または「_display.text」と書かなければならない。アシスタントエディタで設定したOutlet名（@propertyで「*Outlet名」と定義された変数名）は以降全て先頭に「self.」または「_」をつけなければならない（重要！）。
図. 文法が間違っていると赤いメッセージのコンパイル・エラーが発生する。
（この部分は教科書通りに書くとコンパイル・エラーになる）
図. 「display.text」の前に「self.」または「_」を挿入するとエラーが消える。
5.6 機能の追加
19. 上に同じ。「display」を参照する場合は全て「self.display」または「_display」。
20. ～ 22. の手順は、それを行うタイミングによって結果が変わり、初心者にはうまく行かない場合が多い。アシスタントエディタでの接続でミスをした場合には上記★1) ～3) の方法を覚えて対処した方が良い。
6.1 ビュー・アイテム画像の作成
1. 自作の画像がない場合は、公式サイトのリンク集から完成画像素材をダウンロードする。http://iosbook.net/links/ このページの「▶無料！サンプル素材を入手」をクリックする。ダウンロードされたファイルを展開し、「iOSの教科書 サンプル素材 1.7.0」フォルダの「6 Counter (Complete)」フォルダが今回該当するCounterプロジェクト。その中の「Images」フォルダを使用する。
6.2 イメージ・ビューの作成
1. CounterViewController.xibの代わりにMain.storyboardを開く。以降全て同様。
4. イメージ・ビューのサイズを引き伸ばす前に、大元のView画面サイズ（iPhoneのサイズ）を確認する必要がある。ステータスバーのあたりを選択して（ViewController全体を選択したことになる）、Attribute inspectorのSize欄を「Retina 3.5-inch Full Screen」にしておく。これはサンプル素材画像が3.5インチに合わせて作られているため。もしiPhone5以降の4インチに合わせた画面にしたい場合は、各ボタン画像を画像編集ソフトで少し縦長に修正しておく必要がある。
7. Storyboard画面左下のアウトライン・ビューのボタンは画面が狭い場合に見えなくなることがある。その際には画面右上のボタンでユティリティ・エリアやナビゲーター・エリアを一時的に隠して画面を広くし、アウトライン・ビューを表示したら元に戻すと良い。
図. アウトライン・ビューから「Counter View Controller」を選択してもViewController全体を選択したことになる。
図. 「Counter View Controller」の「Attributes inspector」の「Size」欄を、「Retina 3.5-inch Full Screen」にしておくと、画面のずれを防げる。上部の６つのアイコンの役割を覚えておくと作業がはかどる。
6.3 ボタンの画像設定
5. ここで選ぶ画像は「Button-Plus.png」
7. ここで選ぶ画像は「Button-Plus-Pushed.png」 このとき教科書ではタイトルのテキスト（「+」）はImageの画像に隠されると書いてあるが、実際には見えてしまうので、State Config「Default」時のTitleの文字を消去しておく。
8. マイナスボタンの Default時の画像は「Button-Minus.png」
Highlighted時の画像は「Button-Minus-Pushed.png」
クリアボタンのDefault時の画像は「Button-Clear.png」Highlighted時の画像は「Button-Clear-Pushed.png」
これらのボタンのタイトルテキストも上記の方法で消去しておく。
12. 位置合わせの時にラベルをうまく選択できなかったら、アウトライン・ビューを表示してそこから選択すると良い。微調整はカーソルキーでも可能。
6.5 ビューの自動回転
2. ここでは回転時の制御をコードで行っているが、このメソッドは現在有効ではない。後述の5.の作業のみで良い。
4. エディタ・エリア左上の「Counter」と書かれている部分をクリックすると、ターゲットを選択できる。
5. 教科書では対象ボタンを選択することになっているが、現在はチェックボタンになっている。
図. 「Project Navigator」→「Counter」→「General」の画面。「Device Orientation」でサポートする画面の向きのみチェックを入れる。今回はホームボタンを下にした縦長の画面（Portrait）だけをサポートする。
エラーとの闘い
初心者にとって大変なのは、「教科書通り」プログラムを入力することです。Objective-Cの文法を知らない状態だとスペルミスに気付かずキーを打ち続けてしまうでしょう。でももし文法的に間違えるとすぐに上記のように画面に赤や黄色のメッセージが出るので、英語のメッセージがわからなくてもその近辺のスペルミスなどをチェエクすればなんとか入力間違いを探し出せると思います。
問題は文法的に合っているのにメソッド名などを間違えた場合です。この場合は実行した時に初めて実行時エラーが出たりします。いったいどこをミスしたのか、初心者にはほとんどわからないと思います。その際には下の図のように、Debug AreaのConsole画面のメッセージの中から、自分が書いたことのあるメソッド名などを探し出して、何か間違っていないか必死にソースコードの中を探すことになります。慣れればデバッガをうまく使って早くエラーの箇所を探し出せるようになりますが、まずは根気よくキーワードのミスをつぶしていくようにしましょう。
図. 実行時エラーの画面。画面右下のコンソール画面から自分の入力した覚えのあるキーワードを探し出し、そこから入力ミスを見つけ出す。この場合は「updateDisplay」メソッドを「updateDisply」と呼び出して失敗。
実機転送にチャレンジ！
さあ、ここまで来るのも大変だったと思います。とりあえずシミュレータで正しく動くところまでなんとかこぎ着けたら、あとは実機転送です。
6.9 デバイスの実行 の作業がうまく行けば実機で動くのですが、この部分も今では画面が変わっていますが、用語はおおよそ昔のままです。注意して進めていきましょう。ただしこの 6.9 の作業のためには、前述の第３章にある難関の作業が前提となります。なんとか頑張ってクリアしましょう。
「Counter」アプリはあなたの実機で動きましたか？ 初めて動くのを見た時、感動しませんでしたか？ 根拠のない万能感（？）に満たされませんでしたか？ 一度味わったらやめられませんよね。このあと教科書ではまだ５種類のアプリが待ち構えています。次回からひとつひとつ問題なりそうな部分を補足していきたいと思います。お楽しみに。
