HarioNote

<p>私は負担から勉強やコーディングをする際には作業用BGMを聞きながら行うのですがみなさんはいかがでしょう？</p>
<p>私はそこまで集中力が高くない方なのでこの作業用BGMが結構重要なんです笑<br>
YouTubeには「作業用BGM」と銘打ってあっても作業の種類によっては妨げになり逆に集中力が散ってしまうものも多々ありますよね。</p>
<p>そこで、今回は最近私が聴いている、「勉強やコーディングなど集中して思考する作業中に聴きたい」作業用BGMを紹介致します。</p>
<p>以外に思われるかもしれませんが、作業用BGMとはいっても私はその作業用BGMYouTube動画を選ぶポイントとして映像も選定基準としています。それは作業中にふと画面を見たときに見える映像によっても、作業を継続できるかへの影響があるからです。（私だけかもしれませんが）</p>
<p>では紹介していきます。</p>
<h2>環境音系</h2>
<p><strong><a href="https://youtu.be/IxOsgxSNN24">📚 深夜に一緒に勉強しませんか / ２時間 / 小雨の音🌧＋焚き火の音🏕️ / ５０分のポモドーロ🍅 / Study with me / 勉強動画 / タイマーとアラームあり【作業用】</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/IxOsgxSNN24" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>小雨の音＋焚き火の音＋キーボードの作業音のみ</li>
<li>それぞれの環境音の音量バランスと音質が良く作業に没頭できる</li>
<li>動画がおしゃれ</li>
<li>動画にタイマーとアラームが組み込まれている</li>
</ul>
<h2>BGM+環境音系</h2>
<p><strong><a href="https://youtu.be/Ppy3hJ78DU4">【再up】ハトの巣 BGM ～マスターと過ごす３時間～</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ppy3hJ78DU4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>落ち着くBGMとサイフォンのコポコポ音が心地よい</li>
<li>BGMは静かめ</li>
<li>映像がかわいい（ふと見たときにリラックスできる）</li>
</ul>
<p><strong><a href="https://youtu.be/sca4VG9b0NY">📚 深夜に一緒に勉強しませんか / ２時間 / Lo-fi Hiphop + 小雨の音🌧 / ５０分のポモドーロ🍅 / Study with me / 勉強動画 / タイマーとアラームあり【作業用】</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/sca4VG9b0NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>「環境音系」のとこで挙げたやつのBGM付ver</li>
<li>BGMと投稿者の作業音の相性がとてもよく作業に集中できる</li>
</ul>
<h2>BGM系</h2>
<p><strong><a href="https://youtu.be/433xR7kzHXg">【30分耐久フリーBGM】Replay【チル / ゆったり / R&amp;B / Chill】作業用、雑談用、勉強用BGM</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/433xR7kzHXg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>晴れた気持ちいい日に合いそうな爽やかなR&amp;B、Chillな感じのBGM</li>
<li>音量小さめで聴くのが個人的に好き</li>
<li>静か系のBGMに飽きたときに聴くとリフレッシュできて集中できる</li>
</ul>
<p><a href="https://youtu.be/oFm6rbA5BD8">night at the bookstore. (lofi / chillhop / anime mix)</a></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oFm6rbA5BD8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>とても心癒されるChillhop,lofiなBGMで、多少疲れていてもこれを聞きながらだと心の疲れを癒やしながら集中できる</li>
<li>映像も曲にとてもあっておりおしゃれで落ち着く</li>
<li>一時期こればかりループ再生していた</li>
</ul>
<p><strong><a href="https://youtu.be/ZBrmNO92OTI">『深夜2時、レトロで大人な世界に迷い込む」Lofi Chill Bgm</a></strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZBrmNO92OTI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>個人的ポイント</p>
<ul>
<li>JazzっぽいBGMは個人的に集中できないがこれに含まれている曲は集中できた</li>
<li>タイトルにある通りレトロな感じで気分も浸りながら集中できる</li>
</ul>
<h2>番外編「ちょっとぼーっとしながらコーヒーでも飲みながら聴きたいBGM」</h2>
<p><a href="https://youtu.be/Gx3wDe7xhv8">【落ち着いた音楽で午後も仕事がはかどるBGM】作業用・勉強用BGM ー集中、リモートワーク、コーヒー音楽、読書、リラクゼーション</a></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Gx3wDe7xhv8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>以上です。</p>
<p>いかがでしょうか？ぜひ聴いてみてください～</p>


勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

<p>表題にある通りWindowsの標準ブラウザのEdgeに画像生成AIが搭載されたようなので使ってみました。</p>
<h2>使い方</h2>
<ol>
<li>
<p><strong>Edgeを起動し右サイドバーの「＋」ボタンをクリック</strong><br>
<img src="https://storage.googleapis.com/newt-files/a247e74c-9bf1-43de-a7c3-a6635e0343cd%2F2023-04-09_1.png" alt="2023-04-09_1.png"></p>
</li>
<li>
<p><strong>「Image Creator」をONに</strong><br>
ONにすると右サイドバーにImage Creatorのアイコンが追加されるのでそれをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/c4de5d95-124c-46a7-943b-686ace24ccb8%2F2023-04-09_2.png" alt="2023-04-09_2.png"></p>
</li>
<li>
<p><strong>「今すぐサインイン」をクリック</strong><br>
<img src="https://storage.googleapis.com/newt-files/d20fca1e-0a5a-478e-a798-7df9de4959e0%2F2023-04-09_3.png" alt="2023-04-09_3.png"><br>
私の場合はEdgeで既にサインインしていたのでクリックしたらそのままImage Creatorが利用可能になりました。</p>
</li>
<li>
<p><strong>生成して欲しい画像についての文章を(英語で)入力して「作成」ボタンをクリック</strong><br>
今回は「スマホで電話する猫」とDeepLで英語に翻訳してそれをコピペして作成ボタンをクリックしてみます。<br>
<img src="https://storage.googleapis.com/newt-files/6dfc197d-95e4-403f-8ad9-597f77cf1724%2F2023-04-09_4.png" alt="2023-04-09_4.png"></p>
</li>
<li>
<p><strong>生成完了！</strong><br>
少し待つと画像を生成してくれます。<br>
<img src="https://storage.googleapis.com/newt-files/b07098c4-ce7f-48f6-acd6-ab54a5d5bd0f%2F2023-04-09_5.png" alt="2023-04-09_5.png"><br>
電話している猫が生成されました。</p>
</li>
</ol>
<h2>規約について</h2>
<p><a href="https://www.bing.com/new/termsofuse?FORM=GENTOShttps://www.bing.com/new/termsofuse?FORM=GENTOS">こちら</a>に記載されています。</p>
<blockquote>
<p>作成物の使用。お客様は、本契約、Microsoft サービス規約、および弊社のコンテンツ ポリシーを遵守することを条件に、オンライン サービス以外の場所で、個人の合法的な非商業的目的のために作成物を使用できます。</p>
</blockquote>
<p>とあるので作成物の使用方法には注意が必要ですね。</p>
<p>以上！</p>


ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

<p>表題の通り「can not mount /dev/loop0 on /cow」をメッセージが出てインストールが止まってしまい、対応したのでその備忘録です。</p>
<h2>結論</h2>
<p>「<a href="https://www.pendrivelinux.com/universal-usb-installer-easy-as-1-2-3/">Universal USB Installer</a>」を使うのをやめて「<a href="https://rufus.ie/ja/#google_vignette">Rufus</a>」を使ったらインストールできました。<br>
原因究明はしてないです…</p>
<p>ちなみに環境は</p>
<ul>
<li>インストールメディアを作成したPCのOS：Windows11</li>
<li>Ubuntuのバージョン：Ubuntu Desktop 22.04.2 LTS（<a href="https://jp.ubuntu.com/download">こちら</a>でダウンロード）</li>
<li>Universal USB Installerのバージョン：2.0.1.4a</li>
<li>Rufusのバージョン：3.22</li>
</ul>
<p>でした。</p>


Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

<p>自分用の備忘録です～</p>
<p>表題にあるように「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることは...」と言われるときは、以下のようにしてしまっているときではないでしょうか？</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key: DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以下のように修正すればokです。</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key in DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以上！</p>


【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

