Zenn
😃

zenn-cli をさらに簡単に使えるようにしてみました。

2020/09/28に公開
Zenn
tech

Zenn は、zenn-cli でGithub と連携させる方法も用意されています。
GitHubリポジトリでZennのコンテンツを管理する
※ この記事の執筆時点ではこれらはベータ版です。

この記事もそれを使って書いています。

zenn-cliはコマンドなので簡単なんですが、さらに少し楽に出来るようにしてみました。

なお、macOS しかサポートしていません。
(なるべくGNUでも動く書き方をしているので、Linuxでも動くかも知れませんが試していません。)
make, perl が入っていることが前提です。

何が出来るのか

  • 記事, 本の一覧を表示出来る
    • ファイル名とタイトルが一覧表示されます。
  • 記事, 本が少し楽に作成できる
    • ファイル 名を指定するのが簡単に出来る
  • Preview をコマンドラインから開ける (Browserが開きます)
  • emojiをコマンドラインから探せる (terminal上で操作)

といった痒いところに手が届くかも知れないよりスムーズに書けるようになる俺得ツールです。

事前準備

以下の手順通りにセットアップを行います。
GitHubリポジトリでZennのコンテンツを管理する
記事内で続く zenn-cliの導入も行います。

zenn-cliが使えることを確認します

% npx zenn --help

npx zenn init も行なっておいてください

導入

いよいよ zenn-cli をさらに簡単にします。
Script言語等でも良かったのですが、何となくMakeで作りました。(Goを書くときがあるからかも)

以下の Makefile を ご自身のzenn contents の local repository に入れます。

コピペだとタブが崩れる恐れがあるので、Gist に置いておきます。
こちら から落としてLocal repository に入れてください。

私のlocal repositoryの例。

./zenn-content/
├── Makefile   # <=
├── README.md
├── articles
├── books
├── node_modules
├── package-lock.json
└── package.json

使い方

では、一通り行なってみます。

Help

% make [help]

記事を書く

作成

ファイル名を zenn-cli_easy_commands.md とする例

% SLUG=zenn-cli_easy_commands make article
📄zenn-cli_easy_commands.md created.

記事を書く際に emoji が必要なので、それがterminalでもさくっと探せるようになります。

make emoji

or

EMOJI=<keyword> make emoji


(これではなく、文字列を打って変換n回で emoji を見つける普通のやり方でももちろん出来ます。やりやすい方で)

そして記事の内容を書きます。

VSCode で書く場合

% code articles/zenn-cli_easy_commands.md

途中まで書いたら以下のpreview を起動してBrowser で確認しながら書くのも良いと思います。

Preview

簡単にbrowserまで開かれるようになります。(Local server は Background で起動します)
ファイルを保存すれば、Browser のreload は不要で更新内容がそのまま反映されます。

% make preview

記事の作成・編集が終わったらPreview を閉じます。
これもコマンドで実行できます。

% make preview_close

List

ファイル名とタイトルの一覧がみたい時は以下です。

% make [article_list|book_list]

例:

% make list_articles
./articles/2cd01d54a5fe801493dd.md:
    title: "Docker MySQL でLOAD_FILE()を使うとNULLになる問題の解決方法。"
./articles/zenn-cli_easy_commands.md:
    title: "zenn-cli をさらに簡単に使えるようにしてみました。"

% make list_books
./books/test_book_k-oguma/:
    title: "This is a test book"

最後に

あとはGithub に Commit して 自動deploy で完了です。

とこんな感じで少しだけですが楽になるようにしてみました。
テンプレートやスニペットなんかはこれに機能追加をするのではなく、普段使い慣れているEditor やIDE で用意していれば良いと思っています。
ですから zenn-cli 特有なところを少し楽にしただけなので人によってはあまり効果的ではないと思いますが、少しでも楽になりそうなら使ってみてください。

勘の良い方はお察しかも知れませんが、zenn-cli で記事を書くネタついででした。
※ tech なのか idea なのか微妙なところですが、とりあえず tech で投稿しました。

Discussion