jQuery mmenuの導入

メインメニューの表示を少し変えてみようということで、jQuery.mmenuを使ってみることにしました。

jQuery.mmenu

jQuery.mmenu(以下,mmenu)は、jQuery用プラグインでスライドメニューを構築することが可能です。
公式サイトはhttp://mmenu.frebsite.nl/になります。
現在の最新版はバージョン5.7になります。
ライセンスはCreative Commons Attribution-NonCommercial 4.0 International(英文)https://creativecommons.org/licenses/by/4.0/legalcode.ja(和文)を参照してください。
個人サイトまたは非営利目的に限り無料のようです。
現在、営利と非営利についての正確な線引きが困難であるため裁判所の判断にゆだねるそうです。
今回はFreeバージョンをダウンロードして利用しました。

サイトにはWordpress用のプラグインとjQuery用のプラグインが用意してあります。
Drupalで利用するには、jQuery用のプラグインをダウンロードして利用することになります。

以下は、このmmenuを利用したもしくは同じようにスライドメニューを構築できる同様のDrupal寄贈モジュールです。

どのモジュールも、「Libraries 2.x」、「jQuery Update」モジュールが要件になっています。
これらのモジュールは、他でも利用しますので導入していて損はないと思います。

上記の中でMobile sliding menuモジュールは、mmenuを利用しています。
しかし、mmenuの最新版には対応していないようで5.xは動作しないかも?という状況のようです。

今回は、Mobile sliding menuモジュールを使わず、カスタムモジュールを作成して設置してみます。
mmenuのように公式サイトにdrupal用プラグインが用意されていないケースもあるためチャレンジです。

カスタムモジュールを作成しておけば、テーマなど何かを変更した場合になにかと都合がよいと思います。
そのため、できるだけテーマテンプレートを編集しなくていいようにしました。

mmenuを設置するには以下が必要です。

  1. jQuery.mmenuライブラリの設置
  2. jQuery.menuのCSSファイルとjQueryとjQuery.menuのjavascriptファイルのインクルード
  3. メニューの設置
  4. ボタンの設置
  5. jQueryのreadyイベント

ライブラリーの設置

上の1番に関する作業になります。

ライブラリのダウンロード

http://mmenu.frebsite.nl/download.htmlからライブラリをダウンロードします。

サーバから直接ダウンロードするならgitやwgetでダウンロードすると楽です。

ダウンロードしたファイルを解凍すると以下のような階層になっています。
jQuery.mmenu

使用するのは通常はdist以下になります。

mmenuのjavascriptとCSSファイルの対応

項目 javascript StyleSheet 説明
ALL jquery.mmenu.all.min.js jquery.mmenu.all.css すべてのアドオンと拡張機能が使用可
基本 jquery.mmenu.min.js jquery.mmenu.css 基本的なオプションが使用可能
アドオンと拡張機能を利用する場合はそれぞれのファイルを追加で読み込む必要がある
最小 jquery.mmenu.oncanvas.min.js jquery.mmenu.oncanvas.css 最小構成、基本機能しか使用しない場合

基本のファイルを利用する場合は、アドオンや拡張機能にあったjavascriptファイルまたはCSSファイルの追加読み込みが必要です。
ファイルは、addonsフォルダとextentionsフォルダにそれぞれ機能ごとにあります。

ライブラリの設置

Drupalシステムとは別のコンピュータにダウンロードした場合は、アップロードが必要です。
sites/all/libraries/mmenu以下に必要なファイルをアップロードしてください。

今回は以下のようにしました。
sites/all/libraries/mmenu

※drupalのマルチサイト構成の場合は利用範囲などによって配置する場所が異なるので注意してください。

mmenu用カスタムモジュールの作成

mmenuを配置するためにDrupalのカスタムモジュールを作成することにします。
今回は敷居が低くなるよう簡単にということで上の2番と5番をカスタムモジュールに実装します。
※上級者であれば2番から5番まで作りこむことができると思います。

まず、モジュールの作成です。
作成するモジュール名は「mmenu_custom」にしました。

モジュールフォルダーを作成

mmenu_customフォルダーを作成します。
このフォルダーの中にdrupalモジュールに必要なパーツを配置します。

メタデータファイルの作成

mmenu_custom.infoファイルを作成します。
このファイルには、モジュールのメタデータを入力します。

