Gluegent Flow活用例：申請データにGoogleマップURLを付与するには？
- Gluegent Flow
クラウド型ワークフローであるGluegent FlowはG Suite(旧Google Apps）やOffice 365と連携し、クラウド上で様々なワークフローを実現できるサービスです。 Gluegent Flowで作成可能なワークフローのテンプレート（以降、モデル）では、一般的な文字・数値等の入力フォームの他、カスタムスクリプトにより入力値の変換・チェックなども定義することが可能です。そのようなモデルの定義について、申請時に入力されたデータを元に URL を生成するにはどうすればよいか？というご質問を受けることがあります。 そこで今回は、Gluegent Flowの機能を使って、ユーザが入力した住所を元に Google マップ の住所を生成し、申請画面に出力する方法をご紹介します。
GoogleマップURL生成の実現方法
Google マップ の検索画面で住所を入力したことがある方はご存知かもしれませんが、以下のように固有のURLの後ろに検索文字列が表示されます。
https://www.google.co.jp/maps/place/東京都/...(以下略)
WebブラウザのURLロケーションバーを確認してみると「東京都」のように表示されていますが、実URLではURLエンコードされています。 例えば、下記の URL にアクセスしてみましょう。
すると、WebブラウザのURLロケーションバーでは以下のように表示されるかと思います。https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E9%83%BD
この URLエンコードをGluegent Flowで実現するには、「カスタムラベル」と「入力フォームの値アップデート自動処理」を使います。https://www.google.co.jp/maps/place/東京都
入力フォーム項目の定義
では、実際にモデル編集画面で入力フォーム項目を追加していきましょう。 まずはモデル名を「Googleマップ」とし、「入力フォーム」タブを選択し、入力フォーム項目を定義していきます。 1つ目は住所を入力するための項目を定義します。この項目のデータ種別は単行テキストに設定します。その他に設定することは特にありません。
続いて、入力された住所を変換するための項目「encode」を定義します。データ種別はカスタムラベルにします。
スクリプト欄にはJavaScript の「 encodeURIComponent 」を使い、以下のように定義します。
return encodeURIComponet( ${住所} );
＜経路ごとの表示設定＞
自動処理の設定
続いてGoogle マップ用 URLを組み立てる処理を追加します。
まず「経路」タブを選択します。次に経路：申請の「申請」ボタンの自動処理として「入力フォームの値アップデート自動処理」を追加・定義します。
この自動処理により、GoogleマップのURLを組み立て、特定の入力フォーム値として保存することができます。 
「入力フォームの値アップデート自動処理」の更新内容欄には以下を指定します。
https://www.google.co.jp/maps/place/${endode}
以上までの設定が完了したモデルを保存し、実際に申請してみましょう。
以下のスクリーンショットでは住所に「東京都港区南麻布」と入力し、申請されたものを経路：承認待ちで表示したものです。GoogleマップURLが表示できていることが確認できます。
以上、Gluegent FlowでGoogleマップのURLを付与する方法をご紹介しました。旅費交通費申請や出張・宿泊申請など住所が関わるワークフローは色々ありますが、その申請の中に上記のようなGoogleマップURLを表示できれば、承認者・決裁者がGoogleマップにより効率的に確認できるようになります。 是非参考にしてみてください。
