はじめに
この記事では、こちらの記事で作成したCloud Integration (CPI) -> Open Connector -> Google Driveの連携をAppGyverで作成したアプリケーションから呼び出します。AppGyverはコミュニティ版を使用します。
※シリーズ先頭の記事はこちら
動作
"Take a picture"を押すと、カメラが立ち上がります。
写真を撮るとアップロードが始まります。アプロード中はボタンが無効化され、アップロード中であることを示すメッセージが表示されます。
アップロードが完了するとメッセージが表示されます。
Google Driveに撮った写真が格納されます。
実装
アプリの動作と使用している変数は以下のようになります。
以下はPage Variablesの定義です。
1. トークン取得
CPIのフローを呼ぶ際に、ヘッダにトークンを設定する必要があります。トークンを取得するためのAPIをDataとして定義します。
Resource URL: Process Integrationのインスタンスのサービスキーに設定されたtokenurl
（参考）Process Integrationのインスタンス
GET RECORD (GET)を選択し、以下を定義します。
| セクション | Key | Value |
|---|---|---|
| HTTP Header | content-type | application/x-www-form-urlencoded |
| Query parameter | grant_type | client_credentials |
| client_id | サービスキーに設定されたclientid | |
| client_secret | サービスキーに設定されたclientsecret |
テストを実行し、返ってきた値をもとにスキーマを定義します。
スキーマは以下のようになります。
スキーマを利用してData Variableを登録します。トークンは5分ごとに再取得するようにしています。
2. ボタン押下時の動作
番号を振ったロジックについて、以下で解説します。
2.1. アップロードデータ作成
Page Variableで定義した"photo"というオブジェクトに撮影した写真の情報と、後続のUpload filesで必要なプロパティ（UploadUrl）をセットします。
設定値は以下のようになっています。
| 項目 | 設定値 | 備考 |
|---|---|---|
| mimeType | image/jpeg | Take photoのアウトプットにmimeTypeがあるが、なぜか値が設定されないため固定値で設定 |
| name | "AppGyver_" + NOW("YYYYMMDDHHmmss") + ".jpg" | Formulaで設定 |
| path | Take photoのアウトプットの"path" | |
| size | Take photoのアウトプットの"size" | |
| uploadUrl | CPIのiFlowのエンドポイント |
2.2. アップロード中の表示
アップロード中、ボタンを非活性にし、"Upload in progress..."というメッセージを表示します。
このための事前設定として、ボタンのDisabledプロパティに以下の式をバインドします。
IS_EQUAL(pageVars.uploadInProgress, "true")
uploadInProgressはPage Variableで定義したテキスト型の変数です。Page Variableにbooleanの型がないためDisabledプロパティに直接バインドできず、IS_EQUALの式を使ってbooleanに変換しています。
同様に、"Upload in progress..."のVisibleプロパティにも同じ式をバインドします。
②の処理ではuploadInProgressにtrueを設定します。これにより、ボタンのDisabled、およびメッセージのVisibleプロパティがtrueになります。
2.3. アップロード
Upload filesというファンクションをインストールして使用します。
設定値は以下の通りです。
| 項目 | 設定値 | 備考 |
|---|---|---|
| HTTP method | POST | |
| Files to upload | [pageVars.photo] | ファイルデータを配列で渡す |
| Headers | {"Authorization": "Bearer " + data.Token1.access_token, "filename": pageVars.photo.name, "Content-Type": pageVars.photo.mimeType} |
filename, Content-Typeは前回作成したiFlowで必要なパラメータ |
2.4. アップロード中の表示終了
アップロードが完了したら、ボタンを活性に戻し、メッセージを非表示にします。そのためuploadInProgressにfalseを設定します。
2.5. アラート表示（正常終了）
正常終了の場合、アップロードされたファイル名をアラートで表示します。Dialog titleに以下の式を設定します。
"Uploaded file '" + pageVars.photo.name + "'!"
2.6. アラート表示（異常終了）
異常終了のアラートは、Upload filesの3つ目のアウトプットからつながっています。
Dialog messageにUpload filesのアウトプットであるErrorオブジェクトのrawErrorを設定します。
