今回は、本サイト上でブラウザ上でベンチマークを行うことができる「Web快適度測定」というツールについて、なぜこれを作ったのか、そして中身はどうなっているのか、少しだけ深掘りして紹介してみようと思います。

開発の経緯：対応デバイスを決めるの、むずくない？​

この機能を作ったきっかけは、現在業務で開発しているサービスの「対応デバイス」を検討していた時のことでした。

「AndroidはOS12以上」「Safari 16以上」「Chrome 110以上」といった基準はよくありますが、実際にはスペックの低いAndroid端末もあれば、OSやブラウザは最新でもパワーが不足しているデバイス、逆に古くてもパワーのある旧ハイエンド端末もあったりします。 開発チームで「どこまでの低スペック端末を切り捨てるか」を議論する際、明確な基準がないことに非常に苦労しました。

そこで、「ブラウザ上で手軽に動かせて、その端末の『Web的な実力』を数値化できるベンチマークがあれば、そのスコアを基準に対応デバイスを定義できるのでは？」と思いついたのが、この機能の始まりです。

Web快適度測定の基本仕様​

このツールは、大きく分けて2つの測定を行います。

1. 演算性能の測定（スコア化）:
   端末のCPUパワーを測定し、シングルコア・マルチコアそれぞれのスコアとランク（S〜F）を出します。
2. ブラウザ機能サポート状況:
   最新のWeb API（WebGPU, Passkeys, WebP等）がそのブラウザで使えるかをチェックします。

スコアとサポート状況は計測後、画面に表示されます。

また、測定して終わりではなく、結果を誰かに伝えたり記録したりしやすいよう、共有機能も追加しています。ブラウザの Web Share API を使ってOS標準の共有メニューを直接呼び出せます。HTML5 Canvas を使用し、スコア・ランク・環境情報を表示した結果画像を自動で作成し、そのままX（旧Twitter）やLINE、メッセージアプリへ送信できます。

ベンチマークの処理の詳細​

1. Web Workerによる正確な測定​

ベンチマーク中、メインスレッド（UIを動かすスレッド）が固まらないようにするため、演算処理はすべてWeb Workerで実行するようにしています。

// Web Worker 上で実行される演算ロジックの一部
const workerScript = `
self.onmessage = function(e) {
  // 1. 浮動小数点演算 (sin, cos, sqrt)
  let floatSum = 0;
  for (let i = 0; i < 10000000; i++) {
    floatSum += Math.sin(i) * Math.cos(i) + Math.sqrt(i);
  }

  // 2. 整数・ビット演算
  let intSum = 0;
  for (let i = 0; i < 50000000; i++) {
    intSum += (i * 1337) ^ (i << 2);
  }

  // 3. メモリアクセス
  const size = 5000000;
  const arr = new Int32Array(size);
  // ... 配列へのランダムアクセス処理

  // 処理終了をメインスレッドに通知
  self.postMessage({ type: 'done', avgTime: 123 /* 実際は計算値 */ });
};
`;

// Web Workerを生成して実行し、結果をPromiseで返す関数
function runWorkerTask(passes) {
  return new Promise((resolve) => {
    // 文字列として定義したスクリプトをBlob化してWorkerとして読み込む
    const blob = new Blob([workerScript], { type: "application/javascript" });
    const worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = (e) => {
      if (e.data.type === "done") {
        worker.terminate(); // 終わったらWorkerを破棄
        resolve(e.data.avgTime);
      }
    };

    // Workerに実行命令（パス回数など）を送信
    worker.postMessage({ passes });
  });
}

2. マルチコア測定の実装​

デバイスの論理コア数（navigator.hardwareConcurrency）を取得し、その数だけ同時に Worker を立ち上げて並列処理を行わせます。Promise.all を活用して全ての Worker の完了を待機し、総合的なスループットからスコアを算出するようにしました。これにより、最近の多コアスマホの実力をしっかり引き出せるようにしています。

