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

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

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

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

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

<details open>
<summary>== 動作環境 ==</summary>
* [https://www.mediawiki.org/wiki/Download/ja MediaWiki ver 1.40.1]
* [https://www.mediawiki.org/wiki/Extension:MobileFrontend/ja Extension:MobileFrontend]
* [https://www.mediawiki.org/wiki/Skin:Minerva%20Neue Skin:Minerva Neue]
</details>

<details open>
<summary>== 参考資料 ==</summary>
* [https://qiita.com/mkuriki1990/items/a6073ceaf25ebc5cf08d Qiita@mkuriki1990(村橋 究理基)]
* [https://www.mediawiki.org/wiki/Topic:Vqy1kx6q4e0bzvyb Topic on Extension talk:MobileFrontend]
</details>

[[Category:MediaWikiについての備忘録]]