HTML(mugbot_web)の解説です。
このソースコードはHTMLとjQuery、jQuery-mobileで書かれており、拡張子は「html」になっています。
ユーザーが実行したい内容をserver(mugbot_server)に送る役割をしています。
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html> <head> <!-- Mugbot Poject Tokyo City University Koike Lab. Japan 2014.11--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Mugbot Interface</title> |
htmlの基本設定とタイトルを定義しています。
|
1 2 3 |
<link href="jquery.mobile-1.4.4.min.css" rel="stylesheet" > <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jquery.mobile-1.4.4.min.js" type="text/javascript"></script> |
この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が正常に動かなくなってしまいます。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script> $(function(){ //実行したいものを記入 //記述の仕方 //$("セレクタ") . メソッド(パラメータ); ////////////////////WebStorage/////////////////////////// //var 変数名 //var str //strという名前の箱が作成される var str=localStorage.getItem( "s0") $("#t0").val(str) var str=localStorage.getItem( "s1") $("#t1").val(str) var str=localStorage.getItem( "s2") $("#t2").val(str) var str=localStorage.getItem( "s3") $("#t3").val(str) var str=localStorage.getItem( "s4") $("#t4").val(str) var str=localStorage.getItem( "s5") $("#t5").val(str) var str=localStorage.getItem( "s6") $("#t6").val(str) var str=localStorage.getItem( "s7") $("#t7").val(str) var str=localStorage.getItem( "s8") $("#t8").val(str) var str=localStorage.getItem( "s9") $("#t9").val(str) |
WebStorageに保存されているデータを呼びだし、表示させています。
（例 「var str=localStorage.getItem( “s0”)」というのは、WebStorageに保存されている「s0」というデータを呼び出し、「str」に代入しています。そして、 「$(“#t0”).val(str)」というのは、「str」の内容を「t0」に表示しています。）
|
1 2 3 4 5 6 |
////////////////////WebSocket接続/////////////////////////// ws = new WebSocket("ws://192.168.42.1:51234"); ws.onmessage = function(evt) { $("#msg").append("<p>"+evt.data+"</p>"); }; // 192.168.42.1はRaspberry PiのIPアドレスを記入 |
WebSocketと接続しています。「ws://192.168.42.1」というのは自分のRaspberry PiのIPアドレスになっているため、IPアドレスを変更したときには、この数字も変更します。
|
1 2 3 4 5 6 7 |
//////////////////////音声合成/////////////////////////////// $("#input").keypress(function(e){ if(e.keyCode ==13){ var val = $("#input").val() ws.send(val) } }); |
「keycode==13」というのは「Enter」のことなので、「Enter」キーが押されたら、「input」の内容を送るようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
//////////////////////プリセット音声////////////////////////// //$("要素").click(function(e){ // 任意の処理 //} //要素がクリックされたとき任意の処理がおきる $("#v1").click(function(e){ ws.send("こんにちは") }); //ボタンがクリックされたとき”こんにちは”と言う //”こんにちは”を変更すると変更した言葉をしゃべる $("#v2").click(function(e){ ws.send("はじめまして") }); $("#v3").click(function(e){ ws.send("ようこそ") }); $("#v4").click(function(e){ ws.send("私はマグボットです") }); $("#v5").click(function(e){ ws.send("どこから来たのですか？") }); $("#v6").click(function(e){ ws.send("ロボットについて知っていますか？") }); $("#v7").click(function(e){ ws.send("私の体は100円ショップの材料でできています") }); $("#v8").click(function(e){ ws.send("ありがとうございます") }); $("#v9").click(function(e){ ws.send("お腹がすきました") }); $("#v10").click(function(e){ ws.send("とてもきれいですね") }); $("#v11").click(function(e){ ws.send("私を操作してみてください") }); $("#v12").click(function(e){ ws.send("楽しいです") }); $("#v13").click(function(e){ ws.send("お元気ですか？") }); $("#v14").click(function(e){ ws.send("今日は暑いですね") }); $("#v15").click(function(e){ ws.send("眠くなってしまいました") }); $("#v16").click(function(e){ ws.send("世界中で私は働いています") }); $("#v17").click(function(e){ ws.send("はい") }); $("#v18").click(function(e){ ws.send("いいえ") }); $("#v19").click(function(e){ ws.send("そのとおりです") }); $("#v20").click(function(e){ ws.send("さようなら") }); |
それぞれのボタンが押された時に、それぞれの言葉を送るようになっています。
（例 「v1」というボタンが押されたら「こんにちは」というデータを送ります。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/////////////////////プリセットアクション//////////////////////// $("#act1").click(function(e){ ws.send("@h") }); $("#act2").click(function(e){ ws.send("@f") }); $("#act3").click(function(e){ ws.send("") }); $("#act4").click(function(e){ ws.send("@l") }); $("#act5").click(function(e){ ws.send("@s") }); $("#act6").click(function(e){ ws.send("@b") }); $("#act7").click(function(e){ ws.send("@e") }); $("#act8").click(function(e){ ws.send("@w") }); |
特定のボタンが押されたら、特定のデータを送るようになっています。
（例 「act1」というボタンが押されたら、「@h」というデータを送ります。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
///////////////////////スライダー/////////////////////////// $('#slider0').change(function() { var value0 = $('#slider0').val(); ws.send("@y"+value0) }); $('#slider1').change(function() { var value1 = $('#slider1').val(); ws.send("@x"+value1) }); $('#slider2').change(function() { var value2 = $('#slider2').val(); ws.send("@z"+value2) }); |
それぞれの動きに合わせて、スライダの値を送っています。
（例 目の上下運動のスライダーの場合は、「@y」にスライダーの値を付けて送信します。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/////////////////////WebStorage保存///////////////////////// $("#b0").buttonMarkup({inline:"true"}); $("#b0").click(function(e){ var val0 = $("#t0").val() ws.send(val0) localStorage.setItem( "s0",val0) }); $("#b1").buttonMarkup({inline:"true"}); $("#b1").click(function(e){ var val1 = $("#t1").val() ws.send(val1) localStorage.setItem( "s1",val1) }); $("#b2").buttonMarkup({inline:"true"}); $("#b2").click(function(e){ var val2 = $("#t2").val() ws.send(val2) localStorage.setItem( "s2",val2) }); $("#b3").buttonMarkup({inline:"true"}); $("#b3").click(function(e){ var val3 = $("#t3").val() ws.send(val3) localStorage.setItem( "s3",val3) }); $("#b4").buttonMarkup({inline:"true"}); $("#b4").click(function(e){ var val4 = $("#t4").val() ws.send(val4) localStorage.setItem( "s4",val4) }); $("#b5").buttonMarkup({inline:"true"}); $("#b5").click(function(e){ var val5 = $("#t5").val() ws.send(val5) localStorage.setItem( "s5",val5) }); $("#b6").buttonMarkup({inline:"true"}); $("#b6").click(function(e){ var val6 = $("#t6").val() ws.send(val6) localStorage.setItem( "s6",val6) }); $("#b7").buttonMarkup({inline:"true"}); $("#b7").click(function(e){ var val7 = $("#t7").val() ws.send(val7) localStorage.setItem( "s7",val7) }); $("#b8").buttonMarkup({inline:"true"}); $("#b8").click(function(e){ var val8 = $("#t8").val() ws.send(val8) localStorage.setItem( "s8",val8) }); $("#b9").buttonMarkup({inline:"true"}); $("#b9").click(function(e){ var val9 = $("#t9").val() ws.send(val9) localStorage.setItem( "s9",val9) }); }); </script> </head><!-- head end --> |
Webstorageのテキストエリアに入力された内容を保存しています。
「buttonMarkup」はインライン要素としてボタンを表示することを定義しています。
（例 「b0」というボタンが押されたら、「t0」の内容を送信し、Webstorageに「s0」として保存します。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<body> <div data-role="page" id="page"> <div data-role="header" data-theme="e"> <h1>Mugbot System 1.0.1</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <label for="textinput">話す :</label> <input type="text" name="textinput" id="input" /> </div> <!-- スライダーによる目、首、目の明るさ制御 --> <div data-role="fieldcontain"> <label for="slider0">上下 :</label> <input type="range" name="slider0" id="slider0" value="90" min="75" max="105" /> </div> <div data-role="fieldcontain"> <label for="slider1">左右 :</label> <input type="range" name="slider1" id="slider1" value="90" min="0" max="180" /> </div> <div data-role="fieldcontain"> <label for="slider2">目 :</label> <input type="range" name="slider2" id="slider2" value="50" min="0" max="255" /> </div> |
<body></body>で囲われた内容が実際にWeb上で表示されます。
ここでは発話するためのテキストボックスとスライダーを設定しています。
スライダーの最大値と最小値はここで変更することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
アクション : <!-- アクションのボタンエリア --> <div class="ui-grid-a"> <div class="ui-block-a"> <input type="button" id= "act1" value="はい" /> </div> <div class="ui-block-b"> <input type="button" id= "act2" value="いいえ" /> </div> <div class="ui-block-a"> <input type="button" id= "act3" value="正面" /> </div> <div class="ui-block-b"> <input type="button" id= "act4" value="笑う" /> </div> <div class="ui-block-a"> <input type="button" id= "act5" value="悲しい" /> </div> <div class="ui-block-b"> <input type="button" id= "act6" value="びっくり" /> </div> <div class="ui-block-a"> <input type="button" id= "act7" value="ハイテンション" /> </div> <div class="ui-block-b"> <input type="button" id= "act8" value="ウィンク" /> </div> </div> <hr> |
アクションボタンはここで設定しています。
「value」を変更することで、ボタンに表示されている文字を変えることができます。
また、数を増やすことも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<br> <ul data-role="listview"> <li> <a href="#page2">プリセット発話</a> </li> <li> <a href="#page3">ユーザー発話</a> </li> </ul> </div> <div data-role="footer" data-theme="e"> <h4></h4> </div> </div><!-- page end --> |
他のページに移動するためのボタンを設定しています。
（例 プリセット発話のボタンを押すと「page2」に移動することができます。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div data-role="page" id="page2" data-add-back-btn="true"> <div data-role="header" data-theme="e"> <h1>プリセット発話</h1> </div> <div data-role="content"> <!-- プリセット発話エリア --> <!-- 以下のボタン名と発話内容は一致させる必要がある --> <input type="button" id="v1" value="こんにちは" /> <input type="button" id="v2" value="はじめまして" /> <input type="button" id="v3" value="ようこそ" /> <input type="button" id="v4" value="私はマグボットです" /> <input type="button" id="v5" value="どこから来たのですか？"/> <input type="button" id="v6" value="ロボットについて知っていますか？" /> <input type="button" id="v7" value="私の体は100円ショップの材料でできています" /> <input type="button" id="v8" value="ありがとうございます" /> <input type="button" id="v9" value="お腹がすきました" /> <input type="button" id="v10" value="とてもきれいです" /> <input type="button" id="v11" value="私を操作してみてください" /> <input type="button" id="v12" value="楽しいです" /> <input type="button" id="v13" value="お元気ですか？" /> <input type="button" id="v14" value="今日は暑いですね" /> <input type="button" id="v15" value="眠いです" /> <input type="button" id="v16" value="世界中で私は働いています" /> <input type="button" id="v17" value="はい" /> <input type="button" id="v18" value="いいえ" /> <input type="button" id="v19" value="そのとおりです" /> <input type="button" id="v20" value="さようなら" /> </div> <div data-role="footer" data-theme="e"> <h4></h4> </div> </div><!-- page2 end --> |
「page2」のプリセット発話の内容を設定しています。
「value」を変更することで、ボタンに表示されている文字を変えることができます。
ただし、Mugbotが話す内容も変更したい場合には、プリセット音声の内容も一緒に変更しなくてはいけません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div data-role="page" id="page3" data-add-back-btn="true"> <div data-role="header" data-theme="e"> <h1>ユーザー発話</h1> </div> <div data-role="fieldcontain"> <!-- ユーザー発話データの入力エリア --> <input type="text" id= "t0" value="" /> <input type="button" id= "b0" value="話す" /> <input type="text" id= "t1" value="" /> <input type="button" id= "b1" value="話す" /> <input type="text" id= "t2" value="" /> <input type="button" id= "b2" value="話す" /> <input type="text" id= "t3" value="" /> <input type="button" id= "b3" value="話す" /> <input type="text" id= "t4" value="" /> <input type="button" id= "b4" value="話す" /> <input type="text" id= "t5" value="" /> <input type="button" id= "b5" value="話す" /> <input type="text" id= "t6" value="" /> <input type="button" id= "b6" value="話す" /> <input type="text" id= "t7" value="" /> <input type="button" id= "b7" value="話す" /> <input type="text" id= "t8" value="" /> <input type="button" id= "b8" value="話す" /> <input type="text" id= "t9" value="" /> <input type="button" id= "b9" value="話す" /> </div> <div data-role="footer" data-theme="e"> <h4></h4> </div> </div><!-- page3 end --> </body><!-- body end --> </html> |
「page3」のユーザー発話の内容を設定しています。
ここでユーザー発話の数を増やすことも、減らすこともできます。
ただし、プリセット発話と同様に、ユーザー発話ではWebStorage関連の項目(WebStorage、WebStorage保存)を全て変更することで数の変更をすることができます。
以上でHTML(mugbot_web)の解説を終了します。