サイトマップ

DokuWikiによるWebサイト構築

オープンソースのWikiエンジンの1つ、DokuWiki1)をCMS的に利用することで、Webサイトを構築してみます。構築する対象となるのは弊社のサイトとし、トップレベルからすべてのパスをDokuWiki配下として管理することにします。

目的

弊社は開業以来10年以上(2011/5現在)の間、ありがたいことにこれといった営業活動をせずに順調に経営を続けてきました。一度一緒に仕事をした方が次の機会にも、あるいはこんな会社があるよと人づてに紹介された、などでお客様の方から依頼を受ける形でほぼ手一杯なほどの仕事をいただけていたわけです。そんな状況でしたので、これまであまり広告・宣伝的な活動を積極的に行ってこなかったのです。

ところがここに来ての不況に東日本大震災の影響か、予定のあったプロジェクトが頓挫するなどのため、すっかりお声をかけていただくことがなくなってしまいました。ちょっとこれは会社の存続が危惧されるくらいの状況になってきたため、とりあえずやれることをやろうというわけで、まずは会社のWebサイトを充実させようと思い至ったというのが目的の1つです。

次に、DokuWikiというWikiエンジンの活用です。このWikiエンジンは、2010/2くらいから使い始めました。それまではちょっとした個人的なメモなどをPukiWiki2)を使って管理していたのですが、使いやすさとかデザインとかで元々あまり好きではありませんでしたが、当時はそれが最善だったのです。そして、PukiWikiもプラグインで拡張すればもっと使いやすくなる、ということに気づき、調べ直しますと、PukiWikiはもはやメンテナンスされていないようでした。そんなソフトウェアのプラグインを新たに作るのも何だということで、代わりになるWikiエンジンを探しているうちに見つけたのがDokuWikiでした。

これまでも仕事や趣味で色々なWikiエンジンを触ってきましたが、DokuWikiは中でもすっきりしたデザインで、設計ポリシーがしっかりしており、拡張機能も開発しやすいという、素晴らしい資質を持っていることがわかりました。そして、これまでにPukiWikiで作成していたコンテンツをDokuWikiに移し変え、不足する機能を追加するためにプラグインの開発を行ってきました。そのこと自体が楽しかったというのも大きいですが、いつのまにかそういった自作のプラグインが充実してきて、コンテンツもどんどん増えてきました。もうDokuWikiを手放せなくなったのです。

そして、標準状態では非常にシンプルなDokuWikiですが、適切なプラグインを用意すれば、ちょっとしたCMSとして使えるのではないかというアイデアが浮かびました。まさにそれを実践するために、弊社サイトをDokuWikiのみを使って構築し、実証するというのが2つ目の目的です。

構築手順

ローカルサイトにDokuWikiを導入する

形だけで、中身のないものをいきなり公開するわけにはいきませんので、まずはローカルなWebサーバにDokuWikiを導入し、その上で構築することにします。この点で、サイトのURLやリンク切れなどの問題を起こさず、設定の変更だけでサーバを切り替えることができるWikiは面倒がありません。

構成・レイアウトを考える

まず考慮すべきことは

  1. サイト構成
  2. コンテンツ
  3. デザイン・レイアウト

があります。企業サイトなのでデザインは華やかにする必要はなく、手堅い感じで良いでしょう。弊社が受注する案件の多くは、社内向けのイントラネットWebシステムが多く、ほとんどの場合デザインは重視されず、使い勝手重視の質実剛健なものが好まれます。また、社外向けのシステムの場合は、お客様の専任のデザイナーがデザインされたHTMLにシステムを組み込むという形態になり、いずれにしても凝ったデザインを手がけることはありません。ですので、いずれにしても自己流の手堅いものしか作れないのです。

で、言い訳はともかく、最初に大まかなレイアウトを考え、順次コンテンツとサイト構成をつぎ足しながらレイアウトにフィードバックするという手順で作成していきます。まず各ページ共通の、全体のワイヤフレームを以下のように定義します。

        +------+------------------------------------------+
        | ロゴ |                                   検索窓 |
        +------+------------------------------------------+
        | グローバルメニュー                              |
        +-------------------------------------------------+
        |                                                 | \
        |                                                 | |
        |                                                 |  > メインエリア
        |                                                 | |
        |                                                 | /
        +-------------------------------------------------+
        | フッタメニュー                                  |
        +-------------------------------------------------+

