【API Client】InsomniaでAPIの動作確認を楽にしよう

Insomniaってツールの色々のメモ書きです。

使い方

起動

起動後の画面はこんな感じです。

リクエスト作成

＋ボタンをクリックして「New Request」をクリックしてリクエストを作成します。

「デ辞蔵Webサービス」を使ってみる

デ辞蔵Webサービスに対してGETリクエストを送るようにしてみます。

パラメータ設定

RESTAPIの仕様を確認し、送信先のURLと各パラメータをセットします。

実行

Sendボタンをクリックすることでリクエストが送信され、
実行結果は右側に表示されます。

設定ファイルをいじってみる

左上にある「No Environment」をクリックし、「Manage Environments」をクリックします。

以下の設定が可能です。

以下はデ辞蔵向けに作ってみた設定です。
直接編集して設定完了したと思ったら全部設定が吹っ飛んでいたことがあったので、
エディタで先に書いておくと良いかもです。

{
  "DEFAULT_HEADERS": {
    "Connection": "close",
    "Content-Type": "application/json"
  },
  "URL": {
    "GET": "http://public.dejizo.jp/NetDicV09.asmx/GetDicItemLite",
    "SEARCH": "http://public.dejizo.jp/NetDicV09.asmx/SearchDicItemLite"
  },
  "Dic": {
    "GET": {
      "ウィキ": "DailyJJ",
      "和英辞典": "DailyJE",
      "英和辞典": "DailyEJ"
    },
    "SEARCH": {
      "ウィキ": "wpedia",
      "和英辞典": "EdictJE",
      "英和辞典": "EJdict"
    }
  },
  "Scope": {
    "全文": "ANYWHERE",
    "見出し語": "HEADWORD"
  },
  "Match": {
    "前方": "STARTWITH",
    "完全": "EXACT",
    "後方": "ENDWITH",
    "部分": "CONTAIN"
  },
  "Merge": {
    "AND": "AND",
    "OR": "OR"
  }
}

環境変数を使ってみる

「Ctrl + Space」でインテリジェンスが表示され、以下のように設定できます。

（´-`）.｡oO（Enum変数とかはプラグインとか作成しないといけない感じなのかな…
環境変数でのやり方を知っている方がいたら教えてください！）

設定ファイルインポートについて

jsonファイル等が用意されていれば、それをインポートすることで設定する手間を省けます。
試しにSwaggerのページで公開されているjsonをインポートしてみます。

インポートする

ワークスペース右側の▼をクリックして「Import/Export」をクリックします。

Dataタブ > Import Data▼をクリックして「Form URL」をクリックします。

URLを入力して、「Fetch and Import」をクリックします。

「New Workspace」をクリックして新しいワークスペースを作成します。

読み込み完了後に以下のように表示されます。
各リクエストを自分の手で一々作成する手間が省けます。

プラグイン作成

プラグインも簡単に作成できちゃいます。
ざっくりとしか説明しないので詳しくは公式リファレンスを参照してください。

プロパティ選択

今回作ってみたのはMatchプロパティの値をポップアップウィンドウから選択できるプラグインです。
インテリジェンスで表示もされ、タグをクリックすることでポップアップウィンドウが表示されてプルダウンメニューから値を選択できます。

コード

コードは以下の通りです。

module.exports.templateTags = [{
    name: 'MatchEnum',
    displayName: 'MatchEnum',
    description: '検索条件',
    args: [
        {
            displayName: '検索条件',
            description: '前方、完全、後方、部分一致',
            type: 'enum',
            options: [
                {
                    displayName: "前方",
                    value: "STARTWITH"
                },
                {
                    displayName: "完全",
                    value: "EXACT"
                },
                {
                    displayName: "後方",
                    value: "ENDWITH"
                },
                {
                    displayName: "部分",
                    value: "CONTAIN"
                }
            ]
        }
    ],
    async run(context, searchValue) {
        return searchValue;
    }
}];

カスタマイズしていくと色々と便利になりそう(*’▽’)