DokuWiki.biz

オープンソースのウィキソフトウェア「DokuWiki」の設定、テンプレートカスタマイズ、プラグイン開発などのメモ書き。

ユーザ用ツール

サイト用ツール


template:javascript

DokuWikiのJavaScript・jQueryカスタマイズ

このページでは、DokuWikiのJavaScript・jQueryの仕組みを解説して、カスタマイズする方法を紹介する。

CSSと同様に、JavaScriptもユーザーが独自に追加することができる仕組みとなっている。この仕組みを利用すれば、プラグインを開発しなくても簡単な動作の追加などは可能である。

DokuWikiのJavaScriptの仕組み

DokuWiki本体のJavaScriptはlib/scriptsディレクトリ内にあり、その中にはJavaScriptライブラリのjQuery1)も含まれる。CSSと同様で、テンプレートやプラグインなどのJavaScriptを集約するディスパッチャーのlib/exe/js.phpがあり、tpl_metaheaders()関数によって呼び出されている。

ロードされる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については、同じ名前のファイルが読み込まれている場合はロードされない。この文法は、同一のJavaScriptライブラリを別々のプラグインで使う場合に役に立つ。複数のプラグインで使用されていても、1回だけしかロードされないからである。

jQuery使用時の注意点

jQuery構文

DokuWikiは、他のJavaScriptライブラリとの競合を避けるために、$関数($())が使用できないようになっている。2)そのため、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(template:javascript
    • namespace:現在の名前空間(template

参考ページ

1)
2018年4月現在の最新安定版のバージョン「2018-04-22a “Greebo”」では、jQuery 3.1.1、jQuery UI 1.12.1が含まれている。
2)
jQuery.noConflict();の記述で使用不可。
template/javascript.txt · 最終更新: 2018/09/07 13:06:01 by admin