はじめに
最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。
エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。
コントラクター(僕)のスペック
クライアント(嫁)のスペック
クライアント(嫁)の要望
- パブリックに公開するのではなく、履歴書に添えたい
- パスワード(BASIC認証)が欲しい
- デザインはいちから自分で組みたい
- SlimとSassを使いたい
- イラストやロゴなど趣味や個人で依頼された仕事の制作物ものせたい
とのことです。最初はTumblrで簡単に作ればええじゃろと思っていたのですが、思いの外しっかりと仕組みを作る必要がありそうです。
成果物
実際に利用した構成を基に、テンプレートとして使えるように整形したのがこちらです。
github.com
どうぞご利用ください。
構成
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'
gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]
gem 'tzinfo-data', platforms: [:mswin, :mingw]
gem 'middleman', '>= 4.0.0'
gem 'middleman-livereload'
静的ページ周りをMiddlemanで管理し、pumaを使ってBASIC認証を実現しています。
ホスティングはHerokuのHobbyプランを利用しました。Herokuを選んだ理由は、
- 環境構築が容易
- GitHubと連携した自動デプロイの仕組みが簡単に作れる
- 他サービスの値段・手間を比較した時の約700円/月という安さ
- HTTPSで提供できる
という感じです。
クライアントはプログラミングバリバリできるタイプではないので、絶対にデプロイは自動化しようと考えていました。HerokuはGitHubと連携し、 master
が変更されると自動でデプロイしてくれる仕組みがあります。この機能のおかげでクライアントには「Pull Request作ってmaster
にマージしたあと、数分待てばHerokuに反映されるから。」と伝えるだけでよく、非常に便利でした。
構成を考える際に気をつけたこと
クライアントがデザインに集中できるように気をつけました。RubyやJavaScriptなどのコーディングをすることなく、ポートフォリオサイトが完成できるように留意して環境を構築しました。その為には、
- ホットリロードの仕組みがある
- 新しいページを作る際にプログラミングをしたり、コマンドを打つ必要が無い
- SassとSlimもホットリロードされて使える
- Herokuにサラッとデプロイできる
という要件を満たす必要がありました。やはりMiddlemanはよくできているため、「ここに置いて、こういう形式で書けば、こう使える」と教えるだけで済み、とても助かりました。
加えて、オーバーエンジニアリングをしないように気をつけました。クライアントが欲しているのは、転職活動時に履歴書として利用するポートフォリオサイトです。エンジニアとしては、CMSやミニブログ的なシステムを開発したいと考えてしまいますが、今回の案件ではそこまでの機能は必要ありません。
さらに、なるべく早く開発を終えてクライアントにシステムを納品しなければ、転職活動期間中にポートフォリオサイトが間に合わないという、本末転倒な結果になってしまいます。そういった背景を加味した結果、今回の構成に落ち着きました。
最後に
このポートフォリオサイトの効果があったのか無かったのか分かりませんが、嫁は無事に転職することができました。めでたしめでたし。