タイムアタック企画レポート

今日は以前私が企画したタイムアタックの開催日だった。今回はこちらのレポートを書く。

参加者と結果

参加者は下記の7名。上位3名は記録も併記。予想外に講師の方も参加となった。
Hさん　55min
Sさん　1h05min
Kさん　1h25min
Tさん
Oさん　
Yさん
Y先生

ルールと仕様

この画像がお題となる。
f:id:ys_nim_9:20141110214914j:plain
企画の内容としては、お題画像どおりのサイトを出来るだけ早く完成させる、というもの。お題画像には告知サイトとほぼ同様のものを使用した。事前に自分でタイムアタックを実施し、概ね1時間で作れることを確認しルールや仕様を決定した。優勝者には1,000円の賞金、さらに1時間以内に終了させた全員に1,000円を出す、という条件で開始。条件は下記のとおり。

ルール

添付ファイルと同じページをhtmlとcssだけで記述する。
外観さえ同じであれば、その他は一切問わない。
各boxの色は手本から調べること。手段は任意。
レスポンシブは不要。
テキストデータは全てこのファイル内にあるものを使ってよい。
微小な誤差と認められれば、完璧に同じでなくても良い(ブラウザの差異など)。
何を見てもいいし、コピーアンドペーストも認める。使用ツールも自由。
ただし、大会終了までの間は、告知サイトを閉鎖してあるためコードを見ることは出来ない。

仕様

box同士の間隔は全て20px。
最も小さいboxは140px四方。
記事本文(訓練期間も～)の外枠は10px。このboxだけ高さを持たない。
footerの高さは検索boxやrssのboxと同じ。
文字は記事本文のみ#004、それ以外は全てwhite。
フォントは任意だが、手本に対し大きく崩れないようにする。 (手本はfirefoxデフォルトのsans-serif)

熱戦の様子

プログラム経験者であるKさん,Hさんの2名が本命かと思われたが、まさかのy先生参戦で荒れ模様の様相を呈した。約30分終了時で、早い参加者はboxの整列をほぼ終えた状況。しかし意外とそこからが進まず、みんなfloatでつまづくかと思ったが予想外だった。もう一つ予想外な出来事としては、y先生のスピードが思わしくない。きっちり正しい記述に慣れた経験者は、こういったルール下では力をふるいにくかったと思われる。

勝者は最年少

優勝は最年少のHさん。記録は55分。急いでいたせいか、最終チェックで指摘事項が数件あったものの、あっという間に修正し唯一の1時間未満の記録を打ち立て、勝利に花を飾った。Sさんも善戦したが、ぎりぎりのところでフォームのsubmitボタン設置忘れという致命的なミスが見つかり惜しくも1時間未満の記録樹立とはならなかった。

感想

このルールが実務的に考えると、まずは時間ありきでの作業がほとんどである以上、「急いで作る」ということの意義性は高い。また、客先にサンプル提示するだけのものであれば、バリデートでエラーが出ようとあまり問題ない。
参加者にとっても得るものがあった様子で、開催した側としても有意義であったと思えた。参加各位に感謝をもって今回の記事を締めくくりたい。