MinervaNeueのスキンで左メニューを拡張する

今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧倒的にメニューが使いづらいです。デフォルトのメインメニューはホームしかありません。それは、ベクタースキンでも同じなのですが。というわけで、MinervaNeueスキンの左メニューを拡張する方法を探してきました。

MinervaNeueスキンで左メニューを拡張する

まず最初に、MediaWiki:Mobile.jsこの文字列をMediaWikiの検索ボックスに入力して検索します。
そうすると、MediaWiki内に存在しているMobile.jsというものを編集できます。私もこの辺はどうなっているのかあまり把握していません。直接ファイルを編集しているわけではなさそうなのですが、でもMediaWikiでMobile.jsというファイルをハンドルしているようにも考えられます。
とにかく、MediaWiki上でMobile.jsをソース編集する画面になりますので、そこで以下のコードを貼り付けます。

/* Add to MediaWiki:Mobile.js for custom Mobile Menu links 
for MW-1.40.1 with MobileFrontend and MinervaNeue 
Just replace span text and href to add links */

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
               '<ul class="level1"> \
                    <li> \
                    <a href="#" \
                          class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                    <span>Dropdown Links</span> \
                    </a> \
                    </li> \
                    <ul class ="level2"> \
                         <li> \
                         <a href="/wiki/Link_1" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 1</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_2" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 2</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_3" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 3</span> \
                         </a> \
                         </li> \
                    </ul> \
               </ul> \
               <ul> \
                    <li> \
                    <a href="/wiki/Second_Link" \
                          class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                    <span>Second Link</span> \
                    </a> \
                    </li> \
               </ul>'
          );
          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){ 
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms

上記のコードは、色々調べていたらたどりついたブログサイトで見つけたものです。
簡単な解説をすると、level1ブロックをクリックするとlevel2ブロックが見えるようになるというjavascriptコードです。
私は、あまりjavascriptが好きではないので、いじりたくなかったのですがインデントが多くてコードを整理していたら、最初はコードが動作していたのに急に動作不良になりました。あれこれいじっていると原因がわかりました。
改行をエスケープしている箇所がエラーになっているということがわかりました。というわけで\を消してしまっていたのですが、これは改行コードをエスケープする大事な記号なので、皆さんは間違って消さないように注意してください。私はこれがわかるまで2時間くらいかかりました。
もう、だいぶプログラミングの世界から遠ざかっていたのでエスケープという、プログラミングの基本的なことも忘れていたようです。とほほ。

あと注意すべきは、文字コードはUTF-8で改行はLFにすることです。一度サクラエディタ等のテキストエディタにこのコードを貼り付けて、編集してからMediaWiki:Mobile.jsの編集フォームに入力すると間違いがないと思います。以上が、モバイル用スキンMinervaNeueにおける左メニューの拡張でした。

動作環境

参考資料