Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Slidevのテンプレートリポジトリについて
Search
katzumi
December 09, 2023
Technology
0
69
Slidevのテンプレートリポジトリについて
Slidevの快適な執筆環境をテンプレートリポジトリとして公開しました
katzumi
December 09, 2023
Tweet
Share
More Decks by katzumi
See All by katzumi
設計原則、アーキテクチャパターン、アーキテクチャスタイルの違いって何?いつどう向き合ったらいいの?を考えてみる
katzumi
0
23
『eg-r2』のご紹介
katzumi
0
2
runn開発者会議福岡2024
katzumi
0
2
リリース戦略を支えるCI/CDパ イプライン
katzumi
0
1
APIテストでもカバレッジ測定 したい!
katzumi
0
1
OSSへの感謝を伝える
katzumi
0
560
モブワークを進化させていった話
katzumi
0
410
ActiveRecordパターンの呪縛を学びほぐして挑むクリーンアーキテクチャへの入り口
katzumi
0
39
実装と乖離させないスキーマ駆動開発フロー / OpenAPI Laravel編
katzumi
0
250
Other Decks in Technology
See All in Technology
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.7k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
410
偏光画像処理ライブラリを作った話
elerac
1
170
JavaにおけるNull非許容性
skrb
2
2.6k
分解して理解する Aspire
nenonaninu
2
1k
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
4
840
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
81k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
180
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.5k
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
160
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
KATA
mclloyd
29
14k
Why Our Code Smells
bkeepers
PRO
336
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
GraphQLとの向き合い方2022年版
quramy
44
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Six Lessons from altMBA
skipperchong
27
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
Slidev のテンプレートリポジト リについて Press Space for next page Dec 3rd,
2023. @ v0.0.3
自己紹介 以下のアカウントで活動しています。 katzumi (かつみ)と申します。 katzchum k2tzumi katzumi
What is Slidev ? オフィシャルページはこちら https://sli.dev/ Markdown 形式のフォーマットを書くといい感じにスライドが出来ます! 収録機能があり、素振りにも最適。
いままでSlidev で作ったスライド LT 用のちょっとしたスライドから、技術カンファレンスのスライドまで https://www.docswell.com/user/katzumi
いっぱい作った 書き味は大変良くスラスラ書ける
いっぱい作った もっと便利に使いたい! 書き味は大変良くスラスラ書ける
Motivation 素振り・本番・公開後それぞれのバージョンをいい感じに管理したい スライド共有サイト以外でスライドを自前公開をしたい Google Analytics でアクセスログを見られるように SNS へ共有する際に OGP を使っていい感じに
最新バージョンが勝手 よく使う slidev のコマンドをまとめておきたい typo とかはなるべくなくしたい 自作アドオンがデフォルトで有効にしたい よく使う CSS とかも管理したい 上記の執筆環境を環境依存せずにすぐ立ち上げたい スライドを最速で量産するのに、執筆〜公開までの一連のプロセスを改善したい
Slidev 用のテンプレートリポジトリ作りました https://github.com/k2tzumi/slidev-boilerplate
boilerplate 機能紹介 使い方にも触れます
tagpr によるバージョン管理 tagpr を GitHub Actions のワークフローに組み込んでバージョン管理しています。 tagpr の説明については以下の記事を参照 リリース用のpull
request を自動作成し、マージされたら自動でタグを打つtagpr スライド自体にもバージョンを埋め込んでいて、バージョンが上がると連動して更新されます。 素振り・本番・公開後それぞれにバージョンを付けるようにします
tagpr によるバージョン管理 動作イメージ リリース用 PR https://github.com/k2tzumi/slidev-boilerplate/pull/4 リリースノート自動生成 https://github.com/k2tzumi/slidev- boilerplate/releases/tag/v0.0.2
GitHub Pages へ自動Publish SlideShare の広告が大変なことになっているので、スライドを自前で配信させたかったので GiHub Pages へ 掲載するようにしました。 tagpr
によるバージョン管理と連動して、リリース用の PR がマージされると自動で Publish されるようにな っています。 実際に出来上がった内容はこちら https://k2tzumi.github.io/slidev-boilerplate その他にも Google Tag Manager に対応して Google Analytics によるアクセス解析ができるようになっています OGP タグ対応でスライドのサムネを付きで SNS へ共有できます スライド共有サイトを使わず、自前でスライドをホスティングできる!
よく使うコマンドは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
テクニカルライティング用の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
テクニカルライティング用のLinter 導入 https://github.com/k2tzumi/about-slidev-boilerplate/pull/1#pullrequestreview-1761146122 PR 上でレビューコメントがされます
QR コードのアドオンを導入済み 👆これだけで、👇こう表示されます 以下のライブラリを公開中 https://www.npmjs.com/package/@katzumi/slidev-addon-qrcode QR コードでページ誘導するのは効果的 <QRCode width="180" height="180"
value="https://twitter.com/katzchum" color="4329B9" image="Logo_of_X.svg" />
CSS は外部ファイル化しておく style.css のファイルに CSS を付け加える 引用っぽいの “ 付箋っぽいの
Devcontainer 対応 nodejs 環境がローカルになくてもボタン一発で CodeSpace 上に環境が構築されます。 出先で軽く修正。なんならそのままプレゼンも可能です。 全てはクラウド環境に
GitHub Actions の設定 方法について いくつかの権限及び設定が必要にります
GitHub Actions 権限追加 https://github.com/{owner}/{repository}/settings/actions Workflow 権限に書き込み&PR 作成を追加
GitHub Pages デプロイ設定 https://github.com/{owner}/{repository}/settings/pages GitHub Pages のソースを決める
環境設定 https://github.com/{owner}/{repository}/settings/environments GitHub Pages のデプロイブランチ設定 github-pages をクリック tagpr-from-* をブランチ追加 `
`
シークレット設定(オプション) https://github.com/{owner}/{repository}/settings/secrets/actions/new Google tag manager(Google Analytics) 連携のシークレット追加 Repository secrets を追加
GA_TRACKING_ID に google タグ ID を設定 ` `
Special thanks ! Slidev tagpr textlint Reviewdog playwright qrcode-vue3
Fin.