📕

(身内用)zenn-cliを用いてローカル環境で執筆するためのTips

2022/02/01に公開

理想の執筆環境を整える

まずは下準備から。快適な執筆環境として次のような状態を目指す。要件としては次の3つ

各要件のための設定手順

各要件を達成するための具体的な手順は次のとおり。公式に提供されているツールを使うことで8割型達成できてしまうので、つくづく出来が良いと思う。

・要件1の達成

こちらの記事を参考に、設定を行う。使い方も載ってる。
https://zenn.dev/zenn/articles/install-zenn-cli

・要件2の達成

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

公式からプレビュー用の拡張機能が提供されている。こちらの拡張機能を使用することで下画像のような二窓編集が可能。

下の記事を参考に、VSCodeのAutoSaveの設定をafterDelayにしておく。ディレイ間隔は自由に設定できるため基本的には各人の好みで良いが、とりあえずはデフォルトの1000m秒から100m秒に修正しておくと良い
https://www.javadrive.jp/vscode/setting/index2.html

・要件3の達成

下の記事を参考に、設定を行う。この作業はプロジェクトオーナーのみで良い。
https://zenn.dev/zenn/articles/connect-to-github

・任意: エイリアスの設定

素早く記事執筆に取り掛か取り掛かかれるよう作成したエイリアスが紹介されていた。頻繁に使う場合、設定しておいて損はなさそうである
https://zenn.dev/ryuu/articles/alias-of-zenncli

執筆

続いてcli環境での執筆についての説明になる

基本的な書き方

markdown記法を使う。さらにZenn特有の記法がいくつか用意されている。こちらの公式記事を参照し、積極的な活用をお薦めする。
https://zenn.dev/zenn/articles/markdown-guide#zenn-独自の記法

画像の挿入

Zennの画像の挿入はクリップボードのコピペで挿入することが出来て便利だったが、zenn-cliを用いたローカルの執筆環境ではこの方法は使えない。
代替手段として公式に用意された専用のアップローダーから画像挿入用のURLを取得することができる。
https://zenn.dev/dashboard/uploader

共同編集

共同編集するにあたってはgitとgithubを使いこなす必要がある。gitの基本的な使い方については各自記事を見て調べてほしい。
とはいえ以後出てくるコマンドを知っておけば最低限は使えるレベルではある。

執筆手順

以上を踏まえた上で、この手順に沿って行ってほしい

issueを立てる

まず初めに改善点が見つかったら、都度githubでissueを立てよう。その際は簡潔な理由も添えてあると望ましい。尚、issueの立て方は割愛する
全体ミーティングのタイミングで各issueを評価・議論し、優先順位が高いものから手をつけていってもらう。

1. branchを切る

まず初めにmainから新たなブランチを切る(作る)

terminal
#自分がmainブランチいるかを確認する
git branch 

# mainブランチを最新の状態に更新する
git pull

#ブランチを切る。ブランチの名前は英語で
git checkout -b new-branch

2. 作業し終えたら、commitする

terminal
#ステージングしたいファイル/ディレクトリを追加
git add file

#正しくステージングされたか確認
git status

#必要があれば差分を確認
git diff

#コミット。メッセージは日本語で良い。
git commit -m "メソッドについての記述を追加しました"

3. pushする

作業を終えたらそのbranchをpushする。pushすることでローカルで行った作業がgithubにも反映される。

terminal
git push origin [pushしたいブランチ名]

4. プルリクエストを送る

githubからプルリクエストを行う。やり方は各自調べる

おまけ: 記事の限定公開

元々Zennに限定公開機能は提供されていないが、CloudRunでZenn-Cliのプレビューを画面をホストし擬似的に限定公開を実現する方法がある。Dockerfileを使っているおかげで、手間がかなり省かれており記事製作者の方に感謝。
https://zenn.dev/e_koma/articles/20210104-zenn-preview

Discussion