PHPベースのオープンソースのウィキソフトウェア DokuWikiのJavaScript・jQueryカスタマイズ方法について解説します。
DokuWikiの内部は、CSSの場合と同様にJavaScriptもユーザーが独自に追加できる仕組みとなっています。
この仕組みを利用すれば、プラグインを開発しなくても簡単な動作の追加などは可能です。
なお、今回のバージョンは以下の通りです。
- DokuWiki 2018-04-22a “Greebo”
DokuWikiのJavaScriptの仕組み
DokuWiki本体のJavaScriptは、
lib/scripts
のディレクトリ内にあり、その中にはJavaScriptライブラリのjQueryも含まれます。
CSSと同様で、テンプレートやプラグインなどのJavaScriptを集約するディスパッチャーの
lib/exe/js.php
があり、tpl_metaheaders関数によって呼び出されています。
<?php tpl_metaheaders() ?>
JavaScriptは以下のようにまとめて外部ファイルとして読み込まれます。
<script type="text/javascript" charset="utf-8" src="/lib/exe/js.php?t=dokuwiki&…"></script>
ロードされるJavaScriptは、以下の通りです。
- DokuWikiで自動生成されたスクリプト … 編集画面のツールバー等
- DokuWiki本体のスクリプト … lib/scripts/*.js
- プラグインスクリプト … lib/plugins/[プラグイン名]/script.js
- テンプレートスクリプト … lib/tpl/[テンプレート名]/script.js
- ユーザースクリプト … conf/userscript.js
JavaScriptをカスタマイズして処理を追加したい場合は、基本的にユーザースクリプト（conf/userscript.js）に追加することになります。
Include構文
DokuWikiのディスパッチャーは、JavaScriptのコメントを使用して以下のように記述することで、他のスクリプトファイルをIncludeすることができます。
ロードされるプラグインスクリプトやテンプレートスクリプトは、script.jsの1ファイルだけなので、ファイルを分割したい場合はこのInclude構文を使用します。
/* DOKUWIKI:include somefile.js */
/* DOKUWIKI:include_once common_library.js */
include_onceについては、同じ名前のファイルが読み込まれている場合はロードされません。
この文法は1回だけしかロードされないので、同一のJavaScriptライブラリを別のプラグインで使う場合に役に立ちます。
jQuery使用時の注意点
DokuWikiでjQueryを使用する場合の注意点について。
jQuery構文
DokuWikiは、他のJavaScriptライブラリとの競合を避けるために、$関数（$()）が使用できないようになっています。
そのため、jQuery関数（jQuery()）を使用する必要があります。
// NG
$("#sample").hide();
// OK
jQuery("#sample").hide();
また、jQueryオブジェクト変数には頭に$を付けます。
var $obj = jQuery('#sample');
DOMロード完了後に実行される関数の書き方
出力されたHTMLタグの値を取得するなど、DOM操作をしたい場合はDOMロード完了後に実行されるようにする（コールバック）必要があります。
その場合は、jQueryのコールバックの仕組みを利用して以下のように記述します。
jQuery(function(){
// DOMロード完了後の処理を記述
});
JavaScriptの定義済みグローバル変数
DokuWikiには、JavaScript内で使用できる定義済みのグローバル変数が用意されています。
その中でよく使用するものをいくつか挙げます。
| 変数 | 概要 |
|---|---|
| DOKU_BASE | ルートディレクトリのパス（/） |
| DOKU_TPL | テンプレートのパス（/lib/tpl/[テンプレート名]/） |
| JSINFO[‘id’] | 現在のページID（ns1:page1） |
| JSINFO[‘namespace’] | 現在の名前空間（ns1） |
PHPのグローバル変数と定数については、こちらの記事を参考にしてください。
最後に
今回は、DokuWikiのコマンドラインツールについて解説しました。
DokuWikiは、ユーザーが独自にJavaScriptを追加できる仕組みになっているので、プラグインを開発しなくても簡単な動作の追加などは可能です。
DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。
DokuWikiの使い方については、こちらの記事にまとめています。
コメント