はじめに
Raycast は、macOS ユーザーの生産性を高める強力なランチャーアプリです。最大の魅力は、豊富な拡張機能のエコシステムにあります。本記事では、Raycast の拡張機能開発に初めて挑戦する方に向けて、基本から最新の AI 機能まで、公式ドキュメントをもとにわかりやすく解説します。
Raycast とは？
Raycast は、従来の Spotlight に代わる、より高機能な macOS 向けランチャーです。単なるアプリ起動ツールにとどまらず、ワークフローの自動化や情報検索、外部サービスとの連携などをスムーズに行えます。
拡張機能を作るメリット
Raycast の拡張機能を開発すると、以下のようなメリットがあります：
- 業務効率が大幅にアップ：日常のタスクを数秒で完了できるように
- 自分やチームに合ったカスタムワークフローの作成：独自ツールで作業を最適化
- コミュニティへの貢献：開発した拡張機能を世界中のユーザーと共有できる
- 最新技術の活用：TypeScript、React、Node.js といったモダンな開発環境を使える
開発環境の準備
Raycast の拡張機能開発を始める前に、以下の要件を満たしているか確認しましょう。
システム要件
公式ドキュメントに記載されている必要条件は以下の通りです：
- Raycast：バージョン 1.26.0 以上がインストールされていること
- Node.js：バージョン 22.14 以上（nvmの利用を推奨）
- npm：バージョン 7 以上
- 開発知識：ReactとTypeScriptの基本的な理解
Raycast アカウントの設定
拡張機能を開発するには、Raycast にサインインが必要です。サインイン後は以下のコマンドが使えます：
- Store：公開されている拡張機能の検索とインストール
- Create Extension：テンプレートから新しい拡張機能を作成
- Import Extension：ソースコードから拡張機能をインポート
- Manage Extensions：公開済み拡張機能の管理
Raycast API の主な機能
Raycast API は、開発者が多彩な機能を持つ拡張機能を簡単に作れるよう設計されています。
主な特徴
- 使いやすくパワフルなツール：TypeScript、React、Node.js で開発可能
- 簡単に UI を作成：組み込みの UI コンポーネントで統一感のあるデザインを実現
- コミュニティと連携：作った拡張機能をコミュニティと共有できる
- 優れた開発体験：型安全やホットリロードなどモダンな開発環境を提供
- スケーラブルな設計：シンプルなスクリプトから複雑な React UI まで対応
開発できる拡張機能の例
Raycast API を使うと、以下のような拡張機能が作れます：
- 情報検索ツール：外部 API からデータを取得して表示
- ワークフロー自動化：繰り返し作業の自動化
- 外部サービス連携：GitHub、Slack、Notion などと連携
- ユーティリティツール：テキスト変換や計算機、カラーピッカーなど
- AI ツール：最新の AI 機能を活用したスマートアシスタント
AI 機能の活用
Raycast の最新機能の一つに AI API があります。開発者は API キーの設定や追加の依存関係なしに、簡単に AI 機能を使えます。
AI API の基本例
import { AI, Clipboard } from "@raycast/api";
export default async function command() {
const answer = await AI.ask("ジャズの名曲を5曲教えて");
await Clipboard.copy(answer);
}
AI 機能のポイント
- API キー不要：追加設定なしで AI を利用可能
- 多様なモデル対応：OpenAI GPT-3.5-turbo など複数のモデルが使える
- 柔軟なクリエイティビティ設定：タスクに合わせて調整可能
- ストリーミング対応：リアルタイムでレスポンスを受け取れる
設定できるオプション例
- creativity：タスクに応じたクリエイティビティレベル（"none", "low", "medium", "high", "maximum"）
- model：利用する AI モデルの選択
- stream：ストリーミングレスポンスの有効・無効設定
注意点
一部ユーザーは AI API にアクセスできない場合があります。Raycast Pro に未加入のユーザーが AI API を使おうとすると、アクセス権の取得を求められます。environment.canAccess(AI) を使って、事前にアクセス権を確認しておくと安心です。
実践的な開発のポイント: 開発体験を向上させる
- ホットリロード：コード変更時に自動で更新される
- 型安全：TypeScript による堅牢な型チェック
- デバッグ支援：豊富な開発ツールやログ機能を活用
Raycast の標準 UI コンポーネント
Raycast では、統一感のある美しいユーザーインターフェースを簡単に構築できるよう、豊富な組み込み UI コンポーネントが提供されています。これらのコンポーネントは React ベースで、TypeScript での型安全性も確保されています。
主要な UI コンポーネント
Raycast API には以下の 4 つの主要コンポーネントがあります：
1. List - リスト表示
リスト形式でデータを表示するための基本的なコンポーネントです。TODO リストやファイル一覧など、類似したデータの表示に最適です。
主な機能：
- 組み込みの検索・フィルタリング機能
- セクション分けによる整理
- アイコン、テキスト、タグなどの表示
- 詳細ビューとの連携
- ローディング状態の表示
import { List } from "@raycast/api";
export default function Command() {
return (
<List navigationTitle="TODOリスト" searchBarPlaceholder="タスクを検索">
<List.Item
title="レポートを書く"
subtitle="期限: 明日"
accessories={[{ text: "高優先度" }]}
/>
<List.Item title="買い物に行く" subtitle="牛乳、卵を購入" />
</List>
);
}
2. Grid - グリッド表示
画像やアイコンなど、ビジュアル要素が重要なコンテンツをグリッド形式で表示します。アイコンコレクションや画像ギャラリーに適しています。
主な機能：
- カラム数の調整
- 画像の表示比率設定
- セクション分け
- ページネーション対応
import { Grid } from "@raycast/api";
export default function Command() {
return (
<Grid columns={5} inset={Grid.Inset.Large} navigationTitle="絵文字を探す">
<Grid.Item
content="🥳"
title="パーティー"
keywords={["party", "celebration"]}
/>
<Grid.Item
content="🙈"
title="見ざる猿"
keywords={["monkey", "see-no-evil"]}
/>
</Grid>
);
}
3. Detail - 詳細表示
Markdown 形式のコンテンツを表示し、詳細な情報を提供するためのコンポーネントです。GitHub の PR 詳細やドキュメント表示などに使用されます。
主な機能：
- Markdown レンダリング（CommonMark 準拠）
- LaTeX 数式のサポート
- メタデータパネルの表示
- カスタム画像サイズとティントカラー
import { Detail } from "@raycast/api";
export default function Command() {
const markdown = `
# ポケモン: ピカチュウ
電気を発生させるポケモンです。
`;
return (
<Detail
markdown={markdown}
metadata={
<Detail.Metadata>
<Detail.Metadata.Label title="高さ" text="40cm" />
<Detail.Metadata.Label title="重さ" text="6.0kg" />
<Detail.Metadata.TagList title="タイプ">
<Detail.Metadata.TagList.Item text="でんき" color="#eed535" />
</Detail.Metadata.TagList>
</Detail.Metadata>
}
/>
);
}
4. Form - フォーム入力
ユーザーからの入力を受け取るためのフォームコンポーネントです。各種入力フィールドと豊富なバリデーション機能を提供します。
利用可能な入力フィールド：
-
Form.TextField- テキスト入力 -
Form.TextArea- 複数行テキスト -
Form.PasswordField- パスワード入力 -
Form.Checkbox- チェックボックス -
Form.DatePicker- 日付選択 -
Form.Dropdown- ドロップダウン選択 -
Form.TagPicker- タグ選択（複数選択可能） -
Form.FilePicker- ファイル選択 -
Form.Separator- 区切り線
主な機能：
- リアルタイムバリデーション
- ドラフト機能（入力内容の自動保存）
- 制御済み・非制御コンポーネントの両対応
import { Form, ActionPanel, Action } from "@raycast/api";
export default function Command() {
return (
<Form
actions={
<ActionPanel>
<Action.SubmitForm
title="作成"
onSubmit={(values) => console.log(values)}
/>
</ActionPanel>
}
>
<Form.TextField
id="title"
title="タイトル"
placeholder="タスクのタイトルを入力"
/>
<Form.TextArea
id="description"
title="説明"
placeholder="詳細な説明を入力"
/>
<Form.DatePicker id="dueDate" title="期限" />
<Form.Dropdown id="priority" title="優先度" defaultValue="medium">
<Form.Dropdown.Item value="high" title="高" icon="🔴" />
<Form.Dropdown.Item value="medium" title="中" icon="🟡" />
<Form.Dropdown.Item value="low" title="低" icon="🟢" />
</Form.Dropdown>
</Form>
);
}
ActionPanel - アクション管理
すべての UI コンポーネントは ActionPanel と組み合わせて使用できます。ActionPanel には、ユーザーが実行できるアクションのリストが含まれ、キーボードショートカットも自動で割り当てられます。
主要なアクション：
-
Action.OpenInBrowser- ブラウザで開く -
Action.CopyToClipboard- クリップボードにコピー -
Action.Push- 新しいビューに遷移 -
Action.SubmitForm- フォーム送信 -
ActionPanel.Section- アクションのグループ化 -
ActionPanel.Submenu- サブメニュー
UI コンポーネントの共通機能
- 検索・フィルタリング：List と Grid には組み込みの検索機能があり、タイトルやキーワードでのフィルタリングが可能
-
ローディング状態：
isLoadingプロパティで読み込み中の表示を制御 - ページネーション：大量のデータを扱う場合の段階的読み込み
- キーボードナビゲーション：すべてのコンポーネントがキーボードでの操作に対応
2. UI コンポーネントを活用する
これらの豊富な組み込みコンポーネントを使うことで、Raycast の統一されたデザインシステムに沿った美しい UI を簡単に構築できます。
3. パフォーマンスに気を配る
- 非同期処理を適切に扱う
- データのキャッシュを活用する
- ユーザー体験を損なわないレスポンス速度を保つ
コミュニティとリソース
Raycast の拡張機能開発は、活発なコミュニティからのサポートも充実しています：
まとめ
Raycast の拡張機能開発は、モダンな Web 技術を活用して生産性ツールを作るのに最適です。TypeScript、React、Node.js の知識があれば、すぐに開発を始められます。最新の AI 機能を使えば、これまで以上に革新的で実用的な拡張機能が作れます。
この記事はRaycast 公式開発者ドキュメントをもとに作成しています。最新情報は必ず公式ドキュメントをご確認ください。