Merge branch 'develop'

Author: BreadMotion

WebSite/assets/data/blogList.json

@@ -1,21 +1,21 @@
 [
   {
-    "id": "blog_00016",
-    "title": "ZedのRuleの追加について",
-    "date": "2025-11-30T00:00:00.000Z",
+    "id": "blog_00017",
+    "title": "ZedのAI機能活用術：Text Threadとスラッシュコマンド徹底解説",
+    "date": "2025-12-01T00:00:00.000Z",
     "category": "IDE",
     "description": "ZedのRuleの使い方をまとめました",
     "tags": [
       "zed",
       "ai"
     ],
     "thumbnail": "assets/img/zed_icon.png",
-    "contentPath": "blog/blog_00016.html",
+    "contentPath": "blog/blog_00017.html",
     "recommended": true
   },
   {
-    "id": "blog_00017",
-    "title": "ZedのAI機能活用術：Text Threadとスラッシュコマンド徹底解説",
+    "id": "blog_00016",
+    "title": "ZedのRuleの追加について",
     "date": "2025-11-30T00:00:00.000Z",
     "category": "IDE",
     "description": "ZedのRuleの使い方をまとめました",
@@ -24,7 +24,7 @@
       "ai"
     ],
     "thumbnail": "assets/img/zed_icon.png",
-    "contentPath": "blog/blog_00017.html",
+    "contentPath": "blog/blog_00016.html",
     "recommended": true
   },
   {

WebSite/assets/data/blogList_en.json

@@ -15,10 +15,10 @@
   },
   {
     "id": "blog_00017",
-    "title": "ZedのAI機能活用術：Text Threadとスラッシュコマンド徹底解説",
+    "title": "## Mastering Zed's AI Features: A Comprehensive Guide to Text Threads and Slash Commands",
     "date": "2025-11-30T00:00:00.000Z",
     "category": "IDE",
-    "description": "ZedのRuleの使い方をまとめました",
+    "description": "Here's a summary of how to use Zed's Rules.",
     "tags": [
       "zed",
       "ai"

WebSite/blog/blog_00001.html

@@ -97,7 +97,7 @@ <h1 class="post-detail__title">ブログはじめました</h1>
     </ul>
   </div>
               </header>
-              <section class="post-detail__body markdown-body"><h2 id="自己紹介">自己紹介</h2><p>こんにちは、パン君です。</p>
+              <section class="post-detail__body markdown-body"><h2 id="自己紹介">自己紹介</h2><p>こんにちは!パン君です。</p>
 <p>私はとあるゲーム会社で働きながら、インディーズや個人制作でも活動しているゲームエンジニアです。</p>
 <p>社会人2年目ということもあり、インディーズやプライベートで制作した作品などを整理して<br>今後の活動に役立つような「まとめの場所」が欲しいと思いこのサイトを作りました。</p>
 <p>本当はサーバーを借りたり、常駐用のミニPCを用意して1から環境構築して……という方法も考えましたが、<br>まずは <strong>「早く出す」ことを優先</strong> して、今回は GitHub Pages を使っています。  </p>

WebSite/blog/blog_00008.html

@@ -97,7 +97,7 @@ <h1 class="post-detail__title">Discord Bot のアーキテクチャを見直し
     </ul>
   </div>
               </header>
-              <section class="post-detail__body markdown-body"><p>こんにちは、パン君です。</p>
+              <section class="post-detail__body markdown-body"><p>こんにちは!パン君です。</p>
 <p>この記事では、個人で運用している <strong>Discord Bot のアーキテクチャをどう組み直したか</strong> をまとめます。</p>
 <p>やりたかったことはざっくりいうと、</p>
 <ul>

WebSite/blog/blog_00011.html

@@ -97,7 +97,7 @@ <h1 class="post-detail__title">自作Discord Botを公開したらスパムに
     </ul>
   </div>
               </header>
-              <section class="post-detail__body markdown-body"><p>こんにちは、パン君です。</p>
+              <section class="post-detail__body markdown-body"><p>こんにちは!パン君です。</p>
 <p>今回は個人で運用していた <strong>Discord Botを公開したら大失敗した</strong> という話になります。</p>
 <p>先日、僕が運営しているゲーム開発サーバーで事件が起きました。<br>なんと自作ボットが乗っ取られたかのように、 <strong>全く関係ないDiscordサーバーの招待URLをひたすら連投し始めた</strong> んです。<br>原因は僕が作ったボットの <strong>アーキテクチャに潜んでいた致命的な設計ミス</strong> でした。  </p>
 <p>今回は自戒を込めて、僕がやらかしたミスとその対策を全部ここに書き残しておこうと思います。</p>

WebSite/blog/blog_00012.html

@@ -100,7 +100,7 @@ <h1 class="post-detail__title">静的サイトにお問い合わせフォーム
               <section class="post-detail__body markdown-body"><p>こんにちは！パン君です。</p>
 <p>このポートフォリオサイトは GitHub Pages でホスティングしている静的なWebサイトです。  </p>
 <p>そしてお問い合わせを実装するにはメールに送信するための仕組みがいります。<br>API実装を常駐サーバーでトンネル通信をPlayit.ggを利用して行っていますが、数週間前からトンネルの作成が出来ずに困っています...<br>(公式には連絡したのですが...)</p>
-<p>そこで今回は、 <strong>Google Apps Script (GAS)</strong> を簡易的なバックエンドAPIとして利用し、完全無料でメール送信機能を実装しました。  </p>
+<p>そこで今回は <strong>Google Apps Script (GAS)</strong> を簡易的なバックエンドAPIとして利用し、完全無料でメール送信機能を実装しました。  </p>
 <h2 id="なぜ-gas-google-apps-script-なのか">なぜ GAS (Google Apps Script) なのか</h2><p>静的サイトでフォームを実装する方法はいくつかあります。  </p>
 <ol>
 <li><strong>Formspree などの外部サービスを使う</strong><ul>
@@ -174,9 +174,9 @@ <h3 id="ポイント">ポイント</h3><ul>
 </code></pre>
 <p>これを「ウェブアプリ」としてデプロイし、アクセス権限を「全員 (Anyone)」に設定することで、外部から叩ける API URL が発行されます。  </p>
 <hr>
-<h2 id="フロントエンド実装-javascript">フロントエンド実装 (JavaScript)</h2><p>次に、この API を叩くフロントエンド側の処理です。<br><code>fetch</code> API を使って非同期送信を行います。</p>
+<h2 id="フロントエンド実装-javascript">フロントエンド実装 (JavaScript)</h2><p>次にこの API を叩くフロントエンド側の処理です。<br><code>fetch</code> API を使って非同期送信を行います。</p>
 <h3 id="corsのエラーを回避するコツ">CORSのエラーを回避するコツ</h3><p>GAS に対して <code>application/json</code> で POST すると、CORS (Cross-Origin Resource Sharing) のプリフライトリクエスト (OPTIONS) が発生し、GAS がうまく返答できずにエラーになることがあります。</p>
-<p>これを回避するために、あえて <code>text/plain</code> としてデータを送信する方法を採用しました。</p>
+<p>これを回避するためにあえて <code>text/plain</code> としてデータを送信する方法を採用しました。</p>
 <pre><code class="language-javascript">const GAS_API_URL = &quot;https://script.google.com/macros/s/xxxx/exec&quot;;
 
 form.addEventListener(&quot;submit&quot;, async (e) =&gt; {
@@ -208,19 +208,19 @@ <h3 id="corsのエラーを回避するコツ">CORSのエラーを回避する
 </code></pre>
 <p>GAS側では <code>JSON.parse(e.postData.contents)</code> で受け取ることで、問題なく JSON として扱えます。</p>
 <hr>
-<h2 id="デザインの調整">デザインの調整</h2><p>機能だけでなく、見た目もサイトのトーン＆マナーに合わせました。</p>
+<h2 id="デザインの調整">デザインの調整</h2><p>機能だけでなく見た目もサイトのトーン＆マナーに合わせました。</p>
 <ul>
 <li>必須項目のバッジ表示</li>
 <li>送信ボタンのローディングアニメーション</li>
 <li>スマホでの入力しやすさ（<code>input type=&quot;email&quot;</code> や <code>type=&quot;tel&quot;</code> の活用）</li>
 </ul>
-<p>特に送信ボタンは、押した後に「送信中...」であることが視覚的に分かるように、CSSアニメーションでスピナーを表示するようにしました。ユーザーが何度も連打してしまうのを防ぐ効果もあります。</p>
-<h2 id="まとめ">まとめ</h2><p>サーバーレスな環境でも、GAS を組み合わせることで本格的なお問い合わせフォームが実装できました。</p>
+<p>特に送信ボタンは押した後に「送信中...」であることが視覚的に分かるように、CSSアニメーションでスピナーを表示するようにしました。<br>ユーザーが何度も連打してしまうのを防ぐ効果もあります。</p>
+<h2 id="まとめ">まとめ</h2><p>サーバーレスな環境でも GAS を組み合わせることで本格的なお問い合わせフォームが実装できました。</p>
 <ul>
 <li><strong>GAS</strong> は無料かつ手軽なバックエンドとして優秀。</li>
 <li><code>fetch</code> の <code>Content-Type</code> を工夫することで CORS 問題を回避できる。</li>
 </ul>
-<p>これで、ポートフォリオサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
+<p>これでポートフォリオサイトから直接お仕事の相談を受け付ける準備が整いました！</p>
 </section>
               <div class="share-buttons">
     <p class="share-buttons__title">SHARE</p>

WebSite/blog/blog_00013.html

@@ -99,7 +99,7 @@ <h1 class="post-detail__title">ポートフォリオの詳細表示をモーダ
               </header>
               <section class="post-detail__body markdown-body"><p>こんにちは！パン君です。</p>
 <p>これまでこのサイトの「ポートフォリオ一覧」から作品をクリックすると詳細ページ（<code>portfolio/xxxx.html</code>）に遷移する仕様になっていました。</p>
-<p>しかし、ポートフォリオを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。  </p>
+<p>しかしポートフォリオを見に来てくれた人は「 <strong>いろいろな作品をザッピングしたい</strong> 」はずです。<br>「クリックして詳細へ移動」→「ブラウザバックで戻る」→「またスクロールして次の作品へ...」という操作は、地味ながらストレスになります。  </p>
 <p>そこで <strong>一覧ページを維持したまま、詳細情報をモーダルウィンドウで重ねて表示する</strong> 形に改修しました。</p>
 <hr>
 <h2 id="実装の方針">実装の方針</h2><p>このサイトはビルドツールを使ってMarkdownファイルから静的なHTMLファイルを生成しています。<br>ポートフォリオの詳細ページもすでに <code>portfolio/work_01.html</code> のような形で実ファイルとして存在しています。</p>

WebSite/blog/blog_00014.html

@@ -103,18 +103,18 @@ <h1 class="post-detail__title">CSSのリファクタリングを手軽にして
 <li>デザイン案Aで書いたけど、結局B案にしたから使わなくなったボタンのクラス</li>
 <li>共通化しようとして作ったけど、結局固有クラスを使ったから放置されたスタイル</li>
 </ul>
-<p>などなど。<br>放置しても動くのですが、ファイルサイズも無駄ですし何より精神衛生上よろしくありません。</p>
-<p>そこで、今回はこれらをリファクタリングすることにしました。</p>
+<p>などなど。<br>放置しても動くのですがファイルサイズも無駄ですし何より精神衛生上よろしくありません。</p>
+<p>そこで今回はこれらをリファクタリングすることにしました。</p>
 <hr>
-<h2 id="手動で探すのは無理">手動で探すのは無理</h2><p>とはいえ、CSSファイルに書かれているクラス名を一つずつ検索して「使用箇所ゼロ」を確認するのは苦行です。<br>世の中には <code>PurgeCSS</code> などの便利なツールもありますが、ビルドプロセスに組み込むのが少し大変だったり設定が複雑だったりします。</p>
+<h2 id="手動で探すのは無理">手動で探すのは無理</h2><p>とはいえCSSファイルに書かれているクラス名を一つずつ検索して「使用箇所ゼロ」を確認するのは苦行です。<br>世の中には <code>PurgeCSS</code> などの便利なツールもありますが、ビルドプロセスに組み込むのが少し大変だったり設定が複雑だったりします。</p>
 <p>今回は <strong>「もっと手軽に、ざっくりでいいから不要なものを消したい」</strong> というモチベーションだったので、Node.jsで簡単なスクリプトを書いて検出することにしました。</p>
 <h2 id="自作スクリプトの方針">自作スクリプトの方針</h2><ol>
 <li><code>assets/css/</code> フォルダ内のCSSファイルを全部読み込む。</li>
 <li>正規表現でクラス名（<code>.classname</code>）とID名（<code>#idname</code>）を抽出する。</li>
 <li>プロジェクト内の全ファイル（HTML, JS, MDなど）をスキャンする。</li>
 <li>「抽出したクラス名が、どのファイルにも一度も登場しない」場合、それを<strong>未使用候補</strong>として出力する。</li>
 </ol>
-<p>これだけです。厳密な構文解析（AST）などはせず、単純な文字列検索（<code>includes</code>）で判定します。<br>その分、「クラス名と偶然同じ単語が文章中にあったら検知漏れする」という弱点はありますが、 <strong>「使っていないものを安全に削除する」</strong> という目的には十分です。  </p>
+<p>これだけです。厳密な構文解析（AST）などはせず、単純な文字列検索（<code>includes</code>）で判定します。<br>その分「クラス名と偶然同じ単語が文章中にあったら検知漏れする」という弱点はありますが、 <strong>「使っていないものを安全に削除する」</strong> という目的には十分です。  </p>
 <pre><code class="language-javascript">// tools/find-unused-css.js (抜粋)
 
 const cssContent = fs.readFileSync(cssFile, &#39;utf8&#39;);
@@ -135,16 +135,16 @@ <h2 id="自作スクリプトの方針">自作スクリプトの方針</h2><ol>
     }
 });
 </code></pre>
-<h2 id="実行結果">実行結果</h2><p>スクリプトを実行してみると、いくつかの未使用クラスが見つかりました。</p>
+<h2 id="実行結果">実行結果</h2><p>スクリプトを実行してみるといくつかの未使用クラスが見つかりました。</p>
 <pre><code>Checking assets\css\layout.css...
   [UNUSED] .section--soft
 
 Checking assets\css\top.css...
   [UNUSED] .btn-outline
 </code></pre>
-<p>確認してみると、<br><code>section--soft</code> は初期デザイン案で作ったカードのバリエーション、<br><code>btn-outline</code> は枠線のみのボタンで、現在は塗りつぶしボタンしか使っていませんでした。</p>
+<p>確認してみると<br><code>section--soft</code> は初期デザイン案で作ったカードのバリエーション<br><code>btn-outline</code> は枠線のみのボタンで現在は塗りつぶしボタンしか使っていませんでした。</p>
 <p>これらは完全に不要なので迷わず削除！<br>CSSファイルが少しスリムになりました。</p>
-<h2 id="まとめ">まとめ</h2><p>リファクタリングというと大掛かりな作業をイメージしがちですが、<br><strong>「気になったら小さなスクリプトを書いてサクッと調べる」</strong><br>というアプローチなら、日常的にコードをきれいに保てそうです。</p>
+<h2 id="まとめ">まとめ</h2><p>リファクタリングというと大掛かりな作業をイメージしがちですが、<br><strong>「気になったら小さなスクリプトを書いてサクッと調べる」</strong><br>というアプローチなら日常的にコードをきれいに保てそうです。</p>
 <p>自分の手で作ったツールで自分のサイトを改善していくのは、エンジニアならではの楽しみですね。</p>
 </section>
               <div class="share-buttons">