HarioNote

<p>AWSアカウントを作成したので、フルアクセス可能な<code>AdministratorAccess</code>権限の作業用のアカウント(ワークフォースユーザー)を<code>IAM Identity Center</code>で作成してログインしたら、請求ダッシュボードだけ見られないという状態に出くわして、何か設定が必要なんだっけ？？と気づくのに時間がかかったので次回もハマらないように備忘録として書いておきます。</p>
<p><img src="https://storage.googleapis.com/newt-files/846c1480-b039-4f11-98e4-8047908df12b/kjbjkbjn.webp" alt="kjbjkbjn.webp"></p>
<h2>先に結論だけ</h2>
<ul>
<li>ルートユーザーで<code>Billing &gt; アカウント</code>にて、<code>IAM ユーザーおよびロールによる請求情報へのアクセス</code>を許可してなかった</li>
</ul>
<p>それだけでした。<br>
<img src="https://storage.googleapis.com/newt-files/ef71ca82-4be9-44e6-8664-50cd95807fe2/faweawad.webp" alt="faweawad.webp"></p>
<h2>手順</h2>
<ol>
<li>
<p>ルートユーザーでログイン<br>
AWSマネジメントコンソールにルートユーザーでログインします。<br>
（ルートユーザー：AWSアカウントを最初に作った際に作られたユーザー）</p>
</li>
<li>
<p>右上の[AWSアカウント名]のプルダウンから<code>アカウント</code>を選択<br>
<img src="https://storage.googleapis.com/newt-files/17df9516-4bfe-4957-86ee-dc5ec5416fb0/gfgjkhkuh.webp" alt="gfgjkhkuh.webp"><br>
<img src="https://storage.googleapis.com/newt-files/ffed3084-92e3-4062-b1b4-e2ff5c22c100/uihjn.webp" alt="uihjn.webp"></p>
</li>
<li>
<p><code>IAM ユーザーおよびロールによる請求情報へのアクセス</code>の欄の「編集」をクリック<br>
※下の方にスクロールしていくとあります。<br>
<img src="https://storage.googleapis.com/newt-files/ef71ca82-4be9-44e6-8664-50cd95807fe2/faweawad.webp" alt="faweawad.webp"></p>
</li>
<li>
<p><code>IAM アクセスをアクティブ化</code>にチェックを入れて<code>更新</code>をクリック<br>
<img src="https://storage.googleapis.com/newt-files/9c3d352b-b8df-43a9-8176-ed3eacc6311b/ghvbkh.webp" alt="ghvbkh.webp"></p>
</li>
</ol>
<p>以上です。</p>
<p>私の場合はこれで作成したユーザーで請求ダッシュボードが確認できるようになりました。</p>


IAM Identity CenterでAdministratorAccess権限のユーザーを作成したのに請求ダッシュボードが閲覧できないときに確認すること【AWS / IAM Identity Center】

<p>今やiPhoneやMac OSなどで有名なAppleが、Macintoshと呼ばれていたPCを販売している時代がありまして…<br>
ふと子供の頃にそのMacintoshで遊んだゲームのいくつかを思い出して、「あー、あのゲームなんて名前だったっけな」とタイトルを探したくなりました。（あわよくばYouTubeとかでプレイしていればプレイ動画もみないなーなんて思ったりして。）</p>
<p>しかし、当時子供だったこともあり、ゲーム名が英語だったりすると読めなかったため、記憶の中にはタイトルに関するヒントはほぼありませんでした。</p>
<p>それでもなんとかいろんな手を使って調べたところ、記憶にあった懐かしのレトロゲームのタイトルを見つけ出すことができましたので紹介したいと思います！</p>
<p>（ちなみに多分ですがMacintoshに標準で搭載されていたというわけではないとは思います）</p>
<h2>Macintoshでやった懐かしのレトロゲームたち</h2>
<h3>Bonkheads</h3>
<p><img src="https://storage.googleapis.com/newt-files/fc15a425-bcbd-40c4-a08a-e7eb70cef575/bonkheads.webp" alt="bonkheads.webp"><br>
これはほんとに楽しかったです。<br>
今やっても楽しいと思います。<br>
2人プレイまで可能でステージにある足場ブロックを下からジャンプで叩くことができ、敵が上にいるときにそれをすることでひっくり返せます。ひっくり返った状態で触れると倒すことができます。<br>
ひっくり返っている状態は一定時間経つと復活し、復活状態で触れるとこちらが死んでしまいます。</p>
<p>ステージを進めていくと敵の種類も増えていきかなり楽しめました！</p>
<p><code>Macintosh Repository</code>という古いMacintoshコンピューター向けのソフトウェアやゲームをアーカイブしているサイトにもページがありました。（ページは<a href="https://www.macintoshrepository.org/32035-bonkheads">こちら</a>）</p>
<p>YouTubeでも検索するとプレイ動画がヒットしました。</p>
<h3>Oxyd</h3>
<p><img src="https://storage.googleapis.com/newt-files/9d3cf6ca-9012-4531-bf6f-1c02cac54b2e/oxyd.webp" alt="oxyd.webp"></p>
<p>これもハマってました。<br>
マウスで画像にある黒い球を操作してステージをクリアしていきます。<br>
特に説明はなくともなんとなく何をすればクリアなのかやってみればわかるようになっているのが今思えばほんとうにすごいと思います。</p>
<p>Macintosh Repositoryで<code>oxyd</code>で検索するといくつかヒットするので何種類かシリーズがありようですね。（検索結果ページは<a href="https://www.macintoshrepository.org/software_search.php?s=Oxyd&amp;sid=&amp;p=1">こちら</a>）<br>
<code>Oxyd</code>とか<code>Oxyd Extra</code>とか<code>Per Oxyd</code>とか<code>Oxyd Magnum</code>とか、Oxyd Magnum以外は全部やったことがあるような気がします笑</p>
<h3>Bill the Demon</h3>
<p><img src="https://storage.googleapis.com/newt-files/2ca497c0-e174-4bfc-9f30-db0fd74af171/bill-the-demon.webp" alt="bill-the-demon.webp"></p>
<p>これもよく覚えています。<br>
私のセンスがなく、クリアはできてなかった気がします。<br>
BGMとかSEが怖い感じでしたが、今なら結構楽しめそうな気がします笑<br>
キャラデザも味があっていいですよね。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/5900-bill-the-demon">こちら</a></p>
<h3>Frog Xing</h3>
<p><img src="https://storage.googleapis.com/newt-files/68a0366c-f711-4d57-bc96-6fea89a033ff/frog-xing.webp" alt="frog-xing.webp"></p>
<p>これはなぜか定期的にやっていた気がします。<br>
カエルを操作して向こう岸に渡るというシンプルなゲームです。<br>
操作もかなりシンプルだった記憶があります。<br>
今見るとグラフィックがレトロ感あっていいですね～。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/5712-frog-xing">こちら</a></p>
<h3>Burning Rubber</h3>
<p><img src="https://storage.googleapis.com/newt-files/543316c8-a742-4eee-a5c5-d2e45ab34468/burning-rubber.webp" alt="burning-rubber.webp"></p>
<p>これは記憶はすごくあるのですが、何をすればクリアなのかは覚えていないです。<br>
レーシングゲームっぽいのですが、レースと言うより障害物を避けたり轢いたりしながら車でとにかく走るゲームという記憶があります笑<br>
ただ爽快感はすごくあって子供の頃は夢中になってました。<br>
スピードを出すと車の操作が難しくなり中毒性がありました。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/5420-burning-rubber">こちら</a></p>
<h3>Thinkin' Things Collection 1</h3>
<p><img src="https://storage.googleapis.com/newt-files/78ee2e20-3784-4fcd-aadf-d033764c42de/thinkin-things-collection-1.webp" alt="thinkin-things-collection-1.webp"></p>
<p>これは記憶にある方ももしかしたらいらっしゃるのではないでしょうか？<br>
（探しているときにYahoo知恵袋とかにも載ってたりしました）<br>
知育ゲームっぽいゲームがいくつかセットになったパッケージっぽい感じでしょうか？<br>
それぞれ鮮明に記憶に残っておりとても懐かしく感じます。<br>
意外と今どきの子供でも楽しめそう？</p>
<p>バージョン2とか3とかもあるようで、そちらはやったことないのでやってみたいですね。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/4959-thinkin-things-collection-1">こちら</a></p>
<h3>NS-Tower</h3>
<p><img src="https://storage.googleapis.com/newt-files/1050be70-38b2-4a4d-a502-f8189c4fffa6/ns-tower.webp" alt="ns-tower.webp"></p>
<p>これは正直私はうまくできなくてハマりはしなかったです。<br>
ただハマる人がやったらすごい記録が作れそう。<br>
シンプルにジャンプでどんどん上に上がっていくゲームです（たしか）。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/4547-ns-tower">こちら</a></p>
<h3>Pac the Man</h3>
<p><img src="https://storage.googleapis.com/newt-files/6fbdc9e1-43f9-45f3-b6d9-abbdf93f360c/pac-the-mac.webp" alt="pac-the-mac.webp"></p>
<p>これは画像みればどんなゲームかわかるやつですね笑<br>
パックマンです。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/6157-pac-the-man">こちら</a></p>
<h3>Just Grandma and Me（おばあちゃんとぼくと）</h3>
<p><img src="https://storage.googleapis.com/newt-files/2521e618-a8b0-40cc-998d-a72d1e9fabd8/just-grandma-and-me.webp" alt="just-grandma-and-me.webp"></p>
<p>これもすっごく記憶に残ってて懐かしく感じます。<br>
ゲームというより絵本なのですが、ページを進めるとストーリーを読み上げてくれて、各ページの絵の中にはクリックできるものがたくさんあって、クリックすると何かが起こったりします。<br>
隠し要素を探しているようなワクワクがあり、何度かクリックすると、確率で発生する内容が変化したりして夢中になった記憶があります。<br>
（これ今の時代でも十分通用するというか、むしろ今どきにこそあっていいのではないかと思うくらいクオリティがすばらしかったです）</p>
<p>英語版や日本語版があるようで、私がやっていたのは日本語版でした。日本語版のタイトルが「おばあちゃんとぼくと」ですね。</p>
<p>Macintosh Repositoryのページは<a href="https://www.macintoshrepository.org/4404-just-grandma-and-me">こちら</a></p>
<h2>感想</h2>
<p>探すのは大変でしたが、どれも夢中で当時遊んでいたため見つけることができてちょっと感動しました笑</p>
<p>以上！</p>


