喝! あっぱれ! は今年まで
日曜日の朝といえば「サンデーモーニング」
名物コメンテーターの張本勲さん。
自分の意見を言うのが苦手な私。
各ニュースに対して偏見全開で「喝!」「あっぱれ!」と
小気味よく叫ぶ姿が印象的で、好きでした。
なんと年内で卒業とのこと。
このまま「喝」「あっぱれ」がなくなるのは寂しいので、
私が張本氏の後を継いでみようと考えました。
喝! あっぱれ! ひとりサンモニやってみた
やりたいこと
①「喝」「あっぱれ」という声に反応してテロップを出す ②「喝」はインパクトを出すためにARで3Dテロップにする
できたものはこちら 【音声有りで見てください📣】
遊び方
①「喝 あっぱれサイト」を画面の右下当たりに準備
②「張本なりきりブラウザ」をスマホで立上げる
サイト・ブラウザはこちら
張本なりきりブラウザQRコード
③「喝あっぱれサイト」の開始ボタンを押し 「喝」 「あっぱれ」 と叫ぶ
④「喝」に反応してARの3Dモデルが立ち上がる (どうかゆくっり話してあげてください。。。)
作り方
①ARモデルを作成
喝のモデルなどあるわけないので(結構探しましたが)、自作することに。
Blenderというソフトで作ろうとしたが、そもそもPCにダウンロードできず。
他の方法を模索したところ、ペイント3Dでglbファイルを作れることが判明!
10分くらいでめちゃくちゃ簡単にできました!!
しかしマーカー上に出してみると問題が・・・
PC画面にマーカーを表示させると マーカーの真上にモデルが出るため
モデルが正面を向きません
そこでデフォルトでモデルを寝かせ、
ARが画面上で立ち上がった時には正面を向くようにしました。
②ARサイトの作成
CodePenで構築
3DモデルをNetlifyにデプロイし URLを取得
そのURLとglbファイルをHTMLの11行目に入れ込みます
gltf-model="httpsから始まるNetlifyで取得したURL/glbファイル名"
See the Pen 張本なりきりブラウザ by okinakamasayoshi (@okinakamasayoshi) on CodePen.
③音声認識サイトの作成
こちらもCodePen
JSのコードでif文を構築
52行目 「かつ」と認識したら 「hiroマーカーの画像」
64行目 「あっぱれ」なら 「張本氏のあっぱれ画像」
if (e.results[0][0].transcript === 'かつ') {
let newwin = open('https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png');
}
See the Pen 張本ゾーン by okinakamasayoshi (@okinakamasayoshi) on CodePen.
知り合いに使ってもらった結果
「・・・・」 「すごいけど 俺はいらん」
でも、でもですよ、子供とか喜びそうじゃないですか？
と食い下がった結果。
確かにこどもは喜ぶ LINEのビデオ通話も 内臓AR機能で遊んだりしている
自分が作った3Dモデルがその中で出てきたら 喜ぶかも
オリジナルの3Dが作れるのはすごいね。
と意見をもらいました。
もう1名はノリノリで「かつだっ！！ か～っつっ!!!」
と叫んでくれたので、音声認識がちゃんと働きませんでした。
「反応しないw」で盛り上がれてよかったです。手作り万歳。
この先やってみたいこと
初心者がたった数日で、ARを作ることができて感動しました。
それだけに、夢はまだまだ広がります!!
①「あっぱれ」もARで出現させてみたい
②声を検知して自動でスクリーンショット撮影したい
③「喝」「あっぱれ」と叫んだ回数を自動でカウントしてみたい
そして究極は・・・
ARで張本氏自身を出現させてみたい
こんなことできたらめちゃくちゃ楽しいですよね♪
ほんのすこ～しでも「あっぱれ」と思ったらLGTMお願いします(^▽^)