駅すぱあと路線図で外国の方が日本の駅名を学ぶサービスを作ってみた

16062 ワード
駅すぱあと路線図 駅すぱあと 駅すぱあとWebサービス 駅すぱあと テキストリンク

今回は、駅すぱあと路線図の英語機能を使ってみたいと思います。

概要

駅すぱあと路線図には、英語機能があります。
具体的には、

  • 路線図APIで取得できる結果を英語にする
  • 路線図の表示を英語版にする
  • サイドメニューを英語対応にする

今回は、海外の方向けに「日本語の路線図で駅をクリックすると、英語の読み方が表示される」という機能を作ってみたいと思います。
海外の方が日本の複雑な鉄道網を学びつつ、漢字も勉強できるという一石二鳥のモノになります！（浅い考え）

利用サービス

  • 駅すぱあと路線図
  • 駅すぱあとWebサービス（無償版）

実装

駅すぱあと路線図そのものや、駅すぱあとWebサービスの呼び出しについては以下の記事で紹介しているので、こちらをご覧ください。

jqueryの追加

駅すぱあとWebサービスを利用するので、jqueryを読み込みを追加します。

:
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>

<!-- jqueryの追加 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
:

駅の英語名と日本語名を取得してポップアップを表示

実装のポイントについては後述します。


:
<script type="text/javascript">

  var rosen;
  var select_stations = [];

  function init() {
    rosen = new Rosen("map", {      // "map"は<div>のidと一致させる
      apiKey: "xxxxxxxxxx",     // 実際にご利用されるときは書き換えてください。
      apiSetting: "https_en",   // HTTPS版のAPIサーバに英語版を指定
      tileSetting: "https",     // HTTPS版のタイルサーバを指定
      zoom: 16,
      minZoom: 11,
    });

    rosen.on('selectStation', function(data) {
      // 選択された駅を取得（１つだけ）
      select_station = data.stations[0];

      // 既に選択された駅であれば、マーカーとポップアップを消す
      if(select_stations.indexOf(select_station.code) >= 0) {
        rosen.unsetStationPopup(select_station.code);
        select_stations.delete(select_station.code);
        exit;
      };

      // 日本語の名称を無償版から取得
      var params = {
        "key" : "xxxxxxxxxxxx",  // 駅すぱあとWebサービスのキーを指定
        "code" : select_station.code
      }
      $.get("https://api.ekispert.jp/v1/json/station/light", params, function(data) {
        console.log(data);
      }, "json").done(function(data) {
        // 誤解のないように「中野(東京都)」の後ろ部分は取り除く
        jp_st_name = data.ResultSet.Point.Station.Name.split("(")[0];
        // 選択された駅に英語表記のポップアップを表示
        var text_popup = Rosen.textPopup();
        text_popup.setComment(jp_st_name + "\n↓\n" + select_station.name);
        // 念のためpromiseを使う
        rosen.setStationPopup(select_station.code, text_popup, false).then(function (station) {
          select_stations.push(select_station.code);
        });
      });
    });
  };

  window.addEventListener('load', init);
</script>
:

ポイント

路線図の表示は日本語版にし、路線図APIの結果を英語にする

    rosen = new Rosen("map", {      // "map"は<div>のidと一致させる
      :
      apiSetting: "https_en",   // HTTPS版のAPIサーバに英語版を指定
      tileSetting: "https",     // HTTPS版のタイルサーバを指定
      :
    });

路線図のイニシャライズでパラメータを適切に指定します。
apiSetting パラメータは、路線図のAPIサーバの言語・SSLを指定します。ここでは英語版にしたいので https_en を指定します。
tileSetting パラメータは、路線図のタイルサーバの言語・SSLを指定します。ここでは日本語版にしたいので https を指定します。

詳細については以下の路線図のリファレンスをご覧ください。
http://rmap.ekispert.jp/production/doc/document.html#rosen-rosen-options

日本語の名称と英語の名称をポップアップで表示する。

残念ながら、現時点では路線図APIから日本語と英語の名称を同時に受け取ることができません。
そこで、駅すぱあとWebサービスに駅コードを渡して、日本語の名称を取得するようにします。

      var params = {
        "key" : "xxxxxxxxxxxx",  // 駅すぱあとWebサービスのキーを指定
        "code" : select_station.code
      }
      $.get("https://api.ekispert.jp/v1/json/station/light", params, function(data) {
        console.log(data);
      }, "json").done(function(data) {
        // 誤解のないように「中野(東京都)」のような後ろ部分は取り除く（読み重視のため）
        jp_st_name = data.ResultSet.Point.Station.Name.split("(")[0];
        // 選択された駅に英語表記のポップアップを表示
        var text_popup = Rosen.textPopup();
        text_popup.setComment(jp_st_name + "\n↓\n" + select_station.name);
        // 念のためpromiseを使う
        rosen.setStationPopup(select_station.code, text_popup, false).then(function (station) {
          select_stations.push(select_station.code);
        });
      });

完成図

おわりに

今回はあまり知られていない駅すぱあと路線図の英語版の機能を試してみました。
作業していて、なんとなく本当に日本語と日本についての勉強をしている良いサービスが作れるような気がしました。
「日本版 <=> 英語版」の切り替えや、スピーカーマークをつけて発音を学べるとか。

そして英語版を紹介しつつ、英語版の路線図を載せないのもアレなので、最後に載せておきます。

個人的にはとてもクオリティが高いと思います。

白駿14503号:ロボット掃除機