昔Macintosh(Mac)のPCで遊んでいたレトロゲームを思い出して懐かしくなったのでタイトルを探してみた

<p>画像をWebサイトで使いたいけどpngだからwebpに変換しなきゃなー、といったときにpaint.netがあればサクッと簡単にできるのでその紹介です。<br>
単純に変換するだけでなく、画像の縦横(width,height)のサイズを小さくしたり、縦横サイズはそのままでデータサイズだけ落としたいなというときにも便利なのでそちらも一緒に活用することもオススメします。</p>
<h2>紹介する内容</h2>
<ul>
<li>paint.netのインストール方法</li>
<li>PNGやJPEGからWebPへの変換方法</li>
<li>画像の縦横サイズの変更方法</li>
<li>画像のデータサイズの変更方法(webp)</li>
</ul>
<h2>paint.net</h2>
<p>paint.netはWindowsにインストールすることができます。<br>
<a href="https://www.getpaint.net/download.html">公式サイトのDownloadのページ</a>からdotPDNの<code>Download Now</code>のところをクリックし、その先のページにあるダウンロードリンクから無料でダウンロードすることができます。</p>
<p><img src="https://storage.googleapis.com/newt-files/265c19a5-8e67-4fb1-95c9-5bd23f1ad323/wefawfa.webp" alt="wefawfa.webp"></p>
<p><img src="https://storage.googleapis.com/newt-files/91b2f362-7745-43f0-8679-9be32f430499/feawfawe.webp" alt="feawfawe.webp"></p>
<p>ちなみに上にMicrosoft StoreのリンクもあることからわかるようにMicrosoft Storeからの入手も可能ですがこちらは有料版になります。<br>
何かしらサポート等が必要な場合はこちらから購入しましょう。</p>
<p>窓の杜にも<a href="https://forest.watch.impress.co.jp/library/software/paintdotnet/">paint.netのページ</a>があるようなのでそこからダウンロードも可能です。<br>
窓の杜にも無料版とストアから購入するためのリンクの2種類の記載があります。</p>
<h2>PNGやJPEGからwebpに変換する</h2>
<p>これはほんとに簡単です。<br>
paint.netで画像を開いて、「名前をつけて保存」で拡張子を<code>WebP (*.webp)</code>を選択するだけです。</p>
<p><img src="https://storage.googleapis.com/newt-files/a1db28f1-aa96-4b71-b168-0b645b91eebb/agwpoijdfe.webp" alt="agwpoijdfe.webp"></p>
<p><img src="https://storage.googleapis.com/newt-files/60a4988c-b305-494a-9477-afedc885b616/awefawec.webp" alt="awefawec.webp"></p>
<h2>画像のサイズ(width, height)を変更する</h2>
<p>メニューの<code>画像</code> &gt; <code>画像サイズを変更</code> を選択します。</p>
<p><img src="https://storage.googleapis.com/newt-files/f1990eae-08b7-46af-b359-e53794cb04f2/aewfaewg.webp" alt="aewfaewg.webp"></p>
<p>画像サイズを変更ウィンドウが表示されるのでそこで「幅」と「高さ」を変更します。<br>
<code>縦横比を固定</code>にチェックを入れておけば「幅」か「高さ」の値を変更すると、自動でもう一方も自動で変更されます。</p>
<p><img src="https://storage.googleapis.com/newt-files/d698d14e-0b00-4f78-b22f-3b388a6dd785/sargsare.webp" alt="sargsare.webp"></p>
<p>変更したら保存すれば完了です。</p>
<h2>画像のデータサイズを変更(小さく)する（webp）</h2>
<p>webpにするならついでに画像のデータサイズをさらに小さくすることもできます。<br>
(pngからwebpにしている時点でデータ容量はかなり小さくなっていますがそこから更に落としたい場合に有用です。)</p>
<p>これも簡単で、開いている画像を「名前を付けて保存」する際にwebp形式を選択して保存をクリックした後に表示される<code>ファイルタイプ用設定</code>のウィンドウで、<code>品質</code>の数値を下げるだけです。</p>
<p><img src="https://storage.googleapis.com/newt-files/28e19fc4-b5b9-40a0-a395-80a2c2db7c63/eafwefaer.webp" alt="eafwefaer.webp"></p>
<p>プレビューで画質が見た目的に変化したかも確認できますし、ファイルサイズも表示してくれるのでどのくらいのサイズで保存できるのかも確認できてとても助かります。</p>
<p><img src="https://storage.googleapis.com/newt-files/5ccea433-96f5-498f-b9e2-29b2ede698be/awefawefaef.webp" alt="awefawefaef.webp"></p>
<p>（↑試しに品質を50にしましたがほぼ変わらないくらい綺麗ですね）</p>
<p>ちなみに今回の例では</p>
<ul>
<li>PNGからWebP(品質100)で「8.05MBから998 KBに削減」</li>
<li>さらに品質100から50で「998KBから155.5KBに削減」</li>
</ul>
<p>つまり8.05MBから155.5KBに削減できました。（webpすごい）</p>
<br />
以上です！


