「MinervaNeueのスキンで左メニューを拡張する」の版間の差分

提供:Euro Truck Simulator 2 FanWiki
ページの作成:「今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧…」
 
detailsタグとsummaryタグの挿入
 
(同じ利用者による、間の2版が非表示)
1行目: 1行目:
今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧倒的にメニューが使いづらいです。デフォルトのメインメニューはホームしかありません。それは、ベクタースキンでも同じなのですが。というわけで、MinervaNeueスキンの左メニューを拡張する方法を探してきました。
今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧倒的にメニューが使いづらいです。デフォルトのメインメニューはホームしかありません。それは、ベクタースキンでも同じなのですが。というわけで、MinervaNeueスキンの左メニューを拡張する方法を探してきました。


== MinervaNeueスキンで左メニューを拡張する ==
<details open>
<summary>== MinervaNeueスキンで左メニューを拡張する ==</summary>
まず最初に、<code>MediaWiki:Mobile.js</code>この文字列をMediaWikiの検索ボックスに入力して検索します。<br>
まず最初に、<code>MediaWiki:Mobile.js</code>この文字列をMediaWikiの検索ボックスに入力して検索します。<br>
そうすると、MediaWiki内に存在しているMobile.jsというものを編集できます。私もこの辺はどうなっているのかあまり把握していません。直接ファイルを編集しているわけではなさそうなのですが、でもMediaWikiでMobile.jsというファイルをハンドルしているようにも考えられます。<br>
そうすると、MediaWiki内に存在しているMobile.jsというものを編集できます。私もこの辺はどうなっているのかあまり把握していません。直接ファイルを編集しているわけではなさそうなのですが、でもMediaWikiでMobile.jsというファイルをハンドルしているようにも考えられます。<br>
68行目: 69行目:
あと注意すべきは、文字コードはUTF-8で改行はLFにすることです。一度サクラエディタ等のテキストエディタにこのコードを貼り付けて、編集してから<code>MediaWiki:Mobile.js</code>の編集フォームに入力すると間違いがないと思います。
あと注意すべきは、文字コードはUTF-8で改行はLFにすることです。一度サクラエディタ等のテキストエディタにこのコードを貼り付けて、編集してから<code>MediaWiki:Mobile.js</code>の編集フォームに入力すると間違いがないと思います。
以上が、モバイル用スキンMinervaNeueにおける左メニューの拡張でした。
以上が、モバイル用スキン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://qiita.com/mkuriki1990/items/a6073ceaf25ebc5cf08d Qiita@mkuriki1990(村橋 究理基)]
* [https://www.mediawiki.org/wiki/Topic:Vqy1kx6q4e0bzvyb Topic on Extension talk:MobileFrontend]
* [https://www.mediawiki.org/wiki/Topic:Vqy1kx6q4e0bzvyb Topic on Extension talk:MobileFrontend]
</details>
[[Category:MediaWikiについての備忘録]]

2024年9月29日 (日) 13:06時点における最新版

今は大モバイル時代。一人一モバイル時代で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における左メニューの拡張でした。

動作環境

参考資料