作成する命令ブロックの機能は以下の通りです。

入力された質問に対してAIの返事を文字列で返します。
入力された質問に対してAIが音声で返事をします。

プログラムを書きましょう

以下のソースコードをテキストエディタに貼り付けて、ハイライト行部分を前回記事で取得したAPIキーに変更します。 ファイル名を、talkapi.jsとして適当なフォルダへ保存して下さい。 このファイルが今回のほぼ全てです。命令ブロックの定義とその実装が含まれます。 ※ソースコードのエリアをダブルクリックすると全て選択状態になります。

(function(ext) {
  ext._shutdown = function() {};
  
  //他のデバイスと接続する時に使用する。今回はこれでよい。
  ext._getStatus = function() {
    return {status: 2, msg: 'Ready'};
  };
  
  /*---------------------------------
  +  get_ai_talk_msg メソッド
  +  引数msgに質問内容が渡される。
  +  返事が返ってきたら呼び出し元へコールバックされる。
  -----------------------------------*/
  ext.get_ai_talk_msg = function(msg, callback) {
    
    //TalkAPIに渡すパラメータ値(APIキーと質問)
    let formdata = new FormData();
    
    //発行済みapikey
    formdata.append('apikey','※取得したAPIキーに変更※');
    //質問
    formdata.append('query',msg);
    //TalkAPIにリクエスト送信
    fetch('https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk',{
          method: 'post',
          body: formdata,
      }).then(function(response) {
        //エラーチェック
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
      }).then(function(data) {
          //質問に対する答えをコールバック
          callback(data.results[0].reply);
      }).catch(function(err) {
        //エラー発生時(固定で)
        callback('ごめんなさい。答えられなかった。（' + err.statusText + '）');
      });
  };
  
  /*--------------------------------- 
  +  talk_ai_talk_msg メソッド
  +  引数msgに質問内容が渡される。
  +  返事が返ってきたら返事を音声化して出力
  -----------------------------------*/
  ext.talk_ai_talk_msg = function(msg) {
    
    //TalkAPIに渡すパラメータ値(APIキーと質問)
    let formdata = new FormData();
    
    //発行済みapikey
    formdata.append('apikey','※取得したAPIキーに変更※');
    //質問
    formdata.append('query',msg);
    //TalkAPIにリクエスト送信
    fetch('https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk',{
          method: 'post',
          body: formdata,
      }).then(function(response) {
        //エラーチェック
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
      }).then(function(data) {
        //質問に対する答えを話す
        //Web Speech API を使用する
        var synthes = new SpeechSynthesisUtterance(data.results[0].reply);
        //日本語に設定
        synthes.lang = "ja-JP"
        //読み上げ開始
        speechSynthesis.speak( synthes );
      }).catch(function(err) {
        //エラー発生時
        var synthes = new SpeechSynthesisUtterance('ごめんなさい。答えられなかった。');
        synthes.lang = "ja-JP"
        speechSynthesis.speak( synthes );
      });
  };

  /*--------------------------------- 
  +  ScratchXに表示する命令ブロックを定義
  +  → %sはブロックで入力された文字列が入る
  +  → 「%s と聞いたへんじ」ブロックが実行されるとget_ai_talk_msgメソッドが呼ばれる
  +  → 「%s と聞いたへんじを話す」ブロックが実行されるとtalk_ai_talk_msgメソッドが呼ばれる
  -----------------------------------*/
  var descriptor = {
    blocks: [
      ['R', '%s と聞いたへんじ', 'get_ai_talk_msg'],
      [' ', '%s と聞いたへんじを話す', 'talk_ai_talk_msg'],

    ]
  };
  
  //ScratchXに登録する
  ScratchExtensions.register('リクルートAI(TalkAPI)', descriptor, ext);
})({});



ScratchXに読み込んでみましょう


では、いよいよScrathcXへ拡張ブロックを認識してもらいましょう。まず、以下をクリックしてScratchXを開きます。 https://scratchx.org/#scratch 起動したら、「Load Experimental Extension」を右クリックして下さい。  ファイルを開くダイアログが表示されいますので、先ほど保存した「talkapi.js」を指定して開きましょう。  以下のように作成したオリジナルブロックが表示されたらOKです！ 


動かしてみよう


いよいよ、動かしみましょう。 ScratchXでは、起動時にScratchのようにネコのスプライトは表示されていません。ライブラリからお好きなスプライトを追加して以下のようにブロックを組んでみましょう。  実行するには、おなじみの「緑の旗」をクリックするだけです！ 「聞いて待つ」ブロック実行時に画面で入力された質問に対してAIが音声で返事をしてくれるはずです！  色々な会話を試してみてください。</ br> おもしろ回答があったら、ぜひ教えてくださいね！</ br> お待ちしてます！


		
 1 2