子供と作る「おみくじ」アプリ on iPhone

# 対象者
- 幼児〜小学校低学年のお子さんと過ごす中で、
- 在宅勤務等でMacに向かわなければならないのに、
- 「なんかアプリ入れてよー」とiOSデバイス持ってせがまれる方
- Mac, iOSデバイス, Xcode, Lightningケーブル が手元にあることは必須
- ガチのアプリ開発者はもっと上手くやってください

# 背景と狙い
- この記事、プロジェクトは、Swiftのコーディングスキルを身につけるとか、開発とは何かといったテーマの学びを目的としていません。
- スーパーで売られている切り身のマグロが，元は一匹の魚であったと水族館で教えるような… 手元のiPadやiPhoneで動いているアプリが人のアイディアと努力によって組み立てられていることを実感してもらうような目的です。
- そして最大の目的は、仕事中に構って構って攻撃を受けないよう、興味を満たすか興味をそらすかすることです。

# 進め方（プロジェクトを成功させるために不可欠）
1. まず最初に、お子さんに何も話す以前に徹夜でもなんでもして一通り動くようにする
2. お子さんに必要な素材を作ってもらう
3. お子さんと一緒にアプリとして組み立てて微調整する
4. ビルドしてiOSデバイスに入れる

この順序がとても大事で、1ができないまま取り組むと、あなたがXcodeと試行錯誤している間にお子さんは興味を失う可能性が高いです。

![sidecar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/6fe5373b-1201-9d28-eb82-450f777bc7f4.png)


それから、開発中に素材画像やコードを指で指し示すことがあるはずです。愛機の繊細なスクリーンのコーティングを守りたい方は、SideCarでiPadのスクリーンを見せながら作業しましょう…

# 開発する

進め方と前後しますが、説明として自然な流れでいきます…

## 素材の用意（進め方の#2）

以下の画像を用意します。

|ファイル|必要数|サイズ|メモ|
|:----|:----|:----|:----|
|アプリのアイコン|5枚|120*120, 152*152, 167*167, 180*180, 1024*1024 ピクセル|様々なスクリーンに対応させるため複数用意するが、大きめの画像1枚を全てに使うこともできる|
|待ち受け中|1枚|1000*1000 ピクセル|起動直後にお神籤を引く前の状態で表示する画像|
|お神籤の結果|5枚〜|1000*1000 ピクセル|大吉〜凶 くらいまで、お好きなお神籤結果の分を用意する|

こんな感じで用意した。
ファイル名やフォルダ分けはXcodeに反映されないのでお好きにどうぞ。

<img width="167" alt="asset_files.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/65f0a423-4e4a-0bb4-581a-3612e6040214.png">


## アプリの開発（進め方の#1）

