Tips

ブラウザのデベロッパーツールを使って、kintone REST API のサンプルを簡単に実行してみる！

目次

はじめに

固定リンクがコピーされました

kintone REST APIの動作を試す時に、皆さんは何を使っていますか？

Postmanや当サイトから利用できる HTTP Client for kintoneを使う方が多いと思いますが、サブドメインや認証情報など、いちいち入力するのが意外と面倒ですよね。

実は、ブラウザーのデベロッパーツールを使えば、なんと、数クリックでkintone REST APIのサンプルを試せるのです！
今回は、Chromeのデベロッパーツールのコンソールから、APIドキュメントに載っているkintone REST APIのリクエストサンプルを実行する方法を紹介します。
他のブラウザーのデベロッパーツールでも同様の方法が可能です。

手順

固定リンクがコピーされました

それでは、kintone REST APIサンプルの 1 件のレコードを取得するで動作を試してみましょう。

  1. まずは、Chromeで自分のkintone開発環境や社内環境にログインします。

  2. kintoneの画面を開いたまま、[F12]キー（Macの場合はoption+command+i）を押して開発者ツールを起動し、左から2番目のコンソールタブを開きます。

  3. 下記「レコードの取得」のサンプルコードをコピーして、Chromeのコンソールに貼り付けます。
    対象のアプリIDとレコードIDは書き換えてください。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    const body = {
  app: kintone.app.getId(),
  id: 1001
};

kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, (resp) => {
  // success
  console.log(resp);
}, (error) => {
  // error
  console.log(error);
});

    コンソールにサンプルコードを次のように貼り付けます。

  4. あとは[Enter]キーで実行すると、その場でAPIの動作確認ができます！
    あまり扱ったことがないAPIもこれなら一瞬で試せますね。

console.log(resp)の部分は普通JSON形式で返ってきますが、次のように書き換えますと、レスポンスをいい感じに整形した文字列で返してくれます。
ぜひ使ってみてください。

1

console.log(JSON.stringify(resp, null, '  '));

以下は、整形後のイメージです。

おわりに

固定リンクがコピーされました

いかがでしょうか。
簡単にサンプルを実行できましたね。
cybozu developer communityのトピックでは、他にもChromeデベロッパーツールの便利な使い方を紹介しています。
ぜひ Chrome 開発者ツール（デベロッパーツール）の便利な使い方 を見てみてください。
まだ紹介されていない便利な使い方を共有したい場合は、 cybozu developer community を活用してください！

ブラウザーのデベロッパーツールを活用して、kintoneのカスタマイズをより効率的にしましょう！

information

このTipsは、2019年3月版kintoneで動作を確認しています。