MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた

【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた

公開日:2020年06月23日
最終更新日:2022年01月17日
オンスタ運営
web担当者
エンジニア
ツール
ディレクター
制作
ホーム > 全記事一覧 > 制作 > 【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!オンスタ運営。ケイジャニストやまだです!
さて、今回はwebAPIということで、webAPIについて記事にしてみたいと思います。

webAPI系の記事というと、実際に作ってみた系の記事が散見されますが、本記事ではその仕組みをできるだけ誰でもイメージできるよう工夫、また、どんなことができるのか?といったwebAPIの仕組みに対する知見と、概要について解説したいと思います!

それでは行ってみましょう!

webAPIを使ったサービスを見てみよう

まずはwebAPIを使うとどんなことができるのかのイメージを共有したいと思います。
webAPI利用して作られたサービスについて見てみましょう。

  1. いま飛んでいる飛行機をリアルタイムでマップに表示する
    https://www.flightradar24.com/35.16,136.98/7
  2. twitterのまとめ
    https://togetter.com/
  3. 水族館の口コミサイト
    http://www.japan-aquarium.com/web.html

などです。上記はtwitterやGoogleといったサービスのwebAPIを通じて、データを引っ張ってきて加工し、コンテンツを作っています。

webAPIを使うとどんなことができるの?

すでに上述のサンプルを見ていただけばイメージできると思いますが、一口に言うと、いちいち自分たちで膨大なデータを管理したり、処理したりするコードを
書かなくても、誰かが提供してくれたwebAPIを使って自分のサイトに無い情報を表示することができるようになるということです。もう少し突っ込んで解説すると「どこか別のサービスからデータを間借りして、それを使ってなにか別のサービスを生み出すことができる」ということです。
webAPI提供をしているサービスはGoogleやTwitter、Yahooなど、webの巨人たち以外にも「ぐるなび」や「食べログ」といったグルメサイト、「Instagram」などのSNSも含め、多くのサイトが使える範囲は決まっていますが、「自身の持っているデータ」をwebAPIを通じて提供してくれています。
webAPIを使うと、自分自身では用意できない様々なデータや仕組みを使うことができるようになり、アイディア次第で、革命的なサービスを生み出すことができる、とてもありがたいwebの仕組みという理解でいいでしょう。

webAPIのイメージをつかむための事前知識

さて、そんなwebAPIですが、突然表示されなくなる(API提供元が提供をやめてしまう。認証が切れるなど)場合もあったりと、あらかじめ簡単な知識をもっておく必要があります。ここではそのwebAPIに関して、イメージをつかむための事前知識について解説したいと思います。

webサイトを表示する仕組みを知る

さて、まずはこのwebサイトが表示される仕組みについて解説したいと思います。簡単に図解しますので、仕組みを理解するといった固いものではなく、イメージを掴むといった形で読み進んでいただければと思います。

webサイトが表示される仕組みの概要

ブラウザを介して、webサイトを表示するとき、一体どんな仕組みで動いているのでしょうか?概要としては以下のようなものになります。

  1. クライアント(ブラウザ)からhttpっていう決まりにそってサーバーにリクエストを送る。
  2. リクエストを受けたサーバーが頑張ってリクエストに対する処理する。
  3. 処理が完了するとクライアントへレスポンスを返してくれる。
  4. 返ってきたレスポンスを解析してページが表示される。

なかなかイメージできないと思いますので、以下の図解を参照してみましょう。


いかがでしょう?ブラウザを介してwebサイトを表示した後、他のページに移動した時も同じく、上記手順にて表示されます。
ページを開くたびに上記のような流れをインターネットを介して行なっているんですね。

webAPIについてもhttp(https)を通じて、上記と同じことをやります。
基本的な知識ですので、ぜひ覚えてくださいー!

APIについて知る

次にAPIについて簡単に解説したいと思います。
webAPIとはwebを通じて利用するAPIということで、APIについても把握しておく必要があります。

APIとは?

ではAPIとはなんでしょう?以下wikipediaからの引用です。

