RECRUIT DNA Website

2016.03

Recruit2017 thumb compressorRecruit2017 01Recruit2017 02Recruit2017 03Recruit2017 04

リクルートホールディングス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のリソースへ貼り付けることで解決した。

(文:Keiichi TanifujiJun Mori)

Uniba works

Uniba works

2017

Title Index