「駅すぱあと路線図」をPepperで使えるようにしてみる

2016年11月29日火曜日 kwmt

こんにちはkwmtです。

前回は駅すぱあとWebサービスをPepperで触ったので、
そのままの勢いで駅すぱあと路線図も試してみました。

と、いうのもPepperにタブレットが付いているのに使わないのも勿体無いなぁという理由からです。HTMLを表示するだけだったらボックス1つ置くだけで良いし簡単にできるだろうと・・・・。

できたものはこんな感じ。
Pepperのタブレットに駅すぱあと路線図




駅すぱあと路線図を表示して入力された駅にマークがつくというもの。
出来上がった状態のプロジェクトはこのような感じです。
今回のプロジェクト
プロジェクトの構成(htmlディレクトリを追加)
前回の記事で紹介したプロジェクトを流用したもので、タブレットに表示するためにShow AppボックスとWaitボックス、Raise Eventボックスを増やしました。

自作したボックスのAPI Callの処理はほぼそのままなので、内容は前回の記事を見てください。駅すぱあと路線図で駅にマークをつける時に楽だったので取得するものは駅名から駅コードに変更しています。

流れはShow Appボックスでタブレットにプロジェクトのhtmlディレクトリ内のindex.htmlを表示させて、Waitボックスで表示されるまで待機。(ここはWaitボックスじゃなくてタイムラインでしたほうが良いのかなぁ・・?)
その後、駅名を検索して該当した駅コードをRaise Eventでメモリに書き込み、メモリへの書き込みをHTML上で捉えて処理を実行する感じ。

下記表示するHTMLは、駅すぱあと路線図で公開されているサンプルに手を加えたものです。
今回は初期位置までは作り込んでいないので、マークが付けられる駅(高円寺)をinitで中心駅に設定してあります。

HTMLのソースは以下のようになってますので、APIキーを持っていてPepperが手元にあればおためしください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>駅すぱあと路線図 | Pepper連携サンプル</title>
    <!-- for Pepper -->
    <script src="/libs/qimessaging/2/qimessaging.js"></script>
    <!-- for 駅すぱあと路線図 -->
    <link rel="stylesheet" href="http://rmap.ekispert.jp/production/rosen.css" />
    <script src="http://rmap.ekispert.jp/production/rosen.js"></script>
    <script>
      // 駅すぱあと路線図用
      var rosen;
      window.addEventListener('load', init);
      // タブレットに表示する路線図のイニシャライズ
      // アクセスキー・中心・サイズの設定
      function init() {
        rosen = new Rosen("map", {
          apiKey: "駅すぱあと路線図のAPIキー",  // アクセスキー
          centerStation: 22671,                // 中心の駅コード
          zoom: 14,                            // ズーム
        });
      }
      // Pepperで「OriginalPepperEvent/stations」に対して書き込みが発生した際に動作
      // subscriber.signal.connectで指定した関数を実行します
      function subscribe() {
        QiSession( function (s) {
          session = s;
          session.service("ALMemory").then(function (ALMemory) {
            ALMemory.subscriber("OriginalPepperEvent/stations").then(function(subscriber) {
              subscriber.signal.connect(setMarker);
            });
          });
        });
      }
      // クリックするとアラートメッセージを表示するマーカーの作成
      // Pepperでメモリに駅コードが書き込まれた際に実行され、書き込まれた駅コードが引数となる
      function setMarker (stationCode) {
        rosen.setStationMarker(stationCode).then(function(marker) {
          // マーカーのクリックイベントハンドラを設定
          marker.on('click', function() {
            alert("マーカーが付いた駅が選択されました");
          });
        });
      }
    </script>
    <!-- このサンプルのCSS -->
    <style>
      html, body { width: 100%; height: 100%; }
      #map { width: 100%; height: 100%; }
    </style>
  </head>
  <body onLoad="subscribe();">
    <div id="demo_wrapper">
      <div style="width:100%; height:1000px;">
        <div id="map"></div>
      </div>
    </div>
    <div class="footer_wrapper">
      <div class="footer">
        © VAL LABORATORY CORPORATION.
      </div>
    </div>
  </body>
</html>