ChatGPTを利用してアンドロイドアプリを作る

　もともとアンドロイドアプリを作れるが、ChatGPTを使うと早くできるのでよくつかう。通常のアンドロイドアプリでは、デザインテンプレートを選んでから、GUI部品を追加していく。だけどAIの場合はアイデアを出すとGUIを生成するので、空のテンプレートのほうが手間がかからない。

「アイデア出し」と「コードの生成」を対話しながらイメージを具体化させていった。

アイデア出し

　Edyで決済するときに物理的なカードタイプのときはカードを見せればレジ担当者が対応してくれた。今はおサイフケータイを使っているので「楽天Edy」と言わないと伝わらない。ここで問題なのが「Edy」というと「iD」とよく間違われる。なのでEdyアイコンを提示して喋らなくてもレジ担当者が認識しやすできないかと考えた。

ざっくり画像をすぐ表示するアプリが欲しいというアイデアがあったが、ぼんやりとしか浮かばなかった。次のように指示を出した。

• androidアプリでカード券面を表示するアプリを作りたい
• ストレージ内の画像を券面を切り出す機能と画像を全画面で表示する機能がほしい
• 輪郭抽出で取り出したい
• 切り出した画像をすぐに開けるよう保存したい
• 保存した画像は「アプリ内部専用」で
• アプリ起動時に固定の画像を開き、設定から保存した画像一覧を選択したい
• サムネイル画像とファイル名の両方を表示したい

　画像の切り出し機能自体はめんどくさくなったので後から削除した。

アプリ名を考える

アプリのプロジェクト名をアプリ名と同じにしたかったので先にアプリ名を決めた。同名のアプリで被りたくなかったので被らないようにと指示した。

• アプリ名を考えて
• カードよりも画像を表示する名前にして
• 同じ名前のアプリがたくさんあったので被らない名前にして
• 「画像を見せる」と「すぐ表示できる」という機能を表して

GUIデザインを考える

GUIに画像を表示するときに仮置きの画像を指定した。ついでに画像の生成も指示した。エラーをそのまま投げると対処法を書いてくれる。

• 動かしてテストしたいのでactivitymainを出力して
• Cannot resolve symbol '@drawable/default_card'
• default_card.pngの画像を生成して

コードの実装

GUIを配置するとコード部分を書かせる、基本はコピー＆ペーストで動くが、コード外の部分でエラーで止まることもある。

• MainActivity.javaのコードも書いて
• @layout/activity_main does not contain a declaration with id main
• Cannot resolve symbol 'FullscreenActivity'

次のステップとして、 MainActivity で選択した画像URIを保持 → FullscreenActivity に渡す 実装を進めますか？

• 次に進めて

have you declared this activity in your AndroidManifest.xml ?

Unable to find explicit activity class {io.github.kyukyunyorituryo.pictnow/io.github.kyukyunyorituryo.pictnow.FullscreenActivity};
have you declared this activity in your AndroidManifest.xml ?

つまり、FullscreenActivity を AndroidManifest.xml に登録していない ため、システムが起動できません。

AndroidManifest.xml に FullscreenActivity を追加してください。

• 選択した画像を次回起動時に選択した状態にしたい

時々現在の状態のコードを渡すとズレを修正できる。

エラーの原因は MainActivity 側で文字列に変換して渡したのに、FullscreenActivity 側で getParcelableExtra() を使って Uri として受け取ろうとした ことです。

解決方法はシンプルで：

MainActivity → putExtra("imageUri", uri.toString()) で文字列にして渡す
FullscreenActivity → getStringExtra("imageUri") で受け取って Uri.parse() する

• 保存した画像を内部ストレージに保存して使いたい
• FullscreenActivityで画像を表示するときに画像の縦横のサイズに合わせて大きく表示する向きを変えたい
• 内部ストレージに保存した画像を一覧表示して選択や削除したい
• レイアウトに追加したい
• ファイルが増えてもファイル一覧が更新されない
• 一覧は 時系列で新しい順
• 保存後に即座にリストに反映
• Variable 'position' is already defined in the scope
• 問題点を見つけて

FullscreenActivity で Uri.parse(null) を呼んで落ちています。 これは Intent に "imageUri" を渡さずに "imageFileName" を渡すように MainActivity を変えたのに、FullscreenActivity 側がまだ "imageUri" を受け取ろうとしている ためです。

java.lang.IllegalStateException: View can not be anchored to the the parent CoordinatorLayout
つまり CoordinatorLayout の直下にある View に対して、app:layout_anchor で CoordinatorLayout 自体を指定してしまっている ために落ちています。

リリース向けの修正

strings.xmlにテキストを移して多言語対応する。アプリのイア今夜使用する画像も生成させる。

• 多言語対応にして
• Buttons in button bars should be borderless; use style="?android:attr/buttonBarButtonStyle" (and ?android:attr/buttonBarStyle on the parent)
• ボタンの間にマージンを開けたい
• アプリのアイコンを画像生成して
• 他のものも見たい
• カードをイメージしたものを生成して

グーグルプレイに掲載するアプリ

グーグルプレイに掲載する説明文章を作るように指示した。アプリの説明につかう画像も生成した。

• グーグルプレイに掲載するアプリの詳しい説明を作って
• 保存していた画像を素早く表示できるという部分を中心に説明して
• アプリのフィーチャー グラフィックを作って。PNG または JPEG で、15 MB 以下、1,024 x 500 ピクセルで
• アプリのスクリーンショットで使うサンプル画像を作って
• 他のも作って
• 社員証のようなイラストを生成して
• 画像一覧で画像数が増えるとスクロールできなくなる
• 横画面にしたときにレイアウトが崩れる
• 横画面専用レイアウトを作って
• 全画面表示したときにピンチアウトを可能にしたい

こんなふうにして一週間ぐらいでアプリが作れた。