私が以前から利用していたBlogシステムはこちらにあります。
フロントはフレームワークを使用せずTypeScriptで書き起こしており、バックエンドはNode.jsでTypeORMを使用してPostgreSQLにアクセスしています。
さすがに技術的に古くなりすぎたので、更新しようと完全にシステムの作成に取りかかりました。
当初はMicroCMSを利用してデータを管理しようかと
というものを作成したのですが、最終的にAPI仕様が私の目的と合致しなかったため利用を取りやめました。 下書き(非公開)状態の設定が無料版のAPIだと出来ないというのが理由です。
その後、データ管理はFirebaseに切り替えることで落ち着きました。 このBlogはどうせ大したアクセスが来ないことが予測できるため、無料の範囲で収まることが容易に想像できます。
https://www.npmjs.com/package/@react-libraries/markdown-editor
リッチMarkdownEditorです。今回はテキスト形式にMarkdownを採用したのですが、React用に特化したMarkdownエディタが無かったので自作しました。これを作るのに無駄に時間を食われましたが、作ってしまったものは仕方ありません。
https://www.npmjs.com/package/@react-libraries/use-ssr
Next.jsでSSRを簡単に行うためのライブラリです。このライブラリの特徴は、データのfetch処理を一回書くだけでSSRとクライアントの処理を同時にこなせることです。getServerSidePropsでサーバ専用を書く必要はありません。私の知っている限り同様のことをやっているライブラリはApolloのGraphQLぐらいです。
Firestoreの操作ライブラリ
現時点でnpmライブラリにはしていませんが@react-libraries/use-ssrと組み合わせて、受け取ったデータをSSRする機能があります。今回のBlog作成で使用しています。TypeORM擬きになっていて、TypeScriptのDecoratorで型やコレクション名などを指定して、Date型などの自動変換を行うようになっています。
画像のコピペやドラッグドロップにも対応させています。そのまま張り付くだけだと芸が無いので、png
やjpeg
はwebp
に自動変換させ、さらにMarkdownの画像のalt部分を使って、画像サイズの情報が自動挿入されるようになっています。
画像は読み込みの高速化を行うため、FirebaseStorageからCloudStrageのアドレスに自動変換するロジックを入れています。これをやるだけで300ms程度かかる応答速度を10ms以下に縮められます。
また、Markdown中で使われなくなった画像は、テキスト保存時に自動消去するようになっています。
まだ完成したわけではないので、コンテンツを入れ込みつつ、ブラッシュアップを図って行けたらと思っています。