よこぼと申します。
初心者です🔰
同じような初心者・初学者の方にも、
育成や普及活動を進める立場の方にも、
参考になるような記事をあげていけたらと思います。
よろしくお願いします🙇
=======================
今までは枕詞に「超初心者🔰」とつけておりましたが、
そろそろバイブコーダー歴半年ぐらいになりますので、
今回から初心者🔰に格上げします！
みなさまお久しぶりです！
初心者🔰よこぼです🐈
今回は松尾研LLMコミュニティの「実践へのbridge講座」の最終課題、AIチャットbotを悪戦苦闘しながら作った様子をみなさんにシェアします‼️
悪戦苦闘っぷりを是非とも楽しんでいただけたら嬉しいです❗️｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡
---
◆ひとまず猫を出してみる
まずはどんなAIチャットbotを作ろうか考えます。
このごろARやらMRに興味津々のよこぼ、
AIチャットbot✖️ARができないかGPTさんに相談します。
どうやらiPhoneだとARは難しそう。
というわけで、ひとまず提出できる形にするために
疑似ARとやらを作ってみます。
で、ひとまず作ってみました。
でーん！！！
意外と簡単にできるもんすね👀
ネコチャンは自分でARを作ってみた際に使った3Dモデルです。
なーんだ。こいつは簡単だね！(ﾟ∀ﾟ)
そう...このときの僕は、想像もしていなかったのです。まさかあんなに苦労することになるとは…
---
◆フロントエンドとバックエンド
ちょっと技術的(?)な話を。
フロントエンド？なにそれ美味しいの？
と思う方もいらっしゃるかもしれません、ちょっと解説しておきます。
今回はフロントエンド（写ってる画面）をGitHub pagesで、バックエンドをVercelで作りました。
（そう、今回は僕にとって初めてのフロントエンド&バックエンドです！）
GitHub pagesは自分のwebサイトを作った時に使ったんで、手慣れたもんです。
じゃあなんでわざわざVercelを使うの？って話なんですが、
GitHub pagesは"静的サイト"しか作れないみたいなんです。つまり、表示が変わらないサイトしか作れないんです。
チャットbotは会話のたびに表示が変わりますよね。こういうのを"動的サイト"と呼ぶらしいんですが、
この動きを今回はVercelに担ってもらうんです。
へー、勉強になったなぁ。
画像のネコチャンはバックエンド未実装なので、「なるほど、もう少し詳しく聞かせて」しか喋れません…
---
◆なかなか言うことを聞かないネコチャン
どうやら、iPhoneの文字入力ってかなり曲者らしく、
下側に現れるキーボードによって全体的に上に押し上げられる
→ネコチャンが画面外に消えてしまう、という状態に。
コード詳しかったら微調整できるんだろうけど、
ちょっとまだひよっこ初心者の僕には無理です・・・
右：ネコチャアアアアアン！！！
---
◆救世主Codexたん（スマホでGitHub連携）
楽勝だぜ！
と思っていたらなかなかうまくいかないネコチャン。
ここで救世主Codexさんの登場です。
僕はVSCodeではcodexいっぱいお世話になっていたのですが、
iPhoneでも活躍してくれるということを初めて知りました👀
「codexさんここ直して！」と言うと、
勝手にGithubの中身をいじってくれる。
お昼休みに指示したら、
昼休み中にちょちょっとやってくれたりします！！すごい！！
だがしかし…
結局のところiPhoneの曲者キーボードには勝てなかったんです・・・
というわけでこんな感じのUIにしました。
入力欄を上に設けました。
こうしたら、キーボードが出てきてもネコチャン消えないんです。
やったね‼️
ふぅ、思った以上に長くなってしまったので、
今回はフロントエンドで終わります。
ここまでお読みいただきありがとうございました🙇
次回「バックエンドの悪魔」
バイブコードスタンバイ！！