はじめに
最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。
エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。
コントラクター（僕）のスペック
- iOSエンジニア
- Webアプリは過去にやっていた
クライアント（嫁）のスペック
- デザイナー（仕事はWeb系）
- Ruby, JavaScriptはほぼ書けない
- HTML, CSSは書ける
- Git, GitHubは使える
クライアント（嫁）の要望
- パブリックに公開するのではなく、履歴書に添えたい
- URLを知っている人しかアクセスしない
- パスワード（BASIC認証）が欲しい
- デザインはいちから自分で組みたい
- SlimとSassを使いたい
- イラストやロゴなど趣味や個人で依頼された仕事の制作物ものせたい
とのことです。最初はTumblrで簡単に作ればええじゃろと思っていたのですが、思いの外しっかりと仕組みを作る必要がありそうです。
成果物
実際に利用した構成を基に、テンプレートとして使えるように整形したのがこちらです。
構成
iOSエンジニアとしてはServer-Side-Swiftを選択したいところですが、Middlemanを使いたかったのでRubyベースです。下記Gemfileを読めば、だいたいの構成はわかると思います。
source 'https://rubygems.org' ruby "~> 2.4.0" gem 'slim', '>= 3.0' gem 'rake' gem 'puma' gem 'rack-contrib' # For faster file watcher updates on Windows: gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw] # windows does not come with time zone data gem 'tzinfo-data', platforms: [:mswin, :mingw] # Middleman Gems gem 'middleman', '>= 4.0.0' gem 'middleman-livereload'
静的ページ周りをMiddlemanで管理し、pumaを使ってBASIC認証を実現しています。
ホスティングとデプロイ
ホスティングはHerokuのHobbyプランを利用しました。Herokuを選んだ理由は、
という感じです。
クライアントはプログラミングバリバリできるタイプではないので、絶対にデプロイは自動化しようと考えていました。HerokuはGitHubと連携し、 master が変更されると自動でデプロイしてくれる仕組みがあります。この機能のおかげでクライアントには「Pull Request作ってmasterにマージしたあと、数分待てばHerokuに反映されるから。」と伝えるだけでよく、非常に便利でした。
構成を考える際に気をつけたこと
クライアントがデザインに集中できるように気をつけました。RubyやJavaScriptなどのコーディングをすることなく、ポートフォリオサイトが完成できるように留意して環境を構築しました。その為には、
- ホットリロードの仕組みがある
- 新しいページを作る際にプログラミングをしたり、コマンドを打つ必要が無い
- SassとSlimもホットリロードされて使える
- Herokuにサラッとデプロイできる
という要件を満たす必要がありました。やはりMiddlemanはよくできているため、「ここに置いて、こういう形式で書けば、こう使える」と教えるだけで済み、とても助かりました。
加えて、オーバーエンジニアリングをしないように気をつけました。クライアントが欲しているのは、転職活動時に履歴書として利用するポートフォリオサイトです。エンジニアとしては、CMSやミニブログ的なシステムを開発したいと考えてしまいますが、今回の案件ではそこまでの機能は必要ありません。
さらに、なるべく早く開発を終えてクライアントにシステムを納品しなければ、転職活動期間中にポートフォリオサイトが間に合わないという、本末転倒な結果になってしまいます。そういった背景を加味した結果、今回の構成に落ち着きました。
最後に
このポートフォリオサイトの効果があったのか無かったのか分かりませんが、嫁は無事に転職することができました。めでたしめでたし。
