記事一覧

Rakugaki In The Sky

by reu · 2026/4/4

お絵描き×空飛ばし機能の実装メモ 俺のブログ(ファミマには売ってない) に「お絵描きして空に飛ばす」機能を追加した話。 背景に時刻と天気に連動した空の canvas アニメーションがあるんだけど、そこにユーザーが描いた絵を雲と一緒に流せるようにした。 ↑こんなの どんな機能? 1. スタートメニューから を起動するとお絵描きウィンドウが開く 2. ペンと消しゴムで自由に描く 3. 「☁️ 空に飛ばす」ボタンを押すと、描いた絵がシュッと空に飛んでいく 4. 飛ばした絵は背景の空に合流して、雲と同じレイヤーで左から右にふわふわ流れ続ける 5. 何度でも飛ばせるし、過去に飛ばした絵も全部流れてる 6. ページをリロードすると消える。儚い モバイルは最大5個、PCは最大15個の落書き飛ばせるよん 落書きしてみてね 以下は込み入った話 アーキテクチャ 要はお絵描き側と空の描画側を React Context でつないでるだけ。意外とシンプル。 Context: お絵描きデータの橋渡し サイトにはもともと天気オーバーライド用の があったので、同じパターンで を作った。 (このノリで機能盛っていくとContextすごいことになりそうな気がする) で配列を持って、 で追加するだけ。永続化なし、セッション限り。 layout.tsx で をアプリ全体に被せてる。 お絵描きウィンドウ ウィンドウ登録 サイトのウィンドウシステムは に定義を追加するだけで動く。 windowの管理を一元化しててよかった〜 描画の仕組み 320×240px の HTML Canvas に Pointer Events で線を引く方式。 消しゴムは を使って「透明に戻す」方式。背景が白じゃなくて透明になるので、空に飛ばした時に背景が透けて見えるのがポイント。 座標変換は表示サイズと canvas の内部解像度のズレを吸収してる: モバイルでは + で安定させてる。 飛び立ちアニメーション これ一番雑なのでそのうち直すぞ ボタンを押した瞬間、canvas の上にスナップショット画像を重ねて CSS アニメーションで飛ばす: Tailwind の で として登録。800ms の で上に縮みながら消えていく。 空側: SkyCanvas へのドリフト描画 データの流れ DriftingDrawing 型 → の変換は + で1回だけ。以降のフレームでは で高速に描画。 同期ロジック prop が変わるたびに、まだ にない id のものだけ新規追加する: モバイルは最大5個、PCは最大15個。超えたら古いのを で除去。 雲の直後、天気パーティクルの前に配置。雨や雪は絵の上に降る形になる。 ドリフト描画関数 雲と同じで、右端まで行ったら左端に戻ってまた流れてくる。速度と透明度はランダムなので、絵ごとに違う「浮遊感」が出る。 設計で意識したこと 描画パフォーマンス - → の変換は初回1回のみ。 は GPU アクセラレーションが効くので毎フレーム呼んでも軽い - 320×240 の PNG は 10〜50KB 程度。メモリの心配なし - 上限を設けて古いのを自動削除 消しゴム = 透明 で消すことで、飛ばした時に背景の空が透けて見える。白で塗りつぶす方式だと空に白い四角が浮くことになるので、これが正解。 セッション限り あえて永続化しない選択。気軽に描いて飛ばす「遊び」であって、作品を残す場所じゃないという割り切り。useState だけで完結するのでコードも簡素。

ブログをこねこね

by reu · 2026/3/29

