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

(コメント)

社内の情報共有サービスを Wiki で作ろうと思ったのですが、 開発者以外も使うとすると WYSIWIG なエディタを搭載したものが良いと思いました。

仕事のメモをするときは、スクリーンショットを取りながら Evernote に保存することが多いのですが、あのような使用感が最高だと思っています。

WordPress がかなり近いのですが、もっと Wiki に近いものが良いと思い、調べたら MediaWiki に最近(2003年7月現在)できた VisualEditor プラグインが良いと思い、 インストールしてみました。

1. 結果

インターネット上の、認証済みページ内に置くのは難しいと思ったので、断念しました。

  • MediaWiki は、PHP 5.3.2 以上が必要です。
  • VisualEditor に必要な、Parsoid サーバを動作させるには、Node.js 0.8 が必要です。0.10 では動作しません。(未チェック。公式サイトより。)

2. インストール方法

2-1. mediawikiのインストール

2013-07-31 現在、MediaWiki の公式サイト http://www.mediawiki.org/wiki/Download からは 1.21.1 がダウンロードできますが、このバージョンでは VisualEditor は動かないようなので、 最新版 1.22 alpha を Gitリポジトリから clone します。

web公開ディレクトリの中に、mediawiki というディレクトリでインストールすることにします。

$ git clone --depth 1 https://gerrit.wikimedia.org/r/p/mediawiki/core.git mediawiki

機能拡張は何も入っていないので、VisualEditor, Parsoid 含め、使いそうなものを入れておきます。 シェルスクリプトを書いて実行すると良いでしょう。

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

http://xxxx/mediawiki/ にアクセスし、インストーラを手順にそって進め、トップページが見れるようにしておきます。 途中で、どの機能拡張を使うかのチェックボックスが表示されますが、すべてチェックします。

/media/photo/20130803-mediawiki/2013-07-31_14.06.02.png

mediawikiにログインし、個人設定に「ビジュアルエディターを有効にする」のチェックがあるので入れて、再度ページを表示させると、「編集」の隣に「ソースを編集」というタブができます。これで VisualEditor は有効になっています。

/media/photo/20130803-mediawiki/2013-07-31_14.07.36.png /media/photo/20130803-mediawiki/2013-07-31_14.08.01.png

ただし、このままだと Parsoid のサービスが起動していないため、編集ボタンを押すとエラーが表示されます。

2-2. node.js 0.8 のインストール

2-2-a. mac + homebrew の場合

homebrew の node.js の最新版は 0.10x のため、新し過ぎます。古い 0.8 をインストールします。

$ 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

入りました。

2-2-b. CentOS 5.9 の場合

ソースからコンパイルします。

ビルドツールは

$ sudo yum groupinstall 'Development Tools'

で一気に入れることができます。

ただし、make に python2.6 が必要で、CentOSの5系は 標準では python2.4 です。 そのため、まず python2.6 から入れます。

$ sudo yum install python26

標準の python を python2.6 に切り替えます。 何かを yumるといけそうな気がするのですが、わからなかったのでバイナリファイルを改名します。

$ 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)
$ 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

(このままでは yum が動かなくなるので作業後にシンボリックリンクを付け替えて元に戻しておきます。sudo rm python; sudo ln -s python2.4 python )

2-3. Parsoid サービスの起動

設定ファイルに、mediawiki の URL (〜/mediawiki/) を書きます

$ cd web公開ディレクトリ/mediawiki/extensions/Parsoid/js/api/
$ cp localsettings.js.example localsettings.js
$ vim localsettings.js

で、こんな感じで編集します。

//parsoidConfig.setInterwiki( 'localhost', 'http://localhost/w/api.php' );
parsoidConfig.setInterwiki( 'localhost', 'http://localhost/mediawiki/api.php' );
$ cd なんとか/mediawiki/extensions/Parsoid/js
$ npm install
$ node api/server.js

デフォルトだと ポート8000 で待ち受けます。

ポート番号は process.env.VCAP_APP_PORT || 8000 となっていたので、 VCAP_APP_PORT という環境変数で設定できるのかな??

ブラウザやcurlで、http://localhost:8000/ にアクセスして動作を確認します。

/media/photo/20130803-mediawiki/2013-07-31_14.12.24.png

(ちなみに、localhost より 127.0.0.1 の方が好きです)

ちなみに、この Parsoid 起動スクリプトは、 extensions/Parsoid/js/api/runserver.sh というファイルで暫定版がありますが、

# kill a running server (crude version..)
killall -9 node

とか書いてあってちょっと怖いです。

Parsoid サーバが起動していれば、VisualEditor が使えるようになります。

3. 問題点

動作の仕組みとして、ブラウザから js で wikiのサーバの :8000 にHTTPアクセスし、 wikiサーバ中の Parsoid サービスは、localhost に HTTP アクセスします。

公開サーバであれば問題ないのですが、認証(BASIC認証など)を併用している場合は ちょっと面倒なことになります。

  • サーバでリッスンしている :8000 には、どのような認証をかけるか?
  • Parsoid が localhost の 80 にアクセスする時、認証を回避できるか?

などです。

セキュリティが確保できそうになかったので、今回の用途ではパスしました。

ただし、すごく便利なので公開wiki や 社内にサーバ機があり、セキュリティを気にしなくて良い場合はおすすめです。

ローカル環境や社内のサーバでは VisualEditor を有効にし、インターネット上の認証つきサーバでは VisualEditor を有効にせず、 DBの内容はなんらかの方法で共有(同期) する、という方法もいいかもしれません。

付録1: MediaWiki内に外部画像のURLを書いた時、画像が表示されるようにする

LocalSettings.php

$wgAllowExternalImages = true;

付録2: URLから index.php を外す

そのままでは、 http://127.0.0.1/mediawiki/index.php/メインページ という形のURLになってしまうので、 http://127.0.0.1/mediawiki/wiki/メインページ に変更する。

LocalSettings.php

$wgArticlePath = "$wgScriptPath/wiki/$1";

.htaccess

RewriteEngine on
RewriteRule ^wiki/(.*)$ /mediawiki/index.php?title=$1 [PT,L,QSA]

ちなみに、mediawiki/ にインストールしてある場合、記事ページを http://127.0.0.1/wiki/メインページ に変更するのは難しくないが、 http://127.0.0.1/mediawiki/メインページ に変更するのはかなり困難。

現在の評価: 4.8

コメント

最近のツイート

  • ytyng

    ytyng @ytyng

    ホセ・リサール氏のマンガの反応が良い。 https://t.co/Lwqjx5nn8n #MANGACLUB @Mangadotclubさんから
    2 日, 14 時間 前

  • ytyng

    ytyng @ytyng

    Python の Typing で、Generator[MangazenkanOrderAdapter, None, None] は Iterator[MangazenkanOrderAdapter] とアノテーションをつけること… https://t.co/SqG9hOtEiF
    3 日, 16 時間 前

  • ytyng

    ytyng @ytyng

    近所に、スーパーバリューっていうスーパーがあるんだけど、店内にいるとたまにBGMが5拍子のアコースティックプログレみたいな音楽になる。めっちゃ耳に残る。あのBGMはなんか意味があるのかなー。
    4 日, 11 時間 前