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

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

オムそば
オムそば

API(あぴ)?

API(あぴ)じゃなくてAPI(えーぴーあい)です。

JavaScriptを勉強する中で、APIという単語を聞く機会が出てくるかと思います。

オムそば
オムそば

便利そう!でもいまいち仕組みが分からない!

そんな方に向けて、YouTubeのAPI(YouTube Data API v3)を使って簡単なWebアプリケーションを作った経験をもとに、APIとは何かを超ざっくりまとめてみました。

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

詳しい仕組みはさておき、まずはAPIを使うとどんなことが出来るかをざっくり覚えてみてください!

(APIによっては色々異なる解釈があるかもしれませんがご容赦下さい。)

そもそもAPIってなに?美味しいの?

f:id:pakamori:20191109214207j:plain

簡単に説明すると、なにかのサービスの機能やデータを一部お借りして使うことが出来る仕組みです。

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

ウィキペディアWikipedia参照)

Wikiにもある通り、APIはアプリケーションプログラミングインターフェースの略称です。

とはいえこれだけだと何をするものかいまいち分からないので、例を見ていきましょう。

オムそば
オムそば

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

オムそば
オムそば

レシピを全部入力するのは大変だから、どこかの料理サイトに掲載してる情報をそのまま使えたりしないかな。

 

んじゃーうちのサイト、お料理.comが公開しているAPIを使えばいいよ。

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

オムそば
オムそば

クックパッ〇とかのAPI使ってみた…

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

オムそば
オムそば

ほんと?んじゃーアクセス!(エンター)

 

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

 

オムそば
オムそば

なんか大量の文字が返ってきた!

わからんけどこのyasaiは野菜の名前のことかな。

 

オムそば
オムそば

colorはその野菜の色かな?cokkingその野菜を使ったおすすめの料理のことかなかな?

そう。全部うちのサイトに掲載している情報だよ。

こんな感じで何らかのサービスが自らで蓄えている情報を提供しているのがAPIだよ。

オムそば
オムそば

なるほど。

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

 

このような仕組みのことです。

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

APIキーって持ってる?どんなものなの?

けy

APIキーはアクセス認証のために使用されるものです。

アクセス認証と言われてもピンとこない方はもう少し詳しく見ていきましょう。

オムそば
オムそば

あーなるほど、アクセス認証ね。ピンときません。

さっきURLを叩いたらうちのサービスの情報を見ることが出来たでしょう?

でも正直みんながURL叩くだけでうちのサービスの情報使えるなら、なんか損した気分だよ。

しかも無条件にうちのサイトの情報が筒抜けだったら色々とまずいよ

オムそば
オムそば

じゃあどうすればいいの?

最低限うちのサービスに登録してる人だけAPIを使えるようにしたよ

オムそば
オムそば

僕がサイトに登録したかなんてどうやって見分けるの?

登録してくれたらAPIキーっていう英数ごちゃ混ぜの文字列を渡すよ。APIキーをURLに入れてくれないとサービスを使えないようにしたよ

 

オムそば
オムそば

ほほう。適当な文字列を使ったら怒る?

怒る。そんなキーは誰にも渡した覚えはない!ってエラーを返すし、この実装が終わるまで正座してもらう。

 

オムそば
オムそば

(足短くて正座出来んけどな…)登録した…!

あなたのAPIキーはap15KF7sgaL1Pです。

オムそば
オムそば

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

オムそば
オムそば

https://お料理.com/api/?key=ap15KF7sgaL1P

通信成功。さっきのお料理情報を渡すよ。

 

オムそば
オムそば

https://お料理.com/api/?key=xxxxxxxxx(エンター)

通信失敗。そのキーは誰にも渡した記憶ないよ。(エラー)

あと正座だよ!その足ヒレをたたんで座れ!

オムそば
オムそば

(…無理だって。)

これがAPIキーを使用したアクセス認証の流れです。

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

また今回はAPIキーを直にURLに指定していますが、実装方法はサービスによって様々です。

あとAPIキーは他の人に教えちゃだめだぞ。

オムそば
オムそば

【Twitter】

APIキー取得なうwwww

ap15KF7sgaL1Pだったwww

。。。

APIキーは他人に知られると勝手にAPIを使用されるなど悪用に繋がる可能性もあります。

APIキー管理には気を付けましょう。

 

ちなみに僕が使ったYouTubeのAPIはフロントエンドでの実装がメインなので、開発者ツールからAPIキーが丸見えです。

対策として特定のURLから叩いた時だけ通信できるように制限(リファラーで制限)出来るので、実装の際は活用してみてください!

APIで受け取った情報から欲しいものだけ抜き出せないの?

f:id:pakamori:20191109222907j:plain

オムそば
オムそば

決めた。僕はカレーの材料一覧を作るんだ。

オムそば
オムそば

カレーに関係する情報だからcookingがカレーの情報だけ必要なのか。

パラメータでカレーの情報を取ってくるように指定してあげればいいよ。

さっきのkey=ってやつもパラメータだよ。

APIキーの後ろの後ろに&で条件を指定してあげてね。

オムそば
オムそば

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

オムそば
オムそば

こんな感じ?(エンター)

そうそう。どぞ。

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

 

オムそば
オムそば

cookingがカレーの情報だけ返ってきた!

 

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

 

基本APIにはそのAPI固有のパラメータが色々用意されています

これらを駆使して上記のように自分が欲しい情報だけを見つけ出すこともできます。

さらに取得したデータ情報ブラウザに表示させたい場合や、その情報を使ってWebアプリケーションを作りたい場合には、HTMLとJavaScriptについて知る必要があります。

APIによってはPHPなどサーバーサイドの知識も要することもありますが、まずはHTMLとJavaScript(Ajax)について知っておくと良いかと思います。

まとめ

今回はAPIとは何かについて解説しました。

ちなみに実際に僕が使用したYouTubeのAPI(YouTube Data API v3)も基本的な機能は無料で使えるAPIです。

こちらは最低限HTML、JavaScript(Ajax)の知識があれば使用できるAPIでした。

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

console.developers.google.com

コメント

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