私の（めっちゃ便利な）スライドアプリ
Yusuke Wada
Yokohama North Meetup #18 ・ November 4, 2026
Yusuke Wada
- Cloudflare Senior Developer Advocate
- Creator of Hono
私のスライドアプリ
20個の機能を紹介！
0. slides.yusu.ke
- https://slides.yusu.ke
- Cloudflare Workers で動いてる
1. HonoX + Markdown
- 1ファイル 1スライド
pnpm dev→ ローカルでプレビュー
app/
├── routes/
│ ├── index.mdx
│ ├── honoconf-2026.mdx
│ ├── foss4g-2026.mdx
│ └── my-slides-app.mdx # ここ
├── slide.js
└── slide.css
public/
├── images/
└── telop/
2. コーディングエージェントに最適化
- 機能追加
- スライドを書く
- Markdown だから読めるし書ける
- このデッキも Claude が書いた
3. /__current-slide
- 今見てるスライドの番号をエージェントに教えるエンドポイント
- 選択中のテキストも送る
- 「ここ直して」が通じる
$ curl localhost:5173/__current-slide
/my-slides-app #8 選択中: ここ直して
4. mainマージで本番
- PR を作る → プレビューURL が出る
- main にマージ → 即デプロイ
- 発表はプレビューで → 終わったらマージして公開
- Workers Builds
5. slide: true
- frontmatter に付けるとスライド
- 外すと普通のページ
- トップページも Markdown
---
title: 'slides.yusu.ke'
description: 'Slides by Yusuke Wada'
---
# slides.yusu.ke
6. レイアウトマーカー
---→ スライドの区切り::center::→ 中央にでかく::title::→ 表紙
---
::center::
私のスライドアプリ
---
::bg=orange size=1.3::→ これ
8. ::right::
::right::から右カラム- 左に文字、右に図
9. 記法いろいろ
- 太字 → オレンジ
-#→ 小さい注釈→→ 薄くなる- 画像のタイトル → キャプション
- コードは Copy ボタン付き
-# これが注釈
app.get('/', (c) => c.text('Hello slides!'))
theme: darkとtheme: light
f→ フルスクリーン
12. o ライトテーブル
13. プレゼンタータイマー
- 2枚目に進んだら開始
- 表紙に戻るとリセット
- リロードしても止まらない
- 右下に出てるやつ
14. スマホ
- 横スワイプ
- タップで送り → 右で次、左で前
15. 縦読みモード
- 縦持ちは全スライド縦積み
- 左下のボタンでプレゼン表示に切替
- 回転にも追従
16. OGP 自動生成
- Worker が表紙をスクショ
- Browser Run の Quick Action
- 1200x630、エッジで1日キャッシュ
17. ページごとの OGP
/my-slides-app/3→ 3ページ目から開く- 貼るとカードに 3ページ目が出る
18. テロップ
telop: trueで有効- 台本は JSON、スライド番号がキー
- 上をニュースティッカーが流れる
tで切替
{
"24": "テロップです。上を流れてるこれです。"
}
19. 音声
vで喋る- 台本から mp3 を生成 → 再生
- mp3 がなければブラウザの読み上げ
- どっちもできる！
20. 発音辞書
- TTS は英単語の読みが変
- カタカナに直してから喋らせる
- Hono → ほのお、CLI → しーえるあい
const READINGS = [
['Hono', 'ほのお'],
['CLI', 'しーえるあい'],
['AI', 'エーアイ']
]
まとめ
- 機能 20 個
- めっちゃ便利です！
- 非公開ですが、みなさんもこれを参考にあなたのスライドアプリを作ってください