iOSアプリ開発が初心者でもできる！　アプリを作りながら解説！（Udemy メディア）

2019年06月11日 16:00:00
エンタメ
ガジェット通信

この記事は『Udemy メディア』から寄稿いただきました。

iOSアプリ開発について、現役のiOSエンジニアの筆者が初心者向けに丁寧に解説しています。

この記事では、Appleの開発ツールXcodeを使って、iOSアプリ開発にチャレンジします。最新のXcodeの入手から、グラフィカルインタフェースのついたiPhoneアプリ開発まで、スクリーンショットを交えて解説します。

実際に、iOS用の「通貨変換アプリ」の開発を通して、作り方や注意点など解説していきます。本記事を読み終える頃には、iOSアプリ開発の基礎が身についていることでしょう。

ぜひ最後まで読んで、iOSアプリ開発初心者の壁を突破しましょう！

効率的に学びたい方はiOS 10、Swift3に対応した動画講座を用意しているので、そちらもご覧ください。

https://www.udemy.com/ios10japan/

1 iOSとは？

2 Xcodeをインストールしよう（OS X）

3 Xcodeを起動して、Playgroundを使ってみよう

4 Xcodeでプロジェクトを追加しよう

5 UIコンポーネントを追加しよう

6 IBOutletを追加しよう

7 IBActionを追加してアプリを実行しよう

iOSとは？

iOSは、AppleのiPhoneやiPadに搭載されているオペレーティング・システム（基本ソフトウェア）です。2016年7月現在の最新版はiOS 9で、2016年9月にはiOS 10という最新版が公開される予定です。

▲Appleの開発情報サイト

（https://developer.apple.com/ios/）

iPhoneやiPadなどのiOSデバイス上で動作するアプリを開発するには、Swiftというプログラミング言語と、Xcodeという開発ツールが必要です。

グラフィカルインタフェースなしであれば、WindowsやLinuxにもSwiftをインストールして学習できます。

Xcodeをインストールしよう（OS X）

それでは、OS X（Mac）にXcodeをインストールする手順を見ていきましょう。

iOSのページの【Download】のボタンをクリックしましょう。すると、Apple IDでのログインを求められます。Apple IDをお持ちでない場合は、【Create Apple ID】をクリックしてIDを作成しましょう。

▲Developerサイトへのログインページ

無事にログイン（ページ上では “Sign In”）できると、ダウンロードページが表示されます。

▲Xcodeのダウンロードページ

一覧の中からXcode 8 beta 3の行の右にある【Download】をクリックしましょう。こちらは9月にリリースされるiOS 10用の開発ツールですので、現行の最新安定版であるiOS 9用のアプリを開発したい方は、ページ下の方にあるXcode 7.3.1をダウンロードしましょう。

インストールファイルは4GBあり、インターネット環境にもよりますが、数十分から数時間でダウンロードが完了します。

ダウンロードが完了したら、ファイルのアイコンをダブルクリックするか、ブラウザのステータスバー上のファイル名をクリックして、ファイルを解凍しましょう。ファイルが解凍できたら、Xcode のアイコンをアプリケーションフォルダにドラッグ＆ドロップしてコピーしましょう。

Xcodeを起動して、Playgroundを使ってみよう

まずは、Xcodeを起動して、Swiftプログラミングを体験してみましょう。Xcodeには「Playground」という対話的プログラム実行ツールが付属しています。

Xcodeを起動すると下図のウィンドウが表示され、Playgroundを追加したり、iPhoneアプリのプロジェクトを追加したりできます。

▲Xcodeを起動すると表示されるウィンドウ

それでは【Get Started with a playground】をクリックしましょう。

すると以下のようなメニューが表示されますので。

Name：　MyPlayground

（そのままでもいいですし、違う名前をつけることもできます。）

Platform：　iOS

となっていることを確認したら【Next】をクリックしましょう。

▲playgroundの追加メニュー

すると、プログラムを保存するフォルダを指定するダイアログが出ますので、適当なフォルダ（デスクトップでもホームフォルダでもOKです。）筆者の場合は、Swift3Studyというフォルダを作成して保存しました。

次回からは、作成したplaygroundのファイル（今回はMyPlayground）をダブルクリックすると、保存したプログラムを呼び出して実行できます。

保存を実行すると、playgroundファイルが起動します。ウィンドウ上部に「Ready」と表示されたら、プログラムを入力し、実行できる状態になります。

▲playgroundを開いたところ

ウィンドウの左側のエリアにはプログラム（コンピューターへの命令）を入力します。そして、playgroundではプログラムが自動的に解釈・実行され、右側のグレーのエリアに実行結果が表示されます。

作成直後は、Hello! Playgroundと表示されていますので、このメッセージを変更してみましょう。５行目でメッセージの内容を入力しています。簡単にプログラムの内容を解説しておきます。

・「var」はデータを入れておく入れ物（変数）を定義しますよ、という宣言です。

・「str」というのは、変数を「str」という名前で定義しますよ、という意味です。Swiftプログラミングでは、これを「変数名」と呼びます。

