Unifinityでデジタルサイネージを作る2

テックポエム

弊社には会議室が3つあるのですが、会議の時間や内容は覚えているけど、場所はどこだったかな…、といったことが良く発生します。
そこで、席を立って移動しながら、Googleカレンダーを開いて場所を確認したりしているのですが、前回作ったデジタルサイネージに「会議実の状況」を表示できれば、この動作が必要なくなるので、ちょっと便利にできそうです。

弊社は会議室の予約状況はGoogleCalendarにて管理しているので、今回はGoogleCalendarAPIとUnifinityを連携して、会議室の状況を表示するアプリを作っていこうと思います。

GoogleCalendarAPIを使う


GoogleCalendarAPIを使うには、事前に下記2つの処理が必要となります。
一つ目はcodeの取得。これはよくある「アプリが下記のデータにアクセスしようとしています。許可しますか?」という認証を行う必要があります。
二つ目はAccessTokenの取得。このAccessTokenを利用してREST通信を行うことで、GoogleCalendarAPIを活用することが可能となります。

それでは、まずcodeの取得から行っていきます。認証画面を表示し、ユーザーに許可を求める必要がありますが、これはUnifinityでは、「ダイアログ/内部ブラウザー表示」とコールバックURIを使うことで可能です。

signage2-1.png

内部ブラウザーのURIは「https://accounts.google.com/o/oauth2/auth?response_type=code&client_id={クライアントID}&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https%3a%2f%2fwww%2egoogleapis%2ecom%2fauth%2fcalendar%2eevents」になります。
クライアントIDは、GoogleAPIs( https://console.developers.google.com/apis/dashboard
)でGoogleClanedarAPIを有効にし、「認証情報の作成」メニューで、OAuth2.0のクライアントIDを作成することで得ることができます。

コールバックURIは「https://accounts.google.com/o/oauth2/approval」です。
内部ブラウザーの遷移先が、このコールバックURIにマッチする場合にダイアログが自動で閉じ、ロジックの結果としてリダイレクト先のURIを得ることができます。

リダイレクトURIには「response」として「code%3D{code}%26scope~~~」というデータが入っております。この「code」の部分を読み取るため、「文字列関数/正規表現」や「文字列関数/置換」ロジックを用いて、「code」を取り出します。

これで第一段階が完了です。

次に、この「code」から「AccessToken」の取得を行います。

「AccessToken」の取得はPOST通信を行います。

signage2-2.png

まずパラメーター準備します。

signage2-3.png

Unifinityでは「ディクショナリー」に0から始まる連番のキーを使うことで、GET/POSTのパラメーターを作ることができます。今回は、キー「0」に「Content-Type:application/x-www-form-urlencoded」を設定します。

signage2-4.png

そして「ネットワーク/POST3」ロジックを使って、AccessTokenの取得を行います。
client_secretは、クライアントID生成時に同時に生成される為、そちらを用います。その他のパラメータは固定です。

この通信の結果としてJSONでAccessTokenが得られます。ただし、この有効期限は1時間(3600秒)となっております。AccessTokenを継続利用するためには、リフレッシュを行う必要があります。そのため、リフレッシュの通信に使用するRefreshTokenも記録しておきます。

signage2-5.png

こうして、「AccessToken」が得られたので、後は使用したいGoogleAPIを呼び出せば、自由に結果を得ることができます。

signage2-6.png

GoogleCalendarAPIの通信パラメータとして、AccessTokenを入れる必要があるので、「Authorization: Bearer {AccessToken}」という文字を作成し、これをディクショナリーのキー「0」にヘッダーを生成し、GET/POSTで使用いたします。

AdventCalendar3.png
こうしてGoogleCalendarから取得したデータを使うことで、会議室の状況を画面に表示することができます。タイマーで定期的にデータを取得するようにすることで、ほぼリアルタイムに情報を表示することが可能です。招待したメンバーやメモ欄など、Webの画面で閲覧できる情報がほとんどとれるようなので、UIを工夫すればいろいろな情報を表示することができそうです。

signage2-8.png

なお、リフレッシュを行いAccessTokenを更新するには、「grant_type」を「refresh_token」にして、RefreshTokenを送れば、再認証せずに新しいAccessTokenを得ることができます。これで、再度内部ブラウザーで認証を行うことなしに、新しいAccessTokenを得て、通信を続けていくことができます。