非エンジニアでもできる！駅すぱあと路線図の始め方

こんにちは。みなさん駅すぱあと路線図を使って開発したことがありますか？駅にマーカーを立てたり、路線に色を塗ってみたり、色々できます。私の知人から、「駅すぱあと路線図を使ってみたいんだけど何をどうすれば良いのかわからん」という話をいただいたので、今回は駅すぱあと路線図の始め方を非エンジニアの方でも分かるように丁寧に解説しようと思います。

f:id:hiiiiiiihikaru:20170817173555p:plain

駅すぱあと路線図とは

駅すぱあと路線図は、Javascriptで操作ができるAPIです。路線図に特化したGoogle Maps と思っていただけるとイメージしやすいかと思います。

駅すぱあと路線図サンプル集で紹介されているように、

路線図の背景色を変えてみたり
駅にマーカーを立てたり
路線に線を引いたり

様々なことがこのAPIで出来ます。

駅すぱあと路線図を自分の環境で動かしてみよう

ここからは、実際にサンプルコードを利用して、自分の環境で駅すぱあと路線図を動かしてみたいと思います。

必要なもの

インターネット環境。オフラインだと動きません
駅すぱあと路線図を動かすためのアクセスキー
テキストエディタ。何でも良いです
ブラウザ。私はgoogle chromeを利用しています

以上！特別な開発環境やツールは必要ありません。

アクセスキーの申し込み

「駅すぱあと路線図」フリープランのお申し込み - 駅すぱあとWebサービス - システム連携サービス - サービス・製品紹介 - 駅すぱあとワールドから、アクセスキーを入手しましょう。申し込みから数日後にアクセスキーが入手できます。

入力欄の"サービス設定情報"について

アクセスキーには許可ドメインが紐付けされています。アクセスキーの不正利用を防ぐために、紐付けされているドメインではないwebサーバからアクセスしても、駅すぱあと路線図が利用できないようになっています。

許可ドメインは、申し込みページの入力欄サービス設定情報で設定します。

f:id:hiiiiiiihikaru:20170821100048p:plain

すでに、webサイト内で駅すぱあと路線図を利用する予定のある方は、そのwebサイトのドメインを入力してください。「ただ単に、駅すぱあと路線図を自分のPC内で触ってみたいだけだ」という方は、ご利用ドメインの項目は無しと入力すれば結構です。ただ、許可ドメインが紐づけられていないアクセスキーは、どこからでも利用できてしまいます。フリープランは1日100セッションに制限されているので、アクセスキーの漏洩だけは注意してください。

zipファイルのダウンロード

駅すぱあと路線図サンプル集から、テンプレートをダウンロードし、zipファイルを展開します。展開したzipファイルには、ファイルが二つ入っているだけです。

rmap_template/
├── README.txt
└── hello.html

0 directories, 2 files

zipファイルをダウンロードしただけでは、まだ路線図は動かせません。

試しに、rmap_template内のhello.htmlをブラウザで開いてみると、認証失敗: 認証サーバに接続できませんと言うメッセージが出てきてしまい、路線図すら表示されない状態です。

f:id:hiiiiiiihikaru:20170824110952p:plain

路線図を表示してみよう

README.mdの中身には、以下の説明があります。

hello.html - 最小限のテンプレートです。

apiKey: "*******************"

の部分を実際のアクセスキーに書き換えてWebサーバに設置し、ブラウザでアクセスすると路線図が表示されます。

この説明の通りにやってみましょう。まず、hello.htmlを、適当なテキストエディタで開きます。 24行目の************************の部分を、入手したアクセスキーに書き換えてファイルを保存します。 hello.htmlをブラウザで開いてみましょう。

f:id:hiiiiiiihikaru:20170824110422p:plain

画面上に路線図が表示されたら成功です。

f:id:hiiiiiiihikaru:20170824110840p:plain

サンプルコードを動かしてみよう : 路線図の背景色変更

駅すぱあと路線図には様々なサンプルコードが用意されています。コードが公開されているので、それをコピーすれば自分の環境でも動かすことができます。

では、分かりやすいところで、駅すぱあと路線図 | 路線図の背景色を変更するのサンプルを動かしてみましょう。

hello.htmlを、適当なテキストエディタで開きます。 11行目から始まるstyle要素の中身を、以下のように書き換えてください。

  html, body { width: 100%; height: 100%; }
  #map { width: 100%; height: 100%; }

  /* 以下の行を追加 ここから */
  .leaflet-container {
    background: red !important;
  }
  /* ここまで */

今回は分かりやすいように、赤色(red)を指定してみました。好きな色を指定してみてください。ちなみに WEB色見本原色大辞典 - HTMLカラーコード等のサイトでカラーコードの一覧がみれます。

ファイルを保存して、hello.htmlをブラウザで開きます。路線図内の+ボタンを押しまくって背景を出してあげてください。

beforeはこちら

f:id:hiiiiiiihikaru:20170824113741p:plain

afterはこちら

f:id:hiiiiiiihikaru:20170824113811p:plain

路線図の背景が赤色になっていたら成功です。

やってみてわかったことなんですけど、背景色ってここ(赤色部分)のことなんですね・・。てっきり路線図内のクリーム色の部分が変わるのかと思って、最初はコードの記述方法が間違ってるのかと勘違いしてましたw

サンプルコードを動かしてみよう : クリックした駅にマーカーを立てる

これだけだと何なので駅すぱあと路線図 | クリックで駅を選択するも動かしてみます。クリックした駅にマーカーを立てる処理です。メッセージ出力の部分は今回省略します。

hello.htmlを、適当なテキストエディタで開きます。 script要素内に、以下のコードを追加してください。

  function init() {
    rosen = new Rosen("map", {            // "map"は<div>のidと一致させる
      apiKey: "************************", // アクセスキーはサンプル用です。実際にご利用されるときは書き換えてください。
      apiSetting: "https",                // HTTPS版のAPIサーバを指定
      tileSetting: "https"                // HTTPS版のタイルサーバを指定
    });

    // 以下の行を追加 ここから
    rosen.on('selectStation',function(data) {
      data.stations.forEach(function(station) {
        rosen.setStationMarker(station.code);
      });
    });
    // ここまで