PNGやJPEGをサクッとwebpに変換したり、サイズ変更(縦横orデータサイズ)にはpaint.netが便利で簡単【paint.net / Windows】

<p>Microsoft 365 Business StandardからMicrosoft 365 Apps for businessに乗り換えようと思い、Business Standardの方を解約をすることにしたので、その手順の備忘録です。</p>
<h2>手順</h2>
<p><a href="https://go.microsoft.com/fwlink/p/?linkid=842054">「Microsoft 365 管理センター」 &gt; 「お使いの製品」のページ</a>にアクセスする。<br>
（ログインしていなければログインもする。）</p>
<p><img src="https://storage.googleapis.com/newt-files/f37aa5ab-90a5-4f06-9666-d6eea3994139/fawefaewfa.webp" alt="fawefaewfa.webp"></p>
<p><img src="https://storage.googleapis.com/newt-files/24d38974-c805-4d36-b21b-784f10b28a00/sdfgsreg.webp" alt="sdfgsreg.webp"></p>
<p>今回解約したい<code>Microsoft 365 Business Standard</code>を選択し（チェックし）、上の<code>サブスクリプションのキャンセル</code>をクリック。</p>
<p><img src="https://storage.googleapis.com/newt-files/8bcca987-35d0-417d-9c4a-c90d01ce610d/fawefawed.webp" alt="fawefawed.webp"></p>
<p><code>すぐにキャンセルする</code>か<code>次の更新日までにキャンセルする</code>のオプションを選択して<code>次へ</code>をクリック。</p>
<p><img src="https://storage.googleapis.com/newt-files/3cb1df78-f60e-403a-895e-1e017f0bec39/fsgresgg.webp" alt="fsgresgg.webp"></p>
<p>今回は<code>次の更新日までにキャンセルする</code>を選択します。</p>
<p>そうしましたら今度は<code>継続請求を編集する</code>という選択画面が表示されました。</p>
<p><img src="https://storage.googleapis.com/newt-files/c3aef0e9-cc87-4065-a9dc-d6b1e67428c2/faefawe.webp" alt="faefawe.webp"></p>
<p>これはさきほどのオプションで「次の更新日までにキャンセルする」を選択したときに出るっぽいですね。<br>
<code>オン</code>がデフォルトで選択されていましたが、このままだとサブスクが解除されないので、現在まで支払済の期間までは使用できて、以降はキャンセルでokなので<code>オフ</code>を選択して保存します。<br>
<br /></p>
<p>保存したら最初の<code>お使いの製品</code>のページに戻ってきました。</p>
<p>サブスク一覧で先程キャンセルの処理を行った<code>Microsoft 365 Business Standard</code>の行を確認してみると、<code>有効期限はxxxx/xx/xxです</code>となっているのでこれでキャンセルできてそうです。</p>
<p><img src="https://storage.googleapis.com/newt-files/1ce98c0c-068e-45f8-84ea-b0d867b2915b/grseyrs.webp" alt="grseyrs.webp"></p>
<br />
以上！


Microsoft 365 〇〇系のサブスクを解約する手順の備忘録【Microsoft 365 Business Standard】

<p>チームで開発してるけど自分のローカル環境で生成されるファイルがignoreされないなー、でも勝手に無視リスト更新する権限ないなーとか、そもそも自分の環境だけ特殊な事情があるんだよなー的なときに設定する方法の備忘録です。<br>
すでにリポジトリで追跡済みのファイルと未追跡のファイルそれぞれに対応する方法をまとめました。</p>
<h2>結論</h2>
<p><code>.git/info/excludeファイル</code>か<code>skip-worktree機能</code>を使えばok</p>
<hr>
<h2>.git/info/excludeファイル</h2>
<p>ポイント：</p>
<ul>
<li>未追跡ファイルのみに効く</li>
<li>直接編集するかechoで書き込めばok<br>
（メモ： <code>.git</code>フォルダをmacのFinderで表示するには「<code>command</code> + <code>Shift</code> + <code>.</code>」）</li>
</ul>
<pre><code class="language-bash">echo .npmrc &gt;&gt; .git/info/exclude
</code></pre>
<p>./git/info/excludeは↓のような感じ</p>
<pre><code class="language-bash"># git ls-files --others --exclude-from=.git/info/exclude
.npmrc
</code></pre>
<hr>
<h2>skip-worktree</h2>
<ul>
<li>追跡済みのファイルに対して無視したいときに有効</li>
<li>コマンドで設定するよ</li>
</ul>
<p>無視リストに追加</p>
<pre><code class="language-bash">git update-index --skip-worktree path/to/file
</code></pre>
<p>無視リストから削除</p>
<pre><code class="language-bash">git update-index --no-skip-worktree path/to/file
</code></pre>
<p>無視してるやつ確認</p>
<pre><code class="language-bash">git ls-files -v | grep ^S
</code></pre>
<p>以上です。</p>
<hr>
<h2>参考</h2>
<ul>
<li><a href="https://qiita.com/sqrtxx/items/38a506e59df67cd5d3a1">git の監視から逃れる方法</a></li>
</ul>


Gitでローカルでのみ特定のファイルを無視する設定をする。【未追跡ファイルと追跡済ファイルそれぞれに対応 / Git】

