HummingDeckでは、単一のHTMLドキュメント、または複数ファイルからなる静的ウェブサイトをZIPにまとめて共有できます。通常の静的ウェブサーバーで動作するよう、ファイルだけで完結する構成にしてください。
単一HTMLまたはZIPを選ぶ
すべてのスタイル、スクリプト、画像、フォントが1つのファイルに埋め込まれている場合は、単一の.htmlファイルを使用します。CSS、JavaScript、画像、フォント、動画などを別ファイルとして使用する場合は、ZIPを使用します。
ブラウザからは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を作成するためのプロンプトを参照してください。