対象者
- 幼児〜小学校低学年のお子さんと過ごす中で、
- 在宅勤務等でMacに向かわなければならないのに、
- 「なんかアプリ入れてよー」とiOSデバイス持ってせがまれる方
- Mac, iOSデバイス, Xcode, Lightningケーブル が手元にあることは必須
- ガチのアプリ開発者はもっと上手くやってください
背景と狙い
- この記事、プロジェクトは、Swiftのコーディングスキルを身につけるとか、開発とは何かといったテーマの学びを目的としていません。
- スーパーで売られている切り身のマグロが，元は一匹の魚であったと水族館で教えるような… 手元のiPadやiPhoneで動いているアプリが人のアイディアと努力によって組み立てられていることを実感してもらうような目的です。
- そして最大の目的は、仕事中に構って構って攻撃を受けないよう、興味を満たすか興味をそらすかすることです。
進め方（プロジェクトを成功させるために不可欠）
- まず最初に、お子さんに何も話す以前に徹夜でもなんでもして一通り動くようにする
- お子さんに必要な素材を作ってもらう
- お子さんと一緒にアプリとして組み立てて微調整する
- ビルドしてiOSデバイスに入れる
この順序がとても大事で、1ができないまま取り組むと、あなたがXcodeと試行錯誤している間にお子さんは興味を失う可能性が高いです。
それから、開発中に素材画像やコードを指で指し示すことがあるはずです。愛機の繊細なスクリーンのコーティングを守りたい方は、SideCarでiPadのスクリーンを見せながら作業しましょう…
開発する
進め方と前後しますが、説明として自然な流れでいきます…
素材の用意（進め方の#2）
以下の画像を用意します。
| ファイル | 必要数 | サイズ | メモ |
|---|---|---|---|
| アプリのアイコン | 5枚 | 120120, 152152, 167167, 180180, 1024*1024 ピクセル | 様々なスクリーンに対応させるため複数用意するが、大きめの画像1枚を全てに使うこともできる |
| 待ち受け中 | 1枚 | 1000*1000 ピクセル | 起動直後にお神籤を引く前の状態で表示する画像 |
| お神籤の結果 | 5枚〜 | 1000*1000 ピクセル | 大吉〜凶 くらいまで、お好きなお神籤結果の分を用意する |
こんな感じで用意した。
ファイル名やフォルダ分けはXcodeに反映されないのでお好きにどうぞ。
アプリの開発（進め方の#1）
0. Xcodeの準備
- AppStoreから「Xcode」をインストールする（モバイル回線の人は容量に注意）
- そこそこ時間がかかるのでしばらく待つ
- インストールされたら、開いて規約の同意やら権限付与やら画面の指示に従って済ませる
- メニューの「Xcode」→「Preferences...」を開き、「Accounts」タブで自分のApple IDが登録されていることを確認する。無ければ左下の「+」をクリックしてApple IDを追加する。
1. プロジェクトを作成する
Xcodeを開いて、メニューの「File」→「New」→「Project...」を開く
「iOS」タブの「Single View App」を選択して、「Next」をクリックする。
「Product Name」にプロジェクトの名前（半角英数にする。日本語は使わない）を入れて、「Team」は自分のApple IDの名前に「(Personal Team)」が付いたものを選ぶ。
「Include Unit Tests」と「Include UI Tests」はチェックを外しておく。
「Next」をクリックして先に進む。
プロジェクトを保存する場所を聞かれるので、お好きな場所を指定する。
すると、以下の様な「Hello World」がSwiftで書かれた ContentView.swift ファイルが開く。
2. コーディング頑張らず以下をコピペする
画面左のファイルのリストで ContentView.swift というファイルが選択されていることを確認して、以下の様に置き換える。
置き換え対象が以下で…
struct ContentView: View {
var body: some View {
Text("Hello, World!")
}
}
これに置き換える。
struct ContentView: View {
@State var assetName = "waiting"
@State var buttonLabel = "お神籤を引く"
@State var isDrawn = false
var body: some View {
VStack {
Image(self.assetName)
Button(action: {
if(self.isDrawn){
self.assetName = "waiting"
self.isDrawn = false
self.buttonLabel = "お神籤を引く"
}
else{
self.assetName = Int.random(in: 1 ... 5).description
self.isDrawn = true
self.buttonLabel = "再挑戦する"
}
}){
Text(buttonLabel)
}
.padding(.all)
}
}
}
そうすると、こんな感じになる。
3. 素材を登録する
画面左のファイルのリストで Assets.xcassets を選択する。
AppIcon だけが存在するはずなので、「+」をクリックして「New Image Set」を選び、 waiting と 1 から 5 までの連番ができるように追加を繰り返す。
一通り追加したら、素材をはめ込む。
素材は、ファイルをドラッグ＆ドロップしていくだけでOK。
お子さんが作った素材をはめ込む前に、仮の画像で試すこと。
幸いなことに、いらすとやさんにお神籤画像があった。
4. ビルドする
Command キーと R キーを同時に押してビルドする。
一応ウィンドウ左上の「▶」ボタンでもできるけれど、ショートカット使う方が格好いいでしょう？
すると、シミュレーター上でアプリが開いた状態になる。
「お神籤を引く」を押して、結果が表示されればOK。
ここまで、お子さんと取り組む前にできているとスムースなはず。
微調整（進め方の#3）
1. アプリ名を変える
画面左側のリストの1番目、プロジェクト名をクリックする。
「General」タブを開き、「TARGETS」でアプリのアイコンが付いたものを選択（初期状態はプロジェクト名）し、右側の「Display Name」を編集する。
2. ボタンの文言を変える
「お神籤」が読めない歳の子や、お神籤より占いが良いとかあると思うので、以下の様に ContentView.swift の中で文言が書かれている部分のダブルクォーテーションの内側を変更する。
↓
ボタンの文言は3箇所に書かれている。
3. ボタンの色、形、大きさ を変える
これもやはり ContentView.swift の中に加筆する。
文字の大きさであれば、
Text(buttonLabel) の部分を Text(buttonLabel).font(.largeTitle) と追記したり、色も変えるなら Text(buttonLabel).font(.largeTitle).foregroundColor(Color.white) のようにしてみる。
↓
ボタンの色は .padding(.all) の後ろに .background(Color.green) を追記することで緑色になる。
更に .cornerRadius(10.0) を追記すればボタンの角が丸くなる。
↓
4. 結果のバリエーションを増やす
もし結果を5通りより多くする場合、 Assets.xcassets に登録した連番の画像を追加していく。
そして、 ContentView.swift の中で乱数を生成して画像を選ぶ処理で、乱数の生成範囲を広げる。
Int.random(in: 1 ... 5).description と書かれている箇所があるので、 右側の数字を変える。
↓
一通りいじったら、 Command + R で実行してうまく動くことを確認する。
iOSデバイスへの転送（進め方の#4）
最後に、完成したアプリを実機にインストールする流れとしては…
- MacとiOSデバイスをケーブルで接続する。
- コンピュータを信頼するかどうかとダイアログが出るので、信頼ボタンを押したりパスコードを入れたりする。
- Xcodeのウィンドウ上部に「iPhone SE (2nd generation)」のようにシミュレーターの機種名が表示されている部分をクリックし、最上段に実機の機種名が表示されるはずなので、それを選択する。
- 改めて
Command+Rを押すと、ビルド後にアプリが実機に転送される。 - 最初は実機でアプリが起動できないので、実機の「設定」アプリを開き、「一般」→「デバイス管理」を開く。
- 「デベロッパAPP」に「Apple Development: （メールアドレス）」の項目が出てくるのでタップし、「〜を信頼」をタップ、「信頼」ボタンをタップする
- ホーム画面に戻り、作成したアプリのアイコンをタップして動くことを確認する