いまや誰もがスマートフォンでアプリを使う時代、アプリ開発の需要は高まり続けています。Webデザイナーやフロントエンドエンジニアにとってネイティブアプリの開発は難しいイメージがあるかもしれませんが、Web開発の知識と照らし合わせながら学習すれば怖いものではありません。

このLESSONでは、「WebデザイナーのためのiOSアプリ開発入門」と題し、アプリ開発の経験がないWeb制作者がXcodeの使い方やSwiftの書き方といったiOSアプリ開発の基礎知識を身につけ、簡単なアプリを作れるようになることを目標とします。

最終的には、キーワードを入力してTwitterに投稿された画像を検索し、表示するアプリを完成させます。

第1回は、iOSアプリの基礎的な知識、環境構築、簡単なアプリの作成までを紹介します。

Web制作との比較で学ぶ、iOSアプリ開発の流れ

iOSアプリはどのようにして開発するのか、単純なアプリを例にWebと比較して考えてみましょう。

画面上にはボタンが1つ配置され、タップするとテキストフィールドに文字列が出力されるアプリを想定してください。

Webアプリとして作成する場合、次のような手順で作成します。

1. HTMLで要素を作成する
2. CSSで見た目やレイアウトを整える
3. JavaScriptでタップ時のアクションを設定する

iOSアプリとして開発する場合は、次のような手順です。

1. 開発環境「Xcode」のストーリーボード上で要素を配置し、見た目やレイアウトを整える
2. プログラミング言語Swiftでタップ時のアクションを設定する

つまり、HTMLとCSSによるレイアウトの機能はXcodeのストーリーボードが担い、JavaScriptによる要素の操作はSwiftが担う、というわけです。

では、Xcodeやストーリーボード、Swiftとはいったい何なのでしょうか。実際に手を動かしてアプリを作りながら学びましょう。

XcodeはiOSアプリを開発するIDE

Web制作では「Adobe Dreamweaver」や「Atom」といったツールを使ってHTMLやCSSをコーディングします。iOSアプリ開発で制作ツールに当たるのが、「Xcode」というIDE（統合開発環境）です。XcodeはiOSやmacOSのアプリ開発に必要な機能を備えたツールで、macOSのユーザーであれば、誰でも無償でインストールできます。

Xcodeのインストール方法とプロジェクトの初期設定

Xcodeは、「Mac App Store」からダウンロード・インストールができます。

インストールが完了したら、スタート画面で[Create a new Xcode project]をクリックし、新しいプロジェクトを作成します。

プロジェクトのテンプレート画面が表示されます。ここでは、次のように操作します。

① [iOS]タブをクリック
② [Single View Application]を選択
③ [Next]ボタンをクリック

[Single View Application]は画面が1つだけのアプリを作るためのテンプレートです。後ほど画面は追加できるので安心してください。

プロジェクトの詳細設定画面が表示されます。次のように設定してください。

① [ProductName] : プロジェクトの名前。任意の名前を設定できるが、今回は「MyProject1」と設定する
② [Organization Identifier] : アプリ申請時に必要となる組織の識別名。テスト用アプリなので、今回は適当に「com」と設定する
③ [Language] : 開発に使用する言語。[Swift]を選択する
④ [Devices] : アプリの対象デバイスを選択。[iPhone]を選択する

設定が完了したら、⑤ [Next]ボタンをクリックします。

最後に、ファイルの保存場所を指定して[Create]ボタンをクリックすれば、プロジェクトの初期設定は完了です。なお、[Create Git repository on]の箇所にチェックを入れると、Gitのリポジトリを作成できます。リポジトリが不要であればチェックを外してください。

ストーリーボードによる画面作成

Xcodeのセットアップが終わったら、さっそくアプリを作っていきましょう。まずは、「ストーリーボード」で画面を作成します。ストーリーボードとは、Xcodeでアプリの画面を開発するためのファイルのこと。1画面は「View Controller」という単位で区切られ、画面が増えるごとにView Controllerが増えていきます。

1. Xcodeの画面左上のフォルダーアイコンをクリックし、ファイルの一覧がリストアップされている「プロジェクトナビゲータ」を表示する
2. ストーリーボードのファイルであるMain.storyboardを選択すると、画面中央部にストーリーボードが表示され、その中にView Controllerが現れる

プロジェクトナビゲータはmacOSのFinderのようなもので、編集ファイルを切り替えるときに使います。アプリ開発に慣れないうちは、見知らぬ画面になったらこのプロジェクトナビゲータとストーリーボードを表示するとよいでしょう。

ボタンの配置

Webページでボタンやテキストフィールドを表示するときには、button要素や「type="text"」のinput要素を使用します。XcodeによるiOSアプリ開発では、画面右側にあるエリア（オブジェクトライブラリ）から必要な要素をドラッグ＆ドロップすることで、要素を配置します。もしオブジェクトライブラリが表示されていなければ、画面右上の[Hide or show Utilities]ボタンをクリックし、中部にある[Show the Object library]ボタンをクリックします。

ボタン用の[Button]オブジェクト、テキストフィールド用の[Text Field]オブジェクトをそれぞれ配置してみましょう。

各要素の見た目は、画面右側のアトリビューツインスペクタ（Attributes Inspector）で設定できます。見た目を変更したい要素をクリックすれば、要素に応じて自動的にアトリビューツインスペクタが切り替わります。もし要素をクリックしても表示されてない場合は、図の中部にある小さな四角形で囲んだ[Show the Attributes inspector]ボタンをクリックします。

Swiftでプログラムを作る

