今年もSYSKEN Advent Calendar 2015がやってきた！

この記事は SYSKEN Advent Calendar 2015 1日目の記事です。

なんと今年もやってきてしまいました「SYSKEN Advent Calendar 2015」です！
昨年は私が書いた記事冒頭にあった無責任な一言によって始まった突発的な企画でしたが、今年はちゃんと Advent Calendar らしく、12月1日からの25日間に渡ってお送りすることになりました。
ちなみに毎週土日にはシス研のOBの方々に寄稿していただいた記事を公開予定！より一層賑やかにお送りしていきます！

そんな SYSKEN Advent Calendar 第1日目。
実は今日12月1日はまだ本科生が後期中間試験期間中ということもあり、本科生に代わって専攻科生の私がトップバッターを努めることになりました。

（「またお前か」と書きたかったのですが去年のAdvent Calendarから2回しか記事を書いてなかった）

さてさて、今回の話題は SYSKEN Advent Calendar 2015 の特設ページそのものについてです。

冒頭にも書きましたが昨年のシス研 Advent Calendar は私の一言によって突発的に始まった企画だったため、特設ページについても急ごしらえのものでした。
しかし今年は11月の段階で Advent Calendar をすると決定したので、特設ページにも少しだけ力を入れて作ってみました。
というわけでこのページのこだわりポイントを皆さんにご紹介したいと思います。

背景に動画を入れてみた

去年か一昨年ぐらいからウェブサイトの背景部分に動画を埋め込むという表現方法が流行し数多くのサイトで取り入れられています。
いわゆるインタラクティブ要素とか視差効果(パララックス)とは違いますが、何もしなくても画面が動くというのはやはり眼を引く効果があります。
今回使用した動画は YouTube で Creative Commons として公開されている（おそらくポーランドの）クリスマスの風景を写したタイムラプス動画です。
ただ BGM が付いていると都合が悪いので別途音を消したバージョンをYouTubeに上げて使っています。あとはCSSやなんやかんやで文字を読みやすくしたりすれば背景に埋め込みできるようになりました。
動画はYouTubeからダウンロードすることになるので転送量も気にしなくて済んで安心ですね。

カレンダー一覧表示を実装した

前回は用意できなかったカレンダー表示を実装しました。ちなみにカレンダーの担当者の情報などはWordPressからの自動取得などではなく手作業による入力です。
とはいえHTMLに直接書き込むわけではなく、AngularJSを使用して手書きのJSONからデータを取得してカレンダーと記事の一覧表示を実装しています。

…というといまいちピンとこないと思うのでもう少し詳しく書くと…

まずみなさんがページを見に行くとJavaScript（AngularJS）が「誰がどの日を担当するのか」などが書かれたJSONファイルを自動で読み取りに行きます。以下はJSONファイルに書かれている内容。

カレンダー部分の日付
その日が Advent Calendar の対象の日かどうか
執筆担当者のアイコンのURL
執筆担当者の名前
OBフラグ
記事のURL
記事のタイトル（書く予定の内容）

そしてAngularJSはJSONから取ってきた内容を元にカレンダーを埋めていきます。
カレンダーの実装というと曜日の計算とかが面倒な気がしますが、そもそもカレンダーなんてものは単純に2次元配列で表現できるものなので、自動化にこだわらなければ案外単純です。

そしてAngularJSに限ったことではないですが、MVVMやMVCの強い所は固定HTMLだとイチイチちまちまと書かないといけない部分を、テンプレートで反復処理ができるということだと思います。
さらにAngularJSではデータの状態によって付与するクラスを切り替えたり、表示するかしないかを切り替えたりすることができるので、こういうこともできます。