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
130
【Marp】ドコでもMarkdownを使って資料を作れる環境を用意してみる。【GitPod】
Markdownでスライドを作成する為のツールであるMarpとブラウザからお手軽に仮想開発環境を用意するコトを可能にするGitpodを使いドコでも資料を作成することを可能にする方法を紹介します。
T4D4
August 07, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
slog.Handlerのよくある実装ミス
sakiengineer
4
480
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
120
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
140
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
200
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Agile that works and the tools we love
rasmusluckow
330
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Docker and Python
trallard
46
3.6k
Designing Experiences People Love
moore
142
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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