ryu-reu.me 構成メモ ディレクトリ構成 過剰な気もするな --- ブログ機能が多少盛った ちゃんとしたCMSっぽく - 記事エディタ — Markdown エディタ + リアルタイムプレビュー。画像はドラッグ&ドロップで Supabase Storage にアップロードして本文に自動挿入される。下書きは localStorage に自動保存されるので、うっかりタブ閉じても大丈夫。 - ブログ一覧 — ページング付き。Server Component で Prisma から直接取得してるので速いらしい。 - 記事詳細 () — cuid じゃなくて slug ベースの URL になった。人間が読めるURLは正義。シェアボタン付き(X、LINE、コピー)。 認証が入った Supabase Auth 仕組みとしては cookie ベースのセッション管理で、Supabase クライアントを ブラウザ用・サーバー用・ミドルウェア用 に3分割してる。これは Next.js の実行環境ごとに cookie の読み書き方法が違うから。詳しくは を見てもらえれば。 SEO 対策した - にサイト全体のOGP設定 - 記事詳細ページは で記事ごとに動的にOGPを生成 - と を追加。サイトマップは記事の追加・更新に応じて自動生成 DB スキーマ - User: id, email。Supabase Auth のユーザーと同じメアドで紐付け。 - Post: title, slug, content, published, authorId。slug はタイトルから自動生成。 - Image**: url, path, postId。Supabase Storage にアップした画像のメタ情報。 slugの扱いこれでいいのかは納得いってない --- 技術スタック | カテゴリ | 採用技術 | |---------|---------| | フレームワーク | Next.js 16 (App Router) | | 言語 | TypeScript | | スタイリング | Tailwind CSS | | DB/ORM | Supabase (PostgreSQL) + Prisma | | ストレージ | Supabase Storage | | 認証 | Supabase Auth | | アニメーション | framer-motion | | テスト | Vitest | | UIカタログ | Storybook | | CI/CD | GitHub Actions + Vercel | --- まとめ ボイラープレートの域を超えて実際に使えるブログになったと思う。画像アップロード、認証、SEO まで一通り揃ったのでとりあえず記事を書いて運用できそう

USBメモリが無かったのでポータブルSSDだけでBIOSをアップデートした時の記録

by reu · 2026/3/29

