こんにちは！エンジニアのtoyocです。みなさん『シン・エヴァンゲリオン劇場版』は観ましたか？僕は公開初日、仕事前に観に行ってきました！とても（あらゆる感想がネタバレになるので省略）でしたねー。
さて、突然ですが、READYFORには、 “evangelion” の名を冠したソースコードがたくさんあります。
READYFORの他のプロジェクトページをご覧になった方はお気づきかと思いますが、かなりデザインや仕様の異なるプロジェクトページになっています。
今回は、2015年当時フロントエンドのコーディングを担当した僕が「ロンギヌスの槍プロジェクト」のページをリファクタしたお話をします。
※今作のネタバレは一切ないので安心して読んでください。
※本プロジェクトの支援受付はすでに終了しています。
序: 急造されたプロジェクトページ
本プロジェクトは、20周年公式企画ということもあり、エヴァの世界観を全面に感じさせるプロジェクトページをつくる必要がありました。
通常プロジェクトページはタブは3つしか存在しないのですが、本プロジェクトは英語ページ・リターン詳細・技術面などの説明ページを作ることになり、7つのタブを設置することに。ほかにも支援者からの応援コメントのアイコンがランダムでキャラクターになるなど、今までになかった機能や仕様が盛り込まれています。
当時のスケジュールを見返すと、2014年12月末にページの仕様が決まって動き始めているので、約1ヶ月と短期間で準備したことになります。 実装以外にもコンテンツの詳細決定やデザインを準備しなければならなかったはずで、当時の関係者の大変さが偲ばれます。
（僕もフロントエンドのコーディングを担当したのですが、忙しすぎたのかあまり思い出せません…）
破: プロジェクト終了とともに凍結されるエヴァコード
残念ながら目標金額未達成で終了しましたが、本プロジェクトのために特殊対応したコード（以下エヴァコード）はそのまま残しておくことにしました。
一方で、READYFORのサービス全体ではデザインリニューアルも行われていきます。その度に本プロジェクトページをどうするか考慮する必要がでてきてしまい、エヴァコードはすっかりレガシーに。
さらに時が流れて開発体制も変わっていく中で、いつからかエヴァコードの存在に気づかれなくなり、とうとう一部のページでデザインが崩れてしまいました…
Q: 胎動するリファクタリング計画
そして本プロジェクトが公開されてから6年が経った今年3月、皆さんご存知の通り『シン・エヴァンゲリオン劇場版』がついに公開されました。開発メンバーとオンラインランチをしてる時もその話で非常に盛り上がりました。
その中で「昔、ロンギヌスの槍プロジェクトをやっていたよね？」という話になり、エヴァコードの存在が再発掘されました。
今こそREADYFORでも、レガシーと化したエヴァコードをきれいにして「さらば、全てのエヴァンゲリオン。」するチャンスでは！という話になったのです。
:|| 「さらば、全てのエヴァンゲリオン。」
ということで、ここでは具体的なエヴァコードのリファクタリング方法について解説していきます。 手順は大きく分けて下記の4ステップになります。
- 動的生成されているプロジェクトページを静的HTMLにする
- デザインが崩れてしまっているページを復旧する
S2機関Amazon S3上でHTMLをホスティング- リポジトリからエヴァコードを削除する
1. 動的生成されているプロジェクトページを静的HTMLにする
READYFORのプロジェクトページはRuby on Railsで動的に生成しているものなので、これを静的HTMLにします。
なにか頭のいいやり方ができればよかったんですが、今回は地道に生成されたHTML=ブラウザでみれるソースコードを元に静的HTMLとリソースを再構築しました。
この工程が一番時間がかかって一番疲れました。
2. デザインが崩れてしまっているページを復旧する
次に、前述の応援コメントのページのようなデザインが崩れてしまったページを修復していきます。修復するといっても、崩れる前の状態に戻すには何年も前のソースコードに戻さなければならず、あまり現実的ではありません。
最終的にはInternet Archive に当時のページが残されていたのを発見、これを元に修復作業を行いました。
とはいえ全てのページが残っていたわけではなく、データベースからコメントなどのデータを抽出してHTML生成するのもそれなりに時間がかかりそうだったので今回は一部の修復にとどめました。
3. S2機関 Amazon S3上でHTMLをホスティング
永久機関 半永久的にデータを保存しておけるAmazon S3に1,2で作成したHTMLをアップロードし、静的ウェブサイトホスティングで配信します。（詳しくはこちら（AWS公式情報））
これで削除の準備は整いました。
4. リポジトリからエヴァコードを削除する
冒頭の画像のような数々のエヴァコードや関連リソースをがっつり削除します。 https://readyfor.jp/projects/evangelion にアクセスした際に 3でホスティングしたページにリダイレクトするようにルーティングを変更します。
おわりに
今回はエヴァ完結を記念してリファクタしたお話でした。ほとんど前置きの話で終わってしまいましたね…。ここまで読んでいただきありがとうございました。
ということで「さらば、全てのエヴァンゲリオン。」というコピーのおかげで、ようやく重い腰を上げてこのリファクタに手をつけることができました。
ありがとう、エヴァンゲリオン！
