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

Umebossi: detailsタグとsummaryタグの挿入

2024-09-29T04:06:49Z

detailsタグとsummaryタグの挿入

← 古い版		2024年9月29日 (日) 13:06時点における版
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/Download/ja MediaWiki ver 1.40.1]
	* [https://www.mediawiki.org/wiki/Extension:MobileFrontend/ja Extension:MobileFrontend]		* [https://www.mediawiki.org/wiki/Extension:MobileFrontend/ja Extension:MobileFrontend]
	* [https://www.mediawiki.org/wiki/Skin:Minerva%20Neue Skin:Minerva Neue]		* [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についての備忘録]]		[[Category:MediaWikiについての備忘録]]

2023年11月11日 (土) 16:47にUmebossiによる

2023-11-11T16:47:33Z

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

			== 動作環境 ==
			* [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]

	== 参考資料 ==		== 参考資料 ==

2023年11月11日 (土) 16:38にUmebossiによる

2023-11-11T16:38:39Z

← 古い版		2023年11月12日 (日) 01:38時点における版
72行目:		72行目:
	* [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]

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

Umebossi: ページの作成:「今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧…」

2023-11-11T16:36:38Z

ページの作成:「今は大モバイル時代。一人一モバイル時代でWEBサイトへのアクセスの8割はモバイルからという時代です。そのため、モバイルユーザーフレンドリーなWEBサイトが必要なわけなんですが、このMediaWikiはデフォルトではあまりモバイルにやさしくありません。特にMinervaNeueはモバイル特化用スキンと言いながらコンテンツは見やすくなっているもの、圧…」

新規ページ

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

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

<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"> \
Dropdown Links \
</a> \
</li> \
<ul class ="level2"> \
<li> \
<a href="/wiki/Link_1" \
class="mw-ui-icon mw-ui-icon-before"> \
Link 1 \
</a> \
</li> \
<li> \
<a href="/wiki/Link_2" \
class="mw-ui-icon mw-ui-icon-before"> \
Link 2 \
</a> \
</li> \
<li> \
<a href="/wiki/Link_3" \
class="mw-ui-icon mw-ui-icon-before"> \
Link 3 \
</a> \
</li> \
</ul> \
</ul> \
<ul> \
<li> \
<a href="/wiki/Second_Link" \
class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
Second Link \
</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 ブログサイト]で見つけたものです。 
簡単な解説をすると、level1ブロックをクリックするとlevel2ブロックが見えるようになるというjavascriptコードです。 
私は、あまりjavascriptが好きではないので、いじりたくなかったのですがインデントが多くてコードを整理していたら、最初はコードが動作していたのに急に動作不良になりました。あれこれいじっていると原因がわかりました。 
改行をエスケープしている箇所がエラーになっているということがわかりました。というわけで<code>\</code>を消してしまっていたのですが、これは改行コードをエスケープする大事な記号なので、皆さんは間違って消さないように注意してください。私はこれがわかるまで2時間くらいかかりました。 
もう、だいぶプログラミングの世界から遠ざかっていたのでエスケープという、プログラミングの基本的なことも忘れていたようです。とほほ。 

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

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