スプシのセルに入ってるテキスト(中国語)を発話させたい

##目的
スプシのセルに入ってるテキスト(中国語)を発話させたい
##現状
以下のGASを書いてる横で対象のスプシのシートを開いて、実行ボタンを押すとReferenceError: SpeechSynthesisUtterance is not definedと言われてしまうのですがどうしたらいいでしょうか。
また、SpeechSynthesisUtteranceはWeb Speech APIの仕様に書いてあったモジュール（？）なのですがこのように外部のAPIはGAS内で使えるのでしょうか？ちなみにセルに入ってるテキストが取得できることまでは確認できました。

調べて・下記の回答者のご助言でわかったこと

speech.htmlのようなHTMLファイルを別に作って、gasファイルで取得したセルの値を渡す。HTMLファイルはもう一つindex.htmlみたいなのが必要っぽい。

以下main.gsファイル

function speak (response_text) {
      // 現在アクティブなスプレッドシートを取得
      var ss = SpreadsheetApp.getActiveSpreadsheet();
      // そのスプレッドシートにあるn-1番目のシートを取得
      // var sheet = ss.getSheets()[2];
      // 現在開いているシートを取得
      var sheet = ss.getActiveSheet();
      // そのシートにあるアクティブなセルを取得
      var text = sheet.getRange("B2").getValue();
      Logger.log(text);
      var text = new SpeechSynthesisUtterance();
      // 発言を作成
      text.text = response_text;
      // 言語 中国語
      text.lang = "zh-CH"
      // 速度 0.1-10
      text.rate = 1
      // 高さ 0-2
      text.pitch = 1
      // 音量 0-1
      text.volume = 1
      speechSynthesis.speak(text);
}

sawa

2021/08/16 02:10

Googleのサーバー側の不具合だったりしませんかね。少し時間を空けて試してみるとどうでしょうか？ >以下のGASを書いてる一応確認ですが、対象のスプレッドシートからエディタを開いて、そこにコードを書いて実行してますよね？

cunwe

2021/08/16 03:54

はい、スプシの「ツール＞スクリプトエディタ」から開いたページで書きました。もしかして上記のファイル以外にHTMLファイルが必要だったりしますでしょうか？

cunwe

2021/08/16 04:01

すいません、ただいまセルの値が取れました。何回か試しても「不明なエラーが発生しました。」と出たのですが、不明なエラーと表示されたらGoogleのサーバーが不調を疑った方が良さそうですね。お騒がせしました、ありがとうございました。

cunwe

2021/08/16 04:34

sawa様もしお分かりでしたら・お時間ありましたら上記に追記しました質問にお答えいただけると大変助かります。

sawa

2021/08/16 06:30

質問を丸ごと差し替えるのはNGです。最初の件が解決したのであれば、自己解決でクローズして、新たな質問は別質問として立ち上げるべきです。いずれにせよ、申し訳ないですが私は詳しくないので、別の回答者を待った方がいいです。 ↓詳しくないなりに私見をなんとなくですが、GASそのままで音声読み上げは出来ないと思うので、HTML側のjavascriptにセルの値を渡して読み上げるみたいな形にする方法がよいんじゃないでしょうか？ https://www.pre-practice.net/2016/06/blog-post_20.html このサイトのをサイドバーでボタン押したらアクティブセル（B2セル？）を取得して読み上げって流れにアレンジする感じが良いと思います。あと少し調べてみましたが、中国語は zh-CNでは？

cunwe

2021/08/16 08:13

＞質問を丸ごと差し替えるのはNGです。最初の件が解決したのであれば、自己解決でクローズして、新たな質問は別質問として立ち上げるべきです。失礼しました、気をつけます。また、関連のリンクを添付してくださりありがとうございます。＞あと少し調べてみましたが、中国語は zh-CNでは？ブラウザで下記のような処理を実行した結果ですか？ function loadVoices() { console.log(window.speechSynthesis.getVoices().map(x => [x.name, x.lang].join("\t")).join("\r\n")); }; loadVoices(); window.speechSynthesis.onvoiceschanged = function(e) { loadVoices(); }

sawa

2021/08/16 08:35 編集

いや、参考に掲載したサイトのコードで中国語を試してみたら、zh-CHだと発音が変だったんでgoogleで　中国語 zh-CH　で検索したら、もしかして:中国語 zh-CN　と、Google先生に指摘を受けました。で、こっち試したら中国語の発音だったんでそうかなと。

3_April_2021

2021/08/16 10:43

"x" is not definedタイプのエラーの場合は、gas側ではおそらく機能として使えるものではないと思われます（gasに表示されるエラーと正確に一致するかどうかはわかりませんが、参考にはなると思います→https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined）軽く調べてウェブアプリ環境で試してみましたが、そこではAPI自体は機能しました。まず、JavaScript環境で機能するコードが記述できているかどうか確認してみては。

cunwe

2021/08/16 11:15

sawa様そういうことでしたか。その辺りまでたどり着いたらまた試したいと思います、ありがとうございます。 3_April_2021様はい、私もエディタで書いてブラウザにペっと貼ってAPI自体が機能することは確認できました。あとはGASに認識させる方法がわかれば良いのですが...

3_April_2021

2021/08/16 11:43

