htmldrop について
HTMLDropは、ローカルのHTMLやMarkdownファイルから一時的なプレビューリンクを作成するスキルです。アップロード、公開範囲や期限の設定、既存プレビューの更新に加え、必要に応じてコメントのアンカーを移行します。
主な機能
- 01HTMLとMarkdownのプレビューをアップロード
- 02非公開・公開リンクの設定
- 03有効期限と更新設定
- 04既存プレビューURLの更新
- 05コメント取得とアンカー移行
活用シーン
- 01レンダリング済みレポートのレビュー共有
- 02パスワード不要のプレビュー公開
- 03プレビューの固定削除日の設定
- 04コンテンツ差し替え時のコメント位置維持
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ ordoai/ htmldrop --skill htmldropインストール後、Claude Code で/htmldropを入力して読み込まれたか確認します。
詳細
HTMLDrop
このスキルを使うと、ローカルの HTML または Markdown の成果物を、一時的な baseurl.ai のプレビュー URL に変換できます。完全な URL には ?p=... としてアクセスパスワードが含まれており、この完全な URL を知っている人なら誰でもページを閲覧できます。
アップロード前
- アップロードする成果物を特定します。
- ユーザーがパスを指定した場合は、そのファイルの存在を確認してから、指定されたファイルをそのまま使用します。
- HTML または Markdown のレポートを生成した直後の場合は、生成したファイルを使用します。
- 候補ファイルが複数あり、ユーザーがそのうちの一つを指定していない場合は、文脈から判断できるときに限り、最近生成された
.html、.htm、.md、または.markdownファイルのうち、最も関連性の高いものを選びます。それ以外の場合は、簡潔な質問を一つします。
- アップロード前に、コンテンツの機密性を確認します。
- ファイルに認証情報、秘密鍵、トークン、シークレット、またはユーザーが外部共有するつもりのないデータが含まれているように見える場合は、アップロードを中止して、事前に確認します。
- 返される URL にはクエリ文字列にパスワードが含まれているため、機密情報を含むリンクとして扱います。
- HTMLDrop は、レンダリング可能な成果物にのみ使用します。ユーザーが生のソース、ログ、JSON、CSV、その他レンダリングできないファイルの共有を依頼した場合は、その依頼に合致するなら、まず簡単な HTML または Markdown のラッパーを作成します。それ以外の場合は、このスキルは HTML/Markdown のプレビュー用であることを説明します。
コマンド
公開済みの CLI を npx で実行します。
npx -y htmldrop-cli "<file>"
省略形では新しいプレビューを作成します。明示的な作成形式も同じ動作です。
npx -y htmldrop-cli create "<file>"
CLI では、相対パス、絶対パス、~/...、file:// URI を使用できます。
スペースを正しく処理できるよう、パスを引用符で囲んでください。
ローカルファイルの名前が文字どおり create、update、settings、または
comments の場合は、たとえば npx -y htmldrop-cli create ./update のように、
パスを指定した明示的な作成形式を使用してください。
インストール済みの CLI のバージョンを確認するには、次のコマンドを実行します。
npx -y htmldrop-cli --version
プレビューはデフォルトで非公開です。パスワード付きリンクからのみ開けます。
ユーザーがパスワードなしで開けるリンク(公開投稿、求人広告、自由に転送できるものなど)を希望する場合は、--public を指定します。
npx -y htmldrop-cli --public "<file>"
デフォルトでは、プレビューを開くたびに有効期限が更新されます。14 日間アクセスがないと削除され、アクセスするたびにその 14 日間が再開されます。ただし、アップロードから最長 1 年までです。--expires <days> を指定すると、期間を 1~30 日に設定できます。ユーザーがより長い(または短い)有効期間を希望する場合に使用してください。
npx -y htmldrop-cli --expires 30 "<file>"
ユーザーが、誰かが開くかどうかにかかわらず特定の日にページを削除したい場合(「3 日後に削除して」「会議の後に必ず消えるようにして」など、期限を設定する場合)、またはアクセス時に有効期限を更新しないよう求めた場合は、--no-renew を追加します。これにより、ページは開かれたかどうかにかかわらず、指定日に削除されます。
npx -y htmldrop-cli --expires 3 --no-renew "<file>"
これらのフラグは update でも使用できます。update --private は公開プレビューを再び非公開にし、update --renew(または settings --renew)は --no-renew の後にアクセス時の有効期限更新を再び有効にします。更新フラグを指定しない場合、update はプレビューの現在の設定を維持します。ユーザーが公開リンクまたはパスワードなしのリンクを求めていない限り --public を指定せず、ユーザーが削除日の指定またはアクセス時に有効期限を更新しないことを求めていない限り --no-renew を指定しないでください。
再アップロードせずに、ライブプレビューを開けるユーザーや有効期間を変更するには、パスワード付きの完全な URL を指定して settings を使用します。
npx -y htmldrop-cli settings "https://baseurl.ai/<id>?p=<password>" --public
npx -y htmldrop-cli settings "https://baseurl.ai/<id>?p=<password>" --private
npx -y htmldrop-cli settings "https://baseurl.ai/<id>?p=<password>" --expires 30
npx -y htmldrop-cli settings "https://baseurl.ai/<id>?p=<password>" --no-renew
settings には、--public、--private、--expires、--renew、--no-renew のいずれかを少なくとも 1 つ指定する必要があります。新しい --expires は今から起算されます。公開設定または有効期限の更新設定のみを変更する場合、現在の有効期限は維持されます。
ページの内容と URL は変わらず、上書きもされないため、settings では後述の更新確認が不要です。ユーザーがアクセス設定または有効期間のみの変更を希望する場合は、update よりもこちらを優先してください。
ユーザーが参照をそのまま残すことを明示的に希望する場合、またはデフォルトのインライン化によってアップロードサイズが大きくなりすぎる場合に限り、--no-inline を使用してください。
npx -y htmldrop-cli --no-inline "<file>"
既存のプレビューを同じ URL のまま上書きするには、パスワード付きの完全な URL を CLI に渡します。
npx -y htmldrop-cli update "https://baseurl.ai/<id>?p=<password>" "<file>"
update コマンドを実行する前に、同じユーザーの依頼で対象の URL、パスワード、ローカルファイルが明示され、その URL の上書き、更新、置き換えが明確に指示されている場合を除き、ブロッキング確認を 1 回行ってください。
- ハーネスのブロッキング形式の質問ツールを使用します。Claude Code では
AskUserQuestion、Codex ではrequest_user_input、その他のハーネスでは同等のブロッキング形式の質問機能を使用してください。 - 対象の URL、置き換えに使用するローカルファイル、次の文を提示してください。 「この操作は、その URL にある既存の HTMLDrop プレビューを取り消し不能な形で上書きします。」
- 対象の URL に
?p=<password>が含まれていない場合、または別の方法でもパスワードを確認できない場合は、同じブロッキング形式のやり取りでパスワードを尋ねてください。パスワードを一度尋ねてから、再度確認を求めてはいけません。 - 明示的な「はい」の回答があり、空でないパスワードを確認できた後に限り、
updateを実行してください。回答が「いいえ」、不明確、必要なパスワードが欠けている場合、またはブロッキング形式の質問機能を利用できない場合は、更新せず、新しい URL を作成する新規アップロードを提案してください。
update は破壊的な上書き操作です。完全な URL を知っている人は誰でもページを閲覧でき、同じ完全な URL を使って更新する人は誰でも内容を置き換えられます。
更新時のコメントの移行
プレビューには、引用テキストに紐付けられたレビュアーのコメントを含めることができます。ドキュメントを編集した後、そのドキュメントを含むプレビューを上書きすると、引用テキストの位置や内容が変わっている場合があるため、アンカーを移行する必要があります。ビューアーは表示時に引用を再検索する方法にもフォールバックしますが、言い換えられた箇所の移動先を把握しているのはドキュメントを編集したエージェントだけなので、意味に基づくマッピングはエージェントが行います。CLI はその情報を転送するだけです。マッピングが自動的に行われることも、保証されることもありません。
コメントがあるプレビューを上書きするときにのみ実行し、上記の破壊的な更新の確認ゲートも必ず完了してください。
-
編集する前に、現在のコメントを取得します。
npx -y htmldrop-cli comments "https://baseurl.ai/<id>?p=<password>"これは JSON 配列を出力します。各ルートコメントには
cid、anchor({ "exact", "prefix", "suffix" }またはnull)、author、text、resolvedが含まれます。 返信にはparentIdが含まれます。 -
各ルートコメントについて、新しいローカルファイル内の対応する箇所を見つけ、新しいアンカーを作成します。
exactは新しい引用テキスト、prefix/suffixはその直前/直後のテキスト(それぞれ数語程度)です。 -
マッピングの JSON 配列をファイルに書き込みます。たとえば、
anchors.jsonのようにします。[ { "cid": "<cid>", "anchor": { "exact": "new quote", "prefix": "...", "suffix": "..." } }, { "cid": "<cid-gone>", "anchor": null } ]対象が存在しなくなったコメントには
"anchor": nullを指定するか、そのcidを完全に省略してください。新しいドキュメントに信頼できる一致箇所がない場合は、アンカーを作り出さないでください。 -
マッピングを指定して更新します。
npx -y htmldrop-cli update "https://baseurl.ai/<id>?p=<password>" "<file>" --comment-anchors anchors.json
ファイル内の不明な cid や返信の cid は、サービスによって無視されます。--comment-anchors を省略すると、既存のアンカーは変更されません(その場合、ビューアーはテキスト引用のフォールバックに依存し、場所を特定できなくなったアンカーは孤立します)。
検証済みの CLI の動作
- Markdown ファイル(
.md、.markdown)は、アップロード前に GitHub Flavored HTML にレンダリングされます。 - 相対パスの
<img src>、<link href>、<script src>の参照は、デフォルトでインライン化されます。リモート URL、データ URL、フラグメントリンク、JavaScript URL はそのまま残されます。 --no-inlineを指定すると、ローカル参照は変更されません。- サービスが受け付けるページのサイズは最大 50 MiB です(レンダリングとインライン化後の UTF-8 バイト数)。アセットのインライン化や Markdown のレンダリングによって、最終的なペイロードが元のファイルより大きくなる場合があります。
- アップロードの応答には、
https://baseurl.ai/<id>?p=<password>の形式の URL が含まれます。デフォルトでは、リンクは訪問がないまま 14 日が経過すると(または--expires <days>の値に応じて 1~30 日後に)削除されます。訪問のたびにこの期間がリセットされ、アップロードから最長 1 年間保持されます。--no-renewを指定すると、開かれたかどうかにかかわらず、指定日に削除されます。 --publicを指定すると、CLI は標準出力に 2 行を出力します。1 行目は誰でも開けるパスワードなしのhttps://baseurl.ai/<id>、2 行目は編集リンクであるパスワード付きリンクです(update、settings、commentsに必要です)。update <url> <file>は、その URL のidとパスワードを新しいコンテンツとともに送信し、同じ URL を返します。有効期限の期間をリセットし、--public、--private、--expires、--renew、--no-renewで別の指定をしない限り、プレビューの公開設定、有効期間、自動延長の設定を維持します。settings <url>は、公開設定、有効期限、自動延長の設定をその場で変更し(--public、--private、--expires、--renew、--no-renew)、アップロード時と同じ行を出力します。最初に共有 URL を出力し、プレビューが公開の場合は続けて編集リンクを出力します。--versionは、インストール済みのhtmldrop-cliのバージョンを出力し、アップロードせずに終了します。- 不明なオプションがある場合は、アップロード前にエラーになります。ローカルのファイル名が
-で始まる場合は、ファイルパスの前に--を指定してください。 - 非対話型シェルでは、CLI は URL を標準出力に出力します。対話型 TTY では、
pbcopyが成功すると、id、有効期限、クリップボードに関する注記も出力されます。自動延長されるプレビューでは有効期限がexpires: <date> if unopened (renews on visit, until <date>)、固定のプレビューではexpires: <date>、期限が固定されたプレビューではexpires: neverと表示されます。
出力の処理
コマンドの標準出力と標準エラー出力の両方を読み取ります。
- 標準出力の最初の行が共有可能なURLです。そのURLをユーザーに伝えます。
- 標準出力に2行目がある場合(
--publicを渡した場合)、それはパスワード付きの編集リンクです。1つ目のリンクは公開用、2つ目のリンクは更新用であることを伝え、転送用リンクとして2つ目を提示しないでください。 updateを使用した場合は、既存のプレビューが同じURLで上書きされたことを伝えます。settingsを使用した場合は、変更内容(公開になった、非公開になった、新しい有効期限、または更新のオン/オフ)と、コンテンツおよびリンクは変わらないことを伝えます。--privateの後は、公開URLだけではページを開けなくなります。- 有効期限は、指定した日数を使って平易な言葉で伝えます(
--expiresを使用していない場合は14日です)。- デフォルト(訪問時に延長):「14日間アクセスがないと削除されます。アクセスするたびに期間が再開します。」CLI に
if unopened (renews on visit, until <date>)と表示された場合は、その最終日まで保持されることも追記できます。 --no-renewを指定した場合:「アクセスの有無にかかわらず、 に削除されます。」CLI に正確な日付が表示された場合に限り、その日付を伝えます。表示されていない場合は「N日後」と伝えます。- CLI に表示されていない正確な日時を作り出さないでください。
expires: neverと表示された場合、ページはオペレーターによって固定されています。リンクの有効期限がないことを伝え、有効期限についての説明は省略します。
- デフォルト(訪問時に延長):「14日間アクセスがないと削除されます。アクセスするたびに期間が再開します。」CLI に
- 非公開プレビューの場合、パスワードがすでにURLに含まれているため、リンクだけで認証できることを伝えます。ユーザーから求められない限り、パスワードを別途表示しないでください。
- CLI がクリップボードへのコピー完了メッセージを実際に表示した場合に限り、URLがクリップボードにコピーされたと伝えます。
- 標準エラー出力に
not foundなどのアセットに関する警告がある場合は、それを伝えます。URLが作成されても、解決されていないローカル参照があると、リモートプレビューが不完全になることがあります。
デフォルトの非公開アップロードに対する返信例(説明用。使用したフラグとCLIの表示に合わせて調整してください):
Uploaded: <url>
The link includes the access password and can be forwarded as-is. It is
deleted after 14 days without a visit; each visit restarts that.
トラブルシューティング
file not found:ls -lでパスを再確認するか、絶対パスを使用してください。- 不明なオプション:フラグの表記を再確認してください。
markdown conversion failed:CLI はmarkedを使って Markdown をレンダリングできませんでした。正確なエラーを伝え、HTML エクスポートをインストールするか、代わりに使用するかを尋ねてください。File too largeまたは HTTP413:最終的な HTML ペイロードがサービスの上限を超えています。--no-inlineを試す、埋め込みアセットを減らす、レポートを分割する、またはより小さな要約ページを作成してください。- URLの形式が不正、
?p=...がない、または HTTP403の場合のupdateまたはsettings:ユーザーが元の完全な HTMLDrop URL を提供したか確認してください(公開プレビューの場合は、公開URLだけでなく編集リンクを使用します)。公開プレビューURLからパスワードを復元しようとしないでください。 settings failed (409):設定の保存中にページが再アップロードされました。同じsettingsコマンドをもう一度実行してください。Unknown option '--update':updateはサブコマンドであり、フラグではありません。update <url> <file>を実行してください。- インストール済みの htmldrop スキルが古いとCLIに表示された場合は、
npx skills update htmldropを実行してから再試行してください。 upload failed:正確なステータスと標準エラー出力を伝えてください。標準出力にURLが含まれていない限り、URLが作成されたと主張しないでください。- アセットの警告:プレビューをどこでも利用できるようにする必要がある場合は、不足しているローカルアセットを解決してから再度アップロードしてください。