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
Marpで資料を作ってLTへの参加ハードルを下げる
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
髙橋俊介
August 29, 2023
Technology
0
1k
Marpで資料を作ってLTへの参加ハードルを下げる
髙橋俊介
August 29, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
プロダクト成長を支える開発基盤とスケールに伴う課題
yuu26
4
1.4k
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
130
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
520
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
kawaguti
PRO
1
210
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
colopl
0
150
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
780
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
220
Oracle AI Database移行・アップグレード勉強会 - RAT活用編
oracle4engineer
PRO
0
110
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
3
230
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
2.1k
Featured
See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
150
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
AI: The stuff that nobody shows you
jnunemaker
PRO
2
280
Ethics towards AI in product and experience design
skipperchong
2
200
Marketing to machines
jonoalderson
1
4.7k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
From π to Pie charts
rasagy
0
130
4 Signs Your Business is Dying
shpigford
187
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
A Tale of Four Properties
chriscoyier
162
24k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
53
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
Transcript
Marpで資料を作ってLTへの参加ハードルを下げる ©2023 株式会社ユーティル 髙橋俊介 1
自己紹介 髙橋俊介 新卒で小売業界でSVとして働き始める 2019年よりWebエンジニアとして働き始める 2023年2月から株式会社ユーティルでWebエンジニアとして働いている ©2023 株式会社ユーティル 髙橋俊介 2
本日のお題 そもそもLTについてどういう認識? MarpでLT資料を作ろう まとめ ©2023 株式会社ユーティル 髙橋俊介 3
そもそもLTについてどういう認識? ©2023 株式会社ユーティル 髙橋俊介 4
そもそもLTに ついて どういう認識? 題材と資料に関して LTを初めてやる人が 気になりそうな点 などを調べる人が多い。 5
そもそもLTについてどういう認識? 大別すると以下の要素に集約される。 題材系 →人によるので一律に解決策が出しづらいこと。 資料系 →ある程度、技術的に解決出来ること。 ©2023 株式会社ユーティル 髙橋俊介 6
そもそもLTについてどういう認識? 参加へのハードルを下げれそうな点 →LT資料を作ることが楽になればいい。 ©2023 株式会社ユーティル 髙橋俊介 7
そもそもLTについてどういう認識? 何を使ってLT資料を作る? ツール PPT、Google スライド Keynote Canva etc... ©2023 株式会社ユーティル
髙橋俊介 8
そもそもLTについてどういう認識? もっと楽に資料作りたい 資料作成に時間かけたくない。 書き慣れてるMarkDownで書きたい。 履歴管理したい。 公開なども気軽にできると助かる。 ©2023 株式会社ユーティル 髙橋俊介 9
MarpでLT資料を作ろう ©2023 株式会社ユーティル 髙橋俊介 10
MarpでLT資料を作ろう Marpとは? Markdown Presentation Ecosystem https://marp.app/ Markdownでプレゼンテーション資料を簡単に作成できるツール。 VScodeの拡張機能として「Marp for VS
Code」があるため今回はこちらを使用。 Yuki Hattoriさんが開発。 https://github.com/sponsors/yhatt ©2023 株式会社ユーティル 髙橋俊介 11
MarpでLT資料を作ろう 今回用意するもの Visual Studio Code (必須) Marp for VS Code
(必須) Markdown Preview Mermaid(任意) GitHub アカウント(任意) ©2023 株式会社ユーティル 髙橋俊介 12
MarpでLT資料を作ろう 今回触れること Marpで出来ることの概要 今回触れないこと MarkDownやMarp、Mermaidの記法について Marpのテーマファイル作成やGitHub Actionsの設定などの踏み込んだ部分 13
MarpでLT資料を作ろう 効率的に使うための準備 VSCodeの設定で markdown.marp.enableHtml で検索 して、checkを入れておくことでHTML を認識できるようにしておく。 14
MarpでLT資料を作ろう 基本的にMD記法なら何でも書ける 【表サンプル】 ID name created_at 1 hogehoge 2023-09-01 00:00:00
2 fugafuga 2023-09-01 19:00:00 ©2023 株式会社ユーティル 髙橋俊介 15
MarpでLT資料を作ろう Mermaidも使える 料理人 フライパン 火が通るまで待つ お肉を焼く 焼き上がり 料理人 フライパン 16
MarpでLT資料を作ろう 特定のページだけスタイル変更したい 表示を変えたいページに <style scoped> 要素{ セレクタ: プロパティ; } </style>
を挿入することでscopedとしてCSSも割り当てられる。 ©2023 株式会社ユーティル 髙橋俊介 17
MarpでLT資料を作ろう Marpを出力 単純に出力するだけであればVSCode上 で出力可能。 18
MarpでLT資料を作ろう Marpを出力 VSCodeの設定で markdown.marp.exportType を開けば HTML/CSS PDF PowerPoint ドキュメント と出力形式を選択することも可能。
19
MarpでLT資料を作ろう 公開まで自動化したい @marp-team/marp-cliとGitHub Actionsを使って、Mergeすることで スライドとして公開することも可能。 ※ 「Marp-cli GitHub Actions」などで調べると色々な方々が記事にされている。 ©2023
株式会社ユーティル 髙橋俊介 20
まとめ LTはMarpを使って資料作成に時間を掛け過ぎない。 使い慣れてるMarkDownでサクサク書けるのでお手軽。 テーマ用CSSを作って使いまわせるようにしておくことで更に効率化も可能。 GitHubなどで管理しておくと楽になる。 履歴管理しやすいのがメリットとして大きい。 GitHub Actions使って公開まで自動化などもできる。 ©2023 株式会社ユーティル
髙橋俊介 21
ご清聴ありがとうございました。 ©2023 株式会社ユーティル 髙橋俊介 22