English | 日本語 |
Tips & Tricks
AI活用のコツ
効果的なプロンプト
構成生成
良い例:
"機械学習入門セミナー(90分)のプレゼン構成を作成してください。
対象:プログラミング経験はあるが機械学習は初心者のエンジニア
含めるべき内容:基礎理論、実装例、ハンズオン
避けるべき内容:高度な数学、最新の研究論文"
悪い例:
"機械学習のプレゼンを作って"
コンテンツ充実
良い例:
"スライド5の「ニューラルネットワークの基礎」について、
以下の点を含めて説明を追加してください:
1. 3層のシンプルな図解
2. 活性化関数の役割(ReLUを例に)
3. Pythonでの実装例(10行以内)"
悪い例:
"もっと詳しく説明して"
Marpの高度な機能
スライドクラスの活用
---
marp: true
---
<!-- _class: title -->
# タイトルスライド
---
<!-- _class: lead -->
# 強調したいメッセージ
---
<!-- _class: invert -->
# 背景を反転
2カラムレイアウト
<style>
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1em;
}
</style>
<div class="columns">
<div>
## 左カラム
- ポイント1
- ポイント2
</div>
<div>
## 右カラム
```python
def example():
pass
</div> </div>
#### 画像の配置
```markdown
# 背景画像

# 右側配置

# サイズ指定

# フィルター適用

作業効率化
エイリアスの設定
# ~/.bashrc または ~/.zshrc に追加
alias marp-pdf='npx marp --pdf --allow-local-files'
alias marp-preview='npx marp --preview'
alias new-slide='~/AutoSlideIdea/scripts/create-presentation.sh'
VSCodeスニペット
// .vscode/markdown.code-snippets
{
"Marp Header": {
"prefix": "marp-header",
"body": [
"---",
"marp: true",
"theme: base",
"paginate: true",
"footer: '${1:Title} - ${2:Date}'",
"---",
"",
"<!-- _class: title -->",
"",
"# ${1:Title}",
"",
"## ${3:Subtitle}",
"",
"${4:Author}",
"${2:Date}"
]
},
"Two Column": {
"prefix": "marp-2col",
"body": [
"<div class=\"columns\">",
"<div>",
"",
"$1",
"",
"</div>",
"<div>",
"",
"$2",
"",
"</div>",
"</div>"
]
}
}
パフォーマンス最適化
画像の最適化
# 画像圧縮スクリプト
#!/bin/bash
for img in presentations/*/images/*.{jpg,png}; do
# JPEGの場合
jpegoptim --max=85 "$img"
# PNGの場合
optipng -o2 "$img"
done
ビルド時間の短縮
# 並列ビルド設定
- name: Parallel build
run: |
find presentations -name "*.md" -type f | \
parallel -j 4 marp {} -o {.}.pdf
トラブルシューティング
日本語フォントの問題
/* カスタムフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
section {
font-family: 'Noto Sans JP', sans-serif !important;
}
Mermaidが表示されない
Mermaidの統合については、専用のガイドを参照してください:
簡易的な対処法(HTMLエクスポートのみ):
<!-- Mermaid有効化 -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
発表時のTips
プレゼンターノート
---
# スライドタイトル
本文
<!--
プレゼンターノート:
- 重要なポイント
- 話す順序
- 時間配分(3分)
-->
キーボードショートカット
F
: フルスクリーンG
: グリッド表示P
: プレゼンターモードB
: ブラックアウトC
: 描画モード
共同作業
レビューコメント
<!-- TODO: このグラフのデータソースを追加 -->
<!-- FIXME: 技術用語の説明を簡潔に -->
<!-- REVIEW: この流れで理解しやすいか確認 -->
バージョン管理
# 発表バージョンをタグ付け
git tag -a conference-v1.0 -m "○○カンファレンス発表版"
# 特定バージョンの取得
git checkout conference-v1.0
今後の改善提案
短期的改善
- テンプレートの拡充
- 技術勉強会用
- 営業提案用
- 研究発表用
- 自動化の強化
- スペルチェック
- 文章校正
- 時間見積もり
- AI連携の最適化
- プロンプトテンプレート
- ワークフロー自動化
- ブラウザベース化
- GitHub Codespaces対応(.devcontainer設定)
- ワンクリックで環境構築不要
- どこからでもアクセス可能
長期的ビジョン
- インタラクティブ要素
- アンケート機能
- リアルタイムQ&A
- 参加者フィードバック
- マルチメディア対応
- 動画埋め込み
- 音声ナレーション
- アニメーション
- 分析機能
- 視聴時間分析
- エンゲージメント測定
- 改善提案AI
- 完全なWebアプリ化
- ブラウザ内エディタ(CodeMirror/Monaco)
- リアルタイムプレビュー
- クラウド保存・共有機能
- PWA対応(オフライン編集)
- WebContainer APIでの完全なブラウザ内実行