<p>Windowsの回復ドライブで回復しようとしたら「PCを回復できません。システムドライブが小さすぎます。」と言われて失敗し、なんとか再インストールまで漕ぎ着けたときの備忘録です。</p>
<h2>先に結論だけ</h2>
<ul>
<li><a href="https://support.microsoft.com/ja-jp/surface-recovery-image">Surface Recovery Image Download</a>で再インストールすることができた。</li>
<li>シリアルコード番号が必要</li>
</ul>
<h2>きっかけ</h2>
<p>だいぶ前に購入したが使わなくなっていたSurface Laptop GoにLinux系のOSをインストールしていろいろやっていたのですが、それも結局使わなくなっていたので、またWindowsに戻してテストとかに使いたいなーと思ったのがきっかけでした。</p>
<h2>前提</h2>
<p>以降の内容で記載した作業(データのダウンロードなど)はSurface Laptop Goとは別のPCで行っています。<br>
環境は以下の通りです。</p>
<ul>
<li>Surface Laptop Go （今回直したいやつ）</li>
<li>別のWindows PC</li>
</ul>
<h2>やったこと</h2>
<p>たまたま回復ドライブを作成していたので、これでWindows再インストールもできるのかな？と思い試して見たのですが、表題にもある通り「PCを回復できません。システムドライブが小さすぎます。」と言われてダメでした。<br>
<img src="https://storage.googleapis.com/newt-files/1ba146ca-61ac-49bc-87fe-a06962f6cb24/hljhlkhlhlhfds.webp" alt="hljhlkhlhlhfds.webp"></p>
<p>いろいろ調べた結果、<a href="https://support.microsoft.com/ja-jp/surface-recovery-image">Surface Recovery Image Download</a>から回復イメージをダウンロードし、それで回復ドライブを作成し、Windowsの再インストールする方法の記載があったため、これを試みることにしました。<br>
<img src="https://storage.googleapis.com/newt-files/06971df1-0fb6-4356-843e-398540837d7c/afwefawefaew.webp" alt="afwefawefaew.webp"></p>
<h3>Surface Recovery Imageを使った回復ドライブを作成する</h3>
<p>USBドライブが必要なので、16GB以上のUSBメモリを用意します。<br>
次にPC（Surface Laptop Go）のシリアル番号も必要とのことなので確認します。<br>
私の場合はUEFIの画面で確認しました。<br>
UEFIの起動方法は<code>音量アップキー</code>(Surface Laptop Goの場合はF4キーでもある)を押下したまま、電源ボタンを押し、UEFIが起動するまでそのまま音量アップキーを押し続けます。</p>
<p>起動したら<code>PC information</code> &gt; <code>Serial number</code> の項目で確認できます。<br>
<img src="https://storage.googleapis.com/newt-files/11bcae0e-dea9-4a27-8419-a7a6e560f5bf/fawefaegr.webp" alt="fawefaegr.webp"><br>
確認したらこれを控えておきます。</p>
<p>先程の<code>Surface Recovery Image Download</code>のページにて、<code>Product</code>で<code>Surface Laptop Go</code>を選択し、シリアル番号を入力します。<br>
<img src="https://storage.googleapis.com/newt-files/a05331ee-d48c-4116-9cb3-1c2381b89d81/aefawawega.webp" alt="aefawawega.webp"></p>
<p>すると、Surfaceの回復イメージのダウンロードページに行けるので、PCにダウンロードします。<br>
<code>Windows 10 Home in S Mode Version 22H2</code>の右にある<code>画像をダウンロード</code>がダウンロードのためのリンクです。<br>
（多分、「イメージ」→「image」→「画像」と翻訳されて「画像」と書かれているものと思われます。）<br>
<img src="https://storage.googleapis.com/newt-files/e6954ff5-5ed7-4d7e-b48d-e3659762c102/efawerafewrfaew.webp" alt="efawerafewrfaew.webp"></p>
<p>ダウンロードしたら次の「USB回復ドライブを作成する」の手順に従って回復ドライブを作成します。<br>
<img src="https://storage.googleapis.com/newt-files/c6383017-67cb-40c8-997b-0b061c449cc3/srtgdstt.webp" alt="srtgdstt.webp"></p>
<p>流れとしては一度Windowsの標準の機能で、普通に回復ドライブを作ってからダウンロードしたファイルで上書きするといった感じですね。<br>
（上書きしないと私の作業用PCの回復ドライブになってしまいますし、そもそもそれだと失敗するはずです。）</p>
<p>これでSurface Recovery Imageを使った回復ドライブ（USB）が作成できました。</p>
<h3>Surface Laptop GoでUSBから起動するようにして回復ドライブを起動する</h3>
<p>私は以前に失敗した回復ドライブでの試みの際に設定済みですが、備忘録としてSurface Laptop GoでUSBメモリからブートする方法を以下に示します。</p>
<p>まず、<code>音量アップキー</code>を押しっぱなしにしたまま電源を入れ、UEFIを起動します。<br>
左メニューの<code>Boot configuration</code>を選択し、<code>Configure boot device order</code>のところを確認します。<br>
<img src="https://storage.googleapis.com/newt-files/9552378d-ba21-4000-b94f-f21b22f984ed/afewfaewgare.webp" alt="afewfaewgare.webp"><br>
<code>USB Storage</code>が一番上に来るようにドラッグアンドドロップで移動します。<br>
<img src="https://storage.googleapis.com/newt-files/0e46ce33-7956-426f-9115-b474d560831d/awefawfaew.webp" alt="awefawfaew.webp"></p>
<p>そうしたら左メニューのExitでUEFIを終了してPCを普通に再起動します。</p>
<h3>起動した回復ドライブの指示に従いWindowsを再インストールする</h3>
<p>PCが起動すると言語の選択や、キーボードレイアウトの選択等の画面が表示されるので、日本語を選択し、Microsoft IMEを選択します。</p>
<p><code>オプションの選択</code>画面までたどり着いたら<code>ドライブから回復する</code>を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/afe34f91-8637-4ddd-a9eb-e8ebf4b13802/fawefaweg.webp" alt="fawefaweg.webp"></p>
<p>次の選択肢では私の場合完全に初期化して再インストールして欲しかったので、<code>ドライブを完全にクリーンアップする</code>を選択しました。<br>
<img src="https://storage.googleapis.com/newt-files/6242bd70-0281-40c6-a29e-dd3923217672/jgkghkjg.webp" alt="jgkghkjg.webp"></p>
<p>次の画面で<code>回復</code>を選択すると回復の処理が開始されます。<br>
<img src="https://storage.googleapis.com/newt-files/d78b5805-1d4a-4332-99bb-0bb4ac2b446f/drthdhst.webp" alt="drthdhst.webp"></p>
<p>これで私の場合、Windowsの再インストールに成功しました。（よかった）</p>
<h3>Sモードを解除する</h3>
<p>ここまでの手順で再インストールされたWindowsはSモードというモードになっているのでこれを解除します。（解除しないと標準以外のアプリをインストールできなかったりします）</p>
<p>解除方法は<a href="https://support.microsoft.com/ja-jp/windows/s-%E3%83%A2%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89%E5%88%87%E3%82%8A%E6%9B%BFwindows-4f56d9be-99ec-6983-119f-031bfb28a307#WindowsVersion=Windows_10">こちら</a>で公式から提示されているのでそれに従えばいいかと思います。</p>
<p>私もその手順に従い、Microsoft Storeを起動して指示に従いSモードを解除しました。</p>
<h3>おまけ：Windows11にアップデートする</h3>
<p>私の所有していたSurface Laptop GoはWindows10であったため、再インストール後もWindows10でしたが、Windows11に更新しようと思い、Windows11インストールアシスタンをネットからダウンロードし実行しましたが、「手順 3/3: インストール中」の99%から何時間立っても進まなくなってしまったので諦めようと思いました。<br>
<img src="https://storage.googleapis.com/newt-files/98000aa6-df80-46d9-b994-9baa90ef1238/yfutjhfg.webp" alt="yfutjhfg.webp"></p>
<p>しかし、ネットワークに繋いで何度かWindows10のシステムの更新を行っていたらWindows11への更新ができる旨のメッセージが表示されましたのでそこから指示に従って実行したらWindows11にアップデートできました。</p>
<p>これについては指示に従っただけなので特に手順等は示しませんが、スペックの高くないSurface Laptop Goでも普通にWindows11が動いているようでよかったです。</p>
<p>以上です！</p>


回復ドライブで「PCを回復できません。システムドライブが小さすぎます。」と言われ失敗したので、がんばって再インストールした。【Windows / Surface Laptop Go】

<h2>前置き</h2>
<p>※本記事ではNewtで作成したサイトをNetlifyにホスティングする手順や記事更新時の自動デプロイの方法については言及しません。<br>
公式のチュートリアルにわかりやすい手順の記載があります。</p>
<ul>
<li><a href="https://www.newt.so/docs/tutorials/connect-to-netlify">GitHubのリポジトリとNetlifyを接続して、ホスティングする</a></li>
<li><a href="https://www.newt.so/docs/tutorials/deploy-to-netlify-with-webhooks">コンテンツの更新時にNetlifyでデプロイを行う</a></li>
</ul>
<h2>背景</h2>
<p>そういえばGoogleのサーチコンソールにサイトマップがないよと言われていて対応するのを忘れており、自動生成できるようにして対応しなきゃと思いやったときの備忘録です。</p>
<p>当ブログはタイトルにもある通り、Newt(ヘッドレスCMS) + Next.js + Netlify(静的ホスティングサービス)で構成されています。<br>
記事を投稿するとWebhookによりNetlifyで自動的にビルドコマンドが走り、静的ビルドが行われ記事ページが生成されてサイトが最近状態に更新されます。</p>
<p>そのため以下で説明する方法は、静的ファイル生成で静的ホスティングサービスにホストしている場合に有効な方法となります。（nodeのサーバー上で動かしている人にとっては参考にならないかもですのでご注意ください。）</p>
<h2>やったこと</h2>
<p>Next.jsを使っているのであまり色々考えなくても使えそうな<a href="https://github.com/iamvishnusankar/next-sitemap">next-sitemap</a>を使うことにしました。</p>
<h3>1. <code> next-sitemap</code>をインストール</h3>
<p>バージョンは最新でいいと思います。</p>
<pre><code>npm install next-sitemap@4.2.3 --save-exact
</code></pre>
<h3>2. 公式のGetting startedに従い設定ファイルを作成</h3>
<p><a href="https://github.com/iamvishnusankar/next-sitemap#create-config-file">Create config file</a>に従い設定ファイルをサイトのリポジトリのルートに作成します。</p>
<pre><code class="language-json">// next-sitemap.config.json
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}
</code></pre>
<p>私は環境変数は特に設定していないですが.env...に関する記述はそのまま残してます。（特に意味はないです）</p>
<h3>2. npmスクリプトの編集</h3>
<p>next-sitemapの機能(サイトマップ生成)が利用できるようにpackage.jsonにスクリプトの定義を追加します。<br>
さらにビルド時のビルドコマンド実行時にもサイトマップ生成が行われるように元々あったbuildコマンドの定義も編集します。</p>
<p><strong>before</strong></p>
<pre><code class="language-json">  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build&quot;,
    ...
  },
</code></pre>
<p><strong>after</strong></p>
<pre><code class="language-json">  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build &amp;&amp; next-sitemap&quot;, //ビルド時に実行する用
    ...
    &quot;postbuild&quot;: &quot;next-sitemap&quot; //ローカルで動作確認する用
  },
</code></pre>
<p>やったことは以上になります。</p>
<p>ローカルで動作確認するときはターミナルで</p>
<pre><code>npm run postbuild
</code></pre>
<p>を実行すると<code>/public</code>下に<code>sitemap.xml</code>と<code>sitemap-0.xml</code>が生成されます。（記事数によってこの辺は若干変わると思います。）</p>
<p>あとは記事更新時にnetlifyでのビルド処理完了後にサイトマップが生成されているはずですので、<code>本番環境のurl/sitemap.xml</code>にアクセスしてサイトマップが表示されれば完了です。</p>
<p>Google Search Consoleを使用している人はそこでサイトマップの登録をしてちゃんと反映されるか確認してみるといいと思います。</p>
<p>以上です。</p>


Newt + Next.js + Netlifyの静的サイトにnext-sitemapを使ってビルド時にサイトマップを自動生成する

<p>新しく購入したWindows PCで文字入力していたときに半角/全角を切り替えようと半角/全角キーを入力したら普通に「;」とかが入力されて困ったので、設定で直したときの備忘録です。</p>
<p>この手の症状は人によって原因が異なると思うので私の場合はただの一例として見てもらえれば幸いです。</p>
<h2>やったこと</h2>
<ol>
<li>スタートボタンから<code>設定</code>を開く</li>
<li>左メニューの<code>時刻と言語</code>を選択<br>
<img src="https://storage.googleapis.com/newt-files/e79b3cec-cb23-4646-aba5-9a4876777621/055654.png" alt="055654.png"></li>
<li><code>言語と地域</code>をクリック<br>
<img src="https://storage.googleapis.com/newt-files/ebc37af5-02c2-4930-a998-7b35ad7c1e92/055713.png" alt="055713.png"></li>
<li>上から3つ目の項目の右のメニューをクリックして<code>言語のオプション</code>を選択<br>
<img src="https://storage.googleapis.com/newt-files/4b40a65d-6ffd-448e-9225-447e1c735f4f/060042.png" alt="060042.png"></li>
<li><code>キーボード</code>の欄の<code>レイアウトを変更する</code>をクリック<br>
<img src="https://storage.googleapis.com/newt-files/91f0afa6-7d10-405b-919f-6081bdecb1a3/060121.png" alt="060121.png"></li>
<li><code>ハードウェア キーボード レイアウトの変更</code>が開かれるため<code>日本語キーボード</code>を選択してOKをクリック<br>
ここが私の場合、<code>接続済みのキーボード レイアウトを使用する</code>になっていました。<br>
本来それで問題ないはずだと思うのですが私の場合なぜかこの設定ではうまくいっていないようでした。<br>
<img src="https://storage.googleapis.com/newt-files/d5d6fd46-3321-44a1-8d3c-820867399843/060238.png" alt="060238.png"></li>
<li>PCを再起動して確認<br>
これで私は改善しました。</li>
</ol>
<p>以上です。</p>


