「書籍検索システムの実装・さらに学びたい人のために」HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 第5回目 | デザインってオモシロイ -MdN Design Interactive-

「書籍検索システムの実装・さらに学びたい人のために」HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 第5回目

2020.4.8 WED

HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発
第5回目/書籍検索システムの実装・さらに学びたい人のために
2020年3月18日 TEXT:ニック

これまでの4回で、APIを利用する上で覚えておきたい用語や技術をいくつかご紹介してきました。今回はまとめとして、Google Books APIを利用した簡単なサンプルアプリを開発するとともに、REST API利用時に注意するべき事柄について解説します。

 

書籍検索アプリのサンプル
Google Books APIを利用して、書籍名を取得する、単純なアプリを作ってみました。仕様は以下の通りです。

  • ・入力フォームから、ISBNコードを入力し、検索
  • ・一致する書籍があった場合、書籍のタイトルを表示
  • ・存在しないISBNだった場合、エラーメッセージを表示

以下、サンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>REST API サンプル</title>
</head>
<body>
  <h1>ISBNから書籍タイトルを調べる</h1>
  <div>
    <p>ISBNコードを入力してください。</p><input id="isbn" type="text"> <button id="button" onclick="searchBook()">書籍検索</button>
    <div id="bookinfo"></div>
  </div>
  <script type="text/javascript">

  'use strict'

  function searchBook() { 
    const code = document.getElementById('isbn').value;
    const parent = document.getElementById('bookinfo');
    parent.textContent = null;

    fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:' + code)
      .then(response =>  {
        return response.json();
      }).then( res => {
        const data = "書籍名:" + res.items[0].volumeInfo.title;
        parent.append(data);
      }).catch(function (error) {
         parent.append(error);
      });
  }
  </script>
</body>
</html>
フォームからISBNコードを入力して検索することで、書籍データを検索します。ISBNに該当する書籍が存在した場合、書籍名を表示します。エラーが発生した場合、エラーメッセージを表示します。

実際の動作サンプルを以下に公開しておきました。

https://codepen.io/TakeshiNickOsanai/pen/MWYOogO
APIの利用権限
とても便利なREST APIですが、誰もが全てのサービスを自由に利用できる訳ではありません。多くのAPIは、利用する権限があるかどうかを事前にチェックし、権限の確認ができた場合のみ、利用を許可する場合がほとんどです。APIの利用権限チェックには、以下のような技術が使われます。

  • ・APIキー
  • ・OAuth2.0

APIキー、OAuthともに、APIの利用権限をチェックする技術です。

ページの都合上、詳細の解説は省きますが、REST APIを利用する上で、とても大事な技術となります。REST APIを利用した開発を行う場合は、上記についての学習は必須です。ぜひ時間を作って学習してみてください。
API利用時の注意点
不必要なリクエストは送らない

APIを利用するたびに、APIサーバーに対して負荷がかかります。不必要なリクエストを頻繁に送るようなアプリを開発すると、自分だけでなく、API提供事業者、そしてAPIを利用する他者のアプリに影響が発生する場合があります。不必要なリクエストを送らないように注意が必要です。


APIキーやトークンデータの秘匿性に注意を払う

多くのREST APIは、APIキーやアクセストークンなどのトークンデータを利用することでデータの利用が可能となります。設定を間違うと、悪意のある第三者にAPIキーやトークンデータを利用され、思わぬ事故や想定外の課金につながります。APIキーやトークンデータが意図せず利用されないよう、秘匿性に常に気を使う必要があります。

APIキーなどを無意識にインターネット上に公開した結果、数百万円にも及ぶ不正利用につながる事故が、あとを絶ちません。APIの利用権限を不正に利用されないよう、万全の注意を払いましょう。
更に理解を深めるために

今回の連載では、REST APIを利用するために、最低限必要な情報を中心に記述してきました。

REST APIを更に使いこなそうとお考えの方は、ぜひ以下のコンテンツもご覧ください。

クライアントサイド Web API

Moziilaの技術情報サイトは、Web技術を学び人々にとって学びの宝庫です。「クライアントサイド Web API」は、Web APIを利用した開発に焦点を当てたコンテンツとなっています。

Web Storage API

Web Stoprageは、ブラウザにデータを保存するための仕組みです。Web Storageを使いこなすことで、Webアプリ開発の幅がグッと広がります。


Web API インターフェース

ブラウザで使える各種のAPIを紹介したリファレンス情報です。GPSと連動して現在位置を取得する「Geo Location API」、ブラウザからファイルのアップロードを実現する「File API」、など、Webアプリ、そしてスマホアプリを開発する上で便利な機能が紹介されています。

「Web技術だけでこんなこともできるんだ」と、目から鱗が落ちることでしょう。

今回で連載は終了となります。これまでお付き合いいただき、ありがとうございました!




freee も REST API を公開しています。

freeeと開発者が共同で運営しているユーザーコミュニティ「freee Open Guild」では会員を募集しています。不定期に開催しており、freee、API、そのほかの技術領域について勉強会を開催しています。

https://freee-platform.connpass.com/

登録は無料ですので、ぜひご登録ください!

ニック(Takeshi Nick Osanai)

早稲田大学卒業後、株式会社アスキーでゲーム事業に従事。シックス・アパート株式会社でプロダクトマネージャー、ディベロッパーリレーションを担当後、2019年freeeへ入社。 AWS認定ソリューションアーキテクト(SAA)

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

3.30-4.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在