in between days

表参道で働くシニアのブログ

はてなグループのトップページのHTMLに少し手を加えてみよう

hatena group

昨年末からはてなグループを本格的に使ってます。本業のほうでプライベートのはてなグループを立てて、日々の進捗状況や文書やメモ書きなどをできるだけ書き込んで情報を集約するとともに、共同作業しているひとにもグループに入ってもらってグループウェア的な使い方も試してます。

はてなグループといえばたぶん「サブアカを取らないでも書けるサブ日記」くらいに考えてるひとが多いとおもうんですがというかそういう使われ方がほとんどじゃないかとおもうですが、実はこんな感じに意外と機能は揃ってるんですよね。

日記
はてなダイアリーとほぼ同じ日記システム。日記だけはユーザーが管理できる。
キーワード
グループ固有のキーワード空間。Wikiっぽく使える。
カレンダー
はてなダイアリーのカレンダーと同じもの。
掲示板
いわゆる掲示板。
あしか
はてな流のTODO管理システム。
トピックツリー
グループ内の日記の言及関係を掲示板のように見せるインターフェイス。
共有ファイル
ファイルの汎用アップローダ。有料オプション

機能が揃ってるといってもメインの機能はやはり「日記」と「キーワード」で、はてなグループを業務で使うなら「日報付きのWiki」（あるいは逆に「Wiki付きの日報」でもいいけど）と考えるのがいいんじゃないかなあというのがいまの印象です。そんなこんなで少しずつグループ運用のノウハウっぽいものが自分のなかでまとまってきてるんですが、ちょうど「機能変更、お知らせなど」グループで

という案内があったので、今回はこのデフォルトの「トップページのHTML」のちょっとした改良版を紹介したいとおもいます。実際にうちのグループで使ってるやつで、実用性十分です。

といってもグループのトップページのデザインってのはグループの管理人しか触れない設定なので自分でグループを作成・管理したことがあるひとしかわかんないはなしですが、興味のあるかたはお読みください。少し長いですけど。

サイドバーはぜんぶのページにあったほうが便利

はてなグループ全体の管理画面にはヘッダのメニューバーの「管理」を押して行きますが、この画面の「グループの設定」ではテーマとかヘッダの色とか「ページのヘッダ」「トップページのHTML」「ページのフッタ」「スタイルシート」といった項目で、ダイアリーと同じようにグループ全体のデザインを設定できます。

ここで設定できるデザインはグループのトップページだけでなくて、個々のキーワードやあしかや掲示板やそのほかグループ全体のデザインに反映されるので、あまりテーマなどを安易に選ばないほうがいいかもしれません。グループの日記だけはユーザーが自分でテーマやデザインを設定できますが、新規の参加ユーザーについてはこの設定画面で選んだテーマがデフォルトテーマとして適用されているようです。

さて、ここの設定がグループ全体に反映するということは、上手くデザインすればグループ全体の利便性を上げることができます。例えば、先ほどのg:hatena:id:hatenagroup:20070209:1171006673を見ればサイドバー（sidebar）やナビゲーション領域（groupaboutモジュール）が設定されているのがわかりますが、これはこのままではトップページにしか表示されません。サイドバーなんかはすべてのページにあったほうがナビゲーションの意味でも便利じゃないかとおもうんですよね。

ということで、サイドバーをすべてのページに表示してみましょう。といってもやることはとても簡単です。「トップページのHTML」に書かれているHTMLを3つに分けて、ヘッダやサイドバーの部分を「ページのヘッダ」と「ページのフッタ」にそれぞれ移してやればいいのです。「トップページのHTML」は文字通りグループのトップページのコンテンツですが、「ページのヘッダ」と「ページのフッタ」に書いた内容はキーワードや日記一覧などグループ内の（個々の日記を除く）すべてのページに基本的に適用されます。

百聞は一見にしかずということで、サンプルを用意したのでご覧ください。

