$30 off During Our Annual Pro Sale. View Details »

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

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

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

Kazuki Negoro

February 04, 2022
Tweet

More Decks by Kazuki Negoro

Other Decks in Programming

Transcript

  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