Mobile Detect
Mobile_Detect.phpライブラリに基づく軽量なモバイル検出モジュール。モバイルデバイス、タブレット、プラットフォームを検出するためのサービス、Twig関数、キャッシュコンテキスト、条件プラグインを提供します。
mobile_detect
インストール
composer require 'drupal/mobile_detect:^4.0'
composer require 'drupal/mobile_detect:^3.0'
概要
Mobile Detectは、人気のあるMobile_Detect.phpライブラリをDrupalに統合した軽量なモバイル検出モジュールです。モバイルファーストやレスポンシブデザイン手法を活用し、モバイルやタブレットユーザー向けに微調整が必要な開発者を支援するために設計されています。
このモジュールは、プログラムで使用できるサービス、テンプレートで使用するTwig関数、デバイスタイプに基づく適切なキャッシングのためのキャッシュコンテキスト、ブロックやその他の表示設定で使用できる条件プラグインなど、デバイス検出のための包括的なツールセットを提供します。
主な機能には、訪問者がモバイルデバイス、タブレット、デスクトップのいずれを使用しているかの検出、およびオペレーティングシステムプラットフォーム（iOS、Android）の識別が含まれます。モジュールはHTML要素にCSSクラス（is-mobile、is-tablet）を自動的に追加し、CSSベースのレスポンシブ調整を容易にします。
Features
- プログラムによるデバイス検出のためにDetection\MobileDetectライブラリをラップしたmobile_detectサービスを提供
- テンプレートベースのデバイス検出用Twig関数: is_mobile()、is_tablet()、is_device()、is_ios()、is_android_os()
- デバイス特性に基づく適切なキャッシュ変動のための3つのキャッシュコンテキスト（mobile_detect_device_type、mobile_detect_is_mobile、mobile_detect_platform）
- 電話、タブレット、デスクトップの検出をサポートする表示設定用のデバイスタイプ条件プラグイン
- AndroidとiOSの検出をサポートする表示設定用のデバイスプラットフォーム条件プラグイン
- 現在のデバイス検出結果を表示する開発・デバッグ用のMobile Detect Statusブロック
- CSSベースのレスポンシブデザインのためにHTML要素に自動追加されるCSSクラス（is-mobile、is-tablet）
- キャッシュコンテキストの添付によるParagraphsモジュールとの連携
Use Cases
モバイルとデスクトップユーザーで異なるコンテンツを表示
ブロックにデバイスタイプ条件プラグインを使用して、モバイルユーザーには簡略化されたナビゲーションメニューを、デスクトップユーザーにはフルメガメニューを表示します。ブロックの表示設定でデバイスが'phone'または'tablet'の場合のみ表示するよう設定します。
プラットフォームに基づいてアプリストアバッジを表示
デバイスプラットフォーム条件を使用して、iOSユーザーにはApp Storeバッジを、AndroidユーザーにはGoogle Playバッジを表示します。適切な条件設定で2つのブロックを作成します。
テンプレートでのレスポンシブ画像読み込み
テンプレートでis_mobile() Twig関数を使用して、モバイルユーザーには低解像度の画像を読み込みます: {% if is_mobile() %}<img src="mobile-image.jpg">{% else %}<img src="desktop-image.jpg">{% endif %}
カスタムモジュールでのプログラムによるデバイス検出
カスタムコードでmobile_detectサービスを注入または取得します: $detect = \Drupal::service('mobile_detect'); if ($detect->isMobile()) { // モバイル専用のロジック }
CSSベースのレスポンシブ調整
HTML要素に自動追加されるCSSクラス（is-mobile、is-tablet）をCSSベースのスタイリングに使用します: html.is-mobile .sidebar { display: none; }
Panel/Layoutバリアント選択
Panelsをページバリアントに使用する場合、デバイスタイプ条件を使用してタブレットバリアントとモバイルバリアントを作成します。Mobile_Detectはタブレットをモバイルデバイスとしても認識するため、バリアントリストではタブレットバリアントをモバイルより前に配置してください。
Tips
- Mobile_Detectはタブレットデバイスをモバイルデバイスとしても認識します。タブレットとモバイルの両方のルールを使用する場合は、タブレットが正しく識別されるよう、常にタブレットルールを先に配置してください。
- 開発中はMobile Detect Statusブロックを使用して、デバイス検出が正しく動作していることを確認してください。
- デバイス固有のコンテンツが必要な匿名ユーザーの場合、Internal Page Cacheを無効にする必要があることを覚えておいてください。これにはパフォーマンスへの影響があります。
- キャッシュコンテキストにより、Drupalは異なるデバイスタイプ用に別々のバージョンを適切にキャッシュします。カスタムコードでデバイス検出を使用する際は、常に適切なキャッシュコンテキストを含めてください。
Technical Details
Admin Pages 1
/admin/config/user-interface/mobile-detect
Mobile Detectの設定を行います。現在、すべてのページにmobile_detect_is_mobileキャッシュコンテキストを自動的に追加する実験的オプションを提供しています。
権限 1
Hooks 4
hook_preprocess_html
デバイス検出に基づいてHTML要素にCSSクラス'is-mobile'と'is-tablet'を追加します。また、mobile_detect_is_mobileキャッシュコンテキストも追加します。
hook_preprocess_paragraph
適切なキャッシュ変動のために、すべてのパラグラフにmobile_detect_is_mobileキャッシュコンテキストを追加します。
hook_page_attachments_alter
設定で有効にした場合、すべてのページにmobile_detect_is_mobileキャッシュコンテキストを条件付きで追加します。
hook_theme
ステータスブロックテンプレート用のmobile_detect_status_blockテーマフックを定義します。
Troubleshooting 3
Internal Page Cacheモジュールは、匿名ユーザーに提供されるすべてのページがキャッシュコンテキストに関係なく同一であると想定します。デバイス検出に基づいて匿名ユーザー向けのコンテンツを変える必要がある場合は、Internal Page Cacheモジュールを無効にする必要があります。
実際のデバイス検出ロジックに関する問題は、DrupalモジュールのIssue Queueではなく、Mobile_DetectライブラリのGitHub Issue Queueに報告してください。
キャッシュコンテキスト設定を変更した後、すべてのキャッシュをクリアしてください。用途に応じた正しいキャッシュコンテキスト（mobile_detect_device_type、mobile_detect_is_mobile、またはmobile_detect_platform）を使用していることを確認してください。
Security Notes 2
- このモジュールはDrupal Security Teamによるセキュリティカバレッジがあります。
- デバイス検出はクライアントによって偽装可能なユーザーエージェント文字列に基づいています。セキュリティ上重要な判断には使用しないでください。