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

MENU

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

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

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

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

iPadアプリ作りは楽しい!

タブレット型端末の雄、iPad。初めてそのアプリを操作した時、新たな可能性を感じませんでしたか? 画面が大きいことによるメリットは強大です。でもそのアプリを作る側に回るともっと可能性が広がるはずです。今までのアプリをもっと使いやすくできる、もっと違った使い方を提示できる、今まで考えもしなかったようなアプリも作れるかもしれない、と可能性はどんどん広がっていきます。

筆者が初めて本格的に作成したアプリは、当時出たばかりのiPad用でした。初めて実機に転送した時の興奮は未だに忘れられません。こんな操作感を味わえるとは・・・ アプリに新たな価値をいくらでも加えられる、とさえ思いました。実際にこの分野にはまだ誰も気づいていない使い方がまだたくさん眠っているのかも知れません。

画面解像度の違いに対応する

さて今回は前回作ったシューティングゲーム「Smash」アプリを、高解像度版iPhone(iPhone 4以降)やiPadに対応させていきます。実は『iOSの教科書』は基本的にiPhone 3GS向けに書かれていて、3GSは高解像度(Retina)ではありません。そのため第8章で今までのアプリを高解像度に対応させていっています。

現在のiOS7は既にiPhone 3GSには対応していません。つまり今なら初めから高解像度対応で作成すべきで、教科書通りに進めようとすると適宜読み替えていく必要がでてきます。なお画面解像度という言葉ですが、現在では画面構成ピクセル数のことを指すようです。例えばiPhone 5の画面は縦1136ピクセル×横640ピクセルの解像度、という言い方をします。

いつも手元に置いておきたい!iPhone/Android画面解像度早見表

しかし厳密に言えば画面解像度とはピクセルの密度のことを指す(単位:ppiなど)ので、本来なら「画面ピクセル数」とでも言うべきです。が、すっかり一般的になってしまったようなので、この記事でも画面解像度、でいきましょう。

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

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

8.1 スマッシュHDの概要

教科書はiPhone 5以降の4インチiPhoneに対応していない。4インチiPhone(iPhone 5、iPhone 5s、iPhone 5c)の画面解像度は幅640ピクセル、高さ1136ピクセルである。

8.2 高解像度ディスプレイへの対応

1. 前回同様、サンプル素材を用いる場合は自分で画像を用意する必要はない。ダウンロードした素材フォルダの「8 SmashHD」フォルダの「Images-Retina」フォルダをプロジェクトに加えれば良い(第6章「6.1 ビュー・アイテム画像の作成」を参照)。
3. ここで触れられている論理座標空間は幅320ポイント、高さ480ポイントとなっているが、これは当時の最新機種iPhone 4S までのもので、4インチiPhoneでは論理座標空間が幅320ポイント、高さ568ポイントとなる。同様に4インチiPhoneのデバイス座標空間は幅640ピクセル、高さ1136ピクセルとなる。

8.3 ユニバーサル・アプリへの変換

2. プロジェクト・エディタの左上に「Smash」と書いてあるところをクリックする。
3. Summaryタブはない。代わりに「General」タブを選択する。「Deployment Info」セクションの「Devices」プルダウンメニューで「Universal」を選択すると、ダイアログボックスが出るので「Don’t Copy」を選択する。

図. 「Universal」を選択した時に出るダイアログボックス。ここでは「Don’t Copy」の方を選択する。

8.4 iPad用リソースの追加

1. 上記と同様にサンプル素材があらかじめ用意されている。「8 SmashHD」フォルダの「Images-iPad」と「Images-iPad-Retina」フォルダをプロジェクトに読み込む。
6. 「View」の代わりに「Storyboard」を選択する。
8. 「SmashViewController~ipad.xib」の代わりに「Main-iPad」と入力する。

8.5 iPad用ビュー・アイテムの作成

1. 「Main-iPad.storyboard」を開く。
2. この作業は出来ない。画面右下、ユーティリティ・エリアのオブジェクト・ライブラリから「View Controller」をエディタ・エリアにドラッグする。この時iPad用の画面が大き過ぎてエディタ・エリアに表示しきれない場合は、エディタ・エリア下部のズームアウトボタンを押せば全体を確認できる。ただし編集作業時には元のサイズに戻さなければならない。「=」ボタンを一度押せば元のサイズに戻る。

図. 画面右下のオブジェクト・ライブラリ。4つ並んでいるアイコンの右から2番目がオブジェクト・ライブラリ表示ボタン。今回はView Controllerをエディタ・エリアにドラッグする。

図. エディタ・エリア下部のStoryboard用ボタン。右から3番目がズームアウトボタン。右から2番目が戻す時のズームトグルボタン。

4. Identityインスペクタは、ユーティリティ・エリア上部に6つ並んでいるアイコンのうち左から3番目を選ぶ。
5. 「細かい部分は省略する」とあるが、これは第7章「7.5 ビュー・アイテムの作成」から「7.6 アウトレットやアクションの接続」までの部分を繰り返すので詳細についてはそちらを参照せよ、という意味。
7. 作業は不要
8. 作業は不要
9. 作業は不要
10. 「Default-Portrait~ipad.png」は選択できない。代わりに「Default-Portrait.png」を選択する。
12. 「File’s Owner」はない。代わりにDocument Outlineの「Smash View Controller」を選択する。
14. 作業は不要

8.6 ビューの自動回転

1. 作業は不要
2. 作業は不要
5. 「Summary」タブはない。代わりに「General」タブを選択。この画面には大きなボタンはない。「Devices」の下の「iPad」ボタンを選択し、「Main Interface」プルダウンメニューから「Main-iPad.storyboard」を選択する。さらにその下の「Device Orientation」で「Portrait」と「Upside Down」の2カ所にチェックを入れる。

図. プロジェクト設定「General」タブの「Deployment Info」セクション。「Universal」の場合には「iPad」ボタンがあるので、それを押してから「Main-iPad」を選択する。自動回転では「Upside Down」にもチェックを入れる。

8.8 機種に応じた処理

1. ソースコード初めの5行はviewDidLoadメソッドの初めの方([super viewDidLoad] ; よりは後)に追加する。NSTimer以下の処理は部分修正になるので注意。「0.5」と書いてあった部分を「timeInterval」に修正する。
2. 上記と同じく「0.5」を「timer.timeInterval」に修正。
3. 「Smash iPad 5.1 Simulator」は選択できない。代わりに「iOS Simulator」の「iPad」を選択する。

図. スキーム選択画面。ここでは「iPad」を選択する。「iPad Retina」も選択できるが、iOSシミュレーター画面が非常に大きくなるので、シミュレーター起動後ウィンドウメニューの「表示サイズ」で50%を選択すると見える範囲が広がる。

 

以上でSmash iPad版の完成です。画面が大きいと動いた時のうれしさも大きいですよね。今回はiPhone用の画面を拡大しただけですが、本格的にiPad用のアプリを作成する場合には、画面を2分割してメニューとメイン画面の両方を出せるのでさらに使いやすさや楽しさを追求することが出来ます。アイディア次第で今まで見たこともないようなアプリを作ることができるかも知れません。ものづくり派の人にとってiPadは刺激的なデバイスになると思います。

次回は加速度センサーを生かしたアプリに挑戦です。とてもスマホらしいアプリですので実機に転送した時の喜びもこれまた大きいと思います。

それから筆者がなぜ初心者向けにこのような記事を書くことになったのか、筆者の『iOSの教科書』に対する熱い想いなどを交えてご紹介したいと思います。お楽しみに。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

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

今すぐ新規会員登録
Page Top