今年も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次元配列で表現できるものなので、自動化にこだわらなければ案外単純です。

array

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

angular_demo

OBのバッジはOBフラグによって付けることができ、記事のURLを指定するとおめでたい感じに。

そんな感じでJSONデータを変更してあげれば、自動的にカレンダーと記事リストに反映されるようになっており更新作業も簡単というわけです。素晴らしい。

ちなみにこの実装のソースコードはこのあたりにあります。読んでみるのも一興。

というわけでじゅりあんでした。明日はらりょす先輩がお送りします〜。


コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください