WebAPI Document - GUIソリューション - チュートリアル

1.はじめに

下記のいずれかをダウンロードしてください。

種類ファイル最新バージョン
経路探索
日付入力パーツ http://webui.ekispert.com/doc/files/html5/expGuiDateTime.zip 2014-12-25
駅名入力パーツ http://webui.ekispert.com/doc/files/html5/expGuiStation.zip 2015-03-30
探索条件パーツ http://webui.ekispert.com/doc/files/html5/expGuiCondition.zip 2014-12-25
経路表示パーツ http://webui.ekispert.com/doc/files/html5/expGuiCourse.zip 2015-03-30
時刻表
駅時刻表パーツ http://webui.ekispert.com/doc/files/html5/expGuiStationTimeTable.zip 2014-12-25
区間時刻表パーツ http://webui.ekispert.com/doc/files/html5/expGuiSectionTimeTable.zip 2014-12-25
列車時刻表パーツ http://webui.ekispert.com/doc/files/html5/expGuiTrainTimeTable.zip 2014-12-25
運賃計算
定期払戻計算パーツ http://webui.ekispert.com/doc/files/html5/expGuiRepayment.zip 2014-12-25
分割計算パーツ http://webui.ekispert.com/doc/files/html5/expGuiRepayment.zip 2014-12-25
路線図
路線図パーツ http://webui.ekispert.com/doc/files/html5/expGuiMap.zip 2015-02-09
ツール
ランドマークパーツ http://webui.ekispert.com/doc/files/html5/expGuiLandmark.zip 2014-12-25
回数券情報パーツ http://webui.ekispert.com/doc/files/html5/expGuiCoupon.zip 2014-12-25
駅情報パーツ http://webui.ekispert.com/doc/files/html5/expGuiStationInfo.zip 2015-02-09
路線情報パーツ http://webui.ekispert.com/doc/files/html5/expGuiRail.zip 2014-12-25
範囲探索パーツ http://webui.ekispert.com/doc/files/html5/expGuiRange.zip 2014-12-25
バージョン情報パーツ http://webui.ekispert.com/doc/files/html5/expGuiVersion.zip 2014-12-25
拡張ツールパーツ http://webui.ekispert.com/doc/files/html5/expGuiTools.zip 2014-12-25

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

<script type="text/javascript" src="コンポーネント名.js?key=keycode"></script>

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

また、下記のパーツをご利用の場合はCSSファイルのインクルードも必要になります。
・日付入力パーツ
・駅名入力パーツ
・探索条件パーツ
・経路表示パーツ
・駅時刻表パーツ
・区間時刻表パーツ
・列車時刻表パーツ
・定期払戻計算パーツ

<link class="css" rel="stylesheet" type="text/css" href="expCss/コンポーネント名.css">

ページのエンコードがUTF-8の場合は後述のUTF-8版パーツをご利用ください。
※Shift_JIS、および、UTF-8以外の場合はテキストエディタで変換のうえ、ご利用ください。

コンポーネントの一部にはHTML5の技術を利用しております。
また、マルチタッチへの対応やタップ操作への最適化を行なっている部分もありますので、一部のブラウザでのご利用はサポート対象外となります。
なお、古いブラウザ等に対応させる場合はFlash版をご利用ください。

製品IE6〜7IE8IE9IE10IE11FireFoxChromeSafariiOSAndroid
HTML5版 x △※1 △※1
Flash版 △※2 △※2 x x

※1 路線図は未対応
※2 デスクトップ画面のみ対応

対象環境

OSバージョンブラウザ備考
Windows xp/Vista/7 IE8 追加のライブラリ("json2.js"等)が必要です。また、表示が崩れることがあります。
Windows Vista/7 IE9 追加のライブラリ("json2.js"等)が必要です。
Windows 7/8 IE10/IE11
Windows 8.1 IE11
MacOSX 10.7以降 Safari 最新版のみ対応
Windows/Mac - FireFox 最新版のみ対応
Windows/Mac - Chrome 最新版のみ対応
iOS 5.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

