Communitygithub.com

cclank/lanshu-html-ppt-templates

30 套岚叔 HTML 演示模板,用于创建、改写和定制商务汇报、政企汇报、路演、发布会、学术答辩、教学课件、数据叙事与交互演示等用途。

lanshu-html-ppt-templates とは?

このスキルは、30 種類の高品質な HTML プレゼンテーションテンプレート(通称「嵐叔」テンプレート)を活用して、ブラウザ上で直接動作するインタラクティブで美しいスライドデッキを作成・編集するためのツールです。ビジネス報告、投資家向けピッチ、製品発表会、学術発表、教育教材、データストーリーテリングなど、多様なユースケースに対応したテンプレートが用意されています。ユーザーは `scripts/deck.py` コマンドラインツールを使ってテンプレートの一覧表示、新規作成、設定の確認、ファイルの検証を行うことができ、各テンプレートは内蔵のプレゼンテーションツールキット(ショートカットキー、レーザーポインター、描画注釈、リモートコントロールなど)を備えています。また、日本語フォントのサブセット埋め込み機能により、オフライン環境でも適切に表示され、最終的な HTML ファイルは単一ファイルとして配布可能です。対話型テンプレート(`14-live-model`)や生成系テンプレート(`12-generative`)など、特殊な挙動を持つテンプレートについては、それぞれの特性に合わせた編集ガイドラインが提供されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cclank/lanshu-html-ppt-templates/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

嵐叔 HTML プレゼンテーションテンプレート

assets/templates/ にある完全な単一ファイルテンプレートを使用して、そのまま映写可能な HTML プレゼンテーションを作成します。オンラインカタログ: https://ppt.lanshuagent.com/;作者: https://x.com/LufzzLiz。

テンプレートの選択

最初に references/template-catalog.md を読み、コンテンツ、対象者、配信形式に基づいてテンプレートを選定してください。ユーザーが既にスタイルを指定している場合はそれに従い、指定がない場合は資料に応じて選択し、簡単に理由を説明します。通常のスタイル選択について追加の確認は必要ありません。

  • ビジネス報告、戦略、情報量の多いコンテンツ:07-consulting、01-swiss。
  • 資金調達ピッチ、製品・技術発表:04-brutalism、03-aurora、17-terminal。
  • ブランド、文化、キュレーション、ライフスタイル:02-editorial、08-oriental、09-organic、18-riso、19-collage。
  • データ分布と連続的なナラティブ:11-morph;調整可能なビジネス仮定:14-live-model;地域・グローバルネットワーク:20-globe。
  • 学術発表、課題報告:21-academic;教育教材、トレーニング:23-chalkboard。
  • 製品機能紹介、年間総括:22-bento;AI 製品と顧客事例:24-chat;年会、チーム振り返り:25-pixel。
  • 政府・国有企業・官公庁の業務報告:28-official;年間ハイライト、社内報:26-newspaper。
  • エンジニアリングレビュー、ハードウェア提案:27-blueprint;プロダクトロードマップ、戦略計画:29-metro;ユーザーストーリー、ブランドストーリー:30-comic。
  • ユーザーが複数ページの PDF を必要とする場合、カタログで複数ページ印刷スタイルが指定されているテンプレートを優先的に選択してください。ただし、印刷結果は実際に確認する必要があります。

作成と編集

コマンド内のパスはこのスキルディレクトリからの相対パスです。スキルの実際のインストール場所を特定してください。

python3 scripts/deck.py list
python3 scripts/deck.py new 07-consulting --output /path/to/outputs/presentation.html --title "プレゼンテーションタイトル"
python3 scripts/deck.py source 07-consulting
python3 scripts/deck.py inspect /path/to/outputs/presentation.html

new はテンプレートを完全にコピーし、フォントとスクリプトを保持し、既存ファイルを上書きしません。--title はブラウザのタイトルのみを変更し、ページの本文は引き続き書き換える必要があります。source はフォントの Base64 を非表示にしてターミナルに出力するだけで、元の行番号は保持されます。この出力をプレゼンテーションファイルとして保存しないでください。

