こんにちは。キャスレーコンサルティングLS(リーディング・サービス)部のM.Aです。
私は、普段JavaによるWebアプリ開発を行っているのですが、他の言語にも触れてみようと思い、
今回Swiftで簡単なiOSアプリを作ってみました。
今回作るアプリは「おみくじ」です。
開発手順をまとめましたので、是非ご覧ください。
完成イメージ
以下のようなアプリを作成します。
開発環境
・OS ： macOS 10
・Swift ： 4.2.1
・Xcode： 10.1
開発の流れ
以下の手順で、アプリを作成していきます。
1. プロジェクトの新規作成
2. 画面の作成
3. Swiftによるプログラムの作成
4. iOSシュミレータでのテスト
プロジェクトの新規作成
まずは、プロジェクトを新規作成します。
Xcodeを起動すると、以下のウィンドウが表示されます。
「Create a new Xcode project」 を選択します。
次にテンプレートを選択します。
以下の画面が表示されますので、「Single View App」を選択して進みます。
テンプレート選択後は、プロジェクトの基本情報を入力します。
今回は、以下のように基本情報を入力しました。
保存先を指定すれば、新規プロジェクトの完成です。
画面の作成
次は、アプリ画面を作成していきます。
作成には、インターフェースビルダーという画面編集用のエディターを使用します。
画面左のナビゲータエリアに、「Main.storyboard」というファイルがあるので、
これを選択すると、画面中央のエディターエリアがインターフェースビルダーに切り替わります。
「Main.storyboard」はアプリ画面を作るファイルです。
cmd + shift + L を押すとLibraryが開き、画面に表示する部品を選択することができます。
まずは、結果を表示するためのLabelを選択します。
すると以下のように、画面にLabelが表示されます。
画面要素は、ドラッグ&ドロップで移動・配置することができます。
ガイドラインが表示されるので、画面左上に配置します。
Labelの右側を、ガイドラインに従って端まで引き延ばします。
Labelの背景色も変更しました。
画面右側のアトリビュートインスペクタにて、Background → Customを選択し、背景色を選びます。
また、Alignmentの設定も行い、中央寄せにします。
次にボタンを作成します。
先ほどと同じく、Libraryを開き、Buttonを選択します。
こちらはLabelの下、画面中央に配置します。
ダブルクリックすると、文言を変更できます。
ここでは「おみくじを引く」と入力しました。
これでパーツは揃ったので、次は各パーツにAuto Layoutを設定します。
Auto Layoutとは
iPhoneはシリーズによって、画面のサイズや比率が異なります。
Auto Layoutとは、サイズや比率が変わっても自動で画面レイアウトを整える機能です。
画面下部にアイコンが並んでいます。
LabelのAuto Layout設定
Auto Layoutでは様々な設定をできますが、
まずは画面幅に合わせてLabelを伸び縮みさせるよう設定します。
画面右下の「Add New Constraints」アイコンを選択します。
ダイアログが表示されるので、
「上からの距離」「右からの距離」「左からの距離」「高さ」を固定します。
■ButtonのAuto Layout設定
「Add New Alignment Constraints」を選択し、ダイアログを表示します。
ここでは、Labelを「画面中央に表示する」設定をします。
続いて「Add New Constraints」を選択し、「上からの距離」を設定します。
これで、Auto Layoutの設定が完了しました。
先ほどまではiPhone8の画面サイズでしたが、画面の小さいiPhone4sに変更してみます。
画面のサイズを変えても、レイアウトが崩れていません。
これで画面は完成です。
プログラムの作成
次は、先ほど作成した部品とプログラムを接続します。
まずは、画面をアシスタントエディターに切り替えます。
Labelを右クリックし、ドラッグすると線が伸びるので、
「class View Controller」の下の行でドロップします。
ダイアログが表示されるので、以下の設定にして「Connect」を押します。
Buttonも同様の位置にドラッグ&ドロップします。
ダイアログが表示されるので、以下の設定にして「Connect」を押します。
Connection設定について
先ほどのダイアログにて、Connectionを設定しましたが、
Outlet、Actionは、それぞれ以下のような接続設定になります。
- Connection : Outlet → アプリ内の情報をユーザに見せる時
- Connection : Action → ユーザの操作をアプリに伝える時
本アプリを例にすると、Buttonはユーザがボタンを押下したことをアプリに伝え、
アプリ内で処理した結果を、Labelはユーザに見せると言った具合です。
プログラムを記述
画面とプログラムを接続することができたので、次はプログラムをSwiftで記述していきます。
「Buttonがタップされた時」に実行されるプログラムを、 @IBAction func myButton() に記述します。
letは、定数を格納する際に使用します。
arc4random()は乱数を発生させる関数で、itemsの数までの乱数を発生させ
indexを利用して値を取得しています。
プログラム作成が完了しました。
最後に、シミュレータを使ってアプリを動かしてみます。
画面右上の▷ボタンを押すと、シミュレータが起動します。
iPhoneの画面が表示されました。
「おみくじを引く」ボタンをクリックしてみます。
Labelに、おみくじ結果が表示されました。
終わりに
いかがでしたでしょうか。
私は一発目で大吉が出て、少しうれしかったです。
Swiftに触れてみて、どちらかと言えばJavaよりもJavascriptの記述方法に近いと感じました。
あまり時間をかけることなく基本部分は学べたので、さほど学習コストは高くないのかと思います。
今回は、かなり簡単な内容となりましたが、
難易度の高い開発もやってみようと思います。
以上、お読みいただきありがとうございました。
