アイキャッチ

Interface Builderでインターフェースを作ろう~SwiftからはじめるiOSアプリ開発:その3【初心者向けアプリ開発3分tips】

#働き方

iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。

さて、Xcodeが立ち上がったらナビゲーターエリアから「Main.storyboard」を選択しましょう。そうすると中央のエディタエリアにInterface Builderが現れます。

Interface Builderの画面

画面上には正方形の枠が表示されていますね。ここにアプリで使用する部材を配置していくわけですが、正方形だとiPhoneの画面っぽくありません。この画面をiPhoneのサイズにしてみましょう。

これからUIを配置しようとしているベースとなるもの、これをView Controllerといいます。まず、このView Controller自身を選択します。選択するには画面の上にある黄色の丸のアイコンをクリックしてください。

Interface Builderの画面

続いてInspectorエリアから「Attributes Inspector」をクリックします。そうするとView Controllerを設定できるパネルが表示されました。この一番上の「Simulated Metrics」の項目にある「Size」を「iPhone 4 inch」に変更してください。「iPhone 4 inch」とはiPhone 5とiPhone 5sの画面サイズとなります。

Interface Builderの画面

さあ、画面中央にはiPhoneサイズのView Controllerが表示されました。この上にアプリを構成する部材を置いていきましょう。

まずは文字を表示させるためのラベルです。今度はLibraryエリアから「Label」を探して、View Controller上にドラッグしてください。これで「Label」オブジェクトが配置されました。

では、iOSシミュレータで確認したいと思います。でも、その前に……先ほどView Controllerのサイズを「iPhone 4 inch」に変更しました。だからiOSシミュレータも「iPhone 4 inch」に対応するiPhone5かiPhone5sに変更しておきましょう。

さあ、変更ができたらビルドボタンを押してください。

Interface Builderの画面

シミュレータのiPhoneの画面上には「Label」という文字が表示されました。これは「Label」オブジェクトの中に 「Label」という文字が入っているから、このような表示になります。でも、これでは味気ないですね。

それではInterface Builderに戻って、文字を修正してみましょう。「Label」という文字のダブルクリックすると、文字が編集できるようになります。この文字を「Hello World!」と書き換えてください。

せっかくなので、文字が画面の真ん中に来るように「Label」オブジェクトの位置を調節しましょう。さあ、再度ビルドボタンを押してください。

シミュレータのiPhone画面に「Hello World!」の文字が表示されるはずです。

Interface Builderの画面

今度は画像を配置してみましょう。画像を配置するにはプロジェクトに画像を取り込まなくてはいけません。Xcodeの「File」メニューから「Add Files “…”」(“…”にはプロジェクト名が入ります)を選択してください。

そしてMac上にある任意の画像を選択します(※画像がない場合はこちらからダウンロードしてください)。

ここで重要なポイントがあります。選択画面に「Destination」という項目がありますが、外部からファイルを取り込む時は、このチェックボックスにチェックを入れるようにしてください。そうすると、プロジェクト内に取り込んだ画像のコピーが作成されます。アプリで画像や音声などの素材を使用する場合は、プロジェクト内にそのファイルがなくてはいけません。

素材を取り込む時は、「Destination」にチェックを入れるのを忘れないようにしましょう。

Interface Builderの画面

さて、画像を取り込んだら「Library」エリアの「Media」アイコンをクリックしてください。そうすると、取り込んだ画像が表示されます。この画像を「Label」と同じようにView Controller上にドラッグしてください。場所はイイ感じのところに調整してくださいね。

さあ、起動してみましょう。シミュレータに画像も表示されました。

Interface Builderの画面

InterfaceBuilderでコーディングする

ここまででLabelと画像のオブジェクトを配置しました。しかし、現状では配置したものがiPhone画面上に表示されるだけです。これではアプリっぽくありませんよね。それではアプリにボタン操作を取り入れてみましょう。

「Library」エリアから「Object」アイコンをクリックして、「Object Library」から「Button」オブジェクトを探してください。そして、「Button」オブジェクトを2つ画像の下に配置します。

Interface Builderの画面

「Button」という文字をダブルクリックして、1つは「隠す」、1つは「表示」とボタンの文字を修正してください。

