iPhoneアプリ制作に挑戦
9月16日に登場したiOS 9に合わせて、Xcodeもバージョンが6から7に変わりました。スウィフト周りでも追加項目がいろいろありますが、何よりも、誰でも自分のiPhoneで開発中のアプリを実行できるようになったのが大きいでしょう。これまでは、年間1万円前後の登録料を支払って開発者登録をしなければ、自分のiPhoneでアプリを動かすことはできませんでした。登録の手順もなかなか難しくて、そこでつまずく人も多かったはず。いろいろ試してみたい日曜プログラマーには朗報ですね。
というわけで今回は自分が作ったアプリを、自分のiPhoneの上で動かしてみましょう！ 前回は、iPhoneアプリを作るために、Xcodeのプロジェクトを作って、シミュレータ上でアプリを実行する流れを説明しました。今回は、連載の2回目と3回目に解説したお絵描きプログラムを、アプリの中に組み込んでみたいと思います。さらにタッチ操作に反応して内容が変わるようにしてみましょう。
【STEP 1】新規プロジェクトを作ろう
前回と同様に、Xcodeの［File］メニューから［New］→［Project］を実行して、もっとも基本的なアプリである［iOS］の［Application］の中にある［Single View Application］を選択してプロジェクトを作成しましょう。プロジェクト名をここでは「DrawCanvas」、［Organization Identifier］には「mytest」としておきます。［Language］には［Swift］を選択。ほかのオプションを変更する必要はありません。
ウインドウ左側のプロジェクトナビゲータから［Main.storyboard］を選択して、UIデザインを編集しましょう。ウインドウ右下にあるライブラリ領域から、右から2番目にある［Object Library］をクリック。そこから画像を表示するための［Image View］を選択して、画面にドラッグします。貼り付けたImage Viewはサイズを調整して、画面全体に拡大しておいてください。
アプリがどんなサイズのiPhoneで実行されたときでも正しいサイズで画像が表示されるように、設定を追加します。この設定を追加するためには、Image Viewをクリックして選択したあと、Xcodeのメニューから［Editor］→［Resolve Auto Layout Issues］→［Reset to Suggested Constraints］を実行します。するとImage Viewの上下左右の辺が画面端にくっついて表示されるようになります。
画像がきれいに表示されるように、Image Viewの設定を変更しておきましょう。Image Viewをクリックして選択し、ウインドウ右上にあるインスペクタ領域の、左から4つ目にあるAttributesインスペクタを表示して、［View］の［Mode］を「Aspect Fit」にしておきましょう。
【STEP 2】コードを書こう
連載2回目と3回目のやり方で、プレイグラウンドを使って好きなお絵描きプログラミングのコードを書いてみましょう。iPhone 6の画面サイズは横375ポイント×縦667ポイントで、時間などが表示されている上部のステータスバー領域が縦20ポイントありますので、今回はそれに合わせて、画像のサイズを375×647ポイントにしています。
プレイグラウンドのお絵描きプログラミングで画像が作れたら、それをアプリ上で表示しましょう。DrawCanvasプロジェクトで［ViewController.swift］を選択して、viewDidLoadメソッドを上図のように実装します。最初の4行はプレイグラウンドからコピー＆ペーストして、最後の2行は新しく追加します。最後の2行で、画像ビューを取得し、そこに作成した画像をセットします。
【STEP 3】アプリを実行してみよう
まずシミュレータ上でアプリを実行するために、ウインドウ左上のボタンで、実行対象にiPhone 6を選択しておきましょう。そして左側にある右向きの三角形の実行ボタンを押して、シミュレータ上でアプリを実行します。
シミュレータ上で起動したアプリを見ると、プレイグラウンドで作成したのと同じ画像が表示されていることが確認できます。ViewController.swiftにコードをコピー＆ペーストすることで、プレイグラウンドで結果を見ながら作成したコードを簡単にアプリ上で使えることがわかります。
普段充電に使っているライトニングケーブルでiPhoneをMacに接続すると、Xcodeで実行対象にiPhoneを選択できるようになります。該当するiPhoneを選択して実行ボタンを押して、アプリを起動してみましょう。
ViewController.swiftの最後に、図のようなtouchesBegan()メソッドを実装してみましょう。touchesBegan()メソッドは画面が指でタッチされるたびに呼び出されますので、このメソッドを実装することでタッチに反応できるようになります。
touchesBegan()メソッドの中では、タッチの位置を中心にして、画像の中に円を描画していきます。「imageView.image?.drawAtPoint(…)」の部分がポイントで、画像を作成するたびに、Image Viewにセットされている1つ前の画像の内容を最初に描画しています。これによって元の画像の上にどんどん円が追加されていきます。これだけで簡単なお絵描きアプリが完成しました！
【まとめ】
前回と今回は、プレイグラウンドとプロジェクトを使いながら、スウィフトで簡単なアプリを制作する手順を紹介しました。次回からはさらに豪華に、アニメーションがついたアプリの作り方を見ていきたå思います。
次回のテーマ
スウィフトでアニメーション・プログラミング（前編）
【冒険記】
先月はオーストリアに2週間ほど滞在していました。現地のスーパーではバナナを買うのもひと苦労。まず専用の計りで重さを量って、バーコードを印刷しなければ売ってくれません。最初から計量して売っている日本のやり方は、必ずしも当たり前ではないんですね。
【冒険記】
オーストリアの標準語はドイツ語です。レジでのドイツ語会話が課題だったのですが、駅前の大きなスーパーにセルフレジがあるのを発見してからは、ずっとそこに通うようになりました。技術の進歩に感謝！ 日本にいる外国の方にも同じような恩恵が増えればいいですね。
Dr.さざめき（aka.沼田哲史）
1978年1月生まれ。某大学でプログラミングを教えつつ、ふらっとヨーロッパ旅行に出かけて美味しいものを食べ歩いたり、時折、iOSプログラミングの本を出したり。Mac歴16年。いつかアメリカ西海岸でお昼から美味しいIPAビールを飲みながらプログラミングするのが夢です。Twitter @sazameki
