<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>

Blog

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

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

Umi Siozakiと当サイトについて