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 で動作を確認しています。