apiの仕組みとアプリケーションへの組み込み方法
アプリケーション・プログラミング・インターフェース（API）は、インテリジェントなアプリケーションを構築するための究極の近道の一つです。2つのアプリケーション間の通信チャネルである。意図的であろうとなかろうと、日常生活でインターネットを閲覧したり、プログラムを使用したりする際に、APIを利用することがあると思います。
APIはしばしば複雑なデータをレスポンスとして送りますが、この情報をどのように理解し、ユーザーに提供すればよいのでしょうか。apiは経験豊富な開発者にも新しい開発者にも、簡単に生活を提供します。そのため、アプリケーションでの使い方を知っておく必要があります。
ここでは、開発者の皆様がAPIをどのようにプログラムに活用できるかを、使用例や事例を交えてご紹介します。
APIはどのように動作するのですか？
開発者は、他の開発者のためになる製品としてAPIを作成します。その目的は、消費者である開発者や企業が複雑なWeb開発プロセスをシンプル、効率的、かつ迅速に行えるようにすることです。
現在、ほとんどの企業は、問題を解決し、より良いサービスを提供するために、サードパーティのAPIに依存しています。しかし、APIを使うことは多くの人が思っているほど複雑なことではありません。特定のHTTPリクエストをしたときに、データの形で特定のレスポンスを提供するサードパーティソリューションと考えることができます。
APIを使うのは、ピザ屋に注文するようなものです。厨房に入って要望を伝えてもダメなんです。ピザが戻ってくる前に、ウェイターが料理を取って厨房に伝える必要があります。
APIは、あなたとキッチンをつなぐものだと思えばいいのです。この例では、ウェイター（API）を提供するレストランをひいきにしているお客さまを想定しています。すると店員は、あなたが選んだピザを答えます（データ）。実際のAPIでは、Webアプリケーションはクライアントであり、エンドポイントHTTPリクエストを発行することで、プロバイダのAPIを通じてコンテンツの利用を要求する。
apiエンドポイントとは何ですか？
APIへの接続には、プログラム **APIエンドポイントが必要です。これは双方向の接続と考えることができます。あなたのプログラムに接続するエンドポイントはリクエストを送信し、APIに接続するエンドポイントはあなたに特定のレスポンスを返します。
エンドポイントとは、クライアントがAPIのリソースに直接アクセスすることを要求・許可するURLのことです。
APIを使用してデータを取得するだけでなく、プロバイダからのリクエストをクライアントにポストしたり、PUTメソッドを使用してプロバイダからさらに情報を取得したり、DELETEメソッドを使用して既存のデータをプログラムから削除することが可能である。これらの各メソッドは、通常、APIのドキュメントに記載されています。
apiへの接続規格
APIとプログラムの統合は、自発的に決定するのではなく、事前に検討されている。どんな情報が欲しいのか、どれくらい欲しいのか、それを知る必要があります。これにより、特にJSONデータを多次元配列として扱う場合の複雑さが軽減されます。また、この手法により、プログラムに必要な具体的な情報を得ることができます。
何百ものAPIがあり、それぞれ異なる接続ルールがあります。無料かつオープンソースのAPIもあれば、サブスクリプションベースでしか聞けないAPIもあります**。
シームレスでわかりやすく、前提条件を必要としないAPIもあれば、エンドポイントに接続する前にAPIキーの生成や開発者アカウントの登録などの条件を満たす必要があるAPIもあります。
関連：Aviati***tack APIを使ったプロジェクトにフライトデータを統合する
しかし、どのようなAPIであっても、最も重要な要素の1つはそのドキュメントです。ベストプラクティスは、あなたが接続しようとするAPIのドキュメントを読んで、コードの書き方やリソースの使い方のガイドラインに従うことです。これは、各APIが独自の接続方法と命令を持っているためです。
APIに接続するためには、そのAPIがサポートしているプログラミング言語も知っておく必要があります。
apiへの接続方法：例
APIに接続する具体的な方法はありませんが、APIのデータをあなたのアプリケーションで利用するための基本的な考え方を知るためのいくつかの例をご紹介します。しかし、その前に、APIとその活用方法について、いくつかの記事を書いています。
例えば、ライブの気象データにアクセスできるWeatherstack APIへの接続方法については、詳細な記事を掲載しています。また、Webサイトにニュースの見出しを追加するために利用できる有料API「Mediastack API」の使い方も解説しています。
ここでは、APIへの接続方法を説明する簡単なコード例を見てみましょう。
iro.js社カラーピッカーapiの使い方
Iro.js Inc.は、あなたのウェブサイトに無料のカラーピッカーを追加することができるシンプルなAPIです。カラーホイールのカラーポイントを選択すると、APIはその色の16進数またはRGBコードを返します。iro.js IncのAPIに接続するには、そのCDN（Content Delivery Network）のエンドポイントをDOMのheadセクションに貼り付けるだけでよいのです。
このAPIの完全なドキュメントは、iro.js.orgで入手できます。
<!DOCTYPE html><html><head><title>Practice Slider</title><script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script></head><body> <button id="color-button" onclick="sample()">Display color picker</button><div id="color-circle"> </div><div id="color-code"> </div></body><script>let colors= document.getElementById('color-code'); c***t sample= ()=>{ var colorPicker = new iro.ColorPicker('#color-circle', { // Set the size of the color picker width: 320, // Set the initial color to pure red color:"#ff0000" }); colorPicker.on(['color:change', 'color:init'], function(color) { // log the current color as a HEX string colors.innerHTML=color.hexString; });};</script></html>上記のサンプルAPIでは、APIキーがなくても接続できます。このAPIに接続するためには、iroクラスからColorPicker関数を呼び出し、カラーホイールコンテナのidを渡すだけでよいのですが、このJavaScriptを詳しく見てみましょう。
のエンドポイントであるiro.js社のAPIは、開発者がユーザーのためにクラスコードを追加で書いてくれているので、簡単に接続することができるのです。下の画像は、上記のサンプルコードの結果です。
色変更のイベントがどのように発生するかを見るために、別のHTMLファイルを開き、そのscriptセクションに次のコードを貼り付けます。
var colorPicker = new iro.ColorPicker('#color-pick', { // Set the size of the color picker width: 400, // Set the initial color to pure red color:"#ff0000" });c***t myColor =(color)=>{c***ole.log(color.hexString);};colorPicker.on("color:change", myColor);コントロールパネルのカラーセレクターの位置が変わるたびに、上記のコードに16進数の色値が記録されます。
関連：Marketstack APIでサイト訪問者を楽しませる
注：すべてのサンプルコードは、APIドキュメントに記載されている指示に従った結果です。
nocodeapi為替apiの使用方法
NoCodeAPIは、Currency Converter APIを含む多くのAPIを提供しています。その通貨交換エンドポイントに接続するには、NoCodeAPIマーケットプレースに行き、アカウントを作成してください。
ログインすると、ページの上部に検索バーが表示されます。この検索フィールドに「currency exchange」と入力し、クエリーが表示されたら、「Activate」をクリックします。
次のページで、makecurrenceexchangeapiをクリックします。次に、APIの好ましい名前を入力し、Createをクリックします。
APIが作成されたら、View Documentationをクリックします。次に、APIエンドポイントに接続するコードを表示するための優先言語を選択します。その後、サンプルコードをコピーして、アプリケーションに貼り付けて、さらにカスタマイズすることができます。
通貨変換については、以下のコード例をご覧ください。
<!DOCTYPE html><html><head><title>Currency converter</title></head><div id="currency"> </div></body><script>let currency= document.getElementById('currency');async function callingFn() { try { c***t resp***e = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", { method: "get", headers: { "Content-Type": "application/json" } }); c***t json = await resp***e.json(); currency.innerHTML="Success:" + JSON.stringify(json); } catch (error) { c***ole.error("Error:", error); }}callingFn();<script></html>上記のコードは、ドキュメントに記載されているコードを変更しただけのものですが、JavaScriptのレスポンス変数の変換パラメータには十分注意してください。
生のJSON出力は以下の通りです。
Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}APIを使用する
アプリケーションにAPIを使用することで、より早くプロジェクトを完了させることができます。APIドキュメントの中には専門的なものもありますが、初心者にも役立つAPIドキュメントがたくさんあります。
しかし、先に述べたように、データを取得したいAPIを十分に活用するためには、そのAPIのドキュメントをよく読み、接続のルールを守ることが必要です。
ここではJavaScriptを使用していますが、APIの種類によっては他のプログラミング言語をサポートしている例もまだ多くあります。言語サポートについては、どのAPIでもドキュメントから情報を得ることができます。また、ここで使用する例は、数あるapiの使用例のほんの一部に過ぎないことをご了承ください。
- 2021-03-29 15:48 に公開
- 閲覧 ( 40 )
- 分類：プログラミング