name = mmenu_custom
description = jQuery mmenu
package = Other
dependencies[] = libraries (>=2.x)
core = 7.x
version = "7.x-1.0"
 

nameはカスタムモジュール名を入力します。(mmenu_custom)
descriptionはモジュールの説明です。(任意)
packageはモジュールのカテゴリを入力します。モジュール一覧を表示する際にどのカテゴリーに分別されるかが決まります。今回はその他にしています。(Other)
dependenciesはモジュールの依存関係を記載します。今回はlibraries 2.xを記載しました。(libraries (>=2.x))
coreはdrupalのコアバージョンを入力します。drupal 7.x用なので今回は7.xにしました。
versionはこのモジュールの管理バージョンを入力します。バージョン管理方法はいろいろありますが、他のモジュールに合わせた命名即にしました。(7.x-1.0)

PHPファイルの作成

カスタムモジュール用のPHPファイルを作成します。
ファイル名はmmenu_custom.moduleです。

<?php
/**
 * @file
 * mmenu integration with Drupal.
 */
function mmenu_custom_libraries_info() {
  $libraries['mmenu'] = array(
    'name' => 'mmenu',
    'version' => '5.7',
    'vendor url' => 'http://mmenu.frebsite.nl/',
    'download url' => 'http://mmenu.frebsite.nl/download.html',
    'files' => array(
      'js' => array(
        'js/jquery.mmenu.all.min.js' => array(
          'type' => 'file',
          'scope' => 'footer',
        ),
      ),
      'css' => array(
        'css/jquery.mmenu.all.css'),
    ),
  );

return $libraries;
}

/**
 * Implements hook_page_build().
 */
function mmenu_custom_page_build() {

  // Attach library on every page, unless overriden by settings.


  if (($library = libraries_load('mmenu')) && !empty($library['loaded'])) {

    $js_options = array(
      'type' => 'inline',
      'scope' => 'footer',
    );

    // Instantiate mmenu with inline JavaScript.
    drupal_add_js('jQuery(document).ready(function($) {
      $("#block-system-main-menu").mmenu({
                  "extensions": [
            "pagedim-black"
         ],
         "autoHeight": true,
         "dropdown": true
      });
    });', $js_options);
  }
  else {
    drupal_set_message(t('Error loading mmenu Library.'), 'warning', FALSE);
  }
}

functionを2つ登録しています。
今回の場合はmmenu_custom_libraries_info()とmmenu_custom_page_build()になります。
それぞれ、libraries_info(libraries.api.php)page_build(system.api.php)のhookです。

mmenu_custom_libraries_info

1つ目が、libraries APIを使ってdrupalにjavascriptやCSSファイルのインクルードの設定です。
上の2番になります。(※ここでは実際には埋め込みまでは行っていません。)

これにより、header部に他のモジュールと同じようにjavascriptファイルとCSSファイルをインクルードする設定を行っています。
javascriptファイルにはscopeでfooterを指定してあるので、header部ではなくbody部の最後でインクルードするようにしています。
この記述はほかのケースにも利用できます。

今回はmmenuのすべてが含まれているjavascriptファイルとCSSファイルをインクルードしています。
基本のファイルをインクルードする場合はmmenuのアドオンや拡張機能に併せて必要なファイルを追加でインクルードしてください。
※その場合はjsやcssにまとめて配置したほうが利便性が良いと思います。

mmenu_custom_page_build

2つ目がjQueryのreadイベントで実行するjavascriptです。
上の5番になります。(※javascriptファイルとCSSファイルのインクルードも実行しています)

libraries_load(mmenu)でmmenuライブラリをロードしています。
これによりjavascriptファイルとCSSファイルのインクルードが実行されます。
ロードに失敗するとdrupalメッセージエリアにエラーメッセージを表示します。

drupal_add_jsにより、以下のjavascriptコードをページに埋め込んでいます。

 jQuery(document).ready(function($) {
      $("#block-system-main-menu").mmenu({
                  "extensions": [
            "pagedim-black"
         ],
         "autoHeight": true,
         "dropdown": true
      });
    }); 

※この箇所には「'」シングルクォーテーションではなく「"」ダブルクォーテーションを使用しないでください。

