フェーズ名: デプロイ・公開 目的: 品質確認済みのプレゼンテーションを本番環境にデプロイし、発表・公開・共有を実現する 想定時間: 15分 成果物: 公開URL、共有可能プレゼンテーション、発表後のフィードバック収集
品質確認済み成果物:
多段階デプロイ戦略:
GitHubリポジトリ構成:
presentation-repo/
├── index.html # メインプレゼンテーション
├── assets/
│ ├── css/custom.css # カスタムスタイル
│ ├── js/presentation.js # プレゼンテーション制御
│ └── data/ # データファイル
├── docs/
│ ├── speaker-notes.html # 発表者ノート
│ └── README.md # 使用方法・技術仕様
├── backup/
│ ├── presentation.pdf # PDFバックアップ
│ └── presentation.pptx # PowerPointバックアップ
└── .github/
└── workflows/
└── deploy.yml # 自動デプロイ設定
.github/workflows/deploy.yml:
name: Deploy Presentation to GitHub Pages
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install Dependencies
run: |
npm install -g @mermaid-js/mermaid-cli
npm install -g html-minifier
- name: Optimize Assets
run: |
# HTMLの最適化
html-minifier --collapse-whitespace --remove-comments --minify-css --minify-js index.html -o index.min.html
mv index.min.html index.html
# CSSの最適化
find assets/css -name "*.css" -exec sed -i 's/\/\*.*\*\///g' {} \;
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
with:
github_token: $
publish_dir: ./
cname: your-domain.com # カスタムドメインがある場合
- name: Notify Deployment Success
run: |
echo "Presentation deployed successfully!"
echo "URL: https://username.github.io/repository-name/"
CNAME設定:
# CNAMEファイル
presentation.your-company.com
DNS設定例:
# DNSレコード設定
presentation.your-company.com CNAME username.github.io
offline-setup.sh:
#!/bin/bash
# オフライン版セットアップスクリプト
echo "PrezenX オフライン版準備中..."
# 依存ライブラリをローカルにダウンロード
mkdir -p assets/lib
# reveal.js
curl -o assets/lib/reveal.min.js https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.min.js
curl -o assets/lib/reveal.min.css https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.min.css
# MathJax
curl -o assets/lib/mathjax.min.js https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.min.js
# Chart.js
curl -o assets/lib/chart.min.js https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js
# Mermaid
curl -o assets/lib/mermaid.min.js https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js
# HTMLファイルのCDNリンクをローカルリンクに変更
sed -i 's|https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.js|assets/lib/reveal.min.js|g' index.html
sed -i 's|https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js|assets/lib/mathjax.min.js|g' index.html
sed -i 's|https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js|assets/lib/chart.min.js|g' index.html
sed -i 's|https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js|assets/lib/mermaid.min.js|g' index.html
echo "オフライン版準備完了!"
echo "ローカルサーバー起動中..."
# ローカルサーバー起動
python3 -m http.server 8000
presentation-checklist.md:
# 発表当日チェックリスト
## ⏰ 発表30分前
- [ ] プロジェクター接続確認
- [ ] 音響設備確認(必要に応じて)
- [ ] インターネット接続確認
- [ ] バックアップUSB準備確認
## ⏰ 発表15分前
- [ ] プレゼンテーション表示確認
- [ ] スライド切り替え動作確認
- [ ] 図表・グラフ表示確認
- [ ] 数式レンダリング確認
## ⏰ 発表5分前
- [ ] フルスクリーンモード設定
- [ ] 発表者ノート画面準備
- [ ] タイマー・時計確認
- [ ] 緊急時対応手順確認
## 🆘 トラブル時の対応
### インターネット接続不良
1. オフライン版への切り替え(assets/lib使用)
2. USBバックアップからの起動
3. PDF版での代替発表
### プロジェクター表示問題
1. 解像度設定の調整
2. カラープロファイル調整
3. HDMIケーブル交換
4. 代替表示デバイス使用
### ソフトウェア動作不良
1. ブラウザの再起動
2. 代替ブラウザでの表示
3. PDF版での発表継続
4. PowerPoint版への切り替え
generate-pdf.js:
// Puppeteerを使用したPDF生成スクリプト
const puppeteer = require('puppeteer');
async function generatePDF() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// プレゼンテーションを読み込み
await page.goto('http://localhost:8000/index.html', {
waitUntil: 'networkidle2'
});
// PDF生成設定
const pdf = await page.pdf({
format: 'A4',
landscape: true,
printBackground: true,
margin: {
top: '20px',
bottom: '20px',
left: '20px',
right: '20px'
}
});
await browser.close();
return pdf;
}
// 実行
generatePDF().then(pdf => {
require('fs').writeFileSync('backup/presentation.pdf', pdf);
console.log('PDF生成完了: backup/presentation.pdf');
});
markdown-to-pptx.js:
// Markdownからhopefully readable PowerPoint形式への変換
const fs = require('fs');
const pptxgen = require('pptxgenjs');
function convertToPowerPoint() {
const pptx = new pptxgen();
// スライド1: タイトル
const slide1 = pptx.addSlide();
slide1.addText("プレゼンテーションタイトル", {
x: 1, y: 1, w: 8, h: 1,
fontSize: 32, bold: true, color: '1976d2'
});
// 他のスライドも同様に追加...
// PowerPoint保存
pptx.writeFile('backup/presentation.pptx');
console.log('PowerPoint版生成完了: backup/presentation.pptx');
}
convertToPowerPoint();
access-control.yml:
# GitHub Pages アクセス制御設定
access_control:
public: true # 一般公開する場合
# 限定公開の場合
private_access:
- username1@company.com
- username2@company.com
# 組織内限定の場合
organization_only: true
# SEO設定
seo:
title: "プレゼンテーションタイトル - 会社名"
description: "効果的なシステム自動化による業務効率化提案"
keywords: "自動化, 効率化, ROI, コスト削減"
robots: "noindex, nofollow" # 検索エンジン非表示
sharing-urls.md:
# PrezenX プレゼンテーション共有情報
## 🌐 アクセスURL
- **メインURL**: https://username.github.io/presentation-repo/
- **発表者ノート**: https://username.github.io/presentation-repo/docs/speaker-notes.html
- **モバイル版**: https://username.github.io/presentation-repo/?mobile=true
## 📱 QRコード共有
[QRコード画像を生成・挿入]
## 📧 メール共有テンプレート
件名: プレゼンテーション資料共有 - [タイトル]
いつもお世話になっております。
本日のプレゼンテーション資料を共有いたします。
🌐 オンライン版: https://username.github.io/presentation-repo/
📄 PDF版: [添付ファイル]
📊 PowerPoint版: [添付ファイル]
ご質問等ございましたらお気軽にお声がけください。
## 🔒 アクセス期限
- 公開期間: 2024年X月X日 ~ 2024年Y月Y日
- アーカイブ: 社内文書管理システムに保存
feedback-form.html:
<!-- 簡易フィードバックフォーム -->
<div id="feedback-section" style="margin-top: 50px; padding: 20px; background: #f5f5f5;">
<h3>📝 フィードバックをお聞かせください</h3>
<form id="feedbackForm">
<div>
<label>理解度:</label>
<input type="range" min="1" max="5" id="understanding" />
<span id="understandingValue">3</span>
</div>
<div>
<label>有用性:</label>
<input type="range" min="1" max="5" id="usefulness" />
<span id="usefulnessValue">3</span>
</div>
<div>
<label>コメント:</label>
<textarea id="comments" rows="3" style="width: 100%;"></textarea>
</div>
<button type="submit">フィードバック送信</button>
</form>
</div>
<script>
// フィードバック処理
document.getElementById('feedbackForm').addEventListener('submit', function(e) {
e.preventDefault();
const feedback = {
understanding: document.getElementById('understanding').value,
usefulness: document.getElementById('usefulness').value,
comments: document.getElementById('comments').value,
timestamp: new Date().toISOString()
};
// Google Forms または 社内システムに送信
console.log('Feedback:', feedback);
alert('フィードバックをありがとうございました!');
});
</script>
analytics.js:
// Google Analytics設定(プライバシー配慮版)
gtag('config', 'GA_MEASUREMENT_ID', {
anonymize_ip: true,
cookie_flags: 'SameSite=None;Secure'
});
// カスタムイベント追跡
function trackSlideView(slideNumber) {
gtag('event', 'slide_view', {
slide_number: slideNumber,
presentation_id: 'prezenx-demo-2024'
});
}
function trackEngagement(action) {
gtag('event', 'engagement', {
action: action,
presentation_id: 'prezenx-demo-2024'
});
}
// 発表完了トラッキング
function trackPresentationComplete() {
gtag('event', 'presentation_complete', {
presentation_id: 'prezenx-demo-2024',
duration: Date.now() - startTime
});
}
## PrezenX プロジェクト完了報告
### 🏆 完成成果物
1. **HTMLプレゼンテーション**: https://username.github.io/presentation-repo/
2. **発表者ノート**: speaker-notes.html
3. **PDF版**: presentation.pdf
4. **PowerPoint版**: presentation.pptx
5. **オフライン版**: 完全自己完結版
### 📊 品質評価結果
- **総合評価**: A- (87/100点)
- **技術品質**: A (91/100)
- **コンテンツ品質**: A- (86/100)
- **ユーザビリティ**: B+ (84/100)
### ⏱️ プロジェクト実績
- **総開発時間**: 3.5時間 (目標: 3-5時間)
- **品質レベル**: 企業発表レベル達成
- **目標達成度**: 95%
### 🚀 今後の展開
- **発表実施**: 2024年X月X日 14:00-14:20
- **フィードバック収集**: 発表後1週間
- **改善版作成**: フィードバック反映版
- **テンプレート化**: 他プロジェクトでの再利用
📝 記入のコツ:
🤖 Claude Codeへの指示: このフェーズでは、発表の成功と安全性を最重視してください。技術的なトラブルが発生しても対応できるよう、あらゆるバックアップ手段を準備し、発表者が安心して発表できる環境を整えてください。