他の方法もあるかもしれませんが、とりあえずofficeの杜さん[https://officeforest.org/wp/2018/05/12/google-apps-scriptでダイアログボックスやサイドバーを作る/]のような方法でhtmlを使える状態にしてください。次に、セル値の代わりに適切な文字列を入力して（言い換えれば、html表示以外の処理でgsを使用せずに）、目的の処理を行えるかどうかを確認してください。

3_April_2021

2021/08/16 12:07

上の処理が可能であれば、残りはgoogle.script.runで解決できる問題だと思います。私も詳しいわけではないのでこの方法の適切性については言えない点と、投稿されたコードから理解度が図りかねたので具体的指摘ができなかった点は申し訳ありません。

sawa

2021/08/16 12:35

私が書ける範囲で回答しときました。同じような質問を別に立ち上げられてますが、そちらもクローズしておいてください。

行動規範の内容に同意します

回答1件

ベストアンサー

乗りかかった船というか途中まで検証しちゃったんで、一応動くコードが作れたんで回答しときますね。

選択している（アクティブな）セルの中国語を読み上げるコードです。セルを指定する場合は、その部分を書き換えてください。

サイドバー使う方法とダイアログで実行させる方法の2パターン書いたのでお好きな方で。

サイドバーから実行する

gs
1
2//サイドバー起動 これをエディタから実行してください
3function showSidebar() {
4  var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
5  SpreadsheetApp.getUi().showSidebar(htmlOutput);
6}
7
8//選択したセルを返す
9function targetWord(){
10  var value = SpreadsheetApp.getActiveRange().getValue();
11  return value;
12}

html
1
2<!DOCTYPE html>
3<html>
4<body>
5<input type="button" value="読み上げ" onclick="clickBtn1()" />
6</body>
7<script>
8  function clickBtn1() {
9    google.script.run
10      .withSuccessHandler( Speak )
11      .targetWord(); 
12  }
13
14  function Speak(value){
15    var msg = new SpeechSynthesisUtterance(value);
16    msg.lang = "zh-CN";
17    window.speechSynthesis.speak(msg);
18  }
19
20</script>
21</html>
22

メニューを追加してダイアログで実行

ポップアップ許可が必要かも

GAS
1
2//メニュー追加
3function onOpen() {
4  var ui = SpreadsheetApp.getUi();
5  var menu = ui.createMenu('読み上げ');
6  menu.addItem('読み上げる', 'speakWord');
7  menu.addToUi();
8}
9
10//ダイアログ起動～読み上げ～ダイアログ閉じる
11function speakWord() {
12  var value = SpreadsheetApp.getActiveRange().getValue();
13
14  var script = "<script>  var msg = new SpeechSynthesisUtterance('"+value + "');"
15  +" msg.lang = 'zh-CN';"
16  +" window.speechSynthesis.speak(msg);"
17  +" google.script.host.close();</script>";
18
19  var html = HtmlService.createHtmlOutput(script);
20  SpreadsheetApp.getUi().showModalDialog(html,value);
21  
22}
23

投稿2021/08/16 12:34

編集2021/08/16 12:44

sawa

総合スコア3002

cunwe

2021/08/16 13:40

ありがとうございます。しっかり動作を確認できました。サイドバーから実行する場合の処理の順番としては、showSidebar→targetWord→clickBtn→Speakでしょうか？つまり、gasファイル→htmlファイルの順に読み込まれるものなのでしょうか？また、targetWord以外は用意されているメソッドという理解でよろしいでしょうか？

cunwe

2021/08/16 15:05

立て続けの質問失礼致します。こちらの記事によるとgoogle.script.runの後にドットで繋ぐ関数は、サーバー側のgsファイルに記述された関数名らしいのですが今回はクライアント側のhtmlファイルに記述されたSpeak関数でそれで正しい挙動を示しているということはこちらの記事が間違えているのでしょうか？ https://tonari-it.com/gas-web-app-google-script-run/

sawa

2021/08/17 00:06 編集

サイドバーを表示させた上で、ボタン押した時に選択してるセルの値を取得して、Speak関数に渡して読み上げ処理をしてるんで流れとしては showSidebar→clickBtn→targetWord→Speak　ですね。隣のITさんの記事は正しいです。上に書いた通りhtmlボタン押したら GAS側の targetWordを実行させて、その返り値を Speakに渡したいので、「サーバー側の関数の呼び出しが成功したらクライアント側関数を呼び出す」の箇所の書き方に沿った形になってるはずです。 https://tonari-it.com/gas-web-app-google-script-run/#toc5

3_April_2021

2021/08/17 00:19

ClickBtn1は、button要素のonclickを条件に実行されています。これはjavascript範囲の知識です。 targetWord[server-side]のreturn成功(value取得)→Speak[callback] google.script.run.withSuccessHandler([callback]).[server-side] https://developers.google.com/apps-script/guides/html/reference/run#withsuccesshandlerfunction

3_April_2021

2021/08/17 00:20

sawaユーザさん、コメントが被りました。申し訳ありません。

cunwe

2021/08/17 13:20

お二方ともありがとうございました。自身の語学学習の効率化やIT知識の拡充をすることができました。また、エンジニアって本当に頭いいんだなと感動いたしました、ありがとうございました。

sawa

2021/08/18 00:08

私はエンジニアじゃないですけど、解決してなによりです。質問を解決済みとしてクローズしておいてください。

行動規範の内容に同意します