実行前に references/authoring.md を読んでください。選択した HTML に対して、以下の点を修正します。

  1. ユーザーの資料に基づいてページごとのナラティブを構築し、タイトル、本文、グラフデータ、ヘッダー・フッター、ブランド要素を置き換えます。既存のレイアウトを優先的に再利用し、コンテンツに応じてページを追加・削除します。
  2. プレイヤーカーネルが依存する ID、class、data-*、イベントバインディング、グラフインターフェース、および TOOLKIT(映写ツールキット)と PRESENTER(発表者ウィンドウ)のコードブロックは保持します。ページ数を変更する場合は、ページ番号、生成配列、ノート数を同期します。
  3. script#deck-notes 内の JSON 配列を更新し、ノートの順序が実際の映写順序と一致するようにします。テンプレートサンプル内の会社名、数字、出典テキスト、連絡先情報は置き換えるか削除します。
  4. 出力は独立した HTML ファイルとします。静的なグラフィックは可能な限り SVG/CSS を使用し、リアルタイムグラフィックは既存の Canvas をそのまま利用します。新たに追加するリソースはインライン化するか、プレゼンテーションと一緒に配布します。

テンプレートの中日フォントは元の文字に合わせてサブセット化されています。新しいテキストを追加すると、まずシステムフォントでフォールバック表示されます。テキスト編集後、オンライン環境で python3 scripts/embed_fonts.py <プレゼンテーションファイル> を実行し、ページで実際に使用されている文字に基づいてフォントを再サブセット化・埋め込みします。オフライン環境では、既存のフォントスタックを優先して使用し、レイアウトを確認します。元のフォントライセンス表示は保持します。

インタラクションと出力の境界

  • 通常のテンプレートは .slide を使用します。無限キャンバス、映画、空間インターフェース、ターミナル、コラージュにはそれぞれ独立したデータ構造があり、詳細はオーサリングガイドを参照してください。
  • 14-live-model のモデルパラメータ、キャッシュフロー、バインド要素はまとめて修正する必要があります。発表者プレビューは独立したインスタンスであり、デフォルトではメイン画面で一時的に調整したモデルパラメータは同期されません。
  • 30 テンプレートすべてに映写ツールキットが組み込まれています:? ショートカットキーパネル、O 概要、ページ番号+Enter でページジャンプ、B/W で白黒画面、L レーザーポインター、D 描画注釈、E でブラウザ上でテキスト編集、講義ノート編集、一括置換、テーマカラー調整、別名保存が可能です。python3 scripts/present.py <プレゼンテーションファイル> で開いた後 M キーを押すと、同じ Wi-Fi ネットワーク上のスマートフォンから QR コードスキャンでリモートコントロールできます。
  • 17-terminal はターミナル風の外観を持つウェブプレゼンテーションであり、表示されるコマンドはページコンテンツの一部です。
  • 12-generative は実行のたびに異なる画面が表示される可能性があります。再現可能な結果が必要な場合は、シードを固定してください。
  • 現在、HTML および一部のテンプレートからのブラウザ印刷 PDF を提供しています。インタラクションやアニメーションはブラウザで再生されます。編集可能な .pptx が必要な場合は、形式の違いを明確に説明し、ユーザーの選択に応じて別途変換を行います。
  • 公開サーバーへのデプロイは、ユーザーが要求した場合にのみ実行します。設定ファイル内のドメインを変更しても、新しいドメインや公開権限が自動的に取得されるわけではありません。

検証と納品

python3 scripts/deck.py validate /path/to/outputs/presentation.html

このコマンドは、ノート JSON とインライン JavaScript の構文をチェックします。JavaScript チェックを完了するには、ローカルマシンに Node.js が必要です。ページスクリプトは実行しません。

利用可能なブラウザで、最初と最後のページ、主要なグラフ、最長の本文、ページめくり、全画面表示、発表者ノート、インタラクションを確認してください。PDF の要求がある場合は、実際の印刷結果も確認します。ブラウザを実行できない場合は、実施した静的チェックと未検証の部分を説明してください。

納品する HTML の利用可能なパス、ページ数、および必要な映写の説明を提供します。? ですべてのショートカットキーを表示できること、スマートフォンリモートコントロールが必要な場合は scripts/present.py で開くことを案内します。ユーザーが PDF を要求した場合は、検証済みの PDF も一緒に納品し、エクスポートにおけるインタラクション状態とアニメーションの実際の動作を説明します。

関連スキル