APIは、アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。

簡単にいえば「アプリケーションをプログラムするにあたって、プログラムの手間を省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事」と言えます。
ものすごくかいつまんで言うと、処理をまとめたものということになります。

twitterのTL(TimeLine)を表示する仕組みでイメージをつかむ

実際のイメージについても図解でご紹介いたします。下記の図はtwitterのTimeLineをttwitterAPIを通じて表示する仕組みを図解したものです。

webAPIを使うためにはどうすればいいの?

基本的にはAPI提供元に準じた利用になるため、千差万別です。
無料で使えるものから、有料、アクセス数によっての自動切り替えのため、クレジットカードの登録が必須など様々な条件をクリアして、提供元の規約に乗っ取って利用する必要があります。また、こういった利用規約以外にも提供されている言語の指定などもあります。

https://webservice.rakuten.co.jp/document/
※上記は楽天APIの仕様です。

上記のようにwebAPI提供元によりますので、「こんなAPI使いたい!」と行った場合は必ず提供元の仕様を確認すると良いでしょう。

その他

ここまで簡単にwebAPIについて概要を解説してきました。上記以外にも注意点があります。
それはサービスの提供元に依存する仕様になるということです。

たとえば、楽天のAPIを利用して何かサービスを作ってローンチ。成功してたくさんの利用者がいると仮定します。
ですが基本的に提供元に依存しますので、「ある日楽天のAPIの規約が変わって、突然サービスを利用できなくなってしまう。」といったことが往々にしてあります。

単純に規約が変わっただけであれば、規約に沿ってもう一度手続きをすればいいかもしれませんが、API提供自体を廃止するということになりますと、そのAPIありきでのサービスの場合、継続して利用することができなくなってしまいます。

こういった側面がありますので、APIを前提にしたサービスを作成する場合は、十分に注意して選定するようにしましょう。

まとめ

ここまでwebAPIについて解説してまいりました。使いこなすことができれば強力なサービスを作り出すこともできるので、ぜひ利用してみてくださいね!以上、ケイジャニストでした〜!!

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2022年01月17日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【キャプチャ付き】最大100GBの大容量ファイル転送「Dropbox Transfer」の利用方法|宅ふぁいる便・GigaFileの代わりになるかも!
ディレクター
公開日: 2019年11月06日
最終更新日: 2022年01月17日
【キャプチャ付き】最大100GBの大容量ファイル転送「Dropbox Transfer」の利用方法|宅ふぁいる便・GigaFileの代わりになるかも!
  • # Dropbox Transfer
  • # ファイル転送
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ユーザビリティってなに?ユーザビリティの概要と、その重要性について簡単にまとめてみた
web担当者
制作
公開日: 2020年08月18日
最終更新日: 2022年01月17日
ユーザビリティってなに?ユーザビリティの概要と、その重要性について簡単にまとめてみた
  • # ユーザビリティ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2022年01月17日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2022年01月17日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【web初心者必見】webサイトってどんな種類があるの?webサイトの種類に関してまとめてみた。
web担当者
ツール
制作
公開日: 2020年06月30日
最終更新日: 2022年01月17日
【web初心者必見】webサイトってどんな種類があるの?webサイトの種類に関してまとめてみた。
  • # webサイトの種類
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【Code.org】4歳から18歳まで!ビジュアルプログラミング言語でプログラミングが学べる『Code.org』について調べてみた
エンジニア
オンライン学習
プログラミング
制作
公開日: 2020年07月21日
最終更新日: 2022年01月17日
【Code.org】4歳から18歳まで!ビジュアルプログラミング言語でプログラミングが学べる『Code.org』について調べてみた
  • # Code.org
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
web担当者
エンジニア
セミナー・カンファレンス
デザイナー
制作
公開日: 2020年09月15日
最終更新日: 2022年01月17日
IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
  • # IT勉強会
  • # TechPlay
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
web担当者
ツール
制作
広告
公開日: 2020年08月31日
最終更新日: 2022年01月17日
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2022年01月17日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。