Q-pediaにカテゴリツリー機能追加

技術用語辞典 Q-pedia

Ajaxでカテゴリツリーを追加

Ajaxの勉強として,Ajaxを使ってQ-pediaに機能を追加いたします.まずは,カテゴリのツリーを作りましたが,非常に簡単でした.既存のコードの流用といってよいレベルです.
デザインは別として,機能面では問題はないかと思います.

このカテゴリツリーの+部分をクリックすると動的にAjaxで下の階層をサーバに問い合わせ,表示します.

カテゴリツリーをクリックしてその用語の内容を表示

今まではWikiで動いていましたが,これを変更します.クリックによって用語のPukiwikiのURLに移動するのはリンクすればよいだけですので簡単ですが,ツリーを再描画することになっては意味がありません.そうなるとフレームということになりますが,フレームはかっこわるいという気もします.

そこで,これもAjaxで処理します.クリックされたらその用語の内容(をWikiの関数でHTML化したもの)を取得して,そのままinnerHTMLで流し込みます.こうすると,見た目一瞬で表示されますし,他のオーバーヘッドもなくなります.

ただし,この方法では,用語一つに一つのURLという原則が成り立たなくなりますので,リンクできなくなりますし,Googleなどの検索に弱くなります.

したがって,単語ごとのURLも保持する必要があります.これは,別個に表示してリンクすることにしておき,Googleに見つけてもらいます.基本的にはこのURLは検索エンジン用ということになります.クリックして用語を移動してもURLが変化しないのはあまりよくないかもしれませんが,仕方ないでしょう.Amazonの広告も適切なものが出にくくなりますが,これも我慢します.あるいはAmazonに対して,参照元を偽ることができればよいのですが.

今日はここまで

今日は,表示にPukiwikiの部分機能だけ使って,Ajaxから画面を書き換えるという拡張によって,大幅な高速化を行うことができました.

明日以降に検索機能を作ろうかと思います.デザインもせねばなりません.