前回の記事「WebエンジニアのためのSwift言語入門」では、ActionScript 3.0やJavaScriptなどのWeb開発技術と比較しながらSwiftすうぃふと言語を紹介しました。今回もWeb開発技術と比較しながら、フレームワーク「UIKitゆーあいきっと」と開発環境「Xcodeえっくすこーど」を使ってiOSアプリ開発手順を紹介します。本記事ではXcode 7.2とSwift 2.1を用いて説明します。

Webページ制作とiOSアプリ開発

Webページ制作では要素のレイアウトをHTML・CSSで行い、動的な振る舞いをJavaScriptで実装します。iOSアプリ開発においては、ボタン要素や画像要素といったレイアウトを「Storyboard」で行い、動的な振る舞いをプログラミング言語「Swift」で実装することができます。Storyboardを使わずにSwift言語だけでアプリを作ることも可能ですが、Storyboardを使う方が直感的にUIを作成できるため最初のうちはおすすめです。

Webページ制作とiOSアプリ開発

開発環境の準備

開発環境であるXcodeを「Mac App Store」からダウンロードします。Xcodeを起動したら[Create a new Xcode project]を選択します。

Xcodeの起動画面

アプリで使用するフレームワークを選択する画面になります。iOSアプリ開発のフレームワークである「UIKit」を使い、1画面のみのアプリを作りましょう。

■ 手順
① 画面左側から「Application」を選択します。
② 画面右側の一覧から「Single View Application」を選択します。
③ 「Next」をクリックします。

Xcodeのプロジェクト新規作成画面

つづいて、プロジェクトの設定画面が表示されます。

■ 手順
① 図の①の箇所は、テスト段階では任意の値で構いません。
② [Language]を「Swift」、[Devices]を「iPhone」にします。
③ 「Next」を押し、任意の場所にプロジェクトファイルを保存します。

言語設定でSwiftを選びます

Storyboardによる画面設計

プロジェクトの準備ができたので、画面を設計してきます。iOSアプリのそれぞれの画面は、ViewControllerという単位で分かれています。今回は1つの画面だけですが、複数の画面を設計する場合は画面の数に応じてViewControllerが増えていくことになります。それらの画面を設計するのがStorybordです。実際の設計はMain.storyboardというファイルを使って行います。

■ 手順
Main.storyboardファイルを選択すると中央のエリアにアプリの画面が表示されます。これがViewControllerで、アプリの1画面になります。
②③ 順にボタンを押します。
④ [Size]の箇所で画面サイズを「iPhone 4.7-inch」(iPhone 6用の画面サイズ)に設定します。

ストーリーボードの設定

要素の配置

画面の用意ができたので、要素を配置していきます。今回はボタンとテキストフィールドを配置します。

■ 手順
① 右側のエリア(ユーティリティエリア)で図のボタンを押すと、画像やテキスト、ボタン等の画面上に配置できるiOSの要素が表示されたビュー(オブジェクトライブラリ)が現れます(※)。
② ボタン要素の[Button]コンポーネントをドラッグします。
③ 画面上にドロップします。
※ ユーティリティエリアが表示されていない場合はツールバー右端のボタン、オブジェクトライブラリが表示されていない場合は[View]→[Utilities]→[Show Object Library]を選択すると表示されます。

150512_swift_button_setting

配置したボタン要素を選択すると、下図の赤枠部分からデザインを変更できます。

150512_swift_button_setting2

同様にしてテキストフィールドを配置します。

150512_swift_textfield_setting

以上で画面構成は完成です。次のページではSwift言語によるプログラミングで、インタラクションを実装していきましょう。