ロンラン株式会社 CEO 兼 CTO の武部です。
ロンランで Vue 3 / Nuxt 3 / Contentful を採用したミニマルなテックブログを開発し、OSS として公開しました。
Vue 3 - setup script, early だが Nuxt 3 採用, OSS, SSR / SSG 選択可能 そして 製品として問題ないレベルのコード である点がチャームポイントです。
機能はミニマルですが、私の会社でブログ運用してゆくうえでの初期機能としては、必要十分だったりします。
SSR / SSG いずれでも動作します。
Clone, Fork もご自由に。ライセンスは MIT です。
UI サンプル
いくつか記事を投稿した際の UI サンプルを掲載しておきます。
PC トップページ
SP トップページ
PC 記事ページ
開発のきっかけ
開発動機は複数ありました。
- 自社製品への SSR 採用を計画しているが、SSR と Nuxt のノウハウがなく、ある程度しっかりした開発を通じてキャッチアップしたい
- Vue 3 の setup script 構文を試し、善し悪しを把握したかった
- 以前から自社技術ブログが欲しかった
- 私は技術顧問業をしているのですが、支援先企業に技術ブログがまだないことも多く、参考実装になれば
コツコツと隙間時間と週末に開発し、一ヶ月弱で完成しました。
Nuxt 3 のドキュメントにはまだまだ欠落が多かったため、Nuxt 2 のドキュメントでも情報を補完しながら仕様を把握してゆきました。
技術スタック
以下が主要な技術スタックです。
- Vue 3 - フル
setup scriptスタイル - Nuxt 3 - なるべく最新の RC に追従アップデート／標準のディレクトリ構造に準拠
- TypeScript - 設定系ファイルを除きすべて
- 記事データは Contentful で管理
- Vite, Yarn 3 / non-zero-install, Volar
- スタイリング/デザインに Primeflex, Primeicons を利用。Tailwind に移行しかけて途中で戻しました
- SSR / SSG どちらでも動作
Nuxt 3 ですが、開発中に beta -> rc へと移行し、この記事の公開時点の最新は rc6 です。rc そろそろ取れるかな？見守っています。
マークアップやスタイリングの初級者や、プログラミングに長けていない UI デザイナーでも、UI のカスタマイズが容易にできるよう、コードと構成はシンプルに保っています。
この点は重要です。Vue であればコードが書ける UI デザイナーやコーダー、マークアップエンジニアとコラボレーションしやすいです。彼らの専門性を活かせます。
たとえばコードレビュアーになってもらうことで、コードの品質を高められる可能性があります。コードのメンテナーになってもらえるなら、UI デザイン x マークアップ・スタイリングについては鬼に金棒です。
生成した静的コンテンツのホスティング先については、Firebase Hosting と Netlify での動作を確認済みです。ロンランでは最終的に Netlify で運用することにしました。
ところで Netlify は今回はじめて試したのですが、噂に聞いていたとおりの Developer eXperience でした。あまりにも良かったので、他の自社 SPA 製品も Netlify へ移行するか検討しています。
機能的な特徴
以下が機能的な特徴です。
- シンプル＆クリーンなデザイン、マークアップ
- 記事は Markdown で書けます
- 画像最適化：WebP サポート、Lazy Load
- コードハイライト
- PC, Tablet, SP 向けのレスポンシブデザイン
- Lighthouse でほぼ満点＝SEO に強い
- ユニバーサルデザイン。コントラスト比、文字サイズなどを配慮
- FB, Twitter への OGP 設定
- i18n 多言語対応
- Google Analytics 4 対応
- もちろん広告なんて出ません！
基本的な機能は抑えていますが、その一方で本格的な運用開始後の記事数増加に対応するための機能がいくつか不足しています。こういった機能は今後のアップデート版で提供したいと思います（あるいは必要に迫られている誰か、PR を送ってください！）。
自社ブログ採用を検討されている方へ
「自社に技術ブログを設置したい」「自社にミニマルなオウンドメディアを立ち上げたい」と考えていた方には、「Wordpress」や「Note」「はてブ」といったサービスではなく、是非このようなヘッドレス CMS を選択肢として頂きたいです。メリットはたとえば、
- UI や機能における制約がなく、コードで自由にカスタムできる
- 閲覧者に広告を見せなくて済む
- セキュリティレベルが高い
- SSG であれば静的コンテンツであるためアプリケーションがセキュリティリスクはさらに低下
- インフラ運用コストゼロにすることも可能
- とても高速に動作する
など、多くのたくさんのメリットがあると思います。
このブログシステムをボイラープレートとしてベースにしつつ、デザインや独自の機能拡張を検討してみて頂ければ幸いです。疑問や質問があれば、気軽に GitHub issue やディスカッションに投稿ください。そして是非自社技術ブログの運用を開始し、あなたの会社の inside を教えてください！
一点、残念ながら私の Nuxt, Vue, TypeScript の習熟度はまだまだなレベルのため、今後育ててゆくなかで Bug が発見されれば、速やかに修正したいと思います。
ロンランと OSS
ロンランの OSS に対するスタンスは「めいっぱい OSS に貢献する」につきます。
自社製品であれ「レポジトリ公開」が初期選択肢です。ただし、事業戦略上の理由などでコードの公開が難しい場合に、非公開レポジトリとして開発・運用することにしています。
今後も、世の中の誰かの役に立つコードを積極的に OSS 公開してゆきます。
Discussion