[プレビュー] デバイスに合わせた画面サイズを選択できるようにしました

[gakigaki]

概要

プレビューモードで、現在の画面・PC・タブレット・スマホの表示幅を切り替えて確認できるようにしました。

プレビュー画面では、選択した表示幅を保ったまま「画面に合わせる」と「等倍表示」を切り替えられます。これにより、ブラウザの開発者ツールを使わなくても、レスポンシブ表示を確認できます。

変更内容

• 管理機能メニューの「プレビューモード」は、従来どおり1項目のままとしました。
• プレビュー開始後の操作バーで、次の画面サイズを選択できるようにしました。
  • 現在の画面：操作中のブラウザサイズ
  • PC：1200 × 800px
  • タブレット：768 × 1024px
  • スマホ：390 × 844px
• 表示方法を「画面に合わせる」と「等倍表示」から選択できるようにしました。
• 選択した画面サイズをURLへ反映し、再読み込み後も選択を復元できるようにしました。
• 同一オリジンのiframeに選択した表示幅を設定し、CSSのメディアクエリが参照する幅とプレビューの表示幅を一致させました。
• iframe内のリンクやフォームを操作した場合はプレビューを終了し、通常画面へ遷移するようにしました。
• プレビュー専用ルートで、利用権限、ページID、閲覧権限、固定URLを検証するようにしました。不正なプレビューURLは404を返します。
• 既存の ?mode=preview によるプレビューは、引き続き利用できます。

背景と目的

従来のプレビューモードは、編集用ボタンなどを非表示にできますが、表示幅は利用中のブラウザに依存していました。そのため、スマホやタブレットでの見え方を確認するには、ブラウザ幅を手動で変更するか、開発者ツールを使用する必要がありました。

一般の編集者でも日常の更新作業の中でレスポンシブ表示を確認しやすくするため、プレビューモード内で代表的な画面サイズへ切り替えられるようにしました。

特記事項

• 本機能は表示幅を確認するためのものです。User-Agent、タッチ操作、端末性能などを含む実機の完全な再現は対象外です。
• 固定プリセットは縦向きのみです。横向きや機種別の詳細なプリセットは追加していません。
• CSSとJavaScriptを変更し、ビルド済みアセットと public/mix-manifest.json も更新しています。
• DBマイグレーションおよび既存データの変更はありません。
• デプロイ環境のCSPまたは X-Frame-Options で、同一オリジンのiframeが許可されている必要があります。リリース前にデプロイ相当環境での確認が必要です。

実行結果

• Unitテスト：3件、9アサーション成功
• Featureテスト：12件、32アサーション成功
• GitHub ActionsのPHPCS：成功

レビュー完了希望日

軽微な機能追加のため、急ぎません。

関連Pull requests/Issues

なし

参考

確認手順

1. プラグイン管理権限を持つ利用者で、通常ページを表示します。
2. 管理機能メニューから「プレビューモード」を選択します。
3. 「現在の画面」「PC」「タブレット」「スマホ」を切り替え、表示内容と表示寸法が変わることを確認します。
4. 「画面に合わせる」と「等倍表示」を切り替え、表示幅が狭い場合は縮小表示または横スクロールで確認できることを確認します。
5. 画面サイズを選択した状態で再読み込みし、選択が復元されることを確認します。
6. iframe内のリンクまたは「プレビュー終了」を操作し、通常画面へ戻ることを確認します。

DB変更の有無

無し

チェックリスト

• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule