開発者に最適な API — SitePoint

API はインターネット上のどこにでもあり、API を操作する方法を知ることは、現代の Web 開発者にとって重要なスキルです。 サードパーティのデータにアクセスして対話できるようになると、多くの優れた方法でアプリを次のレベルに引き上げることができます!

この記事では、開発者がアクセスできる最高の API のいくつかと、APILayer を使用して簡単にアクセスできるようにする方法を見ていきます。

この記事は、APILayer と協力して作成しました。 SitePoint を可能にするパートナーをサポートしていただきありがとうございます。

API とは

APIの略 アプリケーションプログラミングインターフェースであり、2 つのプログラムが相互に通信できるようにするものなら何でも記述できます。 たとえば、次のような方法 document.insertNode 実際には JavaScript の一部ではありません。これらは、プログラムが DOM と通信できるようにする DOM API の一部です。

Web API を使用すると、コードは制御された方法で Web サイトやオンライン サービスと通信および対話できます。 ほとんどの場合、これは何らかのデータを返すリクエストを送信することによって行われます。データはほとんど常に JSON 形式です。 このデータは、コードで使用できます。

多くの API では、ワークロードの一部をアプリケーションから外部サービスにオフロードすることもできます。 たとえば、ドキュメントを翻訳したい場合、これを行うためのすべてのコードを記述する必要がなくなり、代わりに API を使用できます。

APIレイヤー

APILayer は厳選された API マーケットプレイスです。 すべての API は、APILayer の開発者チームによって慎重に選択され、サイトの成長に合わせてスケーリングできるように、安全で安定しています。 すべての API には無料プランがあり、開始するために支払いの詳細を渡す必要はありません。 APILayer は現在、ほぼ 100 の API を備えており、さらに多くの API が常に追加されています。 これらの API は、金融から食品まで、さまざまなカテゴリをカバーするだけでなく、画像処理やスペル チェックなどの多数の Web 開発ツールを備えています。

各 API にはさまざまな支払い段階があり、無料から始まり、作成するリクエストの数に応じて価格が上がります。 一部の有料プランでは、要求されるデータの種類がさらに多くなる場合もあります。 APILayer を使用すると、興味深い API に簡単にサインアップできます。また、API がブラウザーで直接どのように機能するかをテストできるライブ デモ機能を提供し、開始するためのサンプル コードを提供します。 また、各 API の完全なドキュメントとレビューも備えています。

API との対話

JavaScript を介して API を操作する最も簡単な方法は、 fetch. これは、URL から非同期的にデータを要求し、返されたデータにアクセスできるようにする promise を返します。

簡単な例を見てみましょう。

fetch("https://geek-jokes.sameerkumar.website/api?format=json")
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

このコードは Geek Jokes API からのデータを要求し、JSON 形式でランダムなジョークを返します。 API URL を fetch 関数。 これはプロミスを返し、チェーンすることができます then メソッドを使用して — まず、返された JSON を JavaScript オブジェクトに変換します。 json() メソッド、そして単にログに記録する joke このオブジェクトのプロパティをコンソールに表示します。 また、最後に catch ブロックを追加して、エラーをログに記録します。

フェッチ リクエストは、ヘッダーを含むリクエストの任意のオプションを指定できる 2 番目のパラメータを受け入れます。 かなり標準的なオプションのセットを以下に示します。

const headers = new Headers()

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

これらをリクエストに追加できます。

fetch("https://geek-jokes.sameerkumar.website/api?format=json", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.joke))
  .catch(error => console.log('error', error.message))

ほとんどのサービスでは、API へのアクセスを許可するためにキーを提供する必要があります。 これは、ヘッダーの一部として、または URL に含めることができます。

API キーを隠しておくことは非常に重要です。 通常、それらはサーバー上で保存および暗号化する必要があります。 これは、それらがソース コードに表示され、他の誰かによって使用されるのを防ぐためです。 会社はコードへの無料アクセスを提供したくないため、サブスクリプションの料金を会社に支払っている場合、これは通常より問題になります。

シックス・オブ・ザ・ベスト

開発者が APILayer でアクセスできる 6 つの最高の API を見てみましょう。 以下のすべての例では、アクセス キー (API キー) を自分のものに合わせて変更する必要があることに注意してください。

