更新:
パーティーや合コンのお供に、Movable Type
※本記事は、旧 Tech Talk Blog 内の 「パーティーや合コンのお供に、Movable Type (http://www.sixapart.jp/techtalk/2012/02/movable_type_with_party.html) 
こんにちわ、Movable Type 開発担当のたかやまです。
本日は、パーティーや合コン役立つMovable Typeというテーマです。
シックス・アパートでは、年内最終営業日には、夕方くらいから納会という名のパーティーを行っています。（当日の模様はこちら）
その時に活躍するのが特殊プロジェクトチーム「忘年会・納会：ゲーム大会実行委員会」です。
忘年会におけるゲーム大会実行委員会は、司会業と裏方業に専念しています。しかし、納会は自分たちでゲームの企画から考えて実行しているのです。
と、前置きは置いておいて。実はここ2年は納会のゲーム大会にクイズ大会を開催しています。忘年会のクイズ大会用に早押しピンポンや、マルバツブザーなんて小道具も買っているので当然の帰結ですね。
ただ、普通に早押しクイズをやるだけじゃ面白くないとい事で、クイズの進行をMovable Typeで作ったサイトで行っているのです。どういう事か解らない？スクリーンショットをご覧ください。（見ても分からないかもですが...）
2011年バージョンでは、2010年バージョンの欠点を修正することを目的として1から作り直すという事をやっています。（2010年バージョンのテンプレートをロストしたという噂も...）
2010年バージョンの欠点とは。
- 解答済みのステータスを管理していなかったために、画面をリロードすると全問選択可能となってしまった。
- JavaScriptの時々が時々おかしくなり、アニメーションなどが正常に動かなかった。
- そもそも、オペレータが酔っ払ってしまった（これは人災）
問題１．の解決としては、オープンした問題のステータスを保持すればいいという事で、簡単にLocal Storageを使う事にしました。
問題一覧がロードされたタイミングで、Local Storageから問題のステータス情報を取り出します。
var storage = localStorage;
var data = JSON.parse(storage.getItem("quiz-93"));
document.ready:
if ( data ) {
for(var idx in data){
jQuery("#"+data[idx]).css('background', '#fff');
jQuery("#"+data[idx]).unbind();
}
}
OnClick:
if ( !data ) { data = new Array(); }
data.push( $id );
storage.setItem("quiz-93", JSON.stringify( data ));
そして、問題をクリックしたタイミングでIDをPushしてしまえばOKじゃないですか。ばっちり解決です。
問題２．は、SlideUpなどのアニメーションの際にいろいろ細かい調整をしていたのですが、それをスッキリ書き直したら起こらなくなってました。
そして、最大の問題が 問題３．ですが、これはオペレータの永遠のテーマなので放っておきます。
2011年バージョンは、無駄にHTML5+CSS3で書いてみたのですが、今回書いていて一番ステキに思ったところをご紹介して今日のエントリーを締めくくりたいと思います。
2010年バージョンでは、3カラムレイアウトを組むのに当然ながら float を利用していたのですが、CSS3では display: box とすると3カラムのそれぞれの高さを一番長いものに合わせてくれて、簡単に3カラムレイアウトが作れるようになるっぽいです。（ベンダー独自実装しかまだ無いので...）
CSS:
#container {
display: -moz-box;
display: -webkit-box;
width: 100%;
}
.genre-container {
width: 33%;
height: 100%;
background: #FFFFF0;
}
HTML:
HTML:
<body class="main-index">
<div id="container">
<mt:TopLevelCategories>
<div class="genre-container">
<div class="genre"><p><mt:CategoryLabel></p></div>
<mt:Entries sort_by="field:point" sort_order="ascend">
<div class="point<mt:If tag="EntryDataAngel"> quiz-angel</mt:If><mt:If tag="EntryDataDevil"> quiz-devil</mt:If>" id="entry-<mt:EntryID>"><p><mt:QuizPoint /></p></div>
</mt:Entries>
</div>
</mt:TopLevelCategories>
</div>
簡単ですね。今回は使いませんでしたけど（使う場所ありませんでしたけど）
box-ordinal-group: 1;
とか書くと、HTML内の位置とは関係なく 見た目の順番を指定できるそうです.
まとめ：HTML5＆CSS3は面白いですね。
では、また次回。
Six Apart をフォローしませんか？
