Frontend Editing
コアのSettings Tray、Contextual Links、Quick Editモジュールに依存せず、サイドバーパネルを使用してフロントエンドで直接Entityを編集できる軽量モジュール。
frontend_editing
インストール
composer require 'drupal/frontend_editing:^1.9'
概要
Frontend Editingは、DrupalサイトのフロントエンドからコンテンツEntityを直接編集するための合理化された方法を提供します。コアの組み込み編集ソリューションとは異なり、このモジュールはEntity編集フォームをiframeとして読み込むサイドバーパネルを使用し、フロントエンドとバックエンド編集の間で一貫した編集体験を確保します。
このモジュールは、有効化されたEntityタイプにアクションリンクを追加し、設定可能なサイドバーで編集フォームを開きます。Entityリファレンスフィールドをサポートし、アイテムの並び替え（上下移動）、新しい参照Entityの追加、既存の参照の削除などの機能をすべてページを離れることなくフロントエンドから実行できます。
このモジュールは専用のサブモジュール（Frontend Editing Paragraphs）を通じてParagraphsモジュールとうまく統合されており、ページビルダースタイルのコンテンツ編集に最適です。また、Previewモジュールと併用することでライブプレビュー機能をサポートし、編集者は保存前にリアルタイムで変更を確認できます。
Features
- 設定可能なサイドバーパネルを使用して、フロントエンドから任意のコンテンツEntityを直接編集
- Entityリファレンスフィールド操作：アイテムの上下移動、既存アイテムの前後への新規アイテム追加、アイテムの削除
- ページリロードなしで影響を受けるフィールド領域のみを更新するAJAX駆動のコンテンツ更新
- Previewモジュールと併用時のリアルタイム変更可視化のためのライブプレビュー統合
- ユーザーセッションごとにフロントエンド編集アクションを有効/無効にする設定可能なUIトグルボタン
- 通常ビューと拡大ビューの両方に対応したカスタマイズ可能なサイドバー幅設定
- 編集可能な要素をより視覚的に示すホバーハイライトモード
- サイトのデザインに合わせたカスタマイズ可能なプライマリUIカラー
- サイドバー編集を別のブラウザウィンドウに分離するオプション
- 長いコンテンツ領域でアクションを表示し続けるためのアクションリンク複製機能
- 複製リンクの代替としてのフローティング（固定）アクションリンクオプション
- 選択肢となるバンドルタイプが多い場合の検索可能なアイテム追加ダイアログ
- サードパーティフォーマッター設定によるフィールドごとの設定
- 一貫した管理画面スタイリングのためのGinテーマ統合
- Frontend Editingがアクティブな場合にContextual Linksを非表示にするオプション
- 任意のViewディスプレイに配置して編集アクションを表示できるExtra Fieldプラグイン
Use Cases
ページビルダーコンテンツ編集
Paragraphsをページビルダーとして使用するサイトに最適です。コンテンツ編集者は、Node編集フォームに移動することなく、ページビューから直接Paragraphコンポーネントの追加、編集、並び替え、削除ができます。Frontend Editing Paragraphsサブモジュールを有効にし、Paragraphs Entityリファレンスフィールドに移動/追加/削除操作を設定すると、編集者はその場で複雑なレイアウトを管理できます。
クイックコンテンツ更新
迅速なコンテンツ更新が必要なサイトでは、Frontend Editingにより編集者は任意の編集可能なEntityをクリックしてすぐにサイドバーパネルで編集を開始できます。これは特に誤字の修正、テキストの更新、またはページ上でコンテンツがどこに表示されるかのコンテキストを失わずにクイック変更を行う場合に便利です。
編集レビューワークフロー
Previewモジュールと組み合わせると、編集者は保存前に変更のライブプレビューを確認できます。これにより、コンテンツをコンテキスト内でレビューできるワークフローが作成され、公開前にレイアウトの問題やコンテンツのミスを発見しやすくなります。
複数Entityページ編集
複数のEntityを表示するページ（複数のブロックリファレンスやメディアアイテムを含むランディングページなど）では、Frontend Editingにより複雑な親編集フォームなしで各Entityを個別に編集できます。各Entityには独自の編集リンクが表示され、変更は独立して保存されます。
制限付き編集者アクセス
きめ細かい権限を使用して、編集者に限定的な機能を付与します。例えば、一部のユーザーは既存のコンテンツの編集のみが可能で、他のユーザーはEntityリファレンスの追加や削除も可能にできます。移動、追加、削除操作の個別の権限により、細かいアクセス制御が可能です。
Tips
- より良い視認性のために、「Frontend Editing: Actions」Extra FieldをEntityビューディスプレイの上部に配置してください。
- 「ホバーハイライトモード」設定を使用して、編集可能な領域をより視覚的に目立たせてください。コンテンツ編集者に特に役立ちます。
- プライマリUIカラーをサイトのブランディングに合わせて設定し、一貫した編集体験を提供してください。
- 長いコンテンツ領域（多くのParagraphsを含むページなど）では、編集コントロールを表示し続けるために「アクションリンクを複製」または「アクションリンクを固定表示にする」を有効にしてください。
- UIトグルボタンを使用して、編集者が通常の訪問者としてサイトを閲覧するときにFrontend Editingを簡単に無効にできるようにしてください。
- Extra Fieldプラグインのフォームディスプレイ設定により、フロントエンド編集用に異なるフォームディスプレイ（簡略化されたフォーム）をバックエンド編集フォームとは別に使用できます。
- Entityリファレンスフィールドでコンテンツ更新を有効にすると、ページ全体をリロードする代わりに、操作後にそのフィールド領域のみを更新します。
Technical Details
Admin Pages 2
/admin/config/frontend-editing
サイドバーの外観、UIトグルオプション、アクションリンクの動作など、Frontend Editingの主要設定を構成します。
/admin/config/frontend-editing/entity-bundle-restrictions
フロントエンド編集をサポートするコンテンツEntityタイプとそのバンドルを選択します。保存後、有効化されたバンドルの「ディスプレイの管理」ページで「Frontend Editing: Actions」Extra Fieldが利用可能になります。
権限 5
Hooks 5
hook_entity_view_alter
フロントエンド編集アクションを追加し、サードパーティフォーマッター設定に基づいてフィールド操作を設定するためにEntityビューを変更します。
hook_field_formatter_third_party_settings_form
「ディスプレイの管理」ページのEntityリファレンスフィールドフォーマッターにFrontend Editing設定オプションを追加します。
hook_extra_field_display_info_alter
Frontend Editing Extra Fieldが利用可能なバンドルを動的に設定するために、Extra Fieldディスプレイ情報を変更します。
hook_gin_content_form_routes_alter
一貫したスタイリングのために、frontend_editing.formルートをGinテーマのコンテンツフォームルートに追加します。
hook_toolbar
UIトグルが無効な場合に、管理ツールバーにフロントエンド編集トグルを追加します。
Troubleshooting 7
/admin/config/frontend-editing/entity-bundle-restrictionsでEntityタイプとバンドルが有効になっていることを確認してください。次に、Entityの「ディスプレイの管理」ページで「Frontend Editing: Actions」Extra Fieldを有効化/配置してください。
これらの操作にはフィールドごとの設定が必要です。Entityのビューディスプレイを編集し、Entityリファレンスフィールドフォーマッターの歯車アイコンをクリックして、サードパーティ設定セクションで必要なFrontend Editingオプションを有効にしてください。
Frontend Editing Paragraphsサブモジュールを有効にしてください。これにはParagraphs Editモジュールを先にインストールする必要があります。このサブモジュールがないと、Paragraph Entityタイプは設定で無効になっています。
Previewモジュールをインストールして有効にしてください。次にPreviewモジュールの設定でEntityタイプのプレビューを有効にします。最後に、Frontend Editing設定で「自動プレビュー」を有効にしてください。
Frontend Editing設定で「UIでオン/オフトグルを有効にする」がチェックされていることを確認してください。トグルはツールバー（UIトグルが無効の場合）またはフローティングボタン（有効の場合）として表示されます。オフセット設定を確認して、見える位置に配置されていることを確認してください。
/admin/config/frontend-editingで「サイドバーの幅」と「フル幅」設定を調整してください。値はビューポート幅のパーセンテージです。
デフォルトでは、Paragraphリファレンスフィールドは翻訳をサポートしていません。親Entityが翻訳可能で、デフォルト以外の翻訳を編集している場合、フィールドが翻訳可能として設定されていない限り（非同期翻訳モジュールを使用）、これらの操作は無効になります。
Security Notes 5
- 「フロントエンド編集を管理」権限は、フロントエンドから編集できるEntityタイプを制御するため、信頼できる管理者のみに付与してください。
- すべてのEntity編集操作は標準のDrupal Entityアクセスチェックを尊重します - ユーザーは更新権限を持つEntityのみを編集できます。
- モジュールはすべての操作に対してEntityレベルとフィールドレベルの両方のアクセスをチェックします。
- Entity編集時にはDrupalのフォームAPIを通じてCSRF保護が維持されます。
- 移動、追加、削除操作へのアクセスには、特定のFrontend Editing権限と親Entityへの更新アクセスの両方が必要です。