🏢
自作Raycast Extensionで日常業務を効率化するヒント

2024/12/17に公開
Node.js
TypeScript
Raycast
idea
 はじめにこの記事は、Raycast Advent Calendar 2024の17日目の記事です。

昨日は @ys64 さんによるホットキーでアプリをアクティブにする方法でした。
Raycastは、macOS上でさまざまな操作を素早く実行できるランチャーアプリです。しかし、標準機能やStoreで入手できるExtensionだけでは「もう少しこうしたい！」と思う場面もあるかもしれません。そんなときは、自分でExtensionを作成してしまうのが、最も手っ取り早い解決策です。
この記事では、自作のRaycast Extensionを活用して、日常業務の手間を軽減する一例をご紹介します。

 前提条件Raycastを利用した経験があること
Node.js・TypeScriptが動作する環境があること
Extension開発のための詳細な環境構築や導入手順は、公式ドキュメントを参照してください。

 今回実装するExtensionの概要ここで紹介するサンプルExtensionは、以下の機能を持つ最小限のものです。
日常業務では、ユーザーIDのみが分かっていて、管理画面へのアクセスURLがすぐに用意されていない状況がしばしばあります。Chrome拡張機能やSite Searchなどが使える環境ならまだしも、Slackやデータベースクライアントなど、リンクが簡単に引けない場面も少なくありません。
こういったケースでも、Raycast Extensionを活用すれば、環境やユーザーIDを入力するだけで目的の管理画面URLをブラウザで即座に開くことができます。Raycastなら、利用中のアプリケーションに依存せず、キーボード操作のみで業務上のアクセスを効率化できる点が魅力です。
このサンプルでは以下を実装します。
ドロップダウンで環境（Production / Localなど）を選択
環境ごとに異なる管理画面のドメインを切り替え可能

テキストフィールドでユーザーIDを入力
Enterキーで、指定した環境とユーザーIDに対応するURLを自動でブラウザ起動
この仕組みによって、管理画面へのアクセスが簡略化され、業務がほんの少し快適になります。

 コード例以下がサンプルコードです。これで前述の機能が実現できます。
// src/open-admin-url.ts
import { open } from "@raycast/api";

const DOMAIN_MAP = {
  production: "admin.example.com",
  local: "localhost:3000",
} as const;

export default async function main(props: { arguments: Arguments.OpenAdminUrl }) {
  const { Environment: environment, UserId: userId } = props.arguments;

  const domain = DOMAIN_MAP[environment];
  const url = `https://${domain}/users/${userId}`;

  await open(url);
}
// package.json
// 必要箇所のみ抜粋
{
  "commands": [
    {
      "name": "open-admin-url",
      "title": "Open Admin URL",
      "description": "",
      "mode": "no-view",
      "arguments": [
        {
          "name": "Environment",
          "type": "dropdown",
          "required": true,
          "placeholder": "Environment",
          "data": [
            {
              "title": "Production",
              "value": "production"
            },
            {
              "title": "Local",
              "value": "local"
            }
          ]
        },
        {
          "name": "UserId",
          "type": "text",
          "required": true,
          "placeholder": "User Id",
          "default": "1"
        }
      ]
    }
  ],
}

 実行手順このサンプルを実際に動かす手順を示します。
Raycastを開き、「Create Extension」と入力してExtensionを作成
Extensionの基本情報を入力
Extension Title: "Admin URL Opener"
Location: Extensionが作成されるフォルダを指定
Command Title: "Open Admin URL"
Template: "Run Script"
その他の項目は未入力でも問題ありません

作成されたフォルダ内の src/open-admin-url.ts を上記サンプルコードに書き換え

package.json を上記のように修正
ターミナルで npm install && npm run dev を実行
Raycastを起動し、作成したExtensionを検索・コマンドを実行してみる

 活用例複数の環境（開発、ステージング、本番）を行き来しながら、ユーザーごとの管理画面を確認するような作業を想定すると、都度ブラウザのブックマークやURLコピー＆ペーストを行うのは手間です。このExtensionを使えば、キーボード操作だけで目当ての画面を瞬時に開けるため、「ちょっとした面倒」を軽減できます。
今回のサンプルはごくシンプルなものですが、これをきっかけに、さまざまな業務プロセスを自動化・簡略化するExtension開発に挑戦してみることをお勧めします。

 最後に自前のRaycast Extensionを用いることで、日々の業務負荷をわずかでも軽減できます。

「必要なものがなければ作ってしまおう」という精神で、日常の小さなストレスを減らしていきましょう！
はじめに

前提条件

今回実装するExtensionの概要

コード例

実行手順

活用例

最後に

Discussion
