GeminiでFlutterアプリを作る話

上記画像のようなFlutterアプリを作成しました。
Q.何故？
A.Flutterのサンプルコードが欲しかったから

というのも3,4年ぐらい前に一度Flutterのサンプルアプリを作成しました。
なので基礎的な部分はある程度わかっています。

その上で「こんなアプリを作成するときのサンプルコードが欲しい」と考えた際、
今ならGeminiに出力させればいいのではないかと考えるとまぁ簡単にできるものです。
当時は参考書か参考サイトを漁るしかなかったのですけどね。

ただPCがWindows10から11に変わってPermissionがどうのといったエラーが大量発生したため
コードチェックよりそちらの対処の方が時間掛かってる模様。

プロンプト

サンプルコードが欲しかっただけではありますが、
ある程度の混合機能になると一発出力が難しいものです。

使用するパッケージの問題だったり、何故か2回目以降のコンパイルができなくなったり
Windows11のターミナルが使い物にならなくなったり、etc、etc

なので一度簡単な機能で全体をざっくり作成した後に機能を追加する方法で出力しました。

全体ざっくりプロンプト

Flutterでwebアプリを開発します。
仕様は以下の内容です。

メインカラー
・茶色

画面サイズ
・9:16 縦持ち用

機能
・ヘッダーのボタンを押すとリストを更新するアプリ

詳細
・ヘッダーはスクロールしても常に表示されます。
・ヘッダーに実行ボタンを配置します。
・リストは「作成日」と「件名」が記載されたリストです。
・リストはList型の変数の内容を順番に表示しています。

・ヘッダーの実行ボタンをタップするとList型変数に「件名、本文、作成日」のMAP型変数を追加します。
・リストの各項目をタップすることで「件名、本文、作成日」が書かれた詳細画面を表示します。

とりあえずサンプルコード。

作りたいものを大雑把に言えば
サーバーからメールを取得してリスト化するアプリ。

データをサーバー取得に変更

サンプルコードに以下の変更を行ってください。
・「List型変数に「件名、本文、作成日」のMAP型変数を追加する」→「外部サイトから取得したJSONをMAP型変数に変換して追加する」

データ取得先の指定

データの取得は「http://localhost:8080/」から行うように変更してください。
それ以外の部分は変更しないでください。
コードは変更を加えた全文を表示してください。

これは恐らく一つ前の時に指定していれば書く必要のなかった命令です。
なおこの際に「finally」を「finaly」と誤字ってました。
※出力し直したら修正

詳細画面にサーバーとの通信機能を追加

サンプルコードに以下の変更を行ってください。
・詳細画面の本文の後に「送信」「キャンセル」の2つのボタンを設置します。
・このボタンをタップすると「http://localhost:8080/get.php」にデータを送信します。
・送信するデータは「送信」は「0」、「キャンセル」は「1」
・データを送信するとJSONが返却されます。
・MAP型変数に変換し、キー「result」の内容をポップアップで表示してください。
・それ以外の部分は変更しないでください。
・コードは変更を加えた全文を表示してください。

追加したボタンに時間指定の表示制限

サンプルコードに以下の変更を行ってください。
・「送信」「キャンセル」は「作成日」が現時刻から5分以内の場合に表示されます。
・「送信」をタップした場合は「送信」ボタンの文字を「送信済み」に変更し、ボタンを黒くしてください。
・それ以外の部分は変更しないでください。
・コードは変更を加えた全文を表示してください。

最初「(ボタンは)現時刻から5分前のものには表示されません。」と指示したのですが
5分以内が表示されないプログラムになってました。
解釈しやすい書き方に変更。

出力させてみた感想

機能の全体を把握できていないものを出力させてみて、処理の内容を学習する。
参考書は参考書で頼りになりますが、
自分の欲している機能サンプルを作ってくれるのは学習面においてもかなり便利ですね。

ただ詳細がわかってないのでこのままだとバグフィックスができない。
だから初心者がコード生成で簡単に～などと謳ってるWeb広告などは非常に危ないと思うのですけど、
どうなのでしょうね。

なぜこれを作ったか

で、何故こんなものを作っているのか。

同様のアプリをCordovaで開発しているのです。
それをFlutterで作り直したらどうなるのか、という確認と検証ですね。

今更Cordova？ とお笑いになるかもしれませんが、
CordovaはCordovaで非常に良いものです。特に

・ネイティブ機能を殆ど使わない
・デザインを非常に凝る
・デザインやUI、追加や機能変更が頻繁に発生する

といった条件に合致する場合。
特に3番目。
CordovaはWebページを表示してるようなものなので
レイアウトの自由度やボタン追加などが非常に楽。
最悪マークアップ規則に従わなくても実装自体はできる。
FlutterやReactNativeではこうはいきません。

反面暗号化等のセキュリティ面に弱いので、対策はしっかりしなければなりません。
そういったところの開発スピードとコストの天秤が傾くなら
選択肢の1つとしては使えるものです。