🤖

コマンド1撃でZennの執筆を始める

2024/03/23に公開

Zenn

Raycast

yabai

tech

はじめに

前回ZennCLIをちょっと便利に使うMakefileについて記事にしました。
私がZennの記事を書くときはまずVSCodeを開き、次にZennのPreviewサーバーを立ち上げ、ブラウザでlocalhost:8000を開き、GitClientのForkを立ち上げるという作業をしています。毎度同じ作業なので今回はコマンド一発でここまでやってやろうという魂胆です。

動画のようにraycastにzennと打ち込むだけで一気にZennの執筆準備ができました。

今回利用するもの

・raycastのScript command
・yabai
・jq
・Makefile
・ZennCLI

特にraycastやyabaiとの細かい設定には踏み入れないので、これらについて詳しく知りたい方は公式のドキュメントや他の方が解説してくださっている記事にあたってみてください。

raycastはMac標準のSpotlightのようなランチャーアプリです。
今回はScript commandという機能を使ってShellscriptをraycastから呼び出しています。

yabaiは公式によるとA tiling window managerとのことです。タイル風にウィンドウを管理してくれるCLIツールです。今回開くウィンドウが4つあり、煩雑に開くと結局それらを整理する手間が発生するので、yabaiを利用してWindowを整理しています。また、skhdという同じ方が作成されたアプリと組み合わせることで本領を発揮するようですが、今回は利用しません。

jqはコマンドラインで利用できるJsonを扱うCLIのようです。
今回初めて使いましたが、GPTに全任せしたので深掘りはしてません。brewでインストールできました。

MakefileはZennCLIでpreviewを開くために使っていますが、今回の用途では別に使わなくても良いです。気になる方はこちらの記事を参照ください。基本的にはmake previewでZenn CLIのpreviewサーバーを立ち上げることができると思ってくれれば良いです。

ZennCLIは言わずもがな今回自動化して立ち上げたいアプリケーションなので必要です。自分は今までブラウザで記事を書いていましたが、先週ZennCLIを導入して絶賛感動中なので、まだ未導入の方は是非この機に導入してみてください。

やり方

raycastのScript command用のShellscriptを作成する。

Raycastを開いてCreate Script Commandを開いてください。

開くとScriptの情報を入れる箇所が出てきますので、埋めていきます。
今回はTemplateとModeは元々入っていたBashとCompactを利用します。
Titleにはzenn-editorと指定しました。
Description以降はいれてもいいですが、必須では無いので一旦スルーします。

入力が終わったらcmd + Enterで保存します。保存先を聞かれるので、私はZennの記事を書いているプロジェクトを選択しました。

保存されたファイルを開いてみます。

生成されたファイル

zenn-editor.sh

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title zenn-editor
# @raycast.mode compact

# Optional parameters:
# @raycast.icon 🤖

echo "Hello World!"

上記のようなshell scriptが生成されます。
次にこのcommandにaliasを貼ります。
raycastを開いた状態でcmd+,で設定を開き、Extensions->Scriptsに先ほどのzenn-editorが表示されていると思うので、Aliasのところを編集し、zennとします。

これでraycastにzennと打ち込むだけで先ほどのshell scriptが実行されるようになりました。

各種アプリケーションを立ち上げる。

まず、ここではyabaiのことは忘れて必要なアプリケーションを一気に立ち上げることを考えます。

今回立ち上げたいアプリケーションをおさらいすると

VSCode
Fork(Gitのクライアント)
GoogleChrome
ZennCLIのPreview

アプリケーションを立ち上げる

zenn-editor.sh

# ForkでZennコンテンツプロジェクトを開く
fork ~/Project/zenn/zenn-content/

# VSCodeでZennコンテンツプロジェクトを開く
code ~/Project/zenn/zenn-content/

# 新しいターミナルウィンドウでmake previewを実行
osascript <<END
tell application "Terminal"
    do script "cd ~/Project/zenn/zenn-content/ && make preview"
    activate
end tell
END


# デフォルトのブラウザでlocalhost:8000を開く
open -a "Google Chrome" https://zenn.dev/dashboard http://localhost:8000/

一旦shell scriptの中身を気にせずに内容を先ほどの作成されたファイルの末尾にコピペしてもらい、raycastから呼び出すと下記のような挙動でアプリケーションが開くかなと思います。

shell scriptについてですが、Fork、VSCode、Chromeのところは見ればわかるかなと思います。
make previewを実行しているところだけ少し複雑なことをしており、osascriptというmac特有の自動化スクリプトを利用しています。ここでやっているのはTerminalを開き、zenn-conntentディレクトリに移動し、make previewを実行するということです。(zenn-conntentのパスは各自の環境に合わせて読み替えてください。)
make previewはshell scriptから呼び出せるのになぜこんなややこしいことをしているかというと、実行したTerminalを残しておかないとZennCLIのpreviewサーバーをkillされず残ってしまうからです。そこでTerminalを呼び出して、そこでmake previewを実行することで、Terminalを閉じるときに一緒にサーバーもkillされるようにしています。

yabaiの導入

ここまででとりあえず必要なアプリケーションを開くことはできましたが、このままだと最後に開かれたChromeが前面に出てきており、ウィンドウを適切に整理する必要があります。
そこでyabaiを導入します。(brew等でのインストールは終わっている前提で進めます。)
yabaiはウィンドウをタイルごとに配置してくれるアプリケーションです。
CLIコマンドを叩くことでウィンドウの操作ができます。