USBメモリが無かったのでポータブルSSDだけでBIOSをアップデートした時の記録【MSI / M-FLASH 対応】 はじめに 原神とか OW で出てたマザボの BIOS 更新しろって警告を思い出したのでアップデートした 原神の事前アプデしようとしたらこんな表示が。BIOSのアプデなんてしたことないけど、やるしかないか。 pic.twitter.com/l18o98Qlx1— Aki-Games / あきゲームズ (@gamesaki) January 12, 2026 ↑これのやつ Intel 第 13・14 世代 CPU の不具合修正のために BIOS をアップデートしようとしたら、なんか変な壁にぶつかった。 - BIOS の画面でキーボードが認識されない - USB メモリが手元にない - 手持ちのポータブル SSD(238GB)は NTFS フォーマットで、そのままでは使えない この記事では、その状況を実際に解決した手順をそのまま紹介する。 同じ状況でハマっている人の参考になれば。 --- 前提・環境 - マザーボード: MSI PRO B760-P DDR4 (MS-7D98) - CPU: Intel Core i7-14700F(第 14 世代) - BIOS 更新前バージョン: 1.F7(2023 年 11 月) - 更新後バージョン: 1.F0(v1F / 2025 年 8 月) - 使用したストレージ: ポータブル SSD 238GB(NTFS) --- なぜ BIOS をアップデートする必要があったか 気になったからしらべた。 Intel 第 13・14 世代のデスクトップ向け CPU には、アイドル時・軽負荷時に過剰な電圧リクエストが発生し、CPU の劣化やシステムの不安定を引き起こす不具合が報告されていたっぽい。 この問題はマイクロコード(CPU 内部のファームウェアのようなもの)のアップデートで修正されており、MSI は BIOS に以下のマイクロコードを順次組み込んできた。 | マイクロコード | 内容 | | -------------- | ------------------------------------------------------------ | | 0x129 | CPU が高電圧をリクエストする問題の修正 | | 0x12B | アイドル・軽負荷時の過剰電圧リクエストを修正(0x129 を含む) | | 0x12F | 軽負荷時の CPU 劣化をさらに抑制 | 最新の v1F にはこれらすべてのマイクロコードと ME ファームウェアの更新が含まれている。 --- 問題 ①:MSI Center の Live Update に BIOS が表示されない BIOS 直いじりしたくなかったので GUI からいけないか最初調べてた。 MSI Center の Live Update → Advance を開くと、BIOS の項目がなく LED ファームウェアのみ表示された。いらね~ 原因: Live Update が「現在の BIOS に問題がない」と判断した場合、BIOS の更新を表示しないことがある。「システムに問題がない場合、MSI は BIOS の更新を推奨しません」という赤文字の注意書きもその通り。 対処: 手動で MSI のサポートページから BIOS ファイルをダウンロードして適用する。 --- 問題 ②:BIOS の画面で USB キーボードが動かない これは本件とは関係ないおま環だと思うけど一応記載。 BIOS に入ろうとしても、USB キーボードが認識されず操作できない。 原因: BIOS 起動時は USB の Legacy サポートが無効になっているか、USB 3.0 ポートの初期化が間に合わないケースがある。PS/2 キーボードや一部の安価な USB キーボードは認識されやすいが、ゲーミングキーボードなど専用ソフトが必要なデバイスは認識されないことが多いらしい。 対処: BIOS に完全に入らなくても BIOS を更新できる「M-Flash(Ctrl+F5)」を使う(後述)。 --- 問題 ③:大容量 SSD を FAT32 にフォーマットできない 手元に DTM 用のポータブル SSD しかなかった。USB なんて持ってないよ全部クラウドだよ。 M-Flash は FAT32 フォーマットのストレージしか認識しない。しかし Windows の標準ツール(エクスプローラー・diskpart・PowerShell の Format-Volume)はいずれも32GB を超えるドライブの FAT32 フォーマットに非対応。 > FAT32 は仕様上 32GB までしか対応していないため、Windows はその制限をそのまま守っている。 解決策:SSD の一部だけ FAT32 パーティションとして切り出す 238GB のドライブを丸ごと FAT32 にするのは無理でも、1GB の小さいパーティションを新たに作ってそこを FAT32 にすれば問題ない。BIOS ファイルは 32MB 程度なので 1GB で十分。 --- 実際の手順 Step 1: BIOS ファイルのダウンロード MSI のサポートページから自分のマザーボードモデルを検索し、最新の BIOS ファイルをダウンロードして解凍しておく。 - MSI サポートページ - 例: のようなファイルが含まれている Step 2: SSD に FAT32 パーティションを作成する 管理者権限のコマンドプロンプトを開いて以下を実行。 表示されたディスク一覧から、自分のポータブル SSD の番号を確認する(サイズで判断する)。 番号を間違えると別のディスクのデータが消えるので注意。 既存のパーティションを 1GB 縮小する。 これで G ドライブとして 1GB の FAT32 パーティションが作られる。 Step 3: BIOS ファイルをコピー 解凍した BIOS ファイル( など)を G ドライブのルート直下にコピーする。フォルダごとではなくファイル単体で置くこと。 ぼくは一回ミスったはずかしい。 Step 4: M-Flash でアップデート PC を再起動し、MSI のロゴが表示されたタイミングで Ctrl+F5 を連打 する。 M-Flash が起動したら、コピーした BIOS ファイルを選択してアップデートを実行。完了まで電源を切らないこと(5 分程度)。 > M-Flash とは: BIOS に完全に入らなくても BIOS を書き換えられる MSI 独自の機能。POST(起動時の自己診断)中に起動するため、BIOS でキーボードが認識されない問題を回避できる。 Step 5: アップデートの確認 再起動後、Windows で を開いて BIOS バージョンを確認する。 バージョンが更新されていれば成功。 Step 6: 後片付け(任意) 作業用に作った 1GB の FAT32 パーティションは不要になるので、元に戻しておく。 その後エクスプローラーからドライブを NTFS で再フォーマットすれば元通り。 --- 注意事項・リスク - BIOS アップデート中に電源が切れると、マザーボードが起動不能になる可能性がある。 ノート PC なら AC アダプターを必ず接続、デスクトップなら UPS があれば理想的。 - BIOS アップデート後は設定がデフォルトにリセットされることがある。XMP の有効化など、カスタム設定をしていた場合は再設定が必要。 - diskpart の操作はディスク番号を必ず確認してから**実行すること。誤ったディスクを選択するとデータが消える。 - 今回の方法は MSI 製マザーボードの M-Flash を前提にしている。他メーカーでは操作が異なるので各社のマニュアルを参照のこと。 --- おわりに USB メモリがなくても、大容量のポータブル SSD しかなくても、工夫次第で BIOS アップデートは完遂できてよかった。 Intel 13・14 世代の CPU 不具合が気になっている人・あらゆるホヨバのゲームで警告がウザくて困ってる人は、ぜひ最新 BIOS への更新を検討してみてね。僕は責任取れないけど....