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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

あなた誰？根来和輝 Negoro Kazuki 仕事某SIer Scala/Akka/OSS開発趣味楽するためのツールを作る @negokaz negokaz 2 / 32

Slide 3

Slide 3 text

過去作った VS Code の拡張機能 Live Server Preview installs installs 452k 452k HTML ファイルのプレビューを実現ファイルを編集するとプレビューにリアルタイム反映 OpsScriptMD installs installs 96 96 サーバーサイドの運用作業の半自動化を目指した拡張機能 Markdown のプレビュー画面でコードブロックを実行 3 / 32

Slide 4

Slide 4 text

個人のナレッジどこにためてますか？脳内社内 Wiki ブログ ... 4 / 32

Slide 5

Slide 5 text

今日オススメしたいサービス https://zenn.dev/ 5 / 32

Slide 6

Slide 6 text

Zenn とは？ 6 / 32

Slide 7

Slide 7 text

Zenn にナレッジをためると… 必要なときに自分のナレッジを簡単に参照できるチームメンバーへのナレッジの共有も簡単他のエンジニアからサポートしてもらえるかもしれない 7 / 32

Slide 8

Slide 8 text

過去頂いたサポート 8 / 32

Slide 9

Slide 9 text

Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ（個人の感想です） 9 / 32

Slide 10

Slide 10 text

Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ（個人の感想です） GitHub で記事や本の原稿を管理できる 10 / 32

Slide 11

Slide 11 text

GitHub と連携すると嬉しいこと記事や本の原稿は Markdown ファイルなので使い慣れた VS Code で記事が書ける！ textlint プラグインで簡単なミスを自動チェックしたり自分なりに環境を工夫しながら執筆できる Git に履歴が残るため過去記事のメンテが気軽にできる 11 / 32

Slide 12

Slide 12 text

Zenn と GitHub を連携する簡単 2 ステップ 1. 記事や本のソースを格納するリポジトリの作成 2. Zenn のダッシュボードから連携するリポジトリを指定 https://zenn.dev/zenn/articles/connect-to-github 12 / 32

Slide 13

Slide 13 text

記事公開までの流れ（GitHub と連携した場合） 13 / 32

Slide 14

Slide 14 text

公開前に仕上がりを確認したい公式の Zenn CLI を使うと記事や本の仕上がりをローカル環境で確認できる https://zenn.dev/zenn/articles/zenn-cli-guide 14 / 32

Slide 15

Slide 15 text

Zenn CLI でプレビューを開く方法 ① ターミナルでコマンドを実行 ❯ zenn preview Preview: http://localhost:8000 ② ブラウザでプレビュー用の URL を開く 15 / 32

Slide 16

Slide 16 text

Zenn CLI を使ったときに感じたことローカルでサクサク執筆できる！便利！ 16 / 32

Slide 17

Slide 17 text

Zenn CLI を使ったときに感じたことローカルでサクサク執筆できる！便利！プレビューするまでが少し面倒だな… 1. ターミナル開いてプレビューコマンド実行 2. VS Code と（プレビューが表示された）ブラウザの位置を調整して 3. 執筆中のコンテンツを選択して… 17 / 32

Slide 18

Slide 18 text

もっと楽したい 18 / 32

Slide 19

Slide 19 text

もっと楽したい VS Code の拡張を作って VS Code 内でプレビューできるようにしよう！ 19 / 32

Slide 20

Slide 20 text

VSCode Zenn Editor 20 / 32

Slide 21

Slide 21 text

VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビュー 21 / 32

Slide 22

Slide 22 text

VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビューコンテンツを一覧表示 22 / 32

Slide 23

Slide 23 text

VSCode Zenn Editor 編集中のコンテンツ（記事・本）をプレビューコンテンツを一覧表示コンテンツのテンプレート生成 23 / 32

Slide 24

Slide 24 text

編集中のコンテンツをプレビュー 24 / 32

Slide 25

Slide 25 text

編集中のコンテンツをプレビュー拡張ないとき 1. ターミナル開いてプレビューコマンド実行 2. VS Code と（プレビューが表示された）ブラウザの位置を調整して 3. 執筆中のコンテンツを選択して… 拡張あるとき 1. プレビューボタンを押す 25 / 32

Slide 26

Slide 26 text

コンテンツを一覧表示 26 / 32

Slide 27

Slide 27 text

コンテンツを一覧表示タイトルから編集する原稿を選択できる 27 / 32

Slide 28

Slide 28 text

コンテンツのテンプレート生成（時間あればデモ） 28 / 32

Slide 29

Slide 29 text

インストール方法 1. Zenn CLI をインストール 2. VS Code のマーケットプレースで「Zenn Editor」を検索 29 / 32

Slide 30

Slide 30 text

まとめナレッジを Zenn にためよう社外秘情報は公開しないように注意 VSCode Zenn Editor 使ってみてください！ 30 / 32

Slide 31

Slide 31 text

不具合報告、新機能のアイデアなどお待ちしております！ https://github.com/negokaz/vscode-zenn-editor/discussions 31 / 32