Spotify

Spotify API は、APILayer で利用できる最大の (そして最もクールな) API の 1 つです。 Spotify で利用できる大量の音楽やポッドキャスト データにアクセスできます。

この API を使用すると、アルバム、アルバム トラック、アーティスト、アーティスト アルバム、プレイリスト、トラック、トラックの歌詞などのデータを取得できます。 これは、アーティストを検索し、リリース時期やクレジットされている作家やミュージシャンなど、公開されたすべての作品/アルバムに関する情報を受け取ることができることを意味します。

特定のアーティストのすべてのアルバムを返す例を次に示します。

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const getAlbums = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch("https://api.apilayer.com/spotify/search?q=" + encodeURIComponent(event.target.artist.value), requestOptions)
    .then(response => response.json())
    .then(result => {document.getElementById("albums").innerHTML = result.albums.items.map(x => `
${x.data.name}`).join``})
    .catch(error => console.log(error.message))
}

document.getElementById("music").addEventListener("submit", getAlbums)

世界のニュース

World News API を使用すると、世界中の何千ものニュース ソースにアクセスできます。 結果はさまざまなニュース アウトレットから得られます。つまり、同じニュース ストーリーをさまざまな視点から得ることができます。

また、API は、各ニュース記事のタイトル、バイライン、作成者、概要、利用可能な写真など、膨大な量のデータを返します。 API を使用すると、日付と場所で記事を検索できます。つまり、最新のニュースだけでなく、特定のロケールの歴史的な記事も入手できます。 検索では、言語と出身国も指定できます。 ストーリーを「ポジティブ」または「ネガティブ」に分類する気の利いた AI 機能もあり、返されるストーリーをさらにキュレートできます。

以下は、今日の上位 5 つのニュース記事を返す例です。

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers
}

const today = new Date()
const date = `${today.getFullYear()}-${today.getMonth()+1}-${String(today.getDate()).padStart(2,'0')}`

fetch(`https://api.apilayer.com/world_news/search-news?number=5&language=en&earliest-publish-date=${date}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error))

const render = data => document.getElementById("news").innerHTML = data.news.map(story => `
${story.title}
${story.image}/>
${story.summary}`).join``

ウェザースタック

Weatherstack API を使用すると、世界中のどこからでも、特定の場所の現在および過去の気象統計にアクセスできます。 現在の機能では、気温、風向、気圧、視界などのリアルタイムの気象統計にアクセスできます。

ここでは、特に 2008 年 7 月までさかのぼる過去の気象機能にアクセスする膨大な量のデータがあります。つまり、2008 年 7 月以降の任意の日付から任意の場所の気象統計を取得できます。場所と日付は、次のように指定する必要があります。パラメーター。 履歴機能には、気象データを 1 時間ごとに分割するかどうかに応じて、1 または 0 に設定できるオプションの「毎時」パラメーターもあります。 データを 1 時間ごとに分割することを選択した場合は、データを分割する方法に応じて、「間隔」のオプションのパラメーターを 1、3 (デフォルト)、6、12、または 24 に設定することもできます。

過去の機能と現在の機能の両方にオプションの「単位」パラメーターがあり、データの単位をメートル法の「m」、華氏の「f」、または科学の「s」に設定できます。

特定の場所の現在の温度を返すコードの例を次に示します。

const getWeather = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
  }
    fetch("https://api.weatherstack.com/current?access_key=YOUR_API_KEY&query="+encodeURIComponent(event.target.city.value), requestOptions)
    .then(response => response.json())
    .then(result => document.getElementById("weather").innerHTML = `<h1>The current temperature in ${result.location.name} is ${result.current.temperature}℃h1>`)
    .catch(error => console.log(error.message))
}

document.getElementById("place").addEventListener("submit", getWeather)

番号確認

Number Verification API を使用すると、200 か国以上の電話番号を検索して、その信頼性を検証できます。 API は、国、国コード、携帯電話会社、および回線の種類 (携帯電話または固定電話) に関する詳細も返します。 これにより、Web アプリのユーザーから提供された電話番号をリアルタイムで確認できます。

以下は、電話番号をフォームに入力できる例です。 フォームを送信すると、番号が有効かどうかが返されます。 有効な場合は、電話番号が基づいている国も表示されます。

const headers = new Headers()
headers.append("apikey", "YOUR_API_KEY")

const verify = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.apilayer.com/number_verification/validate?number=${event.target.number.value}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("phone").addEventListener("submit",verify)

const render = data => document.getElementById("verification").textContent = data.valid ? `This is a valid phone number from ${data.country_name}` : `This is not a valid phone number`

ゼンサープ

Zenserp API は、検索エンジンの結果ページをよりクリーンなオブジェクト形式でスクレイピングできるようにする SERP (検索エンジンの結果ページ) API です。 そのエンドポイントには、Google、Image Reverse Search、YouTube、Bing、および DuckDuckGo が含まれます。 Google エンドポイントには、イメージ、マップ、ビデオ、ニュース、ショッピングのサブエンドポイントも含まれています。 結果には、人気のあるページや傾向を特定するのに役立つランキング情報も含まれます。

独自のリクエスト生成に使用できるリスト エンドポイントもいくつかあります。 これらには、Google の言語、Google の国、地理的位置、Google 検索エンジンが含まれます。

検索項目を指定すると、API は URL と説明を含む、表示されるすべてのページを返します。

トピックのトップ Google 検索を返す例を次に示します。

const headers = new Headers()

const serp = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://app.zenserp.com/api/v2/search?apikey=YOUR_API_KEY&q=${encodeURIComponent(event.target.q.value)}`, requestOptions)
  .then(response => response.json())
  .then(result => render(result))
  .catch(error => console.log('error', error.message))
}