2.基本機能

  1. 日付入力パーツ
  2. 駅名入力パーツ
  3. 探索条件パーツ
  4. ランドマークパーツ
  5. 回数券情報パーツ
  6. 経路表示パーツ
  7. 駅情報パーツ
  8. 路線情報パーツ
  9. 駅時刻表パーツ
  10. 区間時刻表パーツ
  11. 列車時刻表パーツ
  12. 定期払戻計算パーツ
  13. 分割計算パーツ
  14. 範囲探索パーツ
  15. 路線図パーツ
  16. バージョン情報パーツ
  17. 拡張ツールパーツ

3.動作サンプル

下記をクリックすると動作サンプルウィンドウが開きます。

サンプルリンク
画面サンプル
経路探索 http://webui.ekispert.com/doc/sample/html5/sample.html
駅の時刻表 http://webui.ekispert.com/doc/sample/html5/stationTimeTable.html
区間の時刻表 http://webui.ekispert.com/doc/sample/html5/sectionTimeTable.html
列車の時刻表 http://webui.ekispert.com/doc/sample/html5/trainTimeTable.html
定期券の払い戻し計算 http://webui.ekispert.com/doc/sample/html5/repayment.html
定期代/運賃の分割計算 http://webui.ekispert.com/doc/sample/html5/divided.html
経路を利用した時刻表表示 http://webui.ekispert.com/doc/sample/html5/courseTimeTable.html
回数券を利用した経路探索 http://webui.ekispert.com/doc/sample/html5/courseCoupon.html
ランドマークを利用した経路探索 http://webui.ekispert.com/doc/sample/html5/landmarkCourse.html
データ取得サンプル
駅情報の取得 http://webui.ekispert.com/doc/sample/html5/stationInfo.html
路線情報の取得 http://webui.ekispert.com/doc/sample/html5/railInfo.html
範囲探索 http://webui.ekispert.com/doc/sample/html5/stationRange.html
回数券情報の表示 http://webui.ekispert.com/doc/sample/html5/couponList.html
路線図
路線図表示サンプル http://webui.ekispert.com/doc/sample/html5/basic.html
路線図イベント設定サンプル http://webui.ekispert.com/doc/sample/html5/event.html
路線図駅クリック設定サンプル http://webui.ekispert.com/doc/sample/html5/click.html
路線図サイズ調整サンプル http://webui.ekispert.com/doc/sample/html5/table.html
路線図アプリケーションの実例サンプル http://webui.ekispert.com/doc/sample/html5/powerful.html
駅すぱあとの情報
データバージョン取得 http://webui.ekispert.com/doc/sample/html5/dataVersion.html
拡張ツール
JSON/XML変換 http://webui.ekispert.com/doc/sample/html5/xmlCourse.html

4.IE8/IE9での制限

IE8/IE9は標準でJSONに対応していないため、そのままでは利用することが出来ません。

IE8/IE9の場合は"json2.js"等を利用し、JSONへの拡張を行なってください。 なお、IE10/IE11やFIrefox、Chromeは標準で対応していますので、追加は不要です。

5.ページの文字コードについて

設置するHTMLファイルの文字コードがUTF-8の場合、下記のUTF-8版GUIのパーツをご利用ください。

種類ファイル
経路探索
日付入力パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiDateTime.zip
駅名入力パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiStation.zip
探索条件パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiCondition.zip
経路表示パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiCourse.zip
時刻表
駅時刻表パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiStationTimeTable.zip
区間時刻表パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiSectionTimeTable.zip
列車時刻表パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiTrainTimeTable.zip
運賃計算
定期払戻計算パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiRepayment.zip
分割計算パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiRepayment.zip
路線図
路線図パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiMap.zip
ツール
ランドマークパーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiLandmark.zip
回数券情報パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiCoupon.zip
駅情報パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiStationInfo.zip
路線情報パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiRail.zip
範囲探索パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiRange.zip
バージョン情報パーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiVersion.zip
拡張ツールパーツ http://webui.ekispert.com/doc/files/html5/utf8/expGuiTools.zip
Indexへ戻る
Val Laboratory