auto_fix_high

Honoka(HTML版)

Web操作記録・自動再生ツール

Web操作を記録して自動再生

ブラウザ操作を記録し、繰り返し自動実行できます

bolt クイックスタート

1 操作を記録

対象サイトで操作を記録

2 シナリオ編集

記録した操作を編集・調整

3 自動実行

シナリオを自動で実行

menu_book 詳しい使い方

radio_button_unchecked STEP 1: 操作を記録する expand_more

1. 上の「記録スクリプトをコピー」ボタンをクリック

2. 対象のWebサイトを開き、F12 で開発者ツールを開く

3. Consoleタブでスクリプトを貼り付けて Enter

4. 画面右下に記録パネルが表示されたら、通常通り操作

5. 操作完了後、「終了してコピー」ボタンまたは Alt+S

6. 「シナリオ編集」タブ → 「記録を取り込む」で貼り付け

💡 ページ遷移対応: 記録スクリプトもChrome Snippetsに保存すれば、ページ遷移しても続けて記録できます
radio_button_unchecked STEP 2: シナリオを編集する expand_more

• 記録された操作を確認・修正できます

• 「入力」を「手動入力」に変更 → 実行時に入力待ちになります

• 「待機」を追加 → ページ読み込みを待てます

• ステップの順序変更・削除も可能

radio_button_unchecked STEP 3: 繰り返しデータを設定（オプション） expand_more

• 同じ操作を複数データで繰り返す場合に使用

• 変数名とデータを設定し、シナリオで {{変数名}} を使用

• 例: 10人分のユーザー登録を自動化

radio_button_unchecked STEP 4: 自動実行する expand_more

Chrome Snippets を使う方法（推奨）:

1. F12 → Sources → Snippets → + New snippet

2. 「実行スクリプトをコピー」を貼り付けて保存

3. 対象サイトで Ctrl+Enter で実行

4. ページ遷移後は Ctrl+Shift+P → !スニペット名 で続行

✨ ポイント: Snippetsに保存すれば、毎回コピペ不要。ページ遷移しても続きから実行できます

sync ページ遷移対応について

なぜページ遷移対応が必要？

ブラウザの仕様上、ページが遷移（URLが変わる）するとコンソールで実行中のスクリプトは終了します。 そのため、ログイン→ダッシュボード→設定画面のような複数ページにまたがる操作を自動化するには、 ページ遷移後にスクリプトを再実行する仕組みが必要です。

Honoka(HTML版)の解決方法

  • check_circle 自動状態保存: 各ステップ実行前にブラウザの localStorage に進捗を自動保存
  • check_circle 自動再開: ページ遷移後にスクリプトを再実行すると「続きから再開しますか？」と確認
  • check_circle Chrome Snippets: スクリプトを保存しておけば、ワンアクションで再実行可能

具体的な使い方

▼ 初回セットアップ（1回だけ）

  1. 1. F12 キーで開発者ツールを開く
  2. 2. Sources タブをクリック
  3. 3. 左パネルで Snippets を選択（見つからない場合は >> をクリック）
  4. 4. + New snippet をクリック
  5. 5. 名前を入力（例: auto-login）
  6. 6. Honoka(HTML版)の「実行スクリプトをコピー」を貼り付け
  7. 7. Ctrl+S で保存

▼ 実行方法

  1. 1. 対象サイトの開始ページを開く
  2. 2. F12 → Sources → Snippets → 作成したスニペットを選択
  3. 3. Ctrl+Enter で実行開始

▼ ページ遷移後の続行方法（2通り）

方法A: コマンドパレット（推奨）

  1. 1. Ctrl+Shift+P
  2. 2. ! を入力
  3. 3. スニペット名を選択してEnter

方法B: Sourcesタブから

  1. 1. F12 でDevTools開く
  2. 2. Sources → Snippets
  3. 3. スニペットを右クリック → Run

動作フロー例

ログイン画面 → Ctrl+Enter で実行 → ID/PW入力、ログインボタンクリック
sync ページ遷移発生 → スクリプト終了 → 状態は保存済み
ダッシュボード → Ctrl+Shift+P → !スニペット名 → 「続きから再開？」→ OK
sync ページ遷移発生 → スクリプト終了 → 状態は保存済み
設定画面 → Ctrl+Shift+P → !スニペット名 → 続きを実行 → 完了！

💡 Tips

  • • 保存された状態は 1時間 有効です
  • • 「要素待ち」ステップを使うと、ページ読み込み完了を待てます
  • • 開始URLを設定しておくと、どのページからでも正しいページへ誘導されます
  • • 記録スクリプトもSnippetsに保存すれば、複数ページにまたがる操作も記録できます
手動追加:
基本操作
待機・同期
検証・制御
その他
{{ steps.length }} ステップ
launch open_in_new 開く
playlist_add

操作ステップがありません

操作を記録するか、手動でステップを追加してください

繰り返しデータ

同じ操作を複数データで繰り返す場合に設定

{{ tableData.rows.length }} 件のデータ データなし（1回実行）
help_outline

使い方

1. 変数名を設定（例: username, password）

2. データ行を追加

3. シナリオの入力値で {{変数名}} を使用

データがありません

{{ rowIdx + 1 }}

※ 1行目=変数名、2行目以降=データ

💡 タブ区切り/カンマ区切りを自動判別します（Excelからの貼り付けに対応）

実行準備

{{ steps.length > 0 ? 'check_circle' : 'error' }} シナリオ: {{ steps.length > 0 ? steps.length + 'ステップ設定済み' : '未設定' }}
repeat 繰り返し: {{ tableData.rows.length > 0 ? tableData.rows.length + '件のデータ' : '1回のみ' }}
launch 開始URL: {{ startUrl }} 開く ↗
play_circle

実行スクリプトをコピー

Chrome Snippets に保存して使用します

school 実行手順

  1. 1

    Chrome Snippets に保存

    F12 → Sources → Snippets → + New snippet → 貼り付け

  2. 2

    対象サイトで実行

    開始URLを開き、Ctrl+Enter で実行

  3. 3

    ページ遷移後は続行

    Ctrl+Shift+P → !スニペット名 → Enter