• ログインログイン
  • 新規登録新規登録

MENU

初めての言語がObjective-Cでも大丈夫! Xcode5ではじめてのiOS7プログラミング 第6回

連載初めての言語がObjective-Cでも大丈夫! Xcode5ではじめてのiOS7プログラミング

プログラミング未経験の初心者からでも始められる、『iOSの教科書』を題材にしたiPhoneアプリ開発コラムです。アプリをとにかく作ってみたいけれども、何をやればいいのかよくわからない。そのような学生にピッタリのコンテンツです。

前回までのプログラミング学習コラムに続き6回目の勉強内容です。

便利アプリを作ってUIを学ぶ

今回は年齢計算ユーティリティ「エイジ」アプリです。ユーティリティ・アプリというと、バッテリーの残量表示だったり、連載第1回目で作成したカウンター・アプリなど単機能の便利アプリだったりが思い浮かびますが、今回のエイジ・アプリは、年齢だけでなく月齢や日齢なども計算でき、英語表記にも対応する他言語対応になっています。

今回の特徴は、最新iOS7版と、『iOSの教科書』が発行された当時のiOS5〜6版で、アプリの見た目がガラッと変わるところです。これはエイジ・アプリがユーザインターフェースの部品として、iOS標準のUIKitフレームワーク付属パーツを使っているためです。この付属パーツに大きな変更が生じたのです。

iOS7の改良点として最も強調されている部分が、ボタンやスライドバーなどユーザインターフェースのパーツの見た目が大きく変わったことです。Apple社によれば「控えめであること」「明瞭であること」「奥行きを与えること」を狙っているとのことです(iOS Human Interface Guidelinesより)。新しいパーツの見た目については賛否両論あるようですが、使いやすさ、触り心地の良さについてはさすがApple社と思わせるものがあります。

そんなわけで今回の標準パーツを中心にしたエイジ・アプリは教科書とだいぶ違った雰囲気に出来上がるはずです。違いを味わいながら作業を進めて行きましょう。

iOSの教科書』の実践!(Xcode5、iOS7対応版)

以下、第11章の補足項目です。今まで同様電子書籍版をベースにしているので、ページ数が無意味になります。項目の番号で参照して下さい。

11.1 エイジの概要

掲載されている完成画像イメージはiOS6以前のもので、今回のiOS7版では見た目が大きく異なる。

11.3 画像とプロジェクトの作成 

3.プロジェクトにImagesフォルダを追加する方法は今までと同じ。ダウンロードした素材フォルダの「11 Age」フォルダの「Images」フォルダをプロジェクトに加えれば良い(第6章「6.1 ビュー・アイテム画像の作成」を参照)。

11.4 ビュー・アイテムの作成

1. 「AgeViewController.xib」の代わりに「Main.storyboard」を開く。
3. iOS7ではDate Pickerを配置しても、教科書のような画像にはならない。

図. Storyboard上でDate Pickerを配置しても、画像は表示されない。

6. 同じく、Segmented Controlを配置しても教科書のような画像にはならない。

図. Storyboard上でSegmented Controlを配置しても教科書とは異なる表示。

22. 教科書ではドロップする場所が不明であるが、あとで「デート・ピッカーの上に配置」と書いてあるので、この時点でDate Pickerの上部にドロップしておく。

27. 上に同じ。あとで「計算結果表示ラベルの上に配置」と書いてあるので、この時点で数字ラベルの上部にドロップしておく。

32.〜41. iOS7のDate Pickerは背景が白なので、この作業は不要である。もちろん好みで薄い色を設定しても良い。

図. iOSシミュレータ画面。背景は白のままで自然に見える。

11.5 アウトレットやアクションの宣言と接続

1. AgeViewController.hの代わりにMain.storyboardを開く
2. アシスタント・エディタを開いた時に右半分にAgeViewController.hが表示されなかった場合の対処方法は、連載1回目の「5.3 アウトレットとアクションの宣言と接続」の2. の部分を参考にする。

11.6 日付の期間の処理

2. これらのソースコードは入力不要である。次の3. でまとめて入力することになる。
3. birthdayPicker.date、unitControl.selectedSegmentIndex、resultLabel.textはそれぞれ先頭に「self.」か「_」を付加しないとエラーになる。
5. birthdayPicker.dateは先頭に「self.」か「_」を付加しないとエラーになる。

11. 7 Xibファイルのローカライズ

この連載では.xibファイルは用いず.storyboardファイルを用いているので、項目のタイトルも「Storyboardファイルのローカライズ」が適当である。

2. この「project & targets list」が表示されていない場合は、左上の横向き三角ボタン(枠付き)をクリックして表示する。

図. project & targets listが表示されていないと「PROJECT」の表示は見当たらない。

図. 左上の横向き三角(枠付き)をクリックするとproject & targets list が表示される。

11.5 AgeViewController.xibはないので、代わりにMain.storyboardにチェックが入っていることを確認する。また、Finishボタンを押す前に「File Types」欄でプルダウンメニューから「Interface Builder Cocoa Touch Storyboard」を選択しておく。この作業でプロジェク・ナビゲータのMain.storyboardのところに三角形マークが付き、それをクリックするとBaseとJapaneseの2つのファイルが表示されるようになる。

図. ローカライゼーションするファイルを選択する。ここでは「Interface builder Cocoa Touch Storyboard」を選択する。

