はじめに
娘が2歳半になり、私のiPhoneで遊ぶ事が多くなりました。「タッチ！あそベビー」や「パンケーキタワー」など、子供向けのアプリが充実していて驚きました。
数年前からiPhoneを使っていますが、iPhoneアプリを作った事がなかったので、どうやれば作れるのか知りたくなり実際にやってみようと思いました。エンジニアなので仕事でプログラミングはやりますが、XcodeやSwiftは全く馴染みがありません。
知ってる人からしたら「何を今更、当たり前じゃん」と思われる内容かもしれませんが・・・温かい目で見てやってください。
作ったもの
お勉強がてらこんなものを作りました。ボタンが押されたらテキストフィールドに文字列を表示するというシンプルなものです。
作り方
0. 環境準備
iPhoneアプリ開発は、XcodeというIDEを使って行います。XcodeはMacのAppStoreからダウンロードする事が出来るので簡単ですが、結構容量があるため時間がかかります。
私が今使っているMacは結構前に購入したもので高スペックではないため、Xcodeを動かしてると容量やスペックがかなりかつかつになりやばいです。
- OS : macOS Mojave(10.14.6)
- プロセッサ : 1.8 GHz Intel Core i5
- メモリ : 4 GB 1600 MHz DDR3
- ディスク : 128GB (外部ストレージ : 1TB)
ちなみに、最新のMacBookAirが欲しいなあと思い、Appleのサイトで今のMacを下取り査定したところ8,000円でした・・・（安っ
1. Xcodeを起動（プロジェクト作成）
まずは、プロジェクトを作成します。Xcodeを起動すると以下のような画面が表示されるので、2つ目の「Create a new Xcode project」を選択してください。
続いてプロジェクトのテンプレートを選択します。今回は「Single View App」を選択します。
続いてプロジェクトの情報を入力します。今回は初めてということもあり、パッと調べた感じ情報量が多そうという理由で、言語は「Swift」、User Interfaceを「Storyboard」を選択しています。
- Product Name : （任意の値）
- Team : None
- Organization Name : （任意の値）
- Organization Identifier : （任意の値）
- Language : Swift
- User Interface : Storyboard
作成するディレクトリを選択し「Create」ボタンを押すとXcodeが起動します。
2. 画面を作る
画面を作っていきますが、部品を選択しドラッグ&ドロップしながら簡単に作れます。
左側のソース一覧から「Main.storyboard」を選択すると、右側にiPhoneっぽいシルエットの画面が出てきます。ここで「Command + Shift + L」のコマンド入力をすると、部品の選択画面が出てきます。
今回はシンプルにボタンとテキストフィールドだけを使いたいと思います。対象の部品を選択し、ドラッグしながらストーリーボードのUI画面上に移動させてドロップすると部品が配置されます。配置した後は、対象の要素を選択すると右側に属性が出てくるので、適当にフォントサイズなどを変更します。
3. ソースを書く
ボタンが押された時のアクションを記述していきます。冒頭のプロジェクト作成で選択した通り「Swift」という言語で書きます。先ほどのストーリーボードのUI画面からソースに部品を引っ張ってこれる機能があるのでそれを使います。
そのための準備として画面を２分割し、片方にストーリーボードのUI画面を、もう片方にはソース画面が表示されるようにします。もっとスマートなやり方があると思いますが、、以下のように泥臭くやりました。
- iPhoneっぽいシルエットの右上にプラスボタンが書かれたアイコンがあるのでこれをクリックする
- 左側のソース一覧から「Main.storyboard」を右クリックし、「Open As > Source Code」を選択する
- 両方ともソースコードが表示された状態になるので、左側の画面を選択する
- 左側のソース一覧から「Main.storyboard」を右クリックし、「Open As > interface Builder - Storyboard」を選択する
続いて、ストーリーボードのUI画面からソースに部品を引っ張ってきます。
ストーリーボードのUI画面上でテキストフィールドを選択し、controlボタンを押しながらソースコード上にドラッグ＆ドロップします。以下のような小さな画面が表示されるので、Connectionに「Outlet」を選択し、Nameに任意の値を入力してConnectボタンを押してください。
すると、ソースコードに以下が追加されると思います。
@IBOutlet weak var MyTextField: UITextField!
ボタンも同じように選択し、controlボタンを押しながらソースコード上にドラッグ＆ドロップします。小さな画面で表示されるので、Connectionに「Action」を選択し、Nameに任意の値を入力してConnectボタンを押してください。
すると、ソースコードに以下が追加されると思います。
@IBAction func onTapEvent(_ sender: Any) {
}
これではボタンが押された時に何も処理をしないので、中身を書きます。
今回はボタンが押されたらテキストフィールドの文字を表示します。
@IBAction func onTapEvent(_ sender: Any) {
MyTextField.text = "嫁がBLハマってる (*ﾟ∀ﾟ)=3ﾊｧﾊｧ"
}
これで画面とソースが出来ました。
4. ビルドする
画面とソースが出来たら、ビルドという操作を行います。具体的には「Command + B」をコマンド入力します。「Build Succeeded」というメッセージが表示されればOKです。
5. アプリを実行する
アプリの実行にはシミュレータを使います。シミュレータを使うとMac上で擬似的なiPhoneの仮想環境が作られ、そこで作ったアプリの動作確認が出来ます。画面左上にある「再生ボタン」を押すと、シミュレータが起動します。こんな感じです。
ボタンを押してみます。
おぉ〜！無事メッセージが表示されましたね。
今後
今回はものすごく基本的なアプリの作り方を試しただけなので、実際にリリースするまでの流れや、複雑な画面遷移、カメラなどを用いたより高度なアプリの作り方なども勉強してみたいです。
あわよくばiPhoneアプリで一発当てたいっ！
参考サイト
内容的にはがっつりこちらを参考にさせて頂いております。