Windowsでキーボードの入力がおかしかったので設定で直したときの備忘録【Windows11】

<p>USBメモリにパーティションを設定していましたが、久々にパーティションを解除して結合しようとしましたがやり方を忘れてしまっていたので備忘録です。</p>
<h2>やり方</h2>
<ol>
<li><code>ディスクの管理</code>を開く<br>
スタートボタンから「ディスク」などと検索すると<code>ハードディスク パーディションの作成とフォーマット</code>が出てくるためそれをクリック<br>
<img src="https://storage.googleapis.com/newt-files/2ba0a7af-1b1c-4307-923d-de3328a9bd18/agfadfgsad.png" alt="agfadfgsad.png"></li>
<li>対象のUSBメモリを確認する<br>
<img src="https://storage.googleapis.com/newt-files/ff712004-f999-4db8-a021-ba1d62aa44d5/sfrgsrsdfrg.png" alt="sfrgsrsdfrg.png"><br>
↑USBメモリ(F:)、USBメモリ(H:)という名前で2つにパーティションされている。</li>
<li>パーティションされているブロックを右クリックして<code>ボリュームの削除</code>をクリック<br>
<img src="https://storage.googleapis.com/newt-files/2133176b-5978-41de-a283-36ded0fd88d4/faewfwe.png" alt="faewfwe.png"><br>
完了すると以下のようになります。<br>
<img src="https://storage.googleapis.com/newt-files/d409c8ff-c186-4813-b83c-e8997e833674/gaersgsre.png" alt="gaersgsre.png"></li>
<li>もう一方もボリュームの削除を行う<br>
<img src="https://storage.googleapis.com/newt-files/4fbf886a-d49d-47b0-a160-5f8b94cfcba4/faefaew.png" alt="faefaew.png"><br>
※クイックフォーマットのウィンドウが表示されたら指示に従いクイックフォーマットを行います。<br>
これでパーティションが削除されます。<br>
<img src="https://storage.googleapis.com/newt-files/837eed49-2a26-4834-9e55-31a04ecfc687/sergser.png" alt="sergser.png"></li>
<li>パーティションが削除されたUSBメモリをファイルエクスプローラーで開いて確認する<br>
<img src="https://storage.googleapis.com/newt-files/d5bb37bc-ddc8-49ce-a301-1d81e0f7ceb6/fafaea.png" alt="fafaea.png"><br>
フォーマットをする必要がある旨のウィンドウが表示されたら指示に従いフォーマットします。<br>
<img src="https://storage.googleapis.com/newt-files/edf254aa-5b27-4804-9b66-aec628c15282/ersgregsf.png" alt="ersgregsf.png"><br>
<img src="https://storage.googleapis.com/newt-files/fd27c5f3-48b6-467c-b3f4-3d4d16ac5fcb/gsaersgrgf.png" alt="gsaersgrgf.png"></li>
</ol>
<p>以上で完了です。</p>


USBメモリのパーティションを解除(結合)する方法の備忘録【Windows11/USBメモリ/パーティション】

<p>そろそろDJI Pocket3が出るのではと巷で話題ですが、今回はDJI Pocket2のお話です。</p>
<h2>DJI Pocket2</h2>
<p>公式サイトは<a href="https://www.dji.com/jp/pocket-2">こちら</a>。</p>
<p>単体での販売と、Creatorコンボという豊富な付属品とのセットの商品もあるらしい。</p>
<p>公式ストアの商品ページはこちら→<a href="https://store.dji.com/jp/product/pocket-2?vid=98631">DJI Pocket 2</a> / <a href="https://store.dji.com/jp/product/pocket-2?vid=98661">DJI Pocket 2 Creatorコンボ</a></p>
<p>価格は</p>
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>DJI Pocket 2</td>
<td>49,500円</td>
</tr>
<tr>
<td>DJI Pocket 2 Creatorコンボ</td>
<td>64,900円</td>
</tr>
<tr>
<td>差額</td>
<td>15,400円</td>
</tr>
</tbody>
</table>
<p>となっている。</p>
<h2>Creatorコンボと単品どちらを買うべきか</h2>
<p>今回私の中のポイントとして</p>
<ol>
<li>三脚は装着したい</li>
<li>スマホからワイヤレスで接続（操作・プレビュー確認）したい</li>
<li>マイクは本体内蔵で十分</li>
<li>広角レンズが欲しい</li>
</ol>
<p>というのがあります。<br>
それぞれを商品ページ記載の付属品から考えると。</p>
<ul>
<li>単品でも<code>DJI Pocket 2 三脚マウント (1/4インチねじ穴)</code>が付いているので、規格の合う三脚があれば装着はできそう。</li>
<li>スマホとのワイヤレス接続は、Creatorコンボに付属の<code>DJI Pocket 2 Do-It-Allハンドル</code>がないとできなそう🥺
<ul>
<li>単品の場合は有線接続になりそうですね…</li>
</ul>
</li>
<li>広角レンズはCreatorコンボなら付属に含まれています（<code>DJI Pocket 2 広角レンズ</code>）</li>
</ul>
<table>
<thead>
<tr>
<th>DJI Pocket 2 三脚マウント (1/4インチねじ穴)【単品に付属】</th>
<th>DJI Pocket 2 Do-It-Allハンドル【Creatorコンボに付属】</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://storage.googleapis.com/newt-files/32ccdeef-3cc8-406b-b7bc-3e9e4cbc738d/efaewafe.png" alt="efaewafe.png"></td>
<td><img src="https://storage.googleapis.com/newt-files/0b7d6a28-63bb-403b-af1b-943ce3b31cde/awefwaewaf.png" alt="awefwaewaf.png"></td>
</tr>
</tbody>
</table>
<p>ということは</p>
<ul>
<li>単品 + <code>DJI Pocket 2 Do-It-Allハンドル</code> + <code>DJI Pocket 2 広角レンズ</code> + 三脚(公式でなくてもok)</li>
<li>Creatorコンボ</li>
</ul>
<p>という選択肢がありそう。</p>
<h3>どちらが安いか</h3>
<p>【単品 + 欲しい付属品の場合】</p>
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>DJI Pocket 2</td>
<td>49,500円</td>
</tr>
<tr>
<td>DJI Pocket 2 Do-It-Allハンドル</td>
<td>11,000円</td>
</tr>
<tr>
<td>DJI Pocket 2 広角レンズ</td>
<td>5,500円</td>
</tr>
<tr>
<td>三脚</td>
<td>(未定なので+αとする)</td>
</tr>
<tr>
<td>合計</td>
<td>66,000 + α</td>
</tr>
</tbody>
</table>
<p>【Creatorコンボの場合】</p>
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>DJI Pocket 2 Creatorコンボ</td>
<td>64,900円</td>
</tr>
</tbody>
</table>
<p>…素直にCreatorコンボ買ったほうが良さそうですね。</p>
<p>普通に付属品の単品価格が高いですね。</p>
<h2>公式以外で買ったら安く買えるのか</h2>
<p>とりあえずCreatorコンボを買うとして、公式以外で買った方が安くなるのが調べてみます。</p>
<p>価格.comで調べてみましょう。<br>
公式の価格を上限とし、付属品が引っかからないように価格帯を10,000円~64,000円で検索しました。（検索結果ページのリンクは<a href="https://kakaku.com/search_results/%22DJI+Pocket+2+Creator%83R%83%93%83%7b%22/?minp=10000&amp;maxp=64900&amp;lid=pc_ksearch_price">こちら</a>）<br>
※ リンク先の検索結果は時間とともに変化しますので私と同じ内容が表示されるとは限りません。</p>
<h3>検索結果</h3>
<p>お、「<code>￥61,980〜</code>」というのがヒットしました。<br>
さらに<a href="https://kakaku.com/item/K0001303363/?lid=pc_ksearch_kakakuitem">リンク先</a>の価格比較をみると<code>¥58,731</code>のものがありました。<br>
<a href="https://kaago.com/dshopone/DJI-Pocket-2-Creator-Combo%28DJI%29/?itemcode=4988755056366&amp;cvr_cd=ba33ceb64d4302497333c3f401a3ca2d&amp;cvr_11=20230907&amp;cvr_10=2626&amp;cvr_09=645&amp;cvr_08=11&amp;cvr_07=4.11&amp;cvr_06=1&amp;cvr_05=58731&amp;cvr_04=1&amp;cvr_03=21&amp;cvr_02=58731&amp;cvr_01=K0001303363">ショップの売り場リンク</a>に行ってみます。</p>
<p>KaagoのDshopone？というところのようですね。</p>
<p><code>DJI Pocket 2 Creator Combo(DJI) </code><br>
販売価格<br>
<code>¥58,731 （税込）</code><br>
送料は私の住所の場合は無料でした！</p>
<p>これにしようと思います！</p>
<p>以上</p>


