Pepper技術ブログ：PepperタブレットでのWebサイト表示

こんにちは！
スエヨシ＠Pepper担当 です。
前回の投稿からだいぶ間が空いてしまいましたが…
本日は「PepperのタブレットでWebサイトを表示方法」についてお話したいと思います。

◆Pepperタブレットの基本

まずは、Pepperアプリでどうやってタブレットを制御しているのか、という話から。
タブレットを扱うようなPepperアプリを既に作ったことがある、という人は、この項は読み飛ばして先へとお進みください。

あ、ちなみに今回もChoregrapheでアプリを作る前提となります。

Choregrapheのボックスライブラリには、タブレット制御に関連するボックスがいくつかあります。基本的に、タブレットに何かを表示したい、といった場合には、これらのモジュールを使うことになります。画像を表示したい場合は Show Image ボックス、動画を流したい場合は Play Video ボックス、そしてhtmlファイルを表示したい場合には Show App ボックスを使います。

これらのボックスの中身（ソースコード）を見てみると、どのボックスでも共通して ALTabletService というAPIが呼び出されていることが分かると思います。どのボックスでも、まず最初に ALTabletServiceAPI のインスタンスを取得しており、そこから各ボックス毎に必要に応じて適切なメソッドを使用する実装になっています。つまり、この ALTabletServiceAPI が、Pepperのタブレットを操作・制御するための基本となるAPIであるわけですね。

ちなみに、例として挙げている画像は Show App ボックスのソースコードで、内容としては ALTabletServiceAPI の loadAppication メソッド(*1)でPepperタブレットへのアプリケーション読込を行い、showWebview メソッド(*2)でPepperタブレットでのWebview表示を開始する、という流れになっています。
本稿では触れませんが、Show Image ボックスや Play Video ボックスではまた違ったメソッドを使用していく内容となっていますので、気になる方は確認してみてください。

(*1) loadApplication メソッドは、引数で指定されたアプリケーションのindex.htmlをPepperタブレットに読み込むためのメソッドです。読み込めるファイルパスはメソッド側で固定されており、アプリケーションディレクトリ直下の “html” という名前のディレクトリ内に配置された “index.html” のみ、となっています。
(*2) showWebview メソッドは、PepperタブレットにWebviewを表示させるためのメソッドです。ちなみにWebviewとは、OSから提供される標準機能（ソフトウェア部品）の一つで、Webページの取得・表示機能を提供するモノです。WebviewはAndroidやiOS等、OSごとに提供されていますが、Pepperタブレット自体はAndroidなので、showWebviewで使用されるWebviewもAndroidのものとなります。

◆Webサイトを表示させるには？

さて、Pepperのタブレットを操作・制御するには ALTabletServiceAPI を使用する、ということが前項で分かりました。では肝心のWebサイトをPepperタブレットに表示させるにはどうしたら良いのでしょうか。

「ALTabletServiceAPI に、URLを読み込んでサイト表示するようなメソッドがあるんじゃないの？」
「loadApplication メソッドでindex.htmlが表示できるなら、そこからリンクで遷移できるんじゃない？」
と、既にお気づきの方もいらっしゃることでしょう。
まさにその通り、公式ドキュメントのALTabletServiceAPIのページを探してみると、loadUrlなるメソッドがあるのです。内容としては「指定のURLをタブレットのブラウザに読み込む」ということで、まさに今回の目的にピッタリのメソッドです。

なるほど、これを使うのですね！
というわけで早速簡単なアプリを作ってみます。

はい。メインの処理としては、Show App ボックスを設置してビヘイビアのonStartからボックスのonStartへ接続。Show App ボックスを開いて、前項で触れた「loadApplicationメソッド」の部分を「loadUrlメソッド」に変更、引数にはURLを指定する必要があるので、今回は試験的にgoogleのURLを指定してあります。(*3)

では、実行してみましょう。

はい、駄目でした（終了処理は動きました）。
ペッパー君としばし無言で見つめあってしまいましたが。
ちなみに「loadApplication メソッドでindex.htmlを表示してからリンクで遷移する」というやり方でもWebサイトは表示できません。

さて、ご覧の通りですが、何故駄目だったのでしょうか？

種明かしをしますと、実はPepperタブレットのWifi接続は、Pepper本体とは独立しているのです。Pepper本体のWifi設定は、Pepperを使用するうえでほぼ必須のようなものなので、恐らく大多数の方が既に設定されていると思いますが、Pepperタブレット上でWebサイト表示等を行う場合は、本体とは別にPepperタブレット側の接続設定を行わなければなりません。(*4)

