Typst自作テーマで登壇スライドを作成した

Table of Contents

背景・動機

Nix meetup #3 大阪 で大阪への新幹線の中で登壇スライドを作成した。

https://www.takeokunn.org/pdf/nix-meetup-3-my-nix-usecase.pdf

今まではGoogle Slideでスライドを作成していたが、今回は Typstテーマを自作した にもあるとおり自作テーマで初の登壇仕様を作成してみた。

スライドは作ったものの、時間の関係で登壇できなかったので別の機会で流用する。

試したこと・やったこと

「オープニングスライド」の場合

「Agenda」の場合

#outline で自動で取得できる。

#slide[
   = Agenda

    #outline
]

#new-section が対象。

#new-section[自己紹介]
#new-section[今回話したいこと]
#new-section[事例紹介]
#new-section[今後やりたいこと]

「自己紹介スライド」の場合

画像は #place で右上に表示。

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

    = 自己紹介

    - たけてぃ \@takeokunn
    - Nix Meetup 共同主催
    - Nix歴ようやく1年経った
    - 仕事ではPHPコミュニティ所属
    - 個人ではテキストエディタコミュニティ所属
]

「ソースコード」の場合

コードは #sourcecode でシンタックスハイライトされる。

#slide[
   = devenv

    #sourcecode(frame: none)[```nix
{ pkgs, config, inputs, ... }: {
  cachix.enable = false;
  dotenv.disableHint = true;

  packages = with pkgs; [ typescript typescript-language-server ];

  languages.javascript = {
    enable = true;
    package = pkgs.nodejs_22;
  };
}
    ```]
]

「OGP画像」の場合

#place と image 関数だけでよい。

#slide[
    = blog
    #place(image("./images/blog.png", fit: "contain", width: 100%, height: 100%))
]

「箇条書き」の場合

通常とおり箇条書きすればよい。

「終わりに」の場合

中央に大きめの文字を配置するパターン。 #show: focus で実現できる。

#slide[
  #show: focus
  ご静聴ありがとうございました
]

得られた結果・所感

見栄えのよいスライドをorg-modeとTypstで簡単に作成できた。

NixでTypstをBuildしGitHub Pagesでホスティングする にもあるとおり、 git push したら数分後にGitHub Pagesからアクセスできるようになるので体験が非常によい。

今後の展開・検討事項

簡易的なレイアウトは実現できるようになったので、レイアウトの幅をもっと柔軟にして質の高いスライドを作成できるようにしたい。