kintoneで楽々交通費精算！駅すぱあとWebサービス連携ハンズオン

Transcript

1. で楽々交通費精算！ 駅すぱあとWebサービス 連携ハンズオン 2018.08.02 kintone devCamp 2018 株式会社ヴァル研究所 丸山ひかる
2. 自己紹介 丸山ひかる 株式会社ヴァル研究所 テクニカルエバンジェリス ト 主な著書： 『はじめての駅すぱあとWebサービス』 hikaru.maruyama.54 @maruyamahiakru http://hiiiiiiihikaru.hatenadiary.com
4. 本日のアジェンダ • kintoneで交通費精算アプリを作ろう - 概要 • 駅すぱあとWebサービスとは？ • ハンズオン 1. アプリテンプレートを読み込もう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう
5. kintoneで 交通費精算アプリを作ろう https://bit.ly/2mX5VaX
6. 駅すぱあとWebサービス 駅データ、経路検索のWebAPI 駅すぱあとが持つ機能を WebAPIとして提供 • • • • 技術的なポイント RESTfu（風） レスポンスはXML or JSON リファレンスはWebで公開 サンプルはGithubで公開 • • 利用シーン 乗換案内サービス 旅費交通費精算システム • • 選べる2つのプラン 無料で使えるフリープラン 全ての機能が使えるスタンダードプラン
7. 駅データ、経路検索のWebAPI 駅すぱあとWebサービス 駅すぱあとが持つ機能を WebAPIとして提供 技術的なポイント 利用シーン • RESTfu（風） • レスポンスはXML or JSON • 乗換案内サービス • 通勤費管理システム • リファレンスはWebで公開 • 旅費交通費精算システム • サンプルはGithubで公開 今回のハンズオンでは スタンダードプランの機能を利用します 駅すぱあとWebサービスのスタンダードプラン は 90日間無料でお試しできま す お申し込みはこちら↓ https://ekiworld.net/trial/index.php?case=6
8. 本日のハンズオン内容 1. 自分の環境でアプリが動く状態にしよう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう 余裕のある人は4までやってみよう！
9. 本日のハンズオン内容 1. 自分の環境でアプリが動く状態にしよう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう 余裕のある人は4までやってみよう！
10. 1. 自分の環境でアプリが動く状態にしよう https://bit.ly/2v7wA9J ZIPファイルのダウンロード
11. 1. 自分の環境でアプリが動く状態にしよう ZIPファイルのダウンロード handson/ ├── 1 │ ├── ekispert.js │ └── 交通費申請アプリ.zip ├── 3 │ ├── ekispert.js │ └── expGuiCondition │ │ │ ├── expCss │ └── expGuiCondition.css ├── expGuiCondition.js │ └── expImages └── 4 ├── ekispert.js ├── ekispertDetail.js └── 交通費申請詳細アプリ.zip ZIPファイルの中身の ディレクトリ構成です
12. 1. 自分の環境でアプリが動く状態にしよう ZIPファイルの構成 handson/ ├── 1 │ ├── ekispert.js │ └── 交通費申請アプリ.zip ├── 3 │ ├── ekispert.js │ └── expGuiCondition │ │ │ ├── expCss │ └── expGuiCondition.css ├── expGuiCondition.js │ └── expImages └── 4 ├── ekispert.js ├── ekispertDetail.js └── 交通費申請詳細アプリ.zip 次の工程で 「交通費申請アプリ.zip」 を利用します
13. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう
14. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう 「交通費申請アプリ.zip」 を読み込みます
15. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう
16. 1. 自分の環境でアプリが動く状態にしよ う 挙動の確認 色々動かしてみて この動画と同じような挙動をしている か 確認してみてください https://bit.ly/2n0IOwo
17. 1. 自分の環境でアプリが動く状態にしよう 補足 ブラウザの開発者ツール （WinならF12, macOSならOption + Command + i） を 立ち上げた状態でアプリを動かすと・・・ なにやら画像が読み込まれていないというエラーが
18. 1. 自分の環境でアプリが動く状態にしよう 補足 原因： 「HTML5インターフェースサンプル」では、 CSSから利用する画像を相対パスで読み込んでいる。 kintoneでは画像ファイルのアップロードができないため読み込みエラーとなる 対策： 画像ファイルを含むファイル群をホスティングして URL指定でkintoneからアクセスする ハンズオン中は特に対策せず、このまま進めちゃいますね ！ 実際にアプリを利用される際はご検討ください
19. 本日のハンズオン内容 1. 自分の環境でアプリが動く状態にしよう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう 余裕のある人は4までやってみよう！
20. 2. 定期券を利用した運賃計算をしよう 定期経路を割り当てる 通勤定期券が割り当てられた状態の金額を 出して欲しいですよね
21. 2. 定期券を利用した運賃計算をしよう APIの仕様 経 路 探 索 API の リ ク エ ス ト 例 ： https://api.ekispert.jp/v1/json/search/course/ extreme? key=ajawaANhL9RWERyT&viaList=22905:22884& date=20180720&searchType=plain
22. 2. 定期券を利用した運賃計算をしよう APIの仕様 https://api.ekispert.jp/v1/json/search/course/ extreme?key=ajawaANhL9RWERyT&viaList=22905:228 84&date=20180720&searchType=plain ブラウザから ア クセスしてみよう
23. 2. 定期券を利用した運賃計算をしよう APIの仕様 ブラウザから ア クセスしてみよう https://api.ekispert.jp/v1/json/search/course/extreme? key=xxx&viaList=22905:22884&date=20180720&searc hType=plain JSONデータのレスポンスが見づらい？ kintoneアプリ内で実際に叩いているのはさっきのURLですが XMLデータの方が見やすいかもなので ここからはXMLデータで説明しますね ※データフォーマットが異なるだけで中身は同じです https://api.ekispert.jp/v1/xml/search/course/extreme? key=ajawaANhL9RWERyT&viaList=22905:22884&date=2 0180720&searchType=plain
24. 2. 定期券を利用した運賃計算をしよう APIの仕様 データフォーマット： XML or JSONが指定できます APIの機能： 交通費精算アプリの裏側では 駅簡易情報API(/station/light) 経路探索API(/search/course/extreme) などが利用されています https://api.ekispert.jp/v1/xml/search/course/extreme? key=ajawaANhL9RWERyT&viaList=22905:22884&date=20180 720&searchType=plain クエリパラメータ： key 駅すぱあとWebサービスのアクセスキー viaList 出発地、経由地、到着地 date 探索日（YYYYMMDD） searchType 探索種別
25. 2. 定期券を利用した運賃計算をしよう APIの仕様 https://api.ekispert.jp/v1/xml/search/course/extreme? key=ajawaANhL9RWERyT&viaList=22905:22884&date=20180 720&searchType=plain 出発地、経由地、到着地をそれぞれカンマ「:」で区切ります。 「22905」は八王子駅の駅コード、「22884」は日本橋(東京都)駅の駅コードを 表しています。viaListには、駅コード以外にも、駅の名称、緯度経度、住所などを 指定することができます。 駅すぱあとWebサービスでは、ダイヤデータを使う探索（ダイヤによる探索）と、 平 日日中の平均的な所要時間を利用した探索（平均待ち時間による探索）の 二つ の探索方法があり、それをさらに細分化したものが探索種別となります。
26. 2. 定期券を利用した運賃計算をしよう APIの仕様 https://api.ekispert.jp/v1/xml/search/course/extreme? key=ajawaANhL9RWERyT&viaList=22905:22884&date=20180720 &searchType=plain&assignTeikiSerializeData=VkV4QaECpzzHAQED pgEz7vsEk8EBpVjDwQGlWNXBAaVYjwWSwwEBA6UBNQSlWNXEA QECAQOkbQSlWI8HksUBpVjDAqVY1QMABAAFAMUBpVjVAqVYjw MBBAEFAAgBCgE*— f3a068ec4c8bda86d18d7209feb5f7637dc3bd8b--0--95 assignTeikiSerializeDataパラメータに 定期経路シリアライズデータを指定すれば 定期券を利用した運賃計算が行われます。
27. 2. 定期券を利用した運賃計算をしよう 定期経路シリアライズデータの取得方法 定期経路シリアライズデータは、経路探索APIのレスポンスに付与されるの で 経路探索APIで通勤定期券の経路を検索します 例えば、下北沢ー新宿ー高円寺の通勤定期券を持っているとしたら、 以下のリクエストになります https://api.ekispert.jp/v1/xml/search/course/extreme? key=ajawaANhL9RWERyT&viaList=22723:22741:22671&searchT ype=plain 駅情報API(/station)や駅簡易情報API(/station/light)で 駅 コードが取得できます
28. 2. 定期券を利用した運賃計算をしよう ResultSet.Course.Teiki.SerializeData の値 が、定期経路シリアライズデータです 定期経路シリアライズデータの取得方法
29. 2. 定期券を利用した運賃計算をしよ う ResultSet.Course.Teiki.SerializeData の値 が、定期経路シリアライズデータです 定期経路シリアライズデータの取得方法 「下北沢--小田急小田原線--新宿--ＪＲ中央線快速--高円寺」 の、定期経路シリアライズデータです VkV4QaECp4fHAQEDpgEz70EEk8EBpVjDwQGlWN XBAaVYjwWSwwEBA6UBNQSlWNXEAQECAQOkbQ SlWI8HksUBpVjDAqVY1QMABAAFAMUBpVjVAqVY jwMBBAEFAAgBCgE*--55724d1aa013e2293e0cd5 1584e4ef2c62ce3724--0--95
30. 2. 定期券を利用した運賃計算をしよう 定期経路を割り当てる 交通費申請アプリは 「通勤経路」項目の値をassignTeikiSerializeDataパラメータの値として 渡 すように実装しています。 先ほど取得した定期経路シリアライズデータを入力したのち、 今まで通りサブテーブルに明細を追加してみましょう
31. 2. 定期券を利用した運賃計算をしよう 定期経路を割り当てる
32. 2. 定期券を利用した運賃計算をしよう 定期経路が割り当てられた 金額が反映されました！ 定期経路を割り当てる
33. 2. 定期券を利用した運賃計算をしよう 補足 ハンズオンでは簡易的に、レコードに直接定期経路シリアライズデータを 入力していますが、 例えば従業員の名簿を管理しているアプリと連携すれば もっと便利になる予感が
34. 2. 定期券を利用した運賃計算をしよう 補足 実際に定期経路シリアライズデータを利用した 定期経路割り当てを行う場合は、 定期経路の表示用文字列をセットで保存してください！ 定期経路シリアライズデータが経路を 再 現できなくなった場合に必要になります。 詳しくはこちらをご確認ください http://docs.ekispert.com/v1/dictionary/teiki-serialize-data/
35. 本日のハンズオン内容 1. 自分の環境でアプリが動く状態にしよう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう 余裕のある人は4までやってみよう！
36. 3. 探索条件設定ボタンを追加しよう 探索条件設定ボタン 例えばこんな感じで 有料特急の利用可否とか 乗り換え時間の設定とか 色々と経路探索を行う条件を 設定したいですよね
37. handson/ ├── 1 │ ├── ekispert.js │ └── 交通費申請アプリ.zip ├── 3 │ ├── ekispert.js │ └── expGuiCondition │ │ │ ├── expCss │ └── expGuiCondition.css ├── expGuiCondition.js │ └── expImages └── 4 ├── ekispert.js ├── ekispertDetail.js └── 交通費申請詳細アプリ.zip 次の工程で 「ekispert.js」と 「expGuiCondition」ディレクトリを 利用します 3. 探索条件設定ボタンを追加しよう ZIPファイルの構成
38. 3. 探索条件設定ボタンを追加しよう ファイルの読み込み expGuiCondition.js を 選択 expGuiCondition.css を 選択
39. 3. 探索条件設定ボタンを追加しよう 1. 元々置いてある ekispert.jsファイルを「×」ボタンで削除 2. /path/to/handson/3/ekispert.js フ ァイルを指定 ファイルの読み込み
40. 3. 探索条件設定ボタンを追加しよう ファイルの読み込まれる順番に注意！ 「ekispert.js」が最後に読み込まれるように ファイルの読み込み
41. 3. 探索条件設定ボタンを追加しよ う このような状態になっていること を 確認したら、保存ボタンを クリックしてください ファイルの読み込み
42. 3. 探索条件設定ボタンを追加しよう アプリの更新 最後にアプリを更新して 設定は完了です
43. 3. 探索条件設定ボタンを追加しよう 挙動の確認 探索条件設定ボタンが 表示されました！
44. 補足 handson/ ├── 1 │ ├── ekispert.js │ └── 交通費申請アプリ.zip ├── 3 │ ├── ekispert.js │ └── expGuiCondition │ │ │ ├── expCss │ └── expGuiCondition.css ├── expGuiCondition.js │ └── expImages └── 4 ├── ekispert.js ├── ekispertDetail.js └── 交通費申請詳細アプリ.zip このファイル群は一体何？ 3. 探索条件設定ボタンを追加しよう
45. 3. 探索条件設定ボタンを追加しよう 補足 「HTML5インターフェースサンプル」と呼ばれ る HTMLとJavaScript、CSSで 実装された画面をサンプルとして提供しているものです。 こ ちらのコードを使うことで短時間で簡潔に実装できます。 https://github.com/EkispertWebService/GUI
46. 本日のハンズオン内容 1. 自分の環境でアプリが動く状態にしよう 2. 定期券を利用した運賃計算をしよう 3. 探索条件設定ボタンを追加しよう 4. 経路を再現する機能を追加しよう 余裕のある人は4までやってみよう！
47. 4. 経路を再現する機能を追加しよう 経路の再現 承認者として ・定期券が適用されているか ・有料特急が適切に使用されている か など、確認したいですよね
48. handson/ ├── 1 │ ├── ekispert.js │ └── 交通費申請アプリ.zip ├── 3 │ ├── ekispert.js │ └── expGuiCondition │ │ │ ├── expCss │ └── expGuiCondition.css ├── expGuiCondition.js │ └── expImages └── 4 ├── ekispertDetail.js ├── ekispert.js └── 交通費申請詳細アプリ.zip 次の工程で 「ekispert.js」と 「交通費申請詳細アプリ.zip」 を利用します 4. 経路を再現する機能を追加しよう ZIPファイルの構成
49. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう
50. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう 「交通費申請詳細アプリ.zip」 を読み込みます
51. アプリテンプレートの読み込み 1. 自分の環境でアプリが動く状態にしよう
52. 4. 経路を再現する機能を追加しよう このアプリのIDを あとで使います アプリテンプレートの読み込み
53. 4. 経路を再現する機能を追加しよう 交通費申請アプリのフォーム修正
54. 4. 経路を再現する機能を追加しよう 交通費申請アプリのフォーム修正 フィールドタイプ ルックアップ フィールドコード 経路の詳細 関連付けるアプリ 交通費申請詳細 コピー元のフィールド レコード番号
55. 4. 経路を再現する機能を追加しよう JavaScriptファイルの編集 1. /path/to/handson/4/ekispert.jsファイルを エ ディタ等で開きます (function($) { "use strict"; // 駅すぱあとWebサービスのアクセスキ ー var ekispertAccessKey = // 交通費申請詳細アプリID var detailAppId = ''; 'ajawaANhL9RWERyT'; 2. 交通費申請詳細アプリの アプリIDを入力します 3. ファイルを保存
56. 1. 元々置いてある ekispert.jsファイルを「×」ボタンで削除 2. 先ほど保存したekispert.js ファイルを指定 ファイルの読み込み 4. 経路を再現する機能を追加しよう
57. 4. 経路を再現する機能を追加しよう アプリの更新 最後にアプリを更新して 設定は完了です
58. 4. 経路を再現する機能を追加しよう 挙動の確認 各経路の詳細が 見れるようになりました！
59. 4. 経路を再現する機能を追加しよ う 補足 この値は一体何に使われているのか ？
60. 4. 経路を再現する機能を追加しよう 補足 経路を再現させるために、 経路探索API(/search/course/extreme)の レスポンスのJSONデータを保存する必要があります。 経路を再現できる「経路の再現／定期券・指定列車利用API(/course/edit)」では、 あくまでも一時的な再現を想定して作られています。 今回のように、承認者が経路を確認するような場面では JSONデータを丸々保存する方法が確実に経路を再現することができます。 ※ダイヤ情報を保持する行為は駅すぱあとWebサービスの規約に違反しますので、 ダイヤによる探索での経路探索結果は保持することはできません。 ご注意ください。
61. ハンズオン お疲れ様でした
62. さいごに 本日作った内容は サンプルとしてGithubで公開する予定です。 https://github.com/hmaruyama/seisan-by- ekispert- for-kintone
63. さいごに ハンズオンで作ったアプリを さら にカスタマイズしたい場合は 駅すぱあとWebサービスのスタンダードプランは 90日間無料でお試しできます！ https://ekiworld.net/trial/index.php?case=6 駅すぱあとWebサービス 開発者向けドキュメント http://docs.ekispert.com/v1/ HMTL5インターフェースサンプル ドキュメント https://github.com/EkispertWebService/GUI/wiki