こんにちは！やぎちゃんです。
まずはじめに謝っておきます。
題名で音楽系の記事かと思って楽しみにしていた人、ごめんなさい！ 
バリバリWebデザインの記事です。
この記事は Life is Tech ! Members Advent Calendar 2016 19日目の記事です。
Life is Tech! MUSIC というキャンプのテーマソングをまとめたWebページを作った話です。
背景
さて、 Life is Tech! では一キャンプ毎に何曲かづつテーマソングが割り当てられています。
どの曲も非常にセンスがよく、何度聴いても飽きない曲ばかりです。
あれは忘れもしないいつだったか（忘れとるやないの！）（このネタわかる人いるかな……）。過去のキャンプのテーマソングを知りたくなった僕は、LiT!メンバーの間にプログラミングの神と名を馳せる@KawakawaRitsuki（ごっちゃん！！）に尋ねました。
彼は個人リポジトリにMarkdownで過去の曲をまとめていました。
その時は今の半分ほどの曲数しかなかったこのリポジトリも、僕達メンバーから、メンターさんまでいろんな人に協力してもらって、だんだんデータが充実してきました。
しかし、曲数が増えてくると、GitHubとYouTube間の移動が面倒になってきます。
そこで、Perlの生みの親であるラリー・ウォール氏の提唱する「プログラマの三大美徳」の一つ、「怠惰」に従いYouTubeの埋め込み用iframeを埋め込みます。
ところが、GitHubではYouTubeの埋め込みはセキュリティ上できません。
それならMarkdownからHTMLを生成してGitHub Pagesで公開すればいいじゃんということになり、どうせならかっこ良くしようと思ったのです。
その後、データの保管形式をYAMLにしました。
こうして完成したページが、Life is Tech! MUSICです。
本題
前置きが長かったですね……。それでは解説です。
デザインを考える
何はさておきデザインです。
YouTubeの埋め込み動画を元にカード型デザインにしました。
「Life is Tech! のキャンプ」もテーマの一つであるため、背景画像は各キャンプの画像にしました。パララックス（視差効果）もつけてあります。画像がないキャンプはLife is Tech!のロゴにしています。
長いページなので年とキャンプごとにジャンプできるナビゲーションも設置しました。
ヘッダーはローディング画像をそのままロゴにするため100vw*100vhになりました。
構成
使う言語
- YAML JSONの上位互換のようなもの。Rubyが大好き
- Pug HTMLのテンプレートエンジン。タグを書かなくていい。
- JavaScript ES6ゴリゴリ使っていきますよー！
- scss (CSSのメタ言語) （リンクはsass。scssのHPやGitHubはどこに…？）
ビルドツール
Gulpを使っています。
ページのビルド
Gulp自体は解説されている方がたくさんあり、gulpfileは分かりやすい（と思う）ので細かい解説はしませんが、最終的には以下のファイルを生成しています。
index.html
src/pug/index.pugをコンパイルしたもの。
css/style.css
src/scss/*.scssをコンパイルして連結したもの
js/script.js
src/js/*を"{}"で囲って（varはつかわないのでブロックスコープ）連結したもの
img/
res/imgをコピーしたもの
ビルド -> ライブリロード
プロジェクトの性質上、何かソースファイルを変更したらGulpを実行しビルドし直してブラウザをリロードしなければいけません。
そんなの面倒くさいですよね。プログラマは怠惰でなくてはいけません。
そこで登場するのが救世主gulp-watchとBrowsersyncです！
BrowsersyncはNode.jsでサーバーを立て、複数ブラウザでイベントを同期し、ライブリロードもしてくれるというすぐれものです。
そして、Browsersyncのリロードなどの操作はファイル監視を通してGulp内で行いたいのでgulp-watchを使用します。
これで、gulp generateで単純ビルド、gulp generate:developmentでビルド&ファイル監視&ライブリロードができました。
その他
ローディング
アニメーションはSVG+CSSアニメーションで実装しています。 CodePen
ローディングが終わったら<body>にloadedクラスをつけることでアニメーションさせています。
YouTube埋め込みiframeの遅延ロード
クリックでiframeをparentElementにappendChildしています。
スムーズスクロール
jump.jsを使用しました。
ナビゲーション
ロード時にナビゲーションの全てに開いた状態のCSS(autoはアニメーション効かないので)を生成しています。
OGP設定
最初ページができたぁぁーと思ってFacebookでシェアしたらとても残念なことになったのでいい感じに設定しました。コチラの記事が参考になります。
ホスティング
さて、これでWebページができました。
それではGitHub Pagesを使って公開（ホスティング）します。
リポジトリのgh-pagesブランチをbuildディレクトリとしてcloneしてきてビルドしてcdしてgit pushします。ページに変更があるたびに。
面倒くさいですよね皆さん。プログラマは怠惰（以下略
これも自動化しちゃいましょう。今回はTravis CIというコミットやプルリクエストごとに予め設定しておいたタスクを実行してくれるCI（継続的インテグレーション）サービスを使います。
拙作ですが、コチラの記事にやり方を書いておきました。
現在はなにか変更して、masterブランチにpushしたら即座にタスクが回り、ページが変更されるようになってます。
READMEのバッヂ
READMEにTravis CIのビルドが成功したかのバッヂと、依存パッケージのアップデートをチェックしてくれるサービス、David.のバッヂを付けました。
このように見えると思います。
カッコいいですね！
おわりに
皆さんにお願いがあります。僕は今年のクリキャンにはいかないので、テーマソングの情報提供を（できればPull Requestで）お願いいたします！
もちろん来年以降もお願いいたします！
耳で聴いて曲名がわからなくても大丈夫！音声から音楽を検索できるShazamというアプリがあります。これがあれば「BGMの曲名が気になって開発に集中できない！」なんてこともなくなります。このアプリはかなり感度がいいのでちょっとくらい周りがはしゃいでても大丈夫！
また、Auto Shazamというオンにしといたら周りの音楽を勝手に検索してくれる機能もあるので安心してオープニングムービーに集中できますね！
最後に、この長い記事を最後まで読んでくださりありがとうございました。
明日の記事はnami634（なみ）さんの「Chromeの拡張機能を作った話」です！僕は拡張機能は作ったことないですけどいつかは作りたいと思っております。（某DJシステムのとか。）
それではよいクリスマスを! 