これからWikiサイトを作ろうとしている方に

ここでは、これからWikiサイトを作ろうとしている方に注意したい点などを書いていこうと思います。

まず、全体のテーマを決める

基本ですね。例えば、ゲーム攻略サイトをつくるとします。そのためにはどういうコンテンツが要ると思いますか？

ゲームシステムの解説？ストーリーの解説？マップの攻略？モンスターの強さ？AI考察？

この段階で全部やろうとすると、何から始めたら良いのかそれだけで、煮詰まってしまいます。まずは、レイアウト等関係なしに情報をまとめてみましょう。一つのいい方法は、他のWikiサイトのソースを流用することです。PukiWikiを使用しているサイトならば、クエリに?cmd=source&page=ページ名と入れるだけで、編集禁止のサイトでもソースを流用することができます。

テンプレとして以下のように情報をまとめるとわかりやすいと思います。

#navi(../)
*[表題]
[概要]

*説明
[説明文]

*データー
[テーブルなど]

*関連リンク
[リンクとか]

*コメント
#pcomment(,reply)

ページ分割は早めに

ある程度内容がまとまったらページの分割を早めに行いましょう。例えば、マップの情報とモンスターの情報、クエストの情報を一つのページにまとめていた場合、すぐにそれぞれ３つのページに分割するべきです。後になってからだと、この作業が難しくなります。というのは、その頃になると利用者が増えて混乱の原因になりやすいためです。検索エンジンのヒット率の問題もあります。AutoAlias機能で逃げることもできますが、恒久的に使う手段ではありません。

長すぎるページは最後まで読まれない

例えば、あなたが夏目漱石の「坊ちゃん」をWikiに乗せたとします。PukiWikiの性能上、これを載せてもサーバーに掛かる負荷はほとんどありません。しかし、実際読んでみて最後まで読みたくなるかというとそういうことはありません。なぜでしょうか？

それは、ページの文章が長すぎるからです。利用者は、ページの右側のスクロールバーのサイズを見ただけで辟易します。スクロールさせる行為は、利用者にストレスを与えます。適度に区切って別のページにしたほうがいいでしょう。

また、Technical Note/Block and Inlineでも少し触れましたが、段落と改行の区別はつけるようにしましょう。

それがブログ記事のような単純なものであればいいのですが、データーベース系のサイトでテーブルを使っているようなサイトの場合、サーバーへの負荷がより増大します。こういったページはなるべく分割して使うことを心がけてください。

テーマはひとつのページ１つまで！

テーブルタグを多用しない

一般的にテーブル処理はクライアントサイドにおいてもサーバーサイドにおいても重い処理です。基本的に、テーブルが全て読み込まれるまでテーブルの中身は表示されません。それが単純な表なら問題はありませんが、ところどころ行や列を連結させたセルをつくると、その分負荷がかかると考えてください。

モバイルを意識する場合は尚の事です。限られたスペースに沢山の列があるページだと利用者は全体を見るのが困難になります。Adv.ではテーブルのページングを有効化するオプションがついていますが、あくまでも列を見やすくするための処置です。

悪い例

例えば、ゲーム系コンテンツで以下のようにテーブルを使っている例がよく見受けられます。

ceferino.png出現場所ラテール高原
HP100攻撃力112防御力32保護14
Exp4500金貨84攻撃打数3回移動速度早い
ドロップアイテム
フェニックスの羽
情報
これはテストです。

すると、モバイルから見ると以下のようになってしまいます。

mobile1.png

その上、ソースも煩雑になります。

|CENTER:125|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|CENTER:70|c
|&ref(ceferino.png,zoom,80x80);|~出現場所|>|>|>|>|>|>|ラテール高原|
|~|~HP|100|~攻撃力|112|~防御力|32|~保護|14|
|~|~Exp|4500|~金貨|84|~攻撃打数|3回|~移動速度|早い|
||||||||||c
|>|>|>|>|>|>|>|>|~ドロップアイテム|
|>|>|>|>|>|>|>|>|フェニックスの羽|
|>|>|>|>|>|>|>|>|~情報|
|>|>|>|>|>|>|>|>|これはテストです。
これを防ぐためには、ブロック型の使い方を工夫しましょう。

refプラグインのaroundスイッチを活用する

ceferino.png
HP100
攻撃力112
防御力32
保護14
Exp4500
金貨84
打撃回数3回
移動速度早い
ドロップアイテム
フェニックスの羽
情報
これはテストです。

このようにするだけで、ソースはより簡単になります。

#ref(ceferino.png,zoom,80x80,around,left)
|~HP		|100|
|~攻撃力	|112|
|~防御力	|32|
|~保護		|14|
|~Exp		|4500|
|~金貨		|84|
|~打撃回数	|3回|
|~移動速度	|早い|
#clear
:ドロップアイテム	|フェニックスの羽
:情報			|これはテストです。

floatで画像を左に寄せているだけなので、モバイルでも問題なく表示されます。

mobile2.png

rowとspanプラグインを活用する

上の例はいまいちに感じるかもしれません。その上、テーブルに対して左右にしか画像を設置できない問題があります。そこで、rowとspanプラグインを使って段組をしてみましょう。

ceferino.png
HP100
攻撃力112
防御力32
保護14
Exp4500
金貨84
打撃回数3回
移動速度早い
ドロップアイテムフェニックスの羽
情報これはテストです。
#row(true){{{{
#span(4){{
#ref(./ceferino.png,center,zoom,64x64)
}}
#span(4){{
|~HP		|100|
|~攻撃力	|112|
|~防御力	|32|
|~保護		|14|
|~Exp		|4500|
|~金貨		|84|
|~打撃回数	|3回|
|~移動速度	|早い|
}}
#span(4){{
|~ドロップアイテム	|フェニックスの羽|
|~情報			|これはテストです。|
}}
}}}}

すこし、入力方法に癖がありますが、簡単にグリッドレイアウトを組むことができます。色々工夫してみてください。ポイントは、spanプラグインの合計数値が12になるようにすればデザインが崩れない点です。例えば、6と6にすればちょうど２分割されますし、４等分にしたい場合は、4x3=12なので、3を入れます。

詳細は、http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystemを見てください。

まとめ

複雑な構文は、処理を重くします。Wikipediaなどのサイトを見ても、一覧用途以外でテーブルを使うことはあまりありません。使ったとしてもテーブルのセル連結などはあまり使いません。ここの例では、いまいちに感じるかもしれませんが、その場合はスタイルシートを書き換えてみましょう。例えば、

.style_table{
	min-width:90%;
}

と入れると、幅いっぱいにテーブルが表示されます。

より高度な段組を入れたい場合は、別途style.inc.phpを使うことも視野に入れてください。