イントロ
先日、はじめて個人開発によるモバイルアプリをリリースしました。写真を記録できるシンプルなアプリです。自分がほしいと思った機能を開発し、他の人も利用できる状態にできたことはとても嬉しかったです。
私は普段の仕事で開発をしているわけではありません。業務で簡単なSQLやPythonのスクリプトを書くことはありますが、モバイルアプリの開発は完全に素人です。休日の時間を使って少しずつ作っていましたが、ChatGPT(特にGPT4)の登場によって圧倒的に開発スピードが上がり、革命的な体験をしたので、今の気持ちを残しておきたいと思います。
作ったもの
はじめに、リリースしたアプリ「ALUM」の紹介です。
iOS Android
「ALUM」は、撮影前に保存するアルバムを指定したり、アルバム画面から直接カメラを起動したりできる、カメラとアルバムが一つになったアプリです。
同じ系統の写真や、定点で撮影された風景をまとめて見るのって楽しいですよね。
こんな感じで同系統の写真をまとめたアルバムやインスタアカウントに憧れる…
写真はこちらから拝借しました。素敵な記事なのでぜひ読んでみてください！
こんな写真を集めたいと思ったときに、撮った写真の中から選ぶのって大変じゃないでしょうか？
ALUMでは、まとめたい写真ごとにフォルダを作っておいて、そこからカメラを立ち上げて撮った写真をそのまま保存することができます。
この画面からカメラ起動、撮影、保存ができます
フォルダを開いたときのビューはアルバムのようになります
現在、新規の写真撮影、持っている写真のアップロード、保存されている写真のダウンロードなどの機能があります。
家族やペットの写真をアルバムにしたり、食べたものや読んだ本を記録したり、色んな用途で使えますので、ぜひ使ってみてください！
どうやって作ったか
使用した主な技術・ツールは以下です
- Flutter
- Firebase
- FlutterFlow
- VScode
- GitHub Copilot
- ChatGPT(GPT4)
また、Flutter大学様のコンテンツをはじめとして、たくさんの記事にお世話になりました。ありがとうございます。
最初にざっくりと流れを説明すると、次のような流れです。
1. FlutterFlowでデザイン、画面遷移、Firebaseとの連携などを作る
2. FlutterFlowからコードをダウンロードしてChatGPTにコメントをしてもらう
3. VScodeでGitHub Copilotを使いながら細かい機能を追加していく
※ChatGPTには都度実装について質問をしたり、ファイル構成について教えてもらったりしていました。
1. FlutterFlowでデザイン、画面遷移、Firebaseとの連携などを作る
FlutterFlowはドラッグ&ドロップでFlutter製アプリを作成可能なノーコードツールです。日本語対応はしていませんが、テンプレートもあるので、直感的に操作ができます。
GUIでデザインツールのように実装が出来ます
エレメントを配置し、アクションを加えていくことでフロントエンドで実装するような様々な画面や挙動を実現できます。設定した画面遷移を図として見ることも出来ます。細かい見た目はこの後修正していくので、この段階では、「仮でエレメントを置いておく」くらいの気持ちで問題ありません
複数ページの画面遷移の関係も図に落としてくれます
FlutterFlowは他のツールとの連携も可能で、特にFirebaseとの連携が強力です。配置したエレメントにFirestoreのコレクションを指定することで、バックエンド側もFlutterFlow内で実装することが出来ます。
コレクションの追加やスキーマもFlutterFlow側から可能です
FlutterFlowにFirebaseの権限を与えることで処理を実現します
FlutterFlow
英語ですがコミュニティもあります
こちらの記事がわかりやすかったです
2. FlutterFlowからコードをダウンロードしてChatGPTにコメントをしてもらう
FlutterFlowでは、作成したアプリのコードをダウンロードすることが出来ます(有料プラン限定。無料版でもコードを見ることが出来ますが、断片的にコピーするのはうまく行かなかったので、あまりおすすめしません)。
更に上位のプランではGitHub連携も可能です
このコードを、自分が修正/追加していきたい機能部分をGPTに渡して、コメントを振ってもらいます。これにより、各コードで何をしているかがわかります。コメントだけでわかりづらい部分があれば、そのままGPTに聞くことで、どのような処理を行っているのかを知ることが出来ます。
まずは全体にコメントを付けてもらいます
わからないところは好きなだけ深堀りして、例示してもらいながら教えてもらいます
FlutterFlowで作ったコードが実際にどのように書かれているか、把握することで自分が追加したり応用したりすることが出来ます(完全には把握できていないので、もう何周かこの流れでアプリを作ると理解できそうです)。この流れは、クローンアプリとして公開されているコードやオープンになっているコードでも同じことができそうです。
3. VScodeでGitHub Copilotを使いながら細かい機能を追加していく
コメントをつけてもらったコードを、今度はVScodeに貼り直して機能を追加していきます。ここではGitHub Copilotを使って、コメントを書いて追加のコードを書いてもらいデバック、という作業を繰り返していきます。うまく動かなければ、周辺コードと合わせてGPTに聞いたり、Google検索で調べながらコードを書いていきました。
お決まりの処理みたいなものは期待通りです
CopilotもGPTも、コメントやプロンプトでけっこう出力が変わります。特にCopilotはまだ使いこなせている感覚は薄いので、試行錯誤中です。なるべく解釈の余地が残らないように、しっかり定義してあげるのが大事かなと思っています。
こんな使い方もできるんですね…
正直、この繰り返しで作りたい機能の全ては実現できたわけではありません。しかし、新しいアルバムを作る、カメラを立ち上げて写真を撮影する、アルバムのタイトルを編集する、写真を削除したり、ダウンロード/アップロードしたりするという基礎的な挙動は実装することが出来ました。Dartを使うのははじめてでしたが、FlutterFlowを使い始めてから1ヶ月位で完成したと思います。
意外と大変だったのは環境構築や、実機にビルドするところでした。これはエラーメッセージをGPTに渡しても、なかなか解決に繋がりませんでした。最後はFlutter大学のkboyさんに相談して、解決できました。ありがとうございました！！！
どのような点が革命的と思ったか
実は私は一度同じアプリをJavaで書こうとして挫折しています。 特に非同期処理が実装できず、実機でビルドしたアプリは処理が遅くて使い物になりませんでした。
ChatGPTがでてきたころ、普段の仕事で使っている簡単なGASを書いてもらおうと思って、ほぼ完璧なコードが出力され、コメントもつけてくれたのを見て、「これならアプリもかける」と思いました。単純なスクリプトとは違い、アプリケーションはファイル構造が複雑です。これをすべてGPTに理解させることはトークンの都合上出来ませんでしたが、数回のやり取りの中で推測をしてくれたり、「〇〇のファイルのコードを教えて下さい」と質問させたりすることで、かなりの精度で出力をすることが出来ました。
プログラミングは成果が出るまで進捗がわかりづらく、私は何度も同じエラーメッセージに直面し嫌になることがよくありました。ただ、GPTに聞いて数回試行するとエラーメッセージが変わったりして、全く見当がつかない状態から少しでも進捗している実感を得られました。GPTに頼ってしまって、100%理解できていないまま進んでいる感覚もありますが、これまでJavaの本を買って独学で勉強しているときよりもはるかに学習の効率は上がっているなと思います。
また、GPTとのやり取り自体にも発見があり、これまで辛かったトラブルシュート作業にも楽しみを見出すことが出来たのが、一番の革命かも知れません。
特に参考にさせていただいた記事
最後に
「のらとも」というグループ名でアプリ開発などやっています！
Discussion