Posts

引き続き Cloudflare Workers を使用して、本番環境とはアプリ・DBの異なるステージング環境を作ってみます。 Environments があり、ステージング環境のような異なるバージョンのアプリをデプロイすることができます。 Environments · Cloudflare Workers docs Use environments to create different configurations for the same Worker application. Cloudflare Docs 今回もこちらのリポジトリを使います。 a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub まずは、本番用のDBとステージング用のDBを作成します。 npx wrangler d1 create my-app-db npx wrangler d1 create my-app-db-staging 前回同様設定ファイルに追加しておいてから、以下のように編集します。 "d1_databases": [ { "binding": "DB", "database_name": "my-app-db", "database_id": "b8c35192-3b91-463a-8a38-d3515169b832", "migrations_dir": "drizzle/migrations", }, ], "env": { "staging": { "d1_databases": [ { "binding": "DB", "database_name": "my-app-db-staging", "database_id": "de8b088a-ba8f-423d-928c-8677adcd1f5d", "migrations_dir": "drizzle/migrations", }, ], }, }, wrangler.jsonc ...

はじめに 最近よく Cloudflare を使っています。使いやすさ、無料枠の大きさにとても感動しています。 （こちらのブログも Cloudflare Pages で配信しています） また、普段の仕事ではよく Next.js を利用しており、Next.js on Cloudflare Workers が個人開発においては 今のところ最強なんじゃないかと思っています。 ということで、Cloudflare Workers + Next.js + D1 （とdrizzle）で開発する際の基本的な流れを紹介していきます。 今回紹介するサンプルコードの全量は以下にあります。 a2-ito/cf-db-test This repository is a minimal and practical example of running Next.js App Router on Cloudflare Workers and using D1 Database with Drizzle ORM. - a2-ito/cf-db-test GitHub テンプレートの準備 以下のコマンドを実行し、テンプレートを作成します。 wrangler は適当にインストールしておいてください。 wrangler init my-app カテゴリに Framework Starter を選択し、フレームワークとして Next.js を選択します。 コマンド実行結果 ⛅️ wrangler 4.56.0 (update available 4.58.0) ───────────────────────────────────────────── 🌀 Running `npm create cloudflare@^2.5.0 my-app --`... Need to install the following packages: [email protected] Ok to proceed? (y) y > npx > "create-cloudflare" my-app ────────────────────────────────────────────────────────────────────────────────────────────────────────── 👋 Welcome to create-cloudflare v2.62.1! 🧡 Let's get started. 📊 Cloudflare collects telemetry about your usage of Create-Cloudflare. Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md ────────────────────────────────────────────────────────────────────────────────────────────────────────── ╭ Create an application with Cloudflare Step 1 of 3 │ ├ In which directory do you want to create your application? │ dir ./my-app │ ├ What would you like to start with? │ category Framework Starter │ ├ Which development framework do you want to use? │ framework Next.js │ ├ Cloning template from: https://github.com/opennextjs/opennextjs-cloudflare/tree/main/create-cloudflare/next │ ├ Updating name in `package.json` │ updated `package.json` │ ├ Installing dependencies │ installed via `npm install` │ ╰ Application created ╭ Configuring your application for Cloudflare Step 2 of 3 │ ├ Installing wrangler A command line tool for building Cloudflare Workers │ installed via `npm install wrangler --save-dev` │ ├ Retrieving current workerd compatibility date │ compatibility date Could not find workerd date, falling back to 2025-09-27 │ ├ Adding Wrangler files to the .gitignore file │ updated .gitignore file │ ├ Generating types for your application │ generated to `./cloudflare-env.d.ts` via `npm run cf-typegen` │ ├ Installing @types/node │ installed via npm │ ├ Do you want to use git for version control? │ no git │ ╰ Application configured ╭ Deploy with Cloudflare Step 3 of 3 │ ├ Do you want to deploy your application? │ no deploy via `npm run deploy` │ ╰ Done ──────────────────────────────────────────────────────────── 🎉 SUCCESS Application created successfully! 💻 Continue Developing Change directories: cd my-app Deploy: npm run deploy 📖 Explore Documentation https://developers.cloudflare.com/workers 🐛 Report an Issue https://github.com/cloudflare/workers-sdk/issues/new/choose 💬 Join our Community https://discord.cloudflare.com ──────────────────────────────────────────────────────────── DBマイグレーション（ローカル） 次に、ローカルDBに対してDBマイグレーションを行います。 今回は drizzle を使ってみます。 ...

