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

1.Pepperのタブレットに表示させるボタンを作成

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

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

ディレクトリ構成

html/
　├ index.html
　├ images/
　│　└ logo.jpg
　└ lib/
　 　├ css/
　 　│　└ index.css
　 　├ js/
　 　│　└ index.js
　 　└ plugins/
　 　　 　├ jquery/
　 　　 　│　└ jquery.min.js
　 　　　 └ qi/
　 　　　  　└ qi.js

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

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>

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 */

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フォルダが表示されます。

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

3.タブレットのボタンタッチをChoregrapheで受け取る

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

下記の画像のようにChoregrapheのワークスペース右上に青いプラスマークがあります。

この上でホバーすると「ALMemoryからイベント追加」と説明が出る通り、イベントをここで受けることが可能です。
この青いプラスマークをクリックし、右下の「新しいキーの追加...」をクリックすると、新しいメモリーキーの名前を求められるので、samplePJ/tablet/button_touchedを入力し、OKをクリックしてください。

すると下記のように、ワークスペースにイベントキーが追加されます。
タブレットでボタンをタッチすると、samplePJ/tablet/button_touchedのイベントが発行され、Choregrapheのこの部分から値の0が出力されます。

4.Pepperにポージングさせる。

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

最終的なChoregrapheは下記のような感じです。

まとめ

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