<h1 id="h42087f5b38">チケットは一般購入から</h1><p>僕は元々はプライマルズのライブに行くか迷っていました。理由としてはおもに２つで、まずお高いということ。２つ目の理由としては僕自身の予定が読めない部分があったことです。</p><p>僕にとって、1万円というお値段はそう簡単に出せるものではありませんでした。ライブ自体行ったことが無かったので、どういうものなのか想像しにくい部分が大きいのも購入を躊躇う理由でした。何かしら理由が無いと自分は購入できませんでした。</p><p>一番最初のチケット販売時期が5月とかで、ライブが９月でしたので行けるかわからないという心配がありました。</p><p>しかし、チケット一般販売の時期になり１週間ほど経った頃、予定的には空いていることがわかったのと、「まだチケット買えるよ〜」とフレさんに教えてもらって、この夏僕自身どこにも遊びに行ってないことに思い至りチケットを購入いたしました!</p><h1 id="h6673359876">ライブ当日、大量のヒカセン達</h1><p>ライブ当日は、フレさんと合流して物販でお買い物をして、お昼ご飯を食べた後ライブ会場に行きました〜！フレさんには色々奢ってもらったのだ。今度は僕がおもてなしをしようと決めました。</p><p>ライブ会場に着くとそこには大量のヒカセン達がいました!!こんなにヒカセンっているんだね〜。普段どこに隠れてるのかしら……</p><h1 id="h9d2387209c">始まるライブ</h1><p>横浜アリーナに入り、まずその大きさに圧倒されました。それだけでライブへの期待値がどんどん上がっていくのを感じました。</p><p>ライブ開演前にアルバートからの注意喚起や挨拶があったのですが、それがとても素敵でした〜。心は共に！</p><p>そして、満を持して、轟音とともに始まるライブ!!黄金の遺物のメインテーマの演奏から始まりました!!明るい曲調も相まってテンション上がりましたね。ペンライトの光が揺れているのをスタンド席から眺めながらライブを観ることができたのが良かった〜。めちゃくちゃ綺麗</p><p>その後も好きな曲がたくさん流れていきました！</p><p>アルカディア、ライトヘビー級２層４層の曲が演奏してくれるとは思ってなかったので、めちゃ嬉しかった～。ハニーBのコール＆レスポンスも楽しかった！全体が一体となって動いてる感じがたまりません。</p><h1 id="hb1104e9d34">吉P</h1><p>僕は当日北側のスタンドにいて、吉Pのちょうど真反対側あたりに座っていたのですが、吉Pのshoutはちゃーんと聞こえました。すごい声量!!次回もマイクいらないね!!</p><h1 id="h6c9a17f417">ナンジョルノさん</h1><p>ナンジョルノさんこと、南條愛乃さん、ゲスト出演するとは聞いてましたが、素敵な歌と衣装と共に登場されました。とても可愛らしい方で、MCがとても素敵でした。階段は危ない。２年ほど前、僕はおじいちゃん家の階段で食器運んでる時にずっこけたことあるからよくわかるぜ。(；・∀・)</p><p>ツクヨミちゃんのとこの下りも良かった！ヒカセン達の団結感すごかったねい！</p><h1 id="h73c1c6bf95">Endwalker</h1><p>ライブも後半、新生、蒼天、紅蓮、漆黒、暁月、黄金とストーリーの様々な演奏が行われた後に、ヒカセンの皆が応募した映像と共に、Endwalkerの演奏が始まりました。ここまでの演奏とエオルゼアのヒカセン達の映像も相まって新生からの冒険の日々を思い出して、涙腺やばかった。</p><p>ホントにff14やってて良かった(´；ω；｀)</p><h1 id="h94b45845b3">時間停止ギミック</h1><p>噂には聞いてた、プライマルズの時間停止ギミック……処理できるか心配でしたが、無事床ペロせずに乗り越えました!!</p><p>スタンド席から観る時間停止は壮観でした。綺麗すぎー！よく訓練されたヒカセン達であった。</p><h1 id="hd659718dad">ライブ後</h1><p>ライブ後は腕ふったり、叫んだりでヘトヘトでした。フレさんとフレさんのフレさんと合流して、午後5時くらいから、9時あたりまでお酒飲んでました〜。喋った内容９割くらいff14の話だった！こんなに、ff14の話ができるんだ!って驚きつつ幸せな時間でした〜。</p><p>人生初オフ会でもあって、すごく楽しかった!!ここでも、奢ってもらったのだった……。ごちそう様です!!</p><h1 id="h3bcda3e6b0">最後に</h1><p>ここまで読んでくれてありがとう!!</p><p>今回は、プライマルズのライブの感想を書いていったよ。</p><p>終始最高のライブだった〜!!オフ会も楽しかったし……</p><p>実は始まる前までは席が遠くて楽しめなかったらどうしよう……とか心配してたんですがそんなこと全く無かった!!</p><p>行ってよかった〜！これからもff14プレイしていきたいぜ!!</p><p>またに！</p><p>家エエエーーー!!!!!</p>