<p>私は現在楽天モバイルを使用しているのですが最近他のキャリアに乗り換えようかなーと検討中…<br>
料金に不満は無いがたまに電波が入りづらいのが理由です。</p>
<p>そんなわけでプラチナバンドが使えるブランドにしたいわけです。</p>
<h2>個人的比較</h2>
<p>調べて比較してみました。（※間違いがあるかもしれないので参考にする際は公式も確認してください。）</p>
<table>
<thead>
<tr>
<th>ブランド</th>
<th>プラン</th>
<th>月額基本料金(税込)</th>
<th>データ量</th>
<th>データ量超過後の通信速度</th>
<th>国内通話</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://www.linemo.jp/plan/">LINEMO</a></td>
<td>ミニプラン</td>
<td>990円</td>
<td>3GB</td>
<td>300kbps</td>
<td>22円/30秒</td>
</tr>
<tr>
<td></td>
<td>スマホプラン</td>
<td>2,728円</td>
<td>20GB</td>
<td>1Mbps</td>
<td>22円/30秒</td>
</tr>
<tr>
<td><a href="https://ahamo.com/plan/#with-phone">ahamo</a></td>
<td>ahamo</td>
<td>2,970円</td>
<td>20GB</td>
<td>1Mbps</td>
<td>5分無料(超過後 22円/30秒)</td>
</tr>
<tr>
<td></td>
<td>ahamo大盛り</td>
<td>4,950円</td>
<td>100GB</td>
<td>1Mbps</td>
<td>5分無料(超過後 22円/30秒)</td>
</tr>
<tr>
<td><a href="https://povo.jp/spec/?gid=povo-spec-head-002">povo (povo2.0)</a></td>
<td>-</td>
<td>0円</td>
<td>トッピングによる(都度購入)<br>例<br>・3GB(30日間)：税込990円<br>・20GB(30日間)：税込2,700円</td>
<td>128kbps</td>
<td>22円/30秒</td>
</tr>
</tbody>
</table>
<h2>その他個人的に気になる特徴、比較ポイント</h2>
<h3>LINEMO</h3>
<ul>
<li>LINEギガフリー</li>
</ul>
<h3>ahamo</h3>
<ul>
<li>デフォルトで5分無料通話が付いてる</li>
<li>海外データ通信20GBまで無料</li>
</ul>
<h3>povo</h3>
<ul>
<li>トッピングという仕様
<ul>
<li>「5分以内通話かけ放題：550円（税込）/月」といったものもあるようだ</li>
</ul>
</li>
</ul>
<h2>現時点での所感</h2>
<p>プライベートと仕事用があるので、プライベートはLINEMOのスマホプランで仕事はpovoかなぁ。</p>


【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

<p>親要素の高さはウィンドウいっぱいに、そして複数の子要素のうち1つだけをウィンドウの余った高さ領域いっぱいにします。<br>
そしてその子要素は、孫要素に高さに関わらずウィンドウの高さが縮んだら縮んでスクロールバーが表示されるようにします。</p>
<p>説明が少し分かりづらいので画像を使って説明します。</p>
<p>以下のように各要素をレイアウトして、「data1~」がある領域はウィンドウ(ブラウザ)の高さに合わせて広がるようにしつつ、<br>
<img src="https://storage.googleapis.com/newt-files/453b040f-8482-4ee5-b87d-8cb8d08e62a6%2F2023-03-29_1.png" alt="2023-03-29_1.png"></p>
<p>ウインドウを縦に縮めた場合に↓のようになるのではなく、<br>
<img src="https://storage.googleapis.com/newt-files/e189dbb5-a77a-4493-b0cd-e1cc4a1ef045%2F2023-03-29_3.png" alt="2023-03-29_3.png"></p>
<p>↓の様になるようにします。<br>
<img src="https://storage.googleapis.com/newt-files/3795359b-955a-412e-877f-0fc10416b349%2F2023-03-29_2.png" alt="2023-03-29_2.png"></p>
<h2>ポイント</h2>
<ul>
<li>flexboxを使う</li>
<li>flex: 1を使う</li>
<li>overflow: autoを使う</li>
<li>うまくいかない場合はmin-height: 0を試してみる</li>
</ul>
<h2>実装例</h2>
<p>以下は最初に添付した画像の内容を実装したReactのコードです。<br>
Reactのコードといっても、「Root」や「FlexBox1」等はReactとemotionでstyleをあてているだけで、divにCSSを設定するのと同様です。</p>
<p>下部に記載されている「…= styled.div`…」あたりのコードと同等の記述をCSSで行えば、純粋なHTML+CSSで同じレイアウトを再現できるはずです。</p>
<pre><code>import styled from &quot;@emotion/styled&quot;;
import { FunctionComponent } from &quot;react&quot;;

const LayoutWithFlexboxPage: FunctionComponent = () =&gt; {
  return (
    &lt;Root&gt;
      &lt;FlexBox1&gt;
        Top
      &lt;/FlexBox1&gt;
      &lt;FlexBox2&gt;
        &lt;ul&gt;
          &lt;li&gt;data1&lt;/li&gt;
          &lt;li&gt;data2&lt;/li&gt;
          &lt;li&gt;data3&lt;/li&gt;
          &lt;li&gt;data4&lt;/li&gt;
          &lt;li&gt;data5&lt;/li&gt;
          &lt;li&gt;data6&lt;/li&gt;
          &lt;li&gt;data7&lt;/li&gt;
          &lt;li&gt;data8&lt;/li&gt;
          &lt;li&gt;data9&lt;/li&gt;
          &lt;li&gt;data10&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/FlexBox2&gt;
      &lt;FlexBox1&gt;
        Bottom
      &lt;/FlexBox1&gt;
    &lt;/Root&gt;
  );
};

const Root = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px;
  background-color: lightblue;
`;

