今回はPlaywrightでdesktop / tablet / mobileの3つのビューポートを一発でテストして、各テストの操作フローをスクリーンショット連番として自動収集する方法と構成について紹介していきます。
個人開発でレスポンシブ対応をすると、「PCでは問題ないがスマホだけレイアウトが崩れる」というバグが定期的に発生します。
毎回手で確認するのは、さすがに今どきでは無く現実的でないので、E2Eテストで3画面サイズを自動で回し、操作フローのエビデンスをまとめて取得する仕組みを入れています。
自分が作ったcopype.shinpinoshi.comこぴぺったりでは、6 spec × 3ビューポート = テスト1回で189枚のスクリーンショットが取れる構成にしています。
個人開発の方や業務の自動化をガンガン回したい方は是非見ていってください！
それではやっていきましょう（^^!
今回はダークモード対応のWebアプリをリロードする時に発生する「ライトテーマからダークテーマへの一瞬チカッっと現象」を消す方法について紹介していきます。
ダークテーマで運用しているのに、リロードすると一瞬「白い画面が一瞬パッと光って、それからダークに戻る」あの嫌なフラッシュって触ってみると違和感がありますよね…
体験品質をどん底まで下げるので、私が作ったcopype.shinpinoshi.comこぴぺったりでは最初から対策を入れております。
実装は数行のインラインscriptとCSS変数だけで完結するので、React/Vue 問わず使える超有益な小ネタです。
できるだけわかりやすく説明しているつもりなので、是非見ていってください！
それではやっていきましょう（^^!
今回はVite + ReactのSPAをvite-plugin-pwaでPWA化する手順を紹介していきます。
PWA化するとホーム画面追加・オフライン動作・LighthouseのPWAスコア獲得と、個人開発でも嬉しい恩恵がまとめて手に入ります。
個人的にはブラウザでの表示と違い、画面上にURLが表示されないことがかなりうれしい！
AppStoreからインストールしたアプリみたいに動くのは開発者としてうれしいですよ（^^
実際に自分が作ったcopype.shinpinoshi.comこぴぺったり（ローカルストレージで動くコピペ管理アプリ）でもこの手順そのままでPWA化していて、スマホからホーム画面に追加するとアプリのように起動できます。
それではやっていきましょう（^^!
今回は定型文・コードスニペット・メール返信テンプレートなどをフォルダで整理して、ワンタップでコピーできるWebアプリ「こぴぺったり」を作ったので紹介します。
このアプリの最大の特徴はサーバー送信ゼロ・データはすべて自分のブラウザ内だけで完結することです。
社外秘のメールテンプレートや業務用コマンド、個人情報を含む連絡先テンプレートなども、外部にアップロードされる心配なしに保管できます。
仕事中に同じ文面・同じコマンドを何度もコピペしている方は、「メモ帳と作業画面を行ったり来たりするの、地味に面倒くさい」と感じたことはないでしょうか。
自分は毎日感じてました（^^;
なので「フォルダで整理できて、検索もできて、ワンタップでコピーできる」アプリを自分で作ってしまうことにしました。
そこで完成したのが「こぴぺったり」です。
公開URLはこちら → copype.shinpinoshi.comhttps://copype.shinpinoshi.com/
ブラウザで開いてすぐ使えます。
（インストール不要、登録不要、無料）
この記事ではアプリの使い方など詳細を紹介していきます（^^!
それではやっていきましょう！
今回は、新潟県の越後湯沢を1泊2日で行ってきたので体験をまとめて紹介していきます。
越後湯沢といえばスキーの印象が強く、車が必須かつ冬だけといったイメージが強いですが、実は駅から徒歩圏内かつ冬以外でも「日本酒の試飲」「酒風呂」「日帰り温泉」「滝」「猫カフェ」とめちゃくちゃ楽しめてしまう観光地でした！
車が無くても新幹線1本（東京駅から約75分）でアクセスでき、現地は完全に駅徒歩でまわれるので、移動のストレスが本当に少ないのが嬉しいですよね！
「越後湯沢に何があるのか具体的に知りたい」
「駅徒歩で1泊2日のモデルコースを組みたい」
「お酒・温泉・自然・グルメをまとめて楽しみたい」
そんな方に向けて、実際に1泊2日で巡った11スポット（カフェ・お肉屋さん・日本酒・温泉・滝・猫カフェまで）を、写真付き・順番付き・体感の所要時間付きで全部レビューしていきます（^^
それではやっていきましょう！
今回は求人ページやライブ配信ページを、Googleにできるだけ早くインデックス登録する方法について紹介していきます。
求人サイトや動画配信サイトを運営していると、「公開した求人 / 配信ページを1秒でも早くGoogleに拾ってほしい」という悩みはあると思います。
というよりか早く登録しないと死活問題ですよね（^^
求人は応募タイミングが命ですし、ライブ配信は開始時刻を過ぎたら検索結果に出る意味がありません。
しかし通常のクローラ任せだと数時間〜数日かかってしまうので、こういった悩みには対応できません。
ただそこは天下のGoogle様。
こういったページのために即時通知用APIとして「Google Indexing API」というものがあります。
これをNode.jsから叩くように実装をすれば、公開アクションと同時にGoogleに通知して、数分でインデックスに乗せることができます。
今回はそんななるはやでインデックス登録を申請できる方法を紹介していきます。
Node.jsで実装しているので大抵の環境では動くと思います。
それではやっていきましょう（^^!
今回はObsidianの保管庫（vault）を iCloud Drive 経由で iPhone と Windows PC の間で同期する方法について紹介していきます。
Obsidianを使い始めると、スマホで思いついたメモをサッと書いておいて、PCでそのメモを見たいというシーンが結構ありますよね（^^
ただPCとiPhoneの連携には公式の Obsidian Sync が一番便利なのですが有料サービスなので、「無料で iPhone と Windows のメモを同期したい」という場合には少しアンマッチです。
そこで色々調べてみた結果、iCloud Driveを使用することで無料で実現可能なことが分かりました！
ただ、この方法は結構沼りやすく、例えば、iPhone 側で iCloud Drive の同期設定が漏れていたり、PC 側で iCloud がそもそも入っていなかったりすると、「なぜか PC からフォルダが見えない」「保管庫が見つからない」というハマり方をします（- -;
実際自分も何度かハマったので、同じところで止まっている方の参考になればと思って手順を残しておきます（^^b
それではやっていきましょう（^^!
今回はサイトを作っているときにスマホでだけ左右にほんの少しスクロールできてしまう現象（iOS Safariのelastic bounce）の直し方について紹介していきます。
サイト開発をしていると、PCではちゃんと動作しているのに、スマホで触ったときだけ「左右にちょっとだけスクロールできて、指を離すとスーッと中央に戻る」というな謎な挙動に出くわすことってありますよね（- -;
壊れているわけではないけれど、触ったときの違和感が大きい。
レイアウトが崩れているわけではないので、ぱっと見では原因が分からず、説明も難しい、、、
これは結構ハマるやつです。
自分はハマりました。
同じ症状で困っている方の参考になればと思って残しておきます（^^b
それではやっていきましょう（^^!