The Primalsのライブが最高だったお話

<h1 id="h604b8042b8">検索機能</h1><p>画面上部にスマホ、PC・タブレットにて検索機能を追加しました～。以下の様な感じです。</p><p>スマホ版</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/d39e8f9a46794b93957eb915874ddf6b/UmiSiozaki%E6%A4%9C%E7%B4%A2%E3%82%B9%E3%83%9E%E3%83%9B_1.png" alt="" width="406" height="347"></figure><p>画面上部の虫眼鏡をクリックすると、検索窓が出てくる。</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/8610e256fbd548e494dc63eab2f5f552/UmiSiozaki%E6%A4%9C%E7%B4%A2%E3%82%B9%E3%83%9E%E3%83%9B_2.png" alt="" width="393" height="336"></figure><p>PC・タブレット版は画面右上に最初から表示されてます。</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/e683e0ad015143a580fc88b7da8b8ba6/UmiSiozaki%E6%A4%9C%E7%B4%A2PC.png" alt="" width="834" height="255"></figure><p>こちらで検索したいブログもしくは制作物に関する検索キーワードを入力するとそれに関する記事が以下のように出力されます。試しに「ゲーム」で検索してみましょう。</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/78d5a8eb593e4ca6a7760c070a6acc8e/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C.png" alt="" width="1239" height="1174"></figure><p>このように該当記事が出力されます！色々試してみてね！</p><h1 id="h514a859437">ヘッダーの編集</h1><p>検索機能実装に伴い、サイト上部に表示されてるヘッダーを編集する必要が出てきました！</p><h2 id="hc4a080c6ba">ヘッダーとは？</h2><p>ヘッダーとはWebサイトの上部に色々表示されてる情報のことです。当サイトだと写真の赤い部分で囲まれてる部分です。</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/37e316d264a84de7af459e6240f67413/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC.png" alt="" width="615" height="311"></figure><p>上部の写真はPC・タブレット版のものになるのですが、スマホ版もこのままだと大変窮屈になるので、今までは右上の３本線のボタン(ハンバーガーメニュー)をクリックするとヘッダーから下にスライドする形でヘッダー情報が出ていましたが、それだと検索窓の挙動と被って、使いづらいなと感じたため変更することにしました。</p><h2 id="h3a3f81c17a">ヘッダー情報をスライドして出す</h2><p>スマホ版のヘッダー情報を左からスライドする形で出力するようにしました！また、現在いるページを青色でわかりやすくしています。ポチポチ押してみてね！</p><figure><img src="https://images.microcms-assets.io/assets/3c492ec74c0f464fa64f88fdeab3eade/7b9b1f1d030147d0853e16589827511f/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E6%83%85%E5%A0%B1.png" alt="" width="396" height="346"></figure><h1 id="hd3a9ac7d67">実装に当たっての備忘録</h1><p>ここからは、実装に当たって調べたことや気づいたこと等の備忘録を書いてきます！僕自身のために書くメモのような内容になります！</p><h2 id="hb75d76aa3e">画面遷移はrouter.push</h2><p>next.jsにおいて、input要素が入力完了した等のイベント処理の際は、Linkタグによる画面遷移ができないので、代わりにrouter.pushを使います。また、router.pushを用いることによって遷移先にクエリパラメータを簡単に渡すことができます。</p><p><a href="https://qiita.com/syu_ikeda/items/52fbe7480b2b9a54db0c" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>を参考にしました！<br></p><h2 id="h2f63f07359">検索機能はmicroCMSさんのqパラメータとServerless Functions</h2><p>microCMSさんの<a href="https://blog.microcms.io/serverless-functions-search/" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>をベースに全文検索機能を実装しました。</p><h2 id="h658dc40ee8">ユーザー側からの呼び出し時にはSWR×LocalStorageを使用　</h2><p>SWRについては、<a href="https://qiita.com/hakshu/items/3f2810bfff751b38c612" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>から引用します。</p><blockquote><p>SWR とは Next.js でおなじみの Vercel 社が提供しているデータ取得のためのライブラリです。<br>(出典元：Qiita <a href="https://qiita.com/hakshu"><strong>@hakshu</strong></a><strong> SWRを使いたいんじゃ!!</strong>)</p></blockquote><p>Api呼び出し時等のキャッシュ管理やレンダリングを高速化する処理を簡単に記述できるみたい？まだまだ理解できてない部分がありますが、使いながら色々勉強していこうと思います。</p><h2 id="h3c67c94ea4">ハンバーガーメニュー実装にはreact-burger-menuを使用</h2><p>ハンバーガーメニューを簡単に実装する方法が無いか調べたところ、<a href="https://github.com/negomi/react-burger-menu?tab=readme-ov-file" target="_blank" rel="noopener noreferrer nofollow">react-burger-menu</a>というライブラリを使用するといいとあり使用してみたところうまくいきましたので、こちらを使用して実装いたしました。(参考記事：<a href="https://qiita.com/hide8800kasu/items/80587455bf3cd9b0a0c3" target="_blank" rel="noopener noreferrer nofollow">react-burger-menu is 何</a>)</p><p>デフォルトのアイコンだと使い勝手が悪かったので、以下のようにしてデフォルトのアイコンを無効化しました。</p><p><code>&lt;Menu customBurgerIcon={ false } /&gt;</code></p><p>そして、外部からメニューの開閉をできるようにしたのち、headerタグの直前にメニューを配置して、自分で置いたハンバーガーメニューの開閉状態とuseStateを用いて同期して実装しました。</p><h2 id="h3019783234">Tailwind CSSのレスポンシブデザイン</h2><p>Tailwind CSSにてレスポンシブデザインを組むに当たって重要な概念が以下の３つでした。</p><ul><li>画面サイズが~pxi以上のメディアクエリを簡単に適用するためのブレイクポイント(<a href="https://tailwindcss.com/docs/responsive-design" target="_blank" rel="noopener noreferrer nofollow">Tailwind CSS公式</a>)</li><li>~px以下のときのデザインを適用する。(<a href="https://toach.biz/blog/responsive-design-with-tailwindcss/#:~:text=%E3%81%8D%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82-,%E7%AF%84%E5%9B%B2%E3%82%92%E7%B5%9E%E3%82%8B%E4%BF%AE%E9%A3%BE%E5%AD%90,-%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF" target="_blank" rel="noopener noreferrer nofollow">Tailwind CSSでレスポンシブデザインを組むには</a>)</li><li>グリッドレイアウト(<a href="https://tailwindcss.com/docs/grid-column" target="_blank" rel="noopener noreferrer nofollow">Tailwind CSS 公式</a>)</li></ul><p>最後のグリッドレイアウトに関しては、こちらとブレイクポイントをうまく利用すると、画面幅によってコンテンツを表示する個数を簡単に制御できます。例えばスマホならブログ記事を横並びに２つ、PCなら横並びに４つなど。</p><h1 id="h7dabb5418b">今後の展望</h1><p>次に実装してみたい機能として、画面を上にスライドしたらすっとヘッダーが出てくるようにしてみたいなと考えています。それより前にトップに戻るボタンのが先かなぁ・・・</p><h1 id="h3bcda3e6b0">最後に</h1><p>ここまで読んでくれてありがとうございます！それではまたね～～！</p><h1 id="h03e7af0d39">参考リンク</h1><ul><li><a href="https://qiita.com/syu_ikeda/items/52fbe7480b2b9a54db0c" target="_blank" rel="noopener noreferrer nofollow">Next.jsでクエリパラメータを遷移先に渡すにはどうすればいいのか？</a></li><li><a href="https://blog.microcms.io/serverless-functions-search/" target="_blank" rel="noopener noreferrer nofollow">Serverless Functions + microCMSで全文検索APIを作成する</a></li><li><a href="https://qiita.com/hakshu/items/3f2810bfff751b38c612" target="_blank" rel="noopener noreferrer nofollow">SWRを使いたいんじゃ!!</a></li><li><a href="https://qiita.com/hide8800kasu/items/80587455bf3cd9b0a0c3" target="_blank" rel="noopener noreferrer nofollow">react-burger-menu is 何</a></li><li><a href="https://toach.biz/blog/responsive-design-with-tailwindcss/#:~:text=%E3%81%8D%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82-,%E7%AF%84%E5%9B%B2%E3%82%92%E7%B5%9E%E3%82%8B%E4%BF%AE%E9%A3%BE%E5%AD%90,-%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF" target="_blank" rel="noopener noreferrer nofollow">Tailwind CSSでレスポンシブデザインを組むには</a></li></ul>

