OpenReplay ブログ
Android CLIでAndroidアプリを作成する方法
Android CLIの設定、プロジェクト作成、SDK導入、エミュレータ実行、Android SkillsとKnowledge Baseによるエージェント開発支援を解説。
セマンティックバージョニング徹底解説
npmのSemVerを解説。MAJOR.MINOR.PATCH、caretとtildeの範囲、0.x版、プレリリース、lock fileで安全に更新できます。
JavaScript テンプレートエンジンの選び方
Node.jsのサーバーサイドHTML生成でEJS、Handlebars、Pug、Nunjucksを比較。構文、用途、セキュリティの要点を解説。
CSSで置き換えられるSassの5つの機能
Sassの5機能を現代CSSで置き換える方法: カスタムプロパティ、ネスト、color-mix()、@layer、@propertyを解説。
Reactで動画を埋め込む方法
Reactで動画を埋め込む方法を解説。自前ファイルはHTML5 video、YouTubeはiframe、autoplay対策やレスポンシブ表示、ReactPlayerの使い分けまで。
Web Audio API を使ったブラウザでの音声録音
Web Audio APIでブラウザ録音を実装: getUserMediaでマイク入力を取得し、必要なら処理してMediaRecorderで保存します。
Web向けメールアドレス難読化テクニック
Web向けメール難読化の手法を比較。HTMLエンティティ、JavaScript、避けるべきCSS、問い合わせフォーム、Cloudflare保護を解説。
見落としているかもしれないモダンな SQLite の機能
SQLiteの最新機能を解説。JSONB、STRICTテーブル、RETURNING、OPFS対応WASM、WALモードで性能と同時実行性を向上。
日常的なJavaScriptユーティリティとしてes-toolkitを使う
es-toolkitは、型付きでtree-shake可能なJavaScriptユーティリティを提供し、Lodashの軽量代替として小さなバンドルと移行手段を備えます。
Pure CSSによるツールチップの作成
::after、data-tooltip、opacityのトランジションで純CSSのツールチップを作成し、focus-visible対応とアクセシビリティの限界も解説。
Fetch では得られない、Axios が今なお提供してくれるもの
Axios vs Fetch: インターセプター、自動HTTPエラー処理、共有インスタンス、アップロード進捗、タイムアウトでAxiosが有利な点を整理します。
boneyard による Skeleton Screen の自動生成
boneyard-jsは、実際のコンポーネントレイアウトから開発時にskeleton loaderを自動生成し、レスポンシブな.bones.jsonとVite対応を備えます。
Kubernetes の実践的な概要
Kubernetesの概要。アーキテクチャ、Pods、Deployments、Services、Ingress、ConfigMapsでWebアプリをクラスタ運用・拡張する方法。
npmx で実現する新しい npm パッケージブラウジング
npmxは、npmパッケージの調査を左右比較、バンドルサイズ、モジュール形式、依存関係、脆弱性確認まで一画面で整理します。
StylelintでCSSをLintする方法
StylelintでCSSをチェックする設定、ルール、コマンドを解説。エラー検出、標準化、PrettierとCI連携まで対応。
skills.sh で AI エージェントに再利用可能な機能を追加する
skills.shは、AIエージェント向けの再利用可能なskillを追加し、SKILL.md、段階的公開、CLI導入、MCP比較を解説します。
JavaScript バンドラーの現状
2026年のJavaScriptバンドラー比較: Webpack、Vite、Turbopack、Rspack、esbuild、Rollup、Parcelの役割と選び方。
OpenNextでNext.jsをVercel以外にデプロイする方法
Next.jsをVercel以外でセルフホストまたはOpenNextでAWSとCloudflareにデプロイ。Node.js、Docker、新しいAdapter APIを比較。
コードブロック用のコピーボタンを作成する
Clipboard APIでコードブロックのコピー按钮を作成し、textContent、try/catch、視覚的フィードバック、aria-labelを使います。
npm サプライチェーン攻撃に対するシンプルな防御策
npmのサプライチェーン攻撃をignore-scripts=true、min-release-age、CI検査で防ぎ、新しいインストールスクリプトの実行前に検知します。
`::search-text` で Ctrl+F の検索結果をスタイリングする
ブラウザのページ内検索結果を::search-textと:currentで装飾。CSS対応、使えるプロパティ、Chromium限定の制約を解説。
CSSでリストをスタイリングする創造的な方法
セマンティックHTML、::marker、::before、カウンター、@counter-styleでCSSのリストを整え、カスタム箇条書きと番号をアクセシブルに実現。
WordPressでカスタム投稿タイプを作成する
WordPressのカスタム投稿タイプをregister_post_type、show_in_rest、プラグイン設定、アーカイブと個別表示のテンプレートで作成します。
Node.jsにおけるパストラバーサル攻撃の防止
Node.jsのpath traversal対策を解説。path.resolveとpath.sepでの範囲確認、ユーザー入力ではなくIDベースのファイル取得を紹介。