👋

Visual Studio CodeでZennの記事を作成するあれこれ全部まとめ

2021/12/04に公開

2件

1. 概要

ZennはGitHubリポジトリ連携し、ローカルの好きなエディタで編集してコンテンツを作成するということができる。
更にエディタはVisual Studio Code(以下VS Code)を使うと便利そう。
- プレビューもVS Code上でやる。
- 画像貼り付けもVS Code上でやる。
Zenn上にもいろいろ関連する記事がたくさんあるが、なんかたくさんあるので自分用にまとめる。

2. GitHubの登録

何はともあれGitHubは登録しておく。

3. GitHubでリポジトリ作成＋ローカルにクローン

Zennのコンテンツ用にリポジトリを作ります(下記手順ではzenn-contentという名前です)。更に、ローカルにクローンまでしておきます。

4. Zenn CLIのインストール

ローカルでZennの記事を書くのに必要なZenn CLIをインストールする。
ひとまず公式の記事があるので、その通りに設定する。

※ここでは、下記の内容を実施することになる。

リポジトリ作成
GitHubとZenn連携
Node.jsインストール
Zenn CLIインストール

Zenn CLIインストールの部分がアバウトな気がしたので補足

手順だといきなりnpmコマンドを打つとかなってるけど、いや何のターミナルで打つん？
どうやらWindowsのコマンドプロンプトでもPowerShellでもいけるっぽいけど、手順的にはBashっぽいので、この時点でインストール済みであろうGit Bashを起動する。
自分のケースだとd:\Documents\Git\zenn-content\というディレクトリを作っており、このzenn-contentというディレクトリがGitHub上でzennと連携されている。なのでこのディレクトリにひとまず移動する。
cd /d/Documents/Git/zenn-content/
次に、そのディレクトリをnpmで管理するプロジェクトディレクトリして初期化をする。npmはNode Package Managerの略(後付けらしいが)で、JavaScript系のパッケージを管理するツール。zenn-cliはnpmのパッケージとして提供されているから、まずnpm使える状態にしましょう…てコト？次のコマンドを打つとだらだらっと応答があります。そのディレクトリにjsonファイルを作ってるそうな。
npm init --yes
実際にzenn-cliのインストールを行う。次のコマンドを打つとだらだらっと応答があります。コマンド打った直後数秒何も応答が無いから何も起こってないのかと思った。
npm install zenn-cli
Zenn用のセットアップを行うために次のコマンドを打つ。npxは、インストールされていないパッケージのコマンドを実行したりするものらしい。知らんけど。
npx zenn init
応答はこんな感じ。自分の環境ではすでにREADME.mdがあったのでスキップされたよう。

実際のディレクトリには、.gitignoreファイルとかarticlesディレクトリができたりしてます。

5. Visual Studio Code関連

以下VS Codeと表記します。

5.1. VS Codeのインストール

何はともあれVS Codeのインストール。
下記の記事全部の設定をやる必要はないが、ひとまずインストールと日本語化くらいは。

5.2. Visual Studio Codeの拡張

Zennの記事をMarkdownで書くにあたっての便利な拡張

5.2.1. Paste Image

クリップボードにコピーした画像のリンクをVS Code上で貼り付けられる。実際の画像はそのリンクを張り付けたファイルと同じ階層に保存されているが、それだとZennのルールに合わないので設定を変える。

手順

拡張機能検索欄でpaste imageと検索して出てきたやつをインストールする。
※その2個下にあるPaste Imageは「個人のテスト用だからダウンロードせんといて」って書いてある。
デフォルトの設定だと、リンクを張り付けたファイルと同じ階層に画像が生成されてしまう。これをZenn公式の記事で説明されている階層ルールの通りに設定を変える。
.
├articles
│ └example-article-1.md　←デフォルトだとこのファイルと同じ階層に画像生成
└images
　└example-article-1　←記事のslugと同じ名前のディレクトリを作る
　　└image.png　←ここに画像が生成されるように変える
Paste Imageの設定を開く。
ユーザー単位での設定でもいいんだけど、自分はあらかじめZenn用のフォルダをワークスペースとして開いておいたので、ワークスペースに対して設定を変える。
※ユーザー単位で設定しちゃうと、例えばこのZennの記事編集以外の用途でPaste Imageを使った時に、Zenn用のディレクトリ設定で画像生成されちゃう。
Paste Image:Base Pathを${currentFileDir}/..に変更する。これで貼り付けるリンクのベースパスをmdファイルの1階層上にする。
Paste Image:Insert Patternの${imageFilePathの前に/を入れる。Zennのルールではパスの記述が/から始まる必要があるため。
Paste Image:Pathを${currentFileDir}/../images/${currentFileNameWithoutExt}に変える。これで実際の画像が保存されるパスをimages/記事のslugと同じディレクトリ名/に変えることができる。
実際に画像をコピペするとこんな感じになる。

こちらの方の記事がすごく参考になりました。

Paste Imageの説明ページも参考になりました。

5.2.2. Zenn Editor

VS Code内でプレビューができたり、新規記事の作成などができる拡張機能です。便利なので入れておきましょう。便利なものを作っていただけて感謝。

5.2.3. Markdown All in One

VS CodeでMarkdownを書くにあたっていろいろ便利な機能を追加してくれる拡張機能。

5.2.4. Excel to Markdown table

Excelから表をコピーしてVS Codeに貼り付ける時、Markdown形式で貼り付けられるようになる。Google Workspaceのスプレッドシートからでも同様に貼り付け可能。

天順

拡張機能のアイコンをクリックし、検索欄でexcel to markdown tableと検索し、候補に出てきたExcel to Markdown tableをインストールする。
Excelやスプレッドシートから表をコピーする。
VS Code上でShift + Alt + Vで、Markdown形式で貼り付けられる。
※ちょっと1行目がヘッダー行になるのを忘れてた。
※コマンドパレットからExcel to Markdown tableを実行することでも貼り付け可能。

6. 実際に記事を作成する

6.1. 記事を書く前の準備

手順

Zennコンテンツ用のフォルダにimagesフォルダを作る。
※articlesとbooksフォルダは、Zenn CLIで初期化した時に作られているはず。
VS CodeでZenn用のワークスペースを開く。
※ワークスペースには、GitHubからクローンしたZennコンテンツ用のフォルダが含まれている状態
Zenn Editorの拡張機能を入れていることにより、VS CodeのサイドバーにZENN CONTENTSというパネルが表示されている。このパネルの「Create New Article」のアイコンをクリックする。
articlesフォルダ配下にmdファイルが作成される。
※画像だと2つ表示されているが、ワークスペースとZenn Editorのそれぞれで表示されているだけで、実際のファイルは1つ。
ファイル名には一意のslugがつけられているが、変えてもいい(最終的にWeb上で記事を見る時にこのslugがURLに含まれる)。
mdファイルの先頭にある、記事の設定を入力する。
- title：記事のタイトルを入力する。
- emoji：記事のアイキャッチ絵文字。デフォルトで入っているが変えられる。ちなみにWindowsのMS-IME環境で絵文字を入力する時はWindows + .(ピリオド)
- type：techかidea
- topics：最低1つは必要。ZennをWebで書く時と違って候補とかは出ないので、ちゃんと存在するやつを小文字で書くこと。
- published：記事をアップロード(GitHubリポジトリにプッシュ)したとき、trueだと記事が公開状態でアップロードされ、falseだと記事が下書き状態でアップロードされる。

6.2. 記事を書く

手順

記事の中身を書く。
クリップボードから画像を貼り付ける時はCtrl + Alt + Vで貼り付けられる(Paste Imageの機能)。
mdファイル内には/images/[記事slug名のフォルダ]/[画像ファイル名]という書式でリンクが貼られる。
また、実際の画像もimagesフォルダ配下に生成されている。
※こうならない場合は、Paste Imageの設定が間違っている。
記事のプレビューをしたい場合は、右上のほうにあるZenn Editor: Open Previewのアイコンをクリックすると、mdファイルタブの右側にプレビューが表示される。
mdファイルを保存しないとプレビューには反映されないようなので注意。

6.3. 記事をアップロードする

手順

VS Code左端のアクティビティバーでソース管理のアイコンをクリックする。「変更」セクションに、作成したmdファイルと画像ファイルが表示されているはずなので、「すべての変更をステージ」アイコンをクリックしてファイルをステージング状態にする。
コミットコメントを入力し、コミットアイコンをクリックする。
続けて「変更の同期」というボタンが出るので、それをクリックする。これでGitHubリポジトリ上にファイルがアップロードされる(＝Zennに記事が投稿される)。

※自分の環境だとボタンが出るんですけど、もしかしたら初めてVS Code上で実行するときは出てなかったかも…。その時はメニューからプッシュでもいけるはず。
Zennのマイページのところでデプロイを確認すると、変更した内容が表示されている。
記事一覧で確認すると実際に記事が作成されている。