Choregrapheを使ってみよう【第3回 画像や動画を表示させてみよう編】


Choregrapheを使ってみよう【第3回 画像や動画を表示させてみよう編】

こんにちは! メディアディレクターのあきです。

わたしはエンジニアではないので「プログラミング経験ゼロ」だったのですが、社内の「Pepper(ペッパー)講習会」に参加したところ、ものの十数分でPepperを動かせるようになりました。このことに衝撃と感動を覚えたので、開発用ソフトウェア「Choregraphe(コレグラフ)」を使ってPepperを開発して得た知識などを、「連載」という形で数回に分けて発信していきます。

前回の「第2回 喋らせてみよう編」ではPepperを操作するソフト「Choregraphe(コレグラフ)」を使って、Pepperを喋らせる方法についてご紹介しました。今回は、Pepperの胸にあるタブレットに画像や動画を表示する方法についてご紹介します。

画像を表示する

まずは、画像をタブレットに表示させましょう。

1. ボックスをセットする

https://gyazo.com/7de3546524d8e7f6e3375b06efa4e1f6

「Multimedia」→「Tablet」→「Show Image」ボックスを、フローダイアグラムにセットします。

2. htmlディレクトリを作成する

https://gyazo.com/03a4341c5f7f22acca3d0ad6bd66d89e

次にウインドウ右側にある「プロジェクトファイル」から「追加」ボタンを押して、「新規フォルダ」をクリックします。フォルダ名を「html」にして、htmlディレクトリを作成します。

3. 表示したい画像を読み込む

https://gyazo.com/eb68404c97ba61211a09e339d7ac5c4d

タブレットに表示させたい画像を、先ほど作成したhtmlディレクトリに追加します。htmlディレクトリを作成したときと同じく、「プロジェクトファイル」から「追加」ボタンを押して、今度は「ファイルをインポート」をクリックします。

表示させたい画像を選択してボックスライブラリに読み込んだら、ドラッグ&ドロップでhtmlディレクトリに移動します。なお、タブレットで表示できる画像は「.png」「.jpg」「.gif」の3種類です。

4. 表示したい画像を指定する

https://gyazo.com/2dcc236d975cbb057531dab70ba2e997

「1. ボックスをセットする」でセットしたShow Imageボックスのスパナマークをクリックして、先ほど読み込んだ画像の名前を入力します。拡張子まで入力しないと画像を表示することができませんので、ご注意ください。

5. behavior.xarをディレクトリ外へ移動する

https://gyazo.com/05d62263c55c88a04caa23f5e3a5dd8e

最後に、プロジェクトファイル内の「behavior_1」ボックスにある「behavior.xar」をフォルダの外へ移動します。

バーチャルロボットではエラーが起きてしまうのですが、なぜエラーが起きてしまうのかは以下で詳しく説明されていますので参考にしていただければと思います。

・「Pepperチュートリアル (5):タブレットを使う」 ー Atelier-Akihabara(Qiita)
http://qiita.com/Atelier-Akihabara/items/87def938b6553ee9c1e9

あとはボックスを線で繋ぎあわせれば、完成です! Pepperに接続して、ちゃんと画像が表示されているかチェックしてみてください。

動画を表示する

次はタブレットに動画を表示させましょう。手順はほとんど画像の表示と変わりません。

1. ボックスをセットする

https://gyazo.com/eee8c829f3b74eb6aeeda3a4da36ba9a

「Multimedia」→「Video」→「Play Video」ボックスをフローダイアグラムにセットします。

2. 再生したい動画を読み込んで指定する

https://gyazo.com/8d725fada3f8c5600d249ebb0c425512

htmlディレクトリを作成して、その中に再生したい動画を読み込みます。この手順は「2. htmlディレクトリを作成する」〜「4. 表示したい画像を指定する」と同じなので省略します。なお、Pepperで再生可能な動画は「.mp4」と「.mov」の2種類です。

htmlディレクトリに動画を入れたら、「5. behavior.xarをディレクトリ外へ移動する」でも記載しましたが、behavior.xarを移動することを忘れずに! ボックスを線で繋げば、動画を再生する準備が整いました。Pepperに接続して、動画がちゃんと再生されれば成功です。

まとめ

今回はタブレットに画像や動画を表示する方法についてのまとめでした! 前回と同じく、ドラッグ&ドロップするだけで簡単に実装することができます。ただ画像や動画を表示するだけでなく、前回実装した聞き取り機能を使って、「ある単語Aを聞き取ったら、Aの画像を表示する」「単語Bを聞き取ったら、Bの動画を再生する」などの応用も可能です。

いろいろな機能と組み合わせて、Pepperと触れ合ってみてください。それでは!


この記事を書いた人

あき
あき メディアディレクター 2015年入社
くしゃみが止まらなくなるまで胡椒をふりかけるほど、胡椒が好きです。