モーションチェックの設定
操作シナリオを定期実行し、動的な変更をフレーム比較で自動検知するモーションチェックの設定方法を解説します。
モーションチェックとは
Webページ上でスクロール・クリック・フォーム入力などの操作シナリオを定期的に自動実行し、 各アクション後のスクリーンショットを前回と比較して変更を検知する機能です。 ビジュアル監視が「静止画」の差分検知であるのに対し、モーションチェックは「操作後の画面」の差分検知を行います。
モーションチェックは Pro プラン以上で利用可能です。
監視の追加手順
1
モーションチェックページを開く
サイドバーから「モーションチェック」をクリックして、モーション監視の管理ページに移動します。
2
URLと基本設定を入力
監視したいページのURLと監視名を入力します。端末(ビューポート)・チェック間隔・差分閾値を設定します。
- デスクトップ(1920 x 1080)
- iPhone 14(390 x 844)
- iPhone SE(375 x 667)
- iPad(810 x 1080)
- Pixel 7(412 x 915)
チェック間隔では「曜日を指定」を選択して、特定の曜日のみ実行するウィークリースケジュールも設定できます。
3
操作ステップを設定
実行する操作シナリオを「操作ステップ」で構成します。 「+ ステップを追加」メニューからステップを追加し、ドラッグ&ドロップや上下ボタンで順序を変更できます。
4
テスト実行で動作確認
「テスト実行」ボタンを押すと、保存前にシナリオをテスト実行できます。 各ステップの成否が一覧表示されるので、問題があれば修正してください。
5
保存して監視開始
設定を保存すると、次の実行タイミングから自動で監視が開始されます。初回実行時にベースラインとなるフレーム画像が撮影されます。
操作ステップ一覧
以下の操作ステップが利用できます。ページ読み込みは自動で実行されるため、ステップとして追加する必要はありません。
| ステップ | 説明 | パラメータ |
|---|---|---|
| クリック | CSSセレクタで指定した要素をクリック | セレクタ、ナビゲーション待機 |
| 入力 | CSSセレクタで指定したフィールドに値を入力 | セレクタ、入力値、秘密値 |
| ホバー | CSSセレクタで指定した要素にマウスホバー | セレクタ、ホバー時間 |
| スクロール | 上下方向にスクロール | 方向、量(px)、対象セレクタ |
| 要素待機 | 指定した要素が表示されるまで待機 | セレクタ、タイムアウト |
| 待機 | 指定ミリ秒だけ待機 | 待機時間(ms) |
結果の確認方法
実行結果は3つのタブで確認できます。
- 概要 - 全体ステータス・差分率・実行時間・ステップ別結果の一覧
- フレーム比較 - 各ステップ実行後のスクリーンショットを横並び・オーバーレイで比較
- 動画再生 - 前回と今回の録画動画を並べて再生(同期再生対応)
注意事項
「クリック」ステップを使用すると、フォーム送信や購入処理など意図しない操作が実行される可能性があります。 テスト環境で十分に動作確認してから本番サイトに適用してください。
「入力」ステップはフォームフィールドに値を入力します。autosave 機能により保存される場合があります。
ステップが多いとタイムアウト(全体120秒)になる場合があります。 不要なステップは削除してください。
手動実行のクールダウンは60分です。設定変更後はテスト実行で動作確認してから保存することをお勧めします。
プラン別制限
| プラン | 最大監視数 | 最短チェック間隔 |
|---|---|---|
| Free | 利用不可 | - |
| Pro | 1件 | 3時間 |
| Enterprise | 3件 | 1時間 |