ギルド開発
ギルド開発
2016.04.19
第3回
大宇宙アプリ講座

初めてのiPhoneアプリを作ってみよう【ボタンを押すと表示される文字が変わる編】

七島 偉之

こんにちは! DevRelライターの七島偉之(ななしまひでゆき)です。普段は「Repro」というモバイルアプリ向けのアナリティクス&マーケティングサービスのDevRelを担当しています。

iPhoneが世に出てからというもの、そのおもしろさに魅せられてずっとiPhoneアプリの開発をしてきました。本連載では、1人でも多くの人がアプリを作れるようになり、僕が感じてきたアプリ開発の楽しさをお伝えできればと思っています。

第2回ではXcodeの使い方について学びました。第3回目の今回は、「ボタンを押したら表示されている文字が変わる」というアプリを作っていきます。簡単なアプリを作ることを通してアプリ開発の概要を掴んでいきましょう。

Screen Shot 2016-04-13 at 01.21.48

今回は前回作ったプロジェクトを使っていきますのでまだ準備されてない方は第2回の記事をご覧ください。

アプリ開発の流れ

基本的なiPhoneアプリ開発では

  • Storyboardでアプリの見た目を作って
  • ソースコードと紐付けて
  • プログラムでアプリの動きを作る

というような流れで開発を進めていきます。まずは難しいことは考えず、本記事の操作と同じようにやってみて感触を掴んでいきましょう。

アプリの見た目を作る

見た目の部分はStoryboardで作っていきます。Storyboardでは見た目を構成する部品をドラッグ&ドロップなどで配置して見た目を作ることができます。

今回配置するのは

  • 背景画像(ImageView)
  • 文字(Label)
  • ボタン(Button)

です。

Pasted_Image_4_13_16__03_31

まずはStoryboardの設定をします。前回作ったプロジェクトを開いて①ナビゲーターエリアでMain.storyboardを選択します。②表示されたStoryboardに配置されている四角い領域がアプリの画面にあたります。この領域の左上にある黄色のアイコン(ViewController)を選択し、③ユーティリティエリア上部の右から3個目のアイコン「Attributes Inspector」を選択します。④表示されたSimulated Metricsの「Size」をiPhone 4-inchにしましょう。そうすると四角い領域がiPhone5sと同じ大きさになります。

 
shibao

次に画面に表示する画像のimportをします。今回は上記の画像を使います。画像のところで右クリックをして画像を保存してください。

 
Pasted_Image_4_13_16__03_34

保存した画像ファイルをナビゲーターエリアにドラッグ&ドロップすると、プロジェクトに画像ファイルをimportすることができます。

 
Pasted_Image_4_13_16__03_40

画像ファイルをimportする際にファイルの追加についてのオプションを聞かれるので、Destinationの「copy items if needed」にチェックをつけて「Finish」を押します。

copy items if neededはimportの際にプロジェクトにファイルのコピーを作成する設定です。これにチェックをつけた状態でimportしておくと元のファイルを移動させたり消したりしても、プロジェクト内に必要なファイルがコピーされているため困りません。入門者の方はチェックをつけた状態でimportしておくことをお勧めします。

さて、画像ファイルをimportできたのでさっそくStoryboardに配置します。

 
Pasted_Image_4_13_16__11_20
①Main.storuboardを選択した状態で②ユーティリティエリア下部の一番右のアイコン「Media library」を選択するとimportした画像があるので、これを③Storyboardにドラッグ&ドロップします。画像を移動させるとガイドラインが出てきますので、ちょうどいい位置に調整してみましょう。(なお、Media libraryなどのアイコンの名前はアイコンの上にカーソルをホバーすると表示されます)

 
Pasted_Image_4_13_16__13_20

画像が配置できたら次に文字を表示するLabelを配置します。①Labelはユーティリティエリア下部の右から2番目の「Object library」にあります。Object libraryにはさまざまな部品がありますが、最下部の検索窓を使うと目的の部品を探しやすいです。ここでは②「Label」と入力してLabelを探します。③Labelが見つかったらドラッグ&ドロップでStoryboardに配置します。

 
Pasted_Image_4_13_16__13_33

