コード行の下でメタ タグ スクレイピング API を構築する

Whatsapp や Telegram などのメッセージング アプリで、送信したリンクのプレビューがどのように表示されるのか疑問に思ったことはありますか?

Whatsapp と Telegram の URL プレビュー

この投稿では、URL を受け入れ、そのメタ タグを取得するスクレイピング API を Deno で構築します。これにより、ほぼすべての Web サイトからタイトル、説明、画像などのフィールドを取得できるようになります。

例:

curl https://metatags.deno.dev/api/meta?url=https://dev.to

この結果が得られます

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

かなりクールですね?

メタタグとメタタグが必要な理由

メタ タグは、ページに関する追加情報を検索エンジンや他のクライアントに提供するために使用される HTML 要素です。
これらのタグには通常、情報の種類を定義する name または property 属性と、その情報の値を含む content 属性が含まれます。 2 つのメタ タグの例を次に示します:

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

最初のタグはページの説明を提供し、2 番目のタグはページがソーシャル メディアで共有されるときに表示する画像を定義する Open Graph タグです。

メタ タグの実際的な応用例の 1 つは、ブックマーク マネージャーの構築です。各ブックマークにタイトル、説明、画像を手動で追加する代わりに、メタ タグを使用してブックマークされた URL からこの情報を自動的に取得できます。

グラフを開く

Open Graph は、ページのコンテンツを表すために Web ページ内でのメタデータの使用を標準化するために Facebook によって元々作成されたインターネット プロトコルであり、ソーシャル ネットワークがリッチ リンク プレビューを生成するのに役立ちます。
詳細については、こちらをお読みください。

なぜデノなのか？

1. Deno には安全なデフォルトがあり、ファイル、ネットワーク、環境へのアクセスには明示的な許可が必要であり、セキュリティ脆弱性のリスクが軽減されます。
2. Deno は Web 標準に基づいて構築され、ES モジュールを使用し、独自の API ではなく Web プラットフォーム API (フェッチなど) を使用することを目的としているため、Deno コードはブラウザで作成するコードと非常によく似ていますが、それでもある程度の仕様はあります。ブラウザからの逸脱。
3. Deno には TypeScript サポートが組み込まれているため、ビルドステップなしで TypeScript コードを作成できます。
4. Deno には、HTTP サーバー、ファイル システム操作などの一般的なタスク用のモジュールを含む標準ライブラリが付属しています。
5. Deno はリンター、フォーマッタ、およびテスト ランナーを提供しており、サードパーティのパッケージやツールに依存する代わりにプラットフォームを使用できるため、JavaScript 開発用のオールインワン ツールになります。
6. Deno は、グローバルに分散されたサーバーレス JavaScript/Typescript アプリケーション用のスケーラブルなプラットフォームである Deno Deploy を提供し、最小限の遅延と最大の稼働時間を保証します。

私たちが構築している API は、メタ タグを取得して解析する関数と、HTTP リクエストに応答する API サーバーの 2 つの部分で構成されます。

メタタグの取得

まず、Deno Deploy に移動してサインインします。
サインインしたら、「新しいプレイグラウンド」をクリックします

これが Hello World の開始点となります。
次に、URL を受け入れ、Fetch API を使用して要求された URL の HTML を取得し、それを HTML 解析用のパッケージ (deno-dom) に渡す getMetaTags という関数を追加します。
deno-dom をプロジェクトに追加するには、jsr パッケージ マネージャーを使用できます。

curl https://metatags.deno.dev/api/meta?url=https://dev.to

次に、Fetch API を使用して HTML をテキストとして取得します。

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

HTML を取得したら、deno-dom を使用して解析し、querySelectorAll などの標準 DOM 関数を使用してすべてのメタ HTML 要素を取得し、それらを反復処理して、getAttribute を使用して各要素の名前、プロパティ、コンテンツを取得します。これらのタグのうち:

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

最後に、<title> もクエリします。ページの要素を API のフィールドとして追加します:

import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";

これは正確にはメタタグではありませんが、便利なフィールドだと思うので、いずれにしても API の一部になる予定です。 :)

