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

MENU

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

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

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

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

実用的なアプリを手作りで

前回まで入門者向けに単機能のアプリを制作してきましたが、今回はやはり単機能ながら非常に実用的な「クロック」アプリに挑戦します。アラームクロックなのですが、『iOSの教科書』ではデジタルではなく、いきなりアナログ時計にチャレンジすることになります。

今までプログラミングに少し触れてお分かりかと思いますが、時計アプリを作る場合、時刻のデータを持ってきて、その数字を拡大して少し表示位置を調整すれば簡単にデジタルクロックが出来そうです。しかしここではあえてアナログアラームクロックです。アラームの設定方法もきわめてアナログ的です。『iOSの教科書』 の著者である赤松先生はメディアアートの専門家らしく、表示部や操作方法についてアナログの良さにこだわっていらっしゃるようです。

このこだわりのおかげで、実際に実機に転送してみると自分のiPhoneに素敵なアラームクロックアプリが加わった満足感を味わうことが出来るはずです。ただし制作プロセスに一手間「針の回転」に関する作業が必要になってきます。

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

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

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

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

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

1. 「ClockViewController.xib」の代わりに「Main.storyboard」を開く。

2. 今回の画面デザインは3.5インチiPhone(iPhone 4、4S)専用であり、さらにiOS6以前のものなので、背景のDefault.pngが画面に対して高さが20ピクセル足りない(高さ460ピクセル、幅320ピクセル)。これはiOS6以前では上部のステータスバーを表示するのに20ピクセル確保するためである。

なお、前回までのスマッシュやバランスはゲームなのでステータスバーを消して全画面に背景画面を表示している。これはiOS7以降ではデフォルトとなる。また、前回までの記事中では4インチiPhone(iPhone5、5s、5c)の全画面に表示させるために背景画面を上下方向に引き伸ばして配置している。今回のクロックでは高さと幅の比を変えられないデザインなので引き伸ばせない。そこで4インチiPhoneではDefault.pngを画面中央に配置し、3.5インチiPhoneでは上部20ピクセルをステータスバーとして残し、画面底面に合わせて配置することにする。Default.pngのサイズが足りない部分に余白が出来るので、背景のViewに目立たない色を設定した方が良い。

また、ここでは説明が簡略化されているが、Image Viewを5つ配置する時の順番が非常に重要である(後述)。

 

  • まず、自分の持っているiPhoneに合わせてStoryboradでの画面サイズを決定する。

アウトライン・ビュー(Xcode5では「Document Outline」)からClock View Controllerを選び、Attributes inspectorのSizeで3.5-inchか4-inchを選ぶ。

図. 自分の持っているiPhoneのサイズに合わせる。

  • 次に初期のViewの色を設定する(デフォルトは白)。

アウトライン・ビューからViewを選び、Attributes inspectorのBackgroundで色を選択する。

図. ViewのBackgroundを「Scroll View Textured Background Color」にしたのでView全体がグレーになる。

  • 次に時計パーツ画像を配置するが、配置の順番は以下のようにする。

図. パーツ画像を配置する時の順番、ファイル名、配置サイズ

上記の順に配置しないと教科書通りのデザインにならないので注意が必要。Image Viewを配置した直後は画像が歪んでいるのでSize inspectorでピクセルを合わせる。

図. Default.pngを配置後、Size inspectorでサイズを合わせる。「Origin」が左上になっている事に注目。画面上部に余白が出来るので、目立たない背景色が必要。

アラーム・ボタンの配置では、オブジェクト・ライブラリから「Button」を配置し、Typaを「Custom」にしてTitleの文字列「Button」を削除し、Sate Configの3つの状態に対し以下の画像をImageに割り当てる。

Default Alarm-Off.png
Highlighted Alarm-Pushed.png
Selected Alarm-On.png

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

1. アウトライン・ビュー(Xcode5では「Document Outline」)のボタンは画面が狭い場合に見えなくなることがある。対処方法は連載1回目の「6.2 イメージ・ビューの作成」の7. の部分を参考にしてボタンを表示する。また、アシスタント・エディタを開いた時に右半分にClockViewController.hが表示されなかった場合の対処方法は、同じく連載1回目の「5.3 アウトレットとアクションの宣言と接続」の2. の部分を参考にする。

10.8 ビューの回転

はじめの4つのソースコードは説明用のコードなので入力する必要はない。

2. hourHand、minuteHand、secondHandはそれぞれ先頭に「self.」か「_」を付加しないとエラーになる。

この後アプリをビルド・実行するが、このままでは各針の動きがバラバラになってしまう。これはXcode5の場合デフォルトでAuto Layoutが有効になっているためである。今回はAuto Layoutを無効にする。

図. View ControllerのFile inspector画面で「Use Autolayout」のチェックを外すと針が正しく回転する。

10.9 アラーム機能の追加

4. [self setAlarmItems]; はまだsetAlarmItemsメソッドを定義していないのでエラーになるが、あとで定義するのでここでは先に進める。

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

10. 10 タッチ座標の取得

