第5回目／書籍検索システムの実装・さらに学びたい人のために
これまでの4回で、APIを利用する上で覚えておきたい用語や技術をいくつかご紹介してきました。今回はまとめとして、Google Books APIを利用した簡単なサンプルアプリを開発するとともに、REST 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>実際の動作サンプルを以下に公開しておきました。
https://codepen.io/TakeshiNickOsanai/pen/MWYOogO
- ・APIキー
- ・OAuth2.0
APIキー、OAuthともに、APIの利用権限をチェックする技術です。
ページの都合上、詳細の解説は省きますが、REST APIを利用する上で、とても大事な技術となります。REST 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と開発者が共同で運営しているユーザーコミュニティ「freee Open Guild」では会員を募集しています。不定期に開催しており、freee、API、そのほかの技術領域について勉強会を開催しています。
https://freee-platform.connpass.com/
登録は無料ですので、ぜひご登録ください！
ニック(Takeshi Nick Osanai)
早稲田大学卒業後、株式会社アスキーでゲーム事業に従事。シックス・アパート株式会社でプロダクトマネージャー、ディベロッパーリレーションを担当後、2019年freeeへ入社。 AWS認定ソリューションアーキテクト(SAA)
