見出し画像

ポートフォリオサイトをリニューアルしました！ (技術的な解説あります)

Takumi HASEGAWA (unshift Inc.)

はじめに

1年以上前から考えていた、ポートフォリオサイトのリニューアルがやっとできました。

といっても今回はまだシンプル版のリリースで
そのうちWebGLを組み込んだリッチ版をリリース予定です。

以下のサイトが以前のポートフォリオで、機能的にはまだ生きているんですが3年前に作ったもので技術も古く、あまり見せたくなくなってしまったのでこのサイトは更新せずに、お仕事のリリース報告などはSNS上でしていました。

が、やはりポートフォリオサイト上でしっかり残していきたいと思い、サイトのリニューアルを考えていたんですが、それから1年近くかかってやっとリリースできました。(まだフルバージョンではないですが、、)

デザインについて

デザインとしては、案件ごとに設定した色を活かしたいため、ベースカラーは白と黒のみにし、シンプルに仕上げました。以前のポートフォリオのトンマナを引き継いだ感じになっています。使用フォントはFuturaとNoto sans。

スマホ版を先にデザインしたので、割とモバイルに最適化されていますが、デスクトップでも見やすいレイアウトを考えました。

背景のパターンはページ遷移ごとにリアルタイムで生成しています。
案件の詳細ページはそれぞれ色を設定して、案件ごとの柄が出るようになっているところと、ロゴのアニメーションがお気に入りポイントです。

というかシンプル版を考えたときに、一番始めにこのロゴのアニメーションを思いついたので、そこからシームレスな動きができるようデザインを開始しました。

ちなみにこの柄は以前Sony FES Watch Uのコンペイベントのデザインを作るために実装したパターン生成の仕組みを使っています。せっかくWebの記述を使ったので、どこかで使いたいと思っていました。

WebGLを用いたフルバージョンの構想も一応できています。。いつできることやら。

使用した技術

・Nuxt.js (generate)
・Firebase (Hosting, Storage, Firestore, Funcitons)
・CircleCI
・GitHub API

コンテンツの管理はFlamelinkという、GUIからFirebase (Firestore, Storage)へコンテンツの入力ができるサービスを使用しています。

入力項目を自由にカスタマイズできるようになっています。仮にこのサービスが死んでも、Firebaseにデータ自体は残っているので安心です。

構成はこの記事を参考にして、コンテンツの配信はすべて静的なリソースで行っています (JAMstackというらしい)。

もともと別の個人的にお受けしているお仕事で、この構成を使っており、今回自分のポートフォリオ用にカスタマイズしました。その案件で上記の構成をとった経緯は簡単に言うと、Firebase (と自分)が死んでもすべて静的なリソースなので、レンタルサーバに載せ替えれば、とりあえずコンテンツの存続ができるからです。

step1
Flamelink CMSからコンテンツ更新 (Firestore) → Functions + GitHubAPIでFirestoreのデータをJSON化 & Storage上の画像をダウンロードしてGitHubリポジトリにpush

step2
GitHubリポジトリに特定のタグを付けたコミットをpushすると、それをトリガーとしてCircleCI上でnuxt generate → firebase deploy としてデプロイ

という流れです。

最初は更新があったらdeployまで一気にやるつもりでしたが、管理画面からちょこちょこ更新したいシチュエーションがあり、そのたびにgenerateとdeployが走るのは良くないなと思い、deployのトリガーは別にしました。

CircleCIにはタグによって実行するWorkflowを変えることができるので、その機能を使用しています。

自分のサイトの更新時はCIもしくはSourcetreeからタグ付きコミットをpushすれば、generate & deployが走ります。前述の案件では、簡易的な管理画面を用意し、ボタンをクリックするとタグ付きの空コミットがpushされるようなFunctionを用意しました。

バックエンドの仕組みはこんな感じです。

フロントエンドはあまり複雑なことはしてないです。Nuxtがいろいろうまくやってくれています。

ただ、試験的に設定機能 (settings)を設けています。設定項目は

display mode
・full (フルver. 現在選択不可 開発中) 
・simple (シンプルver.)
・minimum (超簡易ver.)
に切り替えが可能。単純に情報が見たい場合用に用意してみました。fullは今後リリース予定のWebGLあり版です。

menu position (モバイルのみ)
メニューの位置を
・bottom - right (右下)
・bottom - left (左下) 
・top - right (右上)
から選べます。個人的には右下が好きなので、右下がデフォルトです。

auto light / dark mode
OSのカラースキーム (light or dark) の設定をサイト上に自動に反映するかどうかを選べます。この機能はブラウザがCSSのメディアクエリ (prefers-color-scheme) をサポートしている場合のみ使用できます。
現在はFirefoxとSafari (iOS以外)が対応している機能です (2019年7月8日現在)。Google Chrome、iOS Safariは次のバージョンから対応予定です。

light / dark mode
light or darkモードが選べます。「auto light / dark mode」がonのときはこの項目は自動で設定されます。

最近、OSやアプリのダークモードがぽつぽつと出始めていますが、今後Webアプリなどでもダークモードが出てきたりするんでしょうかね。今回はなんとなくつけてみました。

というわけで、技術的な解説 (メモ程度ですが、、)でした。






サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。