<p>Twitter 上にはあらゆる画像が存在するが、検索ワードを工夫することでより効率的に画像を探すことができる。</p>
<p>そのワードのマジで個人的なメモ。</p>
<h1>前置き</h1>
<p>Twitter にはさまざまな条件をつけて検索ができる、「高度な検索」という機能がある (どこにあるのかわかりずらいし使いづらいから使いやすくなってくれ...)</p>
<p>https://twitter.com/search-advanced?lang=ja</p>
<p>注意点として、検索結果は微妙にパーソナライズされているため、プライベートタブでやるとバイアスが軽減されると思う。</p>
<h2>含む/含まない などの指定</h2>
<h3>必ず含む</h3>
<p>普通にやる</p>
<p><code>A B</code></p>
<h3>空白を含むワードをそのまま含む</h3>
<p><code>&quot;&quot;</code> で囲む</p>
<p><code>&quot;A B&quot;</code></p>
<h3>どちらかを含む</h3>
<p><code>()</code> で囲って OR でつなぐ</p>
<p><code>(A OR B)</code></p>
<h3>含まない</h3>
<p>ワードの先頭に <code>-</code> をつける</p>
<p><code>-A -B </code></p>
<h2>パラメーター指定</h2>
<h3>最小リプライ数</h3>
<p><code>min_replies:100</code></p>
<h3>最小いいね数</h3>
<p><code>min_faves:100</code></p>
<h3>最小リツイート数</h3>
<p><code>min_retweets:100</code></p>
<h2>その他</h2>
<h3>言語</h3>
<p>英語なら <code>en</code> 。日本語なら <code>ja</code></p>
<p><code>lang:en</code></p>
<h3>特定の日付以降を検索</h3>
<p><code>since:2022-12-31</code></p>
<h3>特定の日付までを検索</h3>
<p><code>until:2023-04-30</code></p>
<h3>リンク・画像を含む</h3>
<p><code>filter:links</code></p>
<h3>リプライを含む</h3>
<p><code>filter:replies</code></p>
<h1>ワード一覧</h1>
<h2>二次創作</h2>
<p>VTuberならその二次創作タグがあるのでそれを使う。アニメやゲームでも、大抵はよく使われるタグがあるのでそれ検索すれば大抵ヒットする。</p>
<h2>他</h2>
<table>
<thead>
<tr>
<th>ワード</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://twitter.com/search?q=sketch%20final%20min_faves%3A100&amp;src=typed_query">sketch final min_faves:100</a></td>
<td>スケッチと完成画像のペア二枚が多い</td>
</tr>
<tr>
<td><a href="https://twitter.com/search?q=%E3%82%A2%E3%82%AF%E3%83%AA%E3%83%AB%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%89%20%E5%B1%8A%E3%81%84%E3%81%9F&amp;src=typed_query&amp;f=top">アクリルスタンド 届いた</a></td>
<td>アクリルスタンドが届いたときに撮影された画像がついたツイート</td>
</tr>
<tr>
<td><a href="https://twitter.com/search?q=%E3%82%A2%E3%82%AF%E3%82%B9%E3%82%BF%20%E5%B1%8A%E3%81%84%E3%81%9F&amp;src=typed_query&amp;f=top">アクスタ 届いた</a></td>
<td>アクスタが届いたときの写真がついたツイート</td>
</tr>
<tr>
<td><a href="https://twitter.com/search?q=%E4%BD%9C%E7%94%BB%20(%E6%8B%85%E5%BD%93%20OR%20%E5%8F%82%E5%8A%A0%20OR%20%22%22)%20%E6%8E%B2%E8%BC%89%20%E8%A8%B1%E5%8F%AF&amp;src=typed_query">作画 (担当 OR 参加 OR &quot;&quot;) 掲載 許可</a></td>
<td>作画を担当した人が許可をもらって原画などを載せたツイートが多いがノイズも多いし数も少ないかも</td>
</tr>
<tr>
<td><a href="https://twitter.com/search?q=%E3%82%AB%E3%83%83%E3%83%88%E3%80%80%E6%8B%85%E5%BD%93%E3%80%80%E8%A8%B1%E5%8F%AF&amp;src=typed_query">カット　担当　許可</a></td>
<td>カットを担当した人が許可をもらってなにかの画像を添付したツイート</td>
</tr>
<tr>
<td><a href="https://twitter.com/search?q=source%20credits%20lang%3Aen&amp;src=typed_query&amp;f=top">source credits lang:en</a></td>
<td>クレジット付きでどっかの画像を転載しているツイートが出てくる (大抵はpixivのイラスト)</td>
</tr>
</tbody>
</table>


画像のデータセット収集に使えるかもしれない Twitter 検索の個人的メモ

Stable Diffusion の追加学習に使う画像を集める

<p>最終更新日時に注意してください。この記事を読んでいるときには既に古い情報となっている可能性があります。</p>
<p>私の作ったモデルについては多少制作秘話があるかも。ないかも。</p>
<h1>SD モデル</h1>
<p>v1？そんなものは存在しない。</p>
<h2>PVC v4</h2>
<p>https://huggingface.co/p1atdev/pvc-v4</p>
<p>WD 1.5 beta 2.6-186k (!?) ベースでファインチューンしたモデル。 ライセンスは FAPL 1.0-SD。</p>
<p>フィギュア画像が出せる。v3とくらべて自然な感じになっていると思う。</p>
<p>呼び出しトークンは <code>pvc</code>、<code>figma</code>、<code>nendoroid</code> があり、それぞれこんな感じ。</p>
<ul>
<li><code>pvc</code>: 学習時にすべての画像にこのタグがついていて、フィギュアを意味する。</li>
<li><code>figma</code>: デザインツールではない。 figma という関節のついたフィギュアのこと。<a href="https://www.goodsmile.info/ja/product/12736/figma+%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%9F%E3%82%AF+2022ver.html">例</a>。これを1.2~1.5くらいに強調するか、 <code>doll joints</code> で関節が出やすい。</li>
<li><code>nendoroid</code>: ねんどろいどを意味する。<code>chibi</code> をつけるとよりよい感じになる。かなり精度がいいと思われる。</li>
</ul>
<p>注意点としては、<code>realistic</code> をプロンプトにいれないこと。フィギュアのスタイルはアニメに近い概念であり、<code>anime</code> をポジティブプロンプトにいれて、<code>realistic</code> をネガティブプロンプトに入れたほうがよりアニメっぽくなる。</p>
<p>v3とくらべて学習素材をかなり増やしたり、 LAION Aesthetic を使って美的評価別に分類したのも特徴。</p>
<p>データセットは <a href="https://huggingface.co/datasets/p1atdev/pvc">ここのレポ</a> のものを使った。ねんどろいどがかなりの割合だが、２万枚くらいあるかも？ JSON 形式で画像 URL と商品名が書いてあるので、使いたい場合は各自でダウンロードしてね。</p>
<h2>Aikimi Diffusion</h2>
<p>https://huggingface.co/Aikimi/Aikimi_diffusion_base_wd-1-5_beta2</p>
<p>Aikimi さんが作ったモデル。 WD1.5 beta 2 ベース。ライセンスは FAPL 1.0-SD。<br>
かなりアニメイラストが出しやすい。</p>
<h2>Illuminati v1.1</h2>
<p>https://civitai.com/models/11193/illuminati-diffusion-v11</p>
<p>v1.0 はこっそり公開停止されたみたい。商用利用とかは禁止らしい。詳細はモデルのページを見てね。<br>
小さい midjourney みたいな感じがある。普段アニメ系モデル使ってるとちょっと扱いが難しいかも。</p>
<h2>Graupel v1</h2>
<p>https://huggingface.co/p1atdev/graupel-v1</p>
<p>WD 1.5 beta 2 ベースの実写系モデル。ライセンスは FAPL 1.0-SD。<br>
服装がふんわりすると思う。</p>
<p>ファッションの広報と Weibo でのコスプレ画像を学習した。</p>
<h1>LoRA</h1>
<h2>リコリコ(スタイル・キャラクター)</h2>
<p>https://huggingface.co/p1atdev/ANime/blob/main/lora/anime-recoil.safetensors</p>
<p>リコリコの１話で学習した。特に意図してなかったが、ちさととたきなも割りと出せる。</p>
<p>0.5前後の weight でアニメスタイルを適用できる。0.8前後だと顔がめっちゃたきなになる。</p>
<h2>東北ずん子</h2>
<p>https://huggingface.co/p1atdev/touhoku</p>
<p>WDをベースに公式素材で学習したやつ。</p>