async function runMultiCoreBenchmark(cores, passes, onProgress) {
  const workers = [];
  const startAll = performance.now();
  let completedPasses = 0;
  const totalPasses = passes * cores;

  // デバイスの論理コア数分だけ Worker を作成して実行
  for (let i = 0; i < cores; i++) {
    workers.push(
      runWorkerTask(passes, () => {
        completedPasses++;
        // 全体の進捗率を計算してUIに通知
        if (onProgress) {
          const percent = Math.floor((completedPasses / totalPasses) * 100);
          onProgress(`マルチコア測定中... (${percent}%)`);
        }
      }),
    );
  }

  // すべての並列処理が終わるまで待機
  await Promise.all(workers);
  const endAll = performance.now();

  // 実行時間から最終的なマルチコアスコアを計算
  const totalTime = endAll - startAll;
  return Math.floor((500_000 * cores * passes) / totalTime);
}

3. ブラウザ機能のサポートチェック​

単に計算が速いだけでなく、現代のWebサービスを支える最新のAPIに対応しているかどうかも、体験の質に大きく関わります。以下の4つのカテゴリで診断を行っています。

• SNS・メディア閲覧
  「SNSや動画サイト等が快適に動作するか」を判定します。次世代画像の AVIF/WebP や、高効率ビデオコーデックの AV1、優先読み込みを行う fetchpriority などをチェック。これらに対応していると、表示速度が劇的に向上し、通信量も抑えられます。
• ビジネス・ツール
  「NotionやFigma等のアプリ級サイトが快適に動くか」を判定します。ポップアップを制御する Popover API や、ブラウザ上でのZIP圧縮を可能にする Compression Streams、オフライン対応の IndexedDB v3 などをチェック。これらは高機能なWebツールの安定性に直結します。
• エンタメ・クリエイティブ
  「3D、アニメーション、ゲームが快適に動作するか」を判定します。次世代3Dグラフィックスの WebGPU や、滑らかな画面遷移を実現する View Transitions API、スクロール連動演出の Scroll-driven Animations などをチェック。リッチな視覚表現が可能になります。
• システム・その他:
  「アプリ化、通知、ログインの快適さ」を判定します。指紋・顔認証でのログインを可能にする Passkeys (WebAuthn) や、画面をスリープさせない Screen Wake Lock API、ローカルファイルを直接編集できる File System Access API などをチェックしています。

これらの判定結果を表示し、アコーディオン形式でそれぞれどの機能に現在使用しているブラウザが対応しているか、確認できるようになっています。

便利な使い方・活用シーン​

単なる「性能測定」以上に、以下のような具体的なシーンで活用してもらえると嬉しいです！

• 手元のデバイスのWeb性能のベンチマーク
  手元にあるスマートフォンやタブレット、PCがどれくらいのWeb処理能力があるのか確認することができます。特にミドルレンジ以下の端末では、最新機能のサポート状況を知る良い指標になります。
• ブラウザによる性能特性の比較
  同じデバイスでも、Safari（WebKit）とChrome（Blink）ではJSエンジンの実装が異なります。どちらが演算に強く、最新機能に対応しているかを比べてみて、自分のデバイスにあったブラウザを見つけてみてください。
• プロジェクトのターゲットデバイス選定:
  開発プロジェクトで「今回はDランク以上の端末を推奨環境とする」といった具体的な数値を定義するために。OSバージョンや発売日といった曖昧な指標ではなく、現在のWebブラウザにおける「実力値」をベースにした議論が可能になります。

ぜひ、皆さんの手元のデバイスでも Web快適度測定 を試してみてください！

こんにちは。管理人の sawarame です。

このサイトは、個人的に日々の生活や仕事の中で「ちょっとこういうツールが欲しいな」と思ったものを形にして集めた、ツール集です。

なぜ作ったのか？​

世の中には便利なツールが溢れていますが、意外と「痒いところに手が届かない」ことや、「自分のデータをサーバーに送りたくない」という不安を感じることがありました。

そのため、このサイトのすべてのツールは ブラウザ上で完結（クライアントサイド処理） するように作られています。画像やPDF、パスワードの生成などは、サーバーに送られたりデバイスの外にデータが出ることはありませんので、安心して使うことができます。

