HTML(mugbot_web)のコード解説
HTML(mugbot_web)の解説です。
このソースコードはHTMLとjQuery、jQuery-mobileで書かれており、拡張子は「html」になっています。
ユーザーが実行したい内容をserver(mugbot_server)に送る役割をしています。
XHTML
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の基本設定とタイトルを定義しています。
XHTML
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が正常に動かなくなってしまいます。)
XHTML
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変数名
//varstr//strという名前の箱が作成される
varstr=localStorage.getItem("s0")
$("#t0").val(str)
varstr=localStorage.getItem("s1")
$("#t1").val(str)
varstr=localStorage.getItem("s2")
$("#t2").val(str)
varstr=localStorage.getItem("s3")
$("#t3").val(str)
varstr=localStorage.getItem("s4")
$("#t4").val(str)
varstr=localStorage.getItem("s5")
$("#t5").val(str)
varstr=localStorage.getItem("s6")
$("#t6").val(str)
varstr=localStorage.getItem("s7")
$("#t7").val(str)
varstr=localStorage.getItem("s8")
$("#t8").val(str)
varstr=localStorage.getItem("s9")
$("#t9").val(str)
WebStorageに保存されているデータを呼びだし、表示させています。
(例 「var str=localStorage.getItem( “s0”)」というのは、WebStorageに保存されている「s0」というデータを呼び出し、「str」に代入しています。そして、 「$(“#t0”).val(str)」というのは、「str」の内容を「t0」に表示しています。)
XHTML
1
2
3
4
5
6
////////////////////WebSocket接続///////////////////////////
ws=newWebSocket("ws://192.168.42.1:51234");
ws.onmessage=function(evt){
$("#msg").append("<p>"+evt.data+"</p>");
};
//192.168.42.1はRaspberryPiのIPアドレスを記入
WebSocketと接続しています。「ws://192.168.42.1」というのは自分のRaspberry PiのIPアドレスになっているため、IPアドレスを変更したときには、この数字も変更します。
XHTML
1
2
3
4
5
6
7
//////////////////////音声合成///////////////////////////////
$("#input").keypress(function(e){
if(e.keyCode==13){
varval=$("#input").val()
ws.send(val)
}
});
「keycode==13」というのは「Enter」のことなので、「Enter」キーが押されたら、「input」の内容を送るようになっています。
XHTML
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」というボタンが押されたら「こんにちは」というデータを送ります。)
XHTML
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」というデータを送ります。)
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
///////////////////////スライダー///////////////////////////
$('#slider0').change(function(){
varvalue0=$('#slider0').val();
ws.send("@y"+value0)
});
$('#slider1').change(function(){
varvalue1=$('#slider1').val();
ws.send("@x"+value1)
});
$('#slider2').change(function(){
varvalue2=$('#slider2').val();
ws.send("@z"+value2)
});
それぞれの動きに合わせて、スライダの値を送っています。
(例 目の上下運動のスライダーの場合は、「@y」にスライダーの値を付けて送信します。)
XHTML
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){
varval0=$("#t0").val()
ws.send(val0)
localStorage.setItem("s0",val0)
});
$("#b1").buttonMarkup({inline:"true"});
$("#b1").click(function(e){
varval1=$("#t1").val()
ws.send(val1)
localStorage.setItem("s1",val1)
});
$("#b2").buttonMarkup({inline:"true"});
$("#b2").click(function(e){
varval2=$("#t2").val()
ws.send(val2)
localStorage.setItem("s2",val2)
});
$("#b3").buttonMarkup({inline:"true"});
$("#b3").click(function(e){
varval3=$("#t3").val()
ws.send(val3)
localStorage.setItem("s3",val3)
});
$("#b4").buttonMarkup({inline:"true"});
$("#b4").click(function(e){
varval4=$("#t4").val()
ws.send(val4)
localStorage.setItem("s4",val4)
});
$("#b5").buttonMarkup({inline:"true"});
$("#b5").click(function(e){
varval5=$("#t5").val()
ws.send(val5)
localStorage.setItem("s5",val5)
});
$("#b6").buttonMarkup({inline:"true"});
$("#b6").click(function(e){
varval6=$("#t6").val()
ws.send(val6)
localStorage.setItem("s6",val6)
});
$("#b7").buttonMarkup({inline:"true"});
$("#b7").click(function(e){
varval7=$("#t7").val()
ws.send(val7)
localStorage.setItem("s7",val7)
});
$("#b8").buttonMarkup({inline:"true"});
$("#b8").click(function(e){
varval8=$("#t8").val()
ws.send(val8)
localStorage.setItem("s8",val8)
});
$("#b9").buttonMarkup({inline:"true"});
$("#b9").click(function(e){
varval9=$("#t9").val()
ws.send(val9)
localStorage.setItem("s9",val9)
});
});
</script>
</head><!-- head end -->
Webstorageのテキストエリアに入力された内容を保存しています。
「buttonMarkup」はインライン要素としてボタンを表示することを定義しています。
(例 「b0」というボタンが押されたら、「t0」の内容を送信し、Webstorageに「s0」として保存します。)
XHTML
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上で表示されます。
ここでは発話するためのテキストボックスとスライダーを設定しています。
スライダーの最大値と最小値はここで変更することができます。
XHTML
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」を変更することで、ボタンに表示されている文字を変えることができます。
また、数を増やすことも可能です。
XHTML
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」に移動することができます。)
XHTML
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が話す内容も変更したい場合には、プリセット音声の内容も一緒に変更しなくてはいけません。
XHTML
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)の解説を終了します。