jpskill.com
📄 ドキュメント コミュニティ

open-show

MarkdownやWord、PDFなどの資料やウェブサイトを、全画面表示可能なHTML形式のスライドに変換し、プレゼンテーション資料を簡単に作成・共有するSkill。

📜 元の英語説明(参考)

将 Markdown、Word (.docx)、PDF、Text (.txt)、本地 HTML 或任意网址转换为单个可全屏播放的 HTML 幻灯片。触发词：「幻灯片」「转幻灯片」「生成演示稿」「做 deck」「文档转 html 播放」。

🇯🇵 日本人クリエイター向け解説

一言でいうと

MarkdownやWord、PDFなどの資料やウェブサイトを、全画面表示可能なHTML形式のスライドに変換し、プレゼンテーション資料を簡単に作成・共有するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o open-show.zip https://jpskill.com/download/19619.zip && unzip -o open-show.zip && rm open-show.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19619.zip -OutFile "$d\open-show.zip"; Expand-Archive "$d\open-show.zip" -DestinationPath $d -Force; ri "$d\open-show.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して open-show.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → open-show フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
4

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

OpenShow 技能

トリガー条件

ユーザーが以下のいずれかのキーワードを言及したときにアクティブになります。

  • 「スライド」「スライドをめくる」「プレゼン資料を作成する」「デッキを作る」
  • 「このドキュメントを再生可能な HTML に変換する」
  • 「この記事を PPT のようなウェブページにする」
  • 「このウェブページは全画面表示できますか」

サポートされる入力

タイプ 認識方法 処理方法 依存関係
Markdown .md / .markdown 拡張子 markdown ライブラリで解析 markdown
Word .docx 拡張子 python-docx でタイトル/段落を抽出 python-docx
ローカル HTML .html / .htm 拡張子 BeautifulSoup で DOM を解析 beautifulsoup4
URL http:// / https:// プレフィックス requests で取得 + 本文抽出 requests, beautifulsoup4
PDF .pdf 拡張子 PyMuPDF でページごとに画像を埋め込み pymupdf
Text .txt 拡張子 空行/タイトルでブロックに分割して解析 なし

実行フロー（厳密に順序通り）

ステップ 1：依存関係の確認

初回使用時または不明な場合は、依存関係を確認します。

python3 -c "import markdown, docx, requests, bs4, fitz; print('ok')"

失敗した場合は、インストールします。

python3 -m pip install markdown python-docx requests beautifulsoup4 pymupdf

ステップ 2：入力を判断し、スクリプトを呼び出す

基本的な使用方法：

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<入力>" -o ~/openshow_outputs

生成後、システムデフォルトのブラウザで自動的に開きます。

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<入力>" -o ~/openshow_outputs --open

生成後、openclaw browser で開きます。

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<入力>" -o ~/openshow_outputs --openclaw
  • 入力はファイルの絶対パスまたは URL にすることができます。
  • 出力ディレクトリは ~/openshow_outputs に固定されます（存在しない場合は自動的に作成されます）。
  • 生成されるファイル名のルール：openshow_<タイトル>_<タイムスタンプ>.html

ステップ 3：結果を返し、操作方法を伝える

再生可能な HTML を生成しました：{path}

操作方法：

  • ← / → でページをめくる
  • スペース / PageDown で次のページへ
  • F キーで全画面表示を切り替える
  • T キーでタイマーを表示/非表示にする
  • スマートフォンは左右スワイプでページをめくることができます
  • 画面右側 2/3 をタップで次のページ、左側 1/3 をタップで前のページ
  • 左上のタイマーをクリックすると一時停止/再開できます

適応シーン：スマートフォン、PC、大画面プロジェクターでの全画面再生

コアメカニズム（内部実装の要点）

コンテンツ解析

  • すべての入力は Block リスト（heading, paragraph, image, list, code, quote）に統一して変換されます。
  • HTML/URL 入力は、ヒューリスティックに本文コンテナ（最大テキスト密度の article/main/div/section）を抽出します。
  • ナビゲーションバー、広告、スクリプト、スタイルシートを自動的にクリーンアップします。
  • ローカル/リモート画像は自動的に data URI としてインライン化され、単一ファイルでのオフライン利用を保証します。

