Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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