View on GitHub

駅すぱあとWebサービス

HTML5インターフェースサンプル

Download this project as a tar.gz file Download this project as a .zip file

「駅すぱあとWebサービス」を利用したサンプルコードです。サンプルコードについてのサポートは承っておりません。予めご了承ください。

1.ファイルのダウンロード

右上にあるフォルダマークをクリックしてzipもしくはtar.gzでダウンロードした後、圧縮ファイルを展開します。
なお、各パーツごとにディレクトリが分かれていますので、jsファイルexpCssディレクトリ、および、expImagesディレクトリをコピーして利用します。

expCssディレクトリ、および、expImagesディレクトリはディレクトリ名を変更せずにそのままコピーしてください。

2.ダウンロードしたファイルの利用方法

ダウンロードしたファイルを展開し、表示するサーバーへ設置してください。
なお、表示するページごとにJavaScriptをインクルードする必要があります。
インクルードは下記使用例のいずれかを参考に記述してください。

【使用例1】jsファイルをルートに設置した場合
<script type="text/javascript" src="コンポーネント名.js?key=keycode" charset="UTF-8"></script>
【使用例2】ディレクトリ構成を残した場合
<script type="text/javascript" src="コンポーネント名/コンポーネント名.js?key=keycode" charset="UTF-8"></script>

※ keycode の部分には、Webサービスのキーコードを記述します。
※ コンポーネントのご利用には認証キーが必要になります。認証キーはサービス契約時に弊社より送付されます。

また、下記のパーツをご利用の場合はCSSファイルのインクルードも必要になります。
インクルードは下記使用例のいずれかを参考に記述してください。

  1. 日付入力パーツ
  2. 駅名入力パーツ
  3. 探索条件パーツ
  4. 経路表示パーツ
  5. 駅時刻表パーツ
  6. 区間時刻表パーツ
  7. 列車時刻表パーツ
  8. 定期払戻計算パーツ
  9. 路線図パーツ
【使用例1】expCssをルートに設置した場合
<link class="css" rel="stylesheet" type="text/css" href="expCss/コンポーネント名.css">
【使用例2】ディレクトリ構成を残した場合
<link class="css" rel="stylesheet" type="text/css" href="コンポーネント名/expCss/コンポーネント名.css">

3.サンプルコード

* ユーザーズガイド
Wikiにてリファレンスやサンプルなどを用意しております。
https://github.com/EkispertWebService/GUI/wiki

4.対象環境

OSバージョンブラウザ備考
Windowsxp/Vista/7IE8表示が崩れることがあります
WindowsVista/7IE9追加のライブラリが必要です
Windows7/8IE10/IE11
Windows8.1IE11
Windows10Microsoft Edge
MacOSX10.7以降Safari最新版のみ対応
Windows/Mac-FireFox最新版のみ対応
Windows/Mac-Chrome最新版のみ対応
iOS5.1.1以降Safari
Android(2.x系)2.3.4以降標準ブラウザ一部端末では表示が崩れることがあります
Android(3.x系)3.1以降標準ブラウザ
Android(4.x系)4.0標準ブラウザ4.1以降は未対応
Android(4.x系)4.0以降Chrome
Android(5.x系)5.0以降Chrome

5.IE8/IE9での制限

* 制限事項
IE8/IE9は標準でJSONに対応していないため、そのままでは利用することが出来ません。
* 回避方法
IE8/IE9の場合は"json2.js"等を利用し、JSONへの拡張を行なってください。 なお、IE10/IE11やFIrefox、Chromeは標準で対応していますので、追加は不要です。
* サンプルコード
サンプルコードではJSON対応を行っておりますので、拡張は不要です。

6.デモ

画面サンプル
経路探索 サンプルを確認
鉄道駅の時刻表 サンプルを確認
区間の時刻表 サンプルを確認
鉄道駅時刻表の列車情報 サンプルを確認
定期券の払い戻し計算 サンプルを確認
定期代/運賃の分割計算 サンプルを確認
経路を利用した時刻表表示 サンプルを確認
回数券を利用した経路探索 サンプルを確認
ランドマークを利用した経路探索 サンプルを確認
データ取得サンプル
駅情報の取得 サンプルを確認
路線情報の取得 サンプルを確認
範囲探索 サンプルを確認
回数券情報の表示 サンプルを確認
路線図
路線図表示サンプル サンプルを確認
路線図イベント設定サンプル サンプルを確認
路線図駅クリック設定サンプル サンプルを確認
路線図サイズ調整サンプル サンプルを確認
路線図アプリケーションの実例サンプル サンプルを確認
駅すぱあとの情報
データバージョン取得 サンプルを確認
拡張ツール
JSON/XML変換 サンプルを確認