DokuWikiのJavaScript・jQueryカスタマイズ方法を解説

PHPベースのオープンソースのウィキソフトウェア DokuWikiのJavaScript・jQueryカスタマイズ方法について解説します。

DokuWikiの内部は、CSSの場合と同様にJavaScriptもユーザーが独自に追加できる仕組みとなっています。

この仕組みを利用すれば、プラグインを開発しなくても簡単な動作の追加などは可能です。

なお、今回のバージョンは以下の通りです。

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は、以下の通りです。

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内で使用できる定義済みのグローバル変数が用意されています。

その中でよく使用するものをいくつか挙げます。

PHPのグローバル変数と定数については、こちらの記事を参考にしてください。

DokuWikiの開発 グローバル変数と定数について解説

PHPベースのオープンソースのウィキソフトウェア DokuWikiのグローバル変数と定数について解説します。動作モードなどテンプレートカスタマイズやプラグイン開発でよく使用するものを紹介します。

itlogs.net

最後に

今回は、DokuWikiのコマンドラインツールについて解説しました。

DokuWikiは、ユーザーが独自にJavaScriptを追加できる仕組みになっているので、プラグインを開発しなくても簡単な動作の追加などは可能です。

DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。

DokuWikiのおすすめテンプレートとカスタマイズ方法まとめ

PHPベースのオープンソースのウィキソフトウェア DokuWikiの人気でおすすめのテンプレートとカスタマイズ方法についてまとめました。

itlogs.net

DokuWikiの使い方については、こちらの記事にまとめています。

DokuWikiの使い方まとめ PHPのオープンソースウィキの比較

PHPベースのオープンソースのウィキソフトウェア DokuWiki（ドクウィキ）の使い方をまとめました。また、同じPHPベースのMediaWiki・PukiWikiとの比較もしました。

itlogs.net