ページ分割アルゴリズム

  1. h1/h2/h3 を自然な章の境界として Section に分割します。
  2. 単一セクション内は容量に応じてページを分割します。テキストが 300 文字を超える、画像が 3 枚を超える、ブロック数が 6 を超える場合に自動的に分割します。
  3. 長すぎる段落（300 文字超）は、まず文ごとに複数のブロックに分割し、1 ページにテキストが集中しすぎるのを防ぎます。
  4. タイトルが単独で 1 ページを占めるのを自動的に回避します。あるページに heading しかない場合、次のページから 1 つのブロックを借用します。

レイアウトテンプレート

コンテンツに応じて自動的にマッチングします。

  • cover：H1 の大タイトルページ、中央揃え
  • text：純粋なテキストコンテンツページ、左揃え
  • list：箇条書きページ、フォントを拡大
  • split：左に画像、右にテキスト（1 枚の画像）または上に画像、下にテキスト（複数枚の画像）
  • image：単一画像を全画面中央に表示
  • closing：最終ページ、中央揃えの要約スタイル

スライドエンジン

  • 外部 CDN なし、CSS + JS はすべてインライン化
  • 各ページは 100vw × 100vh の絶対位置指定
  • ページめくりアニメーション：transform: translateX() + cubic-bezier(0.22, 1, 0.36, 1)、0.5 秒
  • パフォーマンス最適化：will-change + backface-visibility: hidden + touch-action: none
  • レスポンシブ：clamp() フォント + @media でスマートフォンに対応

タイマー

  • ページロード 1 秒後に自動的に開始
  • 左上に MM:SS を表示
  • クリックで一時停止/再開、一時停止中はオレンジ色に変化
  • T キーで表示/非表示を切り替える

ブランドウォーターマーク

  • 各ページ右下隅に OpenShow のロゴを内蔵（極めてシンプルな幾何学的な線画スタイル）
  • 低い透明度（rgba(255,255,255,0.04~0.07)）で、読書を妨げません
  • アクティブなページに切り替わると透明度がわずかに増加し、高級感を演出します

よくあるエラーと制限

  • ❌ .pptx 入力はサポートしていません
  • ❌ .doc（古いバージョンの Word）はサポートしていません。まず .docx に変換する必要があります
  • ⚠️ PDF は画像として埋め込まれるため、ファイルサイズが大きい場合、生成される HTML も大きくなる可能性があります
  • ⚠️ 一部の複雑なウェブページの DOM 構造は完全に抽出できない場合があります。ユーザーにはまずローカル HTML として保存してから変換することをお勧めします
  • ⚠️ リモート画像のダウンロードに失敗した場合、元の URL が保持されるため、オフライン再生時に画像が欠落する可能性があります

ファイルの場所

  • スキル設定：~/.hermes/skills/open-show/SKILL.md
  • コアスクリプト：~/.hermes/skills/open-show/scripts/openshow.py
  • ロゴリソース：~/.hermes/skills/open-show/assets/logo.svg
  • 出力ディレクトリ：~/openshow_outputs/
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

OpenShow 技能

触发条件

用户提及以下任意关键词时激活：

  • 「幻灯片」「转幻灯片」「生成演示稿」「做 deck」
  • 「把这个文档转成可播放的 html」
  • 「把这篇文章做成 PPT 一样的网页」
  • 「这个网页能不能全屏播放」

支持的输入

类型 识别方式 处理方式 依赖
Markdown .md / .markdown 后缀 markdown 库解析 markdown
Word .docx 后缀 python-docx 提取标题/段落 python-docx
本地 HTML .html / .htm 后缀 BeautifulSoup 解析 DOM beautifulsoup4
网址 http:// / https:// 前缀 requests 抓取 + 正文提取 requests, beautifulsoup4
PDF .pdf 后缀 PyMuPDF 逐页转图片嵌入 pymupdf
Text .txt 后缀 按空行/标题分块解析 无