このように基本的にグループ内のすべてのページにサイドバーとナビゲーションメニューを表示させてみましょう、というそれだけのことです。それではこのg:mohriグループを実際にどう設定したのか説明します。

「ページのヘッダ」の設定

まず「ページのヘッダ」部分には、次のようにmainクラスのdivの開きと、メニューバーとなるgroupaboutモジュールを移しました。

<div class="main">

<div class="day">
<hatena name="groupabout">
</div>

ここでポイントになるのはgroupaboutモジュールの入れ方です。

g:hatena:id:hatenagroup:20070209:1171006673では次のようにtemplateが設定されていました。

<hatena name="groupabout" template="diary">

今回このtemplateオプションをわざわざ外してdiary形式じゃなくしてるのは、リンクのリストを横に並べてメニューバーっぽくするためです。その詳細はこのあと「スタイルシート」で説明します。なおdayクラスのdiv要素に入れてるのは、main部分ではダイアリーのHTML構造を踏襲しないとレイアウトが崩れるからです。

「ページのフッタ」の設定

「ページのフッタ」には、サイドバーの部分をごっそり持って行きます。

</div>

<div class="sidebar">
<hatena name="keywordcontent" template="hatena-module" word="リンク集" edit="true">
<hatena name="groupantenna" template="hatena-module" icon="true"  dateformat="%Y-%m-%d %H:%i:%s">
<hatena name="groupsearchform" template="hatena-module">
<hatena name="keywordform" template="hatena-module">
<hatena name="keyword" template="hatena-module">
</div>

ここはとくに問題ないですよね。ダイアリーのサイドバーの設定と同じです。

「トップページのHTML」に残るのは

さてこうなると「トップページのHTML」は、お察しのようにものすごくシンプルなものになります。

<hatena name="keyword" template="diary">

そうだね プロテイン キーワードこそがグループのコンテンツなんだね。

もちろんHTMLで自由に手書きしてもいいですけど*1、今回はそこまではやりません。

「スタイルシート」への追加

さきほど「ページのヘッダ」で説明したように、groupaboutモジュールのリンクリストを横並びにするため、次のCSSを「スタイルシート」欄に追記します。

ul.hatena-groupabout {
  list-style-type: none;
}
ul.hatena-groupabout li {
  display: inline;
  margin-right: 1em;
  padding: 0;
}

リストを横に並べる常套的なCSS設定手法なので説明は割愛します。ここで重要なのは、groupaboutモジュールが展開されたHTMLにhatena-groupaboutクラスが設定されてることを利用してるわけですが、これはdiaryテンプレートを使うと入らないんですね。だから「ページのヘッダ」欄でわざわざtemplate設定を外してたわけです。

問題点1 - サイドバーが表示されないページあるよ

これで完成です。素晴らしい！ と言いたいところですが、実はいくつか問題があります。まず、さきほどから「グループ全体のデザイン」とか書いてきましたが、実際のところこのデザインが適用されないページもあるのです。

百聞は一見にしかずなのでまたサンプルを見てください。

サイドバーの空間は空いてますが中身はありません。ダメだー。ということで試しにソースを見てみると面白いものを見つけました。なんとHTMLソースのサイドバーの位置に

<div class="sidebar">
<hatena word="リンク集" template="hatena-module" name="keywordcontent" edit="true">
<hatena icon="true" dateformat="%Y-%m-%d %H:%i:%s" template="hatena-module" name="groupantenna">
<hatena template="hatena-module" name="groupsearchform">
<hatena template="hatena-module" name="keywordform">
<hatena template="hatena-module" name="keyword">
</div>

って「ページのフッタ」に設定した内容が未消化のままで出てきちゃってるんですね。

たぶんhatena記法を展開させる処理を通すの忘れちゃってるんでしょうね。どう見ても不具合です。ほんとうにありがとうございました。ということでアイディア出してます。直される日を気長に待ちたいと思います。

