kintoneと連携したモバイルアプリをUnifinityで作成する方法について、ご紹介いたします。
今回は、kintoneのREST APIを利用して、kintoneにファイルをアップロードする方法をご紹介します。
以前の記事で紹介したユーザー認証は必要となりますので、適宜ご確認ください。
解説で使用しているkintoneのアプリ・Unifinityのサンプルプロジェクトを以下よりダウンロードすることができます。ぜひご活用ください。
【kintone】ファイルアップロードアプリ
【Unifinity】kintoneファイルアップロードアプリ
作成するアプリの概要
Unifinityで写真を撮影し、その画像ファイルをkintoneの該当フィールドにアップロードするモバイルアプリを作成します。
kintoneの設定
今回は、下記の項目を入力するアプリを用意し、文字列と添付ファイル（画像ファイル）をモバイルアプリから登録します。
連携するためには、kintoneのサブドメイン名・アプリID・各フィールドのフィールドコードが必要となります。
・ サブドメイン名・アプリIDは、アプリ接続時のURLの以下の部分から確認できます。
・各フィールドのフィールドコードは、アプリの設定画面から確認できます。
Unifinityの連携設定
kintoneへ文字列と画像ファイルを登録しますが、今回は画像ファイルを登録する方法を中心に、画面作成・処理作成を説明していきます。
文字列登録の方法はこちらの記事をご参照ください。
※ 基本的なUnifinityの操作は、こちらのチュートリアル動画をご覧ください。
0. 準備
前回の記事で紹介したユーザー認証をアプリ内にご準備ください。
また、kintoneの設定で確認したサブドメイン名を、プロパティのグローバル変数に設定します。
1. 画面作成
① 文字列を入力するテキストボックス、写真を撮影し表示するボタンを配置します。
また、写真を撮影するボタンについては、分かりやすいようデザインタブの画像からカメラのイメージをボタンに表示させています。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です（2.の処理作成後、更新する箇所があります）。
2. 処理作成
写真撮影の処理とkintoneへデータを送信する処理を解説します。
【写真撮影】
撮影ボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① 写真撮影
| #2 | 「デバイス/カメラ起動」を使って、端末のカメラで撮影を行います。 なお、こちらで画像幅・高さを設定することができ、今回はファイルサイズ圧縮のために設定しております。 |
| #3 | 「コントロール/内容セット」を使って、#2で撮影した内容を、データ送信画面のカメラ起動ボタンに表示させます。 |
② 画像ファイルのファイル名生成
| #5 | 今回はファイル名を「撮影日.png」としたいと思います。 まずは「日時/現在日時」を使い、端末の現在日時を読み込みます。 |
| #6～10 | #5の結果から、年・月・日・時・分を以下のロジックを使い、取得します。 「日時/年取得」「日時/月取得」「日時/日取得」「日時/時取得」「日時/分取得」 |
| #11 | #6～10の結果を基に「文字列関数/連結」を使い、ファイル名を作成します。 |
③ 画像ファイルの作成
| #13 | 「ファイル/書き込み」を使って、#11で作成したファイル名に、#2で撮影した結果を書き込みます。 ここで作成されたファイルは、端末のUnifinityのアプリ内に保存されます。 |
| #14 | 「変数/環境変数設定」を使って、任意の環境変数（今回は"kintone写真"という変数名を設定）に、#11で作成したファイル名を設定します。 ※ファイル名を指定してファイルを送信するため、#13でないことにご注意ください。 |
【kintoneへのデータ送信】
kintoneへのデータ送信ボタンを押下した際の動作を作成します。
kintoneへファイルをアップロードし、レコードとして登録するには、
（1）kintoneへファイルをアップロードし、ファイルキーを取得
（2）該当レコードに（1）のファイルキーを送信し、登録
という手順を行う必要があります。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
| #2 | 「変数/グローバル変数取得」を使って、グローバル変数に設定したkintoneのサブドメインを読み込みます。 |
② ユーザー認証情報の呼び出し
| #4 | 「データベース/取得」を使い、DBに記憶された「ユーザー認証情報（X-Cybozu-Authorization:●●●）」を読み込みます。（0. 準備で記載したユーザー認証をアプリ内にご準備いただき、そちらのDBを指定してください） |
③ ファイルのアップロード
| #6 | 「変数/環境変数取得」を使って、"kintone写真"を呼び出し、写真を保存したファイル名を読み込みます。 |
| #7 | 「文字列関数/連結」を使い、kintoneで決められているRESTAPIのURI（https://(サブドメイン名).cybozu.com/k/v1/file.json）を生成します。 今回は、サブドメイン名を呼び出した#2の内容と「/k/v1/file.json」とを連結しています。 |
| #8 | 「ネットワーク/HTTPリクエスト」を使い、kintoneにデータを送信します。 以下のように、各項目を設定してください。 |
| #9,10 |
ファイルアップロード後、「ファイル/削除」を使い画像ファイルを削除するとともに、「変数/環境変数削除」を使い環境変数”kintone写真"を削除します。 |
④ ファイルキーの取得
| #12 | #8でkintoneにレコードを登録したレスポンスの中にファイルキーが含まれているため、レスポンスからこれを抽出します。 まずは#8のレスポンスから「ディクショナリー/取得」を使って、キー：Bodyを取得します。 |
| #13 | 「ディクショナリー/JSON読込」を使って、#12のJSONをディクショナリーに変換します。 |
| #14 | 「ディクショナリー/取得」を使用して、キー：filekeyを取得します。 |
⑤ kintoneに送信するためのフォーマットへ、データを整形
kintoneにデータを登録するにあたっては、kintone側が定めるフォーマット（今回はこちらとこちら）にデータを整形することが必要です。
以下のようなフォーマットへの整形が必要となり、その方法を以下でご紹介します。
| #16 | 「コントロール/内容取得」を使って、画面に入力された内容を選択します。 |
| #17 | まずは添付ファイルを登録する際のvalueの中身である[{filekey:ファイルキー}]というディクショナリーを「ディクショナリー/作成」を使用して、作成していきます。 キーにfilekeyを入力し、値に#14の内容を選択してください。 |
| #18 | 次に、配列形式にする必要があります。 Unifinityで配列を作成するためには、空の変数を取得し、それをキーにしたディクショナリーを作成する必要があります。 そのため、まずは「変数/変数取得」で設定されていない変数（今回はNULL）を呼び出しています。 |
| #19 |
「ディクショナリー/作成」を使用して、キーに#18の空の変数を入力し、値に#17の内容を選択してください。これで配列化することができます。 |
| #20,21 |
「ディクショナリー/作成」を使用して、整形していきます。 |
| #22 |
次に、{文字列のフィールドコード:#20,添付ファイルのフィールドコード:#21}というフォーマットを作成します。 |
| #23 |
最後に、{"app": "(アプリのID)","record": {#22}}というフォーマットを作成します。 |
| #24 |
整形した要素をJSONフォーマットに加工します。 |
⑥ kintoneへのデータ送信
kintoneにデータを登録するにあたっては、kintone側が定めるURI（今回はこちら）にデータを送信することが必要です。
| #26 | 「文字列関数/連結」を使い、kintoneで決められているRESTAPIのURI（https://(サブドメイン名).cybozu.com/k/v1/record.json）を生成します。 今回は、サブドメイン名を呼び出した#2の内容と「/k/v1/record.json」とを連結しています。 |
| #27 |
「ネットワーク/HTTPリクエスト」を使い、kintoneにデータを送信します。 |
3. 紐づけ
あとは画面と処理を紐づけていただいて完了です。
次回は、kintoneでワークフローを進めるアプリの作成方法をご紹介します。
なお、今回の解説で使用したkintoneのアプリ・サンプルプロジェクトは、以下よりダウンロードすることができます。
【kintone】ファイルアップロードアプリ
【Unifinity】kintoneファイルアップロードアプリ