個人的な Stable Diffusion モデルの紹介

逆引き Danbooru 語

創薬ちゃん生成チャレンジに参加した感想

<p>Waifu Diffusion でかなり可愛いのが作れるようになったので、せっかくだし Pixiv アカウントを作ることにした。</p>
<p>https://www.pixiv.net/users/38745268</p>
<p>良かったら見ていってね</p>


Pixiv アカウントを作った

<p>アークナイツの OST を聴くことができる <a href="https://monster-siren.hypergryph.com/">Monster Siren</a> のサイト。<br>
API が認証不要で使えるので、そのエンドポイントとレスポンスをメモっておく。</p>
<h1>エンドポイント一覧</h1>
<p>ベース URL</p>
<p><code>https://monster-siren.hypergryph.com</code></p>
<h3>共通レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>正常なら 0</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>エラーの場合にエラーメッセージが入る</td>
</tr>
<tr>
<td>data</td>
<td>any</td>
<td>目当てのデータ。配列の時もあればオブジェクトの時もある</td>
</tr>
</tbody>
</table>
<h2>GET /api/albums</h2>
<p>全てのアルバムを取得します。</p>
<h3>必須パラメーター</h3>
<p>なし</p>
<h3>レスポンス例</h3>
<blockquote>
<p>/api/albums</p>
</blockquote>
<pre><code class="language-json">{
   &quot;code&quot;:0,
   &quot;msg&quot;:&quot;&quot;,
   &quot;data&quot;:[
      {
         &quot;cid&quot;:&quot;7783&quot;,
         &quot;name&quot;:&quot;Ensheath&quot;,
         &quot;coverUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220907/f4fbe128f184c617df3c597bcefb6687.jpg&quot;,
         &quot;artistes&quot;:[
            &quot;塞壬唱片-MSR&quot;
         ]
      },
      {
         &quot;cid&quot;:&quot;9397&quot;,
         &quot;name&quot;:&quot;危机合约尘环行动OST&quot;,
         &quot;coverUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220826/5dff26633eccf4654a47098f0f45387f.jpg&quot;,
         &quot;artistes&quot;:[
            &quot;塞壬唱片-MSR&quot;
         ]
      },
      ...[略]...
      {
         &quot;cid&quot;:&quot;4527&quot;,
         &quot;name&quot;:&quot;明日方舟OST1&quot;,
         &quot;coverUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20210322/bb51040a1dfe53b97590451156852bd6.jpg&quot;,
         &quot;artistes&quot;:[
            &quot;塞壬唱片-MSR&quot;
         ]
      }
   ]
}
</code></pre>
<h3>レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cid</td>
<td>string</td>
<td>アルバムの ID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>アルバム名</td>
</tr>
<tr>
<td>coverUrl</td>
<td>string</td>
<td>アルバムジャケット画像の URL</td>
</tr>
<tr>
<td>artistes</td>
<td>string</td>
<td>アーティスト一覧。<code>artists</code> ではなく <code>artistes</code> なことに注意</td>
</tr>
</tbody>
</table>
<h2>GET /api/album/:albumId/data</h2>
<p>アルバムの情報を取得します</p>
<h3>必須パラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>albumId</code></td>
<td>アルバムのID。<code>/api/albums</code> で取得できる <code>cid</code> と同一</td>
</tr>
</tbody>
</table>
<h3>レスポンス例</h3>
<blockquote>
<p>/api/album/9397/data</p>
</blockquote>
<pre><code class="language-json">{
   &quot;code&quot;:0,
   &quot;msg&quot;:&quot;&quot;,
   &quot;data&quot;:{
      &quot;cid&quot;:&quot;9397&quot;,
      &quot;name&quot;:&quot;危机合约尘环行动OST&quot;,
      &quot;intro&quot;:&quot;寄身锋刃，首丘蒙尘。\n疮痍遍地，何以止息？&quot;,
      &quot;belong&quot;:&quot;arknights&quot;,
      &quot;coverUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220826/5dff26633eccf4654a47098f0f45387f.jpg&quot;,
      &quot;coverDeUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220826/85edbb18ec55fd43d2a65d235d626c2d.jpg&quot;,
      &quot;artistes&quot;:[
         &quot;塞壬唱片-MSR&quot;
      ]
   }
}
</code></pre>
<h3>レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cid</td>
<td>string</td>
<td>アルバムの ID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>アルバム名</td>
</tr>
<tr>
<td>intro</td>
<td>string</td>
<td>アルバムの説明</td>
</tr>
<tr>
<td>belong</td>
<td>string</td>
<td>今は全て <code>arknights</code> だが、今後増える可能性あり</td>
</tr>
<tr>
<td>coverUrl</td>
<td>string</td>
<td>アルバムジャケット画像の URL</td>
</tr>
<tr>
<td>coverDeUrl</td>
<td>string</td>
<td>バナー画像。アルバムジャケットと同じものが使われる場合もある。</td>
</tr>
<tr>
<td>artistes</td>
<td>string</td>
<td>アーティスト一覧。<code>artists</code> ではなく <code>artistes</code> なことに注意</td>
</tr>
</tbody>
</table>
<h2>GET /api/album/:albumId/detail</h2>
<p>アルバムの詳細を取得します。<code>/api/album/:albumId/data</code> との差異は、<code>/api/album/:albumId/detail</code> の方はアルバムに含まれる曲の情報も返ってくる代わりにレスポンスが少し遅いです。</p>
<h3>必須パラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>albumId</code></td>
<td>アルバムのID。<code>/api/albums</code> で取得できる <code>cid</code> と同一</td>
</tr>
</tbody>
</table>
<h3>レスポンス例</h3>
<blockquote>
<p>/api/album/9397/detail</p>
</blockquote>
<pre><code class="language-json">{
   &quot;code&quot;:0,
   &quot;msg&quot;:&quot;&quot;,
   &quot;data&quot;:{
      &quot;cid&quot;:&quot;9397&quot;,
      &quot;name&quot;:&quot;危机合约尘环行动OST&quot;,
      &quot;intro&quot;:&quot;寄身锋刃，首丘蒙尘。\n疮痍遍地，何以止息？&quot;,
      &quot;belong&quot;:&quot;arknights&quot;,
      &quot;coverUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220826/5dff26633eccf4654a47098f0f45387f.jpg&quot;,
      &quot;coverDeUrl&quot;:&quot;https://web.hycdn.cn/siren/pic/20220826/85edbb18ec55fd43d2a65d235d626c2d.jpg&quot;,
      &quot;songs&quot;:[
         {
            &quot;cid&quot;:&quot;306837&quot;,
            &quot;name&quot;:&quot;Operation Ashring&quot;,
            &quot;artistes&quot;:[
               &quot;塞壬唱片-MSR&quot;
            ]
         },
         {
            &quot;cid&quot;:&quot;880358&quot;,
            &quot;name&quot;:&quot;Operation Ashring（Instrumental）&quot;,
            &quot;artistes&quot;:[
               &quot;塞壬唱片-MSR&quot;
            ]
         },
         {
            &quot;cid&quot;:&quot;514566&quot;,
            &quot;name&quot;:&quot;Crawling Forward!&quot;,
            &quot;artistes&quot;:[
               &quot;塞壬唱片-MSR&quot;
            ]
         }
      ]
   }
}
</code></pre>
<h3>レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cid</td>
<td>string</td>
<td>曲の ID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>曲名</td>
</tr>
<tr>
<td>artistes</td>
<td>string</td>
<td>アーティスト一覧。<code>artists</code> ではなく <code>artistes</code> なことに注意</td>
</tr>
</tbody>
</table>
<h2>GET /api/songs</h2>
<p>全ての曲の情報を取得します。音源 URL やカバー画像は付属しません。</p>
<h3>必須パラメーター</h3>
<p>なし</p>
<h3>レスポンス例</h3>
<blockquote>
<p>/api/songs</p>
</blockquote>
<pre><code class="language-json">{
   &quot;code&quot;:0,
   &quot;msg&quot;:&quot;&quot;,
   &quot;data&quot;:{
      &quot;list&quot;:[
         {
            &quot;cid&quot;:&quot;514565&quot;,
            &quot;name&quot;:&quot;Ensheath (Instrumental)&quot;,
            &quot;albumCid&quot;:&quot;7783&quot;,
            &quot;artists&quot;:[
               &quot;塞壬唱片-MSR&quot;
            ]
         },
         {
            &quot;cid&quot;:&quot;461173&quot;,
            &quot;name&quot;:&quot;Ensheath&quot;,
            &quot;albumCid&quot;:&quot;7783&quot;,
            &quot;artists&quot;:[
               &quot;塞壬唱片-MSR&quot;
            ]
         },
        ...[省略]...
      ],
      &quot;autoplay&quot;:null
   }
}
</code></pre>
<h3>レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cid</td>
<td>string</td>
<td>曲の ID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>曲名</td>
</tr>
<tr>
<td>albumCid</td>
<td>string</td>
<td>アルバムの ID</td>
</tr>
<tr>
<td>artists</td>
<td>string</td>
<td>アーティスト一覧。ここだけなぜか <code>artists</code> なのに注意</td>
</tr>
<tr>
<td>autoplay</td>
<td>boolean?</td>
<td>おそらく Web クライアントの自動再生のフラグ</td>
</tr>
</tbody>
</table>
<h2>GET /api/song/:songId</h2>
<p>曲の詳細を取得します</p>
<h3>必須パラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>songId</code></td>
<td>曲のID。<code>/api/songs</code> で取得できる <code>list.cid</code>、 <code>/api/album/:albumId/detail</code> で取得できる <code>songs.cid</code> と同一</td>
</tr>
</tbody>
</table>
<h3>レスポンス例</h3>
<blockquote>
<p>/api/song/306837</p>
</blockquote>
<pre><code class="language-json">{
   &quot;code&quot;:0,
   &quot;msg&quot;:&quot;&quot;,
   &quot;data&quot;:{
      &quot;cid&quot;:&quot;306837&quot;,
      &quot;name&quot;:&quot;Operation Ashring&quot;,
      &quot;albumCid&quot;:&quot;9397&quot;,
      &quot;sourceUrl&quot;:&quot;https://res01.hycdn.cn/a6e7ee185aaee32afb46ab3a0ec5bcc5/6320090A/siren/audio/20220826/3a988360ff0c0fb07478e2f9bfcebcd4.wav&quot;,
      &quot;lyricUrl&quot;:&quot;https://web.hycdn.cn/siren/lyric/20220826/13eb91a3033439862e89a128da629fb2.lrc&quot;,
      &quot;mvUrl&quot;:null,
      &quot;mvCoverUrl&quot;:null,
      &quot;artists&quot;:[
         &quot;塞壬唱片-MSR&quot;
      ]
   }
}
</code></pre>
<h3>レスポンスパラメーター</h3>
<table>
<thead>
<tr>
<th>名前</th>
<th>型</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>cid</td>
<td>string</td>
<td>曲のID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>曲名</td>
</tr>
<tr>
<td>albumCid</td>
<td>string</td>
<td>曲が含まれるアルバムのID</td>
</tr>
<tr>
<td>sourceUrl</td>
<td>string</td>
<td>音源のURL。一定時間で更新される</td>
</tr>
<tr>
<td>lyricUrl</td>
<td>string?</td>
<td>歌詞ファイルのURL。歌詞のない曲は <code>null</code>。形式は <code>.lrc</code></td>
</tr>
<tr>
<td>mvUrl</td>
<td>null</td>
<td>おそらく MV の URL だがここに値が入っていたことは一度もない</td>
</tr>
<tr>
<td>mvCoverUrl</td>
<td>null</td>
<td>MV に関連する URL だが値が入っていたことは一度もない</td>
</tr>
<tr>
<td>artists</td>
<td>string[]</td>
<td>アーティストの一覧。ほぼ <code>塞壬唱片-MSR</code> のみだが稀に複数入る</td>
</tr>
</tbody>
</table>


Monster Siren の API リファレンス

<p>この記事では Noexes でサーチするための最初のステップを解説します。PC、Switch のセットアップがまだ済んでいないのなら先に <a href="/posts/63140d37d59cbbc5fa294b79">環境準備編</a> を読むことをお勧めします。</p>
<h1>Noexes のタブ</h1>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/08edd5b9-2b6b-4b6b-8d09-6da94e0be370%2FSCR-20220906-j9f.png" alt="SCR-20220906-j9f.png"></p>
<p>Noexes には、「Tools」「Search」「Pointer Search」「Memory Viewer」「Watch List」「Disassembler」があります。フォークによっては「Utils」タブがあるかもしれませんが、この記事では扱いません。</p>
<p>この中で基本的なサーチで使うのは、「Tools」「Search」「Memory Viewer」「Watch List」のみです。</p>
<p>詳しい使い方の解説はサーチの解説でするので、まずは簡単にタブの説明をします。</p>
<h2>Tools タブ</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/a2a7e22b-91d9-4c64-8527-da052aef8ff2%2FSCR-20220906-jmz.png" alt="SCR-20220906-jmz.png"></p>
<p>Switch との接続や、メモリ領域のアドレスを取得するのに使用します。</p>
<h2>Search タブ</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/69a53178-6c13-48e1-bb6d-e1eb4dde4140%2FSCR-20220906-m4l.png" alt="SCR-20220906-m4l.png"></p>
<p>値を検索するタブです。検索範囲を指定して、指定値との比較や前回の値との比較によってアドレスを絞り込みます。</p>
<p>簡易的な値の書き込みもできるので、検索結果をすぐに検証することができます。</p>
<h2>Memory Viewer タブ</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/20f8f19d-2776-4332-af98-d83bea50f429%2FSCR-20220904-7v8.png" alt="SCR-20220904-7v8.png"></p>
<p>メモリを見ることができます。リアルタイムでメモリの変化を確認したり、その場でメモリに値を書き込むことができます。</p>
<h2>Watch List</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f6f55811-86eb-4609-aeb0-9a3e35aaae6b%2FSCR-20220906-m87.png" alt="SCR-20220906-m87.png"></p>
<p>アドレスを監視することができるタブです。候補のアドレスをここに入れて値の変化を観察したり、固定値を書き込み続けることができます。</p>
<h1>Switch との接続</h1>
<p>まずは右下の IP Address に Switch の IP アドレスを入れて Connect します。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/00e85b02-d0ec-4ff8-b8fc-278a9880ffe7%2FSCR-20220906-j9g.png" alt="SCR-20220906-j9g.png"></p>
<p>するとこのように Switch のプロセス ID がずらっと出てくるので、一番下までスクロールして数字が一番大きいプロセスを選び、「Attach to Process」します。ゲームのプロセス ID が滅多なことがなければ一番大きい数字になります。</p>
<p>「Auto Attach to Game」ボタンがある場合は、これを押すだけでも同じことができます。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/434039da-40c0-4090-8b5e-89e28dc56d54%2FSCR-20220906-mav.png" alt="SCR-20220906-mav.png"></p>
<p>ゲームのプロセスに Attach できると、このようにメモリ領域が表示されるようになります。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/6b399b24-f599-41bb-9c92-661abc4f8708%2FSCR-20220906-mfp.png" alt="SCR-20220906-mfp.png"></p>
<p>それと同時にゲーム画面が停止すると思いますが、バグってるわけではなく、「Resume」を押すことで再開することができます。</p>
<p>メモリ領域のテーブルをスクロールして見てみると、main や heap の領域が見えると思います。main と heap の前後位置は変わったりしますが、heap がメモリがほとんどを占めているのは変わらないです。</p>
<h1>サーチ</h1>
<h2>共通準備</h2>
<p>Search タブに移ります。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/c75767be-a67d-4b73-b940-5c5307b6b2a0%2FSCR-20220906-mlh.png" alt="SCR-20220906-mlh.png"></p>
<p>どのサーチでも必要な最初の準備を行います。</p>
<p>Search Condition を Unknown にセットし、</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/e14bb9f9-78fe-4e35-b773-7fa1f83308af%2FSCR-20220906-jam.png" alt="SCR-20220906-jam.png"></p>
<p>Search を実行します。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/9adbeda4-677d-496f-95df-41b48bdb2eee%2FSCR-20220906-jb1.png" alt="SCR-20220906-jb1.png"></p>
<p>すると、ウィンドウ下側に「Dumping」と表示されてゲージが増えていっていると思います。</p>
<p>これは、Switch のメモリ約 4GB (実際はもうちょい小さい)をダウンロードする処理で、大体 5 分前後かかります。</p>
<p>この後の詳しいサーチ解説は次回以降の記事で行います。</p>
<h2>一時ファイル</h2>
<p>ダンプが終わるのを待ってる間に Noexes が生成する一時ファイルを見てみましょう。</p>
<p>Noexes と同じディレクトリに <code>tmp</code> フォルダが生成されていると思います。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/e699f899-8e9e-48d7-b861-60f427a73b64%2FSCR-20220906-mqm.png" alt="SCR-20220906-mqm.png"></p>
<p>ここにはサーチするたびにダウンロードされるメモリの情報が保存されています。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/1541e131-1eda-4e64-b1af-2f06caa8be08%2FSCR-20220906-msv.png" alt="SCR-20220906-msv.png"></p>
<p>サーチの度に 4GB 増えるわけではないのですが、コード作成までの一連の作業を行うと大体 8 GB 近く消費することになります。</p>
<p>なので、ここのフォルダはこまめに掃除するのをお勧めします。</p>
<p>ただし、この中で<strong>一番最初に行ったサーチ</strong> (上記の準備) で生成された <code>.dmp</code> ファイルは、コードの作成のステップで使用するため、<strong>サーチ自体が終わってもすぐに削除しないように</strong>してください。</p>
<h1>終わり</h1>
<p>Noexes でサーチを始めるための最初のステップが完了しました。</p>
<p>次回以降から本格的なサーチに入っていきます。</p>
<p>次の記事は [サーチチュートリアル Moon Jump 編 [概要]] (準備中) です</p>


【Noexes 解説】サーチのための最初の手順

<p>この記事は Noexes でチートするための準備編です。</p>
<p>Noexes チートについては、前編の <a href="/posts/6313baf2d59cbbc5fa2145b7">イントロダクション</a> を参照ください。</p>
<h1>必要なもの</h1>
<ul>
<li>Java 10</li>
<li>JNoexes</li>
<li>Windows 環境</li>
<li>PointerSearcher</li>
<li>ストレージ容量</li>
</ul>
<h1>環境構築していく</h1>
<h2>Java</h2>
<p>公式は Java 10 が必要と言っていますが、Java 11 でも動きました。Java のバージョンシステムよくわからないんですけど、上位バージョンは常に下位互換性が合ったりするのかな...？</p>
<p>なので、Java 10 が必要と書きましたが 11 でもいいので好きな方をダウンロードします。</p>
<p>この記事では 11 を使うことにします。<a href="https://www.oracle.com/java/technologies/javase/jdk11-archive-downloads.html">ここ</a>からダウンロードできます。</p>
<p>「Java SE Development Kit 11.0.16」から自分の環境に合わせたものをダウンロードします。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/86dde5a5-746e-4025-8d34-026fad90277e%2FSCR-20220904-6t2.png" alt="SCR-20220904-6t2.png"></p>
<p>超めんどくさいアカウント登録を求められますが、おとなしく登録しましょう。</p>
<h2>JNoexes</h2>
<p><a href="https://github.com/mdbell/Noexes">公式ビルド</a> でも良いのですが、今回は <a href="https://github.com/tomvita/Noexes">tomvita氏のフォーク</a> を使います。</p>
<p>tomvitaフォーク</p>
<p>https://github.com/tomvita/Noexes</p>
<p>公式</p>
<p>https://github.com/mdbell/Noexes</p>
<p>ほんのちょっとだけ便利な機能が追加されている程度で、通常のサーチで使う分には何も機能は違わないので、ここは好みで選んで良いです。</p>
<p><a href="https://github.com/mdbell/Noexes/blob/master/README.md">公式の解説</a> に沿ってセットアップを進めていきます。</p>
<h3>Switch のセットアップ</h3>
<p>まず、<a href="https://github.com/mdbell/Noexes/releases/tag/v1.0.1">公式のリリースページ</a> から最新版をダウンロードし、zip を解凍します。</p>
<p>解凍すると、<code>noexs.kip1</code> というファイルがあるので、Switch の SD カードのルートに配置します。</p>
<p>次に、<code>hakete_ipl.ini</code> を編集します</p>
<p>Noexes を有効にして起動するように、以下のような起動設定を追加します。</p>
<pre><code class="language-ini:/bootloader/hakete_ipl.ini">[Noexes]
debugmode=1
kip1=noexs.kip1
</code></pre>
<p>私の場合は emuMMC なども使っているので、</p>
<pre><code class="language-ini:/bootloader/hakete_ipl.ini">[Noexes]
debugmode=1
emummcforce=1
fss0=atmosphere/package3
atmosphere=1
kip1=noexs.kip1
kip1patch=nosigchk
</code></pre>
<p>のようにしました。</p>
<p>Noexes でサーチするときはここから起動するようにします</p>
<h3>PC のセットアップ</h3>
<p>JNoexes を使うと同じディレクトリに色々とファイルが生成されていくので、専用のフォルダを作って中で実行した方がいいです。</p>
<p>実行には</p>
<pre><code class="language-bash">java -jar JNoexsClient.jar
</code></pre>
<p>で実行できます。環境によってはダブルクリックで起動できるかもしれないです。</p>
<h4>謎のエラーが出る</h4>
<pre><code>Error: Could not find or load main class me.mdbell.noexs.ui.NoexsApplication
Caused by: java.lang.NoClassDefFoundError: javafx/application/Application
</code></pre>
<p>このエラーが出て起動できない場合は以下のようにします。</p>
<p>まず、<a href="https://gluonhq.com/products/javafx/">JavaFX のランタイム</a> をダウンロードします。</p>
<p>https://gluonhq.com/products/javafx/</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/a29a8879-e7b9-4d14-a4ab-4e69e778e3be%2FSCR-20220904-7g4.png" alt="SCR-20220904-7g4.png"></p>
<p>環境に合わせて SDK をダウンロードします。</p>
<p>解凍すると、中に <code>lib</code> というフォルダがあるので、それを <code>PATH</code> に追加すればおそらく起動できるようになります。</p>
<p>ただ、<code>PATH</code> に追加するのが面倒なので自分は Noexes と同じフォルダに JavaFX をおき、</p>
<pre><code class="language-bash:run.sh">java --module-path ./javafx/lib --add-modules=javafx.controls,javafx.fxml -jar ./JNoexsClient.jar
</code></pre>
<p>みたいなのを作ってそれを実行してます。</p>
<p>Java の環境本当に謎。</p>
<h2>Windows 環境</h2>
<p>実機があるならそれを使いましょう。</p>
<p>Mac の人は VMWare Fusion の仮想環境をを使うのがおすすめです。無料です。</p>
<h2>PointerSearcher</h2>
<p>https://github.com/Takumi4685/PointerSearcher</p>
<p>これをダウンロードしておきます。神ツールです。すぐには使わないので後でも良いです。</p>
<h2>ストレージ容量</h2>
<p>Noexes を使うと大体 8GB くらいの一時ファイルを生成するので、流石にないとは思いますがあまりにストレージ容量が足りないと死にます。</p>
<h1>終わり</h1>
<p>準備編は以上です。</p>
<p>次は <a href="/post/6316d2e7ed121b3f518e43d5">サーチのための最初の手順</a>です。</p>
<h1>関連記事</h1>
<p>https://p1at.dev/posts/6316d2e7ed121b3f518e43d5</p>


