クエステトラと駅すぱあとを連携してみた。

最近は、SaaSで提供される様々な経費システムがあるわけですが、多くのサービスが交通費精算をする際に、駅すぱあとなどの路線検索システムと連動していると思います。

当社が利用しているワークフローシステムであるクエステトラは、ワークフローがメインということもあり、駅すぱあとなどの路線検索システムとは連携をしていません。当社の場合でも、交通費精算をする場合には、別途、路線検索システムなどを使い料金を確認してもらう必要がありました。ここは、今から７年前の開発当初から、いつか駅すぱあとなどのシステムと連携をさせたいという思いを持っていました。

なかなかきっかけが無かったのですが、既に発表されているように当社は、10/1でサイバートラスト株式会社と合併し、社名がサイバートラスト株式会社に変更となります。となると、ワークフローシステムも統合をする必要が出てくるわけです。現在CTJ社が利用しているシステムでは、交通費精算が駅すぱあとと連携しているということもあり、じゃあ、なんとかクエステトラを駅すぱあとと連携させようとうことになりました。
（なりました。とは言っても、結局私が自分で開発するので、私自身のモチベーションだけの話ですが）

駅すぱあとは、REST APIを持っているので、クエステトラと連携することができることは、論理上は可能はすぐに分かりました。ただ、クエステトラ社にも確認すると、このクエステトラ＋駅すぱあと連携は誰もやったことがないということでした。（また、先人の道を歩くのね。と思った次第です）

やりたいことは、シンプルで、出発地と到着地を入力すると路線経路と料金が出て来る。というものです。こんなイメージですね。

 ただ、ここにいきつくまでに、色々なハードルがありました。

 クエステトラは、スクリプトタスクというJavaScriptを動作させることのできるタスクがあります。ただ、今回は、テーブル型のデータを操作しないといけないために、Javascriptのプログラムを全て「説明」のところに記載していく必要があります。

ここがすごく狭い（本来は、データ項目の説明文を記載するところであって、長文のJavascriptを記載する場所でないから）ために、利用しづらいというのはあります。

そのため、私はG Suiteとの連携がやりやすい、Editey(http://www.editey.com/)を使っています。このツールも完全日本語対応していないので、ソースコードにコメントを日本語で入力しようとすると二重に文字が登録されたりおかしいところはありますが、Javascript以外にもXMLなども対応しており便利なため使っています。

開発の流れは、「Editeyでソースを書く→クエステトラの説明にコピペする→フォームレビューで動作させる→エラがー無いかChromeのコンソールでチェックする。」という形で、一つのツールの中で開発が完結しないために、デバックする時が少々大変です。今回は、全部で1000行程度のJavascriptのソースコードになったため、開発の流れに時間がかかるのは少々痛いところです。

駅すぱあとのAPIは、XMLとJSON形式で戻り値を返してくれます。Javascriptを使うので（というか私の経験が多いので）、JSON形式を選択しました。

一番重要なAPIは、

GET /v1/{format}/search/course/extreme

になります。これで、路線検索を行います。{format}の部分がxmlまたはjsonとすることで、各々の形式の検索結果が得られます。

この検索結果の要素構成は、マニュアルにあるのですが、これは少々わかりづらいです。必要なことは記載されているのですが、要素構成のうち、路線名、駅名、料金が別々の配列に存在しているために、最初は、その関係性が非常に掴みづらかったです。また、検索結果の路線が一つの場合と複数の場合で配列になったりならなかったりするのですが、その説明が記載されていなかったので、理解するのに少々時間を要しました。

ただ、このあたりは、駅すぱあとのサービス提供会社である株式会社ヴァル研究所の方にも親切にサポートを頂きながら、またサンプルプログラムのご説明もいただき、理解を深めました。親切にサポート頂いたヴァル研究所の皆さん本当にありがとうございました。

 クエステトラは、jQueryを利用することができるので、細かいデコレーションや値に合わせた表示の変更などは、jQueryでプログラムを書いて、それを「説明」に入れておくことになります。

ただ、これまでは、テーブル型データをjQueryで操作することはやっておらず、クエステトラ社のサイトにも、どう操作するかは記載されていませんでした。

いつも親切に対応してくれる営業のFさんに問い合わせてみると、どうもかなりややこしくて、クエステトラ社においても、テーブル型データのjQueryによる操作はやったことがなかったようです。

何をやりたかったかというと、「やりたいこと」のセクションにある路線情報と料金が表示されたら、料金部分をハイライトして、その値をテーブル型の交通費のデータカラムに挿入したい。ということです。「テーブル型データの各カラムへのデータ挿入」、これが、なかなかできなかったのです。

今回もFさんと二人で、クエステトラが吐き出す、HTMLと格闘しながら、各要素などを見つけながら方法を探しました。最終的には、Fさんがみつけた、「トリガーを発砲する＋２つの要素に値を入れる」という方法で値を挿入することができました。Fさん、２ヶ月に渡りありがとうございました。

• インクリメンタルサーチ
  駅名のところに文字を入力すると駅候補がリストされるインクリメンタルサーチは、実装ができていません。ヴァルさんのサイトには、サンプルプログラムがあり、そこにはインクリメンタルサーチが実装されています。GitHubにソースコードも公開されていて、実装方法は、これらを読むとわかります。
  クエステトラに組み込む場合には、テーブル型データの取扱い（トリガーのハンドリング）が難しくて、実装するのがかなり難しいです。これができたら完璧なんですけど、、、アイディアを変えないと実装できそうにありません。
• 定期区間の対応
  こちらもヴァルさんのサイトにサンプルプログラムが提供されています。こちらは、クエステトラでも少し時間をかければ対応できるアイディアがあるのですが、私の時間の都合で今回はインプリメントする時間がなく、対応できませんでした。

今回は、昨年実装したKintone+box+Questetraに続いて、新しいREST APIとクエステトラを連携させることにチャレンジして、1000行程度のJavascriptを書きました。その中で、やはり私は、プログラミングが好きだなーと実感しました。今年で49歳になりましたが、これからもずっと、なにがしらかの言語でプログラムは書いていこうと思います。でも、一番重要なのは、自分が作ったプログラムが誰かの役に立つことなので、そういうプログラムをこれからも書いていこうと思います。

 私の要望にお付き合い頂いた、ヴァル研究所とクエステトラ社の皆さん、サポート頂き本当にありがとうございました。