Language Switcher Dropdown
デフォルトのハイパーリンクの代わりに言語切り替え用のドロップダウン選択要素を提供し、複数のJavaScriptウィジェットライブラリとカスタマイズ可能なスキンをサポートします。
lang_dropdown
インストール
composer require 'drupal/lang_dropdown:8.x-2.4'
composer require 'drupal/lang_dropdown:8.x-2.0'
概要
Language Switcher Dropdownは、Drupal CoreのLanguageモジュールが提供するデフォルトの言語切り替えBlockと同様の新しいBlockを公開するモジュールです。ハイパーリンクを使用する代わりに、サイト訪問者はドロップダウン選択リストを使用して言語を切り替えることができます。
このモジュールは4種類の出力ウィジェットタイプを提供します：シンプルなHTML select、Marghoob Suleman Dropdown（ms-Dropdown）、Chosen、ddSlickです。各ウィジェットタイプには、さまざまなプリビルトスキンやカスタムスキンのサポートを含む独自の設定オプションがあります。
このモジュールはLanguage Iconsモジュールとシームレスに統合し、言語名と一緒に国旗を表示できます。さらに、管理者は特定のユーザーロールに対してどの言語を表示するかを設定でき、言語切り替え体験をきめ細かく制御できます。
Features
- より良いUXのためにハイパーリンクの代わりにドロップダウン選択を使用した言語切り替えBlockを提供
- 4種類のウィジェット出力タイプ：シンプルなHTML select、Marghoob Suleman Dropdown（ms-Dropdown）、Chosenライブラリ、ddSlickライブラリ
- ms-Dropdown（Default、Dark、Blue）とddSlick（Default、Dark、Blue）ウィジェット用の複数のプリビルトスキン（アイコン位置のバリエーション付き）
- ms-DropdownとddSlickウィジェット両方のカスタムCSSスキンをサポート
- Language Iconsモジュールとの統合により、ドロップダウンに国旗を表示
- 4種類の表示形式オプション：現在の言語に翻訳、言語のネイティブ名、言語コード、対象言語に翻訳
- すべての有効な言語を表示するか、利用可能な翻訳がある言語のみを表示するオプション
- 翻訳が1つしか利用できない場合にスイッチャーを非表示にするオプション
- 言語切り替え時にホームページにリダイレクトするオプション
- ピクセル単位で設定可能なドロップダウン幅
- ロールベースの言語非表示：特定のユーザーロールから特定の言語を非表示
- noscriptサポートによるフォーム送信のための優雅なJavaScriptフォールバック
- 言語、ユーザーロール、URLパス、クエリ引数による適切なキャッシュのためのCache context対応
Use Cases
基本的な多言語サイトの言語スイッチャー
Language dropdown switcher Blockをサイトのヘッダーまたはサイドバーリージョンに配置します。クリーンでアクセシブルな、JavaScriptライブラリなしで動作する言語スイッチャーのために、「言語のネイティブ名」表示形式と「シンプルHTML select」ウィジェットで設定します。
国旗付きの視覚的に強化された言語スイッチャー
Language IconsモジュールとMS DropdownまたはddSlickライブラリのいずれかをインストールします。これらのウィジェットのいずれかを使用するようにBlockを設定し、各言語オプションの横に国旗が表示される魅力的なドロップダウンを表示します。
匿名ユーザーから言語を非表示
Block設定の「言語非表示設定」セクションを使用して、特定の言語（ドラフト翻訳など）を匿名ユーザーから非表示にし、認証済みユーザーや管理者には表示したままにします。
コンテンツ翻訳言語スイッチャー
「1つの言語しか利用できない場合に非表示」オプションを有効にし、「すべての有効な言語を表示」を無効にして、現在のコンテンツに複数の翻訳がある場合にのみ表示され、利用可能な翻訳のみを表示する言語スイッチャーを作成します。
カスタムブランドの言語ドロップダウン
提供されているサンプルファイル（ldsCustom.css.sampleまたはddsCustom.css.sample）に従ってカスタムCSSスキンファイルを作成し、適切なライブラリフォルダに配置し、Block設定で「カスタムスキン」を選択してサイトのデザインに合わせます。
Tips
- 拡張ドロップダウンウィジェット用に外部ライブラリ（ms-Dropdown、Chosen、ddSlick）をDrupalルートのlibrariesフォルダにダウンロード
- Language Iconsモジュールを使用して言語ドロップダウンに国旗を表示
- 「対象言語に翻訳」表示オプションは、各言語名をその言語自体で表示します（例：フランス語の場合はFrançais）
- サンプルCSSファイルをコピーしてテーマに合わせて修正することでカスタムスキンを作成
- 翻訳されていないコンテンツで無駄な1つのオプションだけのドロップダウンを表示しないように「1つの言語しか利用できない場合に非表示」を有効化
- 複数の言語タイプが設定されている場合、モジュールは異なる言語タイプ（インターフェース、コンテンツ）用に異なるBlockを提供
- セッションベースの言語ネゴシエーションを使用するサイトでは、ドロップダウンはセッションで選択された言語を正しく反映
Technical Details
Admin Pages 1
/admin/structure/block
Language dropdown switcher Blockを配置および設定します。Block設定フォームは、言語ドロップダウンの動作と外観をカスタマイズするためのすべての設定を提供します。
Hooks 1
hook_help
ヘルプページでモジュールのヘルプテキストを提供し、MS DropdownとddSlickウィジェット両方のカスタムスキン作成手順を含みます。
Troubleshooting 4
これは最近のアップデート（Issue #3524882）で対処されました。モジュールの最新バージョンを使用していることを確認してください。この修正により、言語、ユーザーロール、URLパス、クエリ引数による適切なキャッシュのためのCache context処理が改善されました。
これらのウィジェットタイプには、それぞれのJavaScriptライブラリのインストールが必要です。ライブラリをダウンロードしてlibrariesフォルダに展開してください：libraries/ms-dropdown、libraries/chosen、またはlibraries/ddslick。
Language Iconsモジュールをインストールして有効にしてください。MS DropdownとddSlickウィジェットの場合、国旗は各オプションに表示されます。シンプルHTML selectの場合、Block設定で国旗の位置を設定してください。
カスタムCSSファイルが正しいライブラリフォルダに配置され、正しく名前が付けられていることを確認してください。ファイル内のCSSクラス名は、Block設定で入力したカスタムスキン名と一致する必要があります。