エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

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

タグ : Interface Builder, iOS, RainbowApps, Swift, Xcode, アプリ開発, 初心者 公開

 
スクール講師がアドバイス!初心者のためのアプリ開発3分tips

アプリ開発スクール『RainbowApps

日本で初めて、プログラミング受講料の無料提供を始めたアプリ開発スクール。iPhone、Android、Unity、HTML5、AWSコースを展開しており、受講用のMac完備、初心者・未経験者から受講OK。特徴は、大手IT企業からベンチャーまで、受講後の就職・転職もサポートしている点だ。全国で教室を開いているほか、オンライン講座も展開中。詳しい情報はコチラ

こんにちは、日本最大のアプリスクール『RainbowApps』で、iOSアプリ開発の講師をしている桑村治良(くわむら・はるよし)です。onTheHammockというアプリレーベルを主宰し、さまざまなアプリをリリースしています。本連載では、iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。

今回はiOS編の「Interface Builderでアプリのインターフェースを作ろう」です。iOSアプリの開発ツールであるXcodeと、その優れた機能であるInterface Builder/Storyboardの使い方を紹介したいと思います。

Interface Builderを使えば、プログラミングを深く理解していない状態でもアプリのインターフェースを作ることができます。操作も直感的で行うことができますよ。

Xcodeの最新バージョンであるXcode6をまだインストールしていない方は、第1回の記事を参照してインストールしておいてください。またXcodeの概要とプロジェクトの作成などに関しては第2回の記事を参照してください。

InterfaceBuilderとは

Interface Builderとはその名の通り、アプリのインターフェースを構築するツールです。iPhoneやiPadに馴染みのある方は、さまざまなアプリで共通する画面や共通するボタンをがあることにお気付きだと思います。

Appleでは、どんなアプリでも共通した操作性を実現できるようにUIKitというフレームワークを用意しています。これによりiOSアプリはユーザーが直感的に扱える、操作性の高いものとなっています。

しかし、なぜ共通した操作性があった方がよいのでしょうか?

例えば「スイッチ」というものをイメージしてください。人によっていろんなデザインの「スイッチ」が思い浮かぶことでしょう。その中にはとても斬新なデザインの「スイッチ」があるかもしれません。

でも、その斬新なデザインは一見すると他の人には「スイッチ」と分からないかもしれません。そういうデザインは、どのように操作するのかも分かりにくいですよね。

直感的に操作できるアプリというものは、誰が見ても分かるデザインの部材によって構成されています。そしてAppleは、ユーザーにとって操作性の良いアプリを開発者が生み出しやすいようにUIKitを用意したわけです。

UIとはユーザー・インターフェースの略ですが、UIKitはボタン、スイッチ、スライダー、ラベルといったものから、文章、画像、地図、Webページなどさまざまなユーザーインターフェースの部材を扱っています。

こうしたアプリを構成する部材をオブジェクトと表現します(本当はオブジェクトにはもっと広い意味があります)。このUIに関するオブジェクトをグラフィカルに組み合わせて、アプリの画面を設計するツールがInterfaceBuilderとなります。

InterfaceBuilderでオブジェクトを配置する

では、さっそくInterface Builderに触れてみましょう。

Xcodeを起動して新規プロジェクトを作成します。テンプレートは「Single View Application」を使用してください。Product Nameなどは任意で結構です。Languageは「Swift」、Devicesは「iPhone」を選択して、任意の場所に「Create」してください。

Xcodeを起動

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

中央のエディタエリアにInterface Builderが現れる

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

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

View Controller自身を選択

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

iPhoneサイズのView Controllerに

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

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

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

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

iOSシミュレータもiPhone5かiPhone5sに変更

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

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

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

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

iPhoneサイズのView Controller

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

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

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

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

画像取り込み

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

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

取り込んだ画像が表示された

InterfaceBuilderでコーディングする

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

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

ボタンを表示

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

ボタンの文字を修正

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

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

ViewController.swiftを表示

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

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

「ViewController.swift」の12行目にドロップ

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

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

新しいコードが追加

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

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

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

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

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

ボタンを押したときのアクションに関するコードが追加された

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

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

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

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

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

>> いよいよver1.0がリリース!SwiftからはじめるiOSアプリ開発:その1 はこちら
>> Xcodeの使い方を基礎から学ぼう~SwiftからはじめるiOSアプリ開発:その2 はこちら

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

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

【著者からひと言】 iOS、Android、Unityなどのアプリ開発を本格的に学びたい方は、ぜひRainbowAppsにお越し下さい。プログラミング初心者の方から経験者の方まで、レベルに合わせた対応が可能です。

■ 詳しくは公式HP:『RainbowApps




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る