Interface Builderの画面

さて、このアプリでは「隠す」ボタンを押すと画像が見えなくなり、「表示」ボタンを押すと画像が表示されるようにします。もちろん、このままではボタンを押しても何も反応はしません。その仕組みをプログラミングする必要があります。

まずはXcodeのAssistant Editorをクリックして、右側に「ViewController.swift」が表示されるようにします。

Interface Builderの画面

「ViewController.swift」はアプリを動かすためのコードを記述するためのファイルですが、Interface Builderを使用すると記述するコードが最小限で済みます。では、やってみましょう!

まずInterfaceBuilder内の画像上で「control」キーを押しながら、「ViewController.swift」にドラッグします。そうすると青い線が表示されるので、「ViewController.swift」の12行目にドロップしてください。パネルが表示されるので、「Name」に「mainImage」という名前を入力して「Connect」ボタンを押します。

Interface Builderの画面

続いて「隠す」ボタンの上で「control」キーを押しながら、「ViewController.swift」にドラッグします。場所は23行目にドロップしてください。今度は表示されたパネルの「Connection」を「Action」に変更します。

そして「Name」に「kakusu」と入力し、「Connect」をクリックします。「ViewController.swift」に新しいコードが追加されました。

Interface Builderの画面

では、同じように「表示」ボタンの上でも「control」キーを押しながら、「ViewController.swift」にドラッグします。今度は26行目にドロップしてください。表示されたパネルの「Connection」を「Action」に変更して、「Name」に「hyouji」と入力し、「Connect」をクリックします。

さあ、これでアプリを動かすための準備ができましたよ。まだ、コードの内容は理解しなくても構いませんが、「ボタンを押したときのアクション」に関するコードを2つ、そしてボタンを押した時に反応する画像についてのコードが記述されたことを理解しておいてください。

ここから、ボタンを押したときの処理を記述します。

では、25行目に以下のコードを記述してください。
mainImage.hidden = true

そして29行目には以下のコードを記述してください。
mainImage.hidden = false

Interface Builderの画面

「mainImage.hidden = true」は「mainImageという画像を扱うオブジェクトのプロパティを“隠す”(hidden)にする」という意味になります。この処理は、ユーザーが「隠す」ボタンを押した時に実行させます。

「mainImage.hidden = false」はその逆ですね。「mainImageという画像を扱うオブジェクトのプロパティを“隠す”(hidden)にしない」という意味です。この処理は、ユーザーが「表示」ボタンを押した時に実行させます。

さあ、「Build」ボタンを押してみてください。これで動くアプリを作ることができました!

Interface Builderの画面

今回はInterfaceBuilderを使用して、アプリを構成するオブジェクトを作りました。そしてInterfaceBuilderで配置したオブジェクトを操作できるようにコードを記述しました。これはiOSアプリ開発の基本です。

皆さんが普段使っているアプリはもっと複雑なものだと思いますが、このようにしてオブジェクトを作り、コードで操作することでアプリは開発されます。今回作ったアプリにいろんな工夫を加えれば、オリジナルの面白いアプリが作れるかもしれませんよ。

【講師プロフィール】
RainbowApps講師
桑村治良(くわむら・はるよし)

音楽雑誌の編集者からアプリエンジニアに転身したクリエイター。神奈川県三浦市に在住し、地域に根ざしながら自社でオリジナルアプリも多数リリースしている。主宰するonTheHammockでは、音楽系イラストレーター“フクザワ”のバンドマン育成ゲーム『私のバンドマン』、FMヨコハマの看板リポーターが横須賀/逗子をガイドするアプリ『FMヨコハマ藤田-穂積のズッシリスカ 横須賀/逗子案内』、三浦半島の野菜直売所などを紹介した『三浦のおやさい』などをリリース。Rainbow Appsでは代々木校、横浜校、湘南校で講師を務める。

>>連載バックナンバー:初心者向けアプリ開発3分tips

Twitterをフォローしよう

この記事をシェア

RELATED関連記事

RECOMMENDEDあなたにオススメ

RANKING人気記事ランキング

JOB BOARD編集部オススメ求人特集





サイトマップ