JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでブラウザを判定してサイト訪問者をリダイレクトする方法

最新のWebサイトには先進的な機能が数多く実装されていますが、その一部は特定のブラウザ(特にInternet Explorerなどのレガシーブラウザ)と互換性がない場合があります。幸い、JavaScriptを使えばサイト訪問者がどのブラウザを使用しているのか(あるいは使用していないのか)を検出できます。これにより、訪問者をそれぞれのブラウザに対応したバージョンのサイトへ自動的に誘導することが可能になります。

Chrome以外のブラウザ利用者をリダイレクトする方法

たとえば、サイトの最新バージョンが現時点でChromeブラウザでのみ100%正常に動作するとしましょう。この場合、Chromeを使っていない訪問者を別バージョンのサイトへリダイレクトすれば、不具合のある体験を避けられます。

次のコードをサイトの<head>セクション内、または外部の.jsファイルに追加してください。

if (!!window.chrome) {
  window.location = "https://yourdomain.com"
} else {
  window.location = "https://yourdomain.com/legacy-version"
}

さらに一歩進んで、リダイレクトされる理由をユーザーに説明したり、最高の体験を得るためにChromeの使用を促したりしてもよいでしょう。

if (!!window.chrome) {
  window.location = "https://yourdomain.com"
  alert("You're using Chrome")
} else {
  alert(
    "Our apologies, at the moment you have to use Chrome to use the latest version of our website. You'll be redirected to our legacy website (don't worry it works just fine!)."
  )
  window.location = "https://yourdomain.com/legacy-site"
}

これで、Chromeを使用していないユーザーは、window.locationに指定したURLへ自動的にリダイレクトされます。

動作を確認するには、CodePenのサンプルをまずChromeで開き、続けてFirefoxやOperaなど別のブラウザでも開いてみてください。ブラウザごとに異なるページへ遷移することわかるはずです。

実装時の注意点

実際のサイトでこのコードを運用する場合は、デモ用に追加したalert("You're using Chrome")の行を必ず削除してください。

また、window.chromeによる判定には限界があることにも注意が必要です。Chromiumベースの新版Microsoft Edgeなど、一部のブラウザもwindow.chromeオブジェクトを持っているため、厳密な判定にはユーザーエージェント文字列との組み合わせや、feature detection(機能ベースの判定)を併用するのが安全です。

ブラウザ検出技術は常に進化している

ブラウザの検出技術は変化と進化が非常に速い分野です。ブラウザごとに異なる検出手法が必要になるだけでなく、ユーザーがアクセスするデバイス(ノートPC、タブレット、スマートフォンなど)によっても挙動が異なります。

最新のブラウザ検出技術の動向を把握するには、StackOverflowの活発な議論スレッドを定期的にチェックすることをおすすめします。実際の開発現場で遭遇する課題や、新しいブラウザへの対応方法が継続的に共有されています。

  1. Windows 10でChromeをデフォルトブラウザに設定する方法｜設定できないときの対処法も解説

    Google Chromeは、世界で最もインストールされているブラウザランキングで常に首位を獲得しています。これは偶然ではなく、直感的で使いやすいインターフェースを持つ実力が認められた結果です。Windows 10のPCには初期状態でMicrosoft Edgeがデフォルトブラウザとして設定されていることが多いですが、動作の遅さなどで貴重な時間を無駄にしてしまうこともあります。そこで本記事では、Windows 10でChromeをデフォルトブラウザに設定する方法を、複数の手順に分けて詳しく解説します。 Chromeをデフォルトブラウザに変更する方法 手順を始める前に、PCにGoogle Ch

  2. Chromeブラウザにパスワードをインポートする方法【CSV・Firefox・Edge対応】

    Chromeは世界で最も使われているブラウザ Google Chromeは世界で最も利用されているブラウザです。人気ブラウザに関する調査では、全ユーザーの約70%がChromeを使っているという結果が出ています。Chromeの最大の魅力は、OSやデバイス、インターネット接続環境に関わらず、あらゆる状況で安定した動作を実現する優れた安定性です。他のブラウザには独自の便利機能や特徴的なギミックが搭載されているものもありますが、既定のブラウザを選ぶ際に最も重視すべきは「パフォーマンス」「安定性」「信頼性」の3要素。そのすべてを高いレベルで満たしているのがGoogle Chromeなのです。 すでに