今回はとりあえずVSCodeを左半面にChromeを右半面に出します。TerminalとForkはすぐには使わないので、背面にいてもらうことにします。

今回利用するのは下記の2つのコマンドです。

yabai -m query --windows 
yabai -m window $windowId --toggle float

上のコマンドは今開かれているwindowの情報をjson形式で出力します。これを利用してForkやTerminalのwindowIdを調べます。
下のコマンドは指定したwindowIdのウィンドウについてフロートモードにします。これはyabaiを触ってみないと分かりにくいかもしれませんが、yabaiのタイルから切り離して、フローティングする状態にします。toggleなので、フロートモードの場合は元に戻ります。

これらを使ってForkとTerminalをフロートさせると結果的に背面に行くためVSCodeとChromeが前面に表示されるようになります。

yabaiを導入したVersion

zenn-editor.sh

# ForkでZennコンテンツプロジェクトを開く
fork ~/Project/zenn/zenn-content/

# VSCodeでZennコンテンツプロジェクトを開く
code ~/Project/zenn/zenn-content/

+ # # ウィンドウ一覧からForkとTerminalのウィンドウIDを取得
+ fork_window_id=$(yabai -m query --windows | jq '.[] | select(.app=="Fork") | .id')
+ 
+ # ForkとTerminalのウィンドウをフローティングに切り替える
+ if [ ! -z "$fork_window_id" ]; then
+     yabai -m window $fork_window_id --toggle float
+ fi

# 新しいターミナルウィンドウでmake previewを実行
osascript <<END
tell application "Terminal"
    do script "cd ~/Project/zenn/zenn-content/ && make preview"
    activate
end tell
END


+ terminal_window_id=$(yabai -m query --windows | jq '.[] | select(.app=="ターミナル") | .id')
+ 
+ 
+ if [ ! -z "$terminal_window_id" ]; then
+     yabai -m window $terminal_window_id --toggle float
+ fi



# デフォルトのブラウザでlocalhost:8000を開く
open -a "Google Chrome" https://zenn.dev/dashboard http://localhost:8000/

順番としては
①Forkを開く
②VSCodeを開く
③Forkをフロートさせる
④Terminalを開いて、make previewを叩く
⑤Terminalをフロートさせる
⑥Chromeを開いて zennとlocalhost:8000を開く

の順です。
yabaiのタイルを生成するルール的にこの順に開くといい感じだったのでこの順にしています。文字で説明するのが難しいので、気になる方は順番を変えて実行してみると何がいい感じなのかわかると思います。

これで実行してみると、記事の最初でお見せしたようにコマンド一発でZennの執筆を始められる状態になるかと思います。

また、yabaiの設定によってうまく動かない可能性があるので、筆者のyabaiの設定ファイルも置いておきます。

yabaiの設定ファイル

ちなみに私は今日yabaiを知ったので、下記の設定ファイルは洗練されておらず、もっといい設定は他の記事を見たりご自身でで触ってみたりして探してみてください！

yabairc

#!/usr/bin/env sh

# the scripting-addition must be loaded manually if
# you are running yabai on macOS Big Sur. Uncomment
# the following line to have the injection performed
# when the config is executed during startup.
#
# for this to work you must configure sudo such that
# it will be able to run the command without password
#
# see this wiki page for information:
#  - https://github.com/koekeishiya/yabai/wiki/Installing-yabai-(latest-release)
#
# sudo yabai --load-sa
# yabai -m signal --add event=dock_did_restart action="sudo yabai --load-sa"

# global settings
yabai -m config mouse_follows_focus          on
yabai -m config focus_follows_mouse          autoraise
yabai -m config window_origin_display        default
yabai -m config window_placement             second_child
yabai -m config window_topmost               off
yabai -m config window_shadow                on
yabai -m config window_opacity               off
yabai -m config window_opacity_duration      0.0
yabai -m config active_window_opacity        1.0
yabai -m config normal_window_opacity        0.90
yabai -m config window_border                off
yabai -m config window_border_width          6
yabai -m config active_window_border_color   0xff775759
yabai -m config normal_window_border_color   0xff555555
yabai -m config insert_feedback_color        0xffd75f5f
yabai -m config split_ratio                  0.50
yabai -m config auto_balance                 off
yabai -m config mouse_modifier               fn
yabai -m config mouse_action1                move
yabai -m config mouse_action2                resize
yabai -m config mouse_drop_action            swap

# general space settings
yabai -m config layout                       bsp
yabai -m config top_padding                  12
yabai -m config bottom_padding               12
yabai -m config left_padding                 12
yabai -m config right_padding                12
yabai -m config window_gap                   06

# Rules
yabai -m rule --add app="^System Settings$" manage=off
yabai -m rule --add app="^terminal$" manage=off

borders active_color=0xffFF00FF inactive_color=0xff494d64 width=5.0 &

echo "yabai configuration loaded.."

おわりに

今回はraycastのScript commandとyabaiを利用して一発でZennの執筆を始められるように自動化しました。
yabaiは初めて触りましたが、慣れたらもっと便利そうなので、色々と触ってみようと思います。
ぜひこの記事を参考に自動化してみてください！！

2024年は技術発信も頑張ろうと思っているので、記事が参考になった方はいいねとフォローをしていただけると励みになります！GitHubのフォローも！
よろしくお願いします！

https://github.com/miyasic

はじめに

今回利用するもの

やり方

raycastのScript command用のShellscriptを作成する。

各種アプリケーションを立ち上げる。

yabaiの導入

おわりに

Discussion