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

DokuWikiDokuWiki
この記事は約5分で読めます。

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

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

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

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

  • DokuWiki 2018-04-22a “Greebo”

DokuWikiのJavaScriptの仕組み

DokuWiki本体のJavaScriptは、

lib/scripts

のディレクトリ内にあり、その中にはJavaScriptライブラリのjQueryも含まれます。

最新安定版のバージョン「2018-04-22a “Greebo”」では、jQuery 3.1.1、jQuery UI 1.12.1が含まれています。

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.noConflict();」の記述で使用不可。

そのため、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の使い方については、こちらの記事にまとめています。

DokuWiki
\よかったらシェアしてね/
えふめん

大阪在住、30代。
業務系SE・社内SEの仕事を通じて学んだこと、PCトラブルで困って調べたこと、手作業を効率化して改善したこと、WordPressのブログ運営などの記事を書いています。

えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました