<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>rengedev blog</title><link>https://blog.rengedev.com/</link><description>renge のブログです。つくったものの話や、開発のメモを書いています。</description><language>ja</language><lastBuildDate>Wed, 30 Sep 2026 00:00:00 +0900</lastBuildDate><atom:link href="https://blog.rengedev.com/index.xml" rel="self" type="application/rss+xml"/><item><title>20 時間遊んでもクリアの見通しが立たない。ファイアーエムブレム 万紫千紅は社会人にクリアできるのか</title><link>https://blog.rengedev.com/posts/2026-09-30-%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2%E3%83%BC%E3%82%A8%E3%83%A0%E3%83%96%E3%83%AC%E3%83%A0%E4%B8%87%E7%B4%AB%E5%8D%83%E7%B4%85%E3%81%A7%E7%B5%B6%E6%9C%9B%E3%81%97%E3%81%9F%E8%A9%B1/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2026-09-30-%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2%E3%83%BC%E3%82%A8%E3%83%A0%E3%83%96%E3%83%AC%E3%83%A0%E4%B8%87%E7%B4%AB%E5%8D%83%E7%B4%85%E3%81%A7%E7%B5%B6%E6%9C%9B%E3%81%97%E3%81%9F%E8%A9%B1/</guid><pubDate>Wed, 30 Sep 2026 00:00:00 +0900</pubDate><category>ゲーム</category><category>ファイアーエムブレム</category><category>万紫千紅</category><category>Nintendo Switch 2</category><description>&lt;p&gt;ファイアーエムブレム 万紫千紅を遊び始めて、20 時間がたちました。それなのに、主人公 1 人分のストーリーすらまだ終わっていません。&lt;/p&gt;&#10;&lt;h2 id="今回こそクリアするつもりだった"&gt;今回こそクリアするつもりだった&lt;/h2&gt;&lt;p&gt;ファイアーエムブレムは好きなシリーズですが、私はこれまで一度も最後までクリアできたことがありません。&#10;if は一部だけクリアしたところで、風花雪月は少し進めたところで止まっています。&lt;/p&gt;&#10;&lt;p&gt;なので今回こそはと思い、発売初日から遊び始めました。&lt;/p&gt;&#10;&lt;h2 id="遊んでいて思ったこと"&gt;遊んでいて思ったこと&lt;/h2&gt;&lt;p&gt;万紫千紅には主人公が 4 人いて、私はカイから進めています。&lt;/p&gt;&#10;&lt;p&gt;仲間にできるキャラクターがたくさんいるのは楽しいです。ただ、私好みの男性キャラクターはあまりいませんでした。そのため女性キャラクターばかり仲間にしていたら、カイの周りがハーレムのようになってしまいました。&lt;/p&gt;&#10;&lt;p&gt;風花雪月で見たことのあるキャラクターも、何人か出てきます。風花雪月をほとんど進めていない身としては、このまま進めるとネタバレを次々に踏むのではないかと、少し怖くなっています。&lt;/p&gt;&#10;&lt;p&gt;戦闘はテンポよく進められて、面白いです。&lt;/p&gt;&#10;&lt;h2 id="戦闘以外が多すぎる"&gt;戦闘以外が多すぎる&lt;/h2&gt;&lt;p&gt;困っているのは、ストーリーと戦闘以外にやらなければいけないことが多すぎて、なかなか先に進めないことです。キャラクターの好感度を上げたり、名声を上げたり、次の章の推奨レベルまで仲間を育てたりしているうちに、どんどん時間が過ぎていきます。&lt;/p&gt;&#10;&lt;p&gt;レベル上げは、ワールドマップの敵と戦って進めています。ただ、育てるキャラクターを絞って集中して戦わせないと、推奨レベルにはなかなか届きません。もっとうまいやり方がありそうですが、まだ見つけられていません。&lt;/p&gt;&#10;&lt;p&gt;ダンジョン探索は、正直必要だったのか疑問で、全部スキップしています。ダンジョンに限らず、SRPG の戦闘以外の部分が盛られすぎていて、私が求めているものとはかけ離れていると感じます。戦闘以外の部分は、もっと大胆に省略できる手段が欲しいです。&lt;/p&gt;&#10;&lt;p&gt;最近のファイアーエムブレムは、なぜ戦闘以外の部分をこんなに盛ろうとするのでしょうか。ストーリーと戦闘だけに絞った、クオリティの高いゲームにしてくれたらみんな喜ぶと思うのですが、そう思うのは私だけでしょうか。&lt;/p&gt;&#10;&lt;h2 id="全員分で-120-時間以上"&gt;全員分で 120 時間以上&lt;/h2&gt;&lt;p&gt;ゲームに進捗の表示はないので感覚ですが、この調子だと 1 人分をクリアするのに 30 時間以上かかりそうです。&#10;4 人分だと、120 時間以上になります。しかもそのあとには、ラスボスを倒しに行く話が控えているようです。&lt;/p&gt;&#10;&lt;p&gt;4 人全員を遊ばなくても先には進めるらしいのですが、全員分遊ばないとクリアしたとは言えない気がしています。社会人の私には、いつ終わるのか見当もつきません。&lt;/p&gt;&#10;&lt;p&gt;体力を使い果たさずにクリアするには、RTA のように効率重視で進めるしかなさそうです。必要なら攻略情報を横目で見ながら進めないと、クリアまでたどり着けそうにありません。&lt;/p&gt;&#10;&lt;p&gt;遊んでみて改めて、次々に戦闘をしていく if の形式が、私にはやっぱり一番合っていたのだと思いました。万紫千紅は、時間がかかってもいつかクリアしたいと思っています。それとは別に、久しぶりに if も引っ張り出して、今度こそ最後まで遊んでみたくなりました。&lt;/p&gt;&#10;</description></item><item><title>ブログを Hugo で作り直したら、作業のほとんどを AI に任せられた話</title><link>https://blog.rengedev.com/posts/2026-09-30-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92hugo%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2026-09-30-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92hugo%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</guid><pubDate>Wed, 30 Sep 2026 00:00:00 +0900</pubDate><category>Web開発</category><category>Hugo</category><category>報告</category><description>&lt;p&gt;ブログを blog.rengedev.com に移して、作り直しました。今回はコードを書くのも、旧記事 15 本の移植も、Claude（AI）に任せています。私がやったのは、方向を決めることと、できたものを見て良し悪しを伝えることだけです。&lt;/p&gt;&#10;&lt;p&gt;この記事では、どう作ったかと、途中で悩んだところを紹介します。&lt;/p&gt;&#10;&lt;h2 id="作り直した理由"&gt;作り直した理由&lt;/h2&gt;&lt;p&gt;これまでの記事は、home.rengedev.com（Astro 製）の中に置いていました。&#10;home にはイラストやマニュアルも載せていて、ブログはその一部という扱いでした。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2026-09-30-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92hugo%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/old-site.png" alt="旧サイトの home.rengedev.com" width="1280" height="900" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;ブログだけを独立させたかったので、blog.rengedev.com として分けることにしました。&lt;/p&gt;&#10;&lt;h2 id="構成"&gt;構成&lt;/h2&gt;&lt;ul&gt;&#10;&lt;li&gt;サイトの生成：Hugo（テーマは使わず自作）&lt;/li&gt;&#10;&lt;li&gt;公開：Cloudflare Pages（&lt;code&gt;main&lt;/code&gt; ブランチに push すると自動で公開）&lt;/li&gt;&#10;&lt;li&gt;記事：Markdown で、1 記事ごとに 1 フォルダ（画像も同じフォルダに置く）&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;Hugo を選んだのは、ビルドが速いからです。&lt;/p&gt;&#10;&lt;p&gt;テーマを使っていないので、次の機能は自分で追加しました。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;ダークモード&lt;/li&gt;&#10;&lt;li&gt;記事ごとの OGP 画像（SNS で共有したときに出る画像）の自動生成&lt;/li&gt;&#10;&lt;li&gt;コードブロックのコピーボタン&lt;/li&gt;&#10;&lt;li&gt;&lt;code&gt;&amp;gt; [!NOTE]&lt;/code&gt; などの注記&lt;/li&gt;&#10;&lt;li&gt;全文を配信する RSS&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h2 id="デザイン"&gt;デザイン&lt;/h2&gt;&lt;p&gt;全体は、大きな文字と太い線を使い、色は紫だけに絞ったデザインにしました。&lt;/p&gt;&#10;&lt;h3 id="記事一覧"&gt;記事一覧&lt;/h3&gt;&lt;p&gt;いちばん悩んだのは記事一覧です。最初は日付とタイトルだけのリストでしたが、サムネイル付きの記事が多かったので、画像も見せたくなりました。&lt;/p&gt;&#10;&lt;p&gt;そこで Claude に頼んで、画像を右に置く、左に置く、カードにする、最新の記事だけ大きくする、といった案を実際に作ってもらい、画面で切り替えながら見比べました。頭の中で想像して決めるより、並べて見たほうがずっと早く決まります。最終的に、画像が上にある箱型のカードにしました。カードのどこを押しても記事を開けます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2026-09-30-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92hugo%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/list-light.png" alt="記事一覧のカード" width="1088" height="824" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;h3 id="サムネイルがない記事"&gt;サムネイルがない記事&lt;/h3&gt;&lt;p&gt;カードにすると、サムネイルがない記事の見せ方が問題になります。最初はタイトル入りの OGP 画像を出していましたが、カードの下にもタイトルがあるので、同じ文字が 2 回並んでしまいました。&lt;/p&gt;&#10;&lt;p&gt;ほかのサイトがどうしているかを Claude に調べてもらうと、画像の枠ごと消す、サイト共通の画像を出す、カテゴリごとの絵を出す、といったやり方がありました。その中から GitHub Blog を参考に、カテゴリごとの共通の絵を出すことにしました。絵も Claude に SVG で描いてもらっています。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;「Web開発」：ブラウザの窓&lt;/li&gt;&#10;&lt;li&gt;「報告」：新聞&lt;/li&gt;&#10;&lt;li&gt;それ以外：サイトの色の図形&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;ダークモードでは、絵も暗い配色に切り替わります。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2026-09-30-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92hugo%E3%81%A7%E4%BD%9C%E3%82%8A%E7%9B%B4%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/list-dark.png" alt="ダークモードの記事一覧" width="1088" height="824" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;h2 id="旧記事の移植"&gt;旧記事の移植&lt;/h2&gt;&lt;p&gt;home.rengedev.com の記事 15 本は、Claude が書いた Python のスクリプトでまとめて移しました。画像のダウンロード、見出しの階層の調整、記事どうしのリンクの書き換えをスクリプトで行っています。&lt;/p&gt;&#10;&lt;p&gt;ただ、移しただけでは崩れている部分がありました。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;昔の WordPress 時代の URL が残っていた&lt;/li&gt;&#10;&lt;li&gt;箇条書きの記号がエスケープされて、ただの文字として表示されていた&lt;/li&gt;&#10;&lt;li&gt;画像が失われて、「変更前」「変更後」の中身が空になっていた&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;これらは Claude に全記事を点検してもらい、まとめて直しました。また、古い構成について書いた記事には「※当時の内容です。」と付けています。&lt;/p&gt;&#10;&lt;h2 id="claude-と作ってみて"&gt;Claude と作ってみて&lt;/h2&gt;&lt;p&gt;自分で手を動かさなくていいので、とても楽でした。特に良かったのは、「色々なパターンを見たい」と頼むと、切り替えて見比べられる形で出してくれることです。記事一覧のデザインも、この方法で決めました。&lt;/p&gt;&#10;&lt;p&gt;一方で、任せきりにはできません。「実在するサイトの例は？」と聞いたとき、最初は確かめずに例を挙げてきて、あとから自分で取り消したことがありました。任せる部分が増えても、間違った方向に進んでいることに自分で気付けるように、エンジニアとしての感覚は忘れないようにしていく必要がありそうです。&lt;/p&gt;&#10;&lt;p&gt;これからは、気が向いたときにこちらで記事を書いていきます。&lt;/p&gt;&#10;</description></item><item><title>サイトをリニューアル</title><link>https://blog.rengedev.com/posts/2026-03-22-%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2026-03-22-%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB/</guid><pubDate>Sun, 22 Mar 2026 00:00:00 +0900</pubDate><category>報告</category><description>&lt;p&gt;サイトをリニューアルしました。&lt;/p&gt;&#10;&lt;p&gt;できれば更新頻度を上げていきたい所存。&lt;/p&gt;&#10;</description></item><item><title>Hugoのフォントを日本語化しました</title><link>https://blog.rengedev.com/posts/2025-08-16-hugo%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2025-08-16-hugo%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</guid><pubDate>Sat, 16 Aug 2025 00:00:00 +0900</pubDate><category>Hugo</category><category>Web開発</category><category>Stackテーマ</category><category>日本語フォント</category><category>カスタマイズ</category><description>&lt;p&gt;Hugoで使用しているテーマのフォントが中国語フォント優先になってしまい、文字がガタついて見える状態になっていました。そこで、日本語フォントを優先して使用するように設定を変更しました。&lt;/p&gt;&#10;&lt;p&gt;対応方法は、使用中テーマの&lt;a href="https://stack.jimmycai.com/config/header-footer#example-custom-font-family-for-article-content"&gt;公式ドキュメント&lt;/a&gt;が参考になります。&lt;/p&gt;&#10;&lt;p&gt;公式ドキュメントには、次のように記載されています。&lt;/p&gt;&#10;&lt;p&gt;Create layouts/partials/head/custom.html under your Hugo site folder, with following code:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-html" data-lang="html"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;style&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* Overwrite CSS variable */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;root&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--article-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;Merriweather&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;base&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;font&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;family&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;style&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;customFont&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;link&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;customFont&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&amp;amp;display=swap&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;customFont&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;text/css&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;customFont&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;stylesheet&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;head&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;customFont&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}());&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;この記述を参考に、layouts/partials/head/custom.html を作成し、以下のように編集しました。&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-html" data-lang="html"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;style&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* Stackテーマの主要フォント変数を一括で上書き */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;root&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* 基本文字 */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--base-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;Noto Sans JP&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* 記事本文 */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--article-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;base&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;font&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;family&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* 見出し */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--heading-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;Noto Serif JP&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* サイドバーやウィジェット */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--sidebar-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;base&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;font&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;family&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c"&gt;/* コード部分 */&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nv"&gt;--code-font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;Fira Code&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;monospace&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;style&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="kr"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;link&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;link&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;amp;family=Noto+Serif+JP&amp;amp;family=Fira+Code&amp;amp;display=swap&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;&amp;#34;stylesheet&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;head&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;link&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;})();&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;script&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;編集後、ビルドキャッシュをクリアして開発サーバーを再起動し、フォント設定が反映されていることを確認します。&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;hugo --cleanDestinationDir&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;hugo server&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;今回のケースでは、公式ドキュメントを見つけることができれば対応自体は簡単でした。しかし、Hugo標準の設定だけで対応しようとすると、テーマ独自のスタイル上書きが働き、思うように反映されないことが何度もありました。 やはり、最初に公式ドキュメントを確認することの重要性を再認識しました。&lt;/p&gt;&#10;</description></item><item><title>サイトのベースをHugoに切り替えました</title><link>https://blog.rengedev.com/posts/2025-08-14-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92hugo%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%BE%E3%81%97%E3%81%9F/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2025-08-14-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92hugo%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%BE%E3%81%97%E3%81%9F/</guid><pubDate>Thu, 14 Aug 2025 00:00:00 +0900</pubDate><category>Web開発</category><category>報告</category><description>&lt;p&gt;サイトの再構築がある程度完了しました。&lt;br&gt;&#10;随分と手探りなところが多いですが、再構築を行いました。&lt;br&gt;&#10;サイトを閲覧する人からわかる範囲では全体的に見た目が変わったことくらいかなと思います。&lt;br&gt;&#10;今使っている見た目はまだテストの段階なので今後最適化していく予定です。&lt;/p&gt;&#10;&lt;p&gt;最近だとGPT-5がリリースされましたし、それに頼ってデザインをすべて任せるのも面白そうです。&lt;br&gt;&#10;記事を簡単に投稿するための環境整備を夏休みの間に終わらしておかないと私は毎日ゲームをする生活に戻ってしまうのは明らかなので、休みにもかかわらず稼働時間が仕事をしているときより上がっているかもしれません。&lt;/p&gt;&#10;&lt;p&gt;Hugoの運用方法がまだよくわからないところが多いのでやったことある人はなんか教えてほしいです。&lt;/p&gt;&#10;</description></item><item><title>サイトが復旧しました</title><link>https://blog.rengedev.com/posts/2025-08-08-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C%E5%BE%A9%E6%97%A7%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2025-08-08-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8C%E5%BE%A9%E6%97%A7%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</guid><pubDate>Fri, 08 Aug 2025 00:00:00 +0900</pubDate><category>Web開発</category><category>報告</category><description>&#10;&lt;blockquote&gt;&#10; &lt;p&gt;※当時の内容です。&lt;/p&gt;&#10;&#10;&lt;/blockquote&gt;&#10;&lt;p&gt;かれこれ半年ほど復旧できないまま放置されていたこのサイトが復旧しました。&lt;br&gt;&#10;いままで復旧できなかった原因としては以下の3点が挙げられます。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;私がずっとゲームをしていたこと&lt;/li&gt;&#10;&lt;li&gt;無駄に難しい構成でサイトを構成したため作った私自身が訳が分からなくなってしまっていたこと&lt;/li&gt;&#10;&lt;li&gt;なんか普通に存在を忘れていたこと&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;これからも気が向き次第更新を続けていく所存です。&lt;/p&gt;&#10;&lt;p&gt;ところでwordpressの記事作成はMarkdownを使えないんでしょうか？&lt;br&gt;&#10;最近は仕事で基本的にMarkdown形式でメモを取るようになったので、記事を書くのもMarkdownで書きたいところです。&lt;br&gt;&#10;加えて仕事で理由なくvimを使い続けた結果、vimの操作でテキストを編集するというやり方をすべての状況でやりたくなる病(やまい)になってしまっているので普通のテキスト編集が現在苦痛です。&lt;br&gt;&#10;これを解決するためにこれからwordpressでMarkdownが使えないのか・vimの操作で編集できないのか調べてできないならできるようにサイトをまた作り直すことになるので、このサイトがまた再誕したときにまたお会いしましょう。&lt;br&gt;&#10;では。&lt;/p&gt;&#10;</description></item><item><title>Rengedev.com準備状況（2024年6月27日）</title><link>https://blog.rengedev.com/posts/2024-06-27-rengedev-com%E6%BA%96%E5%82%99%E7%8A%B6%E6%B3%812024%E5%B9%B46%E6%9C%8827%E6%97%A5/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-27-rengedev-com%E6%BA%96%E5%82%99%E7%8A%B6%E6%B3%812024%E5%B9%B46%E6%9C%8827%E6%97%A5/</guid><pubDate>Thu, 27 Jun 2024 00:00:00 +0900</pubDate><category>報告</category><description>&#10;&lt;blockquote&gt;&#10; &lt;p&gt;※当時の内容です。&lt;/p&gt;&#10;&#10;&lt;/blockquote&gt;&#10;&lt;p&gt;現サイトrengedev_homeは元々Rengedev.comの構築の片手間として、実装が簡単なwordpressを使用し作成しています。&lt;/p&gt;&#10;&lt;p&gt;現状は技術系の情報を発信することを主とした内容はこちらに配信していますが、ウェブサイトの技術を試験するために最初はrengedev.comを構築していました。&lt;/p&gt;&#10;&lt;p&gt;そのrengedev.comですが、一旦テストページの公開ができる状態まで復旧しましたので、ご報告します。&lt;/p&gt;&#10;&lt;p&gt;中身は全くないですが、ひまだったら覗いて見ても良いかもしれません。&lt;/p&gt;&#10;&lt;p&gt;&lt;a href="https://rengedev.com"&gt;https://rengedev.com&lt;/a&gt;&lt;/p&gt;&#10;</description></item><item><title>如月開発アバター 色を変える（部分ごと）</title><link>https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/</guid><pubDate>Thu, 27 Jun 2024 00:00:00 +0900</pubDate><category>VRC</category><description>&lt;p&gt;今回は&lt;a href="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/"&gt;前回の記事&lt;/a&gt;を理解している前提で、細かいことはめちゃくちゃ省略した、スクリーンショット貼り付け大会です。&lt;/p&gt;&#10;&lt;p&gt;早速始めていきます。&lt;br&gt;&#10;前回はテクスチャーファイルを編集しましたが根本的な部分を編集したい場合にはこちらのマテリアルを編集する必要があります。&lt;/p&gt;&#10;&lt;p&gt;むしろこっちを編集するほうが結果的には前回よりわかりやすいかもしれない&lt;/p&gt;&#10;&lt;p&gt;MaterialsのKarada&lt;del&gt;のファイルを複製し、kaihen_Karada&lt;/del&gt;と命名しました。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/image-25.png" alt="" width="769" height="157" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;加えて、初級編で行ったようにTextureのpngファイルも複製し、kaihen_~~と命名します。&lt;br&gt;&#10;そして、画像を編集し、好きな色に変更します。&lt;br&gt;&#10;今回は体のベース色部分を水色、目をピンクにしました。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/image-26.png" alt="" width="719" height="140" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/image-27.png" alt="" width="838" height="804" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;この編集を行った時点では、画面上のアバターに変化は起きていないが、Materialのkaihen~~ファイルをScene上のアバターの色を変えたい部分にドラッグアンドドロップしてみると、その部分の色が変更されます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/cfb4595de832db0a26602b519fa9e61c.png" alt="" width="780" height="409" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;成功！&lt;/p&gt;&#10;&lt;p&gt;これを応用すれば腕だけをもとの色にしたりすることも簡単にできるはずです。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/image-29.png" alt="" width="780" height="340" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;さすがにこれはおかしいか、&lt;/p&gt;&#10;&lt;p&gt;注意点としては、パーツごとにマテリアルが適応されるため、細かい調整はできないです。&lt;br&gt;&#10;ですが、難易度を無視すればpngファイルの元々の色分けを無視した編集を加えることで、パーツの区分を無視して色変更が可能なはずです。（私は面倒なのでやってません）&lt;/p&gt;&#10;&lt;p&gt;いろいろ試してみましょう。&lt;/p&gt;&#10;&lt;p&gt;今回は全体的に雑に作っているのでわからなかった部分を教えてくれたら、改善する気持ちはあります。よろしくお願いします。&lt;/p&gt;&#10;</description></item><item><title>破壊報告（2024年6月24日）</title><link>https://blog.rengedev.com/posts/2024-06-25-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%8824%E6%97%A5/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-25-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%8824%E6%97%A5/</guid><pubDate>Tue, 25 Jun 2024 00:00:00 +0900</pubDate><category>パイルバンカー</category><description>&lt;p&gt;スト6でbishaさんを破壊しました。&lt;br&gt;&#10;初心者の顔してクラシックでめちゃくちゃ対抗してくるので、怖いです。&lt;br&gt;&#10;絶対おかしいです。&lt;/p&gt;&#10;</description></item><item><title>破壊要求（2024年6月12日）</title><link>https://blog.rengedev.com/posts/2024-06-12-%E7%A0%B4%E5%A3%8A%E8%A6%81%E6%B1%822024%E5%B9%B46%E6%9C%8812%E6%97%A5/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-12-%E7%A0%B4%E5%A3%8A%E8%A6%81%E6%B1%822024%E5%B9%B46%E6%9C%8812%E6%97%A5/</guid><pubDate>Wed, 12 Jun 2024 00:00:00 +0900</pubDate><category>パイルバンカー</category><description>&lt;p&gt;bishaさんを最近破壊できていないので、破壊したかったです。&lt;br&gt;&#10;でも、昨日音ゲーで破壊できたのでOKです。&lt;/p&gt;&#10;</description></item><item><title>如月開発アバター 色を変える（初心者向け）</title><link>https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/</guid><pubDate>Tue, 11 Jun 2024 00:00:00 +0900</pubDate><category>VRC</category><description>&lt;h2 id="概要"&gt;概要&lt;/h2&gt;&lt;p&gt;あなたはロボっ子アバターに限らず、アバターの髪や装飾品の色を変えたくなることがあります。&lt;br&gt;&#10;やっていきましょう。&lt;br&gt;&#10;※今回は初心者向けなので細かめに書きますが、面倒なので基本雑です&lt;/p&gt;&#10;&lt;h2 id="準備"&gt;準備&lt;/h2&gt;&lt;ul&gt;&#10;&lt;li&gt;アバターを買う&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;今回は「23式曙ちゃん」使って改変していきますが、17式以降のアバターであれば、構造はほぼ同じらしいので、同様に改変できると信じています。&lt;/p&gt;&#10;&lt;h2 id="改変"&gt;改変&lt;/h2&gt;&lt;h3 id="デフォルトアバターを準備知っていれば飛ばしてください"&gt;デフォルトアバターを準備（知っていれば飛ばしてください）&lt;/h3&gt;&lt;p&gt;Unityプロジェクトを開いた後に「~.unitypackage」をダブルクリックでアセットをインポートします。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;Type-23.unitypackageをダブルクリック&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-4.png" alt="" width="703" height="133" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;importをクリック&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-import.png" alt="" width="352" height="582" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;今回の場合はType-23が追加されました。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-5.png" alt="" width="266" height="124" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;この中のPrefabフォルダに入っているファイルが実質アバターの本体です。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-6.png" alt="" width="214" height="128" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;これの中からどれかを選んでHierarchyタブへドラッグアンドドロップでSceneタブへアバターが表示されます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-7.png" alt="" width="362" height="308" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;Hierarchyタブへドラッグアンドドロップ&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-8.png" alt="" width="780" height="447" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;実はこのままだとこのアバターのテクスチャが表示されません。&lt;br&gt;&#10;表示できるようにします。&lt;br&gt;&#10;&lt;a href="https://booth.pm/ja/items/3087170"&gt;ここ&lt;/a&gt;からlilToonをダウンロードして、インポートします。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;lilToonをインポート&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-9.png" alt="" width="780" height="522" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;インポートしたらAssetsタブにlilToonが追加され、自動でテクスチャが表示されるはず。&lt;/p&gt;&#10;&lt;h3 id="色変え"&gt;色変え&lt;/h3&gt;&lt;p&gt;本番です。やります。&lt;/p&gt;&#10;&lt;p&gt;まず、なんでやるか理由は忘れましたが、Hierarchyのアバターを右クリックして、Prefab→Unpack Completelyをクリックして、プレハブを解体します。&lt;br&gt;&#10;多分やんないと、うまくいかないんだと思います。（脳死）&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-10.png" alt="" width="571" height="784" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;Prefab→Unpackを実行&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-11.png" alt="" width="222" height="278" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;すっげー白くなってる&amp;hellip;&lt;/p&gt;&#10;&lt;p&gt;アバターの直下には「Armature」とそれ以外がありますが、「Armature」以外をクリックしてみると、対応する部品の外枠がオレンジの線で囲われるのが見えると思います。&lt;br&gt;&#10;※Sceneから直接クリックしても同様の表示になる&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;「Dragon Tail」を選択すると、しっぽ部分が強調された表示になる&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-12.png" alt="" width="780" height="291" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;試しにしっぽの色を変えていきます。&lt;/p&gt;&#10;&lt;p&gt;選択した後に、右側のInspectorタブを見るとこんな感じになってますが、&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-13.png" alt="" width="447" height="758" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;下のShaderと書いてあるところを開いて、色設定→メインカラー／透過設定（色変え）と続けて開いていきます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-14.png" alt="" width="452" height="464" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;※ここから先は色変えのパターンが2つあります。好きなほうでやってみてください&lt;/p&gt;&#10;&lt;h4 id="パターン1簡単色変え"&gt;パターン1：簡単色変え&lt;/h4&gt;&lt;p&gt;色調補正を開いてみると、これが表示され&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-17.png" alt="" width="419" height="304" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;主に色相を調整することで、全体的に色を変更できると思います。&lt;br&gt;&#10;それ以外のパラメータも気分で変えてみてください。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-18.jpg" alt="" width="780" height="356" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;今回は青色にしてみました。&lt;br&gt;&#10;ここで気づくと思いますが、しっぽだけ変えようとしていたのに全体的に色が変わっています。&lt;br&gt;&#10;これを何とかしようとすると若干複雑になるので今回はこれで勘弁してください。&lt;/p&gt;&#10;&lt;p&gt;あとはアップロードしてみてください。これで完成です。（投げやり）&lt;/p&gt;&#10;&lt;p&gt;　　終&lt;br&gt;&#10;制作・著作&lt;br&gt;&#10;━━━━━&lt;br&gt;&#10;　ⓃⒽⓀ&lt;/p&gt;&#10;&lt;h4 id="パターン2テクスチャファイルを編集して色変え"&gt;パターン2：テクスチャファイルを編集して色変え&lt;/h4&gt;&lt;p&gt;&lt;a href="#%E8%89%B2%E5%A4%89%E3%81%88"&gt;ここ&lt;/a&gt;からのつづきになります。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-14-2.png" alt="" width="452" height="464" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;ここの「色」と書いてあるところの左に、昔のテレビのカラーバーみたいな画像が見えると思います。&lt;br&gt;&#10;クリックすると、Assetsタブの参照フォルダが切り替わり、このシェーダー設定が参照しているテクスチャー用pngファイルが確認できます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-16.png" alt="" width="563" height="131" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;黄色い枠で囲われてるやつがそれ&lt;/p&gt;&#10;&lt;p&gt;このpngファイルを編集すれば、自由に色変更できるというわけじゃい！&lt;/p&gt;&#10;&lt;p&gt;編集する前に元のファイルをコピーして上書きしないようにしておきます。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-18.png" alt="" width="682" height="142" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;私はコピーしたファイルに「Type-23_Texture_DragonTail」と名付けておきました。&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-19.png" alt="" width="152" height="93" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;早速このファイルをなにかしらの画像編集ソフトを使って編集し、色を自由に変えてみましょう。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;コピーしたpngファイルを右クリックし、メニューから「Show in Explorer」をクリック&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-20.png" alt="" width="420" height="728" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;このファイルを編集します&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-21.png" alt="" width="656" height="41" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;windows11に最初からインストールされているペイントでは、うまく表示できないので、私はやっぱり&lt;a href="https://www.gimp.org/"&gt;GIMP&lt;/a&gt;を使います。&lt;/p&gt;&#10;&lt;p&gt;編集した後、Assetsにある「Type-23_Texture_DragonTail」を&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-23.png" alt="" width="72" height="53" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;Shader→色設定→メインカラー／透過設定（色変え）→メインカラーのテレビのカラーバーにシューーーート！！（ドラッグアンドドロップ）&lt;/p&gt;&#10;&lt;p&gt;&#10;&lt;img src="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/image-24.jpg" alt="" width="780" height="360" loading="lazy" decoding="async"&gt;&lt;/p&gt;&#10;&lt;p&gt;全部青くなっちゃったァ&amp;hellip;&lt;/p&gt;&#10;&lt;p&gt;しっぽだけ色変えできると思っていたでしょう。あれは嘘だ。&lt;/p&gt;&#10;&lt;p&gt;今回の改変はここで終了です。アップロードしてみてください。ちゃんと色が変わっているはず。&lt;br&gt;&#10;次回、しっぽだけ&lt;a href="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/"&gt;色変え編&lt;/a&gt;でお会いしましょう。さようなら&lt;/p&gt;&#10;</description></item><item><title>VRC 如月開発アバター改変 個人的まとめ</title><link>https://blog.rengedev.com/posts/2024-06-09-vrc-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E6%94%B9%E5%A4%89-%E5%80%8B%E4%BA%BA%E7%9A%84%E3%81%BE%E3%81%A8%E3%82%81/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-09-vrc-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E6%94%B9%E5%A4%89-%E5%80%8B%E4%BA%BA%E7%9A%84%E3%81%BE%E3%81%A8%E3%82%81/</guid><pubDate>Sun, 09 Jun 2024 00:00:00 +0900</pubDate><category>VRC</category><description>&lt;h2 id="概要"&gt;概要&lt;/h2&gt;&lt;p&gt;今後、人に教えてもらいつつ、如月開発のアバターを改変していく予定なので、私が改変するためのメモをここに随時追記していきます。（今はほとんど情報ないです）&lt;/p&gt;&#10;&lt;h3 id="如月開発について"&gt;如月開発について&lt;/h3&gt;&lt;p&gt;&lt;a href="https://kawawawawawa.booth.pm/"&gt;如月開発&lt;/a&gt;はBOOTHで出店しており、VRC向けのロボっ子アバターを主に販売しています。（だと私は思っている）&#10;改変なしでもかなりGOODで、お値段も全体的に安いため初心者に広めたいシリーズです。&lt;/p&gt;&#10;&lt;p&gt;アバターの相場を考えるともっとお金とっていいと思いますが、その分大量購入しろという神の思し召しを感じています。&lt;/p&gt;&#10;&lt;h3 id="前提"&gt;前提&lt;/h3&gt;&lt;p&gt;いきなり如月開発アバター改変するぜ～～～！！&#10;とはならないとは思いますが、何も準備も経験もない場合は&lt;a href="https://metacul-frontier.com/?p=4893"&gt;こちらの記事&lt;/a&gt;が参考になるかと思います。（私は最初にこの記事を見てアバターのアップロードをした記憶があります。）&#10;最近、VRCの対応Unityバージョンが2022.3.22f1になったため、もしかしたら上記記事で補完できない部分があるかもしれないですが、基本的には問題ないはず。&lt;/p&gt;&#10;&lt;p&gt;以下前提です。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;VCC（VRChat Creator Companion）をインストール済み&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;Unityバージョンが2022.3.22f1&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;アバターのアップロード方法を知っている（やったことがある）&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;如月開発アバターを買ってる！！！！！&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h2 id="改変"&gt;改変&lt;/h2&gt;&lt;h3 id="初級"&gt;初級&lt;/h3&gt;&lt;ul&gt;&#10;&lt;li&gt;&lt;a href="https://blog.rengedev.com/posts/2024-06-11-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91/"&gt;色を変える（初心者向け）&lt;/a&gt;&lt;/li&gt;&#10;&lt;li&gt;&lt;a href="https://blog.rengedev.com/posts/2024-06-27-%E5%A6%82%E6%9C%88%E9%96%8B%E7%99%BA%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC-%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E9%83%A8%E5%88%86%E3%81%94%E3%81%A8/"&gt;色を変える（部分ごと）&lt;/a&gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h3 id="中級"&gt;中級&lt;/h3&gt;&lt;ul&gt;&#10;&lt;li&gt;blenderで改変（準備中）&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h3 id="上級"&gt;上級&lt;/h3&gt;&lt;ul&gt;&#10;&lt;li&gt;まだなし&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;h3 id="余談"&gt;余談&lt;/h3&gt;&lt;p&gt;まだ何もないので、ほぼ情報なーーーい&lt;/p&gt;&#10;&lt;h2 id="今後のtodo"&gt;今後のTODO&lt;/h2&gt;&lt;ul&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;Unityのみ（Blenderを使わない）でできる範囲の改変を調査&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;キ写会コミュニティから得た知識をここに記載&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;Blenderを使用した改変方法をマニュアル化&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;</description></item><item><title>破壊報告（2024年6月10日）</title><link>https://blog.rengedev.com/posts/2024-06-09-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%8810%E6%97%A5/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-09-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%8810%E6%97%A5/</guid><pubDate>Sun, 09 Jun 2024 00:00:00 +0900</pubDate><category>パイルバンカー</category><description>&lt;p&gt;bishaさんをパイルバンカーで約4回ほど破壊しました。&lt;br&gt;&#10;四脚でぶん殴ってから、軽くジャンプして近づきながらパイルバンカーを叩き込みました。&lt;br&gt;&#10;吹っ飛んでいく様がいとをかしと思いました。&lt;br&gt;&#10;次回の破壊をご期待ください。&lt;/p&gt;&#10;</description></item><item><title>サイトを公開しました</title><link>https://blog.rengedev.com/posts/2024-06-08-%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-08-%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/</guid><pubDate>Sat, 08 Jun 2024 00:00:00 +0900</pubDate><category>報告</category><description>&lt;p&gt;情報共有や作業の記録のため、新たにこのサイトを作成しました。&lt;br&gt;&#10;VRC関連やweb開発関連、気が向けばその他の内容もこのサイトに記録していきます。&lt;br&gt;&#10;おそらく、しばらくたったら更新されなくなるOR操作ミスでデータがすべて消えます。&lt;br&gt;&#10;対戦よろしくお願いします。&lt;/p&gt;&#10;</description></item><item><title>現在構築中のウェブサイトの構成について</title><link>https://blog.rengedev.com/posts/2024-06-08-%E7%8F%BE%E5%9C%A8%E6%A7%8B%E7%AF%89%E4%B8%AD%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-08-%E7%8F%BE%E5%9C%A8%E6%A7%8B%E7%AF%89%E4%B8%AD%E3%81%AE%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/</guid><pubDate>Sat, 08 Jun 2024 00:00:00 +0900</pubDate><category>Web開発</category><description>&#10;&lt;blockquote&gt;&#10; &lt;p&gt;※当時の内容です。&lt;/p&gt;&#10;&#10;&lt;/blockquote&gt;&#10;&lt;h2 id="経緯"&gt;経緯&lt;/h2&gt;&lt;p&gt;去年ごろにVPSを借り、半年ほどウェブサイトの構築を行っていました。&lt;br&gt;&#10;その中で一度は公開までこぎ着けたものの、結果的に完成したものは拡張性が低く私の満足いく成果物とはなりませんでした。&lt;br&gt;&#10;そこで完全にそこまで作っていたものを破壊して、一から作り直そうということになりました。&lt;br&gt;&#10;そして、そこから半年間、私は一生懸命にゲームを続けていました&amp;hellip;&lt;br&gt;&#10;その努力が実り、今このウェブサイトの構築が開始されたというわけです。&lt;br&gt;&#10;では、今回構築したウェブサイトの概要を確認していきます。&lt;/p&gt;&#10;&lt;p&gt;※かなり曖昧な知識で説明するので、間違いだらけになっているはず、細かいことは気にしないでほしい&lt;/p&gt;&#10;&lt;h2 id="このウェブサイトの構成"&gt;このウェブサイトの構成&lt;/h2&gt;&lt;h3 id="技術スタック的な何か"&gt;技術スタック的な何か&lt;/h3&gt;&lt;p&gt;このサイトはこれらの技術（？）を使っています。&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;docker&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;nginx&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;wordpress&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;mysql&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;li&gt;&#10;&lt;p&gt;ssl&lt;/p&gt;&#10;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;この中で重要なのはdockerとリバースプロキシのために使用したnginxです。（当然webサーバとしてnginxは使用していますが省略します）&lt;/p&gt;&#10;&lt;h3 id="構成"&gt;構成&lt;/h3&gt;&lt;p&gt;本来であれば図を用意して、見せるべきですが面倒なのでやりません。&lt;/p&gt;&#10;&lt;h4 id="リバースプロキシ"&gt;リバースプロキシ&lt;/h4&gt;&lt;p&gt;まず、特に問題なくこのサイトが見れているというのであれば、それはSSL証明書を使ってhttps接続ができているということです。&lt;br&gt;&#10;その通信暗号化を行っているのはこのサイトにアクセスする際に最初にリクエストを受け取るリバースプロキシ用のnginxサーバです。&lt;br&gt;&#10;リクエストを受けたnginxサーバは、暗号化を行った後、どのサブドメインにアクセスしようとしていたかを判断し、私が設定した通りに、それぞれのwebサーバへ中継を行います。&lt;br&gt;&#10;それにより、home.rengedev.comとrengedev.comへhttpsで接続できています。&lt;/p&gt;&#10;&lt;p&gt;webサーバはdockerのnginxサーバを立てています。リバースプロキシ用nginxサーバからnginxサーバとapachサーバ（wordpressサーバ）2つへ分岐しているので、一か所で通信暗号化ができて一度で二度おいしいというわけです。&lt;/p&gt;&#10;&lt;p&gt;このように構成することで拡張性をもってウェブ開発ができ、今後新しいサービスを運営したいときに、適当にwebサーバを追加するだけでポンポンサービスを増やしていけます。&lt;/p&gt;&#10;&lt;h4 id="wordpress"&gt;wordpress&lt;/h4&gt;&lt;p&gt;このサイトはwordpressを使っています。&lt;br&gt;&#10;インストールするだけでウェブサイトを勝手に作ってくれるなんて便利な時代ですね。&lt;/p&gt;&#10;&lt;p&gt;技術スタックとして、dockerを使用しているといっていましたが、wordpressはdockerを使って構築しています。&lt;br&gt;&#10;具体的には、dockerのimageとしてwordpress公式が用意してくれているwordpressイメージをそのまま使っているだけです。&lt;br&gt;&#10;使っているだけなので特にいうことはないです。便利だよねdocker。&lt;/p&gt;&#10;&lt;h2 id="雑談"&gt;雑談&lt;/h2&gt;&lt;p&gt;このサイトの構成に関して、概要だけ記載しましたが、一旦公開できる状態になっただけなのでめっちゃ時間をかけてスタートラインに立った状態です。&lt;br&gt;&#10;今後は現在機能していないrengedev.comのサイトの再構築と気が向いたらこっちのサイトの更新を続けていこうと思います。&lt;/p&gt;&#10;&lt;p&gt;bishaさんの破壊報告だけしていたら、bishaさんにほかにも報告すべきことがあると抗議されたので仕方なくそれ以外のものを書きました。&lt;br&gt;&#10;今後はbishaさんの破壊報告専門のサイトとなります。今後ともご愛顧のほどよろしくお願い致します。&lt;/p&gt;&#10;</description></item><item><title>破壊報告（2024年6月８日）</title><link>https://blog.rengedev.com/posts/2024-06-08-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%88%EF%BC%98%E6%97%A5/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-08-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%88%EF%BC%98%E6%97%A5/</guid><pubDate>Sat, 08 Jun 2024 00:00:00 +0900</pubDate><category>パイルバンカー</category><description>&lt;p&gt;昨日の夜ですが、bishaさんをパイルバンカーで3回破壊しました。&lt;br&gt;&#10;以上、よろしくお願いします。&lt;/p&gt;&#10;</description></item><item><title>破壊報告（2024年6月8日）追加</title><link>https://blog.rengedev.com/posts/2024-06-08-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%888%E6%97%A5%E8%BF%BD%E5%8A%A0/</link><guid isPermaLink="true">https://blog.rengedev.com/posts/2024-06-08-%E7%A0%B4%E5%A3%8A%E5%A0%B1%E5%91%8A2024%E5%B9%B46%E6%9C%888%E6%97%A5%E8%BF%BD%E5%8A%A0/</guid><pubDate>Sat, 08 Jun 2024 00:00:00 +0900</pubDate><category>パイルバンカー</category><description>&lt;p&gt;GGSTにもパイルバンカーがあるのでbishaさんを破壊します。&lt;br&gt;&#10;よろしくお願いします。&lt;/p&gt;&#10;</description></item></channel></rss>