・「＝」は「イコールの右辺のデータを左辺の変数に代入しますよ」という命令で、「代入演算子」と呼ばれています。

・ダブルクォーテーションで囲まれているのは、文字列です。クォーテーションを使わないタイプもあり、整数や小数点数、ブーリアン型（trueかfalseのいずれかの値）などがあります。

それでは、ダブルクォーテーションの中の文字列を「I love Swift」と書き換えてみましょう。すると右側の実行結果が変化するのが確認できます。

▲文字列を変更したところ

このようにplaygroundでは、左側のプログラム内容を変更すると、ユーザーが操作をしなくても自動的にプログラムが実行され結果が表示されます。Swiftの基本的な文法を学びたい場合には、playgroundがとても役立ちます。また、９月にはiPadアプリとして、Swift Playgroundsという無料アプリが提供され、Mac上のplaygroundと同じSwift言語の学習がiPad上でできるようになります。

また、各種計算も実行可能です。たとえば、以下のようにa, bという２つの変数を定義して、加減乗除および剰余（余り）の計算をしてみましょう。

・「+」は、足し算

・「-」は、引き算

・「*」は掛け算

・「/」は、割り算

・「%」は、剰余（余り）

を計算します。計算記号はプログラミングでは「算術演算子」と呼びます。

正しく計算結果が表示されたことを確認したら、ウィンドウ左上の赤いボタンをクリックしてplaygroundを閉じましょう。ここまでのプログラムが保存されます。後ほどファイルを開いて実行することも可能です。

Xcodeでプロジェクトを追加しよう

続いてはいよいよUI（グラフィカルインタフェース）つきのアプリを作っていきます。

Xcodeのアイコンをクリックすると、起動時のメニューが出ます。今回は、「Create a new Xcode project」をクリックしましょう。

▲テンプレート選択メニュー

Choose a template for your new project:

というダイアログが表示されます。デフォルトでは「Single View Application」が選択された状態になっています。他には次のようなテンプレートが選択できます。

・Master-Detailアプリケーション：

Gmailアプリのようなデータ一覧を表示し、タイトルをクリックすると内容が画面右側に表示されるレイアウトのテンプレート

・Page-Based Application：

複数のページを切り替えて使うアプリのテンプレート

・Tabbed Application：

ウィンドウ下にタブメニューがあり、画面を切り替えるアプリのテンプレート

・Game：

2Dや3Dのゲームライブラリ（画像表示や、物理エンジンの使用）を使ったゲームアプリのテンプレート

・iMessage Application：

iMessageの機能を搭載したアプリのテンプレート

・Sticker Pack Application：

LINEスタンプのようなスタンプキット（Appleではステッカー、と呼んでいます。）

【Next】をクリックすると、プロダクト名（パソコンに保存するアプリ名、iPhoneのディスプレイ上でアプリ名として表示する名前は別途指定できる）を入力するメニューが表示されます。

▲新しいプロジェクトを追加するメニュー

たとえば、今回は旅行中に役立つ「通貨計算アプリ」を作ってみましょう。そこで、Product Nameを「CurrencyCalc」としましょう。日本語のアプリ名は別の場所で指定できますので、プロダクト名は英数字で命名しましょう。できれば、アプリの内容を連想できる名前がいいでしょう。

プロダクト名を入力したら、playgroundを追加した時と同じように、Swift3Studyフォルダに保存します。「Create」をクリックすると、プロダクト名でフォルダが作られ、以下のプロジェクトウィンドウが開きます。

中央のエリアにDisplay Nameという項目がありますので、こちらにアプリ名を入力しましょう。今回は、「CurrencyApp」としました。

▲アプリの表示名を入力

UIコンポーネントを追加しよう

続いて、画面左側にある「プロジェクトナビゲーター」を使って、画面デザインを設計したり、処理内容を記述するファイルを参照したりしていきます。

▲プロジェクトナビゲーター

最初は、Main.storyboardをクリックして、画面レイアウトを表示しましょう。

すると、中央のエリアで「View Controller」が選択された状態になっていることを確認します。

▲ViewControllerが選択された状態

今度は画面右下のオブジェクトライブラリから、ラベルやボタンを選択して、画面にドラッグ＆ドロップして、画面レイアウトを作っていきます。

▲オブジェクトライブラリ

まずはラベルを追加しましょう。

▲ラベルを配置したところ

そして、右側の「Label」の入力フォーム内の値をクリックすると、ラベルに表示する文字列を変更できます。

▲ラベルの文字列を変更

ラベルの文字列を変更すると、幅が足りないので、レイアウト画面（インタフェースビルダー）上で幅を広げたり、ラベルの配置をセンタリングしたりしましょう。

▲ラベルのフォントサイズ、レイアウトを調整（センタリング）

同様に、ボタンと、テキストビュー（入力フォーム）を追加していきます。

