リクルートホールディングス2017年度新卒Web採用サイト構築
概要
リクルートホールディングス2017年度新卒Web採用サイトの構築 ユニバは構造設計・フロントエンド実装を担当。ユーザがページ間をシームレスに移動できるように、XHR経由によるシームレスなローディングの実装・アニメーションの質感に注力した。また運営者の柔軟な更新を実現するため、テンプレートの細分化・ページ生成の自動化により、複雑なレイアウトの記事を容易に編集できるようにした。
実装方針
今回の達成すべき課題のひとつに "クライアントで記事の更新・追加を行う" というものがあり、当初はCMSの導入を検討したが、今回はサイトの規模・公開期間などを考慮してMiddlemanを採用した。 Middlemanは弊社のプロジェクトでも採用頻度の高いフレームワークの1つで、大量のページの自動生成に優れた静的サイトジェネレータ。さらにMiddleman blogという追加機能を導入することで、静的な構成でCMS的な仕組みを実現できる。Uniba WorksもMiddleman blogの機能を利用して構築されている。
運用方針
すべてのソースファイルをGitHubで管理しつつ、投稿記事や特集コンテンツなどライティングが発生するページのみテンプレートを分割・特定のディレクトリに格納し、テキスト編集の際はクライアント専用のbranchで編集作業を行ってもらった。プログラムの実装状況と記事の編集状況の両方をGitHubで閲覧できる状態にすることで、editからdeployまでのフローをシンプルに圧縮することができた。
Middlemanとモダンな実装
ここでいうモダンな実装とは、例えばJavascriptのコーディングにES6記法を使用したり、Browserify 経由で出力したりという、いわゆる 「最近のイケイケなやり方でサイトを制作する」といったことを指す。 MiddlemanはRubyベースで実装されており、CSSやHTMLは得意だが、Javascriptに関しては遅れをとっている状況だった。ただ、このプロジェクトがスタートする時期にMiddlemanがメジャーアップデートされ、NodeとMiddlemanの連携が可能になった。(この詳細は Qiita にざっと書いてある) 結果として、本サイトはNodeとRubyの合わせ技によって完成することができた。
PCとSPのレンダリング
ブログのみならず、PCとSPでレイアウトの見栄えを変えたいという要望はよくある。普段はレスポンシブデザインよろしくCSSだけでこの問題を解決するが、構造部分から違うとHTML自体を別のものにしなければいけない。 その時にMiddleman blogでは注意しなければいけない課題があった。Middleman blogの機能は「1つのブログソースには1つのレイアウトファイルにのみ対応する」というルールがある。つまり、一つのブログリソースでは一つの構造でしか表現できない。 回避方法として単純に思いつくのは、一つの記事のコピーを作成してふり分けることであるが、取るわざわざリソースをコピーして管理するのはコストもかかる。そのためPCとSPでレイアウトを分離させつつ同一のリソースを参照するために、手を加える必要が出てきた。 この課題は、PCのリソースのリンクファイルをSPのリソースへ貼り付けることで解決した。