このイベントはHTML(DOM)が構成された後に実行されます。
mmenuのオプション、アドオンや拡張機能をここで設定します。

上の例では、スライドではなくドロップダウンメニューを表示し、メニューの高さを自動計算して表示し、さらにメニュー以外をブラックアウト表示するようにしています。

セレクターとなるID属性は"#block-system-main-menu"にしています。
これは、Drupalではメインメニューは標準で用意されているのでテーマの環境設定で表示/非表示を切り替えるだけです。
ただ、使用しているテーマやテーマテンプレートにより、生成されるメインメニューのID属性名が変化します。

どのようなID属性名が使われているかはメインメニューのソースコードを見ればわかります。
今どきのブラウザーは、F12キー(Windowsの場合)を押せば内蔵の開発ツールが起動しますので、そこからも参照できます。

とりあえず、今回は、"#block-system-main-menu"であるとして説明します。

記述上の注意点としまして、jQueryで以下のように「$」を使う場合、Drupalでは「TypeError: $ is not a function」のエラーになります。

jQuery(document).ready(function(){
  $~
}

以下のように記述すればエラーになりません。

jQuery(document).ready(function($){
  $~
}

※function()ではなくfunction($)がポイントです。

詳細はhttps://www.drupal.org/node/171213を参考にしてください。

以上でカスタムモジュールの作成は終了です。

作成したモジュールをdrupalシステムにアップロードして有効にします。

カスタムモジュールのアップロード

カスタムモジュールmmenu_customをdrupalシステムとは別のコンピュータで作成した場合は、アップロードが必要です。
WinSCPなどのファイル転送ソフトを使ってフォルダーごと/sites/all/modules以下にアップロードしてください。

drupalシステム上のコンピュータで作成したのであれば、フォルダーごと/sites/all/modules以下にコピーしてください。
 

カスタムモジュールの有効化

通常のモジュールと同じ操作で有効化します。
おすすめはdrupal管理画面を使う方法です。
メタデータの作成がうまくいっているかなどが直感的でわかりやすいと思います。

drushを使った例

 #drush en mmenu_custom 

一覧の表示

#drush pml
Package         Name                           Type    Status         Version
Other           mmenu_custom (mmenu_custom)    Module  Enabled        7.x-1.0 

※カスタムモジュールのみ抜粋してあります。

メニューの設置

mmenuで表示するメニューを設置します。
上の3番になります。

幸いdrupalでは今回の対象としているメインメニューはコアで作成してくれます。
そして、テーマの設定でこのメインメニューの表示/非表示を簡単に切り替えられるようになっています。
また、ブロックを使っても表示できるようになっています。

どの方法でもメインメニューのHTMLソースコードが生成されますので、生成されたメインメニューのID属性名の確認程度です。

先ほどのjavascriptのところで指定した名前と同じであればOKです。
※id="block-system-main-menu"となっています。
 

ボタンの設置

mmenuを利用するには、mmenuのトリガーイベントになるボタンが必要になります。
このボタンをクリックしたときにmmenuが動作します。

mmenuのためにボタンを新規で作成します。※すでにある場合は不要です。
直接、テーマテンプレート(page.tpl.phpなど)に記述するのもありですが、ここではブロックを新規作成してボタンを作成しました。

新規ブロックの作成

管理画面のadmin/structure/blockにアクセスして新規ブロックを作成します。

ボタンは好みで画像(アイコン)ファイルを使用するなりテキスト文字の記号を配置すればよいと思います。

新規ブロックには以下のように入力しました。

 <a class="menu-btn" href="#block-system-main-menu"></a>

※入力フィルターを設定している場合は、適切に設定してください。
href=で指定するのは、"#block-system-main-menu"になります。

今回はボタン用の画像を用意しましたので、ボタン用のCSSも追加しました。

ブロックの配置

mmenuボタンを配置したいテーマのリージョンに先ほど作成したブロックを設定します。
今回はヘッダーに設定しました。

こんな感じになりました。
mmenu設置例

以上で、mmenuの導入は完了です。

補足

mmenuでは、指定したセレクターID属性名の部分とそうでない部分をそれぞれ別々にラッピングしています。
同じセレクタID属性名で用意したボタンをクリックすることで、それぞれラッピングした部分をアドオンや拡張機能に従って動作させています。
 

Drupalバージョン

Drupal 7.x