ヴァル研究所 Advent Calendar 2018 6日目の記事です。
ブラウザ上で駅すぱあと路線図のプログラミングができる「駅すぱあとPlayground」を紹介します。

はじめに

この記事は、「駅すぱあと路線図を試したいけど、キー発行依頼とかめんどくさい」、という人向けの、駅すぱあと路線図をすぐに試せる hello, world 記事になります。

※　この記事は個人の見解であり、所属する組織の公式見解ではありません。

駅すぱあと路線図とは

株式会社ヴァル研究所が提供している、鉄道の路線網を一枚絵にした路線図サービスです。
APIも提供されており、プログラマブルに扱うことができます。

詳しくは、以下のサービス紹介ページをご覧ください。
駅すぱあと路線図: http://rosenzu.strikingly.com/

また、触ってみるだけなら「駅すぱあと for web」でも試せます。

駅すぱあと路線図で hello, world

今回は、駅すぱあと路線図の駅に「hello, world」というポップアップを表示することをゴールにします。

駅すぱあと路線図は、触るだけでも面白いですが、APIを利用して色々と可視化したり、その可視化をどうリッチにするかというのも面白さだと思います。
今回は、その一歩になる hello, world を、キー発行もなく、ディレクトリやファイルを作成することもなく試す方法を紹介します。

駅すぱあとPlayground

「駅すぱあとPlayground」は、駅すぱあと路線図で提供されている、Web上でコードを書いて、簡単に試せるオンラインコードプレイグラウンドになります。

駅すぱあとPlayground
https://rmap.ekispert.jp/playground/

では、早速試して行きたいと思います。
（ちなみに、駅すぱあとPlayground自体はとてもシンプルなので、細かい使い方の説明はここではしません。）

hello, world

まず、駅すぱあとPlaygroundを開きます。

次に、駅すぱあと路線図サンプル集の基本的なポップアップの立て方から、テキストポップアップを立てる処理をコピーします。

■ コピーするテキストのポップアップを立てる処理のコード

  // 2．文字列のポップアップ（飯田橋）
  // textPopupはHTMLタグ無効
  // ポップアップクラスを生成
  var text_popup = Rosen.textPopup();
  text_popup.setComment('飯田橋駅（いいだばしえき）は、東京都千代田区・新宿区・文京区にある、東日本旅客鉄道（JR東日本）・東京地下鉄（東京メトロ）・東京都交通局（都営地下鉄）の駅である。');
  text_popup.setAnchor("http://ja.wikipedia.org/wiki/%E9%A3%AF%E7%94%B0%E6%A9%8B%E9%A7%85");  // リンク先
  // 路線図にポップアップをセット
  rosen.setStationPopup(22507, text_popup);

コピーをしたら、駅すぱあとPlaygroundのコードの中で「駅がクリックされたら駅名を表示する」と書かれた部分と置き換えて、内容をちょっと書きかえます。。

■ 書き換えた後の内容（リンクは不要なので、削除しました。）

    // 駅がクリックされたら駅名を表示する
    rosen.on("selectStation", function(data) {
      if (data.stations) {
        data.stations.forEach(function(station) {
          // ポップアップクラスを生成
          var text_popup = Rosen.textPopup();
          text_popup.setComment('hello, world');
          // 路線図にポップアップをセット
          rosen.setStationPopup(station.code, text_popup);
        });
      }
    });

これで、 RUN を押せば、左の路線図をタップすると「hello, world」がポップアップするようになります。

ちょっと補足

以下の station.code は、タップした駅を指定しています。詳しくはAPIリファレンスを参照してください。

rosen.setStationPopup(station.code, text_popup)

最後に

どうでしょうか。
これ以外にもサンプルコードをコピペすることで色々試すことができます。
また、キーを発行した後であれば、駅すぱあとPlaygroundの内容をそのままファイルに貼り付けて、キーを書き換えるだけですぐにローカルで実行することができるようになります。

とりあえず触ってみたい、そんな方にとてもオススメですので、ぜひお試しください。