はじめに
こんにちは😊東京都中野区在住の中野です😃
個人用のメディアを1つ持ちたいと思いブログを作ってみようと思いました😉
普段はバックエンドをメインで担当しているので、 フロントエンドを業務でやることがほとんどありません😂
今回はyutanakano.netの作成でどのような技術やサービスを採用したのか? どうやって開発していったのか作成過程の話を書いて行きます😊
プロトタイプの作成
私は普段webページをなんとなく流し読むしているので 当然デザインは全くと言っていいほどわかりません😂
そもそも私は何を形づくればいいんだ😅 という状態から始まりました😱
そこでFigmaを使って実際にイメージを書き出してみました😃 はじめて使ってみたんですけど楽しくて便利だなーと思って遊んでました😂
コンポーネントに対する考え方がデザイン視点だとそうなんだー😄 っていう気づきなどもあって楽しかったです😃
アトミックデザインをやるなら、このコンポーネント作りが大切なのかな?😋 と思いながら黙々とコンポーネント作ってました😂
実際にプロトタイプまで作ってどんな風に動くのかを確認までしました😃
技術選定
今回はフロントエンドの技術のみという制約を設けています😄 ということはみんな大好きWordPressは非採用になります😤
採用した技術とサービスの説明を簡単にまとめてあります😃
Figma
Figmaとは、ブラウザ上で簡単にデザインができるツールです。インターフェースのデザインを、場所を選ばずにブラウザさえ起動できれば使えるため、利便性が高くチーム体制での作業にも向いています。何よりフリープランがあり無料で利用できるので、誰にでも手軽に導入できることから、デザイナーではない人でもちょっとした用途に役立つでしょう。
引用元:デザインツールFigma(フィグマ)の使い方とは?デザイナー以外の方でも有効活用できる
Bulma
CSS3標準のFlexboxをベースにした、オープンソースのCSSフレームワークです。
引用元:Bulma
Nuxt.js
Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。一部分から徐々に採用することが可能で、静的なランディングページから複雑な企業向け web アプリケーションの作成に使用できます。 本質的に汎用性があり、さまざまなターゲット(サーバー、サーバーレス、または静的)をサポートし、サーバーサイドのレンダリングは切り替えることができます。 強力なモジュールエコシステムにより拡張可能で、REST や GraphQL エンドポイント、お気に入りの CMS や CSS フレームワークなどさまざまなものに簡単に接続できます。PWA および AMP のサポートは、Nuxt プロジェクトからは隔離されたモジュールにすぎません。 NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。
引用元:はじめに
Contentful
Headless CMSはデータ・コンテンツを管理する部分だけを担ってくれるため、使う言語やサイトの見た目(フロントエンド)の自由度が格段に増え、ページの表示速度の改善や他のサイトとの差別化を測ることが可能です。
引用元:Contentfulってなにー?
Netlify
Netlifyは、静的サイトをホスティングすることができるWebサービスです。 WordPress等の動的な処理のいらないLPなどの静的なWebサイトであればNetlifyを通じて公開することができます。
引用元:Netlifyとは?
目指した方向性
一番重要視したのはランニングコストをかけないで目的を達成することです😋 コードは、いずれ腐るので一番はコードを書かずに目的を達成することです😆
そこで Headless CMS
の Contentful に注目しました😊
これならDBもいらないしバックエンドのコードを書かなくてもいい😄
必要なものはホスティングするサーバだけがあればいい😋
私の責務はビューアを作ればいいだけというところです😆 つまり、コンテンツとビューアが疎結合になっているのでフロントが捨てやすい😂
ビューアならNuxt.jsを使ってSPAにしてしまえばホスティング先いっぱいある😂 Nuxt.jsと相性の良さそうなサービスを探してNetlifyに落ち着きました😄
これでほとんど運用コストはかからないようになりました😂
私はコンテンツを作ることに専念することができます😄
開発の振り返り
今まで触ったことないツールや技術に触れました😃 私はHTMLとCSSとJSを一番最初に捨てた人です😨 まさかの6年越しの再入門になりました😂
vue nuxt bulma css と各サービスの使い方を全部同時にインプット進めました😄 フロントまわりのエラーって分かりづらいですね😅
読める形になってるしとりあえずリリースしよ😄(デザインは捨てた😂) っていうノリでリリースしてます😆
チャレンジングな開発でしたが楽しくできました😋 今後の運用もほとんどコストがかからないので気楽です😆
さいごに
新機能などは時間がある時に実装していきます😋 コンポーネントの切り分けや設計なども勉強していいコードにしていきます😊