卒論トレーニング (横山)

JavaScriptの勉強

• json形式のデータ受け渡し
• 位置情報の地図上への描画手法
• jsonpの利用

BusMap2への応用

• さまざまなサイト（たとえば、大学のサイトの「アクセス」情報にバスの時刻表を載せるなど、あると便利な機能を考える。

JSONPの利用例

東電の総使用量、容量などの情報サービス利用の場合

どのようなデータが提供されるかみてみる

サービスを提供しているURL http://tepco-usage-api.appspot.com/latest.json?callback=samplefunc にアクセスしてみよう。結果は

samplefunc({
  "saving": false,
  "hour": 13,
  "forecast_peak_period": 18,
  "capacity_updated": "2011-09-26 08:30:00",
  "forecast_peak_updated": "2011-09-26 08:30:00",
  "month": 9,
  "usage_updated": "2012-09-27 05:00:36",
  "entryfor": "2012-09-27 04:00:00",
  "capacity_peak_period": 18,
  "forecast_peak_usage": 3630,
  "year": 2012,
  "usage": 3354,
  "capacity": 4322,
  "forecast": 3372,
  "day": 27
});

このように、受け取ったデータを受け取った側で実行する関数名をサーバに送って、関数名ごと送信してもらうのがjsonpの仕様である。

シンプルな例

<script type="text/javascript">
function show_tepco(data){
    var str;
    var ratio = data['usage']/data['capacity']*100;
    str = '東京電力全体の利用率（' + data['hour'] +'時台) : ' + ratio.toFixed(1) + "% (使用量 " + data['usage'] + "万KW, 供給可能量 " + data['capacity'] +"万KW)<br>";
    document.getElementById("tepco").innerHTML= "取得したデータ: " + str;
  }
</script>

<document>
  <div id='tepco' style='text-align: center'></div>

  <script type="text/javascript" src="http://tepco-usage-api.appspot.com/latest.json?callback=show_tepco"></script>
  <!-- サーバから返ってきた文字列がデータを引数とする関数になっており、
  それをここで実行 -->
</document>

jQueryの利用を利用する例

jQueryライブラリの取得と自分のスクリプトへの読み込み

jQueryにjsonデータを扱うのに便利な機能が用意されているので、それを使ってみる。

jQueryはJavaScriptのライブラリであり、利用するときにそれを読み込んで使用する。まず、最新版をゲットして、プログラムのディレクトリに置く。 jQueryのホームのDownloadからゲットできる。

利用するには、htmlファイルに

<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>

ｊQuery関数でデータをゲットして、ページに出力してみる例

<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  /* 準備ができたら自動的に実行させる */
  $(document).ready(function() {
      /* $.から始まるのがjQuery関数 */
      /* callback=? の ? に第２引数の関数名（プログラムの上では無名関数）が入る。*/
      $.getJSON('http://tepco-usage-api.appspot.com/latest.json?callback=?',function(data){
          var str;
          var ratio = data['usage']/data['capacity']*100;
          str = '東京電力全体の利用率（' + data['hour'] +'時台) : ' + ratio.toFixed(1) + "% (使用量 " + data['usage'] + "万KW, 供給可能量 " + data['capacity'] +"万KW)<br>";
          $('#tepco').append(str);

      });
  });
</script>
<document>
  <div id='tepco' style='text-align: center'>取得したデータ：　</div>
</document>

山梨バスマップテストサイトからの情報提供

路線一覧

(旧)

http://richard.js.yamanashi.ac.jp/~toyoki/xoops_hd/modules/BusMap2/jsonp/BusCategorizedRouteJsonp.php?callback=functionName

functionNameには、コールバックしてもらう関数名を入れる。

データ形式は (10/13若干変更)

    [{type:"r", pid:カテゴリID, id:一般路線ID, name:"一般路線名",
      destination: [ {name:"行先名",id:routeId}]
    }
    [{type:"c", pid:親カテゴリID, id:カテゴリID, name:カテゴリ名} ]

"callback"を指定しなければ、単純なjsonデータ（チェックのために用いる）。

(新) BusCategorizedRouteJSONP.php　(10/20作成)

階層的なjson形式で、カテゴリと路線を出力するようにした。

http://richard.js.yamanashi.ac.jp/~toyoki/xoops_hd/modules/BusMap2/jsonp/BusCategorizedRouteJSON.php?callback=functionName

これを、jQueryの階層構造表示ライブラリtreeviewなどを使って階層構造表示できるようにしたい。（紹介ページとして、たとえばhttp://www.mdn.co.jp/di/articles/2369/?page=7）

路線データ：　停留所列と道筋（緯度経度の列）

  http://richard.js.yamanashi.ac.jp/~toyoki/xoops_hd/modules/BusMap2/jsonp/BusRouteRoadsJSON.php

GET型引数として、

?routes=一般路線ID|路線ID!一般路線ID2|路線ID

http://richard.js.yamanashi.ac.jp/~toyoki/xoops_hd/modules/BusMap2/jsonp/BusRouteRoadsJSON.php?routes=17!18

routesは1つ以上。

地図上に路線道筋と停留所を描画するのに用いられる。

出力形式

  [
    {route_name:"路線名",
    road: [
        {start:"バス停", end="バス停",
        marker: [
                  {lat:"緯度", lng:"経度"}
                ]
        }
      ]
    }
  ]

出発停留所、目的停留所のIDを求める

BusStopNameJSON.php?startname=武田&endname=病院

乗り継ぎ検索情報

• 停留所IDを指定する場合:

  transferInfoJSON.php?startId=6&endId=28&stime=12:00
  

• プラットフォームIDを使用する場合

  transferInfoJSON.php?startPlatId=32&endPlatId=62&stime=12:00
  

stimeは、出発時刻、etimeは到着時刻　（排他的にどちらかを使用）。なければstimeに現在の時刻を使用

出力形式：こちらのページ

バス停一覧

BusStopJSON.php?callback=?

バス停名一覧を返してくれる。

JSONデータのチェック、表示ツール

Web上を探すとJSONデータのチェックツールがいろいろみつかる。

chromeやfirefoxにはアドオンがあり、それを使うのも一手。 http://www.crossl.net/blog/json_check_webservice/ にメモがある。

入力補完

参考： フリーで使えるライブラリ

• jqueryのUIライブラリを利用 http://jqueryui.com/
• http://www.enjoyxstudy.com/javascript/suggest (日本人の作で、よくできているが、jqueryで利用するにはjquery-uiを使うほうが簡単。）