NEXTLIGHTのReleasesページを改造しました

nextlight.io にて、Releasesページが公開されました 🎉

このページ公開前後で結構いろいろなことをやったので、その業務報告をしようかなと。

まず、パッケージ構造を変えていました。

nextlight.io は2つのパッケージからできています。

UIを構成する要素だけを作るコンポーネントライブラリのパッケージ

Webページそのものを作るパッケージ

そして、今まではこれらをバラバラに管理していました。

それではちょっとした不具合を直すのも面倒くさいということで、モノレポ構成に変更しました。

モノレポ構成とは、複数のパッケージを束ねるパッケージを作って、すべてをその中で扱うことをさします。

pnpm workspace としてすべてを管理するようにしたので、コンポーネントライブラリを手元でbuildして、アプリケーションですぐに使えるようになりました。（本当に結構な大進歩）

コンポーネントライブラリとWebページそのものを同じ場所で扱うことにしたので、今までより気軽に新しいページを作ることがきっとできるはず。

ちなみにこのブログも nextlight.io と同じコンポーネントライブラリを利用しています。

1つサイトを作っただけあってかなり手に馴染んでていい感じです。

今まで nextlight.io は styled-components というフレームワークを使っていました。

どういうわけか Next.js と styled-components を使ったコンポーネントライブラリはモノレポ環境下で相性が悪いようで、どうにも直せないバグを生んでしまいました。

そろそろ潮時か、と思って styled-components から Panda CSS へ乗り換えました。

絶妙なパンダのイラストがチャーミングです。

コンパイル完了時にもパンダの絵文字が出てくれます。

Panda CSSの良かった点はこんな感じ

StaticなCSSを書き出せるので、コンポーネントライブラリ利用側にフレームワーク導入を必須としない

表現力にCSSゆずりの限界があるが、それ故JavaScriptに頼ったスタイルの実装を減らせる

セレクタを自由にかける（これはTailwind CSSより好き！）

辛く苦しい長い置き換え作業でしたが、何とかやり切りました。

ちなみに置き換え前後でほんの少しだけパフォーマンスが悪化したみたいです。

↓ styled-components 版の PageSpeed Insights の結果

↓ Panda CSS 版の PageSpeed Insights の結果

このあたりは改善の余地がありそう。

まだあんまり詳しくないので、改善を続けていきたいなと思います。

カラーパレットが一新されました

この辺もまだ勉強中なんですが...

Figmaを使ってコントラスト比を調べるpluginを使いながら作ってみました。

まだまだ調整を続けているので、急に見た目が変わることもしばしばあると思いますが、いろいろ試しているんだなと思っててください。

このブログでも使っている Prismic を nextlight.io でも利用しました。

そもそもこのブログでPrismicを採用したのも、 nextlight.io での利用を見込んでいたためです。

ドキュメント数の制限がゆるい

Custom Typeの作成数の制限がゆるい

リレーションシップをたどった絞り込みがギリできそう

コンピレーションアルバムや、収録楽曲、コンポーザーさんの情報などそれぞれの情報は複雑に絡み合っています。

例えば、「特定のコンポーザーさんの曲が入っているコンピレーションアルバムを絞り込む」みたいなことを今後やりたいので、リレーションシップをたどった絞り込みができるかどうかはかなり意識していました。（リレーションシップの扱いがうまいCMSはあんまりない）

とにかく、コンピレーションアルバムを中心にデータベースを持つことができたので、このデータをうまいこと使って、楽しいサイトにできたら良いなと思っています。

nextlight.io の開発はみつきだけがコーディングを行っているということもあり、自分の試したいことを独断で好きなだけ試せる場になっています。

なので、本業で使う予定のある技術だったり、使う予定はないけど興味深い仕組みをどんどん使っていくつもりです。

技術的にちょっと面白いところを目指しながら、大前提としてNEXTLIGHTというレーベルのためのWebサイトを作っていることだけは忘れないようにしないと...

クリエイターの皆さまの魅力と、提供いただいている素晴らしい楽曲たちを、より多くのファンの皆さまにお届けできるよう、NEXTLIGHTのWebサイトを引き続き改善していきます！

NEXTLIGHTのReleasesページを作りました

ブログで色々書けるようにしてみよう

ブログがつくりたいのでつくります。これは開発中のサンプルデータも兼ねているのでこの前置きをかいている時点で何分でつくれたのかはわかっていません。そして途中から酒飲みながら作ってるので急いでもいないです。さぁやっていこう。

現世に存在する最高のブラウザ

macOSでは完璧、Windowsでは開発途中という感じだけど最高なのでみんな使おう

みつきの生活のあらゆるメモがここにある

この記事がCMSに載る前の下書きにつかう

今後降りかかるであろう工程管理につかう

