嫁を面接した企業が「あれ、これって……。」となる画像
はじめに
最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ 」なるものが必要になるそうです。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 やミニブログ 的なシステムを開発したいと考えてしまいますが、今回の案件ではそこまでの機能は必要ありません。
さらに、なるべく早く開発を終えてクライアントにシステムを納品しなければ、転職活動期間中にポートフォリオ サイトが間に合わないという、本末転倒な結果になってしまいます。そういった背景を加味した結果、今回の構成に落ち着きました。
最後に
このポートフォリオ サイトの効果があったのか無かったのか分かりませんが、嫁は無事に転職することができました。めでたしめでたし。