1. ClockViewController.xibの代わりにMain.storyboardを開く。

2. Round Rect Buttonの代わりにButtonをドラッグする。

3. Typeを「Custom」に設定後、Titleの文字列「Button」を削除しておく。

10.11 タッチ座標と角度

はじめのソースコードは説明用のコードなので入力する必要はない。

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

10.12 アラーム音の準備

1. オーディオ・ファイルは既に用意されている。ダウンロードした素材フォルダの「10 Clock」フォルダの「Sounds」フォルダをプロジェクトに加えれば良い。

2. プロジェクトへの登録方法はImagesフォルダの場合と同じ。

3. フレームワークの追加方法は教科書第7章「7.11 フレームワークの追加」を参考にする。

10.15 ユーザ・デフォルトの処理

2. ClockViewController.hの#importの直後に書く。書く場所がわからない場合は、「10.18 クロックのソースコード」の前後関係を参考にして入力する。ただし、完成したソースコードにおいては、Xcode5のテンプレートでは存在しないコードや、iOS7では無効のメソッドも書かれているので注意が必要(後述)。

8. Xcode5のテンプレートではAppDelegateからメインのビュー・コントローラを直接「self.viewContoller」で呼び出す事は出来ない。ClockAppDelegateからClockViewControllerののオブジェクトを参照できるようにするために、ClockAppDelegate.mでClockViewController.hをimportする。

図. ClockAppDelegate.mのimport文で2行目のClockViewController.hを追加する。

さらにバックグラウンド処理に移る際に設定の保存処理を行うために、ClockAppDelegate.mのapplicationWillResignActive:メソッドでClockViewControllerのオブジェクトを呼び出してからメソッドを実行する(教科書ではapplicationDidEnterBackground:メソッドで行っているが、ここではより確実に保存処理を行うためにapplicationWillResignActive:メソッドで行っている)。

図. ClockAppDelegate.m内のapplicationWillResignActive:メソッドでユーザ・デフォルトの保存処理を呼び出す(コメントの下のソースを追加)。

10.16 ビューの自動回転

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

5. 今までと同様、この部分はアイコンではなく、チェックボタンになっている。

10.18 クロックのソースコード

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

これでクロックアプリの完成です。今回は前回と違って、ひとつのアプリで4インチiPhoneと3.5インチiPhoneの両方に対応するのは難しいと言えます。前回は画面サイズを合わせるために画像を引き伸ばしたりしましたが、今回の画像は設計上引き伸ばせません。さらに今回は4インチの場合はDefault.pngを画面中央に、3.5インチの場合は画面底面に合わせる、という細かい仕様になっているので、Auto Layout機能を使って自動で合わせるのは非常に困難です。

こういった場合にはStoryboardファイルを2つ用意して、アプリを実行する際に機種を判断して2つのStoryboardファイルを切り替えるのが現実的だと思われます。興味のある方はチャレンジしてみて下さい。

さて、今回のクロックアプリは機能が非常にシンプルです。例えばアプリがバックグラウンドに回ってしまうとアラームは鳴ってくれません。しかし実はあるシチュエーションにおいてきわめて実用的なアプリなのです。

みなさんの中にiPhoneを複数台持っている方もいらっしゃると思います。古いiPhoneやiPod Touchなどはどうなさっているでしょうか。iPhoneの中古は高く買い取ってもらえるのですが、思い入れがあったりしてなかなか手放せない方も多いと思います。

もし単機能の置き時計としてiPhoneが使えたら素敵だと思いませんか? そう、クロックアプリは自動ロックしない設定なので、置き時計として使えるのです。時計専用iPhoneなら処理がバックグラウンドに回る事もありません。そしてこのクロックアプリは机の上の小さい置き時計として優れたデザインを有しています。古いiPhoneがよみがえる! なんかワクワクしませんか? 

アプリというのは本当に無限の可能性を持っています。今まで誰も考えつかなかったスマートフォンの使い方に最初に気づくのが、ひょっとするとあなたかも知れないのです。コツコツものづくりするだけでも楽しいのに、出来上がったものが意外な価値を生み出す可能性を秘めている、これがアプリ作りの醍醐味だと思います。

デザインに優れたアナログ時計を作ってきましたが、アナログ時計を作れるのなら、もちろんデジタル時計も作れるはずです。発想がふくらんできませんか? 是非オリジナルデジタル時計アプリにもチャレンジしてみて下さい。

さて、次回は便利なユーティリティ、年齢計算アプリのエイジです。『iOSの教科書』発行時と現在とで画面の見た目が大きく変わるサンプルになります。つまりiOS7アップデートの目玉であるユーザインターフェースの改良の成果がはっきりと表れるアプリなのです。新しいユーザインターフェースが本当に使いやすいかどうかは実は意見が分かれるところなのですが、その違いを理解する事によってユーザインターフェース部品の使いこなしが身に付いてくるので、どうぞ楽しみにしていて下さい。

完全無料!

1で登録完了!

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

今すぐ新規会員登録
Page Top