画面のFPSをテストする

ようこそ！このフレームレートテストは、ブラウザやデバイスのFPS（フレーム毎秒）パフォーマンスを監視しながら、さまざまな視覚パラメータ（色、サイズ、速度など）を観察・調整するために設計されています。なお、このテストにおけるすべての測定値は概算であり、ブラウザ、オペレーティングシステム、ハードウェアによって影響を受ける場合があります。このテストは、画面パフォーマンスの絶対的な測定値ではなく、あくまで目安としてご利用ください。

フレームレートテストの解釈方法

• 2つの矩形がキャンバス上を左から右へ移動し、右端を通過すると左側から再び現れます。
• 確認点：
  1. 動きの滑らかさとカクつきやジッターの違い。
  2. 高速やパフォーマンスが低い場合に見られるフレームのスキップ。
  3. サイズや不透明度の変化がパフォーマンスに影響するかどうか。

警告：このFPSテストで測定されたFPSや解像度の値は、必ずしもお使いのハードウェアの性能と一致するわけではありません。各ブラウザやデバイスにはそれぞれ制約があるため、これらの数値はあくまで概算とお考えください。

フレームレートテストの使い方と読み方

初めの観察

• このフレームレートテストで矩形の動きを観察し、動きが滑らかか、途切れているかを確認してください。

主要な設定を調整してみる

• 速度を上げたり下げたりして、動きの滑らかさがどう変化するかを確認します。
• キャンバスFPSを変更して、毎秒の位置更新頻度を制限します。
• 不透明度と色を変更し、部分的な透明度や異なる色合いがパフォーマンスに影響するか確認します。

「画面測定FPS」を監視する

• もし測定されたFPSがモニターのリフレッシュレート（通常は60Hz）を下回る場合、ブラウザやハードウェアがパフォーマンスのボトルネックになっている可能性があります。

パフォーマンスの変化に注意する

• 高解像度、大きな矩形、または部分的な透明度は、FPSを低下させる可能性があります。
• ツールFPSの比率をチェックして、テストが設定されたフレーム目標を達成しているか確認してください。

フレームレートテストの設定を理解する

1. 画面上の指標

画面解像度

• お使いの画面またはブラウザウィンドウの幅×高さに、デバイスのピクセル比を掛けた値を表示します。
• 例：「1920 x 1080」と表示されれば、画面のおおよその幅が1920ピクセル、高さが1080ピクセルであることを示します。

測定された画面FPS

• このフレームレートテストでブラウザがレンダリングしている、推定FPS（フレーム毎秒）を表示します。
• 数値が高い（例：60.00や144.00）場合、通常はアニメーションがより滑らかであることを意味します。
• モニターのリフレッシュレートよりも大幅に低い数値は、ブラウザの制約やシステムのボトルネックを示している可能性があります。

ツールFPS

• 実際に測定されたFPSと、「キャンバスFPS」で設定した希望の（論理的な）FPSとの比率を表示します。
• 1.00の場合、このFPSテストは要求された速度で正確に動作していることを意味します。
  • 1.00を上回る値は予想より速く、下回る値は遅いことを示します。

2. フルスクリーン & リセット

フルスクリーンボタン (“⛶”)

• クリックすると、フレームレートテストがフルスクリーンモードに切り替わり、よりはっきりと表示されます。
• ESCキーまたは同じボタンを押すと、フルスクリーンモードを終了します。

設定のリセット

• 「設定リセット」をクリックすると、すべてがデフォルトに戻り、保存されたクッキーの設定がクリアされます。
• その後、ページを再読み込みすると、最新の設定でこのFPSテストが開始されます。

3. 矩形のコントロール

キャンバス上を左から右へ移動する2つの矩形（矩形1と矩形2）があります。各矩形には、FPSテストに関連する以下のプロパティがあります：

A) 色

カラープリセット

• 黒、白、赤、緑、青、黄、マゼンタ、シアンから選択できます。
• 選択した色のラベルは緑色の枠で強調表示されます。

B) サイズ

幅（デフォルト 30px）

• –または+を使い、5px刻みで調整します。
• 幅を広げると、矩形が横に太くなります。

高さ（デフォルト 300px）

• –または+を使い、5px刻みで調整します。
• 値が大きいと矩形が高く、小さいと低くなります。

C) 不透明度

不透明度（デフォルト 100%）

• 0%（完全に透明）から100%（完全に不透明）までの範囲です。
• –/+を使い、約5%刻みで調整します。

注意：矩形1と矩形2は全く同じコントロールを持っています。区別するか、同じにして、フレームレートテストのパフォーマンスに影響があるか確認してください。

4. キャンバス背景の設定

背景色プリセット

• キャンバス背景として、黒、白、赤、緑、青、黄、マゼンタ、シアンの中から選べます。

背景不透明度（デフォルト 100%）

• 背景色の不透明度（実際の濃さや透明さ）を制御します。

5. 追加のコントロール

間隔（デフォルト 50px）

• 矩形1と矩形2の水平間隔を5px刻みで調整します。

速度（デフォルト 250px/s）

• 矩形が移動する速度（1秒あたりのピクセル数）を決定します。
• 速度が高いと動きが速くなり、このFPSテスト中のカクつきや遅延がより見やすくなります。

キャンバスFPS（デフォルト 1）

• 重要：これは実際の画面のリフレッシュレートではなく、このフレームレートテストが毎秒矩形の位置を更新する頻度を示しています。
• 例として、キャンバスFPSを2に設定すると、ツールは半分の速度（50%）で動作します。値が大きいほど、1秒あたりの更新回数が減り、動きがより段階的になります。
• 右側の数字（例：「100%」）は単に 100 / (キャンバスFPSの値) で計算され、全速力の割合を示します。

6. 設定の保存と再読み込み

自動保存

• フレームレートテストで行った各変更は、ブラウザのクッキーに保存されます。
• このページに戻ると、前回使用した設定が自動的に読み込まれ、FPSテストの設定が保持されます。

リセット

• 最初から始めたい場合は、「Reset Settings」をクリックしてクッキーをクリアし、デフォルト設定を読み込みます。

このフレームレートテストで様々なパラメータを試して、ブラウザやデバイスがリアルタイムグラフィックスをどのように処理するかを楽しんでください！ここでの数値―特にFPSは―おおよその推定値であり、システムの全能力を反映していない場合があります。