Responsive Theme Preview

さまざまなデバイスサイズでページをプレビューできるコンポーネントを提供し、サイトビルダーやコンテンツ編集者が異なるデバイスでコンテンツがどのように表示されるかを確認できます。

responsive_preview

9,515 sites

gui theme utility

diseño responsivo vista previa móvil vista previa de dispositivos prueba de viewport vista previa de contenido barra de herramientas diseño web responsivo mobile-first

Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v2.3.0

composer require 'drupal/responsive_preview:^2.3'

概要

Responsive Previewモジュールは、Drupalサイト上の任意のページを一般的なモバイルデバイスや画面サイズの寸法でプレビューする簡単で便利な方法を提供します。これはレスポンシブウェブデザインのワークフローに不可欠であり、コンテンツ編集者やサイトビルダーがブラウザを離れることなく、さまざまなデバイスでコンテンツがどのようにレンダリングされるかを確認できます。

このモジュールはDrupalのツールバーとシームレスに統合され、設定済みデバイスのドロップダウンリストを表示するデバイスプレビューボタンを追加します。デバイスを選択すると、現在のページをデバイスのビューポート寸法で表示するiframeオーバーレイが開き、適切なピクセル密度スケーリングも適用されます。プレビューには縦向きと横向きの回転コントロールが含まれ、寸法やDPIなどのデバイス情報も表示されます。

ノード編集フォームでは、レスポンシブプレビューフレームに表示する前にノードプレビュー機能をトリガーすることで、未保存のコンテンツ変更をプレビューできる特別な統合を提供します。これにより、編集者は保存前にモバイルデバイスで変更がどのように表示されるかを正確に確認できます。

Features

iframeオーバーレイを使用して、さまざまなデバイスビューポート寸法で任意のページをプレビュー
管理画面以外のすべてのページからアクセス可能なドロップダウンデバイスセレクター付きツールバー統合
縦向きと横向きのデバイス回転をサポート
人気のスマートフォンやタブレットが事前設定された設定可能なデバイスライブラリ
デバイスの追加、編集、削除、並べ替えができるデバイス管理画面
未保存のコンテンツ変更をプレビューするためのノード編集フォーム統合
サイト上の任意の場所に配置できるレスポンシブプレビューブロック
非レスポンシブページの実際のデバイスレンダリングをシミュレートする自動スケーリング
オプションのサブモジュールによるDrupal CoreのNavigationモジュールのサポート（Drupal 10.3以降）
プレビューを閉じるキーボードショートカット（Escキー）
iframe内でツールバー、ナビゲーション、コンテキストリンクを非表示にするクリーンプレビューモード

Use Cases

コンテンツ編集者のモバイルプレビュー

コンテンツ編集者が画像や複雑なフォーマットを含む新しい記事を作成しています。公開前にツールバーのレスポンシブプレビューボタンをクリックし、ドロップダウンから「iPhone XS」を選択して、モバイルデバイスでコンテンツがどのように表示されるかを確認します。画像が広すぎることに気づき、保存前に調整して、良好なモバイル体験を確保します。

テーマ開発者のレスポンシブテスト

テーマ開発者がレスポンシブなDrupalテーマを構築しており、複数のデバイスでブレークポイントをテストする必要があります。レスポンシブプレビューを使用して、物理デバイスやブラウザのDevToolsなしで、電話、タブレット、デスクトップのビューポート間をすばやく切り替え、開発ワークフローを高速化します。

クライアントへのデモンストレーション

サイトビルダーがクライアントに新しいウェブサイトをプレゼンテーションしています。レスポンシブプレビューを使用して、画面共有セッション中にさまざまなデバイスでサイトがどのように見えるかを実演し、縦向きと横向きを切り替えてレスポンシブデザインが適切に適応することを示します。

ノード編集フォームでのQAテスト

QAテスターが下書きコンテンツのレスポンシブ動作を検証しています。ノード編集フォームで、レスポンシブプレビュードロップダウンからデバイスをクリックします。モジュールがノードプレビューシステムをトリガーし、未保存のコンテンツをレスポンシブプレビューフレームに表示するため、未公開の変更をテストできます。

カスタムデバイス設定

ある制作会社は、従業員が特定のタブレットモデルを使用する特定の企業クライアント向けにサイトを頻繁に構築しています。サイト管理者がその正確な寸法とピクセル密度に一致するカスタムデバイスプロファイルを追加し、プレビューがターゲットデバイスを正確に表現するようにします。

Tips

プレビューは現在のブラウザウィンドウ幅に収まるデバイスのみを表示します。デバイスが無効/グレーアウトしている場合は、ブラウザウィンドウを広げてください。
Escキーを使用してレスポンシブプレビューオーバーレイをすばやく閉じることができます。
プレビューフレーム内のデバイスラベルをクリックすると、詳細なデバイス仕様の表示を切り替えられます。
プレビューはサイトのビューポートメタタグを尊重します - レスポンシブサイトと固定幅サイトではスケーリングが異なります。
Navigationモジュールユーザー（Drupal 10.3以降）は、Responsive Preview Navigationサブモジュールを有効にして統合されたトップバーコントロールを使用できます。
デバイス寸法はCSSピクセルではなく物理ピクセルで指定されます。3dppxの1125x2436 iPhone XSは375x812 CSSピクセルとして表示されます。
モジュールはクリーンな表示のため、プレビューiframe内のツールバー、ナビゲーション、コンテキストリンクを自動的に非表示にします。

Technical Details

レスポンシブプレビューデバイス /admin/config/user-interface/responsive-preview

レスポンシブプレビューデバイスを管理するメイン管理ページです。設定済みのすべてのデバイスを寸法とステータスとともにドラッグ可能なテーブルで表示します。ドラッグ＆ドロップによるデバイスの並べ替え、プレビューリストでのデバイス表示の切り替え、編集・削除の操作を提供します。

デバイスを追加 /admin/config/user-interface/responsive-preview/add

レスポンシブプレビュー用の新しいデバイスプロファイルを作成するフォームです。デバイス名、寸法、ピクセル密度、デフォルトの向きを指定できます。

デバイスを編集 /admin/config/user-interface/responsive-preview/{device}/edit

既存のデバイスプロファイルの寸法、ピクセル密度、表示設定などを変更するフォームです。

デバイスを削除 /admin/config/user-interface/responsive-preview/{device}/delete

デバイスプロファイルをシステムから完全に削除するための確認フォームです。

レスポンシブプレビューにアクセス

ツールバーまたはブロックからレスポンシブプレビュー機能にアクセスして使用することを許可します。プレビューボタンとデバイスリストを表示するために必要です。

レスポンシブプレビューを管理

管理画面でデバイスの追加、編集、削除、並べ替えなどのデバイス設定を管理することを許可します。

hook_toolbar

hook_toolbar()を実装して、Drupalツールバーにレスポンシブプレビュータブを追加します。プレビューコントロール付きのデバイスセレクタードロップダウンを追加します。

hook_theme

hook_theme()を実装して、デバイスリストをレンダリングするためのitem_list__responsive_previewテーマテンプレートを登録します。

hook_form_alter

hook_form_alter()を実装して、ノード編集フォームにAJAXベースのレスポンシブプレビュートリガーを追加し、未保存コンテンツのプレビューを可能にします。

hook_preprocess_html

hook_preprocess_html()を実装して、レスポンシブプレビューモードでコンテンツを表示する際にツールバー、ナビゲーション、コンテキストリンクを削除します。