---
slug: "VisualEditorを有効にしたMediaWikiをインストールする"
title: "Visual Editor を有効にした MediaWiki をインストールする"
description: "\n\n\n社内の情報共有サービスを Wiki で作ろうと思ったのですが、\n開発者以外も使うとすると WYSIWIG なエディタを搭載したものが良いと思いました。"
url: "https://www.ytyng.com/blog/VisualEditorを有効にしたMediaWikiをインストールする"
publish_date: "2013-08-03T01:29:49Z"
created: "2013-08-03T01:29:49Z"
updated: "2026-02-27T11:07:36.989Z"
categories: ["Linux"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/e1b054ef4d824fe7ad1b3888c4756fa5.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "ja"
---

# Visual Editor を有効にした MediaWiki をインストールする

<div class="document">


<p>社内の情報共有サービスを Wiki で作ろうと思ったのですが、
開発者以外も使うとすると WYSIWIG なエディタを搭載したものが良いと思いました。</p>
<p>仕事のメモをするときは、スクリーンショットを取りながら Evernote に保存することが多いのですが、あのような使用感が最高だと思っています。</p>
<p>WordPress がかなり近いのですが、もっと Wiki に近いものが良いと思い、調べたら
MediaWiki に最近(2003年7月現在)できた VisualEditor プラグインが良いと思い、
インストールしてみました。</p>
<div class="section" id="id1">
<h3>1. 結果</h3>
<p>インターネット上の、認証済みページ内に置くのは難しいと思ったので、断念しました。</p>
<ul class="simple">
<li>MediaWiki は、PHP 5.3.2 以上が必要です。</li>
<li>VisualEditor に必要な、Parsoid サーバを動作させるには、Node.js 0.8 が必要です。0.10 では動作しません。(未チェック。公式サイトより。)</li>
</ul>
</div>
<div class="section" id="id2">
<h3>2. インストール方法</h3>
<div class="section" id="mediawiki">
<h4>2-1. mediawikiのインストール</h4>
<p>2013-07-31 現在、MediaWiki の公式サイト <a class="reference external" href="http://www.mediawiki.org/wiki/Download">http://www.mediawiki.org/wiki/Download</a> からは 1.21.1 がダウンロードできますが、このバージョンでは VisualEditor は動かないようなので、 最新版 1.22 alpha を Gitリポジトリから clone します。</p>
<p>web公開ディレクトリの中に、mediawiki というディレクトリでインストールすることにします。</p>
<pre class="literal-block">$ git clone --depth 1 https://gerrit.wikimedia.org/r/p/mediawiki/core.git mediawiki
</pre>
<p>機能拡張は何も入っていないので、VisualEditor, Parsoid 含め、使いそうなものを入れておきます。
シェルスクリプトを書いて実行すると良いでしょう。</p>
<pre class="literal-block">cd mediawiki/extensions/

git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/VisualEditor.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/Parsoid.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/SyntaxHighlight_GeSHi.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/PdfHandler.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/Gadgets.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/WikiEditor.git
git clone --depth 1 https://git.wikimedia.org/git/mediawiki/extensions/InputBox.git
</pre>
<p><a class="reference external" href="http://xxxx/mediawiki/">http://xxxx/mediawiki/</a> にアクセスし、インストーラを手順にそって進め、トップページが見れるようにしておきます。
途中で、どの機能拡張を使うかのチェックボックスが表示されますが、すべてチェックします。</p>
<img alt="/media/photo/20130803-mediawiki/2013-07-31_14.06.02.png" src="/media/photo/20130803-mediawiki/2013-07-31_14.06.02.png"/>
<p>mediawikiにログインし、個人設定に「ビジュアルエディターを有効にする」のチェックがあるので入れて、再度ページを表示させると、「編集」の隣に「ソースを編集」というタブができます。これで VisualEditor は有効になっています。</p>
<img alt="/media/photo/20130803-mediawiki/2013-07-31_14.07.36.png" src="/media/photo/20130803-mediawiki/2013-07-31_14.07.36.png"/>
<img alt="/media/photo/20130803-mediawiki/2013-07-31_14.08.01.png" src="/media/photo/20130803-mediawiki/2013-07-31_14.08.01.png"/>
<p>ただし、このままだと Parsoid のサービスが起動していないため、編集ボタンを押すとエラーが表示されます。</p>
</div>
<div class="section" id="node-js-0-8">
<h4>2-2. node.js 0.8 のインストール</h4>
<p>2-2-a. mac + homebrew の場合</p>
<p>homebrew の node.js の最新版は 0.10x のため、新し過ぎます。古い 0.8 をインストールします。</p>
<pre class="literal-block">$ brew versions nodejs
0.8.22   git checkout 3c4a714 /usr/local/Library/Formula/node.rb

$ cd /usr/local/Library/Formula
$ git checkout 3c4a714 /usr/local/Library/Formula/node.rb
$ brew install nodejs

$ node -v
v0.8.22
</pre>
<p>入りました。</p>
<p>2-2-b.  CentOS 5.9 の場合</p>
<p>ソースからコンパイルします。</p>
<p>ビルドツールは</p>
<pre class="literal-block">$ sudo yum groupinstall 'Development Tools'
</pre>
<p>で一気に入れることができます。</p>
<p>ただし、make に python2.6 が必要で、CentOSの5系は 標準では python2.4 です。
そのため、まず python2.6 から入れます。</p>
<pre class="literal-block">$ sudo yum install python26
</pre>
<p>標準の python を python2.6 に切り替えます。
何かを yumるといけそうな気がするのですが、わからなかったのでバイナリファイルを改名します。</p>
<pre class="literal-block">$ which python
/usr/bin/python
$ cd /usr/bin
$ sudo rm python # python2.4 と同一バイナリだったので消してしまう
$ sudo ln -s python26 python
$ python
Python 2.6.8 (unknown, Nov  7 2012, 14:47:45)
</pre>
<pre class="literal-block">$ cd 作業用ディレクトリ
$ curl -O http://nodejs.org/dist/v0.8.25/node-v0.8.25.tar.gz
$ tar -zxvf node-v0.8.25.tar.gz
$ cd node-v0.8.25
$ ./configure
$ make
$ sudo make install
</pre>
<p>(このままでは yum が動かなくなるので作業後にシンボリックリンクを付け替えて元に戻しておきます。sudo rm python; sudo ln -s python2.4 python )</p>
</div>
<div class="section" id="parsoid">
<h4>2-3. Parsoid サービスの起動</h4>
<p>設定ファイルに、mediawiki の URL (〜/mediawiki/) を書きます</p>
<pre class="literal-block">$ cd web公開ディレクトリ/mediawiki/extensions/Parsoid/js/api/
$ cp localsettings.js.example localsettings.js
$ vim localsettings.js
</pre>
<p>で、こんな感じで編集します。</p>
<pre class="literal-block">//parsoidConfig.setInterwiki( 'localhost', 'http://localhost/w/api.php' );
parsoidConfig.setInterwiki( 'localhost', 'http://localhost/mediawiki/api.php' );
</pre>
<pre class="literal-block">$ cd なんとか/mediawiki/extensions/Parsoid/js
$ npm install
$ node api/server.js
</pre>
<p>デフォルトだと ポート8000 で待ち受けます。</p>
<p>ポート番号は process.env.VCAP_APP_PORT || 8000 となっていたので、
VCAP_APP_PORT という環境変数で設定できるのかな??</p>
<p>ブラウザやcurlで、http://localhost:8000/ にアクセスして動作を確認します。</p>
<img alt="/media/photo/20130803-mediawiki/2013-07-31_14.12.24.png" src="/media/photo/20130803-mediawiki/2013-07-31_14.12.24.png"/>
<p>(ちなみに、localhost より 127.0.0.1 の方が好きです)</p>
<p>ちなみに、この Parsoid 起動スクリプトは、
extensions/Parsoid/js/api/runserver.sh というファイルで暫定版がありますが、</p>
<pre class="literal-block"># kill a running server (crude version..)
killall -9 node
</pre>
<p>とか書いてあってちょっと怖いです。</p>
<p>Parsoid サーバが起動していれば、VisualEditor が使えるようになります。</p>
</div>
</div>
<div class="section" id="id3">
<h3>3. 問題点</h3>
<p>動作の仕組みとして、ブラウザから js で wikiのサーバの :8000 にHTTPアクセスし、
wikiサーバ中の Parsoid サービスは、localhost に HTTP アクセスします。</p>
<p>公開サーバであれば問題ないのですが、認証(BASIC認証など)を併用している場合は
ちょっと面倒なことになります。</p>
<ul class="simple">
<li>サーバでリッスンしている :8000 には、どのような認証をかけるか?</li>
<li>Parsoid が localhost の 80 にアクセスする時、認証を回避できるか?</li>
</ul>
<p>などです。</p>
<p>セキュリティが確保できそうになかったので、今回の用途ではパスしました。</p>
<p>ただし、すごく便利なので公開wiki や 社内にサーバ機があり、セキュリティを気にしなくて良い場合はおすすめです。</p>
<p>ローカル環境や社内のサーバでは VisualEditor を有効にし、インターネット上の認証つきサーバでは VisualEditor を有効にせず、
DBの内容はなんらかの方法で共有(同期) する、という方法もいいかもしれません。</p>
</div>
<div class="section" id="mediawikiurl">
<h3>付録1: MediaWiki内に外部画像のURLを書いた時、画像が表示されるようにする</h3>
<div class="section" id="localsettings-php">
<h4>LocalSettings.php</h4>
<pre class="literal-block">$wgAllowExternalImages = true;
</pre>
</div>
</div>
<div class="section" id="url-index-php">
<h3>付録2: URLから index.php を外す</h3>
<p>そのままでは、 <a class="reference external" href="http://127.0.0.1/mediawiki/index.php">http://127.0.0.1/mediawiki/index.php</a>/メインページ という形のURLになってしまうので、 <a class="reference external" href="http://127.0.0.1/mediawiki/wiki">http://127.0.0.1/mediawiki/wiki</a>/メインページ に変更する。</p>
<div class="section" id="id4">
<h4>LocalSettings.php</h4>
<pre class="literal-block">$wgArticlePath = "$wgScriptPath/wiki/$1";
</pre>
</div>
<div class="section" id="htaccess">
<h4>.htaccess</h4>
<pre class="literal-block">RewriteEngine on
RewriteRule ^wiki/(.*)$ /mediawiki/index.php?title=$1 [PT,L,QSA]
</pre>
<p>ちなみに、mediawiki/ にインストールしてある場合、記事ページを <a class="reference external" href="http://127.0.0.1/wiki">http://127.0.0.1/wiki</a>/メインページ に変更するのは難しくないが、 <a class="reference external" href="http://127.0.0.1/mediawiki">http://127.0.0.1/mediawiki</a>/メインページ に変更するのはかなり困難。</p>
</div>
</div>
</div>