NodeJS を使った Alfred Workflow を作る

NodeJS を使った Alfred Workflow は、 Alfred から入力された情報を NodeJS スクリプトを通して Alfred の期待する形で出力する事で作れます。(入力を受け取れて出力できれば良いので特に NodeJS でなければいけないことはない)

準備

以下の通りに見ていきます。

  1. ワークフロー作成
  2. NodeJS 環境構築

ワークフロー作成

Alfred の Preferences からWorkflows を開き下部の+で開くコンテキストメニューにある Blank Workflow という項目からワークフローを作れます。
これを適当な名前(ここではFoo)で作成します。

作成されたワークフローの上で右クリックして開くコンテキストメニューの中に Open in Folder という項目があります。これで開くフォルダが Alfred Workflow になり、 NodeJS プロジェクトや Git リポジトリになるディレクトリになります。

NodeJS スクリプトなどを実行する際にそのファイルパスを指定する必要があります。このディレクトリ内にそのスクリプトファイルを含ませれば、ルートディレクトリからの相対パス指定でアクセスできます。

NodeJS 環境構築

Workflow ディレクトリにpackage.jsonを作り、以下の依存パッケージをインストールします。

yarn add -D ncc

nccはある.jsで読み込まれている依存モジュールの内容を取り込み1つの.jsファイルにしてくれるツールです。これにより作成した Alfred Workflow を別環境で使いたい場合に、一々依存解決(npmyarnなどを用いた)をしなくても良くなります。

以下のコマンドいくつかのrun-scriptsを追加します。これでyarn devsrc/main.jsに変更がある度コンパイルする開発モードで起動し、yarn buildでコンパイルだけされます。

npx npe scripts.dev 'ncc build --watch src/main.js'
npx npe scripts.build 'ncc build'

NodeJS スクリプトを使うアクション

ワークフロー編集画面から右クリックで開くコンテキストメニューから ActionsRun Script から、そのアクションを実行する時に行われる Bash スクリプトを書けます。引数はシェルスクリプトと同様に渡されてきます。

eval $(/usr/libexec/path_helper -s)
export PATH=/usr/local/bin:$($(echo $SHELL) -ic 'echo $PATH'):$PATH

query=$1

node ./dist/index.js $query

このワークフローのPATH変数には最初/usr/bin:/bin:/usr/sbin:/sbinとしか登録されていません。node/usr/local/bin/nodeなどにインストールされてるとそのままでは実行すらできませんが、頭の2行を実行するとPATHにそのマシンのデフォルトシェルと同じ値が設定されるので使えるようになります。

後は引数をスクリプトに渡すだけです。

Run Action では最後をconsole.log(text)で出力します。そこで出力したtextが次のアクションのqueryとして渡されていきます。
もし Run Action ではなく、Script Filter の場合は、ここに載っている JSONconsole.logが必要など若干の違いはあります。

配布

Workflow 名の上で開けるコンテキストメニューに Export の項目があるので、ここから保存します。保存したファイルを Github リポジトリの Release ページなどへ上げれが誰でもそのワークフローを使えるようになります。

Snippet Placeholders

Alfred のスニペットには幾つか Placeholders と呼ばれる、スニペットを使う時に初めて決められる値をいれる為の値があります。それには以下のようなものがあります。

  1. {cursor}
  2. {time}
  3. {date}
  4. {datetime}
  5. {clipboard}
  6. {random}

{cursor}

スニペット展開後のカーソルの位置を決めることができます。例えば>{cursor}<というスニペット場合、展開後カーソルは><の間に設定されます。

{time}

{time}12:34:56のような形で現在時刻が入ります。

この時刻は以下の値に+-を頭に付けることで微調整できます。

  • 1h 時間
  • 1m
  • 1s

例えば3時間後の値を入れたいなら{time +3h}のように使えます。

{date}

{date}Feb 1, 2020のような今日の日付が入ります。

この日付は以下の値に+-を頭に付けることで微調整できます。

  • 1Y
  • 1M
  • 1D

例えば来週の日付を入れたいなら{date +7d}のように使えます。

{datetime}

{datetime}{date}{time}が組み合わさった値が入ります。微調整系もそれらと同じものが使えます。

datetime:FORMATの後に ISO 8601 date format な値を入れると好きな形で datetime を使うことができます。例えば{datetime:YYYY-MM-dd HH:mm:ss}とすれば2020-01-01 12:34:56のような形で使えます。

{clipboard}

現在のクリップボードの中身と置き換わります。

{random}

ランダムな値と置き換わります。これは以下のようなサフィックスと共に使う必要があります。

  • UUID
  • min..max
  • enum

UUID

{random:UUID}のように置くとB994947C-CC72-48C9-87D5-AE6E87F21BFEA7976D8C-0D46-4207-9B63-0FD60D0B7473のような ID に置き換わります。

min..max

{random:0..10}のように置くと0から10までのどれかのお数値に置き換わります。

enum

{random:りんご,みかん,バナナ}のように置くとりんご,みかん,バナナのどれかに置き換わります。

ブランドカラーを直ぐにコピーできるワークフロー

このワークフローを使うとブランドカラーをすぐにコピーできます。モチベーションは必要な時に毎回検索して調べるのも面倒くさいなと思ったのと、調べても見つからなかったので作りました。

.alfredworkflowファイルはnju33/alfred-random-id-workflow のリリースページから持ってこれます。ただ1つ注意点で、24MB以上とファイルが重いです。これは Alfred でのフィルター時に表示する画像が必ずローカルに置いてあるものしか使えず、数千の単色の画像を生成して含ませてる為です🙄

使い方は最初にbrandcolorと入力(オートコンプリートが効く)し、その後にブランドサイト名を英語で入力(オートコンプリートが効く)するだけです。例えばbrandcolor twitterと入力すると画像のような結果になります。

入力中のブランドサイト名はfuse.jsによって検索するので結構いい加減でも引っかかるかもしれません。その結果を Alfred のフィルター機能で選択しEnter⌘+Nで確定すると、カラーコードがクリップボードにコピーされます。

色の検索にはreimertz/brand-colorsを使わせて貰ってます。ブランドサイト名もここの登録名で検索してるだけなので軽く見ると検索しやすくなるかもです!

URL フレンドリーなランダムな ID を生成するワークフロー

nju33/alfred-random-id-workflow のリリースページから.alfredworkflowをダウンロードできます。これをダブルクリックで登録できます。

使い方は簡単で、「randomid」と検索するとランダムな ID をクリップボードにコピーしてくれるだけの機能になります。このワークフローを使うと例えば、wKhzpsqV_w0M9HugGZS_のような ID をすぐに使うことができます。