【Noexes 解説】環境準備編

<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/20f8f19d-2776-4332-af98-d83bea50f429%2FSCR-20220904-7v8.png" alt="SCR-20220904-7v8.png"></p>
<p>このシリーズでは、Nintendo Switch のメモリハックツールである　JNoexes というツールの使い方を解説します。</p>
<p>https://github.com/mdbell/Noexes</p>
<p>このツールを使いメモリを操作することで、体力無限や壁抜け、連射やムーンジャンプなど、さまざまなチートを作成することができます。(理論上は)</p>
<p>シンプルだけれども奥深いチートの世界に足を踏み入れてみましょう。</p>
<h1>読者対象</h1>
<ul>
<li>Nintendo Switch のチートに興味がある人</li>
<li>メモリハックに興味がある人</li>
<li>自分でチートを作って見たい人</li>
</ul>
<h2>推奨環境</h2>
<ul>
<li>何かしらの PC
<ul>
<li>空きストレージ 20 GB 以上</li>
<li>メモリ 8 GB</li>
</ul>
</li>
<li>Windows 環境(仮想環境でも可)</li>
</ul>
<p>ちなみに筆者の環境は MacBook Pro 2019 13-inch、Core i7、メモリ 16 GB で、仮想環境上に Windows を作成して利用しています。</p>
<h2>推奨前提知識</h2>
<h3>共通</h3>
<ul>
<li>ある程度のPCについての知識
<ul>
<li>メモリや拡張子など</li>
</ul>
</li>
</ul>
<h3>実践する場合</h3>
<ul>
<li>Nintendo Switch 改造の基礎知識
<ul>
<li>参考: <a href="https://switch.homebrew.guide/">Homebrew Guid</a></li>
</ul>
</li>
</ul>
<p>多分この記事に辿り着いてる時点である程度の知識はあると思うのでそんなに気にしなくて大丈夫だと思います。</p>
<h1>このシリーズの構成</h1>
<p>今後変更される可能性もあります。</p>
<ul>
<li><a href="/posts/6313baf2d59cbbc5fa2145b7">イントロダクション</a></li>
<li><a href="/posts/63140d37d59cbbc5fa294b79">環境準備編</a></li>
<li><a href="/posts/6316d2e7ed121b3f518e43d5">サーチのための最初の手順</a></li>
<li>サーチチュートリアル Moon Jump 編
<ul>
<li>概要 (準備中)</li>
<li>目的の値の性質を考える (準備中)</li>
<li>値を絞る (準備中)</li>
<li>PointerSearcher を使う (準備中)</li>
<li>チートコードの基礎知識 (準備中)</li>
<li>Noexes Code Builder でコードにする (準備中)</li>
<li>Edizon でチートを適用する (準備中)</li>
</ul>
</li>
</ul>
<h1>関連記事</h1>
<p>https://p1at.dev/posts/63140d37d59cbbc5fa294b79</p>


【Noexes 解説】イントロダクション

<p>https://www.instagram.com/plat_diffusion/</p>
<h1>経緯</h1>
<p>先日 Stable Diffusion にハマり、いい感じのものが結構作れるようになった。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f85f4748-ee16-4893-9512-421f9f63665c%2F6280785355.png" alt="6280785355.png"></p>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/36444eb1-f972-400c-9254-2e21837ca248%2F6280785358.png" alt="6280785358.png"></td>
<td><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/7832ec2b-c662-41e0-9418-61b16b74d3bf%2F6951707699_28.png" alt="6951707699_28.png"></td>
</tr>
</tbody>
</table>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f53b5d98-988b-4e52-b69a-e46211783bc1%2F57060691061.png" alt="57060691061.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/df51aecd-0092-4f17-8a67-c322fe1459af%2F5706069099.png" alt="5706069099.png"></p>
<p>結構可愛いものも作れるようになってきたのですけど、これをこのまま自分の Google Drive に入れておくのは勿体無いと思い、Instagram で公開することにしました。</p>
<h1>呪文</h1>
<p>私の呪文は、作品名・アーティスト名を含めないようにしています。(最初期の方は他人のプロンプトを真似していたので、使っていましたが)</p>
<p>理由としては、強いアーティスト呼び出すのはなんか負けたような感じがするため。</p>
<p>また、私は呪文を秘匿したいとは思ってないので、いくつか良さそうな呪文テンプレートを公開しておきます。</p>
<p>一晩かけて見つけた、比較的可愛いアニメ風のイラストを生成する呪文。</p>
<pre><code>[あなたのお好きなシチュエーション],

kuudere, 
(((futuristic))), 
(anime style eyes), 
anime key visual, 
wide shot, 
top lighting, 
dramatic lighting, 
perfect shadow, 
((sharp contrast)), 
bokeh highlights, 
hyper detailed, 
digital illustration
</code></pre>
<p>です。</p>
<p><code>[あなたのお好きなシチュエーション]</code> では、美少女の容姿の説明や、場所の説明、時間帯、絵の雰囲気を入れましょう。</p>
<p>注意点：生成する画像は <strong>縦長</strong> にすると、横長 or 正方形の時と比べて可愛くなりやすいです。これはマジです。(例: 縦768px、横512px)</p>
<p>実際の呪文の例：</p>
<pre><code>a girl student reading a book in a café, 
school uniform, 
sunny, 
positive, 
lunch, 
coffee and sandwich on table, 

kuudere, 
(((futuristic))),
(anime style eyes), 
anime key visual, 
wide shot, 
top lighting, 
dramatic lighting, 
perfect shadow, 
((sharp contrast)), 
bokeh highlights, 
hyper detailed, 
digital illustration
</code></pre>
<p>英語はそこまで文法にこだわらなくても良いです。(受け身ぐらいはちゃんとした方がいいかも)</p>
<p>学校と違って減点されたりしないので。</p>
<p>出力例:</p>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/3e9efa4a-0093-4c45-bdf5-c0411978cb28%2F6951707699.png" alt="6951707699.png"></td>
<td><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/e4224fab-83a8-4d5b-990b-6d023dcc38d0%2F6951707701.png" alt="6951707701.png"></td>
<td><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/c9bdc170-ee3c-4825-aba4-c608accbecf6%2F6951707695.png" alt="6951707695.png"></td>
</tr>
</tbody>
</table>
<p>これらは、<strong>無加工・無編集</strong> で、あまり厳選していない方です。</p>
<p>細かいところは自分で軽く手直ししても良いと思います。</p>
<p>呪文の詳しい解説はまた他の記事でします。</p>
<h1>最後に</h1>
<p>可愛い美少女を投稿していくのでフォローしてね！</p>
<p>https://www.instagram.com/plat_diffusion/</p>


Instagram アカウントを作った

<h1>GitHub の草</h1>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f7a15830-d6d9-444d-89c1-7ee7efaa18ce%2FSCR-20220824-v6s.png" alt="SCR-20220824-v6s.png"></p>
<p>これ。</p>
<p>特に意味はないけど、なんか可愛いし面白いから載せることにした。</p>
<p>前回のブログでは、ライブラリを使って草を描画したけど、いまいち使いづらかったので今回は TailwindCSS 使って自分でちゃんと表示させることにした。月とか曜日の表示はいらないので簡単にできる。</p>
<h1>実装</h1>
<h2>使ったライブラリ</h2>
<ul>
<li>SWR (キャッシュもしてくれる便利なデータ取得ライブラリ。Vercel製)</li>
<li>Recoil (ReactのProvider地獄を解消してくれるステート管理ライブラリ。Reduxはややこしくてわからん)</li>
<li>date-fns (日付の計算。ややこしいことは全部ライブラリに任せよう)</li>
<li>TailwindCSS (CSSの細かいことを考えなくて済む。嬉しい)</li>
<li>graphql-request (Prisma作ってるとこが作ったGraphQLのクライアント)</li>
</ul>
<h2>流れ</h2>
<p>Next.js の API ルートに、GitHub との通信を行うエンドポイントを作る。実際に表示されるコンポーネントから、そのエンドポイントにリクエストして情報を取得し、表示する感じ。</p>
<h2>GitHub API</h2>
<p>GitHub の API を叩いてコントリビュートの情報を取得する。</p>
<p>GitHub の API は GraphQL と REST の二種類があるが、REST の方でコントリビュートの情報は取得できないっぽい？ので GraphQL を使っていく。</p>
<p>ほぼこの記事と同じことをやった。</p>
<p>https://zenn.dev/yuichkun/articles/b207651f5654b0</p>
<p>実際のコードはこんな感じ</p>
<pre><code class="language-ts:/pages/api/grass.ts">import type { NextApiRequest as Req, NextApiResponse as Res } from &quot;next&quot;
import { gql, GraphQLClient } from &quot;graphql-request&quot;
import { GrassCalendarRes } from &quot;../../types/grass&quot;

const handler = async (req: Req, res: Res) =&gt; {
    const endpoint = &quot;https://api.github.com/graphql&quot;
    const query = gql`
        query ($userName: String!) {
            user(login: $userName) {
                contributionsCollection {
                    contributionCalendar {
                        totalContributions
                        weeks {
                            contributionDays {
                                contributionCount
                                date
                            }
                        }
                    }
                }
            }
        }
    `

    const variables = {
        userName: &quot;p1atdev&quot;,
    }

    const client = new GraphQLClient(endpoint, {
        headers: {
            Authorization: `Bearer ${process.env.GITHUB_API_KEY}`,
        },
    })

    try {
        const data: GrassCalendarRes = await client.request(query, variables)

        res.status(200).json({ ...data })
    } catch (error) {
        res.status(500).json({ error })
    }
}

export default handler
</code></pre>
<p>ユーザー名はハードコードしちゃってます。</p>
<p>GitHub の API キーは <code>https://github.com/settings/tokens</code> から生成できます。今回必要なのは、<code>user:read</code> の権限だけなので、そこだけにチェックを入れます。</p>
<h2>SWR</h2>
<p>このエンドポイントを呼び出すための専用フックを作る。</p>
<pre><code class="language-ts:/hooks/grass.ts">import useSWR from &quot;swr&quot;
import { GrassCalendarRes } from &quot;../types/grass&quot;

export const useGrass = () =&gt; {
    const res = useSWR(&quot;/api/grass&quot;, (url) =&gt; fetch(url).then((res) =&gt; res.json()))
    const data: GrassCalendarRes = res.data
    const error = res.error

    if (error) {
        return {
            error,
        }
    }

    try {
        const grass = data.user.contributionsCollection.contributionCalendar.weeks

        return {
            grass: grass,
            error,
        }
    } catch (error) {
        return {
            error,
        }
    }
}
</code></pre>
<p><code>useSWR</code> を間に入れて <code>fetch</code> すると、レスポンスをキャッシュしていい感じになる。</p>
<p>ちなみに、<code>useSWR</code> の第一引数は識別子の役割にもなっているので、これを使って状態管理をするテクニックもある。</p>
<p><code>GrassCalendarRes</code> は返ってくるレスポンスの型。<a href="https://app.quicktype.io/">quicktype</a> で一瞬で型情報を生成できるので便利。</p>
<h2>カレンダー</h2>
<p>描画部分。レスポンシブにするのがちょっとめんどくて、結局最終的にもゴリ押し感がある。</p>
<p>まずはカレンダー本体</p>
<pre><code class="language-ts:/components/widget/GrassCalendar.tsx">import { differenceInCalendarWeeks, subMonths } from &quot;date-fns&quot;
import { ComponentProps, useEffect, useState } from &quot;react&quot;
import { useGrass } from &quot;../../hooks/useGrass&quot;
import { Week } from &quot;../../types/grass&quot;

interface Props {
    months: number
}

