feb19

Nobuhiro Takahashi
Designer / Engineer

ウェブサイトをリニューアルしました。

date
2020.12.19(Sat.)
tags
generalweb developmentJavaScript

このサイトみてる人今何人いるんだろうっていうのはありますが、ウェブサイトをリニューアルしてみました。大幅にコンテンツを間引いて式年遷宮です。

デザイン

前のトンマナは踏襲しつつも、よりスキマの多いデザインにしてカッスカスな感じにしました。4K ディスプレイとかで全画面にしてみるとほんとカッスカスです。明朝体・セリフ体で組んでいますのでよりカッスカスです。コンテンツもかなり間引きしましたので、カッスカス具合が目立ってすごいです。

Sketch や PSD で管理していたデザインデータは Figma に全て統合しました。複雑なグラフィックを作るのは微妙ですが、 Figma はほんと便利ですね。今年の春ぐらいに日本語に対応してくれたので、もうなくてはならないぐらい依存してしまっております。

インフラ

15 年ぐらいの期間 heteml ホスティングで運用していた feb19.jp ですが、heteml を卒業し、令和二年の今をときめく Vercel にしてみました。Vercel はウェブデザインがいいですね。あと GitHubAction 組んだりしなくても github Integration をコンソールでポチッとするだけでフロントエンドのテンプレート通りに npm script が実行されてデプロイされる Heroku 的な感じで便利ですね。CI 要らず。

heteml は月 1,500 円ぐらいでしたので、GMO ペパボ社に 20 万円ぐらい課金してきたことになります。PHP のアップデートとかあんまり対応しなくてすみませんでした。大変学ばせていただいて、お世話になりました(MuuMuu Mail, Domain は引き続きお世話になります)。今も手軽に扱えながらも強力な機能を持ったウェブサイトホスティング環境ですので、ウェブサイトの公開用途にはとてもオススメです。

フロントエンド

ウェブサイトのフロントエンドフレームワークはインフラが Vercel なので、Next.js ...と思いきや、Nuxt.js を使用しています。

もう一つの趣味サイトでは Next.js と Firebase Hosting を使用しているので、同じもので作っても仕方がないと思って、あえて Nuxt.js + Vercel で提供することにしました。

ほぼ全てのコンテンツページは Markdown で書けるようにしており、サーバーサイドジェネレートしております。

長く運用しているサイトでしたので、 ベタ書きの HTML と Movable Type と Word Press のキメラという感じのサイトでしたが、全ページが Nuxt.js 管理下になったことで見通しが良くなり、デザインは全てコンポーネント化されたことでカテゴリごとに微妙に差があったものが統一され、 Single Page Application になったことで各ページの遷移も超高速になって、いい感じです。 UX って感じです。 Lighthouse とか見てませんでしたが、今見たら一応オールグリーンだったのでよかったです。

CI

Vercel の Hook を利用して、LINE Bot で自分のスマホにデプロイされたら通知を送るようにもしました。前述したサイトでは Next.js + Firebase Hosting ということで GitHub Action で main ブランチにレポジトリがマージされたら CI 回してデプロイみたいなことをやっているんですが、 Vercel では不要なので無駄に余計なサーバープログラムも組んでいます。

というわけで、自分で作っておいて何ですが、至れり尽くせりです。とはいえこんだけやってブログでドヤってる人のサイトって更新されないですよね。そんなフラグがビンビン立っています。

Headless な CMS を使って提供してもよかったのですが、草を生やしたかったので GitHub 運用としました。そうです、GitHub に草がいっぱい生えているから優秀なエンジニアと盲目的に推測する採用メディアに騙されてはダメですよ人事のみなさん。むしろ草が生えていない方が生活が充実している可能性があり会社の一員としては優秀かもしれません。😇

RSS

RSS も一応実装しました。 News Letter が今風かなとは思いますが、古き良きフィードを登録っていうのは良い文化だと思うので大切にしていきたいと思っています。よろしければご登録ください。

その他

また、プログラミング関連のスニペットやブログはもう賞味期限が切れている物がほとんどだろうなと思って、大部分を削除しました。

「あのページ見たいんですけど」みたいなことがあれば Twitter かなんかで教えてください。ぶっちゃけコンテンツ残ってないですが新しい記事として書きますんで。

というわけで今後ともよろしくお願いいたします!

著者: @feb19