Webエンジニアが2ヶ月で初めてiOSアプリを開発・リリースするまでの全軌跡
皆さんこんにちは。
Web開発経験しかなかった私 @shnsprk でしたが、ふと自分で作りたいアプリを思いついたのでこの度初挑戦し、2ヶ月程でリリースまで漕ぎ着けたのでそれまでのノウハウを公開します。
これからiPhone / iPadのアプリを作ってみたいと思ってはいるものの、なかなか取っ掛かりがない...といった方への一助になれば幸いです。
スペック
- 36歳 Webエンジニア
- Dvorak配列大好き！
- Web開発歴はそれなりに長い
- いわゆるフルスタックのため、何が得意かは最近わからなくなってきた
- アプリ開発は初
開発する機能を決める
まずは開発する機能を決めます。
アプリのアイディアを思い付いてから、機能を掘り下げるにつれ様々な副次機能を思いつきました。が、何れにせよまずはリリースを目標とすべくMVP(Minimum Viable Product)を満たす機能にのみフォーカスしました。
MVPは以下に絞りました。
- 機能A
- 何はともあれメインの機能
- 機能B
- 機能Aに比べプライオリティは低いものの、もう１つの欲しい機能
- あらかじめTabView(タブ切り替え)を作っておきたいという意図もある
- 設定
- 思いついたアプリの機能上、どこかで設定切り替えがほしい
- 問い合わせフォームなどへの導線としてもほしい
- 初回起動時のチュートリアル
- ユーザーにユースケースを提示するために絵が1つはほしい
ということで、4画面ほど作ればリリースです。頑張りましょう。
ファーストリリースでは実装しないものの、後で実装したいなと思ったものはGitHubのIssuesに書いときました。
アプリを開発するための学習
結論から述べると、Apple公式のSwiftUI Tutorials が最適でした。
当初は難しそうに感じ、Amazonで販売されている日本語のSwiftUI対応の書籍を幾つか購入しました。が、書籍はプログラミング初心者向けが多く、
- プロジェクト作成時に「include Tests」を外すものの、その後テストに関するフォローが一切なし
- varとletの使い分け説明をしているものの、書籍内で全然使い分けができていない
- マジックナンバーを多用
- データがベタ書きで、効率的なデータやモデル構造についての言及なし
という内容で、プログラミング初学者でもアプリを作りたいというニーズには応えるものの、理想的なアーキテクチャで実装するという観点では厳しい書籍が殆どでした。
(すべての書籍を読んだわけではないので、アーキテクチャやテストについて言及している書籍があればむしろ教えてください...。)
一方、公式チュートリアルでは、少なくとも上から下まで実施するだけで
- NavigationView
- List
- 画面遷移
- JSONからのデータ取り込み
- お気に入りボタンのトグル制御
- パスによる画像生成
- アニメーション
- 複合的なデザイン・レイアウト
- UIKitとの併用
- Apple Watchなどへの対応
が一通り学べました。私は英語については決して流暢とはいえないレベルですが、日本語書籍よりGoogle翻訳を利用しながら公式チュートリアルを進める方が効率よく学ぶことができました。
これからiOSアプリ開発をしたいという人にとっては、参考程度に書籍を購入すること自体については否定しませんが、公式チュートリアルで学ぶことで実際のアプリ開発に即した学びが得られたので強くオススメします。
ちなみにチュートリアルではUIKitとの併用についても記述がありましたが、SwiftUIが今後拡張されることと、学習コストとの観点から、機能実装はSwiftUIだけにすることにしました。
実際にアプリ開発
そんなこんなで、Apple公式のSwiftUIチュートリアルを参考にしつつ、アプリの開発を進めました。
想定したMVPは、
- TabView
- 機能A
- 機能B
- NavigationView上のツールバー
- 設定画面
- 初回起動時のチュートリアル
で実現可能です。
公式チュートリアルで学んだ知識で、
- 機能A
- 機能B
- NavigationView上のツールバー
- 設定画面
が実装できたので、それらを流用して殆どの機能を実装し、
- TabView
- 初回起動時のチュートリアル
をググりながら実装するだけでおおよその機能が実現できました。
何だかそれっぽくなってきたの図。
実装したい機能についてググる
いやこれ地味に難しかったです...。皆さんはどうしてるのでしょうか？
Swift / SwiftUIに関する情報は、Apple公式ドキュメントだけでは実装イメージが確認しづらく他サイトも調べたのですが、検索結果の上位を中身の薄いサイトや機械翻訳のサイトが占めており、その中から自分の欲しい情報を探すのが他言語に比べて非常に難儀でした。
を入れてドメイン単位で複数のサイトをブロックして何とか対処しました。
有用なサイトがあったのも事実なので、そちらの方々には非常に感謝しております🙏🏻
Realm
永続的なデータ管理のために、Realmを導入しました。
まずはデータベースとして、RealmかSQLiteどちらを導入すべきか検討したのですが、トレンドや、将来的にサーバーとの通信を行う可能性も考慮してRealmの導入にしました。
クライアント側にDBを持つというのがあまり馴染みなく、seedをどう設計するか、migrationをどう担保すべきかなどの悩みはありましたが、Realm公式ドキュメントが充実しているので試行錯誤しつつも実装は可能だと思います。
が、Realmを考慮したアーキテクチャへの切り替えは考慮すべきポイントが多く、アプリ開発の大半がRealm対応に費やされました。
Web開発に慣れ親しんだ人にとってはRDBとの思想の違いについて多少悩むものの、ユーザー操作とDBとの同期が簡単に実現できるようになっていたので、一度理解してしまえばそれ程苦労しないかもしれません。
Swift Package Manager
Realmの導入に際して、Swift Package Managerを導入しました。
Rubyでいうbundle, Pythonでいうpipなどに相当するパッケージ管理ツールです。
CocoaPodsなども有名ではあり、ググるとCocoaPodsの記述も多くありましたが手軽さやトレンドからはSwift Package Managerの方が推奨されていたのでそちらで管理することにしました。
TestFlight
ある程度アプリが仕上がってきたので、実端末での動作確認を行いたくなりました。
iOS環境では、実端末でベータ版の動作確認・フィードバックを行えるTestFlightと呼ばれる仕組みがあります。
TestFlight自体は必須ではないのですが、アプリ公開までのフローにおいて問題点などを事前に確認できるので、このタイミングで導入することにしました。
TestFlight利用にあたっては
- アプリアイコンの登録
- Apple Developer Programへの参加
が必須なので、リリースを見据えてこのタイミングでアプリアイコンの作成とProgramへの参加を行いました。
アプリアイコン
アプリアイコンは最低でも
- 120x120
- 152x152
- 167x167
- 1024x1024
の4種類のサイズが必要です。
面倒くさかったので Figma で作りました。
のように、1024x1024サイズで作ったアイコンを
あらかじめ出力サイズを指定しておけば複数の画像サイズでエクスポート可能なので重宝します。
似たような機能を持っているアプリやサービスは他にもあるのかも知れませんが、
- 知り合いのデザイナーがデザインツールとして活用していた
- 2プロジェクトまでなら無料
- 複数サイズで一括エクスポート可能
なあたりが自分にとって丁度良かったので試してみたところドンピシャでした。
アルファチャネルの削除
アプリアイコンやApp Storeプレビューとして利用される画像は、アルファチャネル(アルファチャンネル、透過)が含まれるとエラーとなりました。
Figmaでは残念ながら現時点ではアルファチャネルを削除した状態でエクスポートすることはできません。透過処理を削除するために、png画像をプレビュー.appで開き、改めて Export... から Alphaチャネルでの出力のチェックを外して保存し直して削除します。
ちょっと手間だったので、後に自動化予定です。
Apple Developer Programへの参加
Apple Developer Program - Apple Developer から登録するだけなので細かい話は割愛します。
現在では11,800円でした。以前よりちょっと高くなりましたね。
払ったら後には引けないので頑張ってリリースまで漕ぎ着けましょう。
App Store プレビュー
地味に面倒でした。
- iPhone5.5インチ用
- iPhone6.5インチ用
- iPad Pro 12.9インチ用（第2世代/第3世代）
の少なくとも3バージョンでスクリーンショットが必要だからです。画面サイズが少しでも異なるとアップロードに失敗します。
これも面倒だったのでFigmaで生成しました。世のアプリの大半が「文字 + キャプチャ」で背景を余白で調整していたのは画像サイズを調整するためだったのかとよく分かりました。
プライバシーポリシー
ある程度アプリが仕上がり審査準備を進めたタイミングで、個人アプリといえどもプライバシーポリシーを掲載しているURLが必須なことに気付きました。
アプリ公開まであと少しというところで、ドメイン登録したりWebページ作成したりは面倒です。
が、Google サイト で所謂ノーコードなWebサイトが作成できることに気付きました。
- トップページ(アプリ概要ページ)
- プライバシーポリシーページ
だけ作成し、プライバシーポリシーのURLとして設定しました。
問い合わせフォーム
これは必須ではないですが、個人的にアプリの不具合や要望を受け付けるフローは必要と考えていたので、問い合わせフォームも作成しました。
Googleフォームを利用した簡易的なものです。が、クエリで任意の値を初期値として組み込むことができるので、アプリのバージョン情報をパラメータとして組み込んだ形での問い合わせフォームの設置を行いました。
こんな感じです。
ちなみに問い合わせフォームでのメールアドレス入力を必須にしたので、その旨をプライバシーポリシーにも盛り込んでいます。
いざ審査へ!!
審査ボタンを押していざ審査へ。
初審査でしたが1時間半程で Ready for Sale となり、App Storeに公開されました。アプリ内容にもよるのでしょうが早い!!
実際に公開されたアプリがこちらです。
不思議のダンジョンシリーズである「トルネコの大冒険」や「風来のシレン」の殆どのアイテムが未識別で登場するいわゆる「もっと不思議のダンジョン」系のダンジョンを攻略するため"だけ"のアプリです。
識別済みのアイテムのチェックや、ダンジョン内の店頭価格からどのアイテムかを識別することができる機能を持っています。
実にニッチなアプリですが、興味のある人はぜひダウンロードしてみてください。
フィードバックも随時受け付け中です。
GitHubリポジトリの作成が2/5で、審査提出・リリースが4/11だったので大体2ヶ月程でのリリースとなりました。
〆
振り返ってみると、アプリ開発の作業としては
- SwiftUIでのアプリ実装
- Realm導入
- アイコン, 画像, プレビュー画面
- プライバシーポリシー, 問い合わせフォーム
の4つに大きく分かれました。
すべて避けては通れない作業ですが、アプリ実装以外の作業ウェイトも意外に大きく占めていました。それらを如何に効率よくできるかが個人アプリ開発のモチベーション維持のキモのように感じました。
（自分が使う分にはTestFlight公開あたりで満足してしまうので）
この記事ではアプリ開発外のところを如何に低コストに実現するかにフォーカスしたので、面倒だと感じた作業を効率よく進める一助になればと思います。
それではよいHappy Hacking Lifeを。
Discussion