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
【すべての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
【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
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2022年01月17日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

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
病院のホームページを制作するポイント(まとめ)
ディレクター
公開日: 2019年03月04日
最終更新日: 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
ASPってなに?ASPサービスの概要とメリット、デメリットについて調査してみた
web担当者
エンジニア
ツール
ディレクター
制作
公開日: 2020年06月16日
最終更新日: 2022年01月17日
ASPってなに?ASPサービスの概要とメリット、デメリットについて調査してみた
  • # ASP
オンスタ運営

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
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2022年01月17日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営

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
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
エンジニア
制作
公開日: 2019年09月02日
最終更新日: 2022年01月17日
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
オンスタ運営

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
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2022年01月17日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # 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
  • # 共同編集
  • # 新機能
オンスタ運営
全記事一覧

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

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

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

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