RaycastのSnippetにプルダウンのargumentを設定する
14日目の記事はshinotanさんの『Raycast からいつでも閲覧できるチートシートを用意する』でした。執筆ありがとうございます！！
こんにちは。せーじと申します。普段はWebやバックエンド、時々アプリの開発をしております。私は業務や私生活で日常的にRaycastを使っています。
今まではQiita(se_eiji)で執筆することが多かったですが、Zennをまだ使ったことがなかったので今回はZennで初めての執筆をしています。新しいサービスに触るのってなんか楽しい。
Raycastは使い始めてもう4年近くになりますが、いまだに知らない機能や使い方がまだまだあります。いつも新鮮な気持ちになります。
最近は情報を発信してくださる方もかなり増え、自分自身Raycastについて調べた時に知りたい情報を知ることができ、本当に助かっています。ありがとうございます。
ただ、検索しても上手く検索結果に出てこないこともまだまだあります。
この記事では最近私が使おうと思って調べたけど出てこなかった「Snippetでプルダウンで値を選べるようにする」設定方法をサクっとご紹介します。
以下の記事でもさらっと紹介されています。
最終的にやりたいこと
SnippetではDynamic Placeholdersを設定できます。
これにより、あらかじめ登録しておいた文字列の中に好きな文字を埋め込んだり、日付を埋め込んだり、UUIDを埋め込んだりできるようになります。
自由な文字列を埋め込む場合は {arguments} を利用することが一般的ですが、予め登録されている選択肢からしか選択できないように、以下のようにプルダウン式で埋め込む文字列を設定することも可能です。
※mysqlのコマンドはAIで生成したものであり、実際に利用しているものではありません。
どう設定するのか？
設定は至って簡単です。
先ほどのSnippetsは以下の設定を入れています。
mysql -u {argument default="dev" options="dev,prod"}-readonly -p -h 127.0.0.1 -P 3306
上記の
{argument default="dev" options="dev,prod"}
がプルダウンでの選択を実現しています。
もう少しだけ説明
Dynamic Placeholders 記法として、必ず{}で囲まれます。
以下の表は記事執筆時点で用意されている Dynamic Placeholders と記法です。
| Name | Placeholder | Description |
|---|---|---|
| Clipboard Text | {clipboard} | 直近にコピーしたテキストを挿入します。最近コピーがない場合、プレースホルダーはスニペット使用時に削除されます。 |
| Snippets | {snippet name="…"} | 参照したスニペットの内容を挿入します。他のスニペットを参照していないスニペットのみ挿入できます。 |
| Cursor Position | {cursor} | 貼り付けまたはインジェクト時のカーソル位置を指定します。スニペット内のカーソル指定は1つだけ使用できます。 |
| Date | {date} | 現在の日付を挿入します（例: 1 Jun 2022）。 |
| Time | {time} | 現在の時刻を挿入します（例: 3:05 pm）。 |
| Date & Time | {datetime} | 現在の日付と時刻を挿入します（例: 1 Jun 2022 at 6:45 pm）。 |
| Weekday | {day} | 曜日を挿入します（例: Monday）。 |
| UUID | {uuid} | 一意の識別子を挿入します（例: E621E1F8-C36C-495A-93FC-0C247A3E6E5F）。 |
| Selected Text | {selection} | 最前面アプリの選択テキストを挿入します。AI Chat では直前のメッセージが挿入されます。 |
| Argument | {argument} | 検索バーに入力項目を追加します。プレースホルダーは引数の値に置換されます。最大3種類まで指定可能です。 |
| Focused Browser Tab | {browser-tab} | アクティブなブラウザタブの内容を挿入します。 |
例えばArgumentを設定する場合、{argument}と入力するだけで任意の文字列を入力して利用できます。
緑色のハイライトされているところがargumentとして埋め込んだ文字列です。文字を入力するごとにリアルタイムに最終的な文字列をプレビューしてくれます。
先ほどのプルダウンの設定は{argument}の拡張になります。
{argument default="dev" options="dev,prod"}
-
argument- Placeholderの種類
-
default- デフォルトで選択されている選択肢
-
options- 選択肢の種類、"stg,dev,prod"のように "," 区切りで選択肢を増やせます。
- 途中に "stg, dev, prod"と空白を入れても大丈夫です。
終わりに
今回は Snippet の Dynamic Placeholders の中でも argument の一部にフォーカスしてご紹介しましたが、他にもさまざまな Dynamic Placeholders が存在します。ぜひ確認してみてください！
Discussion