CodeNote.net

「風とロック芋煮会2014 風とロックBASEBALL」公式サイトの制作にコントリビュートしました

#javascript#jquery#event#portfolio
重岡 正 · Sun, September 28, 2014

2014年9月27日・28日に福島県郡山市の開成山野球場で開催された「風とロック芋煮会2014 風とロックBASEBALL」。その公式サイトの制作にコントリビュートしました。

担当したのは、トップページ右側にある開幕までのカウントダウン表示の JavaScript 実装です。サイト全体から見ればごく小さいスコープですが、実績として記録に残しておきます。

風とロック芋煮会2014 風とロックBASEBALL について

風とロック芋煮会は、福島県出身のクリエイティブディレクターである箭内道彦さんが手がける、福島で毎年秋に開催される村祭り型のロックフェスティバルです。2014年は「風とロックBASEBALL」と題して、ミュージシャンと観客が実際に野球で対戦するという構成になりました。音楽ナタリーの記事でも「今年の風とロック芋煮会は草野球大会」と紹介されています。

公式サイトのビジュアルも、この野球というテーマに沿ったものになっています。旗が並び、その下に緑色のスコアボードが置かれ、電光掲示板に「開幕まで ◯日」とオレンジ色のドット文字が浮かぶ、という構成です。

担当したのはカウントダウンの実装

私が担当したのは、このスコアボードに表示される残り日数の算出と描画です。デザインとマークアップは別の担当者が仕上げたものに、開幕日までの日数を出す処理を載せる、という分担でした。

要件はシンプルでした。

  • 開幕日である2014年9月27日までの残り日数を表示する
  • 表示するのは日数のみ。時・分・秒は出さない
  • 「◯日」の「日」はスコアボードの画像側に含まれるため、JavaScript が描画するのは数字だけ
  • 開幕当日は 0 と表示される

実装

2014年当時のフロントエンドはまだ jQuery が主役だったため、素直に jQuery と、Keith Wood さんによる jQuery Countdown プラグインを採用しました。

マークアップ側は、カウントダウンのテキストを差し込むための空の要素と、背景になるスコアボード画像を同じコンテナに並べる構成です。

<div class="countdown-area">
  <div id="js-countdown" class="countdown-text"></div>
  <img src="public/images/countdown/countdown.png" alt="カウントダウン">
</div>

そこへ、以下の JavaScript を載せました。

$(function(){
  var countDownEndDate = new Date('2014-09-27');
 
  $('#js-countdown').countdown({
    until: countDownEndDate,
    compact: true,
    compactLabels: ['', '', '', ''],
    format: 'D'
  });
});

ポイントは 3 つのオプションです。

  • format: 'D': 表示する単位を日 (Day) のみに絞ります。これで時・分・秒が描画されなくなります。
  • compact: true: プラグインが標準で生成する、単位ごとの <span> を並べたリッチな構造ではなく、テキストだけのコンパクトな出力に切り替えます。
  • compactLabels: ['', '', '', '']: コンパクト表示のときに数字へ付与される週・日・時・分のラベルをすべて空文字にします。これで DOM に入るのは数字だけになり、画像側の「日」と重複しません。

残り日数の計算そのものはプラグインに任せ、こちらは「何を、どの粒度で、どこに出すか」を宣言するだけで済ませています。日付をまたいだときの更新もプラグイン側が面倒を見てくれるため、自前でタイマーを回す必要はありませんでした。

スコアボードに数字を重ねる

デザイン上、数字はスコアボード画像の電光掲示板部分にぴったり重なる必要があります。そのため、数字を描画する .countdown-text は position: absolute と z-index で画像の上に重ね、ドットフォントとオレンジ色で電光掲示板らしい見た目にしています。

.countdown-area {
  width: 270px;
  height: 155px;
  overflow: hidden;
  position: relative;
}
.countdown-area img {
  z-index: 0;
  width: 270px;
  height: 178px;
}
.countdown-text {
  position: absolute;
  z-index: 1;
  padding: 55px 0 0 35px;
  font-family: DotGothic16Std-M, Helvetica, Arial, sans-serif;
  font-size: 40pt;
  color: #f39800;
}

JavaScript 側で数字だけを出力する設計にしたのは、この重ね合わせのためでもあります。プラグイン標準の出力をそのまま使うと、単位ラベルや区切りの要素が一緒に入ってきて、掲示板の枠内にきれいに収まりません。出力を数字 1 つに絞り切ることで、CSS 側は座標とフォントの調整だけに集中できます。

なお、当時は Firefox だけ重ね位置がずれたため、@-moz-document url-prefix() によるベンダー固有の調整が入っています。ブラウザ間の描画差をハックで吸収するのが当たり前だった時代の名残です。

小さいスコープでも公開されるものを作るということ

担当範囲は JavaScript で 10 行ほどです。技術的に難しいことは何もしていません。

それでも、この 10 行は開幕までの数か月間、公式サイトを訪れた人が最初に目を留める場所で動き続けました。数字が減っていくのを見て「あと 3 日か」と思った人がいたはずで、そういう体験の一部を担えたことには、コード量とは別の手応えがあります。

音楽フェスの公式サイトという、自分が普段書いている業務システムとはまったく違う文脈のものに関われたのも良い経験でした。締切が動かない（開幕日は延期できない）案件で、表示が 1 日ずれるだけで信頼を損なうという緊張感も、なかなか経験できるものではありません。

以上、風とロック芋煮会2014の公式サイトでカウントダウンの JavaScript 実装を担当した、現場からお送りしました。

参考情報