塗り絵アプリの概要
5分で学べる、ハチコのAI実践カフェ。
おはようございます。この番組では、ママエンジニア、ハチコがAIでできたことや、おすすめのAI活用法をお届けしています。
もし、この放送を気に入っていただけたら、いいねやフォローお待ちしております。とっても励みになります。
さて、9月15日、月曜日、祝日、皆様いかがお過ごしでしょうか。
先週、何度かお話しした、塗り絵アプリについて、追加でちょっと工夫した点があるので、今日はその話をしてみようと思います。
ということで、今日のテーマはこちら。
ベタ書きから設定ファイルへ。
まず、塗り絵アプリの概要について、さくっと振り返ってみようと思います。
私が今回作った塗り絵アプリは、まず最初の画面にカテゴリーを選択するボタンが出てきて、それをポチッと押すと、今度はそのカテゴリーに分類されている塗り絵のサムネイルが出てきます。
そして、さらにそこでポチッと押すと、塗り絵が出てきて、あとパレットとかが出てきて、塗り絵ができるという流れになっています。
コードは全部、クロードコードに書いてもらいました。
最初はですね、3つカテゴリーを用意して、うまく動くかなーって作っていったんですよね。
設定ファイルの重要性
この先、どんどんカテゴリーを増やしたり、塗り絵を増やしたりしていきたいなと思っているんですけど、
最初に書いてもらったときはですね、ベタっとそのカテゴリー名がページというか、プログラムの中に埋まっている状態だったんですよね。
時と場合によるんですけど、こういう固有のデータがページに埋まっているのが、いい時と悪い時とあって、
今回みたいに、今後カテゴリーが増えていくぞとか、塗り絵が増えていくぞとか、
あとはカテゴリー名を表示する箇所が複数あるぞとか、そういったときはですね、
コードの中にベタ書きするよりも、別のファイルに情報をまとめておいたほうが、管理しやすかったり、修正するときも楽だったりします。
今回はカテゴリー.jsonという、JSONファイルというものにまとめてくれました。
内容はですね、まずはカテゴリー名、そしてそのカテゴリーを選択するボタンに、クロードコードが絵文字をそれぞれ振ってくれてるんですよね。
なのでその絵文字、それから塗り絵を管理しているホルダー、今回はカテゴリーごとにホルダーを作って、その下に塗り絵の画像を入れています。
例えば動物の塗り絵だったら、アニマルズっていうホルダーの下に塗り絵を置いてるんですよね。
なのでその動物っていうカテゴリーとアニマルズっていうホルダー名を紐付けておく必要があるので、そのホルダー名も一緒に管理します。
あとは塗り絵のファイル名ですね。ファイル名はカテゴリー一つに対して複数存在するので、その一体にかけるような形で書いてもらっています。
正直ですね、ViveコーディングでいろいろAIに書いてもらう、もしくは修正してもらうんであれば、ベタ書きのままでもそんなに困ることはないかなって思います。
でもこれからもっと複雑なものを作っていきたいなとか、Viveコーディングをきっかけにプログラムをちょっと自分でも組めるようになりたいなという方はですね、
情報を一箇所に固めておくとか、情報を再利用しやすいようにするとか、あとは修正しやすいようにするみたいな視点を持ってコードをブラッシュアップしていけるといいかなって思います。
まとめと感謝の言葉
ということで、今日もここまで聞いてくださって本当にありがとうございます。一緒にAIで毎日ちょこっと進化していきましょう。
それではまたねー。
