9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

UniposAdvent Calendar 2022

Day 13

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

Last updated at Posted at 2022-12-12

Unipos Advent Calendar 2022 13日目の記事です。

Raycast について

Raycast - 公式

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

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

拡張機能について

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

作りやすさ

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

配布しやすさ

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

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

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

詳細な作り方は公式のドキュメントが詳細に書かれており十分にわかりやすいのでこちらを読んだ方が良いです。

雛形の作成

  1. Create Extension を実行

    Raycast 2022-12-11 at 23.25.14.png
  2. 必要な項目を入れて完了

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

拡張機能の作成

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

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

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

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

公開

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

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

開発チームでの活用方法

実際に作ってるもの

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

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

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

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

利点

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

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

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

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

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

開発メンバーへの公開

Raycast の Teams 機能 を利用します。

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

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

まとめ

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

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

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

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

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

良きRaycastライフを!

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?