ここで、メインエリアの箇所のみを各ページごとに差し替えて表示することにします。次にトップページをよくあるような3ペインとすることにします。

        +------+------------------------------------------+
        | ロゴ |                                   検索窓 |
        +------+------------------------------------------+
        | グローバルメニュー                              |
        +----------+---------------------------+----------+
        | ナビゲー |                           | 外部情報 |
        | ション   |                           | や       |
        | メニュー | メインコンテンツ          | 広告など |
        |          |                           |          |
        |          |                           |          |
        +----------+---------------------------+----------+
        | フッタメニュー                                  |
        +-------------------------------------------------+

その他のページは左側のみにサイドメニューを配置することにします。

        +------+------------------------------------------+
        | ロゴ |                                   検索窓 |
        +------+------------------------------------------+
        | グローバルメニュー                              |
        +----------+--------------------------------------+
        | ナビゲー |                                      |
        | ション   |                                      |
        | メニュー | メインコンテンツ                     |
        |          |                                      |
        |          |                                      |
        +----------+--------------------------------------+
        | フッタメニュー                                  |
        +-------------------------------------------------+

ナビゲーションを考える

コンテンツが行き止まりになったり、行きたいところにいけない不自由なものにしないため、ナビゲーションについてはしっかり検討する必要があります。レイアウトとしてページ上部に常にグローバルメニューを配置することにしたこと、Webサイトの慣習的に左上のロゴがトップページへのリンクとなっていることで多くは解消されますが、続々と追加される予定のコンテンツにどうやってアクセスしてもらうかは思案のしどころです。

DokuWikiの使い方でよくある方法は、サイドバーにindexmenuプラグイン3)を使ったサイトマップを表示することです。これだと自動的に各ページへのリンクを生成してくれるため、手間がかかりません。ただ、ちょっと問題があります。表示される順序を指定したいとか、まだ書きかけのため表示させたくないページがあるとかに対応できません。何よりも、それなりに人気があってよくできた プラグインではあるのですが、名前空間やCookieの使い方などがちょっと行儀が悪く、あまり好ましくなかったからです。

なので、とりあえず固定のナビゲーションメニューを配置し、状況に応じてタグクラウドを使うことにしました。

必要なプラグインを探す。なければ自作する

プラグイン名
説明
layout
コンテンツのメインエリアにいろんなパーツを配置するために自作したものです。サイドバー表示のために使います。
datasource
layoutプラグインで表示するデータを提供するために自作したものです。タグクラウド表示のために使います。
tag
公式サイトで紹介されている、流行りのプラグインです。各ページにタグ付けをし、集計表示することができます。
project
営業カレンダーを表示するために自作したものです。夢は大きいですが、とりあえずまだそれだけの機能しかありません。
spreadsheet
表を作成するために自作したものです。これも表のWYSIWYG的編集をしたいという夢は大きいですが、とりあえずデータを手で打ち込んで表示するだけの機能しかありません。この表もこれを使って表示しています。
mailto
お問い合わせページのために自作しました。似たような機能は公式サイトでも紹介されていますが、必要最小限の機能で良いので自作することにしました。
セキュリティ強化とボタン表示の抑制のために自作しました。ボタンの表示・非表示はDokuWikiの機能として設定できますが、一番消したい「ログイン」ボタンを消すと自分もログインできなくなってしまうので、特定のIPからのみのアクションを受け付けるというアイデアの下に実装してみました。

順次コンテンツを増やしていく

現在進行形です。

技術資料

以前からデータベース化していた弊社で購入・保管している技術図書情報を移行しました。当初はこれまでと同様にデータベースの情報を差し込むような形で実現しようと考えていましたが、全部で300冊ほどの量だったので、普通にWikiコンテンツとして1冊1ページづつ作成することにしました。ところがこれを一覧するとそれはそれで分量が多く見づらいため、各ページにタグを付けて「カテゴリ」という形で分類して閲覧できるようにすることにしました。

