[NAOqi2.5.5] Pepperのタブレット上のボタンをタッチすると、Pepperがポージングするアプリを作ってみた

Pepperからタブレットに何か表示する記事はよく見るが、タブレットからPepperに何かさせる記事があまりなかったので、簡単なメモ程度に記事にしてみました。

# 1.Pepperのタブレットに表示させるボタンを作成
まずはPepperのタブレットに表示させるボタンをHTMLで作成します。

今回のHTMLのディレクトリ構成は下記を参照ください。

```text:ディレクトリ構成
html/
　├ index.html
　├ images/
　│　└ logo.jpg
　└ lib/
　 　├ css/
　 　│　└ index.css
　 　├ js/
　 　│　└ index.js
　 　└ plugins/
　 　　 　├ jquery/
　 　　 　│　└ jquery.min.js
　 　　　 └ qi/
　 　　　  　└ qi.js
```

ボタンを表示させるHTMLとCSS、JavaScriptは下記の通りです。

```HTML:index.html
<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='UTF-8'>
		<meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'
			name='viewport' />

		<!--第三者JS-->
		<script type='text/javascript' charset='utf-8' src='lib/plugins/jquery/jquery.min.js'></script>
		<script type='text/javascript' charset='utf-8' src='lib/plugins/qi/qi.js'></script>

		<!--自作CSS-->
		<link type='text/css' rel='stylesheet' href='lib/css/index.css'>
	</head>
	<body>
		<!--レイアウトSTART-->
		<div id='background'>
			<img id='background-images' src='images/logo.jpg'>
		</div>
		<div id='touch-prompt-button'>Pepperがポーズ！</div>
		<!--レイアウトEND-->

		<!--自作JS-->
		<script src='lib/js/index.js'></script>
	</body>
</html>
```

```css:index.css
body {
	overflow: hidden;
	height: 1067px;
	width: 1707px;
	background: linear-gradient(#f9fcf5, #f3fbfd);
	user-select: none;
	-webkit-user-select: none;
}

/* 背景画像START */
#background {
	height: 1067px;
	width: 1707px;
	text-align: center;
	background-color: #FFFF;
}
#background-images {
	position: relative;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
/* 背景画像END */

/* ボタンSTART */
#touch-prompt-button {
	position: absolute;
	top: 800px;
	left: 175px;
	width: 1350px;
	height: 150px;
	background-color: #404040;
	color: #f1f1f1;
	text-align: center;
	font-size: 100px;
	border: 2px solid #f1f1f1;
	border-radius: 10px;
	opacity: 0.75;
	transition: opacity 0.5s;
}
/* ボタンEND */
```
```javascript:index.js
$(document).ready(function() {
	QiSession(function(session) {
		session.service('ALMemory').then(function(ALMemory){
			
			/**
			 * <--TOUCH DETECTION-->
			 *
			 * タッチされた時にPepperにポーズをさせます。
			 */
			$('#touch-prompt-button').on('touchstart', function () {
				ALMemory.raiseEvent('samplePJ/tablet/button_touched', 0);
			});
		});
	});
});
```

index.jsの11行目の`samplePJ/tablet/button_touched`はイベントキーです。
`ALMemory.raiseEvent()`はPepper側にイベントを飛ばす機能ですので、
タブレットのボタンがタッチされたら、イベントキーの値に0が入ったイベントが発行されます。

# 2.PepperのタブレットにHTMLを表示させる
次はChoregrapheを使ってPepperのタブレット画面に上記で作成したHTMLファイルを表示させます。

Choregrapheのプロジェクトファイルを名前をつけて保存後、保存したフォルダ内に上記で作成したHTMLフォルダを移動して持ってきてください。
その後Choregrapheをリロードすると下記の画像のようにHTMLフォルダが表示されます。
<img width="301" alt="サンプル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172685/8f7b8fba-f1bc-4fd7-da1f-b40419cc3255.png">

次に、`Show App`ボックスをワークスペースにドラック＆ドロップして、左上のonStartに結線します。
これでPepperに接続して再生するとPepperのタブレット上にHTMLが表示されます。

# 3.タブレットのボタンタッチをChoregrapheで受け取る
index.jsの11行目で記述したように、ボタンをタッチすると`samplePJ/tablet/button_touched`のイベントが発行されます。したがって、Choregraphe側ではこのイベントキーを受け取る処理が必要です。

下記の画像のようにChoregrapheのワークスペース右上に青いプラスマークがあります。
<img width="327" alt="event.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172685/9cddb52e-9087-4f78-33ba-1950fe5e735d.png">
この上でホバーすると「ALMemoryからイベント追加」と説明が出る通り、イベントをここで受けることが可能です。
この青いプラスマークをクリックし、右下の「新しいキーの追加...」をクリックすると、新しいメモリーキーの名前を求められるので、`samplePJ/tablet/button_touched`を入力し、OKをクリックしてください。
<img width="555" alt="addkey.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172685/bfbdf18f-c2cd-ae93-20cc-af6a16a5a3cb.png">

すると下記のように、ワークスペースにイベントキーが追加されます。
タブレットでボタンをタッチすると、`samplePJ/tablet/button_touched`のイベントが発行され、Choregrapheのこの部分から値の0が出力されます。
<img width="341" alt="afteraddkey.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172685/410ca725-1dd1-6572-491d-cddca59c9ec0.png">

# 4.Pepperにポージングさせる。
最後に、Pepperに好きなポーズをさせます。
今回は「[Pepperチュートリアル (3)：ポーズを作る](https://qiita.com/Atelier-Akihabara/items/7847aa3fb10069e0f2aa)」を参考にしてTimelineボックスでポーズ遷移させてみました。
NAOqi2.5.5のため、Timelineボックスはドラック＆ドロップでワークスペースに持ってこれますが、ボックスの内容や機能は大きく異なることはありませんでした。

最終的なChoregrapheは下記のような感じです。
<img width="783" alt="finish.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172685/2b095274-b57a-5b40-9ff3-a00eb0a6df00.png">

# まとめ
イベントキーにもとづいてイベントキーを発行＆受け取りの仕組みを理解できれば、Pepperとタブレットの制御は割とすんなりいけますね！