Zenn
👩‍👩‍👦‍👦

DenoでUser-Agentの解析を行う

2023/07/06に公開
JavaScript
TypeScript
Deno
tech
  • Webサーバーに自身のアクセス情報を伝える手段としてUser-Agentという仕組みがあります。
  • この仕組みによりサービス提供者が利用者のOSやデバイスによって最適化されたページを提供することが可能となっております。
  • 今回はDeno 1.35でUser-Agentを解析する方法を記録いたします。

環境

  • macOS 13.0
  • deno 1.35.0

コード

  • 任意のディレクトリにapp.tsを作成して、中身を以下の内容にします。
import { UserAgent } from "https://deno.land/std@0.193.0/http/user_agent.ts";

Deno.serve((req) => {
  const ua = new UserAgent(req.headers.get("user-agent"));

  // OS情報
  console.log(ua.os);
  console.log(ua.os.name);

  // ブラウザ情報
  console.log(ua.browser);
  console.log(ua.browser.name);

  // レスポンス
  return new Response("Hello");
});
  • 記述後、ターミナルにて以下のコマンドでプログラムを実行します。
deno run --allow-net app.ts
  • 実行後はlocalhost:8000が起動して、ChromeでアクセスするとHelloが表示されます。
    • ※Deno 1.35からDeno.serveというAPIが安定的になり、1行でWebサーバーを起動することが可能となっています。
  • 表示確認後、ターミナルでログを確認すると以下のような利用している「OS情報・ブラウザ情報」が出力されていることを確認します。

image.png

  • 次に「User-Agent」の情報を変更して確認してみます。
  • Chromeでは以下のようにデベロッパーツールを開き,
    「その他のツール」から「ネットワーク状態」へ遷移するとその中の「ユーザーエージェント」欄で利用情報を任意の内容へ変更することが可能です。
    • 今回はFirefox - iPadに変更した値で確認してみます。

image.png

image.png

  • 変更してページをリロード後、再度ターミナルを確認してログの利用情報が以下のようになっていることを確認します。

image.png

  • 以上です。

まとめ

参考

Discussion