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.2k
Using Akka Cluster for a payment service
negokaz
7
5.1k
Other Decks in Programming
See All in Programming
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
Improving my own Ruby thereafter
sisshiki1969
1
160
🔨 小さなビルドシステムを作る
momeemt
4
690
Cache Me If You Can
ryunen344
2
3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
590
Namespace and Its Future
tagomoris
6
700
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Speed Design
sergeychernyshev
32
1.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
62k
Fireside Chat
paigeccino
39
3.6k
It's Worth the Effort
3n
187
28k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Balancing Empowerment & Direction
lara
3
620
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Code Review Best Practice
trishagee
71
19k
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