Labelを配置したらLabelの属性を設定していきます。①Labelをダブルクリックして表示する文字を「初アプリ!」に変えます。②ユーティリティエリア上部の右から3番目のアイコン「Attributes library」を選択し、「Font」でフォントサイズを36ポイントに、③「Alignment」で真ん中寄せに設定します。

 
Pasted_Image_4_13_16__13_36

同様にButtonも配置します。①Object libraryにて②Buttonで検索し、③Storyboardにドラッグ&ドロップで配置します。

 
Pasted_Image_4_13_16__13_50

Buttonについても①Buttonをダブルクリックして文字を「祝」に変更、②Attributes Inspectorの「Font」からフォントサイズを36ポイントに、③「Text Color」にて文字の色を赤に設定します。

これで見た目が完成しました!

 
シミュレーターで見た目を確認してみましょう。シミュレーターとはiPhoneの動きをソフトウェアで再現したものでMac上でiPhoneを動かせます。

 
Pasted_Image_4_13_16__13_57

シミュレーターを起動するには①ツールバー上で起動したいシミュレーターの種類を選び(ここではiPhone5sを選択します)、②再生マークのボタンを押します。

 
Pasted_Image_4_13_16__13_58

シミュレーターでちゃんと表示されました!

ソースコードと紐付ける

さて、シミュレーターで見た目を作ることはできましたが、まだButtonを押しても何も反応しません。ここからButtonを押したときに「Labelに表示されている文字を変える」というプログラムをしていきたいのですが、プログラムをする前段階として先ほどStoryboardに配置した部品とソースコードを紐付ける必要があります。

Pasted_Image_4_13_16__14_24

紐付けをするにはアシスタントエディタを使うと便利です。①Storyboardを開いた状態でツールバーの右側にある輪っかが2つ重なったようなボタンを押します。するとアシスタントエディタが開いてStoryboardと関連するソースコードが表示されます。

画面が狭い場合は②ユーティリティーエリアを非表示にしたり、③Document Outlineを非表示にしたりすると画面を広く使えます。

 
Pasted_Image_4_13_16__14_28

アシスタントエディタが開けたらLabelとソースコードを紐づけていきます。

Labelを選択した状態でLabelを「control」キーを押しながらソースコードの青い線が出るところへドラッグ&ドロップします。

 
Pasted_Image_4_13_16__14_38

ドロップするとポップアップが出てくるので①Nameの部分に任意の名前(ここではlabel)を入力して②Connectを押します。

 
Pasted_Image_4_13_16__14_41

すると自動的にソースコードが生成されます。今後Labelをプログラムで操作するには、Nameで指定したlabelという名前で操作することができます。

 
Pasted_Image_4_13_16__14_42

同様にButtonについてもソースコードとの紐付けをしていきましょう。Buttonをcontrolキーを押しながら青い線が出るところへドラッグ&ドロップします。

 
Pasted_Image_4_13_16__15_02

ドロップして出てくるポップアップにて今度は①Connectionで「Action」を選択します。②Nameに任意の名前(ここではtappedButton)を入力し、③Connectを押します。

 
Pasted_Image_4_13_16__15_02

Labelのときと同様に自動的にソースコードが生成されます。これでButtonがタップされたというアクションが発生するとtappedButtonという処理が呼ばれるようになりました。

アプリの動きを作る

最後の仕上げとしてtappedButtonの{}の中にLabelの文字を変えるプログラムを1行追加しましょう。

label.text = "表示したい文字"

Pasted_Image_4_13_16__15_09

これで完成です! シミュレーターで動作確認してみましょう。動きましたか?

まとめ

iPhoneアプリ開発は

  • Storyboardでアプリの見た目を作って
  • ソースコードと紐付けて
  • プログラムでアプリの動きを作る

が基本的な流れです。複雑なアプリでもこの流れがベースですのでまずは慣れていきましょう。

次回は今回少しだけ触った「シミュレーター」の使い方について学んでいきます。お楽しみに!

 

アプリ開発授業のお知らせ
オンラインで授業を受けられるschoo(スクー)でもアプリ開発の授業をしています。動画でアプリ開発を学びたい方は下記もチェック!

Swiftで作るiOSアプリ開発入門

今回の内容は2限目の「はじめてのiPhoneアプリを開発する」で取り扱っています。