公開しているツールについて​

現在公開しているツールには、それぞれ地味ながらこだわったポイントがあります。似たようなツールは他にもありますが、自分なりに使いやすい機能に仕上げています。

1. パスワードジェネレーター
   単にパスワードを自動生成するだけでなく、URLパラメータとの同期にこだわりました。長さや使用文字の設定がすべてURLに反映されるので、お気に入りの設定をブックマークしたり、チームで「この設定でパスワード作って」と共有したりできます。
2. テキスト保存場所
   ブラウザのローカルストレージを利用した、テキストデータを保存できる場所です。ブラウザを閉じてもデータが消えず、何かふと思ったことメモしておける機能として開発しました。よくコピペするワードとかを置いておけるスニペットとして使うこともできます。　ピン留め機能 を実装したので、作業中に何度も使うテンプレを常に最上部に置いておけます。
3. デバイス情報チェッカー
   デバイスの画面サイズやユーザーエージェントを確認できます。意外とスマホやタブレットのサイズってよくわからないことがあるので、実機でアクセスすることで実際の画面サイズを確認することができます。レスポンシブサイトとかを開発する際に役に立ちます。
4. QRコード作成
   Wi-Fi、連絡先、カレンダー登録など、多彩なフォーマットに対応しています。ロゴ埋め込みもできるので、販促チラシを作成する際にオリジナリティのあるQRコードが作成できます。。
5. 日付比較ツール
   「2026年4月30日」といった日本語形式やUNIX TIMESTAMPなど、入力フォーマットの寛容さにこだわりました。どんな形式でコピーしてきても、いい感じにパースして差分を出してくれます。常に現在時刻との比較を出すこともできますので、Xデーまでのカウントダウンや、過去の日付からどらくらいの時間が経過したか出力しておくこともできます。
6. 写真Exif情報チェッカー
   写真データからExifデータを取得し表示します。撮影条件だけでなく、GPS情報があれば緯度経度を表示し、Googleマップへのリンクを即座に生成します。
7. 画像軽量化・クロップツール
   WebPへの変換はもちろん、スライダーによるBefore/Afterの比較プレビュー、主要なSNS（OGPやX）に合わせたアスペクト比プリセットなど、サイト・ブログ・SNS運営に便利な機能となるように開発しました。
8. PDF画像変換
   ブラウザ内でPDFをレンダリングし、画像データに変換します。必要なページだけを選んでZIPで固める という、シンプルな機能でスムーズに使用できるようになっています。
9. Web快適度測定（ベンチマーク）
   ただのスコア測定ではなく、Web Workerを用いたマルチスレッド演算 によるマルチコアのベンチマークができます。また、最新のWeb技術（WebGPUやPasskeys等）への対応状況をカテゴリ別に診断する機能もあり、自分の環境の「モダンさ」を可視化できるようにしています。

ブラウザ拡張機能も公開中​

日々のブラウジングを少し便利にする拡張機能も、Chrome Web Store で公開しています。

• EnvIcon:
  本番・検証・開発環境でfaviconを動的に書き換えます。「検証環境のつもりで本番を触っていた」という、エンジニアなら一度はやるヒヤリハット を防ぎたくて作りました。faviconの書き換えだけではなく、ページ内でのバッジ表示や、デベロッパーツールのコンソールの環境表示に対応しています。
• Gemini Spark:
  Google Gemini のWEB UIのプロンプト入力を「Enterで改行、Cmd+Enterで送信」という挙動に変更します。改行しようと思っただけなのに、何度も送信してしまうことがあったので作ってみました。今後GeminiのWEB UIをアップグレードする機能を追加しようと思っているのですが、今のところ何も思いついていません、、、
• MdPicker:
  閲覧中のページタイトルとURLを、ワンクリックでMarkdown形式のリンクにしてコピーします。ブログ執筆やドキュメント作成のスピードを上げるための必須ツールです。

これから​

自分自身が使いやすいと思うものを、これからも少しずつ増やしていく予定です。 「痒いところに手が届く」そんな場所を目指しています。