kintoneと連携したモバイルアプリをUnifinityで作成する方法について、ご紹介いたします。
今回は、kintoneのREST APIを利用して、kintoneにレコードを登録する方法をご紹介します。
前回の記事で紹介したユーザー認証は必要となりますので、適宜ご確認ください。
解説で使用しているkintoneのアプリ・Unifinityのサンプルプロジェクトを以下よりダウンロードすることができます。ぜひご活用ください。
【kintone】レコード登録アプリ
【Unifinity】kintoneレコード登録アプリ
作成するアプリの概要
kintoneに、レコードを登録するモバイルアプリを作成します。
kintoneの設定
今回は、下記の項目を入力するアプリを用意し、日時・文字列・数値・ラジオボタン・チェックボックス・ドロップダウンをモバイルアプリから登録します。
他によく使われる添付ファイル・ルックアップ・テーブル・ユーザー選択は別の記事にてご紹介します。
連携するためには、kintoneのサブドメイン名・アプリID・各フィールドのフィールドコードが必要となります。
・ サブドメイン名・アプリIDは、アプリ接続時のURLの以下の部分から確認できます。
・各フィールドのフィールドコードは、アプリの設定画面から確認できます。
Unifinityの連携設定
kintoneのフィールド毎に、画面作成・処理作成を説明していきます。
(今回はDBに入力データを保存していませんが、保存することも可能です)
※ 基本的なUnifinityの操作は、こちらのチュートリアル動画をご覧ください。
0. 準備
前回の記事で紹介したユーザー認証をアプリ内にご準備ください。
また、kintoneの設定で確認したサブドメイン名を、プロパティのグローバル変数に設定します。
【日付】
1. 画面作成
① 日時を入力するテキストボックスを配置します。
また、テキストボックスについては、オブジェクトの動作設定タブの中にある入力内容を「日付・時刻」に設定してください。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です(2.の処理作成後、更新する箇所があります)。
2. 処理作成
画面で作成したボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
#2 | 「変数/グローバル変数取得」を使って、グローバル変数に設定したkintoneのサブドメインを読み込みます。 |
② ユーザー認証情報の呼び出し
#4 | 「データベース/取得」を使い、DBに記憶された「ユーザー認証情報(X-Cybozu-Authorization:●●●)」を読み込みます。(0. 準備で記載したユーザー認証をアプリ内にご準備いただき、そちらのDBを指定してください) |
③ kintoneに送信するためのフォーマットへ、データを整形
kintoneにデータを登録するにあたっては、kintone側が定めるフォーマット(今回はこちら)にデータを整形することが必要です。
以下のようなフォーマットへの整形が必要となり、その方法を以下でご紹介します。
#6 | 「コントロール/内容取得」を使って、画面に入力された内容を選択します。 |
#7 | 「文字列関数/フォーマット」を使って、kintoneに日時を登録するためのフォーマット”YYYY-MM-DDThh:mm:ss+09:00”に、#6の内容を変換します。これが"フィールド値"となります。 kintoneに登録するためのフォーマットの一覧はこちらをご覧ください。 |
#8 | 「ディクショナリー/作成」を使用して、整形していきます。 "value": "(フィールド値)"というフォーマットを作成するために、キーにvalueを入力し、値に#7の内容を選択してください。 |
#9 |
次に、"(フィールドコード)": {#8}というフォーマットを作成します。 |
#10 |
最後に、{"app": "(アプリのID)","record": {#9}}というフォーマットを作成します。 |
#11 |
最後に、整形した要素をJSONフォーマットに加工します。 |
④ kintoneへのデータ送信
kintoneにデータを登録するにあたっては、kintone側が定めるURI(今回はこちら)にデータを送信することが必要です。
#13 | 「文字列関数/連結」を使い、kintoneで決められているRESTAPIのURI(https://(サブドメイン名).cybozu.com/k/v1/record.json)を生成します。 今回は、サブドメイン名を呼び出した#2の内容と「/k/v1/record.json」とを連結しています。 |
#14 |
「ネットワーク/HTTPリクエスト」を使い、kintoneにデータを送信します。 |
3. 紐づけ
あとは画面と処理を紐づけていただいて完了です。
ここまでが、kintoneにレコードを登録する上での基本的な作成方法となります。
その他のフィールドを更新する場合の処理については以下となります。
(添付ファイル・ルックアップ・テーブル・ユーザー選択は別の記事にてご紹介します。)
【文字列(一行)、数値】
文字列(一行)と数値の登録は、ほぼ同様のため、まとめて記載しております。
1. 画面作成
① 文字列・数値を入力するテキストボックスを配置します。
また、文字列についてはオブジェクトの動作設定タブの中にある入力内容を「全て」に、数値についてはオブジェクトの動作設定タブの中にある入力内容を「数値」&「ポップアップ入力」にチェックをいれて設定してください。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です(2.の処理作成後、更新する箇所があります)。
2. 処理作成
画面で作成したボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
➜日時と同様です。
② ユーザー認証情報の呼び出し
➜日時と同様です。
③ kintoneに送信するためのフォーマットへ、データを整形
#6 | 「コントロール/内容取得」を使って、画面に入力された内容を選択します。数値の場合も同様です。 |
#7 | 「ディクショナリー/作成」を使用して、整形していきます。 "value": "(フィールド値)"というフォーマットを作成するために、キーにvalueを入力し、値に#6の内容を選択してください。 |
#8 |
次に、"(フィールドコード)": {#7}というフォーマットを作成します。 |
#9 |
最後に、{"app": "(アプリのID)","record": {#8}}というフォーマットを作成します。 |
#10 |
最後に、整形した要素をJSONフォーマットに加工します。 |
④ kintoneへのデータ送信
➜日時と同様です。
3. 紐づけ
あとは画面と処理を紐づけていただいて完了です。
【ラジオボタン】
1. 画面作成
① kintoneで設定したラジオボタンと同数のラジオボタンを配置します。
ラジオボタンについては、オブジェクトの動作設定タブの中にあるラジオグループを2つのボタンに共通の名称(今回はkintone)を設定し、またON値をkintoneで入力される項目名(今回はsample1とsample2)に設定してください。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です(2.のDB及び3.の処理作成後、更新する箇所があります)。
2. DB作成
① ラジオボタンで選択された値を記憶させるための、Unifinity内のDBを作成します。
データファイルを作成後、項目名・物理項目名に分かりやすい名称を入力し、起動時初期化にチェックをいれてください。
DB作成は、これで完了です。
3. 処理作成
画面で作成したボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
➜日時と同様です。
② ユーザー認証情報の呼び出し
➜日時と同様です。
③ kintoneに送信するためのフォーマットへ、データを整形
#6 | 「データベース/取得」を使って、ラジオボタンとして入力された内容を選択します。 ※この部分が他の場合と異なります |
#7 | 「ディクショナリー/作成」を使用して、整形していきます。 "value": "(フィールド値)"というフォーマットを作成するために、キーにvalueを入力し、値に#6の内容を選択してください。 |
#8 |
次に、"(フィールドコード)": {#7}というフォーマットを作成します。 |
#9 |
最後に、{"app": "(アプリのID)","record": {#8}}というフォーマットを作成します。 |
#10 |
最後に、整形した要素をJSONフォーマットに加工します。 |
④ kintoneへのデータ送信
➜日時と同様です。
4. 紐づけ
画面とDBとの紐づけと、画面と処理の紐づけの2つを実施する必要があります。
① 画面とDBの紐づけ
ラジオボタンで選択した内容を2.で作成したDBに格納するために、画面とDBを紐づけます。
まずは、ラジオボタンを配置した画面で、何も選択せずに(または画面以外の黒い部分をクリック)し、データのテーブル名から2.で作成したDBを選択してください。
選択後、各ラジオボタンを選択し、データの内容のフォームをチェックし、フィールド名を2.で作成したDBの該当フィールドを選択してください。
② 画面と処理の紐づけ
➜日時と同様です。
以上で、完了です。
【チェックボックス】
複数選択可としたい場合にチェックボックスを使用するものとして、ご紹介します。
1. 画面作成
① kintoneで設定したチェックボックスと同数のチェックボックスを配置します。
チェックボックスについては、オブジェクトの動作設定タブの中にあるON値をkintoneで入力される項目名(今回はsample1とsample2)に設定してください。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です(2.の処理作成後、更新する箇所があります)。
2. 処理作成
画面で作成したボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
➜日時と同様です。
② ユーザー認証情報の呼び出し
➜日時と同様です。
③ kintoneに送信するためのフォーマットへ、データを整形
#6,#7 | 「コントロール/内容取得」を使って、チェックボックスのON値を取得します。これはチェックボックスの数だけ必要となります。 |
#8,#9 | 複数選択可となるので、#8~#17までは場合分けを行い、ON値の組み合わせを設定していきます。 ON値が入力されているか否かが場合分けの判断材料となるため、「文字列関数/文字列取得」を使用して文字数をカウントします。 |
#10 |
「制御文/If(開始)」を使用して、チェックボックス1がOFF(チェックボックス1のON値の文字数が0)だった場合に、#11の処理に移行します。もしチェックボックス1がONだった場合には#11は実行されず、#12に移行します。 |
#11 |
「変数/変数設定」に任意の変数名を設定し、#7:チェックボックス2の値を設定します。 |
#12 |
「制御文/ElseIf」を使用して、チェックボックス2がOFF(チェックボックス2のON値の文字数が0)だった場合に、#13の処理に移行します。もしチェックボックス2がONだった場合には#13は実行されず、#14に移行します。 |
#13 |
「変数/変数設定」に#11と同様の変数名を設定し、#6:チェックボックス1の値を設定します。 |
#14 |
「制御文/Else」を使用して、#10・#12に該当しない(チェックボックス1・2ともにON)場合に、#15の処理に移行します。 |
#15 |
チェックボックス1・2ともにONなので、#6・#7の値を「xxx,xxx」を間にいれて、「文字列関数/連結」で連結します。 |
#16 |
「変数/変数設定」に#11・13と同様の変数名を設定し、#15:チェックボックス1と2の値を設定します。 |
#17 |
「制御文/If(終了)」にて、#10で開始した処理を終了させます。 |
#18 |
#10~17の処理により、変数としてチェックボックスのON値が設定されたので、「変数/変数取得」により変数を呼び出します。 |
#19 |
kintoneにデータを送信するにあたって、配列形式にする必要があります。 |
#20 |
「ディクショナリー/作成」を使用して、キーに#19の空の変数を入力し、値に#18の内容を選択してください。これで複数選択項目を配列化することができます。 |
#21 |
「ディクショナリー/作成」を使用して、整形していきます。 |
#22 |
次に、"(フィールドコード)": {#21}というフォーマットを作成します。 |
#23 |
最後に、{"app": "(アプリのID)","record": {#22}}というフォーマットを作成します。 |
#24 |
整形した要素をJSONフォーマットに加工します。 |
#25 |
#24でJSON化した内容について、配列にJSON化されていない部分があるため、「文字列関数/置換」を使用し、「XXX」を「"」に置換します。 |
④ kintoneへのデータ送信
➜日時と同様です。
3. 紐づけ
➜日時と同様です。
あとは画面と処理を紐づけていただいて完了です。
【ドロップダウン】
1. 画面作成
① ドロップダウンで選択するコンボボックスを配置します。
また、コンボボックスの選択肢を設定するために、データののリストタブの中にある値入力部分に、kintoneのドロップダウンに設定した選択肢を入力してください。
② 入力された情報を、kintoneに送信するためのボタンを設置します。
画面作成は、一旦、これで完了です(2.の処理作成後、更新する箇所があります)。
2. 処理作成
画面で作成したボタンを押下した際の動作を作成します。
それぞれの項目ごとに、一つ一つの処理を解説していきます。
① サブドメイン名の呼び出し
➜日時と同様です。
② ユーザー認証情報の呼び出し
➜日時と同様です。
③ kintoneに送信するためのフォーマットへ、データを整形
#6 | 「コントロール/内容取得」を使って、画面に入力された内容を選択します。 |
#7 | 「ディクショナリー/作成」を使用して、整形していきます。 "value": "(フィールド値)"というフォーマットを作成するために、キーにvalueを入力し、値に#6の内容を選択してください。 |
#8 |
次に、"(フィールドコード)": {#7}というフォーマットを作成します。 |
#9 |
最後に、{"app": "(アプリのID)","record": {#8}}というフォーマットを作成します。 |
#10 |
最後に、整形した要素をJSONフォーマットに加工します。 |
④ kintoneへのデータ送信
➜日時と同様です。
3. 紐づけ
あとは画面と処理を紐づけていただいて完了です。
【複数項目を送信する場合】
複数項目を送信する場合には、recordの中身となるディクショナリーを作成する際に、下記のように複数のフィールドコードを設定していただければ登録することができます。
こちらの詳細はサンプルアプリからご確認ください。
次回は、kintoneのレコードに画像等のファイルをアップロードするアプリの作成方法をご紹介します。
なお、今回の解説で使用したkintoneのアプリ・サンプルプロジェクトは、以下よりダウンロードすることができます。
【kintone】レコード登録アプリ
【Unifinity】kintoneレコード登録アプリ