問題点2 - 共有ファイル一覧に飛べないよ

もういちどg:mohriを見ていただければ、冒頭で説明したグループの各機能へのリンクがヘッダとサイドバーに貼られていて、ナビゲーション的にかなりグッドだとわかってもらえると思います。

ただし、ひとつだけ気が付くことがあるかもしれません。そうだね プロテイン ファイル共有に行くためのリンクが無いんだね。といっても共有ファイル機能は有料オプションの一部なので、どちらにせよこのg:mohriでは使えないのです。ちなみにURL的には次のようになりますが。

  • http://mohri.g.hatena.ne.jp/filelist

しかしこれは高いポイントを払ってグループの有料オプションを設定している業務用グループのほうでも同じで、やはり共有ファイル一覧へのリンクは自動では用意されないのです。これは次の2つの機能抜けから来てます。

  1. 日記一覧やキーワード一覧のためのモジュールはあるが、共有ファイル一覧のためのモジュールが存在しない
  2. groupaboutモジュールが展開されたリンクリストでも“/filelist”へのリンクが入っていない

有料オプションだから別格扱いにされて、そのまま完全に忘れられちゃってるんだね。

ということでこちらもアイディアが出てます。早く実装されるといいなあ。

問題点3 - そもそもgroupaboutモジュールなんかヘルプにねえぞ

いやマジで最初にグループのヘッダとか変更したときには「なにこのヘルプにないモジュールは！ 隠し機能？」って驚いたんです。

2006-11-17に新規実装されたモジュールは、はてなグループのヘルプにまだ記載されてないんですね。

ヘルプに書いてなけりゃ機能変更日記を検索しろってのははてなの基本ですけどすっかり忘れてました。

これもアイディア出してるのではやく反映してほしいです。

共有ファイル一覧へのリンクを手で追加する

さきほど問題点としてあげた「共有ファイル一覧」へのリンクが自動で出てこない件ですが、自動で出てこないんならたかがリンクなんだから手で書いちゃえばいいじゃん！ ってのは正しいソリューション。というかgroupaboutモジュールってただ静的なリンクリストを生成してるだけですから、手で書いちゃっても別に変わんないんですね。

じゃあどう書けばいいのか、というとやはりhatena-moduleの構造に乗っかって書くのがいいわけで、実際に業務で使ってるほうのグループでは「ページのヘッダ」欄はこのようになっています。

<div class="main">

<div class="day">
<ul class="hatena-groupabout">
  <li><a href="/">トップ</a></li>
  <li><a href="/diarylist">日記一覧</a></li>
  <li><a href="/calendar">カレンダー</a></li>
  <li><a href="/keywordlist">キーワード一覧</a></li>
  <li><a href="/bbs">掲示板</a></li>
  <li><a href="/task/">あしか</a></li>
  <li><a href="/topictree">トピックツリー</a></li>
  <li><a href="/filelist">共有ファイル一覧</a></li>
  <li><a href="/about">グループ情報</a></li>
</ul>
</div>

実はg:mohriでは、同じものを「ページのフッタ」の先頭に入れています。main部の一番下に表示されているナビゲーションリストが実はこれだったわけですね。ページを見て確認いただければとおもいます。

終わり

ということで「はてなグループのトップページのHTMLを少し改良してみる」はこれで完了です。長い長いエントリになりましたが最後までお付き合いいただきありがとうございました。なんか間違ってること書いてたりわかんない点などありましたらコメント欄までどうぞ。

はてなグループは実際のところ実務にけっこう使えると感じてるので、もし今回のをおもしろがってくれるひとがそれなりにいるようなら、なにかノウハウっぽいことをひねり出してまた書いてみたいとおもいます。

ここで挙げたアイディアが一日もはやく実装されることを祈って！

*1:はてなダイアリーと同様のclassで適宜div要素を入れてかないとレイアウトが崩れるので、手書きするならはてなのHTML構造についての知識が必要です