ご覧いただきありがとうございます！
当サイトは、HAL EVENT WEEK出展作品として制作された「ラブライブ！」シリーズの非公式ポータルサイトです。
”見てくれた人を全員ラブライバーにしてやる”を目標に掲げ、こだわりを持って作品を仕上げました。
ぜひ細部までご覧いただき、そののちに投票企画へのご協力もどうぞよろしくお願いします。

Post Scriptページは、作者からあなたに注目して見てもらいたいポイント、制作において大変だったこと、
構成する上で参考にしたページや、「ラブライブ！」シリーズの魅力、その他個人的反省愚痴文句を書き散らすページです。
鬱憤を込めながらも、このページの内容が少しでも誰かの参考になれば幸いです。

今回の技術的なコンセプトとして、1年で学んだHTML・CSS・PHP・JavaScript・DBの知識を各所に用いることに加え、
・jQueryとpjax(barba.js)を利用した「シームレスで動きのあるサイト」の制作すること
・連続する処理はなるべく動的に処理すること
を目標にしていました。
最終的なサイトマップは以下のようになりましたので、ご参照ください。


▲ これらを包括するようにJavaScriptが指示の中枢を担います

【Point①】ページ左側のメニューバーの挙動
ベースラインにpjaxによる非同期通信処理を採用したことで、各ページ間を移動したとき、
メニューバーのステートメントを維持したまま、右側の固有コンテンツのみをDOMで書き換えて画面遷移を実現しています。
これによって、画像のスライドショーと音楽再生機能を途切れさせることなく、コンテンツの提供が可能になりました。
（実際に再生ボタンをクリックして音楽を流しながら、他のページに移動してみてください！）

【Point②】Character・Discographyページのオブジェクトの処理方法
こちら2つのページでは、コンテンツの内容をすべて外部Jsonファイルから取得し、
JavaScriptとjQueryで動的に配置するアルゴリズムを採っています。
これによって、データの管理を一元的に行うことが可能となり、また、膨大な物量のデータに対するHTMLの手動入力
通称「鬼のコーディング」を免れることで、コードの視認性の向上を図っています。


▲ 膨大なDiscographyページもHTMLはこれだけ

いろいろと新しいことに挑戦した都合もあり、いろいろと問題点も発覚しました。
一部はかなり妥協して封印しているものもあるので、今後のためにもここに記録することにします。

【反省点①】そもそも設計が甘い
制作自体がかなり行きあたりばったりで進んでしまったことが何よりの反省点です。
PHPとDBは個人的にあまり得意ではなかったので遠回しに進めていたのですが、
いざ着手しはじめるとpjaxとめちゃめちゃに干渉して素直に動かない事例が発生しました。
そもそも折角DB立ててるのに、CharacterとDiscographyはJsonからデータ引っ張ってきてるの今更ですがかなり阿呆です。
ぼんやりとしたビジョンで始めた結果がこれなので、この先の制作では気をつけたいところです。

【反省点②】時間が足りないが故の冗長性の無さ
時間が足りませんでした！
ApexS12のスタートダッシュを犠牲にしました。無理です。もっと時間ください。キャリーミー。
やりたいことはまだまだいっぱいあったし、当初予定していたレスポンシブデザインへの挑戦は時間の都合で諦めました。

先へ進むために今回めちゃくちゃハードコーディングしてるので、自分でも時間が開くと追いきれなくなっています。
今回は作品内で完結するものと割り切っていたので、DBとJsonからの情報の総数はCountではなく絶対値固定になってます。
冗長性のかけらもなくなりました。反省です。

【反省点③】機能が多いが故のページの重さと想定以上のサーバー負荷
1回目のデプロイに提出して、いざ自分のページを開いたときに絶望しました。
まずIndexページの主人公たちのキャラクターがアニメーションしてこないし、
Jsonを参照するページではビビるくらいには動作が不安定になってるし、
DOMで画像を書き換えるところはワンテンポ遅れてるし、
localhostでデバッグすることとの差を大きく感じました。次回はプリロード必須。

また、CharacterページのPHPが投票履歴のDBを全部fetchする一行があるので、
投票が進んでDBが育ってきたときにどうなってしまうかが未だにわかりません。


▲ ここがいっちゃん怖い

Google先生にはいつもお世話になってます。特に今回はpjax関連が完全無知からのスタートだったので大変でした。

・Pjax(Barba.js)でスムーズな画面遷移を実装する方法！５分で完了！サンプルあり！
・これからpjaxを使う人に知っておいてほしいこと
こちらの2つのページには本当に助けられました。（ほぼそのままのテンプレからベース作った）
・Events | Barba - にほんご。
Barba.jsのイベントタイミングがわけわからんかったときの救世主です。

・CSSボックスシャドウジェネレーター
・CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
CSS関連はこのへんが大変役立ちました。

・Fotorama — Simple and Powerful Responsive jQuery Image Gallery
唯一利用したjQueryプラグインです。画像のスライドショーとして万能すぎるのでおすすめ。

・カッシュ•エゲン - 全カード 背景透過
・ラブライブ！スクフェス カードDB
キャラクターの画像は主にここから

最後まで楽しく制作できたのでよかったと思います。

近江彼方ちゃんをどうぞ宜しくお願いします！！