Slide 1

Slide 1 text

Slidev のテンプレートリポジト リについて Press Space for next page Dec 3rd, 2023. @ v0.0.3

Slide 2

Slide 2 text

自己紹介 以下のアカウントで活動しています。 katzumi (かつみ)と申します。 katzchum k2tzumi katzumi

Slide 3

Slide 3 text

What is Slidev ? オフィシャルページはこちら https://sli.dev/ Markdown 形式のフォーマットを書くといい感じにスライドが出来ます! 収録機能があり、素振りにも最適。

Slide 4

Slide 4 text

いままでSlidev で作ったスライド LT 用のちょっとしたスライドから、技術カンファレンスのスライドまで https://www.docswell.com/user/katzumi

Slide 5

Slide 5 text

いっぱい作った 書き味は大変良くスラスラ書ける

Slide 6

Slide 6 text

いっぱい作った もっと便利に使いたい! 書き味は大変良くスラスラ書ける

Slide 7

Slide 7 text

Motivation 素振り・本番・公開後それぞれのバージョンをいい感じに管理したい スライド共有サイト以外でスライドを自前公開をしたい Google Analytics でアクセスログを見られるように SNS へ共有する際に OGP を使っていい感じに 最新バージョンが勝手 よく使う slidev のコマンドをまとめておきたい typo とかはなるべくなくしたい 自作アドオンがデフォルトで有効にしたい よく使う CSS とかも管理したい 上記の執筆環境を環境依存せずにすぐ立ち上げたい スライドを最速で量産するのに、執筆〜公開までの一連のプロセスを改善したい

Slide 8

Slide 8 text

Slidev 用のテンプレートリポジトリ作りました https://github.com/k2tzumi/slidev-boilerplate

Slide 9

Slide 9 text

boilerplate 機能紹介 使い方にも触れます

Slide 10

Slide 10 text

tagpr によるバージョン管理 tagpr を GitHub Actions のワークフローに組み込んでバージョン管理しています。 tagpr の説明については以下の記事を参照 リリース用のpull request を自動作成し、マージされたら自動でタグを打つtagpr スライド自体にもバージョンを埋め込んでいて、バージョンが上がると連動して更新されます。 素振り・本番・公開後それぞれにバージョンを付けるようにします

Slide 11

Slide 11 text

tagpr によるバージョン管理 動作イメージ リリース用 PR https://github.com/k2tzumi/slidev-boilerplate/pull/4 リリースノート自動生成 https://github.com/k2tzumi/slidev- boilerplate/releases/tag/v0.0.2

Slide 12

Slide 12 text

GitHub Pages へ自動Publish SlideShare の広告が大変なことになっているので、スライドを自前で配信させたかったので GiHub Pages へ 掲載するようにしました。 tagpr によるバージョン管理と連動して、リリース用の PR がマージされると自動で Publish されるようにな っています。 実際に出来上がった内容はこちら https://k2tzumi.github.io/slidev-boilerplate その他にも Google Tag Manager に対応して Google Analytics によるアクセス解析ができるようになっています OGP タグ対応でスライドのサムネを付きで SNS へ共有できます スライド共有サイトを使わず、自前でスライドをホスティングできる!

Slide 13

Slide 13 text

よく使うコマンドはMakefile から呼び出し slidev の操作するコマンドをすぐ忘れてしまうので make コマンドを叩けばわかるようにしました。 make コマンドは優秀なタスクランチャー $ make build Build slide clean Delete slide dev Run dev server install Install packages lint Run textlint pdf Export PDF publish Publish slide upgrade Upgrades package.json

Slide 14

Slide 14 text

テクニカルライティング用のLinter 導入 typo の達人を回避する為に機械でチェックさせる $ make lint npx textlint --cache slides.md /Users/katsumi/workspace/about-slidev-boilerplate/slides.md 142:31 error ら抜き言葉を使用しています。 ja-technical-w 143:26 error 一文に二回以上利用されている助詞 " に" がみつかりました。 次の助詞が連続しているため、文を読みにくくしています。 - " に" - " に" 同じ助詞を連続して利用しない、文の中で順番を入れ替える、文を分割するなどを検討してください。 ja-technical-writing/no-doubled-joshi 207:9 error 【dict5 】 " 操作を行う" は冗長な表現です。" 操作する" など簡潔な表現にすると文章が明瞭になります。 解説: https://github.com/textlint-ja/textlint-rule-ja-no-redundant-expression#dict5 ja-technical-writing/ja-no-redundant-ex ✖ 3 problems (3 errors, 0 warnings) make: *** [.textlintcache] Error 1

Slide 15

Slide 15 text

テクニカルライティング用のLinter 導入 https://github.com/k2tzumi/about-slidev-boilerplate/pull/1#pullrequestreview-1761146122 PR 上でレビューコメントがされます

Slide 16

Slide 16 text

QR コードのアドオンを導入済み 👆これだけで、👇こう表示されます 以下のライブラリを公開中 https://www.npmjs.com/package/@katzumi/slidev-addon-qrcode QR コードでページ誘導するのは効果的

Slide 17

Slide 17 text

CSS は外部ファイル化しておく style.css のファイルに CSS を付け加える 引用っぽいの “ 付箋っぽいの

Slide 18

Slide 18 text

Devcontainer 対応 nodejs 環境がローカルになくてもボタン一発で CodeSpace 上に環境が構築されます。 出先で軽く修正。なんならそのままプレゼンも可能です。 全てはクラウド環境に

Slide 19

Slide 19 text

GitHub Actions の設定 方法について いくつかの権限及び設定が必要にります

Slide 20

Slide 20 text

GitHub Actions 権限追加 https://github.com/{owner}/{repository}/settings/actions Workflow 権限に書き込み&PR 作成を追加

Slide 21

Slide 21 text

GitHub Pages デプロイ設定 https://github.com/{owner}/{repository}/settings/pages GitHub Pages のソースを決める

Slide 22

Slide 22 text

環境設定 https://github.com/{owner}/{repository}/settings/environments GitHub Pages のデプロイブランチ設定 github-pages をクリック tagpr-from-* をブランチ追加 ` `

Slide 23

Slide 23 text

シークレット設定(オプション) https://github.com/{owner}/{repository}/settings/secrets/actions/new Google tag manager(Google Analytics) 連携のシークレット追加 Repository secrets を追加 GA_TRACKING_ID に google タグ ID を設定 ` `

Slide 24

Slide 24 text

Special thanks ! Slidev tagpr textlint Reviewdog playwright qrcode-vue3

Slide 25

Slide 25 text

Fin.