親しみやすい感じのiPhoneアプリ開発入門動画を作ってみた
こんにちは！
こっそり、iPhoneアプリ開発の入門的な動画「 森田先生のiPhone開発教室 」をつくってみました！そしてYouTuberっぽく編集してYouTubeに投稿してみましたw 親しみやすい自然な感じで撮れてよかったなと思っています！
コードを書いているとき、見た目を変更するときなどは該当箇所が拡大表示されて見やすくなっています。
開発のイメージやちょっとしたトークなども収録されています。
撮影風景
@imaimiami さんからポップなプログラミング動画を撮ってみたいという話を聞き、完全に乗り気になって即決して企画を練り始めましたw
撮影前に一度完成プロジェクトをつくり、説明の際の大体の構成を練りました。ただ、カメラを前にしてコードを書きながら説明するというのは、初めてやると想像以上に大変で部分的な撮り直しを何度もしました。YouTuberの人たちトークがスムーズですごいなぁと思いましたw 編集作業を頑張ってくれた @imaimiami には感謝です！
@imaimiami さんも関連記事を書いています（寂しさからついiPhone開発を学ぶ動画を作ってしまいました。｜今井貴之｜note）。
あと、プログラミングのことをあまり知らない人でも出来るだけ分かりやすいように簡単に説明するのが難しかしいと感じました。これは動画では編集の力でだいぶ調整されて僕の冗長な説明が短く端的にまとまったかなと思います。
実際の利用シーンを撮影するときに代々木公園に行きました。冬の代々木公園は枯れ木ばかりでかなり地味な景色になってしまいましたが、普段、ずっとオフィスにこもって仕事をしているので野外で活動するって楽しいなと思いましたw
プログラムをまだ書いたことのない人も、一度書いてみると最初のハードルは超えられるのでiPhone開発をしないとしてもこの動画を見てプログラムの世界に入ってこれるのではないかななんて思いました。
よかったら是非お友達にオススメください^^
動画の補足情報・解説
動画の補足説明をします。動画の回ごとに書いています。正確さというよりも初心者の方でも簡単に把握できるような説明にしたいと思います。動画の補助的な資料として御覧ください。
第1回 iPhone開発をはじめよう
- Xcode はiOS開発をするために利用する開発環境です。Xcodeを使ってプログラミングコードの記述からアプリを公開するための準備までできます（公開はiTunes Connectというサイトで行います。開発者登録が必要になります）。
第2回 プロジェクトの構造
- Organization Nameと、Organization Identifierは今の時点では深く考えなくても良いと思います（後で変更もできます）。Organization Identifierは本当はcom.molaboのようなリバースドメインが良いです。
- iOSアプリはSwiftとObjective-Cで記述できますが、現時点で新しいアプリを作る場合は、Swiftで書き始めるのが良いと思います。
- 簡単といってしまっていますが、ちゃんとしたアプリを一通り作れるようになるまではやっぱりたくさん覚えなきゃいけないことがあります。楽しみながら進んでいきましょう( ^ω^ )
第3回 カメラボタンを置こう
- Auto Layout はビューをそのビューが置かれているビューに対して相対的に配置するための仕組みです。例えば、左から0、上から0、右から0、下から0とすると、置かれているビューと同じサイズに配置することができます。
- Constrain to marginsのチェックを外しましたが、これは端末に応じて画面端からのマージンを自動的に設定してくれる仕組みです。今回は画面いっぱいにビューを配置したいのでチェックを外しました。
第4回 カメラを起動しよう
-
print()に何か書いておくと、その部分が実行されたときに、Xcode上にログ（文字情報）が表示されます。これによって、ちゃんとそこが実行されているか、そこに想定した値が入っているかなどを確認することができます。開発中にはよく使うと思います。 - デリゲートは簡単に言うと「処理をお願いします」ということです。今回のケースではpickerがカメラ撮影をするのですが、pickerとしては「撮影したよ、あとは、お願いします」とdelegateにセットされているものに対してお願いするのでことになります。今回は、delegateにself(ViewController)がセットされているので、ViewControllerに対してpickerから処理が依頼されるということになります。初心者にとってデリゲートは最初の壁なので、よくわからないのは自然です。わからなくても先に進んでみましょ〜。
第5回 ナビゲーションを作ろう
- UINavigationControllerを利用することで、ページの遷移などが簡単にできるようになります。アプリを作るときにはよく使う部品の一つです。
- 今回の紐付けは IBOutlet で行っています。これでつなぐことによって、ViewControllerからcollectionViewを簡単に操作できるようになります。
第6回 一覧を作ろう
- UICollectionViewは画像以外でも行と列があるような表示をすることができます。似たような部品にUITableViewがあります。この二つもよく使う部品です。
- 配列に関しては検索するとたくさん情報が出てくると思います。Swiftの配列に関しては、「Swift Array」などで検索すると良いと思います。複数のデータを扱うためのとても便利な仕組みで、基本的なものなので非常によく利用されます。
第7回 カメラの画像を表示
補足情報は特にありません。
第8回 セルに文字を表示
補足情報は特にありません。
第9回 日付を表示しよう
- Dictionary型というのは、キーに紐付いた値を格納することができる型です。
let dict = ["NAME": "NAOKI"]というように、書くと、dict["NAME"]と書いたときに"NAOKI"を取り出すことができます。この場合、"NAME"がキーで"NAOKI"が値です。
第10回 詳細画面を作ろう
- もしコードが動かないなどあれば、
[String: AnyObject?]と書かれている部分を[String: AnyObject]と書き換えてみてください＞＜
第11回 データを保存しよう
-
NSNotificationCenter.defaultCenter().addObserver(self, selector: "save:", name: UIApplicationWillTerminateNotification, object: nil)と書くことで、アプリが活動を終了するタイミングでsave:が呼ばれます。 -
NSHomeDirectory() + "/Documents/"というパスは、iPhoneの中にアプリが何かを保存できる場所を表しています。
第12回 たくさん画像を保存しよう
補足情報は特にありません。
第13回 最終回！アイコンを設定しよう
補足情報は特にありません。
もう少し良くするには？
今回解説したアプリのコードをもっと良くする方法を書いていきます。ただ、いきなり下記のやり方をやってみても難しいと思うので、こういうことができればもっと良くなるんだというイメージができれば良いと思います。
!をできるだけ使わないように書く
Swiftの値は基本的にはnil（何もない）にはならないのですが、nilになる場合を表現するためにオプショナル型で包まれている場合があります。このオプショナル型で包まれたものを中身はnilではないと決めつけて中身を取り出すのが、!の働きです。今回は一部で!を利用していますが、できるだけ使わないほうが良いでしょう。オプショナル型はSwiftの基本的な考え方なのですが、最初は意味がわかりづらいので、「Swift オプショナル」などで検索して使い方を調べておくと良いでしょう。
値をDictionaryではなく専用のstructで扱う形に書き換える
今回利用した[String: AnyObject]というのはDictionaryという型です。Dictionaryは局所的に扱うには扱いやすいのですが、要素が増えてくるとキーが増えてきますし、中に何が入っているのかパッとわからないので使いづらくなってきます。
そこで、日付、日時、イメージパスを扱うstructを作ることで簡単に把握できるように書き換えることができます。structは情報を扱うための基本的な型で、Swiftのプログラミングではとてもよく利用するものです。
情報をデータベースを利用して保存するようにする
iOSのアプリ内データベースはCoreDataというものが用意されていますが、個人的には、Realm を利用するのが良いと思っています。Realmを使うとiOS内部でのデータの管理や保存がとても簡単になります。Realmの利用法は、Realmに載っています。
画像をふわっと表示する
画像が表示されるときにサンプルだとぱっと一瞬で表示されてしまっていますが、これをふわっと綺麗に表示する方法があります。表示時にアニメーションをかければ良いのですが、これを手動でやるのは色々面倒なので、Kingfisherなどの外部ライブラリを利用するのが手っ取り早いです。ただし、これを使うには、CocoaPodsやCarthageなどの依存性管理ツールを使えるようになる必要があるので、今はできなくてもそういうものがあるんだと思ってもらえれば良いと思います。
画像などのデータの保存を非同期にする
画像の保存には時間がかかり、少し画面が固まったような状態になります。これを避けるために、非同期で処理をするのが良いと思います。非同期処理は考え方を理解するのは前に、Global Central Dispatch(GCD)という簡単に非同期処理が書ける仕組みがあるので、これを検索して用途を確認すると良いと思います。
他にもまだまだよくできるポイントはあります。この情報をもとに色々試してみてください。