Drupalのモジュール（PHPFilterなど）で言語選択ブロックの改造

モジュール（Localization Update）でサイトの多言語ユーザーインターフェースを導入します

• 背景：Drupal7.54、Localization Update7.x-2.1
• モジュール（Localization Update）をインストール／有効化します
• 言語設定画面（ホーム » 管理 » 環境設定 » 地域と言語 » 言語）で「言語を追加」リンクをクリックすると、必要なユーザーインターフェース言語の導入ができます

管理者がサイト単位でユーザーインターフェース言語の一括設定（ほかの言語を使用しない）

• Druaplを初期インストール（英語バージョンの場合）後に、別の言語（例：日本語）を導入し、その言語のみを使用します
• 言語設定画面（ホーム » 管理 » 環境設定 » 地域と言語 » 言語）でのデフォルト値を選択すればよいです
  
• サイト管理者が選択してから、一般ユーザーの選択はできません。

複数の言語をユーザーインターフェースとして利用する場合に、URL/ブラウザ／セッション／ユーザーの言語設定などよりサイトの言語自動判別ができます

• 複数のユーザーインターフェース言語がある場合、どれを使用するかは決める必要があります
• 言語判別設定画面（ホーム » 管理 » 環境設定 » 地域と言語 » 言語 » 判別と選択）言語利用の判別条件を設定します
  
  • URL： URLから言語を判定する(パス接頭語かドメイン)
  • セッション： 言語をrequest/sessionパラメーターから判定する。
  • ブラウザ： ブラウザーの言語設定から言語を判定する。
  • ユーザー： ユーザープロフィールで設定した言語に従う。
  • デフォルト： サイトのデフォルト言語を使う
• 上記判別方法のい任意、または全部の選択はできます
• 判別の優先順のソートができます
• URLで言語判断設定した場合、URLのドメイン／パス接頭語の設定が必要となります
  
  • 「言語のドメイン」と「言語コードのパス接頭語」のどちらかの設定（両方の設定はできない）
  • 設定された方式で言語を判別となります
  • 説明の言葉通りに、一度設定したら、変更時にすでに存在しているパスが使用できなくなりますので、ご注意ください（変更後にすべてのパスを再構築などの作業が必要）
    

Drupalの多言語対応モジュール（Locale、Localization Update）ので多言語ユーザーインターフェース導入

• 背景：Drupal7.54、Locale（コアモジュール）、Localization Update7.x-2.1
• 多言語ユーザーインターフェースの導入は別記事を参考にしてください
  • Drupalの多言語ユーザーインターフェースの導入と設定
  • Drupalのモジュール（Locale）の使用で多言語サイトの導入

モジュール（Entity Translation）で各フィールド単位での翻訳

• EntityTranslation7.x-1.06-bata6をインストールします
• 言語判別設定画面（ホーム » 管理 » 環境設定 » 地域と言語 » 言語 » 判定と選択）で二つの言語判別設定グループが現れます
  
  • ユーザーインターフェースの言語判別
  • コンテンツの言語判別

各翻訳する必要なフィールド設定で翻訳を有効化します

• Entity Translation設定（ホーム » 管理 » 環境設定 » 地域と言語 » Entity translation）で翻訳する必要なコンテンツ（例：記事）を選択します
• コンテンツ設定（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article）の「掲載オプション」の「 多言語サポート 」項目に「 有効（フィールド翻訳） 」として設定します
• フィールド設定（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » フィールドの管理 » Article）で「フィールド翻訳」をオンにします

作成されたコンテンツの翻訳タブで各言語の翻訳内容を作成します

• 作成されたコンテンツのビューに「翻訳」タブが現れます
• 「翻訳」タブで、コンテンツに必要な翻訳内容を作成します
  • 翻訳が無ければ初期入力された内容が確認言語に表示されます
  • タイトルの翻訳を対応していません（タイトルの翻訳がモジュール（Title）の導入が必要）

