OpenReplay ブログ
モダンなHTMLボイラープレートに含めるべきもの
必須の5項目にメタデータ、ファビコン、SNSタグを加えた最新のHTMLボイラープレートを解説。古いテンプレートで残す項目や削除する項目も紹介します。
Sign in with GitHub を実装する方法
NodeとExpressでGitHubログインを追加。stateとPKCEを使ったOAuthフロー、安全なコード交換、認証済みメールの取得、トークン更新を解説します。
フロントエンドアプリのコード分割戦略
フロントエンドのコード分割戦略を比較。ルートや重いコンポーネントを分割し、操作前に先読みして、ネットワークウォーターフォールで効果を測定します。
AIエージェントにウォレットを持たせる
エージェントウォレット、Cloudflare Walletsの制御機能、HTTP経由のx402決済を解説。利用可能な機能と未解明の制限を確認できます。
ドメインを購入する前に開発者が知っておくべきこと
ドメイン購入前に、レジストラ・DNSプロバイダー・ホストの違い、更新料と移管費用を確認し、Cloudflareやサイト用のDNSレコードを設定しましょう。
npm に意図しないファイルを公開しないための方法
npmで意図しないファイルや秘密情報を公開しない方法を解説。.npmignore、.gitignore、package.jsonのfilesの関係を理解し、npm pack --dry-runで確認できます。
Remix 3におけるデータローディングの仕組み
Remix 3がデータ読み込みでloaderをコントローラーアクションに置き換える仕組みと、ルート、ストリーミングFrame、待機状態、エラー処理を解説します。
FlutterアプリにApp内課金を追加する方法
in_app_purchaseプラグインでFlutterアプリにアプリ内課金を追加。AppleとGoogleの設定、購入処理、取引の検証、購入の復元、安全なテスト方法を解説します。
llms.txtファイルを検証する方法
依存関係のないNode.jsスクリプトでllms.txtのリンク、パッケージ名とバージョン、Markdown構造を検証し、CIで定期的にチェックする方法を紹介します。
JavaScriptなしでスクロールに応じてCSSアニメーションをトリガーする
JavaScriptなしでスクロール連動のCSSアニメーションを作成。構文やトリガー動作、境界の設定、IntersectionObserverによる代替策を解説します。
メールを送信せずにメールアドレスを検証する
ブラウザーのメール認証で、メールを送らずに受信箱へのアクセスを確認する方法を解説。フォーム設定、Node.jsでの5段階のトークン検証、試験運用の制限も紹介します。
Uppy 6.0と再開可能なファイルアップロード
UppyとTusで再開可能なファイルアップロードを設定し、Uppy 6.0のS3署名やcoreパッケージの変更点と、バージョン5からの移行手順を確認します。
おすすめのオンラインコードエディター
CodePen、StackBlitz、CodeSandbox、Replit、Boltを比較。各エディターで実行できる内容、GitHubからのインポート方法、サービスへの依存を避ける方法を紹介します。
WordPressの子テーマの作り方
WordPressの子テーマを作成して、親テーマの更新後もカスタマイズを維持する方法を解説。クラシックテーマとブロックテーマの設定、スタイル読み込み、テンプレートの上書きを紹介します。
コードレビューの負担を減らす自動チェック
OpenAPI、dependency-cruiser、Strykerのミューテーションテストでコードレビューを自動化。CIチェックで機械的な不具合を検出し、レビューの負荷を減らす方法を紹介します。
z-index が効かない理由
z-indexが効かない原因をDevToolsで調査。スタッキングコンテキストを作る祖先要素を特定し、モーダル、ドロップダウン、固定ヘッダーの重なりを解決します。
WebMCPとMCPの違いとは
WebMCPとMCPを実行環境、ID、ライフサイクル、検出方法で比較。使い分けの基準や、ブラウザーセッションとWebMCPの実験段階について解説します。
base-select でセレクトドロップダウンをスタイリングする
appearance: base-selectでネイティブselectメニューをCSSで装飾。ピッカー、選択肢、アイコン、アクセシビリティ、ブラウザー対応、制約を解説します。
Mac なしで iOS アプリをビルドする方法
Expo EAS、レンタルのクラウドMac、CIを使ってMacなしでiOSアプリをビルド・公開する方法を紹介。費用や署名、iPhoneでのテスト方法も比較します。
Rslib で JavaScript ライブラリを公開する
RslibでJavaScriptライブラリを公開する方法を解説。ESM・CJSビルド、TypeScript宣言ファイル、コンポーネントのスタイル設定とCIでのパッケージ検証を紹介します。
Lintを遅くしているESLintルールを特定する方法
TIMING=1とConfig Inspectorで遅いESLintルールを特定。型情報を使うルールや負荷の高いプラグインを比較し、設定を調整してLintを高速化します。
TypeScript 7にアップグレードすべきタイミングは今か？
TypeScript 7へ今すぐ移行すべき？コンパイラーの速度、互換性を壊す変更、ツール対応状況を比較し、安全な移行方法を判断できます。
ブラウザ上でAIを使って動画に字幕を付ける
Transformers.jsとWhisperで動画の字幕をブラウザー内で生成。音声を抽出し、WebGPUまたはWASMで処理してWebVTTを作成し、メディアを端末内に保持します。
ArkType：Zodより高速な代替ライブラリ
ArkTypeとZodの構文、型推論、検証速度、APIレスポンス処理を比較。ArkTypeを選ぶ場面と、Zodを使い続ける場面がわかります。