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.3k
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
7.4k
Using Akka Cluster for a payment service
negokaz
7
5.2k
Other Decks in Programming
See All in Programming
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
理論と実務のギャップを超える
eycjur
0
180
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
220
Cursorハンズオン実践!
eltociear
2
1.2k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
490
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
180
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Agile that works and the tools we love
rasmusluckow
331
21k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
How GitHub (no longer) Works
holman
315
140k
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