### 0. Xcodeの準備
- [AppStoreから「Xcode」](https://apps.apple.com/jp/app/xcode/id497799835?mt=12)をインストールする（モバイル回線の人は容量に注意）
- そこそこ時間がかかるのでしばらく待つ
- インストールされたら、開いて規約の同意やら権限付与やら画面の指示に従って済ませる
- メニューの「Xcode」→「Preferences...」を開き、「Accounts」タブで自分のApple IDが登録されていることを確認する。無ければ左下の「+」をクリックしてApple IDを追加する。


### 1. プロジェクトを作成する

Xcodeを開いて、メニューの「File」→「New」→「Project...」を開く
<img width="620" alt="スクリーンショット 2020-05-17 2.03.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/42550bba-169d-247a-181c-143e49c8e9bc.png">

「iOS」タブの「Single View App」を選択して、「Next」をクリックする。

<img width="772" alt="new_project.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/d938fb82-9d18-65af-a6fc-7ca2b202cc16.png">

「Product Name」にプロジェクトの名前（半角英数にする。日本語は使わない）を入れて、「Team」は自分のApple IDの名前に「(Personal Team)」が付いたものを選ぶ。
「Include Unit Tests」と「Include UI Tests」はチェックを外しておく。
「Next」をクリックして先に進む。

<img width="760" alt="project_settings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/0e07c496-25f4-aa31-d035-4b7987cce33d.png">

プロジェクトを保存する場所を聞かれるので、お好きな場所を指定する。

すると、以下の様な「Hello World」がSwiftで書かれた `ContentView.swift` ファイルが開く。

<img width="758" alt="swift.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/d498022f-ff25-aa13-9c5c-475c323cf2ed.png">


### 2. コーディング頑張らず以下をコピペする

画面左のファイルのリストで `ContentView.swift` というファイルが選択されていることを確認して、以下の様に置き換える。

置き換え対象が以下で…

```swift

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}
```

これに置き換える。

```swift
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)
            
        }
        
    }
}
```

そうすると、こんな感じになる。

<img width="900" alt="edited.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/b137b607-6d4b-dfeb-5334-c2629bafa8c1.png">



### 3. 素材を登録する

画面左のファイルのリストで `Assets.xcassets` を選択する。

<img width="606" alt="assets.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/767a1fce-1def-600a-f8ed-4077453bf802.png">

`AppIcon` だけが存在するはずなので、「+」をクリックして「New Image Set」を選び、 `waiting` と `1` から `5` までの連番ができるように追加を繰り返す。

一通り追加したら、素材をはめ込む。
素材は、ファイルをドラッグ＆ドロップしていくだけでOK。

<img width="878" alt="asset.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/b2588581-9a02-5f9e-d246-26aa57ee4b59.png">

お子さんが作った素材をはめ込む前に、仮の画像で試すこと。
幸いなことに、[いらすとや](https://www.irasutoya.com/2012/04/blog-post_5459.html)さんにお神籤画像があった。

### 4. ビルドする

`Command` キーと `R` キーを同時に押してビルドする。
一応ウィンドウ左上の「▶」ボタンでもできるけれど、ショートカット使う方が格好いいでしょう？

すると、シミュレーター上でアプリが開いた状態になる。

<img width="261" alt="スクリーンショット 2020-05-17 3.03.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/78f4b215-a642-184e-d45d-e69185a172af.png">

「お神籤を引く」を押して、結果が表示されればOK。

<img width="285" alt="スクリーンショット 2020-05-17 3.03.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/b31ddfa7-96d3-78a0-34d9-01ef2280e41a.png">

ここまで、お子さんと取り組む前にできているとスムースなはず。


## 微調整（進め方の#3）

### 1. アプリ名を変える

画面左側のリストの1番目、プロジェクト名をクリックする。
「General」タブを開き、「TARGETS」でアプリのアイコンが付いたものを選択（初期状態はプロジェクト名）し、右側の「Display Name」を編集する。

<img width="959" alt="app_name.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/b8d5ec96-d664-73d7-0eeb-8b7a2b326d2f.png">

### 2. ボタンの文言を変える

「お神籤」が読めない歳の子や、お神籤より占いが良いとかあると思うので、以下の様に `ContentView.swift` の中で文言が書かれている部分のダブルクォーテーションの内側を変更する。

<img width="300" alt="before.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/bf2a9300-c4ab-a33d-596b-454df9c85978.png">
↓
<img width="317" alt="after.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/1c07242e-fe2b-5c4b-6ad1-5cc98ed36464.png">

ボタンの文言は3箇所に書かれている。

<img width="602" alt="スクリーンショット 2020-05-17 3.09.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/7d59ddd3-fe16-9db7-ae7a-5c99fe2d5dce.png">

### 3. ボタンの色、形、大きさ を変える

これもやはり `ContentView.swift` の中に加筆する。

文字の大きさであれば、
`Text(buttonLabel)` の部分を `Text(buttonLabel).font(.largeTitle)` と追記したり、色も変えるなら `Text(buttonLabel).font(.largeTitle).foregroundColor(Color.white)` のようにしてみる。

<img width="171" alt="スクリーンショット 2020-05-17 3.14.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/dff00871-a391-2b24-b4e8-b39c2e9b91ba.png">
↓
<img width="521" alt="スクリーンショット 2020-05-17 3.14.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/9020aa2b-f2d7-eadc-7d32-22da9e9a716e.png">

ボタンの色は `.padding(.all)` の後ろに `.background(Color.green)` を追記することで緑色になる。
更に `.cornerRadius(10.0)` を追記すればボタンの角が丸くなる。

<img width="124" alt="スクリーンショット 2020-05-17 3.15.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/4f7e91d0-c5de-32f3-34de-020c9af3c859.png">
↓
<img width="209" alt="スクリーンショット 2020-05-17 3.16.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/6648fa9b-fbe1-3eae-e890-8e8d1893bdae.png">

### 4. 結果のバリエーションを増やす

もし結果を5通りより多くする場合、 `Assets.xcassets` に登録した連番の画像を追加していく。
そして、 `ContentView.swift` の中で乱数を生成して画像を選ぶ処理で、乱数の生成範囲を広げる。

`Int.random(in: 1 ... 5).description` と書かれている箇所があるので、 右側の数字を変える。

<img width="420" alt="スクリーンショット 2020-05-17 3.19.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/249e0e8e-3823-3adc-695b-8b854836deee.png">
↓
<img width="413" alt="スクリーンショット 2020-05-17 3.19.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107873/f05215b0-f99e-4cc5-efab-920e1e493539.png">


一通りいじったら、 `Command` + `R` で実行してうまく動くことを確認する。


## iOSデバイスへの転送（進め方の#4）

最後に、完成したアプリを実機にインストールする流れとしては…

1. MacとiOSデバイスをケーブルで接続する。
2. コンピュータを信頼するかどうかとダイアログが出るので、信頼ボタンを押したりパスコードを入れたりする。
3. Xcodeのウィンドウ上部に「iPhone SE (2nd generation)」のようにシミュレーターの機種名が表示されている部分をクリックし、最上段に実機の機種名が表示されるはずなので、それを選択する。
4. 改めて `Command` + `R` を押すと、ビルド後にアプリが実機に転送される。
5. 最初は実機でアプリが起動できないので、実機の「設定」アプリを開き、「一般」→「デバイス管理」を開く。
6. 「デベロッパAPP」に「Apple Development: （メールアドレス）」の項目が出てくるのでタップし、「〜を信頼」をタップ、「信頼」ボタンをタップする
7. ホーム画面に戻り、作成したアプリのアイコンをタップして動くことを確認する