続・発達障害が楽になる何かをAIで作ってみた | AI | Gemini | ADHD | 大人のADHD | 発達障害 | 発達特性 | 特性 |

こんにちは！春乃ひかりです。

本来なら海外記事なのですが、
前回のタスクの表示ツールが中途半端だったので続きを書かせて下さい。

前回の記事はこちら。

前回まではHTMLファイルをGeminiのチャット画面で作っていたのですが、
ファイル１個で作るとなると無理があるようで、

・イラストが何処からか持ってきたスマホの絵文字。
・毎回１から作り直すため、イラストや文字色や動作が安定しない。

どうしたものかと詳しい人に聞いてAntigravityを使う事にしました。
そういえばそんなのあったなぁ・・。
去年あたりにセミナーで1度使った事があったんですが、よく分からないまま放置していました。

私はGeminiに課金しているのでAntigravityを使いますが
ClaudeにClaudeCode、
ChatGPTはCodex
で同じような事ができるようです。
Antigravityは無料でも使えます。

フォルダにチャット画面で作ったHTMLファイルを、
前回の修正案をそのままチャット画面にコピーしました。

・イラストを次男好みにもっと可愛くしたい。
・全画面どこを押しても次のタスクに行くのではなく、
　「やりました！」の大きいボタンを付けた方が良さそう。
・遅延割引を考慮して、「あと何個タスクをこなせば遊べるか」
　を表示した方が良さそう。
・できたら右上にメニューボタンがあって
　親の方でタスクをすぐに変更できたら良いな。

そしてできたのが以下になります。
メニュー画面まで出来てました。すごい！

イラストがスマホの絵文字から変わっていました。
でもイラストファイルみたいなのも出来てないし
何か赤ん坊向けっぽいイラストだなあと思ったら
SVGのイラストでした。

ころころイラストが変わるので
ちゃんとした少年誌の絵柄のイラストが目がいくかなと思い
「イラストは、ドラ○もんのレベルで作って！」と伝えると、
Geminiが以下のイラストを作ってきました。

求めているイラストではなかったので
普段から使用している家族のイラストを提示して

某少年漫画誌の画風でイラストを描いて！とお願いしました。

イラストを描き直してもらっていると、Geminiの制限にすぐ引っかかってしまい、作業が中断されて数時間待たされることが完成まで５回ほどありました。
やっぱり画像を作るのに沢山トークンを使うようです。

動作ミスがあったりレイアウトを変更したりで修正してできたのが以下になります。

ほぼ思った通りの物が出来ています！
イラストの文字が色々変ですがインパクト強くて
目の刺激に良さそうなのでさしあたり放置します。

早速、家にあるiPadで使えるように
作ったファイルをドロップボックスで移動させて表示します。

しかし、ダウンロードしたファイルをブラウザから見ようとしますが表示しません。
アップロードしたドロップボックスから直接見ようとしましたが駄目でした。

多分ローカルのhtmlファイルがブラウザで開く際にインターネットに接続しようとしているらしく、
何か悪さをするのではとブラウザに制限されるようです。

じゃあGoogleドライブにhtmlファイルをアップロードして
Googleサイトに埋め込んだらどうかと試したんですが
それも上手くいかず。

ならレンタルサーバーにアップを思いつきますが、
上手くいくかも分からないのにお金を払うのも、、

詳しい人にまた聞いてみると
GitHubにアップしたら見えるとの事。

操作が難しそうで何となく
避けていたGitHubか、、と思いつつ

無料のClaude(プログラムと言えばClaudeのイメージなので)に
つまづいた時のスクリーンショットをアップして
質問しながらGitHubにファイルをアップします。
プライベート(限定公開)だと画面確認出来ないそうで、
最初にプライベートにしてしまったので設定をパブリック（全体公開）に変更しました。
Claudeに聞いたおかげでそんなに難しく無かったです。
Claudeって画像が苦手だと思っていたので画像理解できるの知りませんでした。

パブリック(全体公開)で動作を見なければいけないのですが
個人情報が出てるわけではないのでとりあえずアップします。
URLをたたくと、、

無事表示できました🌸(⌒▽⌒)🌸❣️
❣️嬉しい❣️
少し画面が狭いですが使えます！

家族で1番背の低い次男の目線に合わせて
壁にスマホホルダーを設置して置いてみます。

本当に使ってくれるのかな〜と思いながら
作っていましたが壁につけると
一気に使ってくれそうな気がしてきました。

ただ設置してから新たに気付いた懸念点
・兄弟なので2個必要だった。
　→使えそうならもう一つタブレットとスマホホルダーを用意する？
　→同じページに2画面出す？→❌iPadminiなので小さすぎる。
　→⭕️なかなか定着しない次男にまず使わせてみる
・長男がタブレットを取って動画見始めるんじゃ無いか？
　→スマホホルダーをもう一つ買ってきて固定する？
　→⭕️画面ロックをかけているので主人に朝に指紋で解除してもらう
・iPadが最初に画面ロックかかっているので朝に主人を起こす必要
　→⭕️長男が動画見そうなので朝主人に指紋でロック解除してもらう
・タスクを増やす時にイラストフォルダを開いてどのイラストを使うか選択させたい。
　→⭕️要プログラム修正（イラスト追加）
・初期設定の時点から「帽子(校帽)をかぶる」の項目を増やす
　→⭕️要プログラム修正（イラスト追加）
・メニューのロック画面の計算が簡単すぎて息子にも解除できる
　→もっと難しい問題にする→❌解除が面倒
　→⭕️悪さしなさそうなのでメニューロック機能を削除する。

実際使ってみないとなんとも分からないので
さしあたり、しばらく息子(主に次男)に使わせてみようと思います。

目玉、、使ってない時は良いんですが
使っている時は情報がとっ散らかる感じもします(笑

まとめ

思ったより簡単に作れたと思います。
労力もさほど感じないので、
「せっかく作ったのに」と思う事も無く
手軽に作って子供に合わないなら簡単に捨てられます。

一度作ると慣れるので、
次はもっと手軽に作れそうです。

AIツールの作り方まとめ

1.パソコンにAntigravityをダウンロード
2.チャット画面で「こんな機能のツールが欲しい」と命令する。
3.動作確認をしてみておかしな箇所、
　思った通りでない箇所があれば
　「〇〇を修正して」と命令して
　修正↔︎動作確認を完成まで繰り返していく。
　(Antigravityから度々英語の質問がきますが1番上のYesで進みます)
4.(htmlの場合)完成したら個人情報などには気を付けつつGitHubに全体公開設定でアップして動作確認をする
5.使いたい媒体でURLを開く

htmlしか理解できないのでhtmlファイルで作ってもらったんですが、結局一度もソースを開かなかったです。

最後まで見てくれてありがとうございます！
もしよければ、「こんなのが作ってみたい」「こんなツール作った経験」などがあれば、ぜひコメントで教えてください。