microCMSで全文検索機能を導入して、ヘッダーも変えてみたよ！

<h1 id="h63fc5539ef">UmiSiozaki</h1><p>UmiSiozakiとは、私が2023年6月からプレイしているFF14でのプレイヤー名です！</p><p>Meteor鯖Valeforにて遊んでいます！</p><p>始めたきっかけはなんとなくMMORPGをしたいなという極々平凡なもので、最初はフリートライアルにて開始しましたが、プレイし始めるとメインストーリーがとても素敵でハマってしまいました。<br>メインストーリーをひと通り終えた後、フリーカンパニーに所属して、楽しくエオルゼアライフを送っています。</p><h1 id="hdb71a72de8">当サイトについて</h1><p>当サイトでは、主にFF14に限らず他のゲームや日々の生活、開発日記、制作物等を掲載する予定です。</p><p>色々掲載したり書いたりしようと思うので、見てもらえると嬉しいです。<br>サイト自体も色々工夫して更新していこうと考えているのでサイト自体の感想もいただけると幸いです。</p><p>技術的な内容は<a href="https://www.umisiozaki.com/work/4fftnweuaig" target="_blank" rel="noopener noreferrer nofollow">こちらページ</a>に書いてあります！</p><h1 id="hcfad73aae7">お問い合わせ先</h1><p>私自身に対する、お問い合わせや連絡は現在XのDMにて行っています。下記のXのURLのDMからご連絡ください。</p><p><a href="https://x.com/SiozakiUmi" target="_blank" rel="noopener noreferrer nofollow">@SiozakiUmi</a></p><h1 id="ha214098e44">まとめ</h1><p>最後まで読んでいただきありがとうございます！これからよろしくお願いします！</p>

