12月1日からの25日間に渡ってお送りすることになりました。いうこともあり、本科生に代わって専攻科生の私がトップバッターを努めることになりました。そのものについてです。私の一言によって突発的に始まった企画だったため、特設ページについても急ごしらえのものでした。すると決定したので、特設ページにも少しだけ力を入れて作ってみました。いうわけでこのページのこだわりポイントを皆さんにご紹介したいと思います。背景に動画を入れてみた去年か一昨年ぐらいからウェブサイトの背景部分に動画を埋め込むという表現方法が流行し数多くのサイトで取り入れられています。いわゆるインタラクティブ要素とか視差効果(パララックス)とは違いますが、何もしなくても画面が動くというのはやはり眼を引く効果があります。して公開されている(おそらくポーランドの)クリスマスの風景を写したタイムラプス動画です。付いていると都合が悪いので別途音を消したバージョンをYouTubeに上げて使っています。あとはCSSやなんやかんやで文字を読みやすくしたりすれば背景に埋め込みできるようになりました。動画はYouTubeからダウンロードすることになるので転送量も気にしなくて済んで安心ですね。カレンダー一覧表示を実装した前回は用意できなかったカレンダー表示を実装しました。ちなみにカレンダーの担当者の情報などはWordPressからの自動取得などではなく手作業による入力です。いえHTMLに直接書き込むわけではなく、AngularJSを使用して手書きのJSONからデータを取得してカレンダーと記事の一覧表示を実装しています。...というといまいちピンとこないと思うのでもう少し詳しく書くと...まずみなさんがページを見に行くとJavaScript(AngularJS)が「誰がどの日を担当するのか」などが書かれたJSONファイルを自動で読み取りに行きます。以下はJSONファイルに書かれている内容。対象の日かどうか執筆担当者のアイコンのURL執筆担当者の名前OBフラグ記事のURL記事のタイトル(書く予定の内容)そしてAngularJSはJSONから取ってきた内容を元にカレンダーを埋めていきます。カレンダーの実装というと曜日の計算とかが面倒な気がしますが、そもそもカレンダーなんてものは単純に2次元配列で表現できるものなので、自動化にこだわらなければ案外単純です。AngularJSに限ったことではないですが、MVVMやMVCの強い所は固定HTMLだとイチイチちまちまと書かないといけない部分を、テンプレートで反復処理ができるということだと思います。AngularJSではデータの状態によって付与するクラスを切り替えたり、表示するかしないかを切り替えたりすることができるので、こういうこともできます。OBのバッジはOBフラグによって付けることができ、記事のURLを指定するとおめでたい感じに。そんな感じでJSONデータを変更してあげれば、自動的にカレンダーと記事リストに反映されるようになっており更新作業も簡単というわけです。ちなみにこの実装のソースコードはこのあたりにあります。いうわけでじゅりあんでした。明日はらりょす先輩がお送りします〜。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。高専セキュコン2019に参加しました。keyboardで自作キーボードに入門しました。