const FlexBox1 = styled.div`
  background-color: lightcoral;
  display: flex;
`;

const FlexBox2 = styled.div`
  background-color: lightgreen;
  display: flex;
  flex: 1;
  overflow: auto;
`;

export default LayoutWithFlexboxPage;

</code></pre>
<p>以上です。</p>
<h3>補足</h3>
<ul>
<li>MUI等の<code>Box</code>を使用する場合、うまくいかなければ上記の例でいうところの「FlexBox2」に「min-height: 0」を指定してみてください。</li>
<li>親要素(Root)の高さは「100%」でもいいですが、さらに親の要素にも「height: 100%」が設定されていないと期待した振る舞いをしないことがあるため「height: 100dvh」を指定しています。</li>
</ul>


【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

<p>2023年の春になりましたし、新たにノートPCを購入する方も多いのかなと思います。そこで様々なメーカーのノートPCを比較しようと思ったのですが、単純にスペックを見ると、今どきはどのメーカーもウェブサイトにてカスタマイズできるのであまり比較にならないなと思いました。そこで、デザインや特徴的な機能で個人的に魅力的に感じたものをピックアップしてただ列挙してみようと思います。</p>
<p>※2023年春モデルもあればそうでないモデルもあります。独断と偏見でピックアップしてます。</p>
<h2><a href="https://dynabook.com/direct/dark-tech-blue-w6rzmw7bal.html">【dynabook】RZ/MW Webモデル ダークテックブルー</a></h2>
<ul>
<li>2023年2月発売</li>
<li>14インチ</li>
<li>940g</li>
<li><strong>バッテリー駆動時間が驚異の約20.5時間</strong></li>
<li>Rシリーズ同等のWebオリジナルモデルのRZシリーズ<br>
<img src="https://storage.googleapis.com/newt-files/4e031e78-483a-4642-a5d9-b1b565f85cc5%2F2023-03-16_1.png" alt="2023-03-16_1.png"><br>
<img src="https://storage.googleapis.com/newt-files/9f48725a-2366-49fb-b554-34f9e211bd68%2F2023-03-16_2.png" alt="2023-03-16_2.png"><br>
<img src="https://storage.googleapis.com/newt-files/bf2259ac-d9ff-4294-a1a1-86a554832fc4%2F2023-03-16_3.png" alt="2023-03-16_3.png"><br>
<img src="https://storage.googleapis.com/newt-files/48b2455c-3742-455e-a97b-7aa87f5c154f%2F2023-03-16_4.png" alt="2023-03-16_4.png"></li>
</ul>
<h3>所感</h3>
<p>・このバッテリー駆動時間は魅力的<br>
・13世代のCore iシリーズ搭載モデル</p>
<h2><strong><a href="https://jp.ext.hp.com/prod/notebooks/business/elite_dragonfly_g3/?jumpid=st_cm_p_sh_gg_bra_dsabnb-2&amp;gclid=CjwKCAjw_MqgBhAGEiwAnYOAephFGzhfPsde61nQF2NOVonVygWRKJ7T9ynhYm6Z6XssLsSoZrVLKhoCgGgQAvD_BwE&amp;gclsrc=aw.ds">【HP】HP Elite Dragonfly G3</a></strong></h2>
<ul>
<li>13.5インチ</li>
<li>約1.0kg</li>
<li>3:2の画面比で縦に広い</li>
</ul>
<p><img src="https://storage.googleapis.com/newt-files/638e4702-4d14-46ed-abe0-b7b2d23d3ada%2F2023-03-16_5.png" alt="2023-03-16_5.png"><br>
<img src="https://storage.googleapis.com/newt-files/1cd9ed6c-037c-4967-b09f-3e5c36083c04%2F2023-03-16_6.png" alt="2023-03-16_6.png"><br>
<img src="https://storage.googleapis.com/newt-files/104e3c48-639d-41cc-8c07-23d4406bd40f%2F2023-03-16_7.png" alt="2023-03-16_7.png"><br>
<img src="https://storage.googleapis.com/newt-files/d8683a0f-135a-4d28-8135-5855cb951104%2F2023-03-16_8.png" alt="2023-03-16_8.png"></p>
<h3>所感</h3>
<p>・キーボードのデザインが美しい</p>
<h2><strong><a href="https://www.dell.com/ja-jp/shop/%E3%83%87%E3%83%AB%E3%81%AE%E3%83%8E%E3%83%BC%E3%83%88%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3/xps-13-plus-%E3%83%8E%E3%83%BC%E3%83%88%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3/spd/xps-13-9320-laptop/smx1800sptas16on3ojp">【Dell】 XPS 13 Plus</a></strong></h2>
<p><img src="https://storage.googleapis.com/newt-files/d57a0c08-50aa-4122-aa09-53a913a95869%2F2023-03-16_9.png" alt="2023-03-16_9.png"><br>
<img src="https://storage.googleapis.com/newt-files/dc6dd794-6331-4da4-8889-5344530281ae%2F2023-03-16_10.png" alt="2023-03-16_10.png"><br>
<img src="https://storage.googleapis.com/newt-files/9c0b3e0d-fb57-49ae-bf4d-818564d26048%2F2023-03-16_11.png" alt="2023-03-16_11.png"><br>
<img src="https://storage.googleapis.com/newt-files/1994db0e-65a1-4946-9a04-c7bb0b885b77%2F2023-03-16_12.png" alt="2023-03-16_12.png"></p>
<h3>所感</h3>
<p>・デザインがめちゃめちゃ美しい<br>
・側面のポートはかなり削ぎ落とされている？</p>
<h2><strong><a href="https://www.microsoft.com/ja-jp/d/surface-laptop-5/8xn49v61s1bn?activetab=pivot%3aoverviewtab">【Microsoft】 Surface Laptop 5</a></strong></h2>
<ul>
<li>13.5インチ / 15インチ</li>
<li>色がいくつか選べるがどれも綺麗</li>
</ul>
<p><img src="https://storage.googleapis.com/newt-files/c473fc44-17d0-49d4-b084-f42b891e8f3c%2F2023-03-16_13.png" alt="2023-03-16_13.png"><br>
<img src="https://storage.googleapis.com/newt-files/f050ba80-2501-45f7-8d55-df11526133a3%2F2023-03-16_14.png" alt="2023-03-16_14.png"></p>
<h3>所感</h3>
<p>・キーボードが美しい<br>
・全体的に質感が良い</p>
<p>以上！</p>


【2023年】春だし気になるノートPCピックアップしてみる

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

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


Recent Articles

勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【2023年】春だし気になるノートPCピックアップしてみる

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

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

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

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

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

Recent Articles

勉強やコーディングに集中できるYouTubeで聴ける作業用BGM【個人的オススメ】

ブラウザEdgeに搭載された画像生成AI「Image Creator」を使ってみた

Ubuntuをインストールメディア(USB)でインストールしようとしたら「can not mount /dev/loop0 on /cow」とメッセージが出てインストールできない症状に出くわした

【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

【LINEMO/ahamo/povo】楽天モバイルから他のキャリアに乗り換えようかなと思ってる…

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【2023年】春だし気になるノートPCピックアップしてみる

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

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

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

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

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

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】