HarioNote

<p>久々にVisual StudioにてWPFプロジェクトのパッケージを確認したら、「NLog」と一緒にインストールしていた「NLog.Config」にて「パッケージは非推奨になりました。」との表記が…<br>
「More info」と表記されたの<a href="https://www.nuget.org/packages/NLog.Config/4.7.15?_src=template">リンク先のページ</a>を確認してみます。</p>
<p>リンク先のページを確認する限り、NLog.configはリリースをやめてしまったようです。使用すると予期せぬ動作をすることがあるようです。下の方のREADMEにはPackageReferenceを使用する場合にうまく機能しない旨の記載もあります。<br>
READMEにもあるようにNLog.configパッケージはNLogを使用するうえで必須ではないようですので、NLog.configはアンイストールして使用してみます。</p>
<h2>結論</h2>
<p>先に結論だけ言いますと、NLog.configパケージはなくとも問題なく動作しました。（ちゃんとプロジェクト内に作成したNLog.configファイル通りに動作しました。）</p>
<p>以下はNLog.configファイルの作成手順および注意点の備忘録です。</p>
<h2>NLog.configファイル作成手順と注意点</h2>
<h3>前提</h3>
<ul>
<li>NLogパッケージはNuGetで追加(インストール)済みとします。</li>
</ul>
<h3>手順</h3>
<p>以下備忘録も兼ねてNLog.configファイルの作成手順をまとめます。</p>
<ol>
<li>VisualStudioのソリューションエクスプローラーにて自身のプロジェクトを右クリック &gt; 追加 &gt;  新しい項目 をクリック<br>
<img src="https://storage.googleapis.com/newt-files/63d3869d-c4dc-4d1a-97b3-6919d1f8b2ea%2F2023-03-13_1.png" alt="2023-03-13_1.png"></li>
<li>左メニューの全般 &gt; アプリケーション構成ファイルを選択 &gt; 「NLog.config」という名前を入力して「追加」ボタンクリック<br>
<img src="https://storage.googleapis.com/newt-files/f11af998-ac24-46df-b628-c88b20a54dcf%2F2023-03-13_2.png" alt="2023-03-13_2.png"></li>
<li>プロジェクトにNLog.configファイルが追加されるのでソリューションエクスプローラーで確認</li>
<li>ソリューションエクスプローラーにて「NLog.config」ファイルを選択し、プロパティ欄に表示される情報を以下のように変更する。</li>
</ol>
<ul>
<li><strong>ビルドアクション</strong>：「コンテンツ」</li>
<li><strong>出力ディレクトリにコピー</strong>：「新しい場合はコピーする」<br>
<img src="https://storage.googleapis.com/newt-files/b31f8d47-ccc0-4e1a-9757-7a6116c8e0fe%2F2023-03-13_3.png" alt="2023-03-13_3.png"><br>
これらを設定しないと、後述のNLog.configの記述をしてもログが出力されません。</li>
</ul>
<ol start="5">
<li>NLog.configファイルを記述する<br>
NLog.configファイルの内容はNLogのGitHubの<a href="https://github.com/nlog/nlog/wiki/Tutorial">Tutorialページ</a>ある例を参考に記述すればokです（コピペでok）。</li>
</ol>
<p>今回私は以下のように記述しました。</p>
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;nlog xmlns=&quot;http://www.nlog-project.org/schemas/NLog.xsd&quot;
      xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&gt;

	&lt;targets&gt;
		&lt;target name=&quot;logfile&quot; xsi:type=&quot;File&quot; fileName=&quot;Logs/log.txt&quot;  layout=&quot;${date:format=yyyy-MM-dd HH\:mm\:ss} ${message}&quot;/&gt;
		&lt;target name=&quot;logconsole&quot; xsi:type=&quot;Console&quot;  layout=&quot;${date:format=yyyy-MM-dd HH\:mm\:ss} ${message}&quot;/&gt;
	&lt;/targets&gt;

	&lt;rules&gt;
		&lt;logger name=&quot;*&quot; minlevel=&quot;Trace&quot; writeTo=&quot;logconsole&quot; /&gt;
		&lt;logger name=&quot;*&quot; minlevel=&quot;Trace&quot; writeTo=&quot;logfile&quot; /&gt;
	&lt;/rules&gt;
&lt;/nlog&gt;
</code></pre>
<p>上記の記述だと、デバッグ時にコンソールに出力され、かつLogsディレクトリ配下にlog.txtファイルが作成され、そこにもログが出力されるようになります。<br>
要点としては</p>
<ul>
<li>Logsディレクトリ(フォルダ)が無い場合は自動で作成されます。</li>
<li>ログ出力時に既存のlog.txtファイルがあれば、ログはlog.txtファイルに追記する形で出力されます。（どんどん蓄積していく）</li>
<li>Logsフォルダはアプリケーションの.exeファイルと同ディレクトリに作成されます。</li>
</ul>
<p>といった感じになります。</p>
<p>以上です。</p>


【WPF/C#】NLog.Configパッケージが非推奨になってた。NLog.Configファイル作成時の注意点の備忘録【NLog】

<p>表題にある通り、ローカルPCで開発中のWebアプリ(localhost)に、同じWi-Fiに接続しているiPhone(実機)でアクセスして動作確認したいと思い、esetの設定を行った際の備忘録です。<br>
私の場合はReactアプリですが、Reactでなくともこの辺りの設定は変わらないと思います。実機もiPhoneでない場合も同じかと思います。(試してはいません)</p>
<h2>前提および対象者</h2>
<p>本記事の内容は以下の項目(環境等)が前提となります。</p>
<ul>
<li>localhostでWebアプリを立ち上げているPC(開発に使用しているPC)はWindowsで、かつESET(セキュリティソフト)を使用している</li>
<li>PCと実機(iPhone)は同じWi-Fiに接続されている</li>
</ul>
<h2>設定方法</h2>
<h3>iPhoneのipアドレス確認</h3>
<p>まず、iPhoneがWi-Fiに接続している際のipアドレスを確認しておきます。<br>
設定 &gt; Wi-Fi &gt; 接続しているWi-Fiをタップ &gt; 下の方にある「IPアドレス」を確認<br>
<img src="https://storage.googleapis.com/newt-files/2c95e51a-66ea-4ca2-a6ce-55fa46b1d609%2FS__81870852.jpg" alt="S__81870852.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/03adf448-7978-4006-b0f8-82de4911ea58%2FS__81870854.jpg" alt="S__81870854.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/3af06dd6-7074-4386-8bf7-a389b14383e7%2FS__81870855.jpg" alt="S__81870855.jpg"><br>
確認したらこれをメモしておきましょう。</p>
<h3>ESETの設置</h3>
<p>PCでESETを開き以下のように設定します。</p>
<ol>
<li>左メニューの「設置」を選択し「ネットワーク保護」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/ff011aaf-b056-44e7-8bc6-dfa5ec33a33c%2F2023-03-11_1.png" alt="2023-03-11_1.png"></li>
<li>「ファイアウォール」の項目の右端の歯車アイコンをクリックし「設定...」を選択<br>
<img src="https://storage.googleapis.com/newt-files/4e2e1828-41e6-4b28-a782-3defab3b14ab%2F2023-03-11_2.png" alt="2023-03-11_2.png"></li>
<li>左メニューの「ファイアウォール」の項目を選択し、「詳細」の欄を展開し中にある「編集」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/1b0bca30-e095-4d9d-8998-ebc41bfa18a3%2F2023-03-11_3.png" alt="2023-03-11_3.png"></li>
<li>「ファイアウォールルール」ウィンドウが開くので、下の方にある「追加」ボタンをクリック<br>
<img src="https://storage.googleapis.com/newt-files/8b2e6ee6-e759-49f7-bd1b-bd44894b0a4e%2F2023-03-11_4.png" alt="2023-03-11_4.png"></li>
<li>「一般」タブで以下の項目を入力</li>
</ol>
<ul>
<li>名前→何用途のルールかわかるように名前をつける</li>
<li>方向→私は「内向き」で設定しましたが、各々必要に応じで変更してください。</li>
<li>アクション→「許可」にします。</li>
<li>プロトコル→「TCPおよびUDP」でok<br>
<img src="https://storage.googleapis.com/newt-files/d30a0723-222c-43f0-8588-9e824d22065a%2F2023-03-11_5.png" alt="2023-03-11_5.png"></li>
</ul>
<ol start="6">
<li>「ローカル」タブで、「ポート」の欄に開発中にWebアプリをlocalhostで立ち上げる際に使用しているポート番号を入力<br>
<img src="https://storage.googleapis.com/newt-files/1a7c9b34-a499-4d9f-817b-f95f08f859bc%2F2023-03-11_6.png" alt="2023-03-11_6.png"></li>
<li>「リモート」タブで、「IP」の欄に先程メモしておいた実機(iPhone等)のipアドレスを入力<br>
<img src="https://storage.googleapis.com/newt-files/c7bb61a6-bd45-4f36-b3cf-e3843900a155%2F2023-03-11_7.png" alt="2023-03-11_7.png"></li>
<li>OKボタンで各ウィンドウを閉じて設定を適用する。</li>
</ol>
<p>設定は以上になります。</p>
<p>あとはiPhoneでSafari等を起動し、「PCのipアドレス:ポート番号」にアクセスすればPCで立ち上げているWebアプリにアクセスできるはずです。</p>
<p>以上！</p>


【React/iPhone/localhost】ESETを使っているWindowsPCで、開発しているWebアプリ(localhost)にiPhoneでアクセスできるようにして動作確認をする【Wi-Fi】

<h2>※【2024/12/14追記】この記事の情報は古いので「<a href="https://harionote.net/article/2024-12-14">Windows11で「Windows Faxとスキャン」を使えるようにするための動線が変わってた</a>」を参照してください。</h2>
<p>Windowsには、PCにモデムを接続すればFAX送信が行えるソフトが標準で備わっているのですが、最近Windows11で確認したらデフォルトで使用することができなくなっていたので、使用可能にするための設定方法の備忘録です。</p>
<h2>設定方法</h2>
<ol>
<li>スタートボタンをクリックし「設定」を起動（「設定」さえ起動できれば導線はなんでもok）<br>
<img src="https://storage.googleapis.com/newt-files/eac81738-541b-43bc-a138-ea01f3b262b4%2F2023-03-09104418.png" alt="2023-03-09104418.png"></li>
<li>左メニューの「アプリ」を選択し、「オプション機能」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/bfd79541-aa9a-4b37-90c1-1e46ec2a8206%2F2023-03-09104601.png" alt="2023-03-09104601.png"></li>
<li>「オプション機能を追加する」の欄の「機能を表示」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/819ff8a7-06e1-4a03-b746-b5592a762cee%2F2023-03-09104705.png" alt="2023-03-09104705.png"></li>
<li>表示されたウィンドウの検索フィルタに「fax」等と入力し「Windows FAXとスキャン」を見つけてチェックを入れて「次へ」ボタンをクリックしそのままインストールを行う<br>
<img src="https://storage.googleapis.com/newt-files/4a935e28-1d4d-4050-a9ff-02b2ad4b3438%2F2023-03-09104807.png" alt="2023-03-09104807.png"><br>
<img src="https://storage.googleapis.com/newt-files/c399449d-5998-4393-b2cf-36be90b4fcf4%2F2023-03-02170053.png" alt="2023-03-02170053.png"></li>
</ol>
<p>以上</p>


Windows11で「Windows Faxとスキャン」を使用するには

<p>表題の通りWindows PCにて起動時に自動で特定のフォルダを開いたり、特定のアプリケーションを立ち上げたりする方法の備忘録です。環境はWindows11です。</p>
<h2>方法</h2>
<ol>
<li>「<strong>Windows</strong>」＋「<strong>R</strong>」キーを同時に押します。</li>
<li>「ファイル名を指定して実行」ウィンドウが表示されるため、「shell:startup」と入力しOKボタン<br>
<img src="https://storage.googleapis.com/newt-files/3a3df48f-cb69-441b-b49b-0739b6f8509a%2F2023-03-06232412.png" alt="2023-03-06232412.png"></li>
<li>スタートアップフォルダが開かれるので、そこにPC起動時に開いて欲しいフォルダのショートカットやアプリケーションのショートカットを配置する<br>
<img src="https://storage.googleapis.com/newt-files/2ebd52d5-131c-438a-baaf-9067e8e2ce4f%2F2023-03-06_35131.png" alt="2023-03-06_35131.png"></li>
</ol>
<p>以上です。</p>


【Windows】PC起動時に特定のフォルダやアプリを開く(起動する)ようにする方法の備忘録

<p>表題の通りです。<br>
といってもNetlifyの公式Docに載っている情報ですのでわざわざこの記事を読む必要はないといえばないです。ちゃんと知りたい人はDocを読んだほうがいいと思います。<br>
NetlifyのDoc→<a href="https://docs.netlify.com/configure-builds/build-hooks/">https://docs.netlify.com/configure-builds/build-hooks/</a></p>
<h2>前提</h2>
<p>本記事はNewt+Github+Netlifyですでにサイトの構築が完了していることが前提となります。<br>
そのうえで、現在は手動でデプロイしているが、Newtで記事を書いて公開にしたら自動でNetlifyでデプロイして反映させたい人へ向けた内容となります。</p>
<h2>やること</h2>
<p>まずNetlifyにて自身のサイトのページにアクセスし、「Site settings」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/60919785-cf14-4615-9699-f2a7fa699ec1%2F2023-02-02_1.png" alt="2023-02-02_1.png"></p>
<p>表示されてページの左サイドメニューの「Build &amp; deploy」をクリックして下へスクロールして「Build hooks」のセクションを探します。<br>
見つけたら「Add build hook」ボタンをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/a5ce3c4a-1faf-4b9e-8b9e-b4833210c93a%2F2023-02-02_2.png" alt="2023-02-02_2.png"></p>
<p>表示された入力欄に任意のBuild hook名を入力します。（どのような用途・トリガーのhookなのかわかるような名前にするのが良いと思います。今回はNewtで記事を公開したりしたときがトリガーとなるのでそればわかるような。）<br>
入力したらsaveボタンをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/ffee89de-9034-4b39-b5fe-765ab373c742%2F2023-02-02_3.png" alt="2023-02-02_3.png"></p>
<p>Build hookのURLが生成されるのでそれをコピーしておきます。<br>
<img src="https://storage.googleapis.com/newt-files/3d809cb7-0d26-4361-9e9d-cd1a5cca04a2%2F2023-02-02_4.png" alt="2023-02-02_4.png"></p>
<p>今度はNewtの管理画面に移動し、スペース設定のWebhookにて「Webhookを作成」をクリックし、「Webhokテンプレート」を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/dbc21128-7f9b-4b9a-a294-7074de2e0939%2F2023-02-02_5.png" alt="2023-02-02_5.png"></p>
<p>テンプレートから「Netlify」を選択し、Build Hook URLの欄に先程コピーしたURLを貼り付けます。<br>
貼り付けたら「Webhookを作成」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/7588bc9e-cc6c-47a8-ac6f-1125b257d917%2F2023-02-02_6.png" alt="2023-02-02_6.png"></p>
<p>これで自動で記事を公開したらデプロイされるようになったので、実際に記事を作成して公開をします。</p>
<p>以上です。</p>


Newt+Github+Netlifyで構築されているサイトに記事を投稿したら、webhookで自動デプロイされるようにする

<p>表題にある通りGoogleフォームで作成したフォームのURLをコピペしてiframeで埋め込んで表示させたら</p>
<pre><code>[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: &quot;frame-ancestors 'none'&quot;.
</code></pre>
<p>と言われてしまい、ググっても一発で出てこなかったので解消方法の備忘録です。</p>
<h2>結論</h2>
<p>結論としてはシンプルで、フォームのURLに<code>?embedded=true</code>を付ければokです。<br>
当たり前すぎてググっても出てこなかったのかもしれません。</p>
<p>ちなみに、Googleフォームの作成画面で送信ボタンをクリックして出てくるリンク等をコピーできるモーダル内で、iframeのコードをコピーすれば最初からembeddedパラメータは付いています。<br>
<img src="https://storage.googleapis.com/newt-files/8ebad0f5-f63b-4d8c-88df-78e3a9996a1c%2F2023-02-02_1.png" alt="2023-02-02_1.png"></p>
<p>今回は↓のようにリンクをコピーしてiframeに使用した場合に発生する事象になります。<br>
<img src="https://storage.googleapis.com/newt-files/15349c5c-7dc4-4264-b318-75af09a6a6f6%2F2023-02-02_2.png" alt="2023-02-02_2.png"></p>
<p>以上。</p>


Googleフォームをiframeに埋め込んだら「[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".」と言われた【GoogleForm/iframe】

<p>表題にあるとおり、文字コードがEUC-JP形式のテキストファイルの閲覧編集ができて、UTF-8やShift_JISへの変換もできる方法の紹介です。</p>
<h2>結論</h2>
<p>結論、<a href="https://tera-net.com/">TeraPad</a>を使えば全部できます。<br>
TeraPadはWindows対応のシンプルなテキストエディタです。<br>
<a href="****">https://tera-net.com/</a><br>
のダウンロードからダウンロードしてインストールすることで使用できます。</p>
<h2>EUC-JP形式のファイルを開く方法</h2>
<p>これはそのまま対象のファイルをTeraPadで開くだけでOKです。<br>
TeraPadを開いておいてそこにEUC-JP形式のファイルをドラッグアンドドロップするだけでも開けます。<br>
開くとウィンドウ右下に「EUC」を表示されるため現在開いているファイルの文字コードが何なのか確認できます。<br>
<img src="https://storage.googleapis.com/newt-files/dabf1357-4b8c-45ec-a1e5-5bcea131f5b3%2F2023-01-24-01.png" alt="2023-01-24-01.png"></p>
<h2>UTF-8やShift_JISなど他の文字コードに変換する</h2>
<p>TeraPadで(EUC-JP形式の)対象のファイルを開いた状態で、「ファイル &gt; 文字/改行コード指定保存」を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/92a64366-bd42-4b39-b1b4-8743fd6b7538%2F2023-01-24-02.png" alt="2023-01-24-02.png"><br>
表示されたウィンドウにて「文字コード」の項目で変換したい形式を選択してOKボタンをクリックすれば指定の形式に変換されて保存されます。<br>
<img src="https://storage.googleapis.com/newt-files/da58cf9c-7e96-470e-b475-b79a02760b53%2F2023-01-24-03.png" alt="2023-01-24-03.png"></p>
<p>元データを取っておきたい場合は「名前を付けて保存」にチェックしておきます。</p>
<p>以上です。</p>


【文字コード変換】Windowsで文字コードが「EUC-JP」のテキストファイルを文字化けせずに閲覧できてかつUTF-8やShift_JISに変換する方法【EUC-JP/UTF-8/Shift_JIS】

<p>VSCodeをアップデートしたらstyled componentsの入力補完をしてくれている拡張機能が効かなくなったので、ダウングレードせずに解決できないかと調べたらできたのでその備忘録です。</p>
<p>ただ、今回の解決策はあくまでも私が試してうまく解消できた方法なので万人に当てはまるわけではありません。</p>
<h2>使用していたstyled componentsのコード補完の拡張機能</h2>
<p>使用していたのは「 vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)」です。<br>
<img src="https://storage.googleapis.com/newt-files/822f4a9b-906c-44bb-adf7-842d1153a252%2F2022-12-1046866.png" alt="2022-12-1046866.png"></p>
<p>↓こんな感じでstyled componentの定義内のcssの入力を助けてくれる便利なやつです<br>
<img src="https://storage.googleapis.com/newt-files/493861b4-b0c6-4f83-a1cd-a5c02e6c38a8%2F6541464653.png" alt="6541464653.png"></p>
<h2>試した解決策と結論</h2>
<p>結論から書かせてもらいますと、私の場合はVSCodeにインストールされていた「JavaScript and TypeScript Nightly」という拡張機能を取り除くことで解消することができました。</p>
<p>↓こちらです<br>
<img src="https://storage.googleapis.com/newt-files/e7f88aac-e340-487f-a7f0-d9d9fe10cdb8%2F6426454.png" alt="6426454.png"></p>
<p>拡張機能の欄から検索し、アンインストールをしVSCodeを再起動したら復活しました。<br>
これで快適な環境を取り戻せました。</p>
<h2>結論にたどり着くまでの経緯</h2>
<p>とりあえず色々ググったら<br>
↓こちらのissueにたどり着きまして、コメントを読み漁って解決方法にたどり着きました<br>
<a href="https://github.com/styled-components/vscode-styled-components/issues/354">https://github.com/styled-components/vscode-styled-components/issues/354</a></p>
<p>issue内のコメントでは、VSCodeの様々なversionや環境で発生していたり発生していなかったりの報告があったのですが、その中の1つにVSCodeのバージョンは変えずに拡張機能の組み合わせを細かく試した人がいて原因が「JavaScript and TypeScript Nightly」とであったと報告がありました。（本当に感謝。。。）</p>
<p>それでその拡張機能を検索したら私の環境にもインストールされていたので、アンインストールを試したらうまくいきました。</p>
<p>たどり着くのに時間がかかったので地味に疲れました笑</p>
<p>以上です。</p>


VSCodeをアップデートしたらstyled componentsの補完が効かなくなっていたので解消した【VSCode/拡張機能】

<p>前回の記事の続きです。</p>
<p>ページ全体のデフォルトのSEO設定はできたので、今度は記事ページ固有のSEO設定ができるようにします。<br>
本記事の環境では<a href="https://www.newt.so/">Newt</a>（ヘッドレスCMS）を利用しているため、Newtのapiから返ってくる値を利用して自動で各記事ページにSEO設定が行われるようにすることを目標とします。</p>
<p>そのため本記事ではNextSeoに設定される値はNewt由来の変数がほとんどになりますが、Newtを使用していない環境の方の場合も、設定する値の取得方法が異なるだけで設定する項目は変わらないと思うので、基本的にやることも変わらないと思います。</p>
<h2>実装</h2>
<h3>記事ページのコンポーネントを編集</h3>
<p>本記事ブログはNewtのNext.jsテンプレートが土台となっているため、もともと最小限のseoに関する記述が記事ページのコンポーネントに書かれていますので、それらを削除しnext-seoでの設定の記述に書き換えます。</p>
<p>↓が元々の状態です。</p>
<pre><code>...
  return (
    &lt;Layout app={app}&gt;
      &lt;Head&gt;
        &lt;title&gt;{title}&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:type&quot; content=&quot;article&quot; /&gt;
        &lt;meta property=&quot;og:title&quot; content={title} /&gt;
        &lt;meta property=&quot;og:description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:image&quot; content={ogImage} /&gt;
        &lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot; /&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;/Head&gt;
...
</code></pre>
<p>これを以下のように書き換えました。</p>
<pre><code>...
import { NextSeo } from &quot;next-seo&quot;;
...
  return (
    &lt;Layout app={app}&gt;
      &lt;NextSeo
        title={title}
        description={description}
        openGraph={{
          title,
          description,
          type: &quot;article&quot;,
          article: {
            tags: currentArticle.tags.map((tag) =&gt; tag.name),
            authors: [currentArticle.author.fullName],
            publishedTime: currentArticle?._sys?.createdAt,
            modifiedTime: currentArticle?._sys?.updatedAt,
          },
          images: [
            {
              url: currentArticle.coverImage.src,
              width: 700,
              height: 420,
              alt: title,
            }
          ],
        }}
      /&gt;
...
</code></pre>
<p>※<code>&lt;Head&gt;</code>は削除しました。<br>
基本的にNewtのapiから取得している値を流用してセットしているだけです。</p>
<h3>記事ページを確認</h3>
<p>では<code>npm run dev</code>で立ち上げて記事ページにアクセスしてSEO設定を確認してみます。<br>
確認すると以下のようにmetaタグが生成されています。<br>
<img src="https://storage.googleapis.com/newt-files/d8fb89f8-00c2-49c2-8251-3b43d9419a5f%2F212018.png" alt="212018.png"></p>
<p>以上です。</p>


【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

<p>本ブログをWordPressからNewt + Next.js(v13)にリニューアルしてからSEOの設定を行っていなかったため、npmモジュールの<code>next-seo</code>モジュールを使って設定してみました。</p>
<p>next-seo：<a href="https://www.npmjs.com/package/next-seo">https://www.npmjs.com/package/next-seo</a></p>
<h2>NextSeo</h2>
<p>※以下公式の情報を基に私の意訳になります。<br>
next-seoはSEOを設定したいページに<code>NextSeo</code>タグ埋め込むことで動作し、headタグ内に設定した内容に沿ってmetaタグ等をレンダリングしてくれるそうです。</p>
<p>これだけ読むとすべてのページにNextSeoタグを埋め込む作業が必要なように思えますが、自動ですべてのページにデフォルトのSEO設定を出力してくれるデフォルトSEO設定機能があるようです。<br>
Next.jsの_app.js(カスタム<code>&lt;App&gt;</code>)を利用する方法が提供されています。</p>
<p>これに加えてページ固有のSEO設定を行いたい場合は、そのページにのみ個別で<code>NextSeo</code>タグを設定すれば上書きしてくれるっぽいです。</p>
<p><code>next-seo.config.js</code>のようなファイルを作成しておき、そこにデフォルトのSEO設定を記述しておき読み込ませて使用する方法も紹介されています。</p>
<p>Title Template機能を使用すれば記事タイトルの表示形式の設定もできるようです。</p>
<pre><code>title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title
</code></pre>
<h2>実装</h2>
<h3>next-seoモジュールインストール</h3>
<pre><code>&gt; npm install --save next-seo@5.15.0 --save-exact
</code></pre>
<p>※versionは最新のものを確認して各自修正してください。</p>
<h3>デフォルトのSEO設定を記述するファイル作成</h3>
<p><code>next-seo.config.ts</code>という名前で設定ファイルを作成（ファイル名はなんでもokです）<br>
今回は以下のように記述してみました。</p>
<pre><code>import { DefaultSeoProps } from &quot;next-seo&quot;;

const SITE_NAME = &quot;HarioNote&quot;;

const TitleTemplate = `%s | ${SITE_NAME}`;

const config: DefaultSeoProps = {
  title: SITE_NAME,
  titleTemplate: TitleTemplate,
  defaultTitle: SITE_NAME,
  description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
  canonical: &quot;https://harionote.net/&quot;,
  openGraph: {
    url: &quot;https://harionote.net/&quot;,
    title: SITE_NAME,
    description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
    siteName: SITE_NAME,
  },
  twitter: {
    site: SITE_NAME,
    cardType: &quot;summary_large_image&quot;
  }
}

export default config;
</code></pre>
<h3>_app.tsxにてデフォルトのSEO設定を適用</h3>
<p>next.jsの機能としてある_app.tsx(または_app.js)ファイルを利用して先程作成したデフォルトのSEO設定がすべてのページに適用されるようにします。</p>
<p>※<code>_app.tsx</code>ファイルはない場合は新規作成してください。配置場所は<code>/pages</code></p>
<p>元々↓のような_app.tsxを</p>
<pre><code>import &quot;../styles/globals.css&quot;;

function MyApp({ Component, pageProps }) {
  return (&lt;Component {...pageProps} /&gt;);
};

export default MyApp;
</code></pre>
<p>↓のように編集しました。</p>
<pre><code>import &quot;../styles/globals.css&quot;;
import { DefaultSeo } from &quot;next-seo&quot;;

import SEO from &quot;../nextSeo/next-seo.config&quot;;

function MyApp({ Component, pageProps }) {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre>
<p>編集後<code>npm run dev</code>コマンドで立ち上げて確認すると</p>
<p><img src="https://storage.googleapis.com/newt-files/ae4b9c96-0273-4971-9101-615f0879efef%2F16541656.png" alt="16541656.png"><br>
となっていたheadタグ内に<br>
<img src="https://storage.googleapis.com/newt-files/a65e6c48-47ab-4048-9803-4e79ce9dee76%2F192404.png" alt="192404.png"><br>
のようにmetaタグが生成されるようになりました～。</p>


<p>表題の通りです。Next.jsのプロジェクトにGoogle Tag Managerを導入する際に、公式のexampleがあるのですがそれを見ながらやっても若干苦戦したのでその備忘録です。</p>
<p>公式example：<a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib">https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib</a></p>
<h2>要点</h2>
<p>今回扱うファイル</p>
<ul>
<li>.env.sample(.env.local)</li>
<li>pages/_document.tsx<br>
本記事内の表記について</li>
<li>GTM：Google Tag Managerのことです</li>
</ul>
<h2>実装</h2>
<h3>envファイルにGTMのIDを追加</h3>
<p>「.envファイル」(.env.sample, .env.local等)にGTMのIDを記述しておきます。</p>
<pre><code>...

GTM_ID=XXX-XXXXXX

...
</code></pre>
<p>＜補足＞<br>
　タグマネージャーのIDは下図の部分に記載されているものです。</p>
<p><img src="https://storage.googleapis.com/newt-files/7291b0eb-f12e-47c9-8c3a-58f858066649%2Fimage-58566.png" alt="image-58566.png"></p>
<h2>_document.tsxにGTM導入のための記述追加</h2>
<p>「/pages/_document.tsx」にGTMを導入するための記述を追加します。</p>
<pre><code>import { Html, Head, Main, NextScript } from &quot;next/document&quot;

/* ↓追記箇所 */
const GTM_ID = process.env.GTM_ID;

export default function Document() {
  return (
    &lt;Html&gt;
      &lt;Head&gt;
/* ↓追記箇所---------------------------------------------- */
          {GTM_ID &amp;&amp; (
            &lt;Script
              id=&quot;gtag-base&quot;
              strategy=&quot;afterInteractive&quot;
              dangerouslySetInnerHTML={{
                __html: `
                      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                      j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
                      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                      })(window,document,'script','dataLayer', '${GTM_ID}');
                    `,
              }}
            /&gt;
          )}
/* ↑追記箇所---------------------------------------------- */
      &lt;/Head&gt;
      &lt;body&gt;
/* ↓追記箇所---------------------------------------------- */
          &lt;noscript&gt;
            &lt;iframe
              title=&quot;Tag Manager&quot;
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height=&quot;0&quot;
              width=&quot;0&quot;
              style={{ display: &quot;none&quot;, visibility: &quot;hidden&quot; }}
            /&gt;
          &lt;/noscript&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
/* ↑追記箇所---------------------------------------------- */
      &lt;/body&gt;
    &lt;/Html&gt;
  )
}
</code></pre>
<p>追加する記述内容は以上です。</p>
<h2>動作確認</h2>
<p>Next.jsを立ち上げて、Chromeなどブラウザの開発ツールで確認してみます。<br>
　「Network」の欄をみるとちゃんと200が返ってきているようです。<br>
<img src="https://storage.googleapis.com/newt-files/ea58df0a-e08f-4093-a3a2-7a335995e8d0%2Fimage-685748.png" alt="image-685748.png"></p>
<p>ちなみにですが、タグマネージャーのプレビュー機能は、localhostで実行している場合でも行えるのでそちらで確認もしてみるといいかもしれません。</p>
<h2>Advanced</h2>
<p>よりよいコードや設計にするためのAdvancedな項目を挙げてみました。</p>
<ul>
<li>「GTM_ID」を「_document.tsx」の外で(別ファイルで)定義
<ul>
<li>環境変数を引っ張ってくる「process.env.XXX」の記述を都度書かせるような設計をしない。（ケアレスミスの温床になりやすい）</li>
<li>使用する環境変数が多い場合、その方がプロジェクト全体がクリーンになる。（と思ってる）</li>
<li>定義ファイルで定義する際についでにZodとかで型安全化するのもあり</li>
</ul>
</li>
<li>「_document.tsx」に記述した、&lt;Script …/&gt;の「dangerouslySetInnerHTML」に渡している内容は別ファイルで定義しておいた方が_document.tsxの全体の見通しがよくなるかも</li>
</ul>
<p>以上です。</p>


【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

<h2>ポイント</h2>
<p>以下のものを利用しました。</p>
<p>GitHub Actions<br>
「Add To GitHub projects」（※classicのGitHub projectsはサポートしてないので注意）</p>
<h2>手順</h2>
<h3>アクセストークンを生成しておく</h3>
<p>GitHubの右上のアカウントメニューのSettingsをクリックし</p>
<p><img src="https://storage.googleapis.com/newt-files/dc573fd2-bbf4-47d0-9d6e-88af33a9974f%2Fimage-6165.png" alt="image-6165.png"></p>
<p>Settings左メニュー一番下の「Developer settings」をクリック</p>
<p><img src="https://storage.googleapis.com/newt-files/31e4a880-9b06-4e2f-8d17-800cbf47fbd1%2Fimage-8651.png" alt="image-8651.png"></p>
<p>左メニューのPersonal access tokensのTokens(classic)をクリック<br>
<img src="https://storage.googleapis.com/newt-files/4ff7bfcc-b531-41b7-b139-9a46de22766d%2Fimage-9556.png" alt="image-9556.png"></p>
<p>「Generate new token」をクリックし、「Generate new token(classic)」を選択します。</p>
<p><img src="https://storage.googleapis.com/newt-files/bb90fff9-252d-455f-9f01-928c61d36bd5%2Fimage-1061.png" alt="image-1061.png"></p>
<p>各項目を入力してtokenを作成します。<br>
scopesは以下のようにしました。<br>
これについては、個人アカウントのリポジトリで行うかorgで利用するかで異なると思うので各自調整してください。</p>
<p><img src="https://storage.googleapis.com/newt-files/a3513df0-4a5d-4d55-b0a6-6c29c0dfdb7c%2Fimage-11024.png" alt="image-11024.png"></p>
<p>tokenを生成すると最初にtokenを表示してくれますが、以降リロード等すると二度と表示されないので、コピーして控えておきます。</p>
<p><img src="https://storage.googleapis.com/newt-files/977d5749-983d-4698-a64a-1b74910fc8c6%2Fimage-1254.png" alt="image-1254.png"></p>
<h2>目的のリポジトリのSecretsにtokenを登録する</h2>
<p>今回はOrganizationで行いたいのでOrganizationのSecretsでもいいのですが、リポジトリのSecretsで行いたいと思います。</p>
<p>監視対象のリポジトリのページにアクセスして「Settings」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/b2769bb6-fc30-474d-bf02-a775bc75affa%2Fimage-13428.png" alt="image-13428.png"></p>
<p>遷移先ページ左メニューのSecrets &gt; Actionsをクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/97777bf9-a47f-41c0-ad7e-3ec7a23ae9fe%2Fimage-1585.png" alt="image-1585.png"></p>
<p>表示されたページの「New Repository secret」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/ddac0134-c13f-497d-bfcb-71893600950f%2Fimage-1654.png" alt="
"></p>
<p>Nameは「GHPROJECT_TOKEN」とでもして（なんでも良いです）<br>
Secretに先程コピーして控えておいたtokenを入力し、「Add secret」をクリックしてsecretに登録します。</p>
<p><img src="https://storage.googleapis.com/newt-files/e164358b-8fae-43b7-940f-47e98c394384%2Fimage-1775.png" alt="image-1775.png"></p>
<h2>Workflowを作成</h2>
<p>リポジトリにissueが作成されたらActionsで実行されるworkflowを作成します。先程作成したtokenやsecretはここの処理で必要になります。</p>
<p>監視するリポジトリのページにアクセスし、「Actions」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/5654f026-ff5d-4ac3-867e-233c0b5fec6a%2Fimage-1885.png" alt="image-1885.png"></p>
<p>左メニューの「New workflow」をクリックします。</p>
<p><img src="https://storage.googleapis.com/newt-files/68d5b70f-886a-4ae2-9c92-a51490b36ea5%2Fimage-1978.png" alt="image-1978.png"></p>
<p>表示されたページの「set up a workflow yourself」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/78210b79-2ed4-4325-8e0f-9d56d4c7b30e%2Fimage-2075.png" alt="image-2075.png"></p>
<p>workflowのエディタが開かれるので、以下のように入力します。<br>
ファイル名(〇〇.yml)も各々で自由につけてokです。</p>
<p><img src="https://storage.googleapis.com/newt-files/68df02cc-ccb3-448f-997c-eaea5d1c6240%2Fimage-2297.png" alt="image-2297.png"></p>
<pre><code>name: 'Your workflow name'
on:
  issues:
    types: [opened]
jobs:
  add-issue-to-project:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/add-to-project@vX.X.X　←バージョンは各々確認
      id: add-issue-to-project
      with:
        project-url: 自分のGitHub ProjectのURL（〇〇/projects/[project No.] まででok）
        github-token: ${{ secrets.GHPROJECT_TOKEN }}　←自分で付けたtokenの名前にしてください
</code></pre>
<p>↑各項目は各々の環境に合わせて変更してください。<br>
「actions/add-to-project@vX.X.X」のバージョンは↓で確認できます。<br>
<a href="https://github.com/marketplace/actions/add-to-github-projects">https://github.com/marketplace/actions/add-to-github-projects</a></p>
<p>書き終わったら右上の「Start commit」でcommitしてymlを保存しましょう。</p>
<p>これで準備は完了です。</p>
<h3>確認</h3>
<p>最後に対象のリポジトリでissueを作成してProjectに追加されるか確認し、できてればokです。</p>
<p>以上です。</p>
<h2>Advanced</h2>
<p>趣味とか私用でないOrganizationにおいては、個人のアクセストークンの利用はやはり避けた方が良いと思います。今回は試験的な試みというか私自身がやりたくてやっているだけなので、参考にする場合は自己責任でお願いします。</p>
<p>どのようなルールで組織のトークンを管理するかは議論するといろんな意見が出てきそうですね。</p>


Articles by Hario