« Safari、Opera でも Tab キー(または代替するショートカットキー)を使ってリンクを辿りブラウジングする方法 | Main | オリンピックの動画を見るのに NHK が便利 »



Sat, 20 Feb 2010

FreeStyle Wiki を使って普通の Web サイトを作る

Posted at Sat, 20 Feb 2010 in computer

Web サイトを作るのにこつこつメモ帳でタグを手打ちするのも好きなのですが、ページ数が多くなるとそれはそれで面倒だし、今後サイトデザインを変更するときなんかもなるべく楽をしたい。
でも編集するのは一人だし当たり前のコンテンツしかおかないから、表面上は徹底的に普通のホームページですよ CMS なにそれ? ブログって食べられるの? みたいなサイトを構築したいと思ったことはありませんか。

そんなわけで、実は Wiki だけど Wiki らしくない Web サイトを作るに至ったのでその作業記録です。

用意したもの

FreeStyle Wiki

FreeStyle Wiki(FSWiki)は徹底的にモジュール化され、プラグインによる自由な拡張が可能な Perl による Wiki エンジンです。
「コアはシンプルにしておいてプラグインやアドオンでがんがんカスタマイズしていく」というのがどうやら私はとても好きらしく、このサイトのブログエンジンである Blosxom や Firefox(これはまぁ、本体もそれなりに重量級ですが)などの使用理由にもなっています。そんなわけで今回もベースは FreeStyle Wiki を採用しました。単純に以前にも稼働実績があるというのと、YukiWiki の文法が使えるからというのも理由の一部です。
個人的にとても使い勝手の良い Wiki エンジンです。

Wiki らしくなくすために

主なポイントは3つ

  1. URL を静的かつシンプルなものにする
  2. 編集機能を隠す
  3. FrontPage からの脱却とデザイン

導入したプラグインとあわせてひとつずつ説明していきます。

URL を静的かつシンプルに

URI が http://www.example.com/wiki.cgi?page=FrontPage という感じにパラメータ付きだったり、Wikipedia のようにエンコードされて http://ja.wikipedia.org/wiki/%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF となったりしているのははあんまりシンプルではない、と思うわけなので、ここを修正するために、ページへのリンクを静的URLにするプラグイン(改変版) を導入します。このプラグインを使うために .htaccess への記述が必要。さくらのレンタルサーバでは RewriteBase を使った記述では上手くいきませんでした。

DirectoryIndex wiki.cgi

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)/([^/]+)\.html#[^?]+\?(.+)$ http://www.example.net/wiki.cgi/$1?page=$2$3 [NE,QSA,L]
RewriteRule ^(.+)/([^/]+)\.html$ http://www.example.net/wiki.cgi/$1?page=$2 [NE,QSA,L]
RewriteRule ^([^/]+)\.html$ http://www.example.net/wiki.cgi?page=$1 [NE,QSA,L]
RewriteRule ^(.+)/$ http://www.example.net/wiki.cgi/$1 [NE,QSA,L]

これで、http://www.example.net/index.html という URI で index というページ名のページにアクセスが可能になります。

ページ名≠ページタイトルに(FrontPage からの脱却)

通常の Wiki だと トップページのタイトルが FrontPage、また WikiName のような一定のルールの文字列が文章中にあると自動でリンクがはられたりしてページ名になったりしますが、まずページ名≠ページタイトルとするために、アクセシビリティ配慮のタグを出力するプラグイン を導入します。これで、index.html のページタイトルを index 以外に設定することが可能です。
ですが、このままだとトップページに支障が出る場合があります。トップページの<title>は「トップページ名称 - サイト名」という表記になり、サイト名だけの記述にするということができません。<title> タグを指定するようなプラグインを探しても良かったのですが、トップページだけレイアウトを変えるというのも良くあることなので、トップページ専用のテンプレートを作成後、テンプレート/スタイル変更プラグイン を利用してテンプレートごと変えてしまい、<title> タグの中身は直書きでテンプレートに <title>サイト名称 </title> として対処しました。

テンプレートと同時並行でスタイルの設定です。FSWiki ではデフォルトで tDiary のテーマが使用可能≒はてなダイアリーのテーマ(全部かどうかは不明)が使用可能なので、tDiary のテーマギャラリーあたりから好みのテーマをダウンロードして導入するのが一番簡単です。好みで好きなテーマをインストールします。

編集機能を隠す

最後に一番 Wiki っぽい部分、編集機能を見えなくします。
FsWiki だと デフォルトで右上に「トップ 新規 編集 差分 一覧 ソース 検索 ヘルプ RSS ログイン」というのが表示されますが、これを全部消してしまいます。

ただ全部さっくりと消してしまうとのちのち大変なので、新規にページを作成して「トップ 新規 一覧 検索 ヘルプ RSS ログイン」あたりのリンクを新規作成したページへコピーしておき、そのページをブックマークしておくと簡単です。「編集」についてはページからのリンクでないと意味がないので、現在表示しているページを編集するためのブックマークレットを用意しておきます。

javascript:(function(){location.href=location.href+'?action=EDIT';})();

これをブックマークします→ 編集

実際の表示を消すのはスタイルシートで消すのが一番簡単です。これは先ほど設定したテーマのスタイルシートに記述します。

div.adminmenu {
  display: none;
}

この方法のメリットはスタイルシートをオフにすると編集メニューが見えること。(たとえば Firefox なら「表示」−「スタイル」−「スタイルシートを使用しない」)ただしこれはデメリットでもあるので、完全に消したい場合はテンプレートをいじります。検索エンジンのクローラが来た場合にはスタイルシートでの非表示はほとんど意味がないので「一覧」などから意図しないリンクを辿られる可能性があります。

その他細々と

テンプレートをいじる際に、画面右下の「Powered by FreeStyleWiki〜」の記述もカスタマイズしています。デザイン上の都合から「Copyright〜」表記も左に同じ。
そのほかのプラグインは「自由な HTML での編集をできるだけ可能にすること」や「メール送信フォームが作成できること」などを目的としているので、Wiki の標準の編集機能で十分であれば導入の必要は特にありません。
それよりも、デフォルトユーザのパスワードの変更(ユーザ admin/ パスワード admin)や、ページの編集権限をログインユーザだけに絞ることなどのほうが重要です。
FreeStyle Wiki についての基本的なインストール方法やプラグインの追加方法は公式サイトや添付のドキュメントを参照してください。

« Safari、Opera でも Tab キー(または代替するショートカットキー)を使ってリンクを辿りブラウジングする方法 | Main | オリンピックの動画を見るのに NHK が便利 »