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

Slide 32

Slide 32 text

ライセンス表示 スライド中の絵文字 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