const GrassCalendar = ({ months = 6 }: Props) =&gt; {
    const { grass, error } = useGrass()
    const [weeks, setWeeks] = useState&lt;Week[]&gt;([])

    useEffect(() =&gt; {
        if (grass) {
            const startDate = subMonths(new Date(), months)
            const diffWeeks = differenceInCalendarWeeks(new Date(), startDate)
            setWeeks(grass.slice(grass.length - diffWeeks, grass.length))
        }
    }, [grass, months])

    return (
        &lt;div&gt;
            {error &amp;&amp; &lt;div&gt;植栽中...🌿🌿🌿&lt;/div&gt;}
            &lt;div className=&quot;flex gap-x-1&quot;&gt;
                {weeks &amp;&amp;
                    weeks.map((week, index) =&gt; {
                        return (
                            &lt;div key={`week:${index}`} className=&quot;flex flex-col gap-y-1&quot;&gt;
                                {week.contributionDays.map((day) =&gt; {
                                    return &lt;GrassTile key={day.date} count={day.contributionCount} /&gt;
                                })}
                            &lt;/div&gt;
                        )
                    })}
            &lt;/div&gt;
        &lt;/div&gt;
    )
}
</code></pre>
<p>現在の日付から、渡された月の数の草を表示している。date-fns が全部面倒な計算やってくれて楽。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f7a15830-d6d9-444d-89c1-7ee7efaa18ce%2FSCR-20220824-v6s.png" alt="SCR-20220824-v6s.png"></p>
<p>この、一つの縦の行が一週間で、GitHub の API がちょうど週ごとにデータを返してくれる優良設計なので、そのまま <code>map</code> で回して表示すると本家と同じようなレイアウトになる。</p>
<p>草を表示してくれるライブラリをいくつか探してみたけれども、どれも日付と草の色の指定方法がめんどくて使いづらかった。</p>
<p><code>GrassTile</code> は以下</p>
<pre><code class="language-ts:/components/widget/GrassCalendar.tsx">const defaultColorSet = new Map([
    [0, &quot;#e4f2e4&quot;],
    [1, &quot;#a5e68b&quot;],
    [2, &quot;#60cf64&quot;],
    [4, &quot;#37c94a&quot;],
    [8, &quot;#24904c&quot;],
])

const GrassTile = ({ count, colorSet = defaultColorSet }: GrassTileProps) =&gt; {
    const [color, setColor] = useState&lt;string&gt;(&quot;#f5f5f5&quot;)

    useEffect(() =&gt; {
        colorSet.forEach((value, key) =&gt; {
            if (count &gt;= key) {
                setColor(value)
            }
        })
    }, [count])

    return (
        &lt;div&gt;
            &lt;div
                className=&quot;h-3 w-3 rounded-sm&quot;
                style={{
                    backgroundColor: color,
                }}
            &gt;&lt;/div&gt;
        &lt;/div&gt;
    )
}
</code></pre>
<p>渡された <code>count</code> で色分けしている。一応色のと数の組み合わせは変えられるようにしてある。</p>
<h3>レスポンシブ対応</h3>
<p>デフォルトの 6ヶ月だと、画面幅によっては小さすぎたりはみ出たりしてしまう。なので、無理矢理だけども画面幅によって表示する月が変わるようにした。</p>
<pre><code class="language-ts:/components/widget/GrassCalendarResponsive.tsx">import GrassCalendar from &quot;./GrassCalendar&quot;

interface Props {
    /**
     * default
     */
    def?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
}

const GrassCalendarResponsive = ({ def = 6, sm = 2, md = 3, lg = 4, xl = 6 }: Props) =&gt; {
    return (
        &lt;div&gt;
            &lt;div className=&quot;sm:hidden&quot;&gt;
                &lt;GrassCalendar months={def} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden sm:block md:hidden&quot;&gt;
                &lt;GrassCalendar months={sm} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden md:block lg:hidden&quot;&gt;
                &lt;GrassCalendar months={md} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden lg:block xl:hidden&quot;&gt;
                &lt;GrassCalendar months={lg} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden xl:block&quot;&gt;
                &lt;GrassCalendar months={xl} /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
}

export default GrassCalendarResponsive
</code></pre>
<p>指定した画面幅にいる時だけ <code>hidden</code> から　<code>block</code> にして表示させている。</p>
<p>正直、レスポンシブに何かの値を変える正攻法わからない。もしかしたらそれ専用のメソッドが用意されているのかもしれない...</p>
<h2>表示</h2>
<p>実際に草を配置する。</p>
<pre><code class="language-ts">&lt;GrassCalendarResponsive def={5} sm={8} md={8} lg={4} xl={5} /&gt;
</code></pre>
<p>指定した幅の時に表示する月の数を指定する。無理矢理レスポンシブにした。</p>
<h1>終わり</h1>
<p>画面幅によって値を変更する正攻法がわからないので誰か教えてください。</p>


ブログにGitHubの草を載せた

<p>フロントエンドの人はなぜかブログをいっぱい作る。</p>
<p>私もそうなのでブログを作り直した。</p>
<p>きっかけは Twitter で <a href="https://www.newt.so/">Newt</a> というヘッドレス CMS を見かけたこと。</p>
<p>https://www.newt.so/</p>
<p>無料プランがあったので早速使って見ることにした。</p>
<h1>他の CMS との比較</h1>
<h2>まずは Newt の情報</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/acac664e-6d3c-4b96-a488-a602d97c86f8%2FSCR-20220822-5bg.png" alt="SCR-20220822-5bg.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/bd6e3111-48a1-4746-a9ba-7ed9c47b94c5%2FSCR-20220822-5bz.png" alt="SCR-20220822-5bz.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/01f04c43-2118-437d-8ed3-29ddc76452ef%2FSCR-20220822-5ni.png" alt="SCR-20220822-5ni.png"></p>
<p>https://www.newt.so/plan</p>
<p>無料プランがめちゃくちゃ太っ腹。データ転送量100GB/月に、APIリクエスト制限はなんと 2,000,000回/月！個人で使う分には SSG しておけば絶対に使い切れないレベルの量。<br>
他にもコンテンツ数、モデル数、メンバー数が無制限なので、もうほとんど制限なんてないようなもの。</p>
<p>Newt には CDN API が無料プランからも使えて、アセットをエッジから快適に取得することができる。嬉しい。</p>
<p>画像の最適化も、自分でクラウドストレージを用意すれば無料でできるので良い。Google Cloud Storage ならある程度まで無料なので、機会があったら使ってみることにする。</p>
<p>無料プランでここまでできるのはめちゃくちゃ嬉しい。デプロイ Webhook も無料で使えて、JavaScript SDK も公式から提供されている。TypeScript にも対応している。</p>
<p>デベロッパに優しい設計になっていてめちゃくちゃ快適だった。</p>
<h2>microCMS</h2>
<p>Newt は国産だが、もう一つの国産ヘッドレス CMS の <a href="https://microcms.io/">microCMS</a> と比べると圧倒的に優れているのがわかる。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/7d8e2a34-5206-4dd9-a45b-89f8d3770e90%2FSCR-20220822-5gn.png" alt="SCR-20220822-5gn.png"></p>
<p>最大3個のAPI...?最大3人のメンバー...?</p>
<p>リクエスト呼び出し数が無制限だとしても、Newt の200万回も無制限のようなもんなので、これだけ見ても Newt が優勢。さらに詳しく比較してみる。</p>
<p>https://microcms.io/pricing</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/55ee60a4-f14b-4609-97e9-05c8377998c6%2FSCR-20220822-5ij.png" alt="SCR-20220822-5ij.png"></p>
<p>データ転送量20GB/月...?</p>
<p>コンテンツ数は1万と、到底使い切れるようなものではないと思うが、やはり Newt の方が制限が緩い。</p>
<p>Newt には CSV 出力はないが、フロントエンドエンジニアが CSV に触れる機会もほとんどないんじゃないのかと思うので、個人で扱う場合にはなんら問題ない。</p>
<p>microCMS でできることは大抵 Newt でできる。</p>
<h2>Contentful</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/ee791a77-5a96-4c01-b296-280bf1fb974f%2FSCR-20220822-5t6.png" alt="SCR-20220822-5t6.png"></p>
<p>https://www.contentful.com/pricing/</p>
<p>GraphQL に対応してるらしいが私は別に GraphQL がなくて困ったことはない。<br>
色々なプラグインを使ってカスタマイズしていく形式に近いっぽい。Wordpress みがある。</p>
<p>以前使った時は、ダッシュボードの要素がわかりにくいというか、どこから記事を追加してどこで書くのかわかりにくくてすぐ使うのをやめてしまった。</p>
<p>プラン名にもあるとおり、無料プランは「Community」プランなので、複数人で小規模〜中規模の開発をするときに使うのかもしれない...</p>
<h2>Strapi</h2>
<p>https://strapi.io/</p>
<p>セルフホストするタイプのヘッドレス CMS。無料だが難点が多い。</p>
<p>何回か使ったことがあるが、やはり自分でホストする必要があるのが面倒になってしまう。社内や組織内で使うのなら良いのかもしれないが、APIドキュメントがゴミだったり、SDKが最新版に追いついていなかったり、謎の挙動が多いため、結局プロダクションレベルでは使えないので、どこでも使えない。</p>
<h2>Payload</h2>
<p>https://payloadcms.com/</p>
<p>セルフホストするタイプのヘッドレス CMS。無料だが、最近出てきたもののため挙動が安定しない。</p>
<p>一番のネックは MongoDB を自分で用意する必要があるということ。わざわざこのために Realm で DB 用意するのは面倒。見た目はオシャレだが、使いやすくはないので結局使わない。</p>
<h1>総括</h1>
<p>結局 Newt が一番良い。外国産の CMS では、日本語入力にしばしば難があり、記事を書くことすらままならないことがある。わざわざセルフホストしても、ホストするクラウドに制限が発生してしまうので、大人しく提供されたサービスを受け取った方が楽。</p>
<h1>使いやすさ</h1>
<p>Newt はめちゃくちゃ使いやすい。もちろん、いくつか使いづらい点もあるのだが、他の CMS に比べればマシである。</p>
<h2>良いと思った点</h2>
<h3>ダッシュボードがわかりやすい</h3>
<p>これは重要。ここで変に余計な操作が必要になったり、覚える必要があったりすると疲れるが、Newt はめちゃくちゃ良い設計になっているので、直感的に扱えて楽。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/8d4b0ee5-b38d-4e81-bd3f-7ee87b3d26bb%2FSCR-20220822-68k.png" alt="SCR-20220822-68k.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/cf2a52c9-2706-4677-9325-580403c4915b%2FSCR-20220822-694.png" alt="SCR-20220822-694.png"></p>
<p>一般的な CMS のように、記事やタグなどのモデルを作る画面、記事一覧の画面がある。</p>
<p>モデルを構成する要素には、よくある「テキスト」や「リッチテキスト」に、マークダウン専用の「マークダウン」や、「日付」、「画像」があり、普通のブログサイトを作るのに必要なものは揃っている。しかも、最近流行りなのか「絵文字」という絵文字単体の要素があったり、色の「カラー」や「ファイル」など、ちょっと便利なやつもある。</p>
<p>もちろん、記事のモデルにタグの要素を入れる「参照」も可能。<br>
必須項目やタイトル設定、配列設定も可能。無料プランでも全然困らないレベルで CMS の機能が提供されている。</p>
<h3>マークダウンの記事プレビューができる</h3>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/cd3cb572-1ddd-484e-93cb-5ad86644db84%2FSCR-20220822-l2v.png" alt="SCR-20220822-l2v.png"></p>
<p>普通にありがたい。最低限のプレビューができるので、マークダウンのミスの確認などができる。</p>
<h3>ドキュメントがしっかりしてる</h3>
<p>https://www.newt.so/docs/</p>
<p>日本語で解説されているので、わかりやすい。</p>
<p>https://developers.newt.so/apis/cdn</p>
<p>API のリファレンスもついており、その場ですぐにリクエストをテストすることもできる。</p>
<h2>気になった点</h2>
<h3>マークダウンエディタ</h3>
<ul>
<li>Tab キーを押すとインデントが変わるのではなく、次の要素にフォーカスしてしまう</li>
</ul>
<p>これは、コードをちょっと修正するときやリストのインデントを調整したいときに不便。スペースで無理やり揃えてやる必要がある。</p>
<h3>コンテンツの作成画面</h3>
<ul>
<li>「保存」・「保存して公開ボタン」が押せない瞬間がある</li>
</ul>
<p>内容を更新した後の数秒間は、保存ボタンがグレーアウトして押せない。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/3fa2ff50-ed31-4034-8077-455d671213b6%2FSCR-20220822-l9a.png" alt="SCR-20220822-l9a.png"></p>
<p>グレーアウトが解除されるまで保存できないので、地味にだるい。おそらく、実際のコンテンツと保存されるコンテンツが違うものにならないように、変更のマージン期間みたいなのを用意しているのかもしれない(語彙力)。Twitter のファボボタンのような、 楽観的な更新の UI にした方がユーザーには優しいのではないかなと思った。</p>
<h2>総括</h2>
<p>いくつかちょっと気になる点はあるけど、他の CMS と比べたらめちゃくちゃ使いやすい。</p>
<h1>まとめ</h1>
<p>今までの国産・外国産の CMS と比べたら、個人用途なら Newt が圧倒的に使いやすいし無料プランの制限も緩くておすすめ。</p>


Next.js でブログを作った

アークナイツのSDキャラのアニメーションGIFを作る

<h1>コードブロック</h1>
<p>ファイル名つきSwift</p>
<pre><code class="language-swift:main.swift">print(1 + 1)
</code></pre>
<p>長文ts</p>
<pre><code class="language-ts:markdown.ts">// TODO: ここをちゃんとTSXのものに入れ替えるようにする
const reformHeadings = async (dom: JSDOM) =&gt; {
    for (const tag of headingTags) {
        dom.window.document.querySelectorAll(tag).forEach((heading) =&gt; {
            heading.id = heading.innerHTML.replace(/\s/g, &quot;-&quot;)
        })
    }
}

// コードブロックの修正をする
const codeBlock = async (dom: JSDOM) =&gt; {
    dom.window.document.querySelectorAll(&quot;pre code&quot;).forEach((code) =&gt; {
        if (code.className &amp;&amp; code.className.match(/language-.*:.*/)) {
            const before = code.className.match(/language-.*:.*/)![0]

            // split by first &quot;:&quot;
            const [language, ...rest] = before.split(&quot;:&quot;)
            const filename = rest.join(&quot;:&quot;)

            code.className = language
            code.parentElement!.setAttribute(&quot;data-filename&quot;, filename)
        }
    })
}
</code></pre>
<p>ばっしゅ</p>
<pre><code class="language-bash:ターミナル">brew update
</code></pre>
<h1>リスト</h1>
<ul>
<li>一つ目</li>
<li>二つ目
<ul>
<li>ネスト</li>
<li>ネスト２</li>
</ul>
</li>
<li>3つめ</li>
</ul>
<h2>番号付きリスト</h2>
<ol>
<li>First</li>
<li>Second</li>
<li>Third
<ol>
<li>Nested First</li>
</ol>
</li>
</ol>


マークダウンテスト

<h1>Title</h1>
<p>Newt を使って書いた最初の記事。</p>
<p>無料プランだけど普通に必要な機能は使えるし、普通に使いやすい。モダンで良い。</p>
<p>JSON の出力プレビューも便利。</p>
<p>日本製なのもあって日本語入力もちゃんとしていて良い。(Contentfulは酷かった)</p>
<h2>H2</h2>
<p>コードブロック</p>
<pre><code class="language-javascript">console.log(&quot;hello, world&quot;)
</code></pre>
<pre><code class="language-ts">console.log(&quot;hello, world&quot;)
</code></pre>
<pre><code class="language-swift">print(&quot;Swifty&quot;)
</code></pre>
<p>Newt のマークダウンエディタがものすごい良い。</p>
<p>左右分割でプレビューしながらかけるし、最低限の見た目の調整もされていて良い。(Strapiは酷かった)</p>
<p>コードブロックもシンタックスハイライトがちゃんとついているし、行間もちゃんと空いていて見やすい。</p>
<p>記事を書くにあたってはめちゃくちゃ快適に書けそう。良い。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/7e415c02-1089-4438-a085-f11262cf7350%2FSCR-20220821-kaf.png" alt="SCR-20220821-kaf.png"></p>
<p>画像のアップロードも快適にできてよい。欲をいえば、画像をペーストされたら直接アップロード&amp;リンク貼りまでやってくれたら嬉しいけど、これでも十分快適。</p>
<h3>H3</h3>
<p><strong>Bold</strong></p>
<p><em>italic</em></p>
<p><code>command + S</code> 保存になるのも良い。今まででうっかりブラウザで保存ショートカットして、html をダウンロードするポップアップを何回見たことやら。</p>
<h2>H2</h2>
<p>これは埋め込みのテスト</p>
<p>Twitter リンク</p>
<p><a href="https://twitter.com/LYCO_RECO/status/1560190011533697024?s=20&amp;t=SsDAy-dZpryx36cgbqoY2w">https://twitter.com/LYCO_RECO/status/1560190011533697024?s=20&amp;t=SsDAy-dZpryx36cgbqoY2w</a></p>
<p>↑これは</p>
<pre><code>[https://twitter.com/LYCO_RECO/status/1560190011533697024?s=20&amp;t=SsDAy-dZpryx36cgbqoY2w](https://twitter.com/LYCO_RECO/status/1560190011533697024?s=20&amp;t=SsDAy-dZpryx36cgbqoY2w)
</code></pre>
<p>他記事リンク</p>
<p>https://zenn.dev/azukiazusa/articles/fresh-tutorial</p>
<p>↑これは</p>
<pre><code>https://zenn.dev/azukiazusa/articles/fresh-tutorial
</code></pre>
<h2>色々テスト</h2>
<p>ファイル名つきのコードブロック</p>
<pre><code class="language-js:/sample.js">console.log(&quot;sample&quot;)
</code></pre>
<p>リンクカード</p>
<p>@<a href="https://zenn.dev">card</a></p>
<p>↑</p>
<pre><code>@[card](https://zenn.dev)
</code></pre>
<h1>終わりに</h1>
<p>Newt かなり良い</p>


Plat Dev

最新記事