というわけで、PepperタブレットのWifi接続を設定しましょう。
とはいえ、Pepper本体のWifi接続はロボットウェブページ等から設定できますが、タブレット側のWifi設定については、設定変更用のGUI等はないようです。
なので今回は、Pepper本体にターミナルからSSH接続して、コマンド実行でWifi接続設定を行います。

手順としては、上記の画像のようにやっていきます。(*5)
SSH接続後、qicliコマンドから ALTabletService.enableWifi にてWifi接続をONに変更し、更に ALTabletService.configureWifi で暗号化方式・SSID・セキュリティキーを指定すると、自動的に接続が開始されます。(*6)
尚 configureWifi で設定した暗号化方式・SSID・セキュリティキーはSSIDをキーとして記憶され、次回以降Pepperを起動するたびにこの設定で自動的に接続が開始されるようになります。この設定値を削除する場合には forgetWifi メソッドを、Wifi接続をOFFにする場合は disableWifi メソッドを、それぞれ実行してください。

ちなみに、getWifiStatus メソッドはその名の通り、Wifiの接続状況を取得するメソッドです。返却される値は接続状況を表す文字列で、”IDLE”、”SCANNING”、”DISCONNECTED”、”CONNECTED”、の４種類です。 “CONNECTED” になったら接続できている状態です。

Wifi接続の確立が確認できたので、改めて先程のアプリを実行してみましょう。

今度は上手くいきましたね。解像度の関係でちょっとロゴや検索欄等が小さいですが、Googleのトップページがちゃんと表示されています。

このように、PepperタブレットにWebサイトを表示するには、タブレット側のWifi接続を設定＋ALTabletService の loadUrl メソッド等を使用して任意のページを表示、という手順を踏む必要があります。
タブレット側のWifi接続さえ出来ていれば、「loadApplication メソッドでindex.htmlを表示してからリンクで遷移する」という方法でもWebサイトを表示することができます。

尚、今回は簡略化の為にSSH接続からWifi設定を行いましたが、アプリケーションとしてタブレット上でのWebサイト表示が必要になるようなモノを作る場合、ユーザにいちいち手作業で今回のようなWifi接続設定をやってもらうわけにはいきませんので、「アプリ内にWifi接続設定を入力・保存する機能と、保存した接続設定を元にenableWifi・configureWifiの手順でタブレットのWifi接続を確立させる機能を組み込む」等、アプリ側でなんとかする工夫が必要になるのではないかと思います。

(*3) メインの処理ではないですが、FrontTactilTouched のイベント入力から Hide Web View ボックス、そしてビヘイビアの onStopped へと繋がっているルートがあります。これは、「Pepperの頭（おでこ）にタッチしたら Webview を非表示にしてアプリを終了する」という処理です。
アプリ内でタブレット（Webview）を使用する際に showWebview メソッドでWebviewを表示しますが、Webviewを表示した場合、終了する際に hideWebview を実行しないとタブレットがWebview表示状態のままになってしまうため、Hide Web View ボックスを経由してアプリを終了させる必要があり、またその終了処理に Show App ボックスの出力端子から進んでしまうと、タブレットのWebview表示が瞬間的に終了してしまう可能性があることから、このように Show App ボックスとは別の契機（タッチイベント）で終了処理を実行するようにしています。
(*4) ちなみに、この事についてスエヨシ含め弊社内の関係者も長らく気づいておらず、一時期Pepperタブレットが周辺のWifiをスキャンし続ける状態になっており、「社内Wifiに所属不明の謎端末からアクセスを試みた痕跡が頻繁に！すわセキュリティ問題か！？」等とちょっとした騒ぎになったこともありました。
(*5) 「PepperにSSH接続」とか「PepperのAPIをターミナルから実行」とか唐突に登場させてしまい、困惑されている方もいらっしゃるかも知れませんが、このあたりの技術につきましては今回の本題から逸れてしまう為、別の記事にて改めて説明させていただきます。
(*6) ALTabletService.configureWifi で指定できる暗号化方式は、”wep”、”wpa”、”open” の３種類のみとなっています。wpa2では接続できませんのでご注意ください。

以上、「PepperタブレットでWebサイトを表示する方法」でした。
参考になりましたでしょうか？

弊社ではPepperのアプリケーション開発を行っています。
詳しくはこちらをご参照ください。