ホームページ >ウェブフロントエンド >jsチュートリアル >コード行の下でメタタグスクレイピング API を構築する

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

DDDオリジナル: 2024-10-21 16:33:02617ブラウズ

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

Building a Meta Tags Scraping API in Under Lines of Code

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 によって元々作成されたインターネットプロトコルであり、ソーシャルネットワークがリッチリンクプレビューを生成するのに役立ちます。
詳細については、こちらをお読みください。

なぜデノなのか？

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

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

メタタグの取得

まず、Deno Deploy に移動してサインインします。
サインインしたら、「新しいプレイグラウンド」をクリックします
Building a Meta Tags Scraping API in Under Lines of Code
これが 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">

最後に、

もクエリします。ページの要素を API のフィールドとして追加します:<br> <pre class="brush:php;toolbar:false">import { DOMParser, Element } from "jsr:@b-fuze/deno-dom"; </pre> <p>これは正確にはメタタグではありませんが、便利なフィールドだと思うので、いずれにしても API の一部になる予定です。 :)</p> <p>最終的な getMetaTags 関数は次のようになります:<br> </p> <pre class="brush:php;toolbar:false"> 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(); </pre> <h2> サーバー </h2> <p>簡単にするために、単純な Deno.serve() 呼び出しである Deno の組み込み http サーバーを使用することにしました。<br> deno は Web 標準に基づいて構築されているため、Fetch API の組み込み Response オブジェクトを使用してリクエストに応答できます。<br> </p> <pre class="brush:php;toolbar:false">curl https://metatags.deno.dev/api/meta?url=https://dev.to </pre> <p>サーバーはリクエスト URL を解析し、/api/meta パスへの GET リクエストを受信したかどうかを確認し、作成した getMetaTags 関数を呼び出して、メタタグをレスポンス本文として返します。</p> <p>2 つのヘッダーも追加します。1 つ目は、クライアントが応答で取得するデータの種類を知るために必要な Content-Type です。この場合、これは JSON 応答です。</p> <p>2 番目のヘッダーは Access-Control-Allow-Origin で、API が特定のオリジンからのリクエストを受け入れることができるようにします。この場合、任意のオリジンを受け入れるために「*」を選択しましたが、次のオリジンからのリクエストのみを受け入れるように変更することもできます。フロントエンドのオリジン。<br> CORS ヘッダーはブラウザーによって行われたリクエストにのみ影響することに注意してください。つまり、ブラウザーはヘッダーで指定されたオリジンに従ってリクエストをブロックしますが、サーバーから API を直接呼び出すことは引き続き可能です。 CORS について詳しくは、こちらをご覧ください。</p> <p>[保存して展開] をクリックできるようになりました<br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959089268.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 次に、denodeploy がコードをプレイグラウンドにデプロイするまで待ちます:<br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959198494.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 右上の URL はプレイグラウンドの URL です。それをコピーし、/api/meta?url=https://dev.to を追加して動作を確認します。URL は https://metatags.deno.dev のようになります。 /api/meta?url=https://dev.to<br> API が dev.to のメタタグで応答していることがわかります!<br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959294656.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p> <h2> 導入 </h2> <p>Denodeploy のプレイグラウンドを使用すると、コードは技術的にはすでにデプロイされており、公開されており、誰でもアクセスできます。<br> 私たちが構築しているような単純な API の場合は、単一ファイルのプレイグラウンドで十分ですが、多くの場合、プロジェクトをさらにスケールしたいと考えます。そのためには、Deno デプロイの Github エクスポートを使用して、適切なコードリポジトリを作成できます。新しいコードのプッシュでの自動ビルドのサポートを備えた API:<br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959428755.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> またはプレイグラウンドの設定から:<br> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959544011.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p> <h2> 注意事項 </h2> <p>この投稿で紹介されているスクレイピング方法は、サーバーから返された HTML ファイルにメタタグがある Web サイトでのみ機能します。つまり、サーバーレンダリングまたはプリレンダリングされたサイトは適切な結果を返す可能性が高く、シングルページアプリも同様に機能します。メタタグは実行時ではなくビルド時に設定されるためです。</p> <h2> 結論 </h2> <p>Deno を使用して API を構築してデプロイすることがいかに迅速かつ簡単であるかを実証し、メタタグについて説明し、Fetch API、DOM パーサー、および Deno の組み込みサーバーを使用して API を構築する方法を説明しました。 40 行未満のコードで API をスクレイピングするメタタグ。</p> <p>この投稿で構築されたプロジェクトを確認するには、Deno デプロイプレイグラウンドをチェックアウトしてください (/api/meta?url=https://dev.to を右側の URL バーに追加する必要があります)応答例) またはこの github リポジトリ。</p> <hr> <h2> 次は何を作りますか? </h2> <p>この投稿が、メタタグと Deno の力を探求するきっかけになってくれれば幸いです。独自のバージョンの API を構築してみるか、ブックマークマネージャーなどのプロジェクトに API を統合してみてください。 </p> <p>行き詰まったり、質問がある場合、または自分が作成したものを自慢したい場合は、以下にコメントをドロップするか、Twitter/X で私とつながってください – ぜひご意見をお待ちしています! </p> <p>40 行未満のコードで反応状態管理ライブラリを構築することに関する私の前回の投稿をここで確認してください。</p>

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

JavaScript typescript json html Object if for while include try using public finally Attribute Property copy function dom this display github serverless kind http https Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery/JavaScriptでミリ秒を読み取り可能な日付に変換するにはどうすればよいですか?次の記事：jQuery/JavaScriptでミリ秒を読み取り可能な日付に変換するにはどうすればよいですか?

続きを見る

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

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

グラフを開く

なぜデノなのか？

メタタグの取得

関連記事

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