Tiamat

企画というか、あんまり時間が無いからやっつけで作るが。
出来がよければオープンソースにするかも。
悪ければまあ、悪いなりの扱いで。
運用は社内サーバでやるが、cuvel.comにもテスト的に配置するかもしれない。するならtsuge.cuvel.comかな。

目的

新入社員実習用のシステム。
当初想定していたWikiベトナムのWeb浸透度を考えると難しい事が予想されるのと、また例えば一つの問題を出した時に複数人の回答が1ページに書き込まれる運用では可読性を落とす事を考え、代替策として別のシステムを作るものとした。
Wikiの再検討を含め、以下6つのアイデアから絞り込んだ。

  1. 質問、回答、コメントごとにWebページを分ける純粋なHyperlink形式。コードネームChaos。
  2. 質問をルートのスレッドとして扱うツリー型掲示板。コードネームTree。
  3. Wiki。ちなみにMediawikiが筆頭候補、次点がPukiWikiDokuWikiローカライズが面倒なので、おそらくMediawikiになる。コードネームWiki
  4. ユーザごとに部屋を作り、質問を全ユーザに送る形式。ユーザのタスク管理がしやすい。コードネームRoom。
  5. メーリングリスト、または通常メールで全て運用。コードネームMail。
  6. 平面にタイルを並べて、一つのタイルに質問、また別のタイルに回答が並ぶ形式。詳細は後述。コードネームPlanet。

最終候補はRoomとPlanet。
革新性のPlanetか、汎用性のRoomかで随分悩んだが、Roomはマーケティングに使えそうもないのでPlanetにすることにした。
ただ、今でも考えるのは、RoomならPhprojektのモジュールとして出せたなという点。
Groupwareの利用頻度を高めた方が初めは良い、というのが現実的な選択ではあったが、現実的=保守的な選択はベトナムにまで来てやるもんでもないと考えて却下した。

概要

コードネームPlanetは謎すぎたので変更してTiamat。
タイルとか田んぼとかもよかったのだが、現在がCUVELの草創期であることを意識して創造神系から引っ張った。まあティアマットだと殺されてから死体が大地になるわけだが、それもありだなと。
田んぼシステムって名前も素敵だけど。なんかに使うか。


で、ブラウザで起動すると、こんな感じの画面が表示される。

1 2 3
4 5 6
7 8 9

このうち、5が質問とすれば、6や2に回答が書かれる。
で、この画面はAdobe Readerでおなじみのハンドスクロール(だっけか?)で動かせて、こんな感じの画面になる。

5 6 11
8 9 12
13 14 15

5は質問で、11にコメントがあって、12に11のコメントに対するコメントがあり、15にはその二つのコメントを反映した回答が書き込まれるというイメージ。


なお、閲覧モードと書き込みモードは基本的に分ける。
本当はGoogle Mapのように洗練されたUIにしたかったのだが、それをするには現状技術または経験不足によって時間かかりそうなので、ダブルクリックによるモード切替で対応することにした。詳細なUIはまた作りながら考える。

期待できる効果

回答やコメントがディスプレイ全体を通して表示されることで可読性が高く、雑多な雰囲気がベトナムらしい、もといバザール的で楽しい。
従来のツリー型掲示板などでは下スクロールまたはリンククリックと操作性が決められていたが、新入社員には新しい操作性に触れてもらう事で創造性を高めてもらう狙いもある。
また、AjaxPHPSmartyMySQLを利用することで、技術的なサンプル資料としての価値も高い。Ajaxprototype.jsによろしくさせる予定。
Room型モデルでは違うユーザの部屋に入るという行為が必要になる分、社員同士のディスカッションを促すことが難しくなるが、Tiamatでは半強制的に他人の書き込みや回答も見せるのでディスカッションがしやすい。これは将来的に私が日本とベトナムを行き来するようになれば、社員の中でリーダーを育てなければいけないという社内的な理由もある。

デメリット

横に長くなるので読みにくい。
また、横にも縦にも文章があるので文章の読解に集中できない可能性もある*1
大概DHTML関連のJavaScriptはブラウザごとの互換性が弱いので、UIの構築に時間がかかるか、ブラウザを限定するしかないかもしれない。
製作期間が短くリスキー(実質三日くらい)。
あまりにも他人の書き込みがよく見えてしまうので、社員同士の軋轢などが生まれないか心配。これは考え方によってはメリットでもあるのだが、一般的にはデメリット。

システム構成

MySQL + PHP + Smartyがサーバサイド。
ちなみにDBのテーブルは二つくらい。本当は四つ必要だが、ユーザテーブルとコンテンツテーブルだけでOK。ちなみにコンテンツテーブルは増えること前提。
ブックマークは現在の画面のXとY座標をGETに渡す事で可能。問題の出題も、そのURLをメール送付することで行う予定。
クライアントサイドはXHTML1.0のTransitionalとJavaScript1.2系とprototype.jsCSS2かな。えらい適当言ってるから間違っているかも。
プラットフォームはIE7Opera、つまり私が使っているブラウザで動けばいい、で行く。

技術的な話

内部的にタイルはこんな感じで持つ。

1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25

表示されるのが太字の部分で、例えば少し右下にスクロールすると、

7 8 9 10
12 13 14 15
17 18 19 20
22 23 24 25

こうなってから、Ajax君に空いたところを読みに行ってもらう。

7 8 9 10 26
12 13 14 15 27
17 18 19 20 28
22 23 24 25 29
30 31 32 33 34

ま、一般的なスクロール処理ですな。


他に特筆すべき点はなし。

*1:新聞のスペース型広告のような視覚効果になり、一つの記事に集中出来ないのではという不安