前回は、ボックスの作成と外部ライブラリの読み込みについてご紹介しました。
今回は、Pepperの胸部分にあるタブレットを使用するアプリケーションを作成したいと思います。
Pepperと会話をし、通信により表示したいPNG画像ファイル名を取得してタブレットに表示させてみたいと思います。
ただし、バーチャルロボットでは「タブレット」サービスはサポートしていないので、
ビルド時に「エラー」となり動作確認できませんが、参考情報として是非、ご覧ください！
タブレットで表示できる画像ファイルは、「PNG」、「JPEG」、「GIF」のいずれかとなります。
今回は、PNG画像をタブレットに表示してみます。
では、早速アプリケーションを作成してみましょう。
＜タブレットにPNG画像を表示するアプリケーション＞
【事前準備】
・異なる任意のPNG画像ファイルを３ファイル用意しておくこと
◆ファイル名
・sample1.png
・sample2.png
・sample3.png
・サーバ側にテキストファイルを用意しておくこと
◆ファイル名
・image1.html
→ データは、「sample1.png」のみ
・image2.html
→ データは、「sample2.png」のみ
・image3.html
→ データは、「sample3.png」のみ
【手順１】
SDKを起動します。
【手順２】
プロジェクト内に用意した画像ファイルを格納するため、ディレクトリを作成します。
「＋」ボタンをクリックします。
【手順３】
「ディレクトリの作成…」ボタンをクリックします。
【手順４】
ディレクトリ名を「html」とし、「create」ボタンをクリックします。
【手順５】
htmlディレクトリが作成されたことを確認します。
【手順６】
再度、「＋」ボタンをクリックし、「ファイルのインポート…」を選択します。
【手順７】
用意したPNG画像ファイルを選択して、「オープン」ボタンをクリックします。
【手順８】
ファイルがインポートされたことを確認します。
【手順９】
PNG画像ファイルを「html」フォルダへ移動します。
【手順１０】
残りのPNG画像ファイルを「html」フォルダに格納します。
【手順１１】
Pepperとの会話や通信については、以前の記事でご紹介していますので、そちらを参照してください。
会話：[Pepper] Pepperアプリケーション開発 ～通信してみよう～
通信：[Pepper] Pepperアプリケーション開発 ～Pepperと会話しよう！！～
【手順１２】
必要なボックスを中央の作業スペースへ配置し、ボックス同士を接続します。
今回使用するボックスは下記です。
・Show Image(tablet内)
言語設定を行います
【手順１３】
パラメータボタンをクリックします。
【手順１４】
PNG画像ファイル名を入力し、「OK」ボタンをクリックする
【手順１５】
残りのPNG画像ファイル名を「Show Image」ボックスを使用して設定します。
【手順１６】
behavior_1フォルダ内にある「behavior.xar」をプロジェクト内の最上位ファイルとなるよう移動します。
※これを実施しないと、フォルダパスが取得できないため、PNG画像の表示に失敗してしまいます
【手順１７】
ボックスをつなぎます。
お疲れ様でした。
バーチャルロボットではエラーとなり確認できませんが、タブレットに画像ファイルを表示させる方法となります。
もし、Pepperをご購入した際には、是非試してみてください！
以上で、「タブレットを使ってみよう！」は終了となります。
最後までご覧いただき有難うございました。
次回も引き続きPepperアプリケーション開発に触れていく予定です。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。