爆速webページが爆速でつくれるすげ～～やつ

ボカロエレクトロを作りそうな名前ですね

ブログの記事とかのデータを置く場所

無料でありえないくらい使える、すごい

ボカロのサークルがありそうな名前ですね

これがないと本当に仕事にならない

そもそもブログらしい文体のものがないと書いたプログラムが正しいのかわからないのでガーっと書く。

Prismic: Headless Page Builder - Launch and Iterate Faster

PrismicはヘッドレスCMSというジャンルの存在で、データをしまって置く場所と、データを効率的につくる画面を提供してくれるものです。

ブログのようなものだと、タイトルを入れる部分があって、本文を書くところがあって、その本文を書くところには便利でリッチなエディタがついていて、タグみたいなのをつける機能があって…と割とテンプレみたいな仕組みが必要となります。

だけど、ブログとして公開され、読者のひとがみるページは個性あふれたこれぞみつきっぽいぞみたいなページがいいな、みたいな欲求は全世界の誰しもが持っているわけです。

なので、みんなには見えないテンプレみたいな裏側の部分はあらかじめサービスとして展開されているヘッドレスCMSというサービスをつかって退屈な開発をスキップ、みんなにみえる表側の部分は0から（これもすでにあるライブラリを組み合わせるので実際には5くらいかも）つくっていって、個性あふるる画面をワクワクしながら作っていきましょうね、というわけです。

Next.jsでいい感じに作れそうな画面が出てきますが、それを無視してSomething else → Otherを選んどきます。こういうのはとりあえずこちらの環境を明示しないほうがやりたいことができたりするのだ。

できたら、それらしくCustom typeというのをつくります。

ブログの構成要素が何でできるか、ですね。UID、Title、Rich Textでとりま良いでしょう。

で、ここまでつらつら書いてるこの記事をDocumentにつくります。

驚くべきことに、これでバックエンドと呼ばれる領域はだいたい準備完了なのでこれからはゴリゴリとフロントエンドと呼ばれる部分をつくっていきます。

後は指示通りホイホイホイとやっていきます。これは便利なのでいうことを聞いてやっていきます。

pnpm add @prismicio/client @prismicio/react

んで、どっかにこういうコードをつくっときます。いい感じのところに。

import { createClient } from "@prismicio/client"
export const repositoryName= "geki_omoshiro_blog"
export const client = createClient(repositoryName, {
    accessToken: process.env.PRISMIC_AT
})

Prismicの情報が欲しいところでこのコードを使えば、いい感じに情報がとってこれるってこと！

ここからは実際にWebページとして表示される部分をつくっていきます。

今回はNext.jsのSSGという方法を使ってつくっていきます。SSGではWebサイトをビルドするとき、わーっと書いたプログラムコードを実際にブラウザとかで読み込める形式に変換するときに通信が必要な情報をあらかじめ読み込んでおく方法です。

このブログではコメントとかふぁぼみたいな、読者の人がリアクションできる機能をつくるつもりは今のところないので、情報を更新したいタイミングは記事が増えたときのみ、とかなり限定的になります。

そのため、ビルドの時だけ通信する方式でも成り立つのです。お金的にエコな方法でWebサイトが作れるので安心。 

だんだん細かく書くのもつらくなってきたのでざっくりやったことを列挙します

getStaticPaths関数の作成、動的に生成するページのURLとPrismicのデータのUIDを対応させる

getStaticProps関数の作成、記事データを取得して、Webページとして公開する内容をPrismicから取得する

Webページそのものの実装、PrismicにはPrismicRichTextのような便利なコンポーネントを提供してくれているので、それにデータを渡して、表示してもらう。

そんなこんなで激ショボ見た目のブログが完成！

おもむろにスクショ貼ったんですが、見た目が質素すぎて画像が画像に見えなかったらすいません。

`.github/` というディレクトリを作って、その中に `workflows/` というディレクトリをつくって、その中に `deploy.yaml` というファイルを作成します。

そして、コードをビルドするとか、公開環境へ良い感じにやるとかの作業をつらつらと書いていきます。

GitHubにpushしておけば、更新をしたいときにボタンをポチっとな！すれば更新ができてしまうのだ！！

というわけで完成！！タイマーストップです。

 2日に分けて作業してて、2台のスマホで測ったのでややこしいことに...

合計165分くらいですかね。途中Prismicのログインに手こずったり、GitHub Pagesの設定で若干時間を食ったりしましたが、とにかくブログとして機能するものは3時間かからずに作ることができました。

とにかくメチャメチャ質素な見た目のものが爆誕したので、ここからは良い感じの見た目に強化していきたいと思います。

ヘッドレスCMS最高！Next.js最高！！ おわりです。

mimonjo