追加し終えたら、画面左上のツールバーから実行環境（今回はiPhone 6sを選択しました）を選択し、【実行ボタン】をクリックして、プログラムのビルド・実行をしてみましょう。デフォルトではXcode内蔵のシミュレータ（ソフトウェア的にハードウェアの動作イメージを表示するソフトウェア）を使います。実行環境のことをXcodeでは「スキーム」と呼んでいます。USBケーブルで接続したiPhoneがあれば、iPhoneの実機上にアプリをインストール・実行できます。

▲スキームの選択と、実行ボタン

▲シミュレータでアプリを実行したところ

これで画面レイアウトができましたが、このままでは計算が実行されませんので、次のセクションで、入力値の取得や、計算の実行、アプリ画面上への計算結果表示を行っていきます。ただし、今回はシンプルにするために、為替の変換レートはプログラム内で指定することにします。実用的なアプリにする場合は、外部ウェブサービスを使用して、その日のレートを取得するのがいいでしょう。

IBOutletを追加しよう

では、入力された値を取得して、計算を実行し、結果を表示する処理を追加していきましょう。

そのために、画面右上のメニューから、「Assistant Editor（アシスタントエディター）」を選んで、画面中央に、レイアウトとViewController.swiftのプログラムが同時に表示されるようにします。

▲アシスタントエディターへの切替え（円が２つ重なっているアイコン）

アシスタントエディターは、iOSアプリの開発で最も重要な機能の１つで、画面パーツとプログラムとを関連付けるために使用します。

関連付けには２タイプあります。

・「IBAction」は、ボタンなどが押された時に実行する命令（Swiftではアクション、またはメソッドと呼ばれます）の定義を画面上のパーツと関連付けます。

・「IBOutlet」は、計算結果などを表示するためにプログラムの実行結果を表示するパーツを関連付けたり、プログラムから参照したいオブジェクトに名前をつけて属性（プロパティ）にアクセスしたりできるようにします。

まずは、ボタンのアクション（IBAction）を関連付けましょう。ボタンをクリックし、コントロールキーを押したままドラッグして、プログラムのclass ViewControllerの中でリリースします。

すると、下の図のようなダイアログが表示されるので、ConnectionをActionとして、名前をつけます。

Nameはプログラム中で他の命令（メソッド）と区別するためにつける名前です。今回は「calcButton」としておきます。Buttonに関連付けられたアクション（メソッド）であることが一目でわかるようにするためです。

次に、計算処理を追加していきましょう。

まず、ViewControllerクラスの先頭で、為替レートを定義します。

今回はシンプルにするために手動で値を与えています。

letは定数（変更できない数）、usd2Jpyが変数名、「:Double」が実数型であることを明示的に指定するものです。そして、この変数に106.0（執筆時の為替レート）を今回は代入しています。

さて、計算処理を行うために、以下のようにラベルと入力フォームを配置しましょう。それぞれタイトルラベルと同じようにオブジェクトライブラリから追加します。

また、テキストフィールドの値を参照するために、

（１）アシスタントエディターを有効にする（画面右上、下図の真ん中をクリック）

（２）テキストフィールドをクリックする

（３）コントロールキーを押しながら、ドラッグして、ViewControllerクラスにドロップする。

（４）関連付けを行うときに「IBOutlet」を選択し、円の値を入力するフォームには「inputField」、結果（ドルの値）を表示するフォームには「resultField」と名前をつける。

としましょう。順に設定すると以下のようになります。IBOutletは、プログラムから画面上のUIパーツのオブジェクトを参照するために設定するもので、名前をつけておくと、フォームの値やラベルの値を取得したり、値をセットしたりできるようになります。

▲テキストフィールドにIBOutletを設定したところ

IBActionを追加してアプリを実行しよう

続いては、Go!のボタンをクリックしたら、JPY（円）のフィールドの入力値を取得して、USD（ドル）のテキストフィールドに計算結果を表示するプログラムを追加しましょう。

まず「Go!」のボタンをクリックします。次にViewControllerのクラス定義の中にコントロールキーを押しながらドラッグして、IBActionを定義しましょう。

下図のようにNameの欄にcalcButtonという名前をつけ、Connectionタイプを「Action」に変更して【Connect】をクリックしましょう。すると、IBActionの提議が追加されます。

▲Connectionの追加

そして、以下の３行のプログラムを入力しましょう。

・１行目は、計算結果を格納する「result」という変数を定義しています。

・２行目は、入力値（日本円）を為替レートで割り算しています。「!」は「アンラップ」と呼ばれ、テキストフィールドに空の値が入る場合にプログラムがクラッシュしないために使用されます。Swiftでは

「空のデータが入るかもしれない変数」については特別に扱わないとクラッシュ、つまり「アプリごと落ちる」という動作をします。

特別に扱う、というのは、「空のデータが入るかもしれませんよ」という特別なデータ型で定義し、値を取り出すときに「値を取り出しますよ」と明示的に「！」をつけて参照します。

オプショナル型の変数は、変数名の後ろに「!」をつけると値が参照できる、という仕組みになっています。