miiboとオトーワンによるカスタマイズの紹介
miiboデザイナー、岡大徳がお送りするポッドキャスト。 今回は、オトーワン氏にお越しいただき、miiboカラーカスタマイズツールについてお聞きしたいと思います。
オトーワンさんお願いします。 はい、よろしくお願いします。
オトーワンさん、簡単に自己紹介をお願いしていいですか。 はい、今ですね、ネット上及びSNS上では、オトーワンのニックネームで活動させていただいております。
で、普段は編集の仕事ですね。ビデオとか映像じゃない方の編集ですね。よく間違えられるんですけど。
そっちの方で、コンテンツの制作とか、書籍とか、そういったことの取りまとめとか、制作をしております。
よろしくお願いします。 はい、お願いします。 今回は、オトーワンさんが作られたmiiboカラーカスタマイズツールについてお聞きしようと思うんですけど、
オトーワンさんが思うmiiboってどういったものですか。 そうですね、miiboは僕にとっては
何だろう、何個かあって、まず一つはやっぱりAIというものをより身近に感じて、かつ
応用をしたいという時の教材にもなる プラットフォームというか、AI
というのと、あとはやっぱりいつも普通チャットGDPとか、ジェミンとか使ってるんですけど、それを自分のオリジナルのものだよって言って、世に出したい時って
チャットGDPだとチャットGDPじゃん、これってなったんですけど、miiboって自分で作ったボットをオリジナルのものとして出すことができるし
表の先ほどのこの話の今日、流れになるんですけれども、 カスタマイズすることができるので、もちろん中身はいろんな言語モデルを選ぶことができるんです。
やっぱりオリジナル感が本当にデザインとかですね、本当に分かれば分かるほどいろいろカスタマイズできる。
たつ、そのチャットボットってやっぱりすごい時間が昔からかかるんですけど、
miiboに関しては本当に初期的なものであれば、僕だったら多分今5分で作る自信があるかなって思うぐらい、本当に簡単にできる。
miiboの爆速っていうふうに言ってることがあって、じゃあ本当にこれ爆速じゃんって思えるような会話型のAIプラットフォームだなというふうに思ってます。
ありがとうございます。お話しにあったAIをより身近に感じることができて応用できる、かつデザインをカスタマイズできるというところで、今回はmiiboのUIをカスタマイズできるカラーカスタマイズツールについてお聞きしようと思うんですけど、カラーカスタマイズツールってどういったものですか?
カラーカスタマイズツールの開発秘話
このカラーカスタマイズツールっていうのは、miiboをいじってるときに、miiboに最初からウェブチャット画面っていうインターフェースが用意されてるんですね。
そのmiiboのウェブチャット画面をオリジナルのものとして使えるんですけれども、今のmiiboって色ですね、カスタム化があまりできなくてですね、
ライトモードっていう白いものと、ダークモードっていう真っ黒で文字が白いものでしか2つしかないんですよね。
そこで、そういうふうになって普段あんまりかっこよくしたいなと思ってもなかなかできなかったものですから、
ある日、miiboのほうでGoogleタグマネージャーが使えるようになった、イコール、ということはこれってじゃあ表面もカスタマイズできるのかなってなった。
同じタイミングで、miiboの本社のほうからノートの記事があって、GoogleタグマネージャーでmiiboのUIカラーをカスタマイズするっていう記事が出まして、
そこで、これはちょっとカスタマイズできるんじゃないかなと思って、そこから最初興味があったんですけどね。
そしたらGTMが使えるようになって、ノートの記事を見てカラーをカスタマイズできるようになったと、そこで興味を持って作られたっていうところなんですけど、どのようにしてこれ作られたんですか?
最初にこの記事を読みながら、その通りに作って、まず、miiboじゃなくて苦戦したのはGoogleタグマネージャーの使い方の方なんですよ。
やっぱりこれ普段、マーケットとかやってない人には相当多分Googleタグマネージャーの使い方って難しいんですよ。
そこから始まって、何とかカスタマイズツールを使って、この見本通りに、miibo本社が書いたノートの記事通りに赤い色のmiibo画面、miiboのウェブチャット画面を作るところができまして、まずそこをやってみたっていうところですね。
実はそれをやってるときに、これデフォルトだから簡単に色その通りにやれば赤になるけど、じゃあこれ青にしたりとか、緑にしたりとか、どうすればいいだろうって思ったら、
ここのmiiboのノート記事にJavaScriptのコードが書いてあるんですけども、ここに書いてある色を何箇所も変えなきゃいけないのかって思うと、ちょっとこれめんどくさいなって思うのと、
コードを変えただけだと、具体的に色を変えたら実際のウェブチャット画面はどんな色になるんだろうっていうのを確認できない。つまり全体の色とボタンをクリックしたときの色の色味のバランスが確認できないっていうところで、うわ、めんどくさーっていうふうにそこで思ったわけですよね。
はい、じゃあ続けます。で、そこでこれ、実はこの状態でめんどくさいなって思ってしばらくほっといたんです。ほっといたときに、Vive Codingっていう言葉がちょっと流行りだしてきて、で、僕もそのVive Codingをしてるのはいろいろツールを作ってたんですけど、
ふと思い出して、え、Google Tag Managerのこの動く色のカスタマイズのこのJavaScriptを使って、色のプレビューがわかるカスタマイズのそのツールみたいなの作れないかなって。はい、それでちょっとやってみたっていうところですね。
で、2つこれを作るときに考えたことがあって、まずはいちいち色のパターンを考えるのがめんどくさいから、最初からプリセットで色が用意してある。赤、青、オレンジ、緑とか、あとブラック。
だが、いつものMIMOのダークモードとは違うブラックです。そういったものが最初から準備してあって、で、そのプリセットを選んだら、さらにそこからここのボタンだけ色変えたいという場合は個別に色が変えられるようにしたのと、あとは、花から全部色が変えられるように、いろんな部分がオリジナルで変えられるように。
っていうふうなことを考えました。はい。あともう1個ありましたね。必ず実際のMIMOのWebチャットの画面に似たもので確認できないと意味がない。はい。
というところですね。そこを観点にViveコーディングしていって、実はこれ、今の完成形に至るまでに50回くらいやり直したと思います。
そうなんですね。50回くらいHTMLを書き換えて、僕はGitHubとか使えないもんですから、GitHubだとバージョン管理できてもっとできたんです。
当時のコーディングも、今クラウドコードとかあるんですけど、クラウドコードを使わずにクラウドでそのままやらせてたんです。何回も止まったりとか、何か頼んだことをいい加減にしたりとかですね。
もう何か途中で直すことが不可能になったりとか、最初から書き直したりとか。それで結構ここは時間がかかったんですよ。
これViveコーディングする時のコツみたいなものもその時に掴んだりできたんですか?
やっぱり要件定義ですね。 極力やって欲しいことを書く。
やって欲しいことの前段となる自分の中での知識なんだろうという時に、僕がやったのは、まずこのmiibo社が出したノートのカスタマイズ用サンプルコードを前回りコピーして、
それをAIに読み込ませるんですよね。 このサンプルコードって何?って聞くんですよ。
そうするとこれはmiiboっていうやつの、おそらく色を変えるコードですよね?って聞いてくるんですよね。
miiboカスタマイズツールの機能
僕は実はmiiboのことをAIに学習させているんですね。
クラウドのプロジェクト機能で、miiboのこと何でも相談っていうプロジェクトを作ってて、その中には実は黒木社長の記事を丸コピーしたやつとか、
miiboの概要は何かとか、そういうmiiboの開発をするためのナレッジを僕は作っている。
そこに読み込ませると、miiboのことわかっているから、ひょっとしたらカスタマイズツールを作りたいと言っちゃう。
じゃあすいません、これで、さらにこういう要件でカスタマイズツールを作ってくださいと言って、そこから始まるんですよ。
サンプルコードとかそういったところをコードに投げて、そこからきちんと聞きながら進めていったっていうところなんですけど、
miiboからカスタマイズツールをトマさんが作られたものって、具体的にどういったものになるんですか?
miiboカスタマイズツールっていうのは、Googleタグマネージャーの中のHTMLがカスタマイズできる部分があるので、
もちろんそれはJavaScriptもできるんですけども、そこのコード、そこに入れるコードを自由に作れるツールになります。
で、アウトプットはこれはやっぱりJavaScriptがアウトプットされます。
どういったものかっていうと、まずは最初、プリセットテーマっていうのを選ぶことができるんですね。
さっき申し上げたピンク系、ブルー系、グリーン系、パープル系、オレンジ系、ダーク系、ウォーム系っていうのがあったんで、
もう大抵の色はここで決めちゃうことができるので、まずそれで色を決めていいっていう人はそれで終わりです。
かつ、あとはカラーピッカーですね。カラーピッカーの方でものすごい細かく色も設定することができます。
で、あとはよくあるHTMLで色を指定するときに使うカラーコードですね。
シャープFFFF.com、シャープ0000.com、そういったカラーコードで色を設定することもできます。
そして、ここが一番大事な、一番下の画面にプレビュー画面があって、
このカスタマイズツールの色を変えるとすぐ反映されて確認することができます。
さらに一番下に、一番画面でいうと下の方にプレビュー画面のすぐ近くにですね、
生成されたコードがあって、そこのコピーボタンを押して、そこをコピーして従来のGoogleタグマネージャーの中に
これを入れてあげると、この色の設計した通りにウェブチャットの色が反映されるといった仕様のもとを作られたツールです。
ユーザーのニーズに応えるカスタマイズ
私も触ったことあるんですけど、GTMで、Googleタグマネージャーで
簡単に誰でも変更するときに使えるような便利なツールかなと思います。
具体的に先ほどお父さんが言われた通りで、色のパターンがあったり、それだけでなくて、
エフェクトのことも変えてあったり、コードもコピーできる。
しかも、本番に採用する前に見える化ができるというのは非常に素晴らしいツールかなと思っています。
これどういった人向けに作られたとか、そういうのあるんですか?
これはですね、miiboを契約したり使う人って色んな用途があると思うんですよね。
だけどまずは、例えば自社や自分の社内で、とりあえず簡単にボットを作りたいけど、
自分の会社のコーポレートカラーとか、自分の好きな色を使ってみたいという人ですね。
そういった方向けですね。お気軽にまずはmiiboを使いたいんだけど、色を変えたいという人。
そこかなと思います。他にカスタマイズをしようと思ったら、いくらでもできるので。
本当にお手軽にこの色だけ、今ダークモードとライトモードしかない。
そこを変えたい人ですね。
あとはGoogleタグマネージャーの使い方というところは、そこは結構ハードルがあるんです。
はい。
これ元森さんはどのように使っているんですか?
私は今miiboの契約している中のエージェントの一つが、一個はテスト用、勉強用に使っているエージェントなんですね。
もう一個が表に出してカスタマイズする実験用です。
一個は本当に基礎的な勉強用、もう一個は表に出して人に見せる。
表に出したテスト用に使っていて、そっちの方で今真っ赤な画面で使っています。
真っ赤な画面にして?
真っ赤な赤にしています。色を変えてもいいんですけど、何回か何回も変えていくので、
今は赤ということですね。色はしょっちゅう変えたりするんです。
確かに簡単に色を試せるというのはいいですよね。
これから今後、そういったカラーカスタマイズツールってどうしたいとかありますか?
とりあえずカラーカスタマイズはできたので、今度は何個かあって、
カラーカスタマイズツールのパート2というのがあって、それはGoogleタグマネージャーを使って全体ののではなくて、
例えばホームページとかにちっちゃくmiiboを設置することができるじゃないですか。
AI機器みたいなボタンを押すとポップアップして出るじゃないですか。
miiboが出すことができるので、それの色のカスタマイズツール。
そうなんですね。
あとはボタンあるじゃないですか。ホームページの右下にあるボタンもデフォルトであるんですけど、自由に作ることができるので。
あそこの埋め込みの部分までカバーしたツールかな。
ホームページ設置をカラーカスタマイズツール。
それが一個アイデアになります。
確かにウェブのチャットUIだけじゃなくて、ホームページに設置するための具体的な実践のカスタマイズツールってあると非常に便利かなと思います。
ありがとうございます。今回はトモアさんにmiiboカラーカスタマイズツールについてお聞きしました。
ぜひまた皆さん使ってみてください。
今回ありがとうございました。
ありがとうございました。
