コマンド1発でZennの記事を書きはじめるまでの歩み
この記事のゴール
なんとかコマンド1発でここまではたどり着けました！！
背景
週1位のペースで記事投稿する事を理想に掲げているんですが、全然投稿できていない状況がはや数ヶ月。
記事を書くより優先したい事があったりもしたけれど、それはいいわけで
- 月1位は絶対に投稿する時間はあったはず
- 書きたいネタは溜まっていく一方
- 溜まっているネタの、フレッシュだった記憶は既に{opacity: 0.1;}位透明に…
そんな時に、以下の記事に出会いました。
CLIを使って、エディタで記事を書き、GitHubにpushするだけで投稿できてしまうという内容
早速取り入れようと思いますが、せっかくならパッと記事作成が開始できるように、コマンド1発でエディタとプレビュー画面が起動して、記事を書く入口までは最速でたどり着く事をゴールにしたいと思います。
そして、実際にやってみた過程を一つの記事として残す事で、週1記事投稿のはじめの一歩にしたいと思います。
環境
MacBook Air M2 14.5（sonoma)
nodejs v22.5.1
cursur 0.38.1
モニター解像度 2560 * 1440
環境構築
- ZennとGitHubの連携
- Zenn CLIのインストール
記事を作成してみる
- コマンドを実行して記事の雛形を作成する
npx zenn new:article
- 記事を書く
利用しているエディタで.mdファイルを編集します。
zenn
├── articles
│ └── xxxxxxxxxxxxx.md このファイルを編集していきます。
雛形で作成された.mdファイルを編集していきます。
---
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書きに保存されます。）
---
ここから本文を書く
マークダウンでの書き方は以下を確認してください。
記事のプレビュー
npx zenn previewを実行して、http://localhost:8000/を開くと、
以下画像の様な画面でプレビューが見られます。
- 記事を公開する
公開する.mdファイルをGitHubにpushします。
git add 作成した.mdファイル
git commit -m '任意のコミット名'
git push origin main'
コマンド1発でエディタとプレビュー画面を表示する
以下内容をシェルスクリプトとして実行する事で、
画面を左右に2分割してエディタとZennのプレビュー画面を開く事ができます。
#!/bin/bash
# ポート8000が使用中か確認し、使用中であればそのプロセスを終了する
PORT=8000
PID=$(lsof -ti tcp:$PORT)
if [ ! -z "$PID" ]; then
echo "Port $PORT is in use. Killing process $PID."
kill -9 $PID
fi
# Zennのディレクトリに移動
cd $HOME/zenn
# Cursorでディレクトリを開く
open -a "Cursor" .
# Zennプレビューを実行する
npx zenn preview &
# 少し待つ
sleep 0.2
# プレビューURLをChromeで開く
open -na "Google Chrome" --args --new-window "http://localhost:8000"
# ディスプレイの解像度を取得
SCREEN_INFO=$(displayplacer list | grep 'Resolution:' | head -n 1)
SCREEN_WIDTH=$(echo $SCREEN_INFO | sed -n 's/.*Resolution: \([0-9]*\)x[0-9]*/\1/p')
SCREEN_HEIGHT=$(echo $SCREEN_INFO | sed -n 's/.*Resolution: [0-9]*x\([0-9]*\).*/\1/p')
HALF_WIDTH=$((SCREEN_WIDTH / 2))
# AppleScriptを使ってウィンドウをタイル表示にする
osascript <<EOF
tell application "System Events"
-- Cursorウィンドウを取得してサイズと位置を設定
tell application "Cursor" to activate
set cursorPosition to {0, 0}
set cursorSize to {$HALF_WIDTH, $SCREEN_HEIGHT}
try
set position of window 1 of application process "Cursor" to cursorPosition
set size of window 1 of application process "Cursor" to cursorSize
on error
log "Failed to set Cursor window position or size"
end try
-- Google Chromeウィンドウを取得してサイズと位置を設定
tell application "Google Chrome" to activate
set browserPosition to {$HALF_WIDTH, 0}
set browserSize to {$HALF_WIDTH, $SCREEN_HEIGHT}
-- すべての実行中のプロセスをループして、Chromeのウィンドウを見つける
repeat with proc in (every process whose name is "Google Chrome")
try
set position of window 1 of proc to browserPosition
set size of window 1 of proc to browserSize
exit repeat
on error
-- エラーが発生した場合は次のプロセスに移動
end try
end repeat
end tell
-- 前面にアプリケーションを表示
tell application "Google Chrome" to activate
tell application "Cursor" to activate
EOF
aliasを設定する
最後にaliasを設定してさらに簡単に記事を書き始められるようにします。
※これまでaliasって設定したことなかったんですが、こんなに簡単に登録できるならもっと早く使えば良かったです。
aliasの設定方法
以下コマンドで登録したいaliasを記述するだけ。 ← PC再起動でaliasが消えてしまったので修正しました。
-
以下コマンドを
~/.zshrcor~/.bash_profilに追記。open_zenn.sh# alias 実行したいコマンド名=shell scriptのpath alias zen=~/scripts/zenn/open_zenn.sh※私の場合作成したshell scriptを以下場所に保存してあります。
~/scripts/zenn/open_zenn.sh -
source ~/.zshrcで反映させる
最後に
なんとかコマンド1発で記事を書き始めるところまではたどり着く事ができました。
shellScriptを書いてみたり、aliasを設定してみたりと新しい学びも多く、
とても有意義な時間になりました。
正直shellScriptには課題ものこされている(解像度が固定とか)のですが、
一旦この記事はここまでとしたいと思います。
今後週1で記事を書けるかどうかはわかりませんが、
少なくともスタートラインにはすぐに立てるようになったので、
小さなtipsでもいいので、極力記事を書いてアウトプットしていこうと思います。
Discussion