Umi Siozakiと当サイトについて

<h1 id="hed900658dc">環境</h1><p>まずは制作環境や採用したものを紹介していきます。<br>ベースとなっているのは、microCMSさんの<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">こちらのブログ(<strong>microCMS + Next.jsでJamstackブログを作ってみよう</strong>)</a>で紹介されているものになります。主に使用した環境は以下になります。</p><ul><li>Next.js</li><li>React</li><li>microCMS(ブログ作成部分)</li><li>Vercel(デプロイ先)</li><li>Github</li><li><a href="https://preline.co/" target="_blank" rel="noopener noreferrer nofollow">Preline UI</a>(Tailwind CSS)</li><li><a href="https://daisyui.com/" target="_blank" rel="noopener noreferrer nofollow">daisy ui</a>(Taillwind CSS)</li></ul><h1 id="h738688b202">制作に至った理由</h1><p>当サイトを制作するに至った理由は主に２つあります。</p><ol><li>Next.jsの勉強をしたかった。</li><li>個人サイトが欲しかった。</li></ol><p>以上の2つになります。</p><h2 id="hfffbb11b7f">Next.jsの勉強をしたかった</h2><p>僕はNode.js×expressを今年(2024年)の4月からふれていて、いくつかアプリケーションを作成していたのですがNext.jsとReact等の存在を７月頃に知りまして、そこからNext.jsを使った物を制作したいと考えていました。そんな中で、８月下旬からNext.jsの勉強をこちらの本(<a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a>)を読みながら開始しました。</p><p>中頃まで読んだあたりで実際のアプリケーション開発に入っていくのですが、お恥ずかしい話そこまでの内容をあまり理解できてないと感じたので、なにかもっとお手軽に始められて実際に使っていきたいサンプルのようなものは無いかなと探していたところ、9月の頭にシンさんの<a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">こちらの動画</a>と先ほど紹介した<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">microCMSさんの記事</a>を見つけました。ここで初めてmicroCMSさんのことを知りました。こちらのチュートリアルであれば、２,３の希望も満たせることに気づき、制作にするに至りました。</p><h2 id="hd37d038844">個人サイトが欲しかった</h2><p>以前から個人サイトは欲しかったのですが、自分の持ってる知識だと、記事の作成更新等の機能を自分で実装しようとすると、かなりの時間と労力がかかってしまうことが容易に想像できてしまいました。例えば、データベースの設定や僕だけがログインできるページを作成してそこでページを作成する等・・・。</p><p>そんな中で見つけたのが<a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">シンさんの動画</a>と<a href="https://blog.microcms.io/microcms-next-jamstack-blog/">microCMSさんの記事</a>になります。こちらであれば記事の制作の管理はmicroCMSの方でとても簡単にできる！と思い使うことにしました。またVercelであれば簡単にデプロイできるのでこちらを使用することにしました。</p><h1 id="hbac9c46500">制作時に困ったことの備忘録</h1><p>ここからは、制作段階で困ったこととその対処法を書いていきます。</p><h2 id="h584bac3b4a">microCMSの全件取得</h2><p>microCMSでは、１度のリクエストでデフォルトでは、10件のみしかコンテンツを取得しません。そこで、<a href="https://document.microcms.io/content-api/get-list-contents" target="_blank" rel="noopener noreferrer nofollow">microCMSのAPIドキュメント</a>を除いてみるとクエリーにlimitを設定できて最大100件まで取得できますが前件取得はできません。そのため、代わりにmicroCMSさんが用意してくれている<a href="https://help.microcms.io/ja/knowledge/fetch-big-data#:~:text=%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,getAllContents(),-%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%85%A8" target="_blank" rel="noopener noreferrer nofollow">getAllContents</a>を使用します。これで全件取得が可能になりました。</p><h2 id="h10aea7c5f0">目次機能</h2><p>microCMSを利用して目次機能を生成する方法はmicroCMS公式ブログに記載されています。<a href="https://blog.microcms.io/next-microcms-toc/" target="_blank" rel="noopener noreferrer nofollow">Next.js で目次機能を実装してみよう</a>と<a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer nofollow">microCMSで目次を作成する</a>を見て実装いたしました～！見た目部分は<a href="https://pote-chil.com/css-stock/ja/toc" target="_blank" rel="noopener noreferrer nofollow">こちらのサイト</a>のデザインを採用いたしました。</p><h2 id="hc0c4b84159">next-sitemapを使用したサイトマップ生成</h2><p>先に結論を書きますと、こちらのサイト(<a href="https://dev-harry-next.com/seo/nextjs-ssr-sitemap" target="_blank" rel="noopener noreferrer nofollow">Next.jsのSSRを使って動的にサイトマップを生成する</a>)を見て実装しました。</p><p>SEO対策のひとつである、サイトマップを簡単に実装できるnext-sitemapですが、SSGでの実装だとoutput modeを&quot;export&quot;にしなければならなくて、Next,jsのImageタグと相性が悪くSSRでの実装になりました。(この結論に至るまでが長かった...)私が購入した本(<a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a>)にもSSRでの実装をしていたので、これでいいはず！</p><h2 id="hdb3d9b6b3a">Faviconの設定</h2><p>Next.jsだとどのようにファビコンを実装するのだろう？と疑問に思いましたが以下の記事を見て実装しました！<br><a href="https://qiita.com/mrskiro/items/cd9aca1ae735ad678355" target="_blank" rel="noopener noreferrer nofollow">Next.jsでFaviconを設定する</a></p><h2 id="h53d94843e8">OGP生成</h2><p>サイトのリンクをSNS等に貼り付けるとそのサイトのサムネイルが表示されると思います。その画像の生成方法と注意点をメモしておきます。</p><ul><li>サイズは1200 × 630が理想</li><li>画像生成にはcanvas APIを使用</li><li>Googleフォントを使う際にはインストールボタンを押す。</li></ul><p>まず画像のサイズは1200 × 630が理想です。</p><p>次にOGP画像の生成にはCanvasAPIを使用いたしました。(<a href="https://ji23-dev.com/blogs/nextjs-ogp" target="_blank" rel="noopener noreferrer nofollow">参考記事</a>)</p><p>最後に、OGP画像生成時にフォントを指定するのですが、Googleフォントをインストールして使うには、zipファイルをインストールした後に使用したいフォントの.ttfファイルを開いてインストールボタンを押す必要があります。(<a href="https://rakumo.com/gsuite/gws-hint/google-fonts/fonts-how-to-use/#Google_%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9:~:text=specimen/Rampart%2BOne-,Google%20%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9,-%E3%81%93%E3%81%93%E3%81%A7%E3%81%AF%E3%80%81%20PC" target="_blank" rel="noopener noreferrer nofollow">参考記事</a>)</p><h1 id="h7dabb5418b">今後の展望</h1><p>これから実装したい機能として検索機能です。現在はブログの数も少ないですが、ゆくゆくは増やしていきたい！ので検索機能をこれから実装したいと考えています。</p><h1 id="h3bcda3e6b0">最後に</h1><p>ここまで読んでいただきありがとうございます！！これから色々作っていこうと思いますのでよろしくおねがいします！ヒカセンの皆様はゲームでも仲良くしてくれると嬉しいな！ではでは、またね～</p><h1 id="hcdf5804e4b">参考リンク集</h1><ul><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer nofollow">microCMS + Next.jsでJamstackブログを作ってみよう</a></li><li><a href="https://amzn.asia/d/bwsRhrS" target="_blank" rel="noopener noreferrer nofollow">TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発</a></li><li><a href="https://www.youtube.com/watch?v=dNpONz4Yi04" target="_blank" rel="noopener noreferrer nofollow">シンさんの動画</a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/">microCMSさんの記事</a></li><li><a href="https://document.microcms.io/content-api/get-list-contents" target="_blank" rel="noopener noreferrer nofollow">microCMSのAPIドキュメント</a></li><li><a href="https://help.microcms.io/ja/knowledge/fetch-big-data#:~:text=%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,getAllContents(),-%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E5%85%A8" target="_blank" rel="noopener noreferrer nofollow">getAllContents</a></li><li><a href="https://blog.microcms.io/next-microcms-toc/" target="_blank" rel="noopener noreferrer nofollow">Next.js で目次機能を実装してみよう</a></li><li><a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer nofollow">microCMSで目次を作成する</a></li><li><a href="https://pote-chil.com/css-stock/ja/toc" target="_blank" rel="noopener noreferrer nofollow">HTML・CSSでつくるおしゃれな目次のデザイン3選</a></li><li><a href="https://dev-harry-next.com/seo/nextjs-ssr-sitemap" target="_blank" rel="noopener noreferrer nofollow">Next.jsのSSRを使って動的にサイトマップを生成する</a></li><li><a href="https://qiita.com/mrskiro/items/cd9aca1ae735ad678355" target="_blank" rel="noopener noreferrer nofollow">Next.jsでFaviconを設定する</a></li><li><a href="https://ji23-dev.com/blogs/nextjs-ogp" target="_blank" rel="noopener noreferrer nofollow">Next.js × Vercel】OGP画像を動的生成してみた</a></li><li><a href="https://rakumo.com/gsuite/gws-hint/google-fonts/fonts-how-to-use/#Google_%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9:~:text=specimen/Rampart%2BOne-,Google%20%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9,-%E3%81%93%E3%81%93%E3%81%A7%E3%81%AF%E3%80%81%20PC" target="_blank" rel="noopener noreferrer nofollow">Google フォント の使い方</a></li></ul>

RecentBlog

The Primalsのライブが最高だったお話

microCMSで全文検索機能を導入して、ヘッダーも変えてみたよ！

Umi Siozakiと当サイトについて

Works

UmiSiozaki.com

About