問題点：Drupalの多言語サイトでの言語選択スイッチがすべての言語を一覧として表示するので場所が取りすぎ

• 背景：Drupal7.54、Language Iconで言語選択肢に国旗アイコンを追加します
• 多言語ユーザーインターフェースが導入
  • Drupalのモジュール（Locale）の使用で多言語サイトの導入 (275)
  • Drupalの多言語ユーザーインターフェースの導入と設定 (274)
• 多言語のユーザーインターフェス切り替えスイッチブロックをサイトのヘッダーに設置します
  • 複数の言語（例：中国語、日本語、英語）などがあれば、一覧表示されて、場所が取りすぎ
  • ユーザーにとって一度言語を選択したらあまり変わらないので、すべての表示必要はありません

改善案：多言語選択スイッチブロックを表示にして選択された言語のみを表示させる

• 選択された言語のみをヘッダーに表示します
• 選択された言語アイコンをクリックすると言語選択スイッチが表示/非表示にします
  

モジュール（PHPFilter/BlockAttributes）などを利用して言語選択ブロックを改善します

• 以下のモジュールを利用します
  • Block Attributes
  • PHP Filter（コア）
  • Language Icon
  • ｊQuery Update （ｊQuery1.7以降に設定を勧め）
• ブロック管理画面（ホーム » 管理 » サイト構築 » ブロック）で言語選択スイッチブロックをヘッダーに設置します
  • 言語選択ブロックのｃｓｓクラスを「flag-well」に設定
  • 言語選択のタイトルを表示しない（タイトルに「<none>」を入力）
• ブロック管理画面（ホーム » 管理 » サイト構築 » ブロック）で選択された言語の表示ブロックを新規作成します
  • 選択された言語の表示PHPコード

    <?php
      global $language ;
      if ($path = variable_get('languageicons_path', drupal_get_path('module', 'languageicons') . '/flags/*.png')) {
        $title = $language->name;
        // Build up $image for theme_image() consumption.
        $image = array(
          'path' => str_replace('*', $language->language, check_plain($path)),
          'alt' => $title,
          'title' => $title,
          'attributes' => array(
            'class' => array('language-icon'),
          ),
        );
        if ($size = check_plain(variable_get('languageicons_size', '16x12'))) {
          list($width, $height) = explode('x', $size);
          $image += array('width' => $width, 'height' => $height);
        }
        print "<a href='#' class='has-anchor-link ripple'>".theme('image', $image)."</a><div class='no-anchor-link'>".theme('image', $image)."<span class='language-title'>".$language->native."</span></div>";
      }
    ?>

  • カスタムブロック、言語選択スイッチブロックを修飾するｃｓｓ定義

    <style>
      .flag-well {
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
      }
        #block-locale-language {
        position: absolute;
        right: -25px;
        top: 35px;
        padding: 5px 0;
        visibility: hidden;
      }
      #block-locale-language ul {
        padding: 0;
        margin: 0 0 0 1em;
        width: 100px;
      }
      #block-locale-language ul li {
        list-style: none;
    	display: inline-block;
      }
      #block-locale-language ul li a{
        color: black;
      }
      #block-locale-language.opened {
        visibility: visible;
      }
      #block-locale-language.closed {
        visibility: visible;
      }
      #language-setting-block .no-anchor-link {
        display: none;
      }
      #language-setting-block img {
        width: 25px;
        margin-right: 10px;
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      #language-setting-block img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
      }
    
    </style>

  • 言語選択スイッチの表示/非表示制御JavaScript

    <script>
      jQuery(document).ready( function($) {
        $('#language-setting-block a').on('click',function(e){
            var dropdown = $('#block-locale-language');
            e.preventDefault();
            if(dropdown.hasClass('opened')){
                dropdown.removeClass('opened').addClass('closed');
                setTimeout(function(){
                    dropdown.removeClass('closed')
                },500);
            }else{
                dropdown.addClass('opened');
            }
        });
      } );
    </script>

  • カスタムブロックのID：「language-setting-block」