技術情報kintone中津川篤司kintoneは業務用途でよく利用されているWebデータベースサービスになります。タスク管理や日報管理など、様々なアプリケーションがあらかじめ用意されています。kintoneではAPIを提供しており、Monacaアプリと連携が可能です。今回はまずkintoneアプリをMonacaから操作する方法について解説します。本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。今回作成するプロジェクト記事で紹介するプロジェクトは、下のプロジェクトインポートリンクからご利用のMonacaアカウントへインポートできます。本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。作成するアプリについて今回のアプリでは、次の3画面を作成していきます。フォーム(日報データの作成や編集)ルーティング画面ごとのパスは次のとおりです。最後の画面は、どのパスにも該当しないパスが指定された場合に表示する404画面です。},];ログイン画面ログインについては前回の記事を踏襲しています。前回の記事は、こちらを参照してください。https://press.monaca.io/atsushi/9045ログイン後、日報一覧画面に遷移します。kintone上の日報アプリからレコードを取得し、一覧形式で表示させます。「日報データを読み込む」ボタンを押したタイミングで、kintoneへ問合せてデータを読み込む形にしています。日報レコードを複数行表示するため、次のレコードの一括取得APIを呼出します。GETAPIを呼び出す際に利用できるパラメータは次のとおりです。どのアプリかを指定する「app」のみが、必須のパラメータです。レスポンスに含めるフィールドコードを指定します。省略時は、閲覧権限を持つすべてのフィールドの値が返されます。レスポンスに含めるレコードの条件を指定するクエリ文字列です。クエリ文字列内では、演算子とオプションが使用できます。省略時は、閲覧権限を持つすべてのレコードが返されます。「query」パラメータで指定した条件にあてはまるレコードの件数を取得する場合、「true」を指定します。省略時は、レスポンスにはtotalCountの値としてnullが返されます。フィールドコードについてフィールドコードは、プログラムから各種項目を特定するためのIDです。このコードは、kintone上で編集ができます。日報アプリの初期の状態では、次のようなフィールド名とフィールドコードになっています。文字列__複数行__0初期状態では、フィールドコートの意味が分かりにくいため、次のように更新すると良いでしょう。今回はフィールドコードは日本語にしていますが、英語で記述することで、よりプログラムに自然な形になります。関数では、日報の取得と画面へのHTML描画、イベントの設定を行っています。};まずは、データの取得です。options);}次に、取得したデータの描画は、ul内側に描画していきます。</li>`).join(''));};イベントの設定は、一覧の行データをタップした際にフォーム画面へ移動するものです。フォームへ送っています。});}また、日報登録フォームへ移動するリンク(新規作成用)もあります。こちらはpropsがありません。フォーム画面では、まず最初にpropsからデータを取得します。一覧画面から既に存在しているデータを更新する場合は、propsにデータが入ってきます。一覧画面にて、新規作成のボタンをクリックした場合は、propsにデータがないため、空のオブジェクトを作ります。省略}保存処理フォーム画面にて、ユーザーのデータ入力後、保存ボタンを押すと、save関数を実行します。list-button">保存する</a>save関数では、まず入力値を集めます。後述}それらをkintoneのフォーマットに合うようにまとめます。有無によって更新と新規作成を分けます。$idが存在している場合は、既にレコードがkintone上にあるため、更新の処理を行います。$idが存在しない場合は、まだkintone上にレコードが無いため、新規作成となります。});}その結果によって、メッセージを変えて表示します。2000,}).open();これでデータの作成と更新が完了します。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。