よみもの:EnpediaにCodeMirrorを導入する方法

	よみものページ
	この「よみもの」は、Yaakiyu.jpが作成したものです。 他ユーザーの編集も歓迎いたします。

そもそもCodeMirrorってなに？

mw:Extension:CodeMirrorを見ましょう。簡単に言うと、編集画面でウィキ構文に色を付けてくれるやつです。本来は拡張機能なのでEnpediaのサーバーに導入してもらえばいいのですが、なかなか導入ができない理由はお察しの通り。

何が便利なの？

言うまでもないでしょう。Enpediaの編集が10億倍やりやすくなります(個人差アリ)。構文に合わせて色を付けてくれるだけでなく、CodeMirror6では、リンク、テンプレートやマジックワードのオートコンプリートまでしてくれます。無茶苦茶便利。

いいから導入方法を教えて！

ログインユーザーなら、common.jsを開いて、以下の2行を付け足しましょう。

// [[wp:mw:Extension:CodeMirror/ja]]を無理やり導入するスクリプト
{const t=mw.config.get(['wgAction','wgPageContentModel']);if(['edit','submit'].includes(t.wgAction)&&!['javascript','css'].includes(t.wgPageContentModel)){const s=document.createElement('script');s.src='https://www.mediawiki.org/w/load.php?debug=false&lang=ja&modules=ext.CodeMirror.v6|ext.CodeMirror.v6.lib|ext.CodeMirror.v6.mode.mediawiki';s.onload=function(){mw.loader.using(['ext.CodeMirror.v6','ext.CodeMirror.v6.mode.mediawiki'],function(r){const cm=r('ext.CodeMirror.v6');(new cm(document.getElementById('wpTextbox1'),r('ext.CodeMirror.v6.mode.mediawiki')())).initialize()})};document.head.appendChild(s)}}

IPユーザーのみなさんは、たぶん以下のコードをブックマークに登録して編集画面でブックマークを押すとかで行けます。(未テストです。誰か試してみてください。)

javascript:{const t=mw.config.get(['wgAction','wgPageContentModel']);if(['edit','submit'].includes(t.wgAction)&&!['javascript','css'].includes(t.wgPageContentModel)){const s=document.createElement('script');s.src='https://www.mediawiki.org/w/load.php?debug=false&lang=ja&modules=ext.CodeMirror.v6|ext.CodeMirror.v6.lib|ext.CodeMirror.v6.mode.mediawiki';s.onload=function(){mw.loader.using(['ext.CodeMirror.v6','ext.CodeMirror.v6.mode.mediawiki'],function(r){const cm=r('ext.CodeMirror.v6');(new cm(document.getElementById('wpTextbox1'),r('ext.CodeMirror.v6.mode.mediawiki')())).initialize()})};document.head.appendChild(s)}}

このコードの初版執筆者の利用者:Yaakiyu.jpは著作権を放棄します。パブリックドメインとしますので、じゃんじゃん利用しちゃってください。

解説

何をしているかを解説します。

1. 編集画面以外なら何もしない、jsとかcssの編集画面でも何もしない
   • 当たり前体操その１。CodeMirrorは編集画面用の拡張機能ですし、jsやcssはEnpediaでもすでに色付きのエディターで書けるようになっています。
2. MediaWikiのサイトのAPIから、CodeMirror読み込み用のコードを引っ張ってくる。
   • これが結構このコードの核です。CodeMirror拡張機能があるwikiならどこから持ってきてもよかったのですが、サーバーが強そうなmediawikiから。
3. これをmw.loader.usingで使う宣言をして、initialize()でCodeMirrorを初期化する。
4. 以上の一連の操作をするスクリプトを、ページに埋め込む。
   • 当たり前体操その２。これがないとスクリプトは動きませんからね。

つまり、上のコードでは、Enpediaの外から拡張機能を持ってきてぶち込むというなかなかクレイジーなことをやってます。

Q&A

• Q. Enpediaのサーバー負荷はかからないの？
• A. ほぼかからないと思っています。というのも、編集画面の色付けには(上記の通りMediaWikiサーバーのapiを叩くので)Enpediaのサーバーは関係ないですし、一応機能としてオートコンプリートがあって、それはEnpediaのサーバー側に問い合わせることになっているのですが、全く同じ機能を既に右上の検索欄で使っています。つまり、Enpedia:サーバー負荷を気にしすぎない#気にしなくてもよい負荷に該当すると思っております。もし何か問題ありましたら教えてください。--Yaakiyu.jp (トーク) 2026-02-22T22:51:52 (JST)

• Q. じゃあMediaWikiのサーバー負荷はかからないの？
• A. 微々たるものです。このコードでアクセスしているAPIは、実はMediaWikiのサイトで編集を行うときも毎回リクエストするエンドポイントになっています。つまり、MediaWikiを普通に編集するとき(あんまりないと思うけど)と同じような頻度でしかリクエストが飛びませんし、ウィキメディア財団のサーバーの強さを考えればEnpediaでこれを数百人とかが使ったところで問題にはならないでしょう。

(どうしても気になる方はctrl+shift+iで開発者モードでも使ってネットワークから"load.php"のログを探してみてください。)

• Q. MediaWikiサイト側は、外部からのアクセスを禁止したりしてないの？
• A. 多分、大丈夫。正式な発表が見当たらないのでどうしてもグレーゾーンということにはなるのですが、もし本当にアクセスしてほしくないならCORS(オリジン間リソース共有)でストップをかけてくるはずです。技術的に容易に制限できる(しかもセキュリティ上は制限した方がいい)ものを制限していないということは、そういうこと。

• Q. 改造してもいい？
• A. どうぞ！上でも書いた通りこのコードはパブリックドメインとしますので、いくらでも改造してくれちゃって構わないです。でも、もし今のコードよりもいいものが出来上がったら、このページを編集して新しいコードに書き換えてくれると後の人のためになるよ～...()

既知のバグ

• まれにCodeMirrorが適用されない。
  • 解決策：何回か再読み込みする。それでも治らなかったらあきらめる。
  • 特に、新しいページを作成しようとしたときに高頻度で発生します。しかも普通のエディタの縦幅も狭くなる弊害付き。原因よくわからないので誰か直してください；； by 初版執筆者
• まれにエディタの縦幅が0になる
  • 解決策：エディタの幅調節用のバーをちょっとドラッグしてあげる
  • こちらも原因不明ですが、実際の編集にはそんなに影響がないものとみられます。もしわかる方がいたら直してください(2回目)

最後に

一応、この言葉を述べておきます。ご利用は自己責任で。