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
VS Code + 軽量マークアップ言語で書くスライド
Search
Kenichiro MATOHARA
May 05, 2020
Technology
0
690
VS Code + 軽量マークアップ言語で書くスライド
Kenichiro MATOHARA
May 05, 2020
Tweet
Share
More Decks by Kenichiro MATOHARA
See All by Kenichiro MATOHARA
ポータブルで色々なプロトコルに対応したファイルサーバーのcopypartyを試す
matoken
0
2
後で読む系サービスPocketの移行先にShioriを試す
matoken
0
31
GaleneのGo製ライブラリでtext chatを保存
matoken
0
14
MastodonとtootとTerminal graphics protocolのKittyとiTerm2
matoken
0
66
ChangeDetection.ioでウェブページを定期チェック
matoken
0
160
ターミナルエミュレータのKittyで文字サイズ変更
matoken
0
66
Glanceで個人向けポータルサイト
matoken
0
130
Google検索をJavaScriptなしで
matoken
0
120
fuse-archiveでいろんなアーカイブをマウント
matoken
0
190
Other Decks in Technology
See All in Technology
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
320
「Linux」という言葉が指すもの
sat
PRO
4
140
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
160
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Writing Fast Ruby
sferik
628
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Transcript
VS Code + 軽量 VS Code + 軽量 マークアップ マークアップ
言語で書くス 言語で書くス ライド ライド
Kenichiro Matohara Kenichiro Matohara 鹿児島らぐ Discord h ps:/ /matoken.org h
ps:/ /kagolug.org h ps:/ /discord.gg/cGf9mGg
QR QR kagolug.org Discord
VS Code + 軽量マークアッ VS Code + 軽量マークアッ プ言語で書くスライド プ言語で書くスライド
凝ったスライドを作らない人向け テキストエディタだけでも書ける Raspberry Pi とかでもok
なんでVS Code/Codium の なんでVS Code/Codium の 拡張機能? 拡張機能? 先日出先でスライド環境が壊れて困った リモートで変換して持ってこようとしたけど時間
や回線がなくて…… 月1,2回しか使わないのに環境ごと (amd64/armhf/arm64)にアップデートするのが面倒 VS Code/Codiumの拡張機能なら勝手に更新され る
CLIでも動いてVS CLIでも動いてVS Code/Coduimで動けば万 Code/Coduimで動けば万 全? 全? Markdownで記述できるMarpNext AsciiDocで記述できるAsciidoctor reveal.js
LibreO ce Impress でもい LibreO ce Impress でもい いのでは いのでは
マルチプラットホーム対応(arm Linuxもok)でヘッド レスでpdf変換も出来る ウェブブラウザがあればLibreOffice Online という 手も AndroidでchrootしてLibreOffice はちょっと辛い 感じ
MarpNext MarpNext Marpのreboot node.js製 Markdown( ) で記述する Marp CLI /
Marp Web / Marp for VS Code 等がある Marp Desktopは開発中 h ps:/ /marp.app/ Marpit Markdown
Marp for VS Code Marp for VS Code VS Codeの拡張機能
Ctrl+Shift+X で拡張機能タブを開いてmarp(marp- team.marp-vscode)で検索してインストール リアルタイムプレビュー(Ctrl+K V) 画像などを使うと結構ズレるのではじめはスライ ドじゃないMarkdownPreviewを使ったほうがい いかも 書き出し機能(Ctrl+Shi +P → Export slide deck)
MarpCLI MarpCLI html/pdf/pptx/png/jpegに変換 ウォッチモード リアルタイムプレビュー(編集は好きなテキスト エディタで) サーバモード h pdが起動して同じネットワークに共有できる pdf/png/jpegでダウンロード可能
MarpCLI導入 MarpCLI導入 導入例(armhf/arm64等でもok) amd64だとシングルバイナリが提供されるように なってお手軽に(※EXPERIMENTAL) $ npm install --save-dev @marp-team/marp-cli
$ wget https://github.com/marp-team/marp-cli/releases/download/v0 $ tar xvf marp-cli-v0.17.4-linux.tar.gz -C ~/bin/ marp
AsciiDoc(AsciiDoctor.js+α) で reveal.js を書くVS Codeの拡張機能 拡張機能タブを開いてAsciiDoc Slides(flobilosaurus.vscode-asciidoc-slides) と,依存 しているAsciiDoc(joaompinto.asciidoctor-vscode)を 導入
AsciiDoc Slides for Visual AsciiDoc Slides for Visual Studio Code Studio Code
機能等 機能等 プレビュー(Ctrl+K V) ※保存時にリフレッシュ プレビュー時は縦長に,プレゼン時は横長になる のでブラウザでの確認必須 html書き出し/inline html書き出し inline
htmlがおすすめ 画像やcssをdata-uriで書き出してくれるので単一 ファイルで持ち運べる
reveal.js のpdf書き出し reveal.js のpdf書き出し Chrome/Chromium で URLの末尾に ?print-pdf を 付与して開いて
Ctrl + p で印刷画面にして pdf 書き 出し headlessで変換したいけど ? が %3F になってしまう ※巨大なpdfが出来てしまうことがある(ps2pdfでダイ エット) $ chromium --temp-profile --user-data-dir=`mktemp -d` \ --headless --print-to-pdf=./slides.pdf \ 'files://$(pwd)/?print-pdf'
AsciiDocのinclude便利 AsciiDocのinclude便利 他のAsciiDoc文章やcsvファイルをinclude出来る 自己紹介や奥付など固定部分をincludeしたり 一般公開時には出したくないものを外出しにしてお いたり
csvファイルinclude例 csvファイルinclude例 csvファイルを用意して includeすると Table 1. 表にしてくれる cat,猫,😺 dog,犬,🐶 ,===
include::resources/cat_dog.csv[] ,=== resources/cat_dog.csv
Asciidoctor reveal.js(cli) Asciidoctor reveal.js(cli) gemもある(動作未確認) h ps:/ /asciidoctor.org/docs/asciidoctor-revealjs/ $ npm
i --save asciidoctor@^2.0 @asciidoctor/reveal.js
余録:低解像度で画面共有 余録:低解像度で画面共有 サブモニタor仮想サブモニタを用意して低解像度に してその画面にスライドを映して共有(今回は VGA,QVGAはジャギが目立って駄目な感じだっ た) htmlスライドの場合chrome のapp mode( --
app=$URL )でツールバー等が消せるので小さなウィ ンドウで共有 $ chromium --app="files://$(pwd)/slides.html"
今回の発表時のミス 今回の発表時のミス 画面共有に失敗 AsciiDoc Slides でInline Htmlで書き出したのにCSS が埋め込まれていなかった pdf書き出しで2ページ目の頭までしか出力されな かった
(Inline html exportが入る前のバージョンに巻き戻し て通常のhtmlで書き出してからpdf変換はうまくいっ た)
ツッコミとか ツッコミとか どっちがおすすめ? Marpのほうが普通に使えてお すすめ.AsciiDoc Slidesの方は今回のようにうまく 行かないことが……(reveal.js 自体は安定しているけ どVS Code
じゃなくなる) を利用して60行ほどで自作しているよとい う方 エディタで9割方書いてLibreOffice Impressのアウ トラインモードに貼り付けて整形しているという方 Marked
奥付 奥付 発表 2020-05-05(Tue) 著者 Kenichiro Matohara 元になったページ Licence LILO&東海道らぐオンライン
ミーティング 2020-05-05 - connpass h ps:/ /matoken.org/ h ps:/ /wiki.matoken.org/slide/tool/marp h ps:/ /wiki.matoken.org/slide/tool/asciidoc-slides h ps:/ /speakerdeck.com/matoken/marp-next- woshi-su CC BY-NC-SA 4.0