図. Main.storyboardファイルにJapanese版が追加される。

11.6 上記の通り、AgeViewController.xibの代わりにMain.storyboardのJapaneseを選択する。

11.8 ラベル「Birthday」を「誕生日」に、ラベル「Age」を「年齢」に変える。

11.12 「Years」を「年齢」に、「Months」を「月齢」に、「Days」を「日齢」に変える。

11.15 iOSの表示言語を変更するためにはiOSシミュレータのホーム画面から設定アプリを開く必要があるが、アプリのシミュレート時には画面にホームボタンが表示されない。ホーム画面に戻るにはiOSシミュレータの「ハードウェア」メニューから「ホーム」を選択する。

また、教科書の方法で表示言語を英語に変更した後デイト・ピッカーの表示方法を設定する場合は、iOSシミュレータのホーム画面で「Settings」→「General」→「International」→「Region Format」で「United States」を選択する。その後日本語表示に戻すには、ホーム画面で「Settings」→「General」→「International」→「Language」で「日本語」を選択する。

11.8 アプリ名のローカライズ

1. InfoPlist.strings(English)はSupporting Filesの中のInfoPlist.stringsの三角形マークをクリックするとファイル名が現れる。

 図. ローカライゼーションでInfoPlist.stringsが複製されている。

2. この作業は不要。既にJapanese版が自動作成されている。

11.9 コード中テキストのローカライズ

2. ageLabel.textは先頭に「self.」か「_」を付加しないとエラーになる。

3. 同上。

4. ファイル・テンプレート・ライブラリは、画面右側のユーティリティ・エリアの下部、通常はオブジェクト・ライブラリが表示されている部分の4つのアイコンのいちばん左を選ぶと表示される。

図. 通常のユーティリティ・エリアの下部では、4つのアイコンの右から2番目が選択されており、オブジェクト・ライブラリが表示されている。

図. 4つのアイコンの一番左を選ぶとファイル・テンプレート・ライブラリが表示される。

11. 「Make localized…」というボタンはなく、代わりに「Localize…」ボタンを押す。

12. 「English」はないので、「Base」を選択する。

13. 「Japanese」にチェックを入れた段階で「Base」と「Japanese」にのみチェックが入っていて「English」には入っていないが、今回は「Base」が英語表示の扱いになっているのでこのままでも構わない。

図. 「Base」が英語表示の役割を担っている

15. 英語表示で確認した場合、「Age in Years」といったラベルが表示領域が足りずに「Age in…」などと表示されることがある。その場合にはStoryboardの英語版(Main.storyboard (Base))のラベルのサイズを左右に広げておく。

11.10 ビューの自動回転

2. 今までと同様、このメソッドは無効。この作業は飛ばす。

11.12 エイジのソースコード>11.12 エイジのソースコード

完成したソースコードにおいては、Xcode5のテンプレートでは存在しないコードや、iOS7では無効のメソッドも書かれているので注意が必要。これまで教科書通りに進めた時に特に書かなかったソースコードをここで追加する必要はない。

 

これでエイジアプリの完成です。『iOSの教科書』の画面とだいぶ出来上がりが違うことにびっくりされるのではないでしょうか。iOS7になってユーザインターフェースのパーツが大幅に変更された結果です。人によっては「前の方が良かった」という感想を持つかも知れません。以前のデイト・ピッカーはいかにもといった雰囲気が出ていましたね。しかし白を背景に新しいデイト・ピッカーを使ってみると、背景からスーッと文字が浮かび上がってきて、必要な情報以外は確かに控えめになっていることがわかると思います。それこそがiOS7の狙いだと思われます。

それから、今回は言語ごとに表示を変えるローカライゼーションにチャレンジしました。ちょっとしたユーザへの気遣いのように感じますが、筆者は最初この部分を実装した時にとてもドキドキしたのを覚えています。なぜなら自作のアプリが国境をやすやすと越えて行く情景が目に浮かんだからです。

自分の作った物を世界の人に届けたいと思ったとき、説明書の翻訳作業などはもちろん必要でしょうが、それよりも何よりもどうやって海外に流通チャネルを持つかが大問題です。でもインターネットの時代になって国境を簡単に越えられるようになり、App Storeが販売取引の大部分を肩代わりしてくれることで、アプリ制作側はその中身の品質向上に集中できるようになりました。

画面全体をタッチできるスマホアプリでは基本的に万国共通のユーザインターフェースが実現可能です。うまく作れば言葉による説明を最低限に押さえることが出来ます。それでも今回のようにラベルなどについては簡潔な説明は必須でしょう。そしてその最低限のローカライズにさえ成功すれば、自分のアプリをいきなり世界中の人に届けることが可能になるのです。その可能性に気づいたとき、ワクワクが始まります。例えば、日本語以外に英語、スペイン語、中国語などにローカライズできたら、対象ユーザ人口はいったいどれくらいになるのでしょうか。頭の中にパッと世界地図が浮かんで、その大部分が対象になることに気づいてドキドキしたりするのです。可能性を手に入れただけでも本当に楽しくなります。

さて次回はいよいよ最後の例題、カメラアプリの「パイル」アプリです。カメラアプリはスマホアプリの中でも非常に可能性を多く含んだ有力なジャンルです。次回のパイルアプリでも単なる撮影だけではなく、いきなり画像合成を体験できたりします。どうかお楽しみに。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top