タグづけにはtagプラグイン4)を使います。DokuWikiの数あるプラグインでも上位の人気を誇るものです。

次に、タグそのものの一覧をどうやって表示するか。調べると、tagプラグインに対応したcloudプラグイン5)がありました。タグ専用のものではありませんが、tagプラグインの内容をタグクラウドとして表示することができます。導入して使ってみると、いくつかの不満がありました。

  1. 名前空間が使えない。使えるような記述があるが、機能しなかった。もしかしたら、tagプラグインそのものの「タグの名前空間」が対象なのかもしれない。そうではなく、指定した名前空間のページのtagを集計して欲しい。
  2. 対応するコンテンツの量によって文字の大きさが変わる。これは一般的なタグクラウドの形式だが、個人的には非常に見づらく、単に崩れたコンテンツにしか見えない。

なので、自前でなんとかすることにしました。cloudプラグインの中身を見ると、tagプラグインのヘルパーを使ってタグ情報を取り出しているので、それを適宜フィルタリングして出力する機能があれば良さそうです。そこで、自前のlayoutプラグインdatasourceプラグインに機能追加することで対応することにしました。当然のことながら、ほぼ完全にやりたいことができるようになりました。

  • サイドバーにタグクラウドを配置する。
  • タグクラウドはページの名前空間を指定して結果をフィルタリングされる。つまり、たとえば技術資料以下のタグのみの一覧を表示できる。
  • タグクラウドはnsパラメータを引き継ぐことができ、tagプラグインによって生成されるタグづけされたページの一覧も名前空間に応じた結果が出力される。

1つだけ問題点はあります。各ページのtag表示のリンクには、ページの名前空間がつけられないため、このリンクをクリックすると全てのページが表示されてしまいます。似てるけど少し違うページが出てくることになり、ユーザが混乱してしまうかもしれません。いっそのこと、ページ下部のタグリンクをCSSで見えなくしてしまうというのも手かもしれません。ここは、そんなに気にすることもないよと、とりあえず放置することにします。

ライセンス

標準ではドキュメントのライセンスを複数から選べるようになっているが、企業用のサイトとしてはいずれのライセンスも適当ではない。独自ライセンスを追加するには、conf/license.local.phpに

<?php
$license['shorindo'] = array(
    'name' => 'Copyright(C) 2011 Shorindo, Inc. All Rights Reserved',
    'url'  => 'http://shorindo.com/agreement',
    );

のように記述し、設定で該当ライセンスを選択すれば良いが、ライセンス条項のリンク先が必要となる。本サイトでは利用規約の一部に著作権について記述したので、そのページのURLを指定する。

RSS

今のところRSSを出力する必要性もないし、非公開状態で書いているページまで出力されてしまうことから、RSS出力を無効にする。

  • <テンプレート>/main.php: tpl_metaheaders()の呼び出し方を
    tpl_metaheaders(false);

    に書き換える。この関数の仕様として、falseを指定するとRSSのリンクタグを出力しない。

  • <テンプレート>/footer.html: RSSボタンを削除。ついでにDONATEボタンも削除。
  • RSS出力をするプログラムfeed.phpも削除してしまえば完璧だが、そのうち使うかもしれないのでそのままにしておく。
  • 【問題点】いずれにしても、最近の更新や検索結果にはそのようなページが出てきてしまうので、あまり意味がないかも。

ソースコードの修正

オリジナルのDokuWikiに修正を加えなければならなかった点があります。

  • 検索結果に「以下に検索結果を表示します。もし、探しているものが見つからない場合、 検索キーワードにちなんだ名前の文書を作成もしくは編集を行ってください。」という文言が表示される。利用者は作成も編集もできないので、このフレーズは混乱を招くため、単に「以下に検索結果を表示します。」だけに修正。6)

リリース

リリース判定基準

  • セキュリティは大丈夫か?
  • 複数のブラウザで表示崩れはないか?
  • 中身のないページがないか?
 
research/1306818063.txt · 最終更新: 2011/09/09 15:30 by Kazuyuki Matsuda
特に明示されていない限り、本サイトの内容は次のライセンスに従います:Copyright(C) 2011 Shorindo, Inc. All Rights Reserved
Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki