External Links
JavaScriptを使用して、Drupalサイト上の外部リンク、mailtoリンク、電話リンクに視覚的なアイコンを追加します。
extlink
インストール
composer require 'drupal/extlink:^2.0'
概要
External Linksモジュールは、Drupalウェブサイト上で外部リンクと内部リンクを視覚的に区別するためのシンプルかつ強力なアプローチを提供します。JavaScriptを使用して、外部ウェブサイトへのリンク、メールアドレス（mailto:）、電話番号（tel:）を自動的に検出し、特徴的なアイコンでマークします。
このクライアントサイド実装により、アイコンはJavaScriptが有効なユーザーにのみ表示され、適切なARIAラベルによるアクセシビリティを維持しながらプログレッシブエンハンスメントを実現します。このモジュールは、アイコンの配置、Font Awesomeのサポート、リンク動作の変更（target="_blank"、rel="nofollow"、rel="noreferrer"）、CSSセレクタや正規表現パターンによる処理対象リンクの詳細な制御など、豊富な設定オプションを提供します。
External Linksは、ユーザーがサイトを離れることを明確に示す必要がある政府、教育、企業のウェブサイトに特に有用で、外部サイトへのナビゲーション前に警告ダイアログを表示できます。
Features
- 外部リンク、mailtoリンク、telリンクに視覚的なアイコン（SVGまたはFont Awesome）を自動追加
- 設定可能なtarget属性の動作により、外部リンクを新しいウィンドウ/タブで開く
- SEOとプライバシー制御のためにrel="nofollow"およびrel="noreferrer"属性を追加
- 外部サイトへのナビゲーション前にカスタマイズ可能なポップアップ警告ダイアログを表示
- デフォルトのSVGアイコンの代わりにFont Awesomeアイコンをサポート
- 設定可能なアイコン配置：リンクテキストの前、先頭に追加、末尾に追加、後ろ
- 正規表現を使用したパターンマッチングで特定のURLを含めるまたは除外
- CSSセレクタベースのフィルタリングで特定のページ領域を対象または除外
- サブドメインを内部リンクとして扱い、一貫したサイト識別を実現
- 信頼できる外部サイトをホワイトリストに登録するための許可ドメインリストをサポート
- 最後の単語とアイコンを一緒に保持することでテキストの分離を防止
- アクセシビリティ向上のため装飾的なアイコンをスクリーンリーダーから非表示
- Drupal 6および7バージョンからの移行サポートを提供
- 多数のパターンを持つサイトでインラインスクリプトサイズを削減するための外部JSファイルオプション
- 追加のスタイリング柔軟性のためのカスタマイズ可能なCSSクラス
Use Cases
政府ウェブサイトのコンプライアンス
政府ウェブサイトでは、ユーザーが公式ドメインを離れることを明確に示す必要があることが多いです。External Linksを設定して、すべての外部リンクにアイコンを表示し、ポップアップ警告を有効にし、ユーザーのプライバシーを保護するためにrel="noreferrer"を追加します。
Eコマースのアフィリエイトリンク処理
オンラインストアはパターンマッチングを使用して、信頼できるアフィリエイトパートナードメインを外部リンクインジケーターから除外し、他のすべての外部リンクをマークできます。パートナーサイトをホワイトリストに登録するにはallowed_domains設定を使用します。
外部リソースリンクを持つイントラネット
企業のイントラネットは、CSSセレクタフィルタリングを使用して、外部リソースを含む可能性のあるナビゲーションメニューやフッターリンクを除外しながら、コンテンツエリアでのみ外部アイコンを表示できます。
SEO最適化されたコンテンツサイト
コンテンツパブリッシャーは外部リンクでrel="nofollow"を有効にしてリンクエクイティの配分を制御し、除外パターンを使用して信頼できるパートナーサイトのfollow属性を保持できます。
アクセシビリティの強化
スクリーンリーダーラベルを有効にし、適切な場合は装飾的なアイコンを非表示にして、視覚障害のあるユーザーが冗長なアナウンスなしでリンク先を理解できるようにします。
マルチサイトネットワーク
異なるサブドメインで複数のDrupalサイトを運営する組織は、サブドメイン除外オプションを有効にして、ネットワーク内のすべてのサイトを内部として扱い、クロスサイトリンクに外部インジケーターが表示されないようにできます。
Tips
- ナビゲーションメニューやフッターで外部インジケーターが視覚的に煩雑になる場合は、CSSセレクタを使用して除外してください
- 多数の除外パターンを持つサイトでは、外部JSファイルオプションを有効にしてページ重量を削減してください
- テーマのJavaScriptでDrupal.theme関数をオーバーライドして、アイコンの外観を完全にカスタマイズできます
- デザイン要件に基づいて外部リンクを異なるスタイルにするためにカスタムCSSクラスを追加してください
- 信頼できるパートナーサイトには、複雑な正規表現パターンではなくallowed_domains設定を使用してください
- ブラウザ開発者コンソールでパターンマッチングをテストするには：new RegExp('your-pattern', 'i').test('test-url')
Technical Details
Admin Pages 1
/admin/config/user-interface/extlink
サイト全体で外部リンク、mailtoリンク、電話リンクの表示と動作を設定します。アイコンの外観、リンク属性、警告メッセージ、フィルタリングオプションを制御できます。
権限 1
Hooks 2
hook_extlink_settings_alter
モジュールがJavaScriptに渡される前のすべてのExternal Links設定を変更できるようにします。
hook_extlink_css_exclude_alter
モジュールがCSS除外セレクタ文字列を具体的に変更できるようにします。
Troubleshooting 6
ブラウザでJavaScriptが有効になっていることを確認してください。管理ページでテストしている場合は、モジュールが管理ルートで無効化されていないか確認してください。CSSセレクタがコンテンツエリアを除外していないか確認してください。設定変更後はDrupalキャッシュをクリアしてください。
extlink_includeパターン設定を確認してください - 内部URLに誤ってマッチしている可能性があります。allowed_domainsにタイプミスがないか確認してください。サブドメイン処理のために「同じプライマリドメインのリンクを除外」を有効にしてください。
このオプションを有効にする前に、Font Awesomeライブラリがサイトに正しく読み込まれていることを確認してください。正しいFont Awesomeバージョンのクラスが設定されているか確認してください（FA 4.xは「fa fa-external-link」を使用、FA 5+は「fas fa-external-link-alt」を使用）。
「ポップアップ警告を表示」オプションが有効になっていることを確認してください。ブラウザコンソールでJavaScriptエラーを確認してください。他のJavaScriptがクリックハンドラに干渉していないか確認してください。
外部JSファイルオプションを有効にした後、すべてのキャッシュをクリアしてください。/extlink/settings.jsがアクセス可能か確認してください（セキュリティルールでブロックされていないか）。モジュールのイベントサブスクライバーがキャッシュされたアセットを適切にクリアしているか確認してください。
パターンはJavaScript正規表現であることを覚えておいてください。特殊文字はバックスラッシュでエスケープする必要があります（例：example.comではなくexample\.com）。適用前にブラウザコンソールでパターンをテストしてください。
Security Notes 5
- 「administer extlink」権限は「restrict access」としてマークされており、信頼できる管理者にのみ付与する必要があります
- noreferrer属性はデフォルトで有効になっており、外部サイトにリファラー情報を送信しないことでユーザーのプライバシーを保護します
- 「新しいウィンドウで開く」を有効にすると、モジュールは自動的にrel="noopener"を追加してリバースタブナビング攻撃を防ぎます
- 警告テキストはXss::filterAdmin()を使用してサニタイズされ、警告メッセージでのXSS脆弱性を防ぎます
- すべてのユーザー提供のラベルとパターンは、JavaScriptに出力される前に適切にエスケープされます