Gin Toolbar
Gin管理ツールバーをDrupalサイトのフロントエンドに表示するヘルパーモジュールです。認証済みユーザーがフロントエンドページを閲覧しながら管理ツールバーにアクセスできるようになります。
gin_toolbar
インストール
composer require 'drupal/gin_toolbar:^3.0'
composer require 'drupal/gin_toolbar:^2.1'
composer require 'drupal/gin_toolbar:8.x-1.1'
概要
Gin ToolbarはGin Admin Themeのコンパニオンモジュールで、管理ツールバーの機能をDrupalサイトのフロントエンドに拡張します。Drupalテーマの技術的な制限により、Ginテーマはフロントエンドページにスタイル付きツールバーを自動的にレンダリングできません。このモジュールは、Ginスタイルのツールバーをバックエンドとフロントエンドの両方で一貫して表示するために必要なフック、テンプレート、サービスを提供することで、そのギャップを埋めます。
このモジュールはGinテーマの設定とシームレスに統合され、アクセントカラー、フォーカスカラー、ダークモード設定、ハイコントラストモードをフロントエンドツールバーに自動的に適用します。クラシックツールバー、水平ツールバー、実験的なDrupalナビゲーションスタイルなど、複数のツールバーバリアントをサポートしています。
Gin Toolbarは、フロントエンドでコンテンツを表示または編集する際にも、管理階層内の現在位置をユーザーに表示する、強化されたアクティブトレイル検出機能も提供します。これにより、コンテンツの表示と編集間のナビゲーションがより直感的になります。
Features
- Gin管理ツールバーをフロントエンドページに拡張し、認証済みユーザーが公開サイトを閲覧しながら管理機能にアクセスできるようにします
- 複数のツールバーバリアントをサポート：クラシック（垂直サイドバー）、水平（トップバー）、新しいナビゲーション（実験的なDrupalナビゲーションスタイル）
- コンテンツ、メディア、ユーザー、その他のエンティティを表示または編集する際に、管理メニュー内の現在位置をハイライトするインテリジェントなアクティブトレイル検出
- アクセントカラー、フォーカスカラー、ダークモード、ハイコントラストモードを含むGinテーマ設定との自動統合
- 「[コンテンツタイトル]を編集」や「管理画面に戻る」などのコンテキストリンクを表示するフロントエンド用セカンダリツールバーで、素早いナビゲーションを実現
- Drupal CoreのNavigationモジュールとのシームレスな互換性、アクティブ時にCoreナビゲーションを適切にスタイリング
- Admin Toolbarモジュールとの統合による拡張メニュー深度（最大4レベル以上で設定可能）
- Media Libraryとの統合、メディアブラウザコンポーネントにGinスタイリングを適用
- リッチテキストエディタ内での一貫した外観を確保するCKEditorスタイリング統合
- コンテンツモデレーションワークフローのためのWorkbenchモジュール互換性
- パフォーマンス最適化のための「gin-toolbar-」プレフィックス付きキャッシュIDを使用したアクティブトレイルのカスタムキャッシュ戦略
Use Cases
コンテンツエディターのワークフロー
コンテンツエディターがサイトにログインし、フロントエンドで公開済みの記事を閲覧します。Gin Toolbarが有効になっていると、すべてのフロントエンドページで馴染みのあるGin管理ツールバーが表示され、「コンテンツ」メニューに素早くアクセスして記事を管理したり、セカンダリツールバーの「[記事タイトル]を編集」をクリックして、管理バックエンドに戻ることなく表示中のページを直接編集できます。
マルチサイト管理
Ginテーマを使用して複数のDrupalサイトを管理する管理者は、フロントエンドとバックエンドで一貫したツールバーの外観の恩恵を受けます。コンテンツの表示と設定の編集を切り替える際にもツールバーが一貫しているため、認知負荷が軽減され、効率が向上します。
開発中のテーマプレビュー
新しいフロントエンドテーマをプレビューするテーマ開発者は、コンテキストを切り替えることなくフロントエンドから直接すべての管理機能にアクセスできます。これにより、レイアウトの調整、レスポンシブ動作の確認、コンテンツの変更を行う際の迅速な反復が可能になります。
クライアントトレーニングセッション
コンテンツ管理についてクライアントをトレーニングする際、フロントエンドページの一貫したGinツールバーは、コンテンツの表示と編集の関連性を示すのに役立ちます。セカンダリツールバーの「[コンテンツタイトル]を編集」リンクは、コンテンツ編集ワークフローを説明するための直感的なエントリーポイントを提供します。
ダークモードの一貫性
目の疲れを軽減するためにダークモードを好むユーザーは、Gin Toolbarの自動ダークモード継承の恩恵を受けます。管理バックエンドにいても、フロントエンドコンテンツを表示していても、ツールバーの外観はGinテーマ設定で設定したダークモードの設定と一貫しています。
Tips
- Gin ToolbarはGinテーマからすべての設定を継承します - /admin/appearance/settings/ginでツールバーバリアント、カラー、ダークモードを設定してください
- モジュールはより良いUXのためにツールバー項目を自動的に並べ替え、検索を先頭に、ユーザーメニューを末尾に配置します
- Admin Toolbarモジュールを使用しているサイトでは、メニューの深度が自動的に尊重されます（デフォルトで最大4レベル）
- セカンダリツールバーはコンテキスト「編集」リンクを提供します - ユーザーはフロントエンドで表示しているコンテンツを素早く編集できます
- ダークモード使用時、ツールバーはGinテーマ設定またはシステム設定に基づいて自動的にモードを切り替えます
- カスタムCSSはpublic://gin-custom.cssファイルを介して適用でき、モジュールは自動的に検出して読み込みます
- このモジュールは、レガシーツールバーと最近のDrupalバージョンで導入された新しいCore Navigationモジュールの両方をサポートしています
Technical Details
Hooks 12
hook_preprocess_html
アクセントカラー、フォーカスカラー、ハイコントラストモード、ツールバーバリアントクラスを含むGin固有のHTML属性とクラスを追加します。Navigationモジュール統合とメンテナンスページのスタイリングも処理します。
hook_page_attachments_alter
Ginテーマライブラリ（base、accent、init）をアタッチし、Gin設定（darkmode、colors、high contrast）をJavaScriptに公開します。バリアント設定に基づいて適切なツールバースタイルライブラリをアタッチします。
hook_library_info_alter
ダイアログ、CKEditor、AJAX、Media LibraryコンポーネントにGin固有の依存関係を含めるようにCoreライブラリを変更します。
hook_preprocess_toolbar
ユーザー画像のlazy builderを追加し、ツールバーバリアントとセカンダリツールバー設定を公開し、ツールバータブを並べ替え（検索を先頭に、ユーザーを末尾に移動）、コンテキストナビゲーション用のエンティティ編集URLを提供します。
hook_preprocess_menu
ツールバーメニュー項目にgin_id属性を追加し、メニュー項目を並べ替えて、configとhelpを末尾に移動します。
hook_toolbar_alter
ユーザータブのウェイトを1000に設定し（develの999の後）、管理トレイのプリレンダーコールバックとしてGinToolbar::preRenderTrayを登録します。
hook_ckeditor_css_alter
一貫したスタイリングのためにGinテーマCSSファイル（variables、accent、ckeditor）をCKEditorインスタンスに追加します。
hook_css_alter
Ginダイアログスタイルがテーマの後に読み込まれるようにCSSグループの優先度を調整します。
hook_theme
Navigationモジュールがアクティブでない場合に、ナビゲーション領域とコンテナ要素のカスタムテーマフックを定義します。
hook_theme_registry_alter
ツールバー関連のテンプレートをgin_toolbarモジュールのテンプレートディレクトリを指すようにテーマレジストリを変更します。
hook_requirements
インストール時に、Ginテーマがインストールされているかどうかを確認します。Ginが利用できず、インストールプロファイルの一部でもない場合、エラーを表示します。
hook_requirements_alter
競合を防ぐためにCoreツールバーの要件を削除します。
Troubleshooting 6
ユーザーが「access toolbar」または「access navigation」権限を持っているか確認してください。/admin/appearanceでGinテーマが管理テーマとして正しく設定されているか確認してください。モジュールを有効化した後、すべてのキャッシュをクリアしてください。
Gin Admin ThemeはGin Toolbarより先にインストールする必要があります。まず「composer require drupal/gin」でGinをインストールし、管理テーマとして有効化してから、Gin Toolbarをインストールしてください。
テーマレジストリとすべてのキャッシュをクリアしてください。GinテーマとGin Toolbarの互換性のあるバージョンを使用していることを確認してください。カスタムCSSがGinスタイルをオーバーライドしていないか確認してください。
アクティブトレイルのキャッシュをクリアする必要があるかもしれません。「drush cr」を実行するか、/admin/config/development/performanceでキャッシュをクリアしてください。このモジュールはアクティブトレイルに「gin-toolbar-」プレフィックス付きのキャッシュIDを使用しています。
編集リンクは、ユーザーが編集アクセス権を持つエンティティページを表示している場合にのみ表示されます。ユーザーがコンテンツタイプの編集権限を持っていること、エンティティにedit-formリンクテンプレートがあることを確認してください。
Gin ToolbarはCore Navigationと連携するように設計されています。GinテーマとGin Toolbarの両方がCore Navigationをサポートするバージョンに更新されていることを確認してください。モジュールはNavigationモジュールを自動的に検出し、それに応じて動作を調整します。
Security Notes 4
- ユーザーがツールバーを表示するには「access toolbar」または「access navigation」権限が必要です - これはすべてのページ読み込み時にチェックされます
- モジュールは既存のすべてのDrupalアクセス制御を尊重します - メニュー項目はユーザーがアクセス権限を持っている場合にのみ表示されます
- セカンダリツールバーのエンティティ編集リンクは、ユーザーがその特定のエンティティの編集権限を持っている場合にのみ表示されます
- モジュールは悪用される可能性のある新しい権限や設定フォームを公開しません