HTML(mugbot_web)のコード解説

HTML(mugbot_web)の解説です。
このソースコードはHTMLとjQuery、jQuery-mobileで書かれており、拡張子は「html」になっています。
ユーザーが実行したい内容をserver(mugbot_server)に送る役割をしています。

 

htmlの基本設定とタイトルを定義しています。

 

 

このHTMLで利用するCSSとjQuery、jQuery-mobileを定義しています。
2014/10/30現在のCSSとjQuery、jQuery-mobileの最新版は上記のようになっていますが、バージョンアップされている場合はダウンロードしたものに合わせて、内容を変更しなくてはいけません。
(例 jquery-1.11.1.min.jsのバージョンがjquery-○.○.○.min.jsになった場合はmugbot_webのこの部分を<script src=”jquery-○.○.○.min.js” type=”text/javascript”></script>に変更しなくてはHTMLが正常に動かなくなってしまいます。)

 

 

WebStorageに保存されているデータを呼びだし、表示させています。
(例 「var str=localStorage.getItem( “s0”)」というのは、WebStorageに保存されている「s0」というデータを呼び出し、「str」に代入しています。そして、 「$(“#t0”).val(str)」というのは、「str」の内容を「t0」に表示しています。)

 

 

WebSocketと接続しています。「ws://192.168.42.1」というのは自分のRaspberry PiのIPアドレスになっているため、IPアドレスを変更したときには、この数字も変更します。

 

 

「keycode==13」というのは「Enter」のことなので、「Enter」キーが押されたら、「input」の内容を送るようになっています。

 

 

それぞれのボタンが押された時に、それぞれの言葉を送るようになっています。
(例 「v1」というボタンが押されたら「こんにちは」というデータを送ります。)

 

 

特定のボタンが押されたら、特定のデータを送るようになっています。
(例 「act1」というボタンが押されたら、「@h」というデータを送ります。)

 

 

それぞれの動きに合わせて、スライダの値を送っています。
(例 目の上下運動のスライダーの場合は、「@y」にスライダーの値を付けて送信します。)

 

 

Webstorageのテキストエリアに入力された内容を保存しています。
「buttonMarkup」はインライン要素としてボタンを表示することを定義しています。
(例 「b0」というボタンが押されたら、「t0」の内容を送信し、Webstorageに「s0」として保存します。)

 

 

<body></body>で囲われた内容が実際にWeb上で表示されます。
ここでは発話するためのテキストボックスとスライダーを設定しています。
スライダーの最大値と最小値はここで変更することができます。

 

 

アクションボタンはここで設定しています。
「value」を変更することで、ボタンに表示されている文字を変えることができます。
また、数を増やすことも可能です。

 

 

他のページに移動するためのボタンを設定しています。
(例 プリセット発話のボタンを押すと「page2」に移動することができます。)

 

 

「page2」のプリセット発話の内容を設定しています。
「value」を変更することで、ボタンに表示されている文字を変えることができます。
ただし、Mugbotが話す内容も変更したい場合には、プリセット音声の内容も一緒に変更しなくてはいけません。

 

 

「page3」のユーザー発話の内容を設定しています。
ここでユーザー発話の数を増やすことも、減らすこともできます。
ただし、プリセット発話と同様に、ユーザー発話ではWebStorage関連の項目(WebStorage、WebStorage保存)を全て変更することで数の変更をすることができます。

 

以上でHTML(mugbot_web)の解説を終了します。