【2行で完成】Swiftを使った挫折しないiOSアプリ開発入門 #1

## はじめに
大学生向けに勉強会を行ったものを記事化したものです。

## 対象
今回のレベル：0.5
プログラミング未経験者でも本格的なアプリが作れちゃう不思議な初回授業です！
*※macOS が動作するパソコンで Xcode をインストールしていることが最低条件になります*

## 作るアプリ
![ios_ study02.002.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/638d1d45-66bc-ebfe-e1d3-b34238c3d364.jpeg)

今回作成するアプリは、キャラクターを合成した写真が簡単に撮影できるアプリです！観光地などで、ご当地キャラなどと記念撮影できるアプリがありますよね？自分の好きなアニメキャラクターバージョンも作っちゃいましょう！！
*※（画像にアニメキャラクターなどの著作権面で問題が発生するものに関しては一般公開などができませんので、ご注意ください）*

## 下準備
まずは、以下のリンクより使用するデータを[ダウンロード](https://github.com/AkkeyLab/PhotoGurashi/tree/sample01)してください。
[GitHub（直ダウンロード）](https://github.com/AkkeyLab/PhotoGurashi/archive/sample01.zip)


ダウンロード後、ファイルを展開したら `PhotoGurashi.xcodeproj` をダブルクリックで Xcode を起動させてください。

![ios_ study02.009.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/2886ff21-3d45-de1a-2f47-de2bff6da2b2.jpeg)

ここで起動した Xcode というアプリ、今後アプリ開発でお世話になります。仲良くしていきましょう！ということで、まずは **左上で iPhone の種類を選んでから実行ボタンを押して** みましょう！

![ios_ study02.010.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/0410e17b-2f2c-3d47-aef0-6d85c2dc53b4.jpeg)

このように **真っ白な画面が表示されたら準備完了** です！これは、Simulator（シミュレータ）といって、 iPhone の環境を擬似的に再現した環境です。これでアプリがどのように動作するか確認していきます。

![ios_ study02.012.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/e89ef68e-af76-998d-3ca2-cb3e408e1f46.jpeg)

実際にアプリを開発していきたいと思います！上記画像のような順番で操作していきますので、どこを操作したらいいかわからなくなったらチェックしてみてください！

![ios_ study02.013.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/38b5911e-8e75-59d6-dd13-31e8fe203319.jpeg)

ファイルアイコン（ディレクトリアイコン）の左側にある三角マークを押してファイル構造を展開させてみることができます。そのなかで、 `PhotoGurashi > PhotoGurashi > View > Storyboard` にある `Main.storyboard` をクリックで選択してください。画面中央に長方形の設計画面が表示されたら成功です！
この画面は、アプリ画面のデザインを設計する場所になります。

![ios_ study02.015.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/632fd5d4-c17d-0686-4a85-4482eb51620c.jpeg)

先程表示されるようになった設計画面ではプログラムを書くことができません。そこで、デザインの設計とプログラムによるプログラミングが同時にできるようにしてみましょう！方法は簡単で、上記画像のように **円が２つ重なったマークをクリックして `Assistant editor` に切り替える** だけです。

![ios_ study02.017.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/67ed988f-773e-cab1-4737-30ce01b19fc1.jpeg)

次に、デザイン設計画面に対応しているプログラムファイルを表示させます。一応ここで説明しますが、自動で対応しているプログラムファイルが表示されていることがほとんどだと思います。
`Automatic` をクリックして展開されたメニューから `Automatic` にマウスカーソルを乗せると、ファイル名の最後が `.swift` となっているファイルが表示されます。あとは、対応するファイルをクリックするだけです。

**トラブルシューティング：**
- Q. `.swift` ファイルが1つも表示されません。
- A. `Main.storyboard` をクリックした後に表示された長方形の設計画面をクリックして、選択状態にしてみてください。

## 開発
![ios_ study02.018.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/43baa50b-10f1-f4ab-0e8a-b825392558bd.jpeg)

実際にここからプログラミングなどを行っていきますが、難しくないので騙されたと思って取り組んでみてくださいね！
まず、上記画像のように右側のパーツ選択領域から `Button` を選択し、 **長方形の設計画面上にドラッグ＆ドロップしてボタンをおいて** ください。画面中央に持っていくとカクカクッとなってくれるので、今回はそこにおいてみてください。

![ios_ study02.019.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/6fc647ff-7833-088c-9ce3-ca154e808f11.jpeg)

先程設置したボタンをプログラム側にもリンクさせて、プログラム側から操作できるようにしたいと思います。
まず、先程設置したボタンをクリックで選択した後、 `control` キーを押しながら `class MainViewController: BaseViewController {` と書かれている行の真下に向けてドラッグ＆ドロップします。すると、設定画面が小さく出るので、 `Name` 欄に好きなボタン名を入力して `Connect` で接続を完了します。

**トラブルシューティング：**
- Q. ボタンの名前の付け方が分かりません。
- A. 基本的にアルファベットで、小文字スタートになります。後々出てくる **変数** と同じ扱いになります。分からなければ `button` と今回は入力しておきましょう。
- Q. ドラッグ＆ドロップしようとしても、小さい設定画面が出てきません。
- A. 配置場所が間違っているかもしれません。それでも解決しない場合は、今までの工程を見直してください。

![ios_ study02.021.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/3c16d9b6-9ada-eeff-2cb1-165127ec22cc.jpeg)

`override func viewDidLoad() {` の下の行からプログラムを書いていきます。先程のボタン名を `button` とした場合、 `button.customSetting(self, title: "Camera")` と入力してみましょう！専門用語を含めて解説してみますが、「ふ〜ん？」って感じで大丈夫です！気になった用語から調べていくといいかもしれませんね。

このプロジェクトでは `UIButton` が拡張されており、 `customSetting` メソッドが使用できるようになっています。第一引数に `self` 、第二引数に文字列を指定します。文字列に関しては、ボタンに表示される文字となりますので、好きな文字列で構いません。

![ios_ study02.022.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/c62816e0-9c6f-c64f-aa11-53ef226f491b.jpeg)

はい、プログラミングは以上になります！下準備段階と同様に実行ボタンでアプリを実行してみましょう！

![ios_ study02.023.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/a8076cf8-3913-b3eb-744a-eb4194e12cc0.jpeg)

ボタンが画面の中央寄りにあり、そのボタンを押すとキャラクターが表示されたカメラが起動します。撮影ボタンを押せばキャラクターが合成された写真が iOS 標準写真アプリに保存されているはずです。
**どうでしたか？たったこれだけで本格的なアプリができちゃいました！**

**トラブルシューティング：**
- Q. ボタンが見えない、もしくは見当たりません
- A. 今回の方法では設計場所と異なる場所に表示される場合があります。表示されない場合はボタンの配置場所を左上にしてください。

![ios_ study02.025.jpeg](https://qiita-image-store.s3.amazonaws.com/0/128344/270b2def-47e3-c7be-95d3-72c0630f6314.jpeg)

さて、ここまで開発を進めて **工夫したい！** と思うところはありませんでしたか？キャラクターを好きなキャラにしたい！、ボタンがダサいから可愛くしたい！、プレビューがないと不便！などなど…
このように思うことが、今回一番大切なことかもしれません。

次回は、上記であげた工夫案の一部を実装するとともに、技術的にも次のレベルに挑戦できます！是非挑戦してみてくださいね！


最後まで見ていただき、ありがとうございます。  

### Swiftを使った挫折しないiOSアプリ開発入門シリーズ
- **【2行で完成】Swiftを使った挫折しないiOSアプリ開発入門 #1**
- [【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2](https://qiita.com/AkkeyLab/items/1bf562866cb8aae4d9b3)
- [【継承とは】Swiftを使った挫折しないiOSアプリ開発入門 #3](https://qiita.com/AkkeyLab/items/43f827f1622859fdf206)

以後、記事化中…