業務などで手軽に使えるWebデータベースアプリを提供しています。簡易的な操作であれば、標準で提供されているビューワーアプリで十分ですが、デバイスの機能を使ったり、こだわったインターフェースを使いたい時には独自のアプリを開発することになります。今回はkintoneアプリの一つ、顧客リストアプリのデータをMonacaアプリとして呼び出し、操作する手順を解説します。本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。今回作成するプロジェクト記事で紹介するプロジェクトは、下のプロジェクトインポートリンクからご利用のMonacaアカウントへインポートできます。(https://monaca.mobi/ja/directimport?pid=622aec8ce788859d6a886b6f)アプリ仕様について今回は、Framework7をフレームワークとして利用します。最初に読み込まれるのはログイン画面です。以下の変数が、kintone操作用の変数です。KINTONE_DOMAIN、KINTONE_APP_IDはそれぞれ自身のものに書き換えてください。'3';ログイン処理kintoneでは、最初にID/パスワードによるログインを行います。ログインについては前回の記事を踏襲しています。前回の記事は、こちらを参照してください。(https://press.monaca.io/atsushi/9045)この時、認証だけを行うAPIはないので、ログイン情報を使って任意のAPI(今回はアプリ情報を取得するAPI)を実行して、結果が返ってくるかどうかで認証の成否を判定しています。認証が成功すると、一覧画面に遷移します。kintone上のレコードを取得し、一覧形式で表示させます。右上の更新ボタンを押したタイミングで、kintoneへ問合せてデータを読み込む形にしています。顧客レコードを複数行表示するため、次のレコード一括取得APIを呼出します。GETAPIを呼び出す際に利用できるパラメータは次のとおりです。どのアプリかを指定する「app」のみが、必須のパラメータです。レスポンスに含めるフィールドコードを指定します。省略時は、閲覧権限を持つすべてのフィールドの値が返されます。レスポンスに含めるレコードの条件を指定するクエリ文字列です。クエリ文字列内では、演算子とオプションが使用できます。省略時は、閲覧権限を持つすべてのレコードが返されます。「query」パラメータで指定した条件にあてはまるレコードの件数を取得する場合、「true」を指定します。省略時は、レスポンスにはtotalCountの値としてnullが返されます。options);}データの取得ができたら、結果を一覧で表示します。getCustomersの結果にあるrecordsを描画します。してユニークキーを設定した値です。顧客一覧をタップしたら、フォーム画面に遷移します。一覧画面にて設定したユニークキーを使ってタップされたデータを特定し、フォーム画面にpropsとして渡しています。}フォーム表示フォーム画面では、顧客一覧画面からレコードデータが送られている場合は、その情報を使います。ないので、空のオブジェクトを定義します。プロパティを表示します。下の例は、キー「会社名」の確認をしています。''}"/>データの登録データを新規保存、または更新する際には、まずkintoneのフォーマットに合わせたデータを作成します。有無によって更新と新規作成を分けます。$idが存在している場合は、既にレコードがkintone上にあるため、更新の処理を行います。$idが存在しない場合は、まだkintone上にレコードが無いため、新規作成となります。}処理の結果は、revisionというデータがあれば保存成功です。revisionが存在しない場合は、何らかのエラーが発生しています。res.message;ここまでで基本的なkintoneのデータ操作は完了です。データ登録のAPI上記の説明にて出てきた関数「addRecord」や「updateRecord」は、kintoneのレコード登録/更新APIを呼びだし、処理を実行しています。新規登録レコードの新規登録は、次のAPIを利用しています。APIの詳細については、こちらを確認ください。https://(サブドメイン名).cybozu.com/k/v1/record.jsonAPIに送信するパラメータは次のとおりです。パラメータ「app」で、どのアプリを対象に、どのようなデータを新規で登録するかを指定します。オブジェクトで指定します。更新レコードの更新は、次のAPIを利用します。APIの詳細については、こちらを確認ください。https://(サブドメイン名).cybozu.com/k/v1/record.jsonAPIに送信するパラメータは、次のとおりです。新規登録のAPIのパラメータに追加でパラメータ「id」を指定することで、どのレコードを更新対象とするか指定します。