ブログ制作にあたって使用した技術をまとめてみました【Next.js Notion-DB etc】
ブログ制作にあたり使用したフレームワークやライブラリなどをまとめておこうと思います。
主な使用技術
- Next.js: 13.4.6
- React: 18.2.0
- Typescript: 5.1.3
- Tailwindcss: 3.3.2
- notion-to-md: 3.1.0
- react-markdown: 8.0.7
- Lottie: 5.12.2
- Tocbot: 4.21.0
- JSDOM: 22.1.0
- react-share: 4.4.1
- next-sitemap: 4.1.8
各投稿の管理にはNotionのデータベースを使用しています。また、お問い合わせは、Newtを使用して実装しました。
あとはGoogleのアクセス解析ツールの設置やセキュリティ（HTTP headerやrecaptcha）の対策もしました。
各使用技術のあれこれ
「主な使用技術」であげた項目の一部をピックアップして紹介します。
Next.jsのセットアップやTypescript・Tailwindcssのインストールは、今回は割愛します。
Lottie
Lottieとは、JSONベースのアニメーションファイル形式です。非常に軽いサイズでアニメーションを実装することができます。
私のブログではトップページのメインビジュアルとブログ紹介の箇所に使用しています。（花火とか腕がゆっくり動いてるやつです。）
めちゃくちゃ大雑把な手順になりますが、以下の手順で実装しました。
- Adobe Illustratorで動かしたいイラストを作成。
- Adobe After Effectsでイラストにアニメーションをつけて、JSONデータとして書き出す。
- LottieでJSONデータを動かす。
私は主にエンジニアとして活動をしているので、イラストの作成と今回のために習得したAfter Effectsを理解するのが一番大変でした。。
もっと魅力的なイラストやアニメーションをつけられるように頑張ってみます。
今回イラストをアニメーションさせたいとういうことでたどり着いた「Lottie」なのですが、素材さえ用意できれば実装がすごく簡単で本当に便利だなと思いました。
また、いつか「Lottie」にフォーカスした記事を書けたら良いなと思います。
アニメーションのパラメータはこんな感じで指定します。記事作成までお待ちいただけますと幸いです。
export const LoopParams = { container: null, name: 'Loop', renderer: 'svg', loop: true, autoplay: true, path: '/data.json', }
Tocbot
Tocbotは、HTML上の見出し要素から目次（TOC）を生成してくれるライブラリです。
今回初めてこちらのライブラリを使用しましたが、簡単にイケてる目次を生成してくれる神ライブラリでした。TocbotのNext.jsへの導入方法も別の記事にまとめたいと思います。
JSDOM
JSDOMを使用することでサーバサイドでDOM操作をすることができます。
今回なぜJSDOMを使用することになったのかというと、記事内にリンクカードを実装するためでした。
テキストリンクをただ置くだけよりも、ページがリッチになった気がするので実装してよかったなと思います。
CORS（Cross-Origin Resource Sharing、オリジン間リソース共有）の問題で、クライアントサイドでJavaScriptなどを使用した情報の取得ができません。そのためJSDOMを使用して、サーバサイドでリンクカードに必要な情報を取得しておく必要がありました。
当ブログはSSG（Static Site Generation）で生成しているため、SSGの際に該当のURLから情報を取得してレンダリングを行うという手法で実装しました。
個人的にはこのリンクカードの実装で、思いの外苦戦をしてしまいました、、、
手軽に実装できるはてなブログのリンクカード（iframeにURLを渡すだけ）に逃げかけたり、、、
リンクカード実装の手順も別に記事にまとめたいと思います。
react-share
react-shareは、SNSシェアボタンを手軽に実装できるライブラリです。
普段使っているようなSNSは完備されているので、手軽に実装したい際にはもってこいです。
当ブログでは、本ページのような記事詳細のページにSNSのシェアボタンを実装しました。（X（Twitter）、Facebook、LINE、はてなブックマーク）
余談ですが、TwitterがXに変わったので、いつかアイコンが変わるんですかね、、？シェアドメインが変わったりしたら、リリース済みのサービスなどで修正する必要があるのではと少しびくびくしています、、、
next-sitemap
next-sitemapは、Next.js のプロジェクトに手軽にサイトマップを導入することができるライブラリです。
サイトマップは、Google Search Consoleに登録するために生成しました。
Newt
Newtとは、2021年4月に創業したスタートアップ企業により開発された国産のヘッドレスCMSです。シンプルで非常に扱いやすかったです。
公式のページはこちら
公式のチュートリアルをもとに実装しました。非常に簡単に実装することができます。ぜひ、お試しください。
まとめ
今回は初投稿ということで使用した技術の一部の概要だけ説明することとなりました。
次回以降はひとつの項目にフォーカスをあてて、実装方法などをより深掘りして紹介していきたいと思います。また、こちらのカテゴリーでは開発に使用しているガジェットの紹介もしていきたいと考えていますので、興味のある方はそちらもご覧いただけますと幸いです。
執筆者：Nobu
1994年生まれ。
Webフロントエンドエンジニアは3年目。
コーヒーと読書が好きです。主にコーヒー豆の紹介や読んだ本の紹介をしていこうと思います。