オーバーウォッチ、やっていますか？ 僕は最近毎日やっています。面白いですね。普段 Switch でやっているんですが、PC でもやってみたくなったので人生初のゲーミングPCを自作してみたいと思います。（これまで PC 自作は数回経験していますが、ゲーミングPCという観点では初めてです。） コスパを重視して組んでみたので、同じようにゲーミングPCを作りたい人は参考にしてみてください。（作りたくない人は既製品買ってください。） 本記事のサマリ コスパ重視のゲーミングPCを自作した 13万弱で完成、パフォーマンス問題なし(FFベンチはフルHDで「とても快適」評価） 同程度の既製品と比較したが、コスパは若干勝っている or 同程度（すごく勝っている感じもないが、負けてはなさそう） コンセプト まずは今回の自作PCのコンセプトを整理します。 FPSが普通にいい感じにプレイできる オーバーウォッチのPC版をやるのが目的です。とはいえ相当高いFPSを求めているわけではないので、「普通にプレイできる」としています（エンジョイ勢向け） FPS以外はCPUを使うような用途はありません。ネットサーフィンするくらい。多分。 コスパがいい コスパが悪いものを目指す人はいないと思いますが、イメージ 10万～15万 くらいを目指します。 特にグラボは良いものを買うとそれ単品で15万とか軽く超えてくる感じなので、それなりの性能のものを選択しつつ、PC全体としてのコストは抑えていきます。 サイズは任意 大きさとか見た目にこだわるとパーツ選びも制約が出てきますが、今回はスタンダードなATX(一番でかいやつ)で気にせず作ります。 パーツ選定 買ったパーツと購入価格を記載しておきます。 選定前の注意事項 オーバーウォッチ（というかやりたいゲーム）が必要とするシステム要件はいうまでもなく確認しましょう。 どうでもいいですがオーバーウォッチは 2 が2022年10月にリリースで、ベータ版は6月時点で既にリリースされているので、そのベータ版の情報をベースにセットアップします。サクサクやりたいので（必要動作環境ではなく）推奨動作環境を基準にします。 OS は Windows 10 だけ プロセッサ Intel Core i7 または AMD Ryzen メモリ 8GB RAM NVIDIA GeForce GTX 1060または AMD R9 380 なお当初は（OS代けちって）Linux で組んで Wine で動かしたろ、って思っていたのですが、色々調べていくと Linux ユーザというだけで ban された（アカウントが凍結されること）人もいるようです。ちょっと怖いので素直に Windows でいきます。 選定ポイント 多くは Amazon で購入していますが、値段が張るものは価格コムで最低値を確認してそのサイトで購入しています。 こちらの動画を参考にさせてもらってます。 キーボードやディスプレイは今あるものを使いまわす想定なので、今回は購入していません。 選定結果 一覧で購入先リンクと共に載せておきます。 ...

以前の記事で軽く紹介させてもらいましたが、コピペするだけで markdown に画像が挿入できる VS Code プラグイン Paste Image を試したいと思います。 真面目に調べたら、すでにとても多くの人が試していて、何番煎じかという感じですが。。。気にせずやっていきます。 はじめに このブログは Windows の WSL2 上の vim で作っているので、そもそも VS Code ではなく Vim で同じことが実現できればそっちのほうがいいなと考えました。 で少し調べたところ、md-img-paste という vim プラグインがありました。 結論からいうと、テキストはクリップボード共有できたのですが、md-img-pasteを使った画像ペーストはできませんでした。できた方がいれば教えてください。 テキストのクリップボード共有はこちらを参考にご対応いただければ。ちなみに、これは僕だけかもしれませんが、DISPLAY変数を設定した状態だと vim 起動自体がとても遅く（体感3秒くらい）なりました。。。なので、結局クリップボード共有自体使うのをやめました。 設定方法 Paste Image をお持ちの VS Code に追加します。 config.jsonに以下の設定を追加します。 pasteImage.basePath markdown上で指定する画像ファイルのパスのベースパスを指定します。ここを基準として、pasteImage.pathへの相対パスを出力する形になります。 Hugo では、.../static/ がデフォルトのstaticコンテンツ置き場として構成されています。参考 さらに、僕の場合は画像ファイルはさらにその配下に /img を作って格納するようにしていますので、markdown からは基本的に/img/xxx.pngのような形で指定するようにさせたいわけです。結局、hugo の static ファイル置き場に合わせる、が基本的なやり方になるだろうと理解しています。 pasteImage.insertPattern ペースト時に生成される画像ファイル名を指定します。特にこだわりなければそのままでOKです。 pasteImage.path ペースト時に生成される画像ファイルの置き場所を指定します。画像置き場やmarkdownファイル置き場の設定によって変わってくるので、こちらは個人の設定に合わせてご対応ください。 現状の僕の設定を以下に公開します。 { "pasteImage.basePath": "${currentFileDir}/../../static/", "pasteImage.insertPattern": "${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}", "pasteImage.path": "${currentFileDir}/../../static/img" } markdown への貼り付け Ctrl + Alt + V でペーストすると、  こんな感じで出力され、プレビューできるようになると思います。簡単すぎてやばい。 終わりに 普段はHugo実行とか git push とかそういったテキストエディタ以外の作業は全面的にWSL2でやっているので、この画像ペースト対策もできれば、vim on WSL2 でやりたかった。Macだと普通にできるようなので、マカーの優位性が明確にでてしまいました。残念。 ...

前回の記事で記載した通り、ブログソース（mdたち）の private リポジトリ化について紹介します。 以下の仕様で実装します。 privateリポジトリに記事をpushする github actions で public リポジトリに docs のみdeployする 前提 blog -> privateリポジトリ。md形式のブログソースデータを管理します。 blog-public -> publicリポジトリ。こちらでgithub pages を公開します。 準備 sshキーペアの作成 まずは、privateからpublic側へactions で push できるよう、キーペアを作成します。 ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N "" gh-pages.pub gh-pages の２ファイルが生成されていると思います。-fで指定するキーファイル名は何でもいいです。 blog-private側へ公開鍵を登録 blog-privateリポジトリへ移動します。 Setting -> Deploy keys から Add deploy key を選択して、公開鍵をペーストします。 鍵の名前はなんでもいいです。 blog側へ秘密鍵を登録 blog側のリポジトリへ移動します。 Setting -> Actions から New repository secret を選択して、秘密鍵をペーストします。 鍵の名前はなんでもいいですが、後述の Github Actions 上で指定する必要あるので、特に要件がなければACTIONS_DEPLOY_KEYでいいでしょう。 ...