インタラクティブ手順書

使い方

1. 空の手順書、操作手順、点検チェック、トラブル対応から開始方法を選び、手順書タイトルを入力します。
2. 文章 / 画像 / 見出し / 手順 / 注意・補足 / チェックリスト / リンク / 折りたたみ / タブ / コード / 区切りを追加します。
3. PCではブロック間の+、スマートフォンでは下部の編集UIを使い、必要な位置へブロックを差し込みます。
4. 画像はファイル選択、Drag & Drop、クリップボード貼り付けで追加し、代替テキスト・キャプション・表示幅・配置を調整します。
5. 必要に応じて折りたたみ、2〜5個のタブ、チェックリスト、コードブロックなどを使って内容を整理します。
6. ブロックをドラッグまたは上下移動で並べ替えます。手順番号は並び順に合わせて自動更新され、Undo / Redoも利用できます。
7. 文書設定から文字サイズ、本文幅、表示テーマを調整し、プレビューで実際の閲覧状態を確認します。
8. HTMLを書き出す前にブロック数・画像数・ファイルサイズ・ファイル名を確認します。25 MB以上では大容量警告が表示されます。
9. HTMLを保存します。保存後は生成したファイル名とサイズが完了状態に表示されます。
10. 後日修正するときは「HTMLを開く」からInteractive Guide Makerで書き出したHTMLを選び、復元した内容を編集して再度保存します。

対応範囲

• 開始テンプレート: 空 / 操作手順 / 点検チェック / トラブル対応。
• ブロック: 文章、画像、見出し、手順、注意・補足、チェックリスト、リンク、区切り、折りたたみ、タブ、コード。
• 画像: PNG / JPEG / WebP / GIF。ファイル選択、Drag & Drop、クリップボード貼り付けに対応。
• タブ: 2〜5個。タブ内には文章 / 注意・補足 / チェックリスト / リンク / コード / 区切りを複数配置できます。タブ内タブは作成しません。
• 編集: 複製、削除、上下移動、ドラッグ並べ替え、Undo / Redo、削除後Undoトースト。手順番号は並び順に合わせて自動更新します。
• 自動保存: IndexedDBを優先し、利用できない環境ではlocalStorageへフォールバックします。
• HTML出力: 自動目次、全文検索、チェックリスト、折りたたみ、タブ、コードコピー、画像ライトボックス、テーマ切替、印刷CSSを含む自己完結HTML。
• 再編集: Interactive Guide Makerが書き出したHTML内のschemaVersionとアプリ識別情報を検証し、埋め込み編集データを復元します。読み込んだHTML内のスクリプトは実行しません。
• スマホ: 構成 / 編集 / プレビューの下部固定タブとBottom Sheetを使用します。
• 出力サイズ: 保存前に生成サイズを表示し、25 MB以上では大容量警告を出します。25 MBは警告基準であり、アプリの固定出力上限ではありません。
• 実行時通信: 外部CDN、API、Analytics、Telemetryなし。既定CSPはconnect-src 'none'です。

制限・注意点

• 一般の任意HTMLを編集するHTMLエディターではありません。再編集できるのはInteractive Guide Makerが書き出した対応形式のHTMLです。
• ブラウザーのサイトデータを削除すると、IndexedDB / localStorageへ自動保存された下書きは消える場合があります。重要な手順書はHTMLとして書き出してください。
• 出力HTMLへ画像を埋め込むため、画像が多いほどファイルサイズが大きくなります。25 MB以上では警告しますが、配布先のメール・チャット・ストレージ側にも独自の容量制限があります。
• タブは2〜5個で、タブの中に別のタブを入れる構成には対応しません。
• 文章ブロックの装飾は太字、リンク、インラインコードなどの簡易入力が中心で、一般的なワープロやDTPソフトのような自由レイアウト編集ではありません。
• 自動保存の可否や容量はブラウザーのストレージ実装・空き容量に依存します。
• 安全でないURL形式には警告しますが、完成手順書に記載するリンク先の内容や可用性を検証する機能ではありません。