DJI Pocket 2が欲しくなったのでお得に買えるように価格を調べてみる。(単品とセット商品の比較もします)

<p>表題にある通り、Next.jsの<code>App Router</code>で<code>Layout.tsx</code>とかServer Components上で、<code>usePathname()</code>みたいにURLの取得をやりたくて調べてみました。（usePathname()はClient Componentsでないと使えません。）</p>
<h2>先に結論だけ</h2>
<p>完璧に良い方法は見つかってないです。</p>
<h2>stack overflow</h2>
<p>とりあえずググるとstack overflowで「<a href="https://stackoverflow.com/questions/75362636/how-can-i-get-the-url-pathname-on-a-server-component-next-js-13">How can I get the url pathname on a server component next js 13</a>」との質問がありました。（やはり同じことを考える人はいるもんですね）</p>
<p>そこにはissueのリンクとともにそこで提案されているらしいミドルウェアを使ったワークアラウンドがアンサーとしてありました。<br>
ただこれは私が求めていた回答と違う気もするのでissueも目を通してみます。</p>
<h2>issue</h2>
<p>issueのタイトルは「<a href="https://github.com/vercel/next.js/issues/43704">[Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname</a>」でこの記事を執筆時点ではOpenになっているのでまだ直接の解決策はなさそうな気配がしますね。</p>
<p>stack overflowのアンサーで提案されていたワークアラウンドは<a href="https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664">こちらのコメント</a>のようですね。</p>
<blockquote>
<p>サーバーサイドのレイアウト（appDir: true）で現在のURLにアクセスする回避策を探している人のために、ミドルウェアを使った方法を紹介しましょう。</p>
</blockquote>
<p>的な文言とともにサンプルコードが貼られています。<br>
しかしその後のコメントで問題点も指摘されてました。</p>
<ul>
<li><a href="https://github.com/vercel/next.js/issues/43704#issuecomment-1415676796">あるコメントにて</a>、「このやりかたするとSSGできないよ」的な指摘。</li>
<li>また<a href="https://github.com/vercel/next.js/issues/43704#issuecomment-1492651013">あるコメント</a>にて、「その解決策を追加することで、すべての速度が大幅に低下しているようだから気をつけて」</li>
<li>「Vercelにデプロイしたら機能しなかったよ」</li>
</ul>
<h3>ドキュメント追記したよ的なコメントもあったが…</h3>
<p>さらに、<a href="https://github.com/vercel/next.js/issues/43704#issuecomment-1438410141">こちらのコメント</a>にあるように「このissueの内容を踏まえてNext.jsのドキュメントを追加したよ」との投稿もありましたが、こちらは<code>Layout.tsx</code>で<code>searchParams</code>が使えるかどうかとかの仕様について書かれているだけで、私が知りたいURLの取得方法などについての記述はありませんでした。（そのドキュメントのページは<a href="https://nextjs.org/docs/app/api-reference/file-conventions/layout#good-to-know">こちら</a>）</p>
<h2>結論（現時点での個人的な）</h2>
<p>ワークアラウンドの方法もパフォーマンスが悪くなるっぽいのでなしですね。<br>
なので、(URL取得機能を必要としている)対象のサーバーコンポーネントが<code>layout.tsx</code>とか<code>page.tsx</code>とか上位のものなら、<code>App Router</code>の仕様からディレクトリ構成でURLは決まるので、（公式でサーバーコンポーネント版の<a href="https://nextjs.org/docs/app/api-reference/functions/use-pathname">usePathname</a>みたいのが出るまでは）愚直にパスを書いてあげるとか、いい感じにパスを取得してくれるライブラリ探すとかですかね。</p>
<p>なお、<code>.../xxx/[slag]/page.tsx</code>みたいな[slag]（<a href="https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes">Dynamic Routes</a>）によるパスパラメータの取得はサーバーコンポーネントでもできるみたいなので、Dynamic Routesを使っていてもディレクトリ構成とパスパラメータの取得で現在のURLは判別できそうです。（参考：<a href="https://nextjs.org/docs/app/api-reference/file-conventions/layout#props">Props</a>（layout.tsxでパスパラメータ受け取る例も載ってます））</p>
<p>なので新情報が入るまではそんな感じで対応しようと思います…（もっといい方法がありそうなものですが…）</p>
<p>（スマートな方法があったら誰か教えてください笑）</p>
<p>以上です。</p>


【Next.js/React】Server Components側で現在のページのパス(URL)を取得する方法を調べてみたけど今のところ無さそう？（一応ワークアラウンド的な情報もあったが…）

<p>タイトルの通り、<a href="https://nextjs.org/docs">Next.jsの公式Doc</a>を読みながらデプロイ方法、デプロイ先について公式Docではどのようなものが提案・紹介されているのか確認しながら考えてみようと思います。</p>
<p>本記事の内容は公式Docの内容に則っていますが私の意訳なので正しいことを保証するものではありません。正確な情報を知りたい場合は<a href="https://nextjs.org/docs">公式Doc</a>を参照してください。</p>
<h2>公式Docを読む際の注意点</h2>
<p>まずNext.jsの公式Docを読む際の注意点ですが、Next.jsはPages RouterとApp Routerがあり、DocもPages RouterとApp Routerで分かれているので注意してくだい。<br>
なお本記事はApp Routerを前提としています。</p>
<p><img src="https://storage.googleapis.com/newt-files/e1bde5b2-7579-43ff-bed9-fcea7deccb15/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.39.34.png" alt="スクリーンショット2023-07-045.39.34.png"><br>
PagesRouterに関するドキュメントかAppRouterに関するドキュメントかは左サイドのナビの一番上に表示されている。</p>
<p><img src="https://storage.googleapis.com/newt-files/b369f933-f244-4578-ba15-e56cee615b4c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.41.35.png" alt="スクリーンショット2023-07-045.41.35.png"><br>
表示するドキュメントはここで切り替えることができます。</p>
<p><img src="https://storage.googleapis.com/newt-files/6c478c55-d184-42c2-a6f0-1cd8cf43b2eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.42.13.png" alt="スクリーンショット2023-07-045.42.13.png"><br>
ちなみにドキュメントを検索する場合もApp(AppRouter)かPages(PagesRouter)かターゲットを選択できます。</p>
<h2>公式Docのデプロイに関する章を確認してみる</h2>
<p>デプロイに関する内容は<a href="https://nextjs.org/docs/app/building-your-application/deploying">こちら</a>に記載されています。</p>
<h3>ビルドで生成されるもの</h3>
<p>デプロイ先を考えるうえでまず、ビルドによって生成されるものを確認しましょう。<br>
Next.jsでビルドすると</p>
<ul>
<li><a href="https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization">Automatic Static Optimization</a>されたページか(Pages Routerで)getStaticPropsを使ったページのHTMLファイル</li>
<li>CSSファイル</li>
<li>Next.jsサーバーで動的なコンテンツをプリレンダリングするためのJavaScript</li>
<li>クライアントサイドでインタラクティブなUIなどを提供するためのJavaScript</li>
</ul>
<p>といったものが生成されるようです。（生成物は.nextフォルダに出力されるとのこと。）</p>
<p>※ Next.jsには静的エクスポート機能(Static Exports)もあるため、それを利用する場合はまた違ってくるようです。<br>
※ ビルドコマンドに関するDocは<a href="https://nextjs.org/docs/app/api-reference/next-cli#build">こちら</a>です。</p>
<h3>Vercelかセルフホスト</h3>
<p>ホスティング先を考える場合、まず最初の分かれ道としてVercelを使うかそれ以外にするか、だと思います。<br>
VercelはNext.jsの開発元なだけあり、設定作業等は最小限でいいみたいです。ただVercelは開発元提供のスタンダードな方法なので本記事ではとくに掘り下げて触れることはしません。</p>
<h3>セルフホストをする場合</h3>
<h4>Node.js</h4>
<p>セルフホストするホスティング先(デプロイ先)の環境としては、Node.jsをサポートしているホスティングプロバイダーであればどれでもデプロイ可能なようです。（例えば、awsのEC2やDigitalOcean Dropletなど。）</p>
<h4>Docker Image</h4>
<p>また、Dockerコンテナをサポートしているホスティングプロバイダでもデプロイ可能とのことです。コンテナでNode.js環境を用意してあげるので、ホスティングプロバイダ自体がNode.jsをサポートする必要はないということですね。（手順の例も<a href="https://nextjs.org/docs/app/building-your-application/deploying#docker-image">こちら</a>に載っています。）</p>
<h4>StaticなHTMLのエクスポート</h4>
<p>Next.jsの静的エクスポート機能(Static Exports)を使用する場合は、Node.js環境やDockerコンテナサポートがないホスティング先にもデプロイできるようです。<br>
ただ、Static Exportsには使用できる条件などがあるので注意が必要です。（Static ExportsについてのDocは<a href="https://nextjs.org/docs/app/building-your-application/deploying/static-exports">こちら</a>）</p>
<h3>その他のサービスを利用したホスティング</h3>
<p>Vercelやセルフホスト以外にマネージドなサーバーを提供しているサービスを利用する方法もある。今時はこれも多いのではないだろうか。<br>
以下のサービスがNext.jsのデプロイ方法を紹介していたりする。</p>
<ul>
<li><a href="https://aws.github.io/copilot-cli/">AWS Copilot</a></li>
<li><a href="https://docs.digitalocean.com/tutorials/app-nextjs-deploy/">Digital Ocean App Platform</a></li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-docker">Google Cloud Run</a></li>
<li><a href="https://elements.heroku.com/buildpacks/mars/heroku-nextjs">Heroku</a></li>
<li><a href="https://docs.railway.app/getting-started">Railway</a></li>
<li><a href="https://render.com/docs/deploy-nextjs-app">Render</a></li>
</ul>
<h4>静的エクスポート(Static Exports)で、その他サービスを利用してホスティング</h4>
<p>Static Exportsを利用するNext.jsアプリであっても、その他サービスを利用する方法という選択肢がある。<br>
Static Exportsであれば静的ホスティングプロバイダを利用してホスティングができる。</p>
<p>GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure PipelinesなどのCI/CDパイプラインを通してデプロイすることも可能とのこと。</p>
<p>以下のホスティングプロバイダのサービスがNext.jsの静的ホスティングの方法を紹介したりしている。</p>
<ul>
<li><a href="https://aws.amazon.com/blogs/mobile/amplify-next-js-13/">AWS Amplify</a></li>
<li><a href="https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs">Azure Static Web Apps</a></li>
<li><a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/">Cloudflare Pages</a></li>
<li><a href="https://firebase.google.com/docs/hosting/nextjs">Firebase</a></li>
<li><a href="https://docs.netlify.com/integrations/frameworks/next-js">Netlify</a></li>
<li><a href="https://github.com/milliHQ/terraform-aws-next-js">Terraform</a></li>
<li><a href="https://docs.sst.dev/start/nextjs">SST</a></li>
</ul>
<h2>所感</h2>
<p>デプロイ方法ホスティング先としてはかなり多様な選択肢があるようですね。<br>
Static Exportsであれば、ちょっとしたレンタルサーバーへのデプロイも可能で、シンプルなウェブサイト的なものであればそれもありかと思いました。</p>
<p>選択のポイントとしては、Static Exportsをするかどうかに大きく左右されそうですね。（Static ExportsだとNode.js環境が不要というのは大きいですね）</p>
<p>Next.jsで何かを作る際は、最初にStatic Exportsするかどうかを検討するのが良さそうです。</p>
<p>以上。</p>


Recent Articles