東カレデートChrome拡張検索

さあ、今すぐ理想の彼女をGETしよう。

トップ > 【v0.9.2】東カレデートChrome拡張アップデート — UA自動偽装でDevTools不要に＆ウェルカムページ追加

【v0.9.2】東カレデートChrome拡張アップデート — UA自動偽装でDevTools不要に＆ウェルカムページ追加

  • UA自動偽装でDevToolsを開く手間がゼロに
  • インストール直後にウェルカムページが自動で開き、4ステップでセットアップ完了
  • Chrome Manifest V3のdeclarativeNetRequest APIで実現した安全な仕組み
東カレデートをPCで使いたいのに、毎回DevTools開いてUA切り替えるの面倒すぎない？
わかる。自分も開発中に何度もやってて嫌になったから、拡張側で自動化した！
v0.9.2ではUA自動偽装とウェルカムページの2つが追加されています。順番に見ていきましょう！

UA自動偽装 — もうDevToolsは不要

v0.9.2最大の変更点がUA（User-Agent）自動偽装です。

東カレデートはスマホ向けサービスなので、PCブラウザでアクセスするとPC向けの表示になってしまいます。これまではChromeのDevToolsを開いてUser-Agentを手動でモバイルに切り替える必要がありました。

Before（v0.9.1以前）

  1. 拡張をインストール
  2. 東カレデートを開く
  3. F12でDevToolsを開く
  4. ネットワーク条件からUA文字列を変更
  5. モバイル用のUA文字列を入力
  6. ページをリロード
  7. ログインして利用開始

DevTools操作だけで4ステップも余計にかかっていました。開発者でなければ「DevToolsって何？」という状態です。

After（v0.9.2）

  1. 拡張をインストール（ウェルカムページが自動で開く）
  2. 「東カレデートを開く」ボタンをクリック
  3. ログイン
  4. 利用開始

DevToolsの操作は一切不要。拡張がバックグラウンドでHTTPヘッダーを書き換え、東カレデートのサーバーにはiPhoneからのアクセスに見せかけます。

UA自動偽装でスマホ表示された東カレデート公式サイト
拡張を入れるだけでスマホ表示に切り替わる

ということは、拡張入れるだけでスマホ表示になるってこと？
そう。tokyo-calendar-date.jp へのリクエストだけを対象に、User-AgentヘッダーをiPhone用に差し替えている。他のサイトには一切影響しない！

技術的な仕組み

Chrome Manifest V3のdeclarativeNetRequest APIを使っています。

このAPIはネットワークリクエストのヘッダーを宣言的に書き換える仕組みで、バックグラウンドでJavaScriptを常時動かす必要がありません。書き換えるヘッダーは3つです。

ヘッダー 書き換え内容
User-Agent iPhone（iOS 17）のUA文字列
Sec-CH-UA-Mobile ?1（モバイルであることを示す）
Sec-CH-UA-Platform "iOS"
declarativeNetRequestはChrome拡張の中でも安全性が高いAPIです。対象ドメインを限定できるので、他のサイトへの影響はありません。

ウェルカムページ — インストール直後のガイド

もう一つの新機能がウェルカムページ（オンボーディング）です。

拡張をインストールした瞬間に自動で開き、4ステップのガイドでセットアップを案内します。

ウェルカムページ STEP 0 インストール直後の画面
インストール直後に自動で開くウェルカムページ

4ステップの流れ

ステップ 内容
STEP 0 ウェルカム画面。拡張の3つの機能（検索・バラ情報・AI）を紹介
STEP 1 東カレデートを開く。UA自動偽装でそのままスマホ表示に
STEP 2 ログイン方法の案内（Apple ID・Facebook・電話番号）
STEP 3 セットアップ完了。クイックスタートカードで各機能へ誘導
初めて入れたとき何をすればいいかわからなかったから、これは助かる！
ユーザーさんからも「入れたけど使い方がわからない」って声があったから、それを解消したかった。

進捗バーがヘッダーに表示されるので、今どのステップにいるか一目でわかります。完了したステップにはチェックマークがつく仕組みです。

ウェルカムページ STEP 1 東カレデートをPCブラウザで開く
STEP 1: 東カレデートを開く＋レスポンシブモードの案内

東カレデートのログイン画面（スマホ表示）
UA偽装でスマホ版のログイン画面が表示される

ウェルカムページ STEP 2 ログイン方法の案内
STEP 2: ログイン方法を案内（Apple ID・Facebook・電話番号）

東カレデートのメールアドレスログイン画面
メールアドレスでもログイン可能

ウェルカムページ STEP 3 セットアップ完了画面
STEP 3: セットアップ完了。各機能へのクイックスタート

画面が大きいと感じたら

UA自動偽装によってスマホ表示になるため、PCの大画面では表示が大きく感じることがあります。

その場合はChromeのDevToolsでレスポンシブモードにすると、スマホサイズの画面幅で快適に使えます。

  • Windows: F12キーでDevToolsを開き、レスポンシブモードに切り替え
  • Mac: Cmd + Option + IでDevToolsを開き、レスポンシブモードに切り替え

デバイスプリセットで「iPhone 14 Pro」などを選ぶと、実際のスマホに近い表示サイズになります。

ただし、UA偽装は拡張が自動で行うので、DevToolsでUA文字列を手動設定する必要はもうありません。画面サイズの調整だけです！

まとめ

東カレデートの一覧画面（スマホ表示）
セットアップ完了後の東カレデート一覧画面

v0.9.2では、使い始めのハードルを下げることに集中しました。

DevToolsでUA切り替えっていう最大の壁がなくなったのが一番大きい。
確かに、あれで挫折してた人は多そう。
ウェルカムページで初回の迷いもなくなるので、インストールから実際に使い始めるまでがスムーズになりますね！
気に入ったらChromeウェブストアでレビューしてもらえると嬉しい！

拡張のインストールはこちらから。

chromewebstore.google.com

AIによるプロフィール診断もあわせてどうぞ。

toukare-profile-review.pages.dev