学びをみつけるiOSアプリ2016/08/05iOSアプリ開発が初心者でもできる!アプリを作りながら解説!iOSアプリ開発について、現役のiOSエンジニアの筆者が初心者向けに丁寧に解説しています。この記事では、Appleの開発ツールXcodeを使って、iOSアプリ開発にチャレンジします。最新のXcodeの入手から、グラフィカルインタフェースのついたiPhoneアプリ開発まで、スクリーンショットを交えて解説します。実際に、iOS用の「通貨変換アプリ」の開発を通して、作り方や注意点など解説していきます。本記事を読み終える頃には、iOSアプリ開発の基礎が身についていることでしょう。10、Swift3に対応した動画講座を用意しているので、そちらもご覧ください。IBActionを追加してアプリを実行しようiOSとは?iOSは、AppleのiPhoneやiPadに搭載されているオペレーティング・システム(基本ソフトウェア)です。10という最新版が公開される予定です。Appleの開発情報サイト(https://developer.apple.com/ios/)iPhoneやiPadなどのiOSデバイス上で動作するアプリを開発するには、Swiftというプログラミング言語と、Xcodeという開発ツールが必要です。グラフィカルインタフェースなしであれば、WindowsやLinuxにもSwiftをインストールして学習できます。X(Mac)にXcodeをインストールする手順を見ていきましょう。iOSのページの【Download】のボタンをクリックしましょう。IDでのログインを求められます。ID】をクリックしてIDを作成しましょう。In”)できると、ダウンロードページが表示されます。3の行の右にある【Download】をクリックしましょう。7.3.1をダウンロードしましょう。インストールファイルは4GBあり、インターネット環境にもよりますが、数十分から数時間でダウンロードが完了します。ダウンロードが完了したら、ファイルのアイコンをダブルクリックするか、ブラウザのステータスバー上のファイル名をクリックして、ファイルを解凍しましょう。アイコンをアプリケーションフォルダにドラッグ&ドロップしてコピーしましょう。/wp-content/uploads/bonus_xcode8_prod.mp4Xcodeを起動して、Playgroundを使ってみようまずは、Xcodeを起動して、Swiftプログラミングを体験してみましょう。Xcodeには「Playground」という対話的プログラム実行ツールが付属しています。Xcodeを起動すると下図のウィンドウが表示され、Playgroundを追加したり、iPhoneアプリのプロジェクトを追加したりできます。playground】をクリックしましょう。すると以下のようなメニューが表示されますので。MyPlayground(そのままでもいいですし、違う名前をつけることもできます。iOSとなっていることを確認したら【Next】をクリックしましょう。playgroundの追加メニューすると、プログラムを保存するフォルダを指定するダイアログが出ますので、適当なフォルダ(デスクトップでもホームフォルダでもOKです。)筆者の場合は、Swift3Studyというフォルダを作成して保存しました。次回からは、作成したplaygroundのファイル(今回はMyPlayground)をダブルクリックすると、保存したプログラムを呼び出して実行できます。保存を実行すると、playgroundファイルが起動します。ウィンドウ上部に「Ready」と表示されたら、プログラムを入力し、実行できる状態になります。playgroundを開いたところウィンドウの左側のエリアにはプログラム(コンピューターへの命令)を入力します。playgroundではプログラムが自動的に解釈・実行され、右側のグレーのエリアに実行結果が表示されます。Playgroundと表示されていますので、このメッセージを変更してみましょう。5行目でメッセージの内容を入力しています。簡単にプログラムの内容を解説しておきます。「var」はデータを入れておく入れ物(変数)を定義しますよ、という宣言です。「str」というのは、変数を「str」という名前で定義しますよ、という意味です。Swiftプログラミングでは、これを「変数名」と呼びます。「=」は「イコールの右辺のデータを左辺の変数に代入しますよ」という命令で、「代入演算子」と呼ばれています。ダブルクォーテーションで囲まれているのは、文字列です。クォーテーションを使わないタイプもあり、整数や小数点数、ブーリアン型(trueかfalseのいずれかの値)などがあります。Swift」と書き換えてみましょう。すると右側の実行結果が変化するのが確認できます。文字列を変更したところこのようにplaygroundでは、左側のプログラム内容を変更すると、ユーザーが操作をしなくても自動的にプログラムが実行され結果が表示されます。Swiftの基本的な文法を学びたい場合には、playgroundがとても役立ちます。Playgroundsという無料アプリが提供され、Mac上のplaygroundと同じSwift言語の学習がiPad上でできるようになります。各種計算も実行可能です。bという2つの変数を定義して、加減乗除および剰余(余り)の計算をしてみましょう。「%」は、剰余(余り)を計算します。計算記号はプログラミングでは「算術演算子」と呼びます。計算結果が表示されたことを確認したら、ウィンドウ左上の赤いボタンをクリックしてplaygroundを閉じましょう。ここまでのプログラムが保存されます。後ほどファイルを開いて実行することも可能です。Xcodeでプロジェクトを追加しよう続いてはいよいよUI(グラフィカルインタフェース)つきのアプリを作っていきます。Xcodeのアイコンをクリックすると、起動時のメニューが出ます。project」をクリックしましょう。project:というダイアログが表示されます。Application」が選択された状態になっています。他には次のようなテンプレートが選択できます。Application:LINEスタンプのようなスタンプキット(Appleではステッカー、と呼んでいます。)【Next】をクリックすると、プロダクト名(パソコンに保存するアプリ名、iPhoneのディスプレイ上でアプリ名として表示する名前は別途指定できる)を入力するメニューが表示されます。新しいプロジェクトを追加するメニューたとえば、今回は旅行中に役立つ「通貨計算アプリ」を作ってみましょう。Nameを「CurrencyCalc」としましょう。日本語のアプリ名は別の場所で指定できますので、プロダクト名は英数字で命名しましょう。できれば、アプリの内容を連想できる名前がいいでしょう。プロダクト名を入力したら、playgroundを追加した時と同じように、Swift3Studyフォルダに保存します。「Create」をクリックすると、プロダクト名でフォルダが作られ、以下のプロジェクトウィンドウが開きます。Nameという項目がありますので、こちらにアプリ名を入力しましょう。今回は、「CurrencyApp」としました。アプリの表示名を入力UIコンポーネントを追加しよう続いて、画面左側にある「プロジェクトナビゲーター」を使って、画面デザインを設計したり、処理内容を記述するファイルを参照したりしていきます。最初は、Main.storyboardをクリックして、画面レイアウトを表示しましょう。Controller」が選択された状態になっていることを確認します。今度は画面右下のオブジェクトライブラリから、ラベルやボタンを選択して、画面にドラッグ&ドロップして、画面レイアウトを作っていきます。オブジェクトライブラリまずはラベルを追加しましょう。ラベルを配置したところそして、右側の「Label」の入力フォーム内の値をクリックすると、ラベルに表示する文字列を変更できます。ラベルの文字列を変更ラベルの文字列を変更すると、幅が足りないので、レイアウト画面(インタフェースビルダー)上で幅を広げたり、ラベルの配置をセンタリングしたりしましょう。ラベルのフォントサイズ、レイアウトを調整(センタリング)同様に、ボタンと、テキストビュー(入力フォーム)を追加していきます。6sを選択しました)を選択し、【実行ボタン】をクリックして、プログラムのビルド・実行をしてみましょう。デフォルトではXcode内蔵のシミュレータ(ソフトウェア的にハードウェアの動作イメージを表示するソフトウェア)を使います。実行環境のことをXcodeでは「スキーム」と呼んでいます。USBケーブルで接続したiPhoneがあれば、iPhoneの実機上にアプリをインストール・実行できます。スキームの選択と、実行ボタンシミュレータでアプリを実行したところこれで画面レイアウトができましたが、このままでは計算が実行されませんので、次のセクションで、入力値の取得や、計算の実行、アプリ画面上への計算結果表示を行っていきます。今回はシンプルにするために、為替の変換レートはプログラム内で指定することにします。実用的なアプリにする場合は、外部ウェブサービスを使用して、その日のレートを取得するのがいいでしょう。IBOutletを追加しようでは、入力された値を取得して、計算を実行し、結果を表示する処理を追加していきましょう。Editor(アシスタントエディター)」を選んで、画面中央に、レイアウトとViewController.swiftのプログラムが同時に表示されるようにします。アシスタントエディターへの切替え(円が2つ重なっているアイコン)アシスタントエディターは、iOSアプリの開発で最も重要な機能の1つで、画面パーツとプログラムとを関連付けるために使用します。関連付けには2タイプあります。「IBAction」は、ボタンなどが押された時に実行する命令(Swiftではアクション、またはメソッドと呼ばれます)の定義を画面上のパーツと関連付けます。「IBOutlet」は、計算結果などを表示するためにプログラムの実行結果を表示するパーツを関連付けたり、プログラムから参照したいオブジェクトに名前をつけて属性(プロパティ)にアクセスしたりできるようにします。ボタンのアクション(IBAction)を関連付けましょう。ViewControllerの中でリリースします。すると、下の図のようなダイアログが表示されるので、ConnectionをActionとして、名前をつけます。Nameはプログラム中で他の命令(メソッド)と区別するためにつける名前です。今回は「calcButton」としておきます。Buttonに関連付けられたアクション(メソッド)であることが一目でわかるようにするためです。次に、計算処理を追加していきましょう。ViewControllerクラスの先頭で、為替レートを定義します。今回はシンプルにするために手動で値を与えています。letは定数(変更できない数)、usd2Jpyが変数名、「:Double」が実数型であることを明示的に指定するものです。この変数に106.0(執筆時の為替レート)を今回は代入しています。計算処理を行うために、以下のようにラベルと入力フォームを配置しましょう。それぞれタイトルラベルと同じようにオブジェクトライブラリから追加します。テキストフィールドの値を参照するために、(1)アシスタントエディターを有効にする(画面右上、下図の真ん中をクリック)(2)テキストフィールドをクリックする(3)コントロールキーを押しながら、ドラッグして、ViewControllerクラスにドロップする。(4)関連付けを行うときに「IBOutlet」を選択し、円の値を入力するフォームには「inputField」、結果(ドルの値)を表示するフォームには「resultField」と名前をつける。順に設定すると以下のようになります。IBOutletは、プログラムから画面上のUIパーツのオブジェクトを参照するために設定するもので、名前をつけておくと、フォームの値やラベルの値を取得したり、値をセットしたりできるようになります。テキストフィールドにIBOutletを設定したところIBActionを追加してアプリを実行しよう続いては、Go!のボタンをクリックしたら、JPY(円)のフィールドの入力値を取得して、USD(ドル)のテキストフィールドに計算結果を表示するプログラムを追加しましょう。「Go!」のボタンをクリックします。次にViewControllerのクラス定義の中にコントロールキーを押しながらドラッグして、IBActionを定義しましょう。下図のようにNameの欄にcalcButtonという名前をつけ、Connectionタイプを「Action」に変更して【Connect】をクリックしましょう。すると、IBActionの提議が追加されます。Connectionの追加そして、以下の3行のプログラムを入力しましょう。1行目は、計算結果を格納する「result」という変数を定義しています。2行目は、入力値(日本円)を為替レートで割り算しています。「!」は「アンラップ」と呼ばれ、テキストフィールドに空の値が入る場合にプログラムがクラッシュしないために使用されます。Swiftでは「空のデータが入るかもしれない変数」については特別に扱わないとクラッシュ、つまり「アプリごと落ちる」という動作をします。特別に扱う、というのは、「空のデータが入るかもしれませんよ」という特別なデータ型で定義し、値を取り出すときに「値を取り出しますよ」と明示的に「!」をつけて参照します。オプショナル型の変数は、変数名の後ろに「!」をつけると値が参照できる、という仕組みになっています。ボタンタッチ時のアクションを定義ここまでできたら、実行ボタンをクリックしてシミュレータ上でアプリを実行してみましょう。「金額を円で入力」というところに数字を入れて、【Go!】ボタンをクリックするとUSDの隣のテキストフィールドに、円をドルに換算した金額が表示されます。円からドルへの変換を実行した様子これまで見てきたように、XcodeとSwift言語を使用すると、iOS(オペレーティング・システム)が搭載されているiPhoneやiPadなどで動作するアプリを開発できます。初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施この記事をシェアするTweet関連記事iOSアプリ2016/07/11Xcodeの使い方を5分で理解!画像アプリの開発で即実践!iOSアプリを作成する際に、必要なXcode。利用規約お問い合わせ。