アプリの画面ができたので、プログラムで動きを実装しましょう。Webアプリの場合は、HTML・CSSで作成した要素に対してJavaScriptで通信をしたり、アニメーションを実装したりします。iOSアプリでは、Swiftを使ってプログラムを作ります。

Swiftは学びやすいプログラミング言語

Swiftとは、iOS／watchOS（Apple Watch用のOS）／macOSといった、Apple製品のOS上で動作するプログラミング言語です。2014年に誕生した新しい言語ですが、他のプログラミング言語の長所を多く取り入れているため、プログラミング経験者・未経験者問わず、比較的学習しやすい言語です。

詳しくは今後のLessonで解説しますが、次の表で示すように、SwiftとJavaScriptは多くの面でコードが似ています。Web制作でJavaScript（あるいはjQuery）の経験があれば、スムーズに学習できます。

プログラムはViewController.swiftに定義する

ストーリーボードにボタンなどの要素を配置すると、画面上の要素をコントロールするSwiftファイル「ViewController.swift」が自動的に生成されます。このSwiftファイル内にプログラムを記述し、ボタンをクリックしたらテキストフィールドに文字が表示されるプログラムを書いてみましょう。

画面の要素とSwiftを接続する

Xcodeを使ったアプリ開発では、画面上の要素とSwiftのコードを接続することで、要素を操作したり、タップ時のアクションを設定したりできます。

要素とSwiftのコードを接続するために、Xcodeの画面にストーリーボードとSwiftのコード編集画面を同時に表示します。

①Main.storyboardをクリック
② 画面上部のエリア（ツールバー）の図のボタンをクリック
③ 図の部分を[Automatic]にすると、画面に関連するSwiftファイルであるViewController.swiftが表示される

画面上の要素を取得する (IBOutlet)

サンプルアプリでは、テキストフィールドを取得し、そのテキストを書き換える処理が必要です。JavaScriptで言えばdocument.getElementById("id名")（jQueryでは$("id名")）で要素を取得するのと同じです。

次のようにして画面（View Controller）とプログラム（UIViewController.swift）を紐付けます。

① テキストフィールド上で右クリック(または[control]キー + クリック)しながら、ViewController.swiftまで線を引っ張ります
② Connection(接続方法)を、[Outlet]に設定します
③ Nameの箇所に、テキストフィールドの名前を入れます（例として、myTextFieldと設定）

これで、Swift上から画面のテキストフィールドをmyTextFieldという名前で操作できるようになりました。このような接続方法をIBOutletといいます。

ボタンタップ時のイベントを設定する (IBAction)

JavaScriptでは要素.addEventListener("click", 処理)（jQueryでは要素.click(処理)）でボタンタップイベントを設定しました。SwiftでもIBOutletでイベント設定をしてもよいのですが、もっと簡単な方法があります。

① ボタン上で[control]キーを押しながらViewController.swiftまで線を引っ張る
② [Connection]を[Action]に設定する
③ [Name]に、処理の名前を入力（例として、onButtonTapと設定する）

完了すると、次のようにonButtonTapという名前の関数ができます。ボタンをタップした際に実行される関数です。このような接続方法をIBActionといいます。

@IBAction func onButtonTap(_ sender: Any) {
}

要素の取得・イベントの設定ができたので、この2つを組み合わせてボタンタップ時にテキストフィールドの書き換えを行いましょう。

@IBAction func onButtonTap(_ sender: Any) {
    myTextField.text = "タップされました"
}

アプリの実行方法

画面の作成、プログラムの作成が完了したので、実際にアプリとして動かしてみましょう。アプリの動作を確認するには、iOSシミュレーターを使う方法と、iOS実機端末を使う方法があります。

iOSシミュレーターを使う方法

iOSシミュレーターとは、macOS上でiOSの動作を確認できるツールです。実機そのものではないためセンサーを使えない、処理が重く画面のアニメーションがやや遅い等の制限はありますが、コンテンツの挙動をすばやく確認したい場合に便利です。アプリ開発中は主にiOSシミュレーターで確認するのがよいでしょう。

次の手順で使用します。

① 画面上部のツールバーより、シミュレートしたい端末を選択。今回は[iPhone 7]を選択する
② [command] + [B]キーを押すと、iOSシミュレーターが起動する

これでアプリをデバッグできるようになります。

完成版のファイルは次のリポジトリよりよりダウンロード可能です。ファイルをダウンロード後、「lesson1/MyProject1_Complete」をご確認ください。

https://github.com/ics-kano/swift-lesson

iPhone・iPadの実機端末を使う方法

MacとiOS端末をLightningケーブルで接続し、実機端末上でアプリの動作を確認する方法です。iOSシミュレーターと違い、センサーを使うことができ、動作も軽快です。App Store実機上でデバッグするだけであれば、無料で利用できます（※）。ただし、初期設定がやや煩雑なため、ある程度アプリ開発の知識を得た後に試すのがおすすめです。詳しくは記事「[Xcode][iOS] 有料ライセンスなしでの実機インストール 全工程解説！ ｜ Developers.IO」を参照ください。

やってみよう、iOSアプリ開発

ここまで手順どおりにやれば、10分程度でアプリの動作をチェックできたはずです。アプリ開発やSwiftには興味があるけど難しいのではないかと感じている人も、普段のWeb制作の知識に絡めると学びやすいでしょう。

今回作成したサンプルは、まだまだアプリとしては物足りません。次回は、画像表示の方法、ディスプレイサイズに応じた適切な要素のレイアウト方法について学びます。