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
6.5k
Using Akka Cluster for a payment service
negokaz
7
4.9k
Other Decks in Programming
See All in Programming
Formの複雑さに立ち向かう
bmthd
1
720
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
ARA Ansible for the teams
kksat
0
150
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to train your dragon (web standard)
notwaldorf
90
5.8k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
RailsConf 2023
tenderlove
29
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Faster Mobile Websites
deanohume
306
31k
Designing for humans not robots
tammielis
250
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
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