インストール
composer require 'drupal/mix:^1.10'
概要
Mixは、Drupalプロジェクトで一般的に必要とされる幅広い機能を、複数の専用モジュールなしで提供するオールインワンのユーティリティモジュールです。一般的なタスクの簡素化、ワークフローの自動化、設定の一元化に焦点を当て、より効率的なサイト管理を実現します。
このモジュールには、キャッシュ、Twigデバッグ、CSS/JSの集約、エラー表示を制御する開発/本番モードのクイック切り替えなどの開発ツールが含まれています。また、環境間でのコンテンツ同期、環境固有の設定に対する設定インポート無視、トークンサポート・HTMLタイトル・ロールベースの表示制御を備えた拡張メニューシステムなど、コンテンツ管理機能も提供します。
ユーザー体験の面では、フォームの二重送信防止、未保存フォームの警告、独立したパスワード変更ページなどのフォーム拡張機能を提供します。また、フロントページとNodeのメタタグ管理、カスタム500エラーページ、セキュリティのためのX-Generatorヘッダー削除などのSEO機能も含まれています。
Features
- Twigデバッグ、Cacheバックエンド、CSS/JS集約、エラーメッセージの詳細度を制御し、開発設定と本番設定をすばやく切り替える開発モードトグル
- 現在の環境（開発、ステージング、本番など）を識別するために、すべてのページの上部にカスタマイズ可能なテキストバナーを表示する環境インジケーター
- モジュール開発を容易にするため、各フォームの前にフォームIDとhook_form_FORM_ID_alter()のコードテンプレートを表示するフォームID表示機能
- フォームの二重送信を防ぐため、クリック後に送信ボタンを無効にする送信ボタン非表示機能
- 未保存のフォーム変更があるページを離れようとしたときに、ブラウザダイアログでユーザーに警告する未保存フォーム確認機能
- Block、Menu Link、Taxonomy Termを設定と一緒にエクスポート・インポートできるコンテンツ同期（ベータ）機能。環境間で設定を同期する際のブロック破損問題を解決
- インポート時に特定の設定や設定キーを除外できる設定インポート無視機能。本番環境で環境固有の設定を維持するのに便利
- サーバーエラー時にブランド化されたユーザー体験を提供する、設定可能なHTMLコンテンツを持つカスタム500エラーページ
- フロントページ（タイトル、説明、キーワード、カスタムメタタグ）とNode（トークンサポート付き説明）のメタタグ管理
- メニュータイトルとURLでのトークンサポート（[current-user:xxx]、[site:xxx]）、メニュータイトルでのHTML、リンク/コンテナ属性（id、class、target）、ロールベースの表示制御を備えた拡張メニューシステム
- Block設定フォームを通じて任意のBlockラッパー要素にカスタムCSSクラスを追加できるBlock CSSクラス機能
- モバイルトグルサポート付きのCSSのみのレスポンシブドロップダウンメニューにメニューBlockを変換するドロップダウンメニュー表示オプション
- パスワードフィールドをユーザー編集フォームから専用の/user/{uid}/passwordページに移動し、パスワードタブを追加する独立パスワード変更ページ
- メールベースのパスワードリセットに依存せず、ユーザー登録フォームにパスワードフィールドを表示するパスワード付き登録オプション
- Drupalプラットフォームを隠すためにX-Generator HTTPヘッダーとGeneratorメタタグを削除するX-Generator削除機能
- よりクリーンな編集インターフェースのために、UID 1以外のすべてのユーザーからリビジョン情報フィールドセットを非表示にするリビジョンフィールド非表示オプション
- メニューにユーザーアバターを表示するためのユーザー画像トークン（[current-user:picture]と[current-user:picture:image-style]）
Use Cases
迅速なTheme開発
開発モードを有効にして、手動でCacheをクリアすることなくTheme開発を迅速に反復できます。開発モードはrender、page、dynamic page Cacheを無効にし、HTMLコメントにテンプレート候補を含むTwigデバッグを有効にし、バックトレース付きですべてのエラーメッセージを表示します。フォームID表示機能と組み合わせることで、開発者はどのフォームを変更するかを簡単に特定し、変更を即座にテストできます。
マルチ環境デプロイメント
環境インジケーターを使用して、開発、ステージング、本番環境を明確に区別します。各環境に異なるインジケーターテキストを設定し、設定インポート無視を使用して開発モード設定が本番環境にインポートされるのを防ぎます。core.extension:module.develを無視リストに追加することで、Develなどの開発モジュールが本番環境で有効になるのを防ぎます。
環境間でのBlockコンテンツの同期
block_content Entityとして定義されたBlockを配置する場合、Block配置設定はUUIDでBlockを参照しますが、実際のコンテンツは別に保存されます。コンテンツ同期を有効にし、ブロックライブラリページで特定のBlockをエクスポート用にマークし、通常どおり設定をエクスポート/インポートします。ターゲット環境で「欠落コンテンツを生成」を実行してBlockを作成します。これにより、設定を同期する際によく発生する「このブロックは破損しているか見つかりません」エラーが解決されます。
ユーザーフレンドリーな登録フロー
「パスワード付き登録」を有効にすると、ワンタイムログインリンク付きのメールを受信する代わりに、ユーザーが登録時にパスワードを設定できます。これは即座のアクセスが重要なサイトで特に便利です。この設定は/admin/config/people/accountsの管理ユーザー設定ページに直接統合されます。
簡素化されたユーザープロフィール管理
独立パスワードページを有効にして、パスワード変更機能をユーザープロフィールの「パスワード」タブ付きの専用/user/{uid}/passwordページに移動します。これによりメインのユーザー編集フォームがよりクリーンになり、現在のパスワード確認を含む適切な検証を備えたパスワード変更に焦点を当てたインターフェースを提供します。
JavaScriptなしのレスポンシブドロップダウンメニュー
メニューBlockのBlock レベルドロップダウンオプションを使用して、標準メニューを純粋なCSSを使用したレスポンシブドロップダウンメニューに変換します。実装はモバイルトグルにチェックボックスベースの状態管理を使用し、JavaScriptが無効でも機能を確保します。dropdown.cssスタイルまたはmenu.html.twigテンプレートをオーバーライドして外観をカスタマイズできます。
ロールベースのメニュー項目表示制御
詳細メニューリンク設定を使用して、メニュー項目を特定のユーザーロールに制限します。これにより、アクセス制御モジュールを使用せずに、メインナビゲーションに管理者専用のメニュー項目やロール固有のリンクを作成できます。メニューの表示は適切なCacheコンテキストでレンダリング時に評価されます。
トークンを使用した動的メニューコンテンツ
メニューリンクのタイトルとURLでトークンを使用してパーソナライズされたメニューを作成します。[current-user:picture:thumbnail]でメニューに現在のユーザーの画像を表示したり、/user/[current-user:uid]で「マイプロフィール」リンクを作成したり、サイト名を動的に表示したりできます。モジュールはメニューコンテンツで[current-user:xxx]、[site:xxx]、[date:xxx]トークンをサポートしています。
重いモジュールなしのSEO最適化
Mixのメタタグ設定を本格的なSEOモジュールの軽量な代替として使用します。トークン付きタイトル、説明、キーワード、サイト検証やOpen Graph用のカスタムメタタグを含むフロントページのメタタグを設定します。Nodeの場合、[node:summary]やその他のNodeトークンを使用して説明テンプレートを設定し、メタ説明を自動生成します。
ブランド化されたエラーページ
デフォルトのDrupal 500エラーページを、予期しないエラー発生時でもサイトのアイデンティティを維持するカスタムブランドページに置き換えます。エラーページのコンテンツは設定に保存され、カスタムスタイル付きの完全なHTMLを含めることができます。エラーの詳細はシステムのエラー報告レベルに基づいて追加され、開発者はデバッグ情報を確認でき、一般ユーザーにはフレンドリーなメッセージが表示されます。
フォームの二重送信防止
送信ボタン非表示機能を有効にして、ユーザーが送信ボタンを繰り返しクリックして誤ってフォームを複数回送信することを防ぎます。JavaScriptライブラリは最初のクリック後にボタンの無効化されたクローンを作成し、元のボタンを非表示にして、フォーム機能を維持しながら二重送信を防ぎます。
未保存フォームデータの保護
未保存フォーム確認を有効にして、未保存のフォーム変更があるページから離れようとしたときにユーザーに警告します。これは作業を失うことがイライラする可能性があるコンテンツ編集フォームで特に価値があります。この機能はフォームの状態変更を追跡し、ブラウザネイティブの確認ダイアログを表示します。
Tips
- 開発モードトグルは、設定に保存され、切り替え時に自動的にCacheとコンテナを再構築するため、ローカル開発でsettings.phpを手動で編集するよりも安全です。
- 設定インポート無視機能を使用してdev_mode自体などの環境固有の設定を維持し、開発設定が誤って本番環境にインポートされることを防ぎます。
- コンテンツ同期はblock_content、menu_link_content、taxonomy_term Entityをサポートします。同期IDの形式はmix.content_sync.{entity_type}.{bundle}.{uuid}です。
- メニュートークンを使用する場合、モジュールはルーティングエラーを防ぐためにトークンURLを持つリンクのroute_nameを自動的に<none>に設定します。トークン置換はレンダリング時に行われます。
- ドロップダウンメニューCSSはモバイルトグルにチェックボックス状態（:checked + ul）を使用し、JavaScriptなしで動作します。カスタムスタイリングのためにCSSをオーバーライドしてください。
- Block CSSクラスはサードパーティ設定に保存され、空の場合は適切にクリーンアップされます。複数のクラスはスペースで区切ることができます。
- 環境インジケーターはCacheタグ（mix:environment-indicator）を使用するため、非空値間の変更はすべてのCacheを再構築する代わりに特定のCacheのみを無効にします。
- メタタグのトークンはセキュリティのためにXSSフィルタリングで処理されます。フロントページ設定のカスタムメタタグは有効なHTMLメタ要素である必要があります。
- 独立パスワードページはメールからのパスワードリセットトークンを尊重し、リセットフローを使用する場合は現在のパスワードを入力せずにパスワードを変更できます。
- セキュリティのため、CMSプラットフォームの宣伝を避けるために本番サイトで「X-Generatorを削除」を有効にすることを検討してください。ただし、これはセキュリティスルーオブスキュリティ（隠蔽によるセキュリティ）です。
Technical Details
Admin Pages 3
/admin/config/mix
開発、コンテンツ同期、設定管理、エラーページ、SEOなどの論理的なセクションに整理されたすべての主要設定を含むMixモジュールのメイン設定ページ。
/admin/config/mix/meta
フロントページとNodeページのメタタグを設定します。このページはメインのMix設定ページからモーダルとしてアクセスするか、直接アクセスできます。
/user/{user}/password
「独立パスワード変更ページ」オプションが有効な場合に表示される独立パスワード変更ページ。現在のパスワード確認付きでユーザーパスワードを変更するための専用フォームを提供します（パスワードリセットトークンと管理者ユーザーの場合は省略されます）。
Hooks 18
hook_form_alter
フォームに送信ボタン非表示と未保存フォーム確認のライブラリをアタッチします。また、show_form_idが有効な場合はフォームIDを表示し、設定されている場合はリビジョンフィールドを非表示にします。
hook_form_user_admin_settings_alter
ユーザー管理設定フォームに「登録フォームにパスワードフィールドを表示」チェックボックスを追加します。
hook_form_user_register_form_alter
register_passwordが有効な場合、ユーザー登録フォームにパスワードフィールドを追加します。
hook_form_user_form_alter
standalone_password_pageが有効な場合、ユーザー編集フォームのパスワードフィールドを非表示にし、独立パスワードページにリダイレクトします。
hook_form_block_form_alter
Block設定フォームにCSSクラスフィールドとドロップダウンチェックボックス（メニューBlockの場合）を追加します。
hook_form_menu_link_content_form_alter
メニューリンクフォームに詳細設定（ロール、リンク属性、コンテナ属性、HTMLを許可、メニュートークン）を追加します。
hook_page_top
設定されている場合、すべてのページの上部に環境インジケーターバナーを追加します。
hook_page_attachments_alter
remove_x_generatorが有効な場合、添付ファイルからsystem_meta_generatorを削除します。
hook_preprocess_html
メタ設定に基づいてフロントページとNodeページにメタタグを追加し、ページタイトルを変更します。
hook_preprocess_block
サードパーティ設定に基づいてBlockにカスタムCSSクラスとドロップダウン機能を追加します。
hook_preprocess_menu
メニュー項目を処理してトークンを置換し、ロール制限に基づいて項目を非表示にし、コンテナ属性を適用します。
hook_menu_links_discovered_alter
メニューリンクをスキャンしてトークンを検出し、後で処理するために元の値をオプションに保存します。
hook_link_alter
メニューリンクURLのトークンを置換し、メニュータイトルでHTMLを許可します。
hook_theme_registry_alter
ドロップダウン機能のためにコアのメニューThemeに基づいたカスタムmix_menu Themeを登録します。
hook_token_info
ユーザーアバターを表示するための[current-user:picture]と[current-user:picture:image-style]トークンを提供します。
hook_tokens
ユーザー画像トークンのトークン置換を実装します。
hook_block_presave
Block Entityが保存される前に空のサードパーティ設定をクリーンアップします。
hook_views_pre_render
管理リストに表示するためにblock_content Viewの結果にコンテンツ同期IDを追加します。
Security Notes 5
- メニューリンクの「HTMLを許可」オプションは、メニュータイトルに生のHTMLを許可するため、慎重に使用する必要があります。このオプションでメニューリンクを編集できるのは信頼できるユーザーのみにしてください。
- コンテンツ同期は、すべてのフィールドを含む完全なEntityデータをエクスポートします。機密データが誤って転送されないよう、インポート前にエクスポートされたコンテンツを確認してください。
- カスタムエラーページのコンテンツはHTMLとしてレンダリングされます。設定されたコンテンツにユーザー提供または信頼できないコンテンツが含まれていないことを確認してください。
- 開発モードは複数のCacheレイヤーを無効にし、詳細なエラー報告を有効にします。詳細なエラー情報が公開されるため、本番環境では絶対に有効にしないでください。
- 設定インポート無視機能はインポート中のアクティブストレージで動作します。無視リスト自体も無視される対象となるため、各環境で無視リストが適切に設定されていることを確認してください。