执行流程（严格按顺序）

第一步：依赖检查

首次使用或不确定时，检查依赖：

python3 -c "import markdown, docx, requests, bs4, fitz; print('ok')"

若失败，安装：

python3 -m pip install markdown python-docx requests beautifulsoup4 pymupdf

第二步：判断输入并调用脚本

基础用法：

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<输入>" -o ~/openshow_outputs

生成后自动用系统默认浏览器打开：

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<输入>" -o ~/openshow_outputs --open

生成后用 openclaw browser 打开：

python3 ~/.hermes/skills/open-show/scripts/openshow.py -i "<输入>" -o ~/openshow_outputs --openclaw
  • 输入可以是文件绝对路径或 URL
  • 输出目录固定为 ~/openshow_outputs（不存在则自动创建）
  • 生成文件命名规则：openshow_<标题>_<时间戳>.html

第三步：返回结果并告知交互方式

已生成可播放 HTML：{path}

操作方式：

  • ← / → 翻页
  • 空格 / PageDown 下一页
  • F 键切换全屏
  • T 键显示/隐藏计时器
  • 手机支持左右滑动翻页
  • 点击屏幕右侧 2/3 下一页，左侧 1/3 上一页
  • 左上角计时器点击可暂停/继续

适配场景：手机、电脑、大屏幕投影全屏播放

核心机制（内部实现要点）

内容解析

  • 所有输入统一转换为 Block 列表（heading, paragraph, image, list, code, quote）
  • HTML/URL 输入会启发式提取正文容器（最大文本密度的 article/main/div/section）
  • 自动清理导航栏、广告、脚本、样式表
  • 本地/远程图片自动内联为 data URI，确保单文件离线可用

分页算法

  1. 以 h1/h2/h3 为天然章节边界分 Section
  2. 单节内按容量拆页：文字 > 300 字、图片 > 3 张、块数 > 6 时自动拆分
  3. 超长段落（>300 字）先按句子拆分为多个 block，避免一页文字爆炸
  4. 自动避免标题独占一页：若某页只有 heading，从下一页借一个 block

布局模板

根据内容自动匹配：

  • cover：H1 大标题页，居中
  • text：纯文字内容页，左对齐
  • list：bullet points 页，字体放大
  • split：左图右文（1 张图）或上图下文（多张图）
  • image：单图全屏居中
  • closing：最后一页，居中总结风格

幻灯片引擎

  • 零外部 CDN，CSS + JS 全部内联
  • 每页 100vw × 100vh 绝对定位
  • 翻页动画：transform: translateX() + cubic-bezier(0.22, 1, 0.36, 1)，0.5s
  • 性能优化：will-change + backface-visibility: hidden + touch-action: none
  • 响应式：clamp() 字体 + @media 适配手机

计时器

  • 页面加载 1 秒后自动开始
  • 左上角显示 MM:SS
  • 点击暂停/继续，暂停时变橙色
  • T 键切换显示/隐藏

品牌水印

  • 每页右下角内置 OpenShow logo（极简几何线条风格）
  • 低透明度（rgba(255,255,255,0.04~0.07)），不影响阅读
  • 切换到活动页时透明度微增，高端大气

常见错误与限制

  • ❌ 不支持 .pptx 输入
  • ❌ 不支持 .doc（老版本 Word），必须先转换为 .docx
  • ⚠️ PDF 转换为图片嵌入，文件较大时可能产生较大的 HTML
  • ⚠️ 某些复杂网页的 DOM 结构可能提取不完全，可建议用户先保存为本地 HTML 再转换
  • ⚠️ 远程图片下载失败时会保留原 URL，离线播放可能缺失

文件位置

  • Skill 配置：~/.hermes/skills/open-show/SKILL.md
  • 核心脚本：~/.hermes/skills/open-show/scripts/openshow.py
  • Logo 资源：~/.hermes/skills/open-show/assets/logo.svg
  • 输出目录：~/openshow_outputs/

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。