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

はじめに

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

対象

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

作るアプリ

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

下準備

まずは、以下のリンクより使用するデータをダウンロードしてください。
GitHub（直ダウンロード）

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

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

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

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

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

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

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

トラブルシューティング：

• Q. .swift ファイルが1つも表示されません。
• A. Main.storyboard をクリックした後に表示された長方形の設計画面をクリックして、選択状態にしてみてください。

開発

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

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

トラブルシューティング：

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

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

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

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

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

トラブルシューティング：

• Q. ボタンが見えない、もしくは見当たりません
• A. 今回の方法では設計場所と異なる場所に表示される場合があります。表示されない場合はボタンの配置場所を左上にしてください。

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

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

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

Swiftを使った挫折しないiOSアプリ開発入門シリーズ

• 【2行で完成】Swiftを使った挫折しないiOSアプリ開発入門 #1
• 【Storyboard】Swiftを使った挫折しないiOSアプリ開発入門 #2
• 【継承とは】Swiftを使った挫折しないiOSアプリ開発入門 #3

以後、記事化中…