Content-typeについて少し勉強してみよう:application/jsonとapplication/x-www-form-urlencodedの違い

httpAPI関連
Web design concept: Painted multicolor text Http : / / on Digital Data Paper background
この記事は約6分で読めます。

さて、ちゃんと更新が続けられています!

前回からそんなに期間あかずに更新できていて自分的にはそれだけでOKな気分でいますw

そんな今回はslack botを作りたいというリクエストでレクチャーをしているときに、質問を受けたContent-typeについての解説をしていきたいと思います。

content-typeの全てを説明していくと、流石にかなりのボリュームになってしまうので、基本的な事項とslack APIに出てくるapplication/jsonとapplication/x-www-form-urlencodedの違いを中心に今回は紹介記事を書いていきたいと思います。

スポンサーリンク
もしも_楽天

slack APIにおけるcontent-type

さて、まずは今回の話の元となったslack APIにおける対象を見ていってみます。今回はconversations APIのcreate methodを対象に見ていきます。

この【Accepted content type】に、

・application/x-www-form-urlencoded

・application/json

という2つの要素が記載されています。違いは何?そもそもcontent typeって何っていう部分を少し説明していきたいと思います。

そもそもContent typeとは?

それでは、まずそもそもcontent typeとは何者なのかを少し見ていきましょう。

ファイルやインターネット上で転送されるコンテンツの形式を表現する識別子である。text/plainのように、スラッシュで区切る表記が特徴的である

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%BF%E3%82%A4%E3%83%97

このスラッシュで区切る表記方法って何か思い出しませんか?そう・・・・

MIME type(メディアタイプ / Multipurpose Internet Mail Extensions)

ざっくりいうと、Content-typeってMIMEタイプをhttp通信(webのデータ通信)で行う際に指定するヘッダーの要素となります。

まぁcontent typeで指定したファイル内容に基づいてブラウザなどが属性に基づいて評価してもらうために、どんなデータが送受信されているかを明示的に示す値になります。昔IEのcontent-type無視がエンジニア界隈でIE嫌いの要素になってたものでもありますねw

content typeの種類

content typeにはどんな種類があるかというのも軽く見ていきましょう。全て知りたい方はRFCを見ていけばわかりますが、ノンプロは全て理解する必要はほとんどなくて、実際自分がよく使うものだけ理解してれば良いと思います。

content typeの基本的な構造

content typeは基本的に以下の構造で作られます。

タイプ/サブタイプ

タイプ

タイプ名でデータの種類(テキスト、画像、動画など)を定義しています。

個別型とマルチパート型が存在しますが、ノンプロが把握していれば良いのは基本的に個別型かと思います。

個別型の例示

・application

・audio

・text

・image

など

サブタイプ

タイプで定義されたデータ種類の中で、具体的なデータ形式を定義します。

それぞれのタイプ毎にサブタイプが定義されているため、一部メジャーなものをピックしています。

text type:

text/plain, text/html, text/css, text/javascript etc..

application type:

application/octet-stream, application/json, application/pdf, application/x-www-form-urlencoded, application/vnd.ms-excel etc..

※vndが付くものは企業設定型のmin。vnd.ms-excelであればmsが定義しているもの

image type:

image/jpeg, image/png, image/gif etc..

content typeで定義する内容はMIME typeなので、よく見知ったものもあれば、実は初めて見たよってものも多くあると思います。

application/jsonとapplication/x-www-form-urlencodedの違い

では、今回slack APIでaccepted content typeとして指定されていた、application/jsonとapplication/x-www-form-urlencodedの2つについて見ていきたいと思います。

この二つはcontent typeのタイプが同じで、サブタイプがjson/x-www-form-urlencodedで違うということになります。

application/json

jsonフォーマットでデータが送受信されます

jsonフォーマットとは皆さんもよくご存知の、 {“a”:1,”b”:2} のような形です

application/x-www-form-urlencoded

エンコードされたurlでデータが送受信される

a=1&b=1 のようなクエリパラメータの形です。実際はエンコードされる。

例(utf-8 basis): a=1&b=1 → %20a%3D1%26b%3D1

js/スプレッドシート関数でのエンコード方法

エンコードは結構簡単にできます。

JSの場合: encodeURI() で実行可能

encodeURI() - JavaScript | MDN
encodeURI() 関数は、URI (Uniform Resource Identifier; 統一資源識別子) をエンコードし、各文字のインスタンスをそれぞれ UTF-8 符号の文字を表す 1 個から 4 個のエスケープシーケンスに置き換えます (サロゲート文字のペアのみ 4 個のエスケープシーケンスになります)...

スプレッドシート関数の場合: ENCODEURL(テキスト)

ENCODEURL 関数 - ドキュメント エディタ ヘルプ
テキストをエンコードして、URL のクエリ文字列で使用できるようにします。 ENCODEURL 関数の引数 ENCODEURL(テキスト) 引数 説

まとめ

今回は、【Content-typeについて少し勉強してみよう:application/jsonとapplication/x-www-form-urlencodedの違い】というテーマで描いてきました。

slack APIで両方のcontent typeが受け入れ可能になっているので、それぞれのフォーマットを理解していただくと、利用時にデータ構造を作る際にミスが起きなくて良いかと思います。

タイトルとURLをコピーしました