document.getElementById("search").addEventListener("submit",serp)

const render = data => document.getElementById("result").innerHTML = `The top search result on Google is: <a href="${data.organic[0].url}"><h1>${data.organic[0].title}h1>a><p>${data.organic[0].description}p>`

ゼンスクレイプ

Zenscrape API は Web スクレイピング API であり、基本的な使用法として、任意の Web サイトの HTML コンテンツを返します。 このために必要なのは、1 つのパラメーター (ターゲット Web サイトの URL) と API キーのみです。 また、JavaScript または React や Vue などのフロントエンド フレームワークからページ上に動的 HTML を生成します。 これは、返される HTML がユーザーに表示されるコンテンツと同じであることを意味します。

最初は、これを使用する必要がないように思えるかもしれません。 しかし、Web スクレイピング (したがってこの API) は、統計のやり取りと分析に非常に役立ちます。 たとえば、この API を使用して、複数の異なるサイトで製品の価格を比較し、その製品に最適な価格を提供するショッピング サイトをユーザーに表示するアプリを作成できます。

API は、HTTP プロキシ インターフェイスも提供します。 HTTP プロキシは、すべての Web トラフィックをフィルター処理する高性能コンテンツ フィルターであり、ウイルスまたは侵入的で不要なデータである可能性のある疑わしいコンテンツにフラグを立てます。 このインターフェイスを使用すると、既にプロキシに依存している任意のアプリケーションを使用できます。API キーをユーザー名として使用し、通常はパスワードとして提供されるパラメーターを含めるだけです。

これにより、特定のプロキシの場所を指定して、特定のジオロケーション ベースのコンテンツを取得することもできます。 使用されるプロキシも自動的にローテーションされ、スクレイピング ボットの匿名性を維持し、サイトがスクレイピング回数を制限しないようにします。

URL を入力して HTML をコンソールに返す例を次に示します。

const headers = new Headers()

const scrape = event => {
  event.preventDefault()
  const requestOptions = {
    method: 'GET',
    redirect: 'follow',
    headers
  }
  fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(`https://app.zenscrape.com/api/v1/get?apikey=YOUR_API_KEY&url=${encodeURIComponent(event.target.url.value)}`)}`,requestOptions)
  .then(response => response.json())
  .then(result => console.log(result.contents))
  .catch(error => console.log('error', error.message))
}

document.getElementById("scrape").addEventListener("submit",scrape)

結論

これらの 6 つの例は、APILayer が提供する機能のほんの一部にすぎません。 利用可能な API は他にもたくさんあるので、サイトを十分に探索し、それらのいくつかを楽しんでください。 たとえば、Bad Words API はとてもお勧めです。