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】ドコでもMarkdownを使って資料を作れる環境を用意してみる。【GitPod】
Search
T4D4
August 07, 2024
Technology
0
140
【Marp】ドコでもMarkdownを使って資料を作れる環境を用意してみる。【GitPod】
Markdownでスライドを作成する為のツールであるMarpとブラウザからお手軽に仮想開発環境を用意するコトを可能にするGitpodを使いドコでも資料を作成することを可能にする方法を紹介します。
T4D4
August 07, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
100
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.3k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
550
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
160
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
120
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
190
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
170
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
150
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
460
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
It's Worth the Effort
3n
187
28k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fireside Chat
paigeccino
40
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Designing for Performance
lara
610
69k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Transcript
【Marp】ドコでもMarkdownを使って資料を作れる環 境を用意してみる。 【GitPod】 T4D4
Agenda 自己紹介 前提知識 実際の作業手順
自己紹介 名前: T4D4 X a.k.a Twitter: @T4D4
前提知識 Marpとは? Marpとは、Markdown記法でスライドを作成するためのツールです。 詳細は公式サイトを参照してください。 Gitpodとは? Gitpodとは、GitHub、Gitlab、BitbucketのためのワンクリックオンラインIDE です。 詳細は公式サイトを参照してください。
実際の作業手順 1. 事前準備としてGitHub上で空のリポジトリとGitpodのアカウントを用意します。 Gitpodのアカウントを作成する時、GitHubのアカウントを選択してくださ い。
2. GitpodのworkspaceからNew Workspaceボタンをクリックして新しいワークスペ ースの作成を行います。 新しいワークスペースを作成するページでは、連携させるレポジトリ、使用 するエディター、VMの性能を選択します。 2.1. まず、1番上の項目で連携させるレポジトリを選択します。ここで1番最初の事前 準備の段階で作成したリポジトリを選択します。
2.2. その後、エディターとVMの性能を選択してCreate a Workspaceボタンをクリック します。 VMの性能はお財布などと相談して好きに選択してください。 エディターはドコでも資料を作れる環境という本スライドの趣旨を重視する場合 はVScode・Browserを選択してください。しかし、ブラウザ版では一部の拡張機 能(GitHubCopilot等)が使えない場合があるみたいなので、パソコン上でしか使 わないならお好きなエディターを選択すると良いと思います
3項目の設定の完了後、continueボタンのクリックでワークスペースが作成されま す。
3. 少し待つとブラウザでVScodeライクなUIのエディターがブラウザ上で開かれると 思います。 (デスクトップアプリ版で開きたい場合は左下に下のようなポップアッ プが出てきたらOpenをクリック) エディターが開かれたら、ドコでも開発をできるようにする環境自体は整いま す。あとは、スライドを作成するために必要な環境を整えます。
4. 拡張機能を導入します。 左のサイドバーの下から2番目のアイコンをクリックして拡張機能の検索を行 います。 検索バーに「Marp」と入力して、 「Marp for VS Code」という名前の拡張機 能をインストールします。
5. GitpodのVMにChromeをインストールします。 Marpでは、Markdownで書いたスライドをpptxやpdf形式で出力する際にブラウザ を必要とします。どうやらGitpodの方にブラウザが入っていないとダメなような ので、CLIからChromeをインストールします。 インストールコマンド例↓ wget -q -O -
https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' sudo apt update sudo apt install google-chrome-stable
6. 日本語フォントのインストール ローカルな環境でMarpを使う場合は、日本語フォントが入っていると思います が、gitpodのVMには入っていません。このままでは出力したファイルの日本語が □になってしまい読めないので、日本語フォントをインストールします。 インストールの方法とフリーダウンロード可能な日本語フォントについてこちら の記事が詳しいので参考にしてみてください。 フォントのインストールが完了すればコレでスライドを作成するために必要な環 境のセットアップは完了です。
おまけ 最低限必要な拡張機能として「Marp for VS code」だけをインストールしました。しかし、 VScodeには他にも便利な拡張機能はたくさんあるので、僕が実際にMarpでスライドを作成する 際に使っている拡張機能の一部を紹介します。 GitHub Copilot GitHubの提供するAIです。文章書いてる時にもアシストが働いてくれて便利
です。 Code Spell Checker コード内のスペルミスを検出してくれる拡張機能です。 vscode-textlint、テキスト校正くん テキスト校正くんは、日本語の文章をチェックしてくれる拡張機能です。 vscode-textlintは、文章をルールにしたがってチェックするtextlintというツー ルをvscode上で使う為の拡張機能です。
参考リンク Marp公式サイト Gitpod公式サイト Linux で標準的に使われるフリー日本語フォント GitHub Copilot - Visual Studio
Marketplace Code Spell Checker - Visual Studio Marketplace vscode-textlint - Visual Studio Marketplace テキスト校正くん - Visual Studio Marketplace