よこぼと申します。
初心者です🔰
同じような初心者・初学者の方にも、
育成や普及活動を進める立場の方にも、
参考になるような記事をあげていけたらと思います。
よろしくお願いします🙇
=======================
前回までのあらすじ
全然うまくいかないときもあったけれど、
なんやかんやあって喋るネコチャンを生み出すことに成功したよこぼ。
しかし彼の貪欲さはとどまることを知らなかった…！
前回はこちら↓
---
ARネコボットを作りたい
さて、貪欲なよこぼは何にチャレンジしたのか？
ズバリ、「AR」です！！
最近ARやらMRにとっても興味があるよこぼ。
やっと喋れるようになったネコチャンを改造して
ARチャットbotを作ろうという計画が始まりました！
で、普通にARを作っても面白くないので・・・
「マーカーAR」にチャレンジしました。
マーカーARとは、特定の画像（マーカー）をカメラで認識して、その上に3Dモデルや情報を重ねて表示するARの方式です。
あらかじめ決めたパターンを目印にすることで、位置や向きを安定して認識できるのが特徴です。
これまで「AR」はやったことがあるのですが、
マーカーARは初めてだったので、
「簡単なやつお願い！」とGPTさんに言ってセレクトしてもらったのが
AR.js
です。
AR.js は、スマホのブラウザだけでARが動く WebARライブラリ で、マーカー認識や画像認識を使った表現が手軽に試せます。アプリ不要でURLを開くだけで体験できるのが特徴です。
なんか説明ばっかりになってしまった・・・
じゃあ早速作っていきましょう！！
---
せーの、
どん！！
今回のマーカーはAR.jsのサンプルマーカーです。
（四角い黒枠で囲まれたHiroの文字がある部分です）
前回まででチャットbotの大枠は出来上がっていたので、
それをもとに
「サンプルマーカーを認識して3Dモデルが立ち上がる→チャットできる」
にもっていくのはそんなに難しくなかったです。
ただ、さすがにサンプルマーカーで完成させるのはもったいないですよねぇ・・・
どうせならもっと自分らしいマーカーでチャレンジしたい！
というわけで、次からはマーカー探しの旅です。
---
マーカー探しの旅
マーカー探しの旅なんですが、
なかなか反応しないんです。
最初はアイコンネコチャンを使いたかったんですが、
（よこぼは飼っている猫のドット絵をアイコンにしてます）
どうやらARjsのマーカーは
・非対称
・線が太め
という条件があるっぽくて、
なかなか読み込んでくれない…
というわけで試行錯誤しました。
自分でドット絵描いたりしました。
家でも外でも、「なんで読んでくれないんだろう🤔」と考えてました。
試行錯誤の足あと🐾
で、最終的に行き着いたのはこれ。
どうやら外側の枠も読み込みに重要みたいです。
このマーカーをかざすと、ネコチャンのモデルが出てきます。
こちらのリンクで、上の画像をかざしていただくとネコチャン出現します。
（このブログ画面でいけることも確認しました）
https://yokobo103.github.io/ar-cat-chat-maker-front/
そしてトラブルなければ・・・ちゃんと喋れるはずです。
ちょっとモデルの位置調整が難しくて変な位置に出ちゃうんですが・・・
ちなみに、実際はこんな感じのpattファイルをトリガーにモデルが出現するしくみです
---
というわけで、
よこぼの「初心者🔰がAIチャットbot作ってみた」はこれにて最終回です。
自分で試行錯誤しながらものづくりができるのも、
生成AIが学習のハードルをめちゃめちゃ下げてくれてるからだなぁ、
とあらためて感じます。感謝です。
うまくいかないことも含めて面白い経験でした！
次は何にチャレンジしようかなぁ。
最後までお読みいただきありがとうございました🙇
---
念のため再掲です！こちら↓
https://yokobo103.github.io/ar-cat-chat-maker-front/
マーカー画像も再掲します↓