(4)ブラウザー上におしゃべりさせるためのインタフェースを追加する

 ブラウザー上に、おしゃべりさせる言葉を入力するインタフェースと拡張スクリプトを起動するボタンを追加しましょう。ボタンを押すと、入力した言葉を受け取って「jtalk」を起動する拡張スクリプトに届けるようにします。

 修正するのは、RasRoboコントローラーのHTMLファイルである「rasrobo.html」です。次のコマンドを実行してnanoでファイルを開き、図21の赤字の部分を追加してください。言葉を入力するインタフェースをHTMLで記述してあり、JavaScriptの中では、入力した言葉を送信するボタンを表示させるとともに、それを押したときの振る舞いを記述してあります。

$ sudo nano /usr/share/webiopi/htdocs/rasrobo.html 
図21●RasRoboコントローラーにおしゃべりを指示する機能を追加
<button id="left_back" type="button" onClick="left_back() ">左後</button>
<button id="back" type="button" onClick="back()">後進</button>
<button id="right_back" type="button" onClick="right_back() ">右後</button>

<div id="speak">
    おしゃべり<input type="text" id="word"/>
</div>
<p>RasRoboの目</p>
<img src="http://rasrobo.local:8080/?action=stream" />

<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
    var webiopi = webiopi();
    webiopi.ready(function() {
       webiopi.refreshGPIO(true);
       webiopi.setFunction(8, "OUT");
       webiopi.setFunction(7, "OUT");
       webiopi.setFunction(23, "OUT");
       webiopi.setFunction(24, "OUT");
       webiopi.callMacro("jtalk",'どーもどーもラズロボです');
    var sendButton = webiopi.createButton("sendButton", "話す", function() {
       var word = $("#word").val();
       webiopi.callMacro("jtalk", word);
       });
       $("#speak").append(sendButton);
    });