まつまる どうも、まつまるです。個人アプリを開発しようとしている人の参考になればと思います。
対象者
・個人でアプリ開発しようとしている方
・駆け出しエンジニアの方
・エンジニアが何しているか知りたい方
簡単な自己紹介
会社に5年勤めてから大学に入学して、今年の春から2年生になります。
プログラミングはやったことがなくて、2020年11月くらいから始めました。初めの言語はpythonでした。pythonの初心者本を買って意味もわからず写経していました。
その後きっかけは忘れましたが、骨格推定の技術に感動してスマホで動かすためのアプリでも作ってみるかという軽い気持ちではじめました。
アプリ紹介
『スイングハック』
骨格推定を用いてスイングを定量化してくれるアプリです。
スマホで撮影した動画を解析することで前傾姿勢の角度を確認したり、他の動画と比較して見ることもできます。
iOS：AppStore
Android：GooglePlay
開発環境
Flutterで開発を進めました。理由はこちら。
OS: MacOS
IDE: AndroidStudio
開発期間
2020年12月から2021年4月上旬まで。
12月と1月は大学の講義や期末テストがありつつも、1日平均２時間くらい。
特に2月と3月は大学の春休みだったので1日6時間くらいはやっていました。
ざっくり計算すると、500時間ですね。気軽にできる時間じゃない。笑
開発工数
トータル500時間なので、時給1000円換算するとアプリに掛かったコストは50万ですね。
開発の目的
ゴルフが好き
市場調査
『GOLFAI』というスイングを解析するアプリがあるので僕のやつは二番煎じになります。しかも、NTTドコモが手掛けているというおまけつき。クオリティじゃ勝てんことは分かりながら取組みはじめます。
アーキテクチャ
ざっと下の図の通りです。開発を進める前に作成しておけば遠回りしなくて済むと思います。
細かい内容は別の記事に書きましたので参照ください。
開発過程
– 1ヶ月目
環境構築
環境構築をなめているとマジで痛い目にあいます。初心者の僕はそんなことも知りませんでした。ここを我流でやってしまうと後々手間がかかる可能性があるので、プログラミング初心者はUdemyかYoutubeかなんでもいいですけど評価が高くて最新であることを確認して進めていくことを強くオススメします。Flutterであればこのコースがおすすめです。
公式サイト日本語ver
Flutterの公式サイト（英語）は充実していますけど、僕には難してくてちんぷんかんだったので、Flutter公式サイトの日本語verをやりました。これも全部を理解するのは難しかったので、出来ないところは飛ばしながらやっていました。最初の取っ掛かりとしては良いんじゃないかと思います。
Flutterでできることをググる
僕は機械学習のアプリを作りたかったので、Flutterと「Firebase」「MLkit」「tflite」の相性が良いことを知ってテンションあがりました。どれも数行で機械学習を実装できる強者たちです。
– 2ヶ月目
ネットにあるプログラムをコピペ
「Flutter ToDoアプリ」とかで検索するといっぱい出てくるので、コピペして実際に動かしてみました。UIの色を変えてみたり、文章を変えてみたりすることで、どこがどこと関係しているか手当たり次第見つけていく感じです。
Githubのレポジトリをクローン
ここでGithubの存在に気づきます。今までは愚直にコピペしていましたが、Githubのクローンの素晴らしさに驚きました。Githubには先人たちの技術が詰まっているので学習効率が爆上がりします。
実際に動かしてみないとわからないことがたくさんあるのでこの時期はコードを書くよりも眺めて変更してホットリロードを繰り返していました。
UdemyのFlutter初心者コース購入
コードを眺めていた代償なのか、いざ自分でコードを書こうとしても全然進まなかったのでUdemyに手を出しました。
これがマジで良かったです。コードの書き方だけでなくてプログラミングの概念もアニメーションで説明してくれたり、アプリを作るために必要なロゴの作成方法だったり色々学べます。参考になったサイトのリンクは最後にまとめています。
デザイン作成
どんなワークフローにするか仮案で作成してみました。
– 3ヶ月目
技術選定（データベース）
データベースをどうするかはけっこう悩みました。ざっくり言えばデータをデバイスに保存するのかクラウドに保存するかです。結局、解析した動画はデバイスに保存して、動画のパスをクラウドに保存しました。
今振り返ってみると、個人アプリ程度のレベルだと好みの問題なのかなと思います。
Firebaseの活用
FlutterとFirebaseの相性が良いことをすっかり忘れていました。ログイン機能とデータベースを組み合わせるとかめっちゃ簡単に実装できます。
– 4ヶ月目
FFmpegと格闘
骨格推定と画像の組み合わせは比較的簡単だったんですが、動画になった途端ベリーハードでした。ググったら「FFmpegを使えばできると思うよ」みたいな1文しかなくて絶望でした😱この時期はしんどかった。詳細はこちら。
Flutter大学（オンラインサロン）に入会
動画の骨格推定が出来なくて悩んでいた時にネットをさまよっていたらFlutter大学を見つけたので入ってみました。結局、動画関係の悩みはオーナーであるKBOYさんも詳しく無かったので自分で解決しましたが、悩みを相談することで自分の思考を整理できるので入会して良かったと思います。
また、Flutter大学のGithubには共同開発しているアプリがたくさんあって、そこからログイン周りのコードをパクることもできます😄これはめっちゃメリットだと思います。
あとはリリースしたアプリをインフルエンサーに広めてもらうとこも含めると、Flutterでアプリをリリースするつもりなら完成する前に入会した方が良いと思います。笑
アプリ申請
ひとまずアプリリリースが目標だったので、必要な機能以外は諦めてなんとか完成させました。
AppStoreへの申請はリジェクトが5度も来たので一週間かかりました。リジェクト内容はこちらにまとめました。
技術的に意識したこと
特にありません。動けばOKという雑なやり方で進めました。バグ祭りにならないか心配です。汗
モチベーションの保ち方
ここは結構重要だと思います。僕は自分で自分を褒めちぎっていました。
あとはエラーとの向き合い方も大事だと思います。ググっても解決できそうにないエラーが出ると心が折れそうになりますが、ググっても解決策が出てこない場合はスペルミスかファイル名が間違っている可能性が高いので冷静になりましょう。
あとはアプリを作っている途中段階を友達に見せて、○月頃にはリリースするからダウンロードしてねと言いふらすと良い感じに自分を追い込めます。笑
AndroidStudioのTips
– デバックモードを使いこなす
これに関しては、そんな便利なもの早く教えてくれやと声を大にして言いたいです。もうデバックモード無しで開発はできません。
詳しくはこちらを参照してください。
アプリ開発の辛かったところ
– 日本語文献が超少ない
これはもうしゃーないです。プログラミングやるなら英語読めないと詰みます。英語勉強したい人にとっては一石二鳥かも。
– バージョンエラー
アプリ開発に限らずかもしれませんが、iOS9までサポートするのかiOS 11までなのか指定してあげないと上手く動作しないことがあります。バージョンエラーを解決するのに丸3日掛かったこともあります。笑
運用
お問い合わせフォーム：GoogleForm
アクセス解析：Firebase/Analytics
プライバシーポリシー：GoogleSite
使い方ガイド：GoogleSite
参考リンク
Todoアプリ：https://qiita.com/popy1017/items/7ada79b07281f4a8e544
骨格推定：https://qiita.com/bigface00/items/ad2bf48d406681fc35fb
アプリ構成作成ツール：https://app.diagrams.net
ロゴ作成ツール：https://www.canva.com/ja_jp/
ロゴ作成ツール：https://icons8.jp
ロゴ作成ツール：https://appicon.co
GoogleFont：https://fonts.google.com
まとめ
振り返ってみると、ただガムシャラにやっていただけでした。3ヶ月目くらいから急に形になってきたので、最初が踏ん張りどころなのかなと思いました。
たぶん、やりたいことじゃなければ途中で諦めていたので初心者は特に何のためにアプリ開発するか動機付けがけっこう重要だと思います。
