kintoneとMonacaアプリを連携させる（API基本操作編）

kintoneは業務用途でよく利用されているWebデータベースサービスになります。

タスク管理や日報管理など、様々なアプリケーションがあらかじめ用意されています。

kintoneではAPIを提供しており、Monacaアプリと連携が可能です。

今回はまずkintoneアプリをMonacaから操作する方法について解説します。

※ 本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。

今回作成するプロジェクト

記事で紹介するプロジェクトは、下のプロジェクトインポートリンクから
ご利用のMonacaアカウントへインポートできます。

※ 本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。

作成するアプリについて

今回のアプリでは、次の3画面を作成していきます。

1. ログイン



2. 日報一覧（日報データの読み込み）



3. 日報登録・編集 フォーム（日報データの作成や編集）

ルーティング

画面ごとのパスは次のとおりです。
一番最後の画面は、どのパスにも該当しないパスが指定された場合に表示する404画面です。

// www/js/routes.js
const routes = [
  // ログイン
  {
    path: '/',
    componentUrl: './pages/login.html',
  },
  // 日報一覧
  {
    path: '/daily',
    name: 'Daily',
    componentUrl: './pages/daily.html'
  },
  // 日報登録、編集
  {
    path: '/form',
    name: 'Form',
    componentUrl: './pages/form.html'
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

ログイン画面

ログインについては前回の記事を踏襲しています。前回の記事は、こちらを参照してください。https://press.monaca.io/atsushi/9045

ログイン後、日報一覧画面に遷移します。

// www/pages/login.html
        // ログインボタンを押した時の処理
        const login = async () => {
            // ボタン上にローディングを表示
            load()

            // 入力値を受け取る
            const username = $f7.$el.find('#username').val();
            const password = $f7.$el.find('#password').val();

            // APIリクエスト用のヘッダー文字列作成
            window.AUTH = ${username}:${password};
            try {
                // APIリクエスト
                const res = await getApp({ id: KINTONE_APP_ID });

                // レスポンスで認証情報の正しさを判定
                const text = res.data.appId === KINTONE_APP_ID ? 'ログインしました' : res.message;

                // ボタン上に表示されるローディングを非表示
                unload()

                // 日報一覧画面へ遷移する
                $f7router.navigate({name: 'Daily'});
            } catch (e) {
                console.log(e.message);
            }
        };

日報一覧画面

日報一覧画面では、kintone上の日報アプリからレコードを取得し、一覧形式で表示させます。

「日報データを読み込む」ボタンを押したタイミングで、kintoneへ問合せてデータを読み込む形にしています。

<a href="#" @click=${load} class="item-link list-button">日報データを読み込む</a>

kintoneレコードの一括取得

日報一覧画面では、日報レコードを複数行表示するため、次のレコードの一括取得APIを呼出します。
(APIの詳細はこちら)

APIを呼び出す際に利用できるパラメータは次のとおりです。

どのアプリかを指定する「app」のみが、必須のパラメータです。

フィールドコードについて

フィールドコードは、プログラムから各種項目を特定するためのIDです。

このコードは、kintone上で編集ができます。

日報アプリの初期の状態では、次のようなフィールド名とフィールドコードになっています。

初期状態では、フィールドコートの意味が分かりにくいため、次のように更新すると良いでしょう。

今回はフィールドコードは日本語にしていますが、英語で記述することで、よりプログラムに自然な形になります。

日報の読込み

load 関数では、日報の取得と画面へのHTML描画、イベントの設定を行っています。

const load = async () => {
    try {
      const records = await getDailyReport({ app: KINTONE_APP_ID });
      showDailyReport(records.data.records);
      bindDailyReport(records.data.records);
    } catch (e) {
      console.log(JSON.stringify(e));
    }
  };

まずは、データの取得です。

const getDailyReport = (params) => {
  const options = {
    method: 'get',
    params: params,
  };
  return sendRequest('/records.json', options);
}

次に、取得したデータの描画は、ul内側に描画していきます。

// 日報データをHTMLタグで表示させる
const showDailyReport = (records) => {
  $f7.$el.find('.media-list ul').html(records.map(r => `
  <li data-id=${r.$id.value}>
      <a href="#" class="item-link item-content">
        <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">${r.日付.value}</div>
            </div>
            <div class="item-subtitle">${r.業務内容.value}</div>
            <div class="item-text">${r.所感.value}</div>
        </div>
      </a>
  </li>
`).join(''));
};

イベントの設定は、一覧の行データをタップした際にフォーム画面へ移動するものです。

タップしたデータ(record)を props を利用して、日報編集 フォームへ送っています。

// 表示された日報の行データをタップした際に、フォーム画面へ遷移するようイベントを登録
const bindDailyReport = (records) => {
  $f7.$el.find('.list li').on('click', e => {
    const id = $(e.target).parents('li').data('id');
    const record = records.find(r => r.$id.value === id);
    $f7router.navigate({
      name: 'Form'
    }, {
      props: {
        record
      },
    });
  });
}

また、日報登録フォームへ移動するリンク（新規作成用）もあります。こちらはpropsがありません。

<a href="/form" class="link">
    <i class="f7-icons">plus</i>
</a>

フォーム画面

日報フォーム画面では、次の情報を入力できます。

• 日付
• 業務内容
• 所感、学び

フォーム画面では、まず最初にpropsからデータを取得します。

一覧画面から既に存在しているデータを更新する場合は、propsにデータが入ってきます。

一覧画面にて、新規作成のボタンをクリックした場合は、propsにデータがないため、空のオブジェクトを作ります。

export default (props, { $f7, $f7router }) => {
  const record = props.record || {};
  // 省略
}

保存処理

フォーム画面にて、ユーザーのデータ入力後、保存ボタンを押すと、save関数を実行します。

<a href="#" @click=${save} class="item-link list-button">保存する</a>

save関数では、まず入力値を集めます。

const save = async () => {
  const date = $f7.$el.find('#date').val();
  const content = $f7.$el.find('#content').val();
  const note = $f7.$el.find('#note').val();
  // 後述
}

それらをkintoneのフォーマットに合うようにまとめます。

const params = {
  '日付': {
    value: date,
  },
  '業務内容': {
    value: content,
  },
  '所感': {
    value: note,
  },
};

新規登録と更新の区別

後は、kintoneのレコードにおけるユニークキーである $id の有無によって更新と新規作成を分けます。

$idが存在している場合は、既にレコードがkintone上にあるため、更新の処理を行います。

$idが存在しない場合は、まだkintone上にレコードが無いため、新規作成となります。

if (record.$id) {
    // 更新
    res = await updateRecord({
        app: KINTONE_APP_ID,
        id: record.$id.value,
        record: params,
    });
} else {
    // 新規作成
    res = await addRecord({
        app: KINTONE_APP_ID,
        record: params,
    });
}

その結果によって、メッセージを変えて表示します。

const text = res.data.revision ? '保存しました' : res.message;
$f7.toast.create({
    text,
    position: 'top',
    closeTimeout: 2000,
}).open();

これでデータの作成と更新が完了します。