:PROPERTIES:
:ID:       73628eb8-79f6-3754-fc43-acdb982eefe8
:END:
#+TITLE: Typstで登壇できるようになったので練習させてくれ
#+AUTHOR: takeokunn
#+STARTUP: fold
#+TYPST: #import "./dracula.typ": *
#+TYPST: #show: setup
* Title
#+begin_export typst
#slide[
    #set page(header: none, footer: none, margin: 3em)

    #text(size: 1.3em)[
        Typstで登壇できるようになったので練習させてくれ
    ]

    第177回 PHP勉強会＠東京

    #divider

    #set text(size: .8em, weight: "light")
    \@takeokunn

    Jun 25, 2025
]
#+end_export
* Agenda
#+begin_export typst
#slide[
   = Agenda

    #outline
]
#+end_export
* 自己紹介
#+begin_export typst
#new-section[自己紹介]

#slide[
    #place(
        top + right,
        image("./images/icon.jpeg", width: 100pt) // Path updated to local image
    )

    = 自己紹介

    - たけてぃ \@takeokunn
    - 仕事ではPHPコミュニティ所属
    - 個人ではテキストエディタコミュニティ所属
]
#+end_export

* 今日の話について
#+begin_export typst
#new-section[今日の話について]

#slide[
    = 今日の話について

    - Typstでスライドを生成できるようにした
    - その内容をブログから抽出してAIにスライドを生成させた
    - 実際に登壇がうまくいくのか検証する回
        - AIパワポカラオケ
    - プロンプトをチューニングしきれてないのは御愛嬌
        - Gemini 2.5 Proのデフォルト
]

#slide[
    = AI生成方法

    #place(image("./images/20250610215948-ai_powered_typst_slide_generation.png", fit: "contain", width: 100%, height: 100%))
]


#slide[
    = 元ブログ(1)

    #place(image("./images/20250126114218-build_and_deploy_typst_using_nix.png", fit: "contain", width: 100%, height: 100%))
]

#slide[
    = 元ブログ(2)

    #place(image("./images/20250506220914-create_typst_slide_theme.png", fit: "contain", width: 100%, height: 100%))
]

#slide[
    = 元ブログ(3)

    #place(image("./images/20250601214129-create_slide_by_typst_self_theme.png", fit: "contain", width: 100%, height: 100%))
]

#slide[
    = 元ブログ(4)

    #place(image("./images/20250608145128-presenting_with_typst_pdfpc.png", fit: "contain", width: 100%, height: 100%))
]
#+end_export
* きっかけと違和感
#+begin_export typst
#new-section[きっかけと違和感]

#slide[
    = かつての相棒: Google Slides

    - かつてはGoogle Slidesは最高の相棒だった
    - 画像位置を調整するのが簡単
    - 過去に作ったスライド資産がある
    - 外部への共有も簡単
]

#slide[
    = 当時のスライド作成フロー

    - Markdownでアウトラインを書く
    - 過去スライドをコピペしてくる
    - アウトラインに沿ってスライドを作る
    - スピーカーノートを用意する
]

#slide[
    = 心に刺さった"小さなトゲ"

    - プレーンテキストで管理できない
    - AIによる自動生成できない
    - Emacsから編集できない
    - etc...
]

#slide[
    = 違和感の正体

    - エンジニアとしての"業"（カルマ）
    - Git管理が恋しい
    - 再利用性が低い (No DRY!)
    - 自動化できない
]

#slide[
    = エンジニアの性（さが）

    - 僕らは、スライドという成果物も“コード”として管理したい生き物なんだ！
]
#+end_export
* Typstとの出会いと感動
#+begin_export typst
#new-section[Typstとの出会いと感動]

#slide[
    = 運命の出会い: Typst

    - そんな僕が出会ったのがTypst
    - まさに「プレゼン資料も構造化・宣言的に書ける」言語
    - 探し求めていた理想がそこにあった
]

