HummingDeckでは、単一のHTMLドキュメントや、静的ウェブサイトをまとめたZIPをブラウザで表示できます。受信者が自分の端末で開くためのダウンロード専用アーカイブとして、ZIPを共有することもできます。
ZIPの共有方法を選ぶ
HTMLプレゼンテーションや静的ウェブサイトを含むZIPには、ブラウザーでプレビューを選びます。この方法には対象の有料プランが必要で、以下のパッケージ要件が適用されます。
パスワードで保護したZIPや暗号化ZIPなど、受信者が保存してローカルで開くアーカイブには、ダウンロード専用を選びます。通常の資料数とファイルサイズの上限内で、すべてのプランで利用できます。index.htmlは不要で、HummingDeckはアーカイブの展開やプレビューを行いません。
クラウドストレージに送信する前の暗号化が必要な場合は、アップロード前に自分の端末でZIPを暗号化し、パスワードは別の手段で受信者に伝えてください。ダウンロード専用を選んでも、保護されていないアーカイブが暗号化されるわけではありません。資料をアップロードして管理するも参照してください。
単一HTMLまたはZIPを選ぶ
ここから先の要件は、ブラウザプレビューに適用されます。
すべてのスタイル、スクリプト、画像、フォントが1つのファイルに埋め込まれている場合は、単一の.htmlファイルを使用します。CSS、JavaScript、画像、フォント、動画などを別ファイルとして使用する場合は、ZIPを使用します。
単一のHTMLファイルには、独自の印刷またはPDFとして保存ボタンを組み込めます。ボタンを押すと受信者のブラウザに印刷ダイアログが開き、HTMLに設定された印刷用レイアウトで印刷したり、PDFとして保存したりできます。このボタンは共有リンクのダウンロードを許可設定に関係なく機能します。この設定は、HummingDeckから元のファイルをダウンロードする操作に適用されます。ブラウザからの印刷は、アクティビティにダウンロードとして記録されません。
ブラウザからは100MBまでアップロードできます。APIによる資料アップロードには、別途30MBの上限があります。
ZIPの構成
ルート階層にindex.htmlを1つ置き、アセットを相対パスで参照する構成が最も安全です。
アップロード用のHTML ZIPを準備
HummingDeckで確実に処理、プレビューできるよう、アップロード前にパッケージを確認してください。
パッケージ要件を確認
- index.htmlをZIPのルートに配置します。
- ブラウザでそのまま動くHTML、CSS、JavaScriptを使用します。
- ローカルフォント、画像、その他の依存ファイルを含めます。
- ビルド手順とサーバー専用コードを削除します。
- index.htmlをローカルで開き、すべてのページと操作を確認します。
ClaudeまたはChatGPT向けプロンプト
HummingDeckにアップロードできる自己完結型のHTMLプレゼンテーションを作成してください。index.htmlをZIPのルートに配置し、すべてのローカルアセットに相対パスを使用して、必要なファイルをすべて含めてください。ビルド手順とサーバー専用の依存関係は削除してください。
適切な参照は、assets/logo.svg、./styles.css、images/hero.webpのような形式です。自分のパソコン上のデスクトップフォルダなど、特定の環境に依存するパスは避けてください。アップロード後にビルドツールやパッケージマネージャーが実行されることを前提にしないでください。ビルドが必要なソースコードではなく、コンパイル済みの出力をアップロードします。
パッケージの要件
- 明確な開始ページを含める。通常はZIPのルートに
index.htmlを置く。 - 必要なローカルアセットをすべてZIPに含める。
- HTML、CSS、JavaScript、画像、フォント、メディア間のリンクに相対パスを使う。
- アーカイブ全体を100MB未満にする。
- ルートの
index.htmlを12MB以下にする。 - その他のテキストアセットは1ファイル5MB以下、バイナリアセットは1ファイル25MB以下にする。
- サーバー側アプリケーションなしで動作する静的な出力を用意する。
- ファイル名とパスを分かりやすくする。パスの重複や、どれを使うか判断できない開始ファイルを避ける。
- アップロードする前に、展開したフォルダをローカルの静的ウェブサーバーでテストする。
HummingDeckは、HTML、CSS、JavaScript、JSON、SVG、ウェブ画像、ウェブフォント、音声、動画など、一般的なウェブアセットに対応しています。対応していないアーカイブ内の項目は処理されない場合があります。ファイル数が極端に多い、不正なパスがある、圧縮率が異常に高いアーカイブは拒否される場合があります。
外部サービスとスクリプト
外部リソースは、ネットワーク規則、提供元の制限、コンテンツセキュリティポリシー、認証、URL変更によって読み込めなくなる場合があります。ライセンスで許可される範囲で、重要な画像などのアセットはパッケージに含めてください。非公開API、ログイン済みのブラウザセッション、ローカル開発サーバーには依存しないでください。
外部サービスの動画やインタラクティブコンテンツは、提供元がiframe表示を許可している場合に限り動作することがあります。オーナー用プレビューだけでなく、受信者向けリンクでテストしてください。
送信前にテストする
- ZIPを新しい空のフォルダへ展開します。
- 基本的な静的ウェブサーバーから、そのフォルダを配信します。
- サーバーのURLから
index.htmlを開きます。 - すべてのページ、画像、フォント、動画、リンクを確認します。
- ブラウザの幅を変え、スマートフォンでもレイアウトを操作できることを確認します。
- HummingDeckへアップロードし、最終的な共有リンクをプライベートブラウジングのウィンドウでテストします。
AIが生成した出力については、ClaudeやChatGPTでHTMLを作成するためのプロンプトを参照してください。