Zenn なるものを試してみた

0. はじめに

巷で話題の Zenn というプログラマ向け情報共有サイト (公式サイトは こちら) を試してみたので、専用CLIツール導入までのメモをここに残しておく

1. 特徴

• Qiita と違い、投げ銭機能がある
• 掲載は、マークダウン形式だけではなく、本やスクラップ形式の投稿ができる
• 専用のCLIツールがある → 好きなテキストエディタで編集可能

　　何といっても、この機能が最大の目玉だと思う
　　GitHub連携機能もあり、指定したレポジトリと同期させられる
　　しかも、Public・Private問わずというのはスゴい

2. 登録

登録は、Googleアカウントのみでできるので手間は無い

3. ローカル作業の準備

3.0 Node.js のインストール

今回は nvm で Node.js を入れて使用した

コンソールにて

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
$ source ~/.bashrc

nvm コマンドが実行できればOK

次に npm (Node.js) をインストール
nvm ls-remote から好きなバージョンを選択する

$ nvm install v○○.○○.○○
$ nvm use v○○.○○.○○
$ node --version
> v○○.○○.○○

なお、公式によるとバージョンによっては互換性の問題がある模様

---

以降の手順は公式サイトの導入ページに記載されているので、すぐにできるはずだ。

3.1 Zenn CLI のインストール

任意の場所に作業用ディレクトリを作成し、

$ npm init --yes # プロジェクトをデフォルト設定で初期化
$ npm install zenn-cli # zenn-cliを導入

これだけで、作業環境の構築は終わり

4 Zenn CLI を使ってみる

使い方

$ npx zenn help

Command:
  zenn init         コンテンツ管理用のディレクトリを作成. 初回のみ実行
  zenn preview      コンテンツをブラウザでプレビュー
  zenn new:article  新しい記事を追加
  zenn new:book     新しい本を追加
  zenn -v           zenn-cliのバージョンを表示
  zenn help         ヘルプ

  👇詳細
  https://zenn.dev/zenn/articles/zenn-cli-guide

4.0 初回実行時のコマンド

$ npx zenn init

4.1 articles について

article は Qiita の記事にかなり近い存在であり、md ファイルに記述することで記事を作る
記事一枚と、一つの md ファイルが対応している

.
└─ articles
   ├── example-article1.md
   └── example-article2.md

4.1.0 記事を作成する

オプション	内容
--slug	記事のファイル名・リンクを引数で指定（「a~z」「0~9」「-」で 12~50字)
--title	タイトルを指定（tech: 技術記事 / idea: アイデア）
--type	記事のジャンル指定
--emoji	絵文字を指定

slug オプションを使わないとファイル名がランダム生成となってしまい、ファイル管理が大変になるので要注意

実行すると、以下の内容が書かれたテンプレートが出現する
文書のJson形式のヘッダーで認識しているようだ

test-article.md

$ ---
title: "テスト"
emoji: "🖥" # 記事に付ける絵文字の指定（一つのみ）
type: "tech" # tech: 技術記事 / idea: アイデア
topics: [""] # ["a", "b", ...] の形式で書く
published: false # true: 公開 / false: 非公開
---

4.2 本 について

├─ articles
└─ books
   └── 本のスラッグ
       ├── config.yaml # 本の設定
       ├── cover.png　# カバー画像（JPEGかPNG）
       └── チャプターのスラッグ.md # 各チャプター

articles と同様にコマンド一つで本は作成できる
本では config.yaml が生成され、そこで順番等を管理する
chaptersの項目を書かずにファイル名を 1.<任意の名前>.md 2.<任意の名前>.md のようにすれば、その数字順に並んでくれるのでローカルでのファイル順を気にする人にも優しい作りになっている

config.yaml

title: "本のタイトル"
summary: "本の紹介文"
topics: ["zenn"] # トピック（5つまで）
published: true # falseだと下書き
price: 0 # 有料の場合200〜5000
chapters:
  - example1 # チャプター1
  - example2 # チャプター2
  - example3 # チャプター3
toc_depth: 0

プレビューを表示

localhost としてサーバを起動すれば、こんな感じのプレビューが見えるようになる
md ファイルを保存するたびに自動でビューが更新されるし、間違っていることがあれば警告してくれる

---

ローカル開発も特に手間もなく始められるのでスゴい便利
Zenn のマイページで指定したブランチに push するだけで記事も自動更新してくれる
published の値を変更すれば、マイページにアクセスすることなく公開できるのもポイントが高い
Qiita のようにブラウザを開かなくても作業できるので更新頻度を上げれそう
今後は Zenn への移行も考えているので、よかったら見ていってください ( リンク )