はじめに
APIって何？ 初めて言葉を聞いた時、アプリケーションをつなぐ窓口のようなものだよと説明されて、わかったようなわからないような もやもや したまま、なんとなくわかった気になっていました。AWS資格を全て取得し、実務経験もそこそこに積んだので、説明が出来ないと恥ずかしいと考えて、主要なAPI一覧と概要を整理しました。あわせて、AWSソリューションアーキテクトとして、求められる観点を記載致しました。
AWS ソリューションアーキテクトに求められる観点
・AWS Lambda 関数上で実行されるアプリケーションを構築したい。
・複数の顧客がこのアプリケーションを使用する。
・各顧客に特定の期間のリクエストの割り当てを与えたい。
・クォータは顧客の使用パターンと一致する必要がある。
これらの要件を満たすソリューションは?
ソリューション例
Lambda 関数を呼び出すためのプロキシ統合を使用して Amazon API Gateway REST API を作成する。顧客毎に、適切なリクエスト割り当てを含む API ゲートウェイの使用計画を構成する。顧客が必要とする各ユーザーの使用プランから API キーを作成する。
API Gateway を利用することで、顧客それぞれにAPIキーを作成することが可能。キーの所有者がアクセス可能なサービスのセットとサービスのステージ（テスト、ベータそして本番といった環境）をAPI開発者がコントロールすることが可能。
プロキシ統合のメリット
lambdaが受け取るeventパラメータからQueryStringなどのリクエストに含まれる情報にアクセスが可能となる。
APIの基本概念
API（Application Programming Interface）を使用する事で、ブラウザやWebアプリケーションの機能を拡張する事が出来るようになります。
-
インターフェース
異なるシステムが互いに通信し、データや機能を共有することができます。 -
リクエストとレスポンス
クライアント（リクエストを送信する側）は、特定のリクエストをAPIに送信し、サーバー（リクエストを処理する側）はそのリクエストに応じてレスポンスを返します。 -
プロトコル
最も一般的なプロトコルはHTTP/HTTPSであり、Web API（RESTful APIやSOAPなど）で広く使用されています。 -
エンドポイント
特定の機能やデータにアクセスするためのエンドポイントを提供します。エンドポイントは、URL形式で指定され、特定のリソースや機能にアクセスするためのパスを示します。
主要なJavaScript API一覧
①DOM API (Document Object Model)
②WebSocket API
③Fetch API
④XMLHttpRequest (XHR) API
⑤Window API
- History API
- Web Audio API
- WebRTC API
- Web Speech API
- Web MIDI API
- Location API,Context API
- Web Storage API
- Geolocation API
- Notification API
- Vibration API
①DOM API (Document Object Model)
概要: HTMLやXML文書の構造を操作するためのAPI。要素の取得、作成、削除、属性の操作、イベントの追加などが可能。
例: document.getElementById(), document.createElement(), element.addEventListener()
例: DOM APIを使用した基本的な操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM API Example</title>
<style>
#message {
color: blue;
}
</style>
</head>
<body>
<h1>DOM API Example</h1>
<button id="changeTextButton">Change Text</button>
<button id="addElementButton">Add Element</button>
<button id="removeElementButton">Remove Element</button>
<p id="message">This is a message.</p>
<div id="container"></div>
<script>
// 要素の取得
var changeTextButton = document.getElementById('changeTextButton');
var addElementButton = document.getElementById('addElementButton');
var removeElementButton = document.getElementById('removeElementButton');
var message = document.getElementById('message');
var container = document.getElementById('container');
// テキストを変更するイベントリスナーを追加
changeTextButton.addEventListener('click', function() {
message.textContent = 'The text has been changed!';
});
// 新しい要素を追加するイベントリスナーを追加
addElementButton.addEventListener('click', function() {
var newElement = document.createElement('p');
newElement.textContent = 'This is a new element.';
container.appendChild(newElement);
});
// 要素を削除するイベントリスナーを追加
removeElementButton.addEventListener('click', function() {
if (container.lastChild) {
container.removeChild(container.lastChild);
}
});
</script>
</body>
</html>
②WebSocket API
概要: 双方向通信を行うためのAPI。リアルタイムアプリケーション（チャット、ゲームなど）に使用され、接続の確立、メッセージの送受信、接続の終了など、さまざまな操作が可能です。
例: new WebSocket('ws://example.com/socket')
例: WebSocket APIを使用した基本的な操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket API Example</title>
</head>
<body>
<h1>WebSocket API Example</h1>
<button id="connectButton">Connect</button>
<button id="sendMessageButton">Send Message</button>
<button id="closeButton">Close Connection</button>
<input type="text" id="messageInput" placeholder="Enter message">
<pre id="output"></pre>
<script>
let socket;
// 接続ボタンのイベントリスナーを追加
document.getElementById('connectButton').addEventListener('click', function() {
// WebSocketオブジェクトを作成
socket = new WebSocket('ws://echo.websocket.org');
// 接続が開かれたときのイベントリスナー
socket.addEventListener('open', function(event) {
document.getElementById('output').textContent += 'Connected to WebSocket server\n';
});
// メッセージを受信したときのイベントリスナー
socket.addEventListener('message', function(event) {
document.getElementById('output').textContent += 'Message from server: ' + event.data + '\n';
});
// 接続が閉じられたときのイベントリスナー
socket.addEventListener('close', function(event) {
document.getElementById('output').textContent += 'Disconnected from WebSocket server\n';
});
// エラーが発生したときのイベントリスナー
socket.addEventListener('error', function(event) {
document.getElementById('output').textContent += 'WebSocket error: ' + event.message + '\n';
});
});
// メッセージ送信ボタンのイベントリスナーを追加
document.getElementById('sendMessageButton').addEventListener('click', function() {
const message = document.getElementById('messageInput').value;
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(message);
document.getElementById('output').textContent += 'Sent to server: ' + message + '\n';
} else {
document.getElementById('output').textContent += 'WebSocket is not connected\n';
}
});
// 接続を閉じるボタンのイベントリスナーを追加
document.getElementById('closeButton').addEventListener('click', function() {
if (socket) {
socket.close();
}
});
</script>
</body>
</html>
③Fetch API
概要: HTTPリクエストを行うためのモダンなAPI。Promiseベースの設計により、非同期操作を簡単に扱うことができ、コードの可読性と保守性が向上します。GETリクエストやPOSTリクエストなど、さまざまなHTTPメソッドをサポートしており、最新のブラウザで広くサポートされています。
例: fetch('https://api.example.com/data')
例: Fetch APIを使用したGETリクエスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fetch API Example</title>
</head>
<body>
<h1>Fetch API Example</h1>
<!-- データを取得するためのボタン -->
<button id="fetchButton">Fetch Data</button>
<!-- 取得したデータを表示するためのプレ要素 -->
<pre id="result"></pre>
<script>
// ボタンがクリックされたときに実行されるイベントリスナーを追加
document.getElementById('fetchButton').addEventListener('click', function() {
// Fetch APIを使用してHTTP GETリクエストを送信
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => {
// レスポンスが正常でない場合にエラーをスロー
if (!response.ok) {
throw new Error('Network response was not ok');
}
// レスポンスボディをJSON形式でパースし、Promiseを返す
return response.json();
})
.then(data => {
// 取得したデータをプレ要素に表示
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
// エラーメッセージをコンソールに出力
console.error('There was a problem with the fetch operation:', error);
});
});
</script>
</body>
</html>
④XMLHttpRequest (XHR) API
概要: 非同期HTTPリクエストを行うためのAPIです。Fetch APIよりも古く、多くのブラウザでサポートされていますが、Fetch APIと比べて記述量が多くなります。それでも、XHRは依然として多くの既存プロジェクトで使用されており、特定の状況では有用です。
例: XMLHttpRequestを使用したGETリクエスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest Example</title>
</head>
<body>
<h1>XMLHttpRequest Example</h1>
<button id="fetchButton">Fetch Data</button>
<pre id="result"></pre>
<script>
document.getElementById('fetchButton').addEventListener('click', function() {
// XMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();
// リクエストの設定
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
// レスポンスが返ってきたときの処理
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // リクエストが完了したとき
if (xhr.status === 200) { // ステータスコードが200（成功）のとき
var data = JSON.parse(xhr.responseText);
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
} else {
console.error('Error: ' + xhr.status);
}
}
};
// リクエストを送信
xhr.send();
});
</script>
</body>
</html>
⑤Window API
概要: ブラウザウィンドウ全体を操作するためのAPIです。ウィンドウのタイトルの設定、サイズの変更、ページの読み込み/更新制御などに利用されます。
例: ブラウザウィンドウを操作するためのAPI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window API Example</title>
</head>
<body>
<h1>Window API Example</h1>
<button id="changeTitleButton">Change Title</button>
<button id="resizeWindowButton">Resize Window</button>
<button id="reloadPageButton">Reload Page</button>
<script>
// タイトルを変更するイベントリスナーを追加
document.getElementById('changeTitleButton').addEventListener('click', function() {
document.title = 'New Title';
});
// ウィンドウサイズを変更するイベントリスナーを追加
document.getElementById('resizeWindowButton').addEventListener('click', function() {
window.resizeTo(800, 600);
});
// ページをリロードするイベントリスナーを追加
document.getElementById('reloadPageButton').addEventListener('click', function() {
window.location.reload();
});
</script>
</body>
</html>
その他
１. History API
概要: ブラウザの閲覧履歴を操作するためのAPIです。履歴情報の取得、削除、移動などに利用されます。
２. Web Audio API
概要: ブラウザ上で音声の生成、再生、処理を行うためのAPIです。ゲームや音楽プレーヤーなどのアプリケーション開発に利用されます。
３. WebRTC API
概要: ブラウザ間でリアルタイムの音声・動画通信を行うためのAPIです。ビデオチャットやオンライン会議などのアプリケーション開発に利用されます。
４. Web Speech API
概要: ブラウザ上で音声認識や音声合成を行うためのAPIです。音声入力フォームや、読み上げ機能などのアプリケーション開発に利用されます。
５. Web MIDI API
概要: MIDIデバイスをブラウザから制御するためのAPIです。音楽制作や、楽器演奏などのアプリケーション開発に利用されます。
６. Location API,Context API
概要: ブラウザの現在のURLや、履歴などを操作するためのAPIです。ページ遷移の制御や、URL情報の取得などに利用されます。
７. Web Storage API
概要: クライアントサイドでデータを保存するためのAPI。localStorageとsessionStorageが含まれる。
-
例:
localStorage.setItem('key', 'value'),sessionStorage.getItem('key')
８. Geolocation API
概要: ユーザーの位置情報を取得するためのAPI。位置情報を使用して地図や位置ベースのサービスを提供する。
-
例:
navigator.geolocation.getCurrentPosition()
９. Notification API
概要: デスクトップ通知を表示するためのAPI。ユーザーに対して重要な情報を通知する。
例: new Notification('Hello, world!')
https://zenn.dev/appare45/articles/web-notification
１０. Vibration API
概要: デバイスを振動させるためのAPI。モバイルデバイスでのフィードバックに使用される。
例: navigator.vibrate([200, 100, 200])