APIってなに?APIについてざっくり知ろう!

APIって聞いたことある!使いたい!でも何かわからない!

わし「API(あぴ)?」

API(えーぴーあい)です。

APIとはどんなもの?Web制作をする中で聞いたことがあるけど、いまいち仕組みが分からない!という方に向けて、YouTubeのAPI(YouTube Data API v3)を使って簡単なWebアプリケーションを作った経験をもとに、APIとは何かを超ざっくりまとめてみました。

今回はYouTubeではなく架空の料理サイトのAPIを使うつもりで説明していきます。

(APIによっては色々異なる部分があるかもしれません。)

1.わし「そもそもAPIってなに?」

f:id:pakamori:20191109214207j:plain

簡単に説明すると、なにかのサービスの機能やデータを使用できる仕組みです。

アプリケーションプログラミングインタフェースAPIApplication Programming Interface[1]とは、広義ではソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用するインタフェースの仕様である。

ウィキペディアWikipedia参照)

なんか色々難しいけど要は、

f:id:pakamori:20191109225720p:plain

わし「あーなんか料理のレシピを見ることが出来るサイトを作りたいなー」

わし「自分で全部入力するのは大変だから、どこかの料理系サイトに掲載してる情報をそのまま使えたりしないかなー」

f:id:pakamori:20191109213019p:plain

お料理.com「んじゃーうちのAPIを使えばいいよ。」

お料理.com「https://お料理.com/api/にアクセスすればいいよ。」

わし「クックパッ…」

お料理.com「https://お料理.com/api/にアクセスすればいいよ。」

わし「まじ?んじゃーアクセス!!(エンター)」

お料理.com「どぞ(料理情報を詰め込んだデータの塊が返ってくる)」


[
{
"yasai": "ニンジン",
"color": "オレンジ",
"cooking":"カレー"
},
{
"yasai": "キャベツ",
"color": "緑",
"cooking":"ロールキャベツ"
}
]

わし「んー、なんかわからんけどこのyasaiって野菜の名前のことかな。」

わし「colorってその野菜の色かな?cokkingってその野菜を使ったおすすめの料理のことかな?」

お料理.com「そう。全部うちのサイトに掲載しているよ。」

わし「なんかこのデータ使ったら、野菜ごとのおすすめの料理一覧とか作れそう。」

って仕組みのことです。ちなみにこの渡ってきたデータの形式をJSON形式といいます。

2.お料理.com「APIキーって持ってる?」

f:id:pakamori:20191109222631j:plain

わし「なにそれ?」

お料理.com「みんながURL叩くだけでうちのサービスの情報使えるなら、なんか損した気分だよ。だから最低限うちのサービスに登録してる人だけに使ってもらいたいよ。」

料理サイト「登録してくれたらAPIキーっていう英数ごちゃ混ぜの文字を渡すよ。それをURLに混ぜてから叩いてくれないとうちのサービス情報は使えないよ。」

わし「登録した。」

お料理.com「ap15KF7sgaL1P

わし「https://お料理.com/api/のURLの中に混ぜればいいの?」

お料理.com「後ろにkey=って指定してあげて。」

わし「https://お料理.com/api/?key=ap15KF7sgaL1P(エンター)」

お料理.com「通信成功。どぞ。(料理情報の塊データ)」

わし「https://お料理.com/api/?key=aaaa(エンター)」

お料理.com「通信失敗。そのキーは誰にも渡した記憶ないよ。(エラー)」

これがAPIキーです。APIを取得する際にお金がかかったりするものもあるので、簡単に作りたいときはひとまず無料APIを探してみるといいかもしれません。

3.わし「カレーに使う野菜一覧だけ欲しいんだけど」

f:id:pakamori:20191109222907j:plain

お料理.com「パラメータで色々指定してあげればいいよ。」

お料理.com「さっきのkey=ってやつもパラメータだよ。あのURLの後ろに&で続けて指定してあげてね。」

わし「カレーに関係する情報だからcookingがカレーのものを指定すればいいのか。」

わし「https://お料理.com/api/?key=ap15KF7sgaL1P&cooking=カレー

わし「こんな感じ?(エンター)」

お料理.com「そうそう。どぞ。」


[
{
"yasai": "ニンジン",
"color": "オレンジ",
"cooking":"カレー"
},
{
"yasai": "ジャガイモ",
"color": "茶色",
"cooking":"カレー"
},
{
"yasai": "タマネギ",
"color": "白",
"cooking":"カレー"
}
]

わし「coolkingがカレーの情報だけ取れた!なんかシチューも作れそう。」

お料理.com「他にもにも色々あるけど詳しくはお料理.comの開発者用公式サイトを見てね。」

基本APIにはそのAPI特有のパラメータが色々用意されています。これらを駆使して上記のように自分が欲しい情報だけを見つけ出すこともできます。

4.まとめ

以上、APIとはざっくりこんな感じの仕組みというお話でした。

さらに取得したデータ情報ブラウザに表示させたい!その情報を使ってWebアプリケーションを作りたい!といった場合には、HTMLとJavaScriptについて知る必要があります。APIによってはPHPなどサーバーサイドの知識も要することもありますが、まずはHTMLとJavaScript(Ajax)について知っておくと良いかと思います。

ちなみに実際にわしが使用したYouTubeのAPI(YouTube Data API v3)も基本的な機能は無料で使えるAPIです。こちらは最低限HTML、JavaScript(Ajax)の知識があれば使用できるAPIでした。

Google Cloud Platformというサイトに登録すると使うことが出来るので気になる方は試してみてください。

console.developers.google.com

コメント

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