UmiSiozaki.com
2024/09/15 06:22:18
こんにちは潮崎海です。このページでは、当サイトのUmiSiozaki.comを作るに至った経緯や制作環境等を僕自信の備忘録も兼ねて説明します！
環境
まずは制作環境や採用したものを紹介していきます。
ベースとなっているのは、microCMSさんのこちらのブログ(microCMS + Next.jsでJamstackブログを作ってみよう)で紹介されているものになります。主に使用した環境は以下になります。
- Next.js
- React
- microCMS(ブログ作成部分)
- Vercel(デプロイ先)
- Github
- Preline UI(Tailwind CSS)
- daisy ui(Taillwind CSS)
制作に至った理由
当サイトを制作するに至った理由は主に２つあります。
- Next.jsの勉強をしたかった。
- 個人サイトが欲しかった。
以上の2つになります。
Next.jsの勉強をしたかった
僕はNode.js×expressを今年(2024年)の4月からふれていて、いくつかアプリケーションを作成していたのですがNext.jsとReact等の存在を７月頃に知りまして、そこからNext.jsを使った物を制作したいと考えていました。そんな中で、８月下旬からNext.jsの勉強をこちらの本(TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発)を読みながら開始しました。
中頃まで読んだあたりで実際のアプリケーション開発に入っていくのですが、お恥ずかしい話そこまでの内容をあまり理解できてないと感じたので、なにかもっとお手軽に始められて実際に使っていきたいサンプルのようなものは無いかなと探していたところ、9月の頭にシンさんのこちらの動画と先ほど紹介したmicroCMSさんの記事を見つけました。ここで初めてmicroCMSさんのことを知りました。こちらのチュートリアルであれば、２,３の希望も満たせることに気づき、制作にするに至りました。
個人サイトが欲しかった
以前から個人サイトは欲しかったのですが、自分の持ってる知識だと、記事の作成更新等の機能を自分で実装しようとすると、かなりの時間と労力がかかってしまうことが容易に想像できてしまいました。例えば、データベースの設定や僕だけがログインできるページを作成してそこでページを作成する等・・・。
そんな中で見つけたのがシンさんの動画とmicroCMSさんの記事になります。こちらであれば記事の制作の管理はmicroCMSの方でとても簡単にできる！と思い使うことにしました。またVercelであれば簡単にデプロイできるのでこちらを使用することにしました。
制作時に困ったことの備忘録
ここからは、制作段階で困ったこととその対処法を書いていきます。
microCMSの全件取得
microCMSでは、１度のリクエストでデフォルトでは、10件のみしかコンテンツを取得しません。そこで、microCMSのAPIドキュメントを除いてみるとクエリーにlimitを設定できて最大100件まで取得できますが前件取得はできません。そのため、代わりにmicroCMSさんが用意してくれているgetAllContentsを使用します。これで全件取得が可能になりました。
目次機能
microCMSを利用して目次機能を生成する方法はmicroCMS公式ブログに記載されています。Next.js で目次機能を実装してみようとmicroCMSで目次を作成するを見て実装いたしました～！見た目部分はこちらのサイトのデザインを採用いたしました。
next-sitemapを使用したサイトマップ生成
先に結論を書きますと、こちらのサイト(Next.jsのSSRを使って動的にサイトマップを生成する)を見て実装しました。
SEO対策のひとつである、サイトマップを簡単に実装できるnext-sitemapですが、SSGでの実装だとoutput modeを"export"にしなければならなくて、Next,jsのImageタグと相性が悪くSSRでの実装になりました。(この結論に至るまでが長かった...)私が購入した本(TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発)にもSSRでの実装をしていたので、これでいいはず！
Faviconの設定
Next.jsだとどのようにファビコンを実装するのだろう？と疑問に思いましたが以下の記事を見て実装しました！
Next.jsでFaviconを設定する
OGP生成
サイトのリンクをSNS等に貼り付けるとそのサイトのサムネイルが表示されると思います。その画像の生成方法と注意点をメモしておきます。
- サイズは1200 × 630が理想
- 画像生成にはcanvas APIを使用
- Googleフォントを使う際にはインストールボタンを押す。
まず画像のサイズは1200 × 630が理想です。
次にOGP画像の生成にはCanvasAPIを使用いたしました。(参考記事)
最後に、OGP画像生成時にフォントを指定するのですが、Googleフォントをインストールして使うには、zipファイルをインストールした後に使用したいフォントの.ttfファイルを開いてインストールボタンを押す必要があります。(参考記事)
今後の展望
これから実装したい機能として検索機能です。現在はブログの数も少ないですが、ゆくゆくは増やしていきたい！ので検索機能をこれから実装したいと考えています。
最後に
ここまで読んでいただきありがとうございます！！これから色々作っていこうと思いますのでよろしくおねがいします！ヒカセンの皆様はゲームでも仲良くしてくれると嬉しいな！ではでは、またね～