#slide[
    = 最初の感動ポイント

    - コードでスライドが書ける
        - Emacsから離れなくていい
    - Gitで管理できる
        - 変更履歴はすべてお見通し！
    - テーマが自作できる
        - DRY原則、スライドにも！
    - コードハイライトが美しい
]

#slide[
    = Typstスライドを支える技術（しくみ）

    - Polylux
        - Typstのためのスライドエンジン
    - codelst
        - コードを美しく見せるスタイリスト
    - Nix
        - すべてを固める魔法の環境
]
#+end_export
* 実用に耐えるまでの道のり
#+begin_export typst
#new-section[実用に耐えるまでの道のり]

#slide[
    = 現実は甘くなかった

    - 理想の環境はすぐそこに見えたが、やってみると色々な壁にぶつかる
    - 「言うは易く行うは難し」を実感する日々
]

#slide[
    = やってみて困ったこと（理想と現実のギャップ）

    - テーマの調整が超むずい
    - polyluxやcodelstのドキュメントとひたすらにらめっこ
    - フォント設定
        - この日本語フォントを使いたいだけなのに…
    - 画像の配置
        - ドラッグ＆ドロップの偉大さを思い知る
]

#slide[
    = それでも続けた理由（Typstの魅力に立ち返る）

    - 記法が明快で、根本的な書き心地は最高だった
    - スライド構成が自分の思考にフィットした
    - アウトラインから考え、そのままプレーンテキストのままスライドを作る
]

#slide[
    = 補助ツールとの統合（そして"最強"の環境へ）

    - Typst単体ではなく、エコシステム全体で課題を解決していく
    - pdfpc: PDFプレビュー
        - スピーカーノートを表示
        - ついに「登壇」できるようになった瞬間
    - GitHub Actions
        - CIによる検証
    - GitHug Pages
        - Web上にPDFを公開する
        - 発表資料を"資産"にする
]
#+end_export
* Typst登壇はこう変えた
#+begin_export typst
#new-section[Typst登壇はこう変えた]

#slide[
    = Before/After

    - Typstを手に入れた結果、登壇準備のすべてが変わった
    - Before/Afterで振り返る、スライド制作プロセスの変化
    - 「きっかけと違和感」で感じていた違和感がすべて解消されていく
]

#slide[
    = 変化1: 迷わず構成から入れる

    - Before
        - まずGoogle Slidesを開き、過去のスライドのどこからコピペするか悩む…
    - After
        - まずEmacsでアウトライン（構造）を書くことに集中できる
]

#slide[
    = 変化2: 見た目を気にしすぎなくていい

    - Before
        - テキストボックスの位置、フォントサイズ、etc
        - ピクセル単位の調整地獄
    - After
        - 自作テーマを適用すればOK
        - 「見た目は後からついてくる」安心感
]

#slide[
    = 変化3: 再利用性・再現性が圧倒的

    - Before
        - 過去スライドからコピペ
        - コピペミスやうっかり編集しちゃったなどヒューマンエラーが頻発
    - After
        - 過去の資産はGitリポジトリに
        - Nixのおかげで再現性のあるPDFを生成
]

#slide[
    = Typstで登壇する未来

    - 自分だけのテーマを育てる文化
    - 発表のたびにテーマを少しずつ改善していく
        - 自分だけの"刀"を研ぐ感覚
    - コード × ブログ × 登壇の三位一体
    - Slide as Codeの世界へようこそ
]

#slide[
    = まとめとメッセージ

    - Google Slidesへの違和感から始まり、困難を乗り越え、最強の環境を手に入れました
        - 一度書いてみれば、この快感が分かる
    - その場限りの資料ではなく、再利用可能な“資産”を作りたい人は、ぜひTypstへ！
]
#+end_export

* ご清聴ありがとうございました
#+begin_export typst
#slide[
    #show: focus

    ご清聴ありがとうございました
]
#+end_export