VS Code を使って快適にナレッジを Zenn にためる

VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
#vscodejp

1. VS Code を使って快適に ナレッジを Zenn にためる 1 / 32
2. あなた誰？ 根来 和輝 Negoro Kazuki 仕事 某SIer Scala/Akka/OSS開発 趣味 楽するためのツールを作る @negokaz negokaz 2 / 32
3. 過去作った VS Code の拡張機能 Live Server Preview installs installs 452k 452k HTML ファイルのプレビューを実現 ファイルを編集するとプレビューにリアルタイム反映 OpsScriptMD installs installs 96 96 サーバーサイドの運用作業の半自動化を目指した拡張機能 Markdown のプレビュー画面でコードブロックを実行 3 / 32
4. 個人のナレッジどこにためてますか？ 脳内 社内 Wiki ブログ ... 4 / 32
5. 今日オススメしたいサービス https://zenn.dev/ 5 / 32
6. Zenn とは？ 6 / 32
7. Zenn にナレッジをためると… 必要なときに自分のナレッジを簡単に参照できる チームメンバーへのナレッジの共有も簡単 他のエンジニアからサポートしてもらえるかもしれない 7 / 32
8. 過去頂いたサポート 8 / 32
9. Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ （個人の感想です） 9 / 32
10. Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ （個人の感想です） GitHub で記事や本の原稿を管理できる 10 / 32
11. GitHub と連携すると嬉しいこと 記事や本の原稿は Markdown ファイルなので 使い慣れた VS Code で記事が書ける！ textlint プラグインで簡単なミスを自動チェックしたり 自分なりに環境を工夫しながら執筆できる Git に履歴が残るため過去記事のメンテが気軽にできる 11 / 32
12. Zenn と GitHub を連携する 簡単 2 ステップ 1. 記事や本のソースを格納するリポジトリの作成 2. Zenn のダッシュボードから連携するリポジトリを指定 https://zenn.dev/zenn/articles/connect-to-github 12 / 32
13. 記事公開までの流れ （GitHub と連携した場合） 13 / 32
14. 公開前に仕上がりを確認したい 公式の Zenn CLI を使うと記事や本の仕上がりを ローカル環境で確認できる https://zenn.dev/zenn/articles/zenn-cli-guide 14 / 32
15. Zenn CLI でプレビューを開く方法 ① ターミナルでコマンドを実行 ❯ zenn preview Preview: http://localhost:8000 ② ブラウザでプレビュー用の URL を開く 15 / 32
16. Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる！便利！ 16 / 32
17. Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる！便利！ プレビューするまでが少し面倒だな… 1. ターミナル開いてプレビューコマンド実行 2. VS Code と（プレビューが表示された）ブラウザの 位置を調整して 3. 執筆中のコンテンツを選択して… 17 / 32
18. もっと楽したい 18 / 32
19. もっと楽したい VS Code の拡張を作って VS Code 内で プレビューできるようにしよう！ 19 / 32
20. VSCode Zenn Editor 20 / 32
21. VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビュー 21 / 32
22. VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビュー コンテンツを一覧表示 22 / 32
23. VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビュー コンテンツを一覧表示 コンテンツのテンプレート生成 23 / 32
24. 編集中のコンテンツをプレビュー 24 / 32
25. 編集中のコンテンツをプレビュー 拡張ないとき 1. ターミナル開いてプレビューコマンド実行 2. VS Code と（プレビューが表示された）ブラウザの 位置を調整して 3. 執筆中のコンテンツを選択して… 拡張あるとき 1. プレビューボタンを押す 25 / 32
26. コンテンツを一覧表示 26 / 32
27. コンテンツを一覧表示 タイトルから編集する原稿を 選択できる 27 / 32
28. コンテンツのテンプレート生成 （時間あればデモ） 28 / 32
29. インストール方法 1. Zenn CLI をインストール 2. VS Code のマーケットプレースで「Zenn Editor」を 検索 29 / 32
30. まとめ ナレッジを Zenn にためよう 社外秘情報は公開しないように注意 VSCode Zenn Editor 使ってみてください！ 30 / 32
31. 不具合報告、新機能のアイデアなどお待ちしております！ https://github.com/negokaz/vscode-zenn-editor/discussions 31 / 32
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