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 を使って快適にナレッジを Zenn にためる
Search
Kazuki Negoro
February 04, 2022
Programming
1
1.2k
VS Code を使って快適にナレッジを Zenn にためる
VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
#vscodejp
Kazuki Negoro
February 04, 2022
Tweet
Share
More Decks by Kazuki Negoro
See All by Kazuki Negoro
ステートフルなアプリケーション のダウンタイムを 10 秒以下 にすることを目指して
negokaz
1
7k
Using Akka Cluster for a payment service
negokaz
7
5k
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
420
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
610
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
570
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
420
GraphRAGの仕組みまるわかり
tosuri13
8
520
PicoRuby on Rails
makicamel
2
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
GoのGenericsによるslice操作との付き合い方
syumai
3
710
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
250
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Become a Pro
speakerdeck
PRO
28
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Scaling GitHub
holman
459
140k
Designing Experiences People Love
moore
142
24k
Code Review Best Practice
trishagee
69
18k
Visualization
eitanlees
146
16k
Why Our Code Smells
bkeepers
PRO
337
57k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Practical Orchestrator
shlominoach
188
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Transcript
VS Code を使って快適に ナレッジを Zenn にためる 1 / 32
あなた誰? 根来 和輝 Negoro Kazuki 仕事 某SIer Scala/Akka/OSS開発 趣味 楽するためのツールを作る
@negokaz negokaz 2 / 32
過去作った VS Code の拡張機能 Live Server Preview installs installs 452k
452k HTML ファイルのプレビューを実現 ファイルを編集するとプレビューにリアルタイム反映 OpsScriptMD installs installs 96 96 サーバーサイドの運用作業の半自動化を目指した拡張機能 Markdown のプレビュー画面でコードブロックを実行 3 / 32
個人のナレッジどこにためてますか? 脳内 社内 Wiki ブログ ... 4 / 32
今日オススメしたいサービス https://zenn.dev/ 5 / 32
Zenn とは? 6 / 32
Zenn にナレッジをためると… 必要なときに自分のナレッジを簡単に参照できる チームメンバーへのナレッジの共有も簡単 他のエンジニアからサポートしてもらえるかもしれない 7 / 32
過去頂いたサポート 8 / 32
Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ (個人の感想です) 9 / 32
Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ (個人の感想です) GitHub で記事や本の原稿を管理できる 10
/ 32
GitHub と連携すると嬉しいこと 記事や本の原稿は Markdown ファイルなので 使い慣れた VS Code で記事が書ける! textlint
プラグインで簡単なミスを自動チェックしたり 自分なりに環境を工夫しながら執筆できる Git に履歴が残るため過去記事のメンテが気軽にできる 11 / 32
Zenn と GitHub を連携する 簡単 2 ステップ 1. 記事や本のソースを格納するリポジトリの作成 2.
Zenn のダッシュボードから連携するリポジトリを指定 https://zenn.dev/zenn/articles/connect-to-github 12 / 32
記事公開までの流れ (GitHub と連携した場合) 13 / 32
公開前に仕上がりを確認したい 公式の Zenn CLI を使うと記事や本の仕上がりを ローカル環境で確認できる https://zenn.dev/zenn/articles/zenn-cli-guide 14 / 32
Zenn CLI でプレビューを開く方法 ① ターミナルでコマンドを実行 ❯ zenn preview Preview: http://localhost:8000
② ブラウザでプレビュー用の URL を開く 15 / 32
Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる!便利! 16 / 32
Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる!便利! プレビューするまでが少し面倒だな… 1. ターミナル開いてプレビューコマンド実行 2. VS Code
と(プレビューが表示された)ブラウザの 位置を調整して 3. 執筆中のコンテンツを選択して… 17 / 32
もっと楽したい 18 / 32
もっと楽したい VS Code の拡張を作って VS Code 内で プレビューできるようにしよう! 19 /
32
VSCode Zenn Editor 20 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー 21 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー コンテンツを一覧表示 22 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー コンテンツを一覧表示 コンテンツのテンプレート生成 23 / 32
編集中のコンテンツをプレビュー 24 / 32
編集中のコンテンツをプレビュー 拡張ないとき 1. ターミナル開いてプレビューコマンド実行 2. VS Code と(プレビューが表示された)ブラウザの 位置を調整して 3.
執筆中のコンテンツを選択して… 拡張あるとき 1. プレビューボタンを押す 25 / 32
コンテンツを一覧表示 26 / 32
コンテンツを一覧表示 タイトルから編集する原稿を 選択できる 27 / 32
コンテンツのテンプレート生成 (時間あればデモ) 28 / 32
インストール方法 1. Zenn CLI をインストール 2. VS Code のマーケットプレースで「Zenn Editor」を
検索 29 / 32
まとめ ナレッジを Zenn にためよう 社外秘情報は公開しないように注意 VSCode Zenn Editor 使ってみてください! 30
/ 32
不具合報告、新機能のアイデアなどお待ちしております! https://github.com/negokaz/vscode-zenn-editor/discussions 31 / 32
ライセンス表示 スライド中の絵文字 Twemoji” by Copyright 2021 Twitter, Inc and other
contributors is licensed under CC-BY 4.0 https://creativecommons.org/licenses/by/4.0/ 32 / 32