Web APIの疎通確認するとき、よくつかう操作のあんちょこ、ブラウザ編。
ちょこっとAPIの挙動を味見したい時 curlコマンドやブラウザのネットワークツールが手っ取り早い。はてなブログ など 身近なAPI を例に自分がよく使う操作についてまとめる。
ブラウザでWeb APIの疎通確認 （FireFox）
ブラウザのネットワークツールによって、エンドポイントを叩いて戻り値を確認する時に使うあれこれ。ブラウザ: FireFox。
エンドポイントにアクセス（GET）
ブラウザのアドレスバーからエンドポイントにアクセスする。GETリクエストが送られる。
例えば次にアクセスすると JSON形式のデータが返る。*1
http://hatenablog.com/oembed?url=https://acokikoy.hatenablog.com/entry/2019/09/22/151213&format=json認証付き(-u id:passwd) の例。 *2
http://hatenablog.com/oembed?url=https://acokikoy.hatenablog.com/entry/2019/09/22/151213&format=json]https://blog.hatena.ne.jp/acokikoy/acokikoy.hatenablog.com/atom/entry?u={はてなID}:{APIキー}
エンドポイントにアクセス (POST)
ウェブ開発ツール ＞ ネットワークモニター を開き、
ヘッダータブにある「編集して再送信」をクリック。リクエストヘッダーの編集画面が開くので、内容を書き換えて 「送信」する。
。。。基本方針としてはこれでイケると思うんだけど、細かいところまで検証できてない ^^;;
ウェブ開発ツール > ネットワークモニター
ウェブ開発ツール ＞ ネットワークモニターで リクエスト、レスポンスの内容が細かく確認できる。
詳しい使い方は、ココを参照
ネットワークリクエストの詳細 - 開発ツール | MDN
BASIC認証を通す
BASIC認証(curlなら -u id:passwrod で指定していた部分）は、
ヘッダにAuthorization: Basic ほにゃらら を追加してやる。
ほにゃらら部分は、 id:password を Base64変換した値が入る。
例えば idがhatena_id, apiキーが api_key だったら
Authorization: Basic aGF0ZW5hX2lkOmFwaV9rZXk= となる。
※ Google先生に「base64変換」で探してもらうと変換ツールが見つかる。
JSONビューワー
FireFoxはブラウザ本体にJSONデコード機能があるのできれいに表示される。
Chrome の場合
Chrome の場合も基本は同様。
JSONをきれいに表示するには、
JSONView - Chrome ウェブストア 等エクステンション追加でFFと似たようなことができる。
