Raycastの拡張機能でチームの生産性をあげる

<!--
title: Raycastの拡張機能でチームの生産性をあげる
tags:  Raycast
-->

[Unipos Advent Calendar 2022](https://qiita.com/advent-calendar/2022/unipos) 13日目の記事です。

# Raycast について

[Raycast - 公式](https://www.raycast.com)


macで使える多機能アプリランチャーです。
似たようなツールとして Alfred が挙げられよく比較されています。実際、私も使っていましたが今は Raycast をメインに利用してます。

Alfred との違いはいろいろあるのですが、全体的に設定などが Raycast のほうがエンジニアフレンドリーな感じがあります。（基本機能についてはこの記事では触れません。）

#### 拡張機能について

Alfred からの移行する決め手となった１つの要因が拡張機能の作りやすさと配布のしやすさがあります。

##### 作りやすさ

Alfred では **専用の GUI** で拡張機能を作成できるのに対して、Raycast では **React を使ったコードベース**での開発が可能です。  
UIからロジックまで全部JavaScriptで書けるので、日頃JSに触れている人間からするとかなり書きやすいと思います。加えてライブラリなどのすでにあるJSの資産が利用できるのも大きな利点です。

##### 配布しやすさ

Raycast には公式で[拡張機能のストア](https://www.raycast.com/store)がありそこに数多くの拡張機能が公開されており、誰でも追加できるようになっています。また後述しますが特定のメンバーにのみ公開することも可能でこの機能がとても便利でした。

また一度ストアからインストールするとアップデートは自動でおこなってくれるため、気軽にアップデートしてそれが利用してもらえるのも作る側にも使う側にも優しい点です。


# 拡張機能のつくり方 (雰囲気)

詳細な作り方は[公式のドキュメント](https://developers.raycast.com/basics/create-your-first-extension)が詳細に書かれており十分にわかりやすいのでこちらを読んだ方が良いです。


## 雛形の作成

1. `Create Extension` を実行

    <img width="480" alt="Raycast 2022-12-11 at 23.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258777/6c3af189-ae1a-250e-fe0a-0cc5f3798aee.png">

2. 必要な項目を入れて完了

    この時点で必要なパッケージやコマンドが追加されており、`npm run dev` を実行すると、雛形の拡張機能が動く状態まで作ってくれます。
    嬉しいことにフォーマッターも同封されていて追加の準備が不要なのが素晴らしいです。

    <img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258777/6a816ddf-3eeb-fbf4-bc3f-9204b4ca9051.png">


## 拡張機能の作成

雛形の時点では下記のようなコードになってます。よくあるリストタイプのコマンドならリストのアイテムのタイトルとかに `actions` で**文字列のコピー**とか**別のリストを表示する**とかのアクションを定義していく形になります。

**ブラウザで開く**、**コピーする** などよくあるアクションはすでに定義済みなのでサクッと作れます。

<img width="640" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258777/3786f860-ea2f-a364-415e-abc3c02f65a2.png">

リスト形式以外にも画像が並ぶパターンであったり、**フォーム形式**などいくつかのUIが用意されているので **API Doc の[ユーザーインターフェース](https://developers.raycast.com/api-reference/user-interface) から読み始めると自分が作りたいもののために使うコンポーネントがわかってとっつきやすい**と思います。

そのほかキャッシュなどストレージを扱うためのhooksなども用意されているので、より便利な拡張機能を作る際はその辺りも参照すると良さそうです。macのメニューバーにも干渉できたりと拡張機能を考える上でのアイデアのきっかけにもなると思います。

## 公開

公開にあたっての手順や公開目的で作成する場合のガイドラインについてはこちらも公式ドキュメントに丁寧に記載があります。

以下の画像はお試しで作った、N進数→M進数への変換器です。  
が、ちょっとバグが残ってたり、ガイドラインに沿って準備するのが億劫で億劫で公開してません。（チームメンバーへの共有はもっと楽な方法がある。[開発メンバーへの公開](#開発メンバーへの公開)を参照）

<img width="640" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258777/55bf6600-724a-4c54-33c4-46237b5e3391.png">


# 開発チームでの活用方法

## 実際に作ってるもの

実際に私が作って開発メンバーに共有している拡張機能として、GCPの各サービスをブラウザで開ける拡張機能を共有しています。

<img width="480" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258777/964589eb-8c80-f9a9-3766-c9649b86e903.png">

GCPを扱うための汎用的な拡張機能は存在しているのですが、普段の業務に特化することでより便利なものを作ることが可能です。

- サービスごとのトップページに遷移させるのではなく、サービスごとのよく使うページに遷移させる
- よく見るログに一発でアクセスできるようにする
- 特定のデータベースに遷移する

など、汎用性を考えないことでできる工夫はいろいろあります。

### 利点

- **GCPをよく利用するメンバー**

    GCPのページ遷移はやや遅いので、目的のページに辿りつくまでに何度か遷移する必要があり時間を無駄にしている。

- **GCPをそこまで使用しない(したことがない)メンバー**

    よく見るページやログなどの知識が拡張機能に反映されてるので、どこ見ればいいんだっけ？など迷うことが減る。


こういったブックマーク的な役割の拡張機能以外にも、なんらかの作業の自動化などもできるかなと思います。


## 開発メンバーへの公開

Raycast の [Teams 機能](https://www.raycast.com/teams) を利用します。

これはチームを作成してメンバーを招待することで、そのメンバーにのみ拡張機能やスニペットなどを共有できる機能です。
こちらへの**拡張機能の共有は特にガイドラインなどもなくローカルから公開のコマンドを実行することで即座に公開が可能**です。アップデートも同様でほぼリアルタイムで反映されます。ここの体験が最高。

無料で5コマンドまでの制限はあるのですが、お試しで使うには十分そうです。

# まとめ

Raycast便利！ 無料でできていいレベルを超えてるなと改めて思いました。


ツールの布教は難しいイメージがあるのですが、

- そもそもRaycastを普段使いしてくれてる人にとってはかなり距離のツールになること
- 特定メンバーへの配布とアップデートのしやすさ
- Raycastが提供しているUI と Reactベースであることが合わさりある程度リッチなUIが実現できること

あたりが起因してか、布教も楽だし何より作ってて楽しいです。

そもそもRaycast導入だけでも作業効率向上につながるのですが、よくする作業などを拡張機能で効率化してより快適な開発環境を作っていきたいなと思います。

良きRaycastライフを！