喝!　あっぱれ!　サンモニ張本氏ARを作る

## 喝! あっぱれ! は今年まで

 日曜日の朝といえば「サンデーモーニング」
 名物コメンテーターの張本勲さん。

 自分の意見を言うのが苦手な私。
 各ニュースに対して偏見全開で「喝!」「あっぱれ!」と
 小気味よく叫ぶ姿が印象的で、好きでした。

 なんと年内で卒業とのこと。

 <font color="Red">**このまま「喝」「あっぱれ」がなくなるのは寂しいので、
 私が張本氏の後を継いでみようと考えました。**</font>

 https://twitter.com/fivetours2006/status/1464761228887093249?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1464761228887093249%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fzenn.dev%2F


## 喝!　あっぱれ!　ひとりサンモニやってみた

 やりたいこと

:::note warn
 　①「喝」「あっぱれ」という声に反応してテロップを出す
 　②「喝」はインパクトを出すためにARで3Dテロップにする
:::

 できたものはこちら <font color="Red">**【音声有りで見てください📣】**</font>
<iframe width="1407" height="508" src="https://www.youtube.com/embed/1smpfxyD-eY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 


 遊び方

 ①「喝 あっぱれサイト」を画面の右下当たりに準備
 ②「張本なりきりブラウザ」をスマホで立上げる

![手順①.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/19434ea6-58e7-8b09-193d-da3d04c97e62.png)


 サイト・ブラウザはこちら

https://xenodochial-shockley-a084cb.netlify.app

https://wonderful-poincare-70e7dc.netlify.app

 張本なりきりブラウザQRコード
![サンデーモーニング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/02cc1f5b-f5a2-8ad4-9979-906a958f296a.png)


 ③「喝あっぱれサイト」の開始ボタンを押し　「喝」　「あっぱれ」　と叫ぶ
 ④「喝」に反応してARの3Dモデルが立ち上がる　(どうかゆくっり話してあげてください。。。)

![手順②.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/40d8ed6b-c604-368c-9765-6a538e749ac5.png)


## 作り方

 **①ARモデルを作成**

 喝のモデルなどあるわけないので(結構探しましたが)、自作することに。
 [Blender](https://udemy.benesse.co.jp/design/3d/blender.html)というソフトで作ろうとしたが、そもそもPCにダウンロードできず。

 他の方法を模索したところ、ペイント3Dでglbファイルを作れることが判明!

 https://www.microsoft.com/ja-jp/p/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88-3d/9nblggh5fv99?activetab=pivot:overviewtab

 10分くらいでめちゃくちゃ簡単にできました!!

 しかしマーカー上に出してみると問題が・・・

 **PC画面にマーカーを表示させると マーカーの真上にモデルが出るため
 モデルが正面を向きません**

 ![よこに.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/6213c12d-244f-8f15-0d81-df79616488ba.png)


  <font color="Red">**そこでデフォルトでモデルを寝かせ、
 ARが画面上で立ち上がった時には正面を向くようにしました。**</font>

![モデル.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/bce545e6-3aa1-6402-6d91-c622aee823d1.png)


 **②ARサイトの作成**

 CodePenで構築
 
 3DモデルをNetlifyにデプロイし　URLを取得
 そのURLとglbファイルをHTMLの11行目に入れ込みます

 ```js
gltf-model="httpsから始まるNetlifyで取得したURL/glbファイル名"
 ```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abLzezJ" data-user="okinakamasayoshi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okinakamasayoshi/pen/abLzezJ">
  張本なりきりブラウザ</a> by okinakamasayoshi (<a href="https://codepen.io/okinakamasayoshi">@okinakamasayoshi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


 **③音声認識サイトの作成**


 こちらもCodePen

 JSのコードでif文を構築
 
　52行目　「かつ」と認識したら　「hiroマーカーの画像」
　64行目　「あっぱれ」なら　　　「張本氏のあっぱれ画像」

 ```js
if (e.results[0][0].transcript === 'かつ') {
let newwin = open('https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png');
}
 ```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYEOWmd" data-user="okinakamasayoshi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okinakamasayoshi/pen/zYEOWmd">
  張本ゾーン</a> by okinakamasayoshi (<a href="https://codepen.io/okinakamasayoshi">@okinakamasayoshi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 知り合いに使ってもらった結果

 「・・・・」　「すごいけど　俺はいらん」

 でも、でもですよ、子供とか喜びそうじゃないですか？

 と食い下がった結果。

 **確かにこどもは喜ぶ**　LINEのビデオ通話も 内臓AR機能で遊んだりしている
 自分が作った3Dモデルがその中で出てきたら　喜ぶかも
 **オリジナルの3Dが作れるのはすごい**ね。

 と意見をもらいました。

 もう1名はノリノリで「かつだっ！！　か～っつっ!!!」
 と叫んでくれたので、音声認識がちゃんと働きませんでした。

 **「反応しないw」で盛り上がれてよかったです。手作り万歳。**

![いろいろ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b0cd406a-b423-3fba-bd9b-8ee9d580ca47.png)


## この先やってみたいこと

 初心者がたった数日で、ARを作ることができて感動しました。
 それだけに、夢はまだまだ広がります!!

 **①「あっぱれ」もARで出現させてみたい
 ②声を検知して自動でスクリーンショット撮影したい
 ③「喝」「あっぱれ」と叫んだ回数を自動でカウントしてみたい**


 そして究極は・・・

  <font color="Red">**ARで張本氏自身を出現させてみたい**</font>

 https://qiita.com/fushikky/items/127f7ab6c12d9b9140c9

 こんなことできたらめちゃくちゃ楽しいですよね♪

  <font color="Red">**ほんのすこ～しでも「あっぱれ」と思ったらLGTMお願いします(*^▽^*)**</font>