最終的な getMetaTags 関数は次のようになります:

  const headers = new Headers();
  headers.set("accept", "text/html,application/xhtml+xml,application/xml");
  const res = await fetch(url, { headers });
  const html = await res.text();

サーバー

簡単にするために、単純な Deno.serve() 呼び出しである Deno の組み込み http サーバーを使用することにしました。
deno は Web 標準に基づいて構築されているため、Fetch API の組み込み Response オブジェクトを使用してリクエストに応答できます。

curl https://metatags.deno.dev/api/meta?url=https://dev.to

サーバーはリクエスト URL を解析し、/api/meta パスへの GET リクエストを受信したかどうかを確認し、作成した getMetaTags 関数を呼び出して、メタ タグをレスポンス本文として返します。

2 つのヘッダーも追加します。1 つ目は、クライアントが応答で取得するデータの種類を知るために必要な Content-Type です。この場合、これは JSON 応答です。

2 番目のヘッダーは Access-Control-Allow-Origin で、API が特定のオリジンからのリクエストを受け入れることができるようにします。この場合、任意のオリジンを受け入れるために「*」を選択しましたが、次のオリジンからのリクエストのみを受け入れるように変更することもできます。フロントエンドのオリジン。
CORS ヘッダーはブラウザーによって行われたリクエストにのみ影響することに注意してください。つまり、ブラウザーはヘッダーで指定されたオリジンに従ってリクエストをブロックしますが、サーバーから API を直接呼び出すことは引き続き可能です。 CORS について詳しくは、こちらをご覧ください。

[保存して展開] をクリックできるようになりました

次に、denodeploy がコードをプレイグラウンドにデプロイするまで待ちます:

右上の URL はプレイグラウンドの URL です。それをコピーし、/api/meta?url=https://dev.to を追加して動作を確認します。URL は https://metatags.deno.dev のようになります。 /api/meta?url=https://dev.to
API が dev.to のメタ タグで応答していることがわかります!

導入

Denodeploy のプレイグラウンドを使用すると、コードは技術的にはすでにデプロイされており、公開されており、誰でもアクセスできます。
私たちが構築しているような単純な API の場合は、単一ファイルのプレイグラウンドで十分ですが、多くの場合、プロジェクトをさらにスケールしたいと考えます。そのためには、Deno デプロイの Github エクスポートを使用して、適切なコード リポジトリを作成できます。新しいコードのプッシュでの自動ビルドのサポートを備えた API:

またはプレイグラウンドの設定から:

注意事項

この投稿で紹介されているスクレイピング方法は、サーバーから返された HTML ファイルにメタ タグがある Web サイトでのみ機能します。つまり、サーバー レンダリングまたはプリレンダリングされたサイトは適切な結果を返す可能性が高く、シングル ページ アプリも同様に機能します。メタタグは実行時ではなくビルド時に設定されるためです。

結論

Deno を使用して API を構築してデプロイすることがいかに迅速かつ簡単であるかを実証し、メタ タグについて説明し、Fetch API、DOM パーサー、および Deno の組み込みサーバーを使用して API を構築する方法を説明しました。 40 行未満のコードで API をスクレイピングするメタ タグ。

この投稿で構築されたプロジェクトを確認するには、Deno デプロイ プレイグラウンドをチェックアウトしてください (/api/meta?url=https://dev.to を右側の URL バーに追加する必要があります)応答例) またはこの github リポジトリ。

---

次は何を作りますか?

この投稿が、メタ タグと Deno の力を探求するきっかけになってくれれば幸いです。独自のバージョンの API を構築してみるか、ブックマーク マネージャーなどのプロジェクトに API を統合してみてください。

行き詰まったり、質問がある場合、または自分が作成したものを自慢したい場合は、以下にコメントをドロップするか、Twitter/X で私とつながってください – ぜひご意見をお待ちしています!

40 行未満のコードで反応状態管理ライブラリを構築することに関する私の前回の投稿をここで確認してください。

以上がコード行の下でメタ タグ スクレイピング API を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。