最終更新: 2009-11-22 (日) 21:38:40
このページをDeliciousに追加 このページをはてなブックマークに追加 このページをlivedoor クリップに追加 このページをYahoo!ブックマークに追加

ajaxtree.inc.php

サマリAjax を用いたツリーメニュー
リビジョン1.3
対応バージョン1.4.7 で動作することは確認済み
作者revulo

目次

概要

pagetree.inc.php プラグイン を JavaScript を利用するように作り直したものです。 JavaScript が使えないブラウザでも、それなりに動きます。

  • ページの階層構造をツリーメニューとして表示します
  • 現在参照しているページの付近を展開して表示します
  • JavaScript が使える場合は、クリックすることでメニューの折り畳み・展開ができます
  • MenuBar ページに #ajaxtree と書くだけで、自動的にメニューが作られます

機能的には treeview.inc.php プラグイン とまったく同じですが、 次のような違いがあります。

  • treeview.inc.php プラグイン
    • 全ページ分のリストを一度に読み込むため、ページ数が少なめのサイトに向いています
    • 非表示の内部リンクを大量に張ることになるので、検索エンジンには良く思われないかもしれません
    • 比較的簡単に設置できます
  • ajaxtree.inc.php プラグイン
    • 必要な部分の HTML をその都度 Ajax で読み込むため、ページ数が多めのサイトに向いています
    • 内部リンクを適度に張ることになるので、SEO 対策にもなります
    • 設置するのが少し大変かもしれません

サンプル

このサイトのメニューバーに設置してあります。 適当に触って試してみて下さい。

インストール

新規インストール

アーカイブファイルをダウンロードし、 PukiWiki をインストールしてあるディレクトリで展開します。

$ tar xvfz ajaxtree-1.3.tar.gz

html/ajaxtree というディレクトリが作られるので、Web サーバへの書き込み許可を与えて下さい。 パーミッションで言うと 777 にするのが確実ですが、 レンタルサーバが推奨している値がある場合はそちらに従って下さい *1

$ chmod 777 html/ajaxtree

スキン (skin/pukiwiki.skin.php, skin/default.skin.php など) の <head>〜</head> のどこかに、以下の設定を追加します。

(PukiWiki の場合)
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>ajaxtree/ajaxtree.css" />

(PukiWiki Plus! の場合)
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_URI ?>ajaxtree/ajaxtree.css" />

または、スキンのスタイルシート (skin/pukiwiki.css.php, skin/default.css など) の @charset 行の直後に、 次のように書き加えても良いです *2

@import "./ajaxtree/ajaxtree.css";

lib/file.php の page_write() 関数の末尾に、以下の3行を追加します。 行頭の+は不要なので、それ以外の部分を追加して下さい。

 function page_write($page, $postdata, $notimestamp = FALSE)
 {
     ......

+    if (exist_plugin('ajaxtree')) {
+        plugin_ajaxtree_write_after();
+    }
 }

以下のような URL に一度アクセスして下さい。Ajax 用のキャッシュファイルが作成されます。

http://…/?plugin=ajaxtree

あとは MenuBar ページに以下のように書いて下さい。

#ajaxtree

なお、 Help や MenuBar などの階層化されていないページは、デフォルトでは表示しないようにしています。 それらのページも表示したい場合は、PLUGIN_AJAXTREE_HIDE_TOPLEVEL_LEAVES や PLUGIN_AJAXTREE_INCLUDE_LIST の設定を変更して下さい。

以前のバージョンからのアップデート

基本的には、新しいファイルで上書きコピーすれば良いですが、以下の点に注意して下さい。

  • プラグインやスタイルシートの設定を変更している場合は、アップデートする前に設定を写し取って下さい。
  • バージョン 1.3 では、キャッシュファイルの形式が変わっています。 html/ajaxtree ディレクトリにある .htaccess 以外のファイルは、可能ならば全て消去して下さい。 その後、?plugin=ajaxtree にアクセスして、キャッシュを再構築して下さい。

使い方

書式は次のようになっています。

#ajaxtree

引数は取りません。MenuBar ページのどこかに #ajaxtree と書くだけです。

設定

設定方法は基本的に pagetree.inc.php プラグイン と同じなので、そちらの説明を見て下さい。 ただし、いろいろと機能を追加してあるので、追加分の説明を以下に記しておきます。

プラグインの設定

ajaxtree.inc.php の先頭部分で以下の値を設定することで、動作をカスタマイズできます。

  • PLUGIN_AJAXTREE_HTML_DIR
    (デフォルト: html/ajaxtree/)
    • Ajax で読み込む HTML のキャッシュファイルを置くディレクトリ
  • PLUGIN_AJAXTREE_CHECK_MTIME
    (デフォルト: true)
    • wiki ディレクトリの更新日時を利用して効率良くキャッシュを更新する (true, false のいずれか)
  • PLUGIN_AJAXTREE_COUNT_DESCENDANTS
    (デフォルト: true)
    • 子孫ページの数をカウントして表示する (true, false のいずれか)
  • PLUGIN_AJAXTREE_SORT_TYPE
    (デフォルト: name)
    • ページの並び順の設定 (name, reading のいずれか)
  • PLUGIN_AJAXTREE_EXPAND_LIST
    (デフォルト: なし)
    • 常に展開して表示するページのリスト (正規表現)

CHECK_MTIME の機能は、ext3 や NTFS などのファイルシステムでないと正常に機能しません。 ほとんどの環境でこの条件は満たされていると思いますが、 ファイルシステムが FAT32 などの場合は、このオプションを false に設定して下さい。

 

PLUGIN_AJAXTREE_SORT_TYPE を reading に設定すると、ページの並び順を制御することができます。 この機能は、sonots さんの lsx プラグインの実装をほぼそのまま利用しています。 詳細については以下のページをご覧下さい。

 

ツリーの一部分を常に展開して表示しておきたい場合は、 展開したいページを PLUGIN_AJAXTREE_EXPAND_LIST に正規表現で指定して下さい。 書き方の例をいくつか挙げておきます。

// PukiWiki ページと PHP ページは常に展開して表示
define('PLUGIN_AJAXTREE_EXPAND_LIST', '^(PukiWiki|PHP)$');

// PukiWiki ページの下は全て展開して表示
define('PLUGIN_AJAXTREE_EXPAND_LIST', '^PukiWiki');

// 2階層目まで全て展開して表示
define('PLUGIN_AJAXTREE_EXPAND_LIST', '^[^\/]+$');

スタイルシートの設定

skin/ajaxtree/ajaxtree.css を書き換えることで、 レイアウトや配色やアイコンを変更することができます。 一応 PukiWiki の標準スキンにあわせて調整してあるつもりですが、 設定を変えたい場合は background や padding-bottom の値を適当に変えて下さい。

 

また、ツリーの上にある AjaxTree というタイトルが要らない場合は、

#ajaxtree h5 {
    display: none;
}

という設定を追加すると消すことができます。

キャッシュ用ディレクトリの設定

Ajax 用のキャッシュファイルは、標準では html/ajaxtree ディレクトリに置かれます。 これを例えば ajax というディレクトリに設定し直したい場合は、次のようにして下さい。

  • skin, image ディレクトリと同じ場所に ajax ディレクトリを作成し、書き込み許可を与える
$ mkdir ajax
$ chmod 777 ajax
  • ajaxtree.inc.php の設定を以下のように変更する
define('PLUGIN_AJAXTREE_HTML_DIR', 'ajax/');
  • skin/ajaxtree/ajaxtree.js の baseUrl の設定を以下のように書き換える
var baseUrl = "ajax/";

文字化けする場合の設定

環境によっては、日本語のページ名が文字化けする可能性があります。 Web サーバが Apache か lighttpd の場合は、以下のページを参考にして設定を行ってみて下さい。

設定がうまくいかない場合や、他の Web サーバの場合は、 skin/ajaxtree/ajaxtree.js の baseUrl の設定を次のように書き換えて下さい。

var baseUrl = "ajaxtree.php?url=";

ほんの少し遅くなりますが、一旦 PHP を通して HTML ファイルを読み込むことで、文字化けせずに表示できるようになります。

静的コンテンツに偽装している場合の設定

rewritemap.inc.php プラグイン などを使って PukiWiki/Install.html のような階層化された URL に見せかけている場合、 以下のように設定をする必要があります。

  • skin/ajaxtree/ajaxtree.js の baseUrl の値を、var baseUrl = "/pukiwiki/html/ajaxtree/"; のように絶対 URI 形式で指定する
  • pukiwiki.ini.php で定数 SKIN_URI を、define('SKIN_URI', '/pukiwiki/skin/'); のように絶対 URI 形式で指定する

PukiWiki Plus! には SKIN_URI の設定項目がもとからありますが、 本家 PukiWiki の場合は自分で設定を追加して下さい。

ライセンス

基本的には MIT & GPL のデュアルライセンスです。 ただし以下のファイルについては、別途ライセンスを定めます。

  • プラグイン本体: GPL
    • PukiWiki 内部の関数を利用する場合、GPL 以外のライセンスにはできないため
  • 画像ファイル: Public Domain
    • 使用に一切の制限を設けません

他のライセンスを希望する場合は、連絡をいただければ対応を検討します。

ダウンロード

更新履歴

  • Version 1.3 (2009/01/01)
    • キャッシュのファイル名の形式を変更 (BBS: 300)
    • JavaScript のコードがグローバル名前空間を汚染しないように変更
    • 不要な ignore_user_abort() を削除
  • Version 1.2 (2008/07/28)
    • 子孫ページの数をカウントして表示する機能を追加
    • PageReading の機能を利用してページを並び替える機能を追加 (BBS: 260)
    • 文字化け防止用の ajaxtree.php を同梱 (BBS: 239)
    • 指定したページを常に展開して表示する機能を追加 (BBS: 150)
    • GS2 スキンとの組み合わせでも動くように対策 (BBS: 96)
    • JavaScript のコードがメモリリークを起こしていたのを修正 (Blog: 2008-06-15, Blog: 2008-06-20)
    • スタイルシートに overflow: hidden; の設定を追加 (Blog: 2008-02-08)
    • マーカーをダブルクリックした時の動作を改善
    • アイコンの大きさを 16×16 ドットに変更
    • 不要な flock() を削除
    • ライセンスについて明記
  • Version 1.1 (2007/10/08)
    • Ajax での読み込みに失敗した場合もマーカーが変化していたのを修正
    • encodeURIComponent が使えない古いブラウザ用の対策コードを追加
  • Version 1.0 (2007/08/01)
    • ページ名に記号が含まれていると動かない場合があったのを修正
  • Version 0.9 (2007/07/28)
    • 暫定公開
*1 例えば、さくらインターネットでは、パーミッションを 777 ではなく 705 にする必要があるようです。
*2 ただし @import を使ってスタイルシートを追加すると、描画が遅くなるそうです。(参考: Choose <link> over @import)

(Counter:1, Today:1, Yesterday:0)
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   最終更新のRSS