お菓子辞典（改）～お菓子様降臨しました～ #HTML #WebSpeechAPI

#お菓子様を降臨させたい
LINE Botから続くお菓子プロジェクトの第三弾として、ついにお菓子様を画面上に呼びたいと思います
ただ単純にお菓子をピックアップするだけでなく、ピックアップしたお菓子を読み上げられたら、文字が読めない小さい子供も楽しめるはず！
また、前回より機能をWebアプリに変更しているため、PCもスマホも楽しめる仕様にしました。

＜前回記事＞

#お菓子辞典（改）のご紹介
https://twitter.com/momoiku3/status/1458003273005223938

#作り方
##環境
・CodePen
・Netlify
・背景
　 →使い方
・お菓子の虜API
・Web Speech API ←New
・qrcode　←New

##プログラム

###プログラム全体

See the Pen お菓子音声版作業用 by IshikawaIkumi (@ishikawaikumi) on CodePen.

###ボタンを押したら画面上の文字を読ませたい
スナックをサンプルとして掲載しています。
読ませたい値をsay関数にセットして呼び出しています。
＜JavaScript側＞

//スナック用  ボタンを押したときの処理
    //商品名を発話用関数に渡す。
    let sayData = sweetsData.item.name;
    sayData= "今回のお菓子は・・・" + sayData + "・・・です。これはおいしそうだね！";
    console.log(sayData);
    
    say(sayData);

//渡された値を元に喋らせる所

// ここでSpeech APIの準備をします。
let speech = null;

window.addEventListener('DOMContentLoaded', async function() {
  console.log('DOMの構築が完了しました');
  // 発話の準備
  speech = new window.SpeechSynthesisUtterance();
  speech.lang = 'ja-JP';
  // または、ブラウザが対応している言語のうちja-JPな最初のボイスを使う
  window.speechSynthesis.onvoiceschanged = () => {
    const voices = window.speechSynthesis.getVoices();
    speech.voice = voices.find(voice => voice.lang == 'ja-JP');
    console.log(speech.voice);
  };
})

//引数で受け取った内容を喋らせる
async function say(text) {  
  return new Promise((res) => {
    speech.text = text;
    speech.onend = () => res();
    speechSynthesis.speak(speech);
  });
}

###簡単にスマホでサイトを開きたい
ボタンでURLを画面上に表示するように設定しました。

＜HTML側＞
画面下部に表示されるよう、一番最後に記述しています。

<p>
  <button onclick="generateQR()">スマホでも楽しめる</button>
  <br>
    <canvas id="gen" width="30" height="30"></canvas>
</p>

＜JavaScript側＞

// ボタンクリックでQRコード生成
function generateQR() {
  // 生成先のcanvas要素
  const canvas = document.getElementById('gen');
  // もととなる文字列データをとってくる
 const data = "https://lucid-pike-7bf1cd.netlify.app/"
  // QRコード生成する
  QRCode.toCanvas(canvas, data, (error) => {
    if (error) console.error('生成時エラー発生:', error);
    console.log(`「${data}」をQRコード化しました`);
  });
}

###スマホのブラウザのサイズに合わせたい
タブのサイズをピクセル指定だと、スマホで表示すると横にスクロールしないと見えなくなってしまったので、パーセント指定として、画面サイズの何パーセント表示という形にしました。
＜CSS＞

$tabwidth:95%;

#いつかチャレンジしてみたい
ARの技術を使って、お菓子を手の上に載せたい
例えば、マカロンを手の上に載せて愛でたい