自作Raycast Extensionでお手軽生産性アップ

prismatix事業部の太田です。

最近、ランチャーツールRaycastが非常に便利でよく使っています。

Raycastについてはこちらの記事をどうぞ

また、RaycastではStoreから拡張機能インストールするだけではなく、自作することができます。

https://developers.raycast.com/basics/getting-started

比較的簡単なReactのコードで構成されているため、RaycastのAPIをいくつか呼び出すだけで機能を実装できます。

今回はハンズオンを兼ねて、毎回自前で解析するのは少し面倒くさいJWTのデコーダー拡張機能を実装してみました。

テンプレートから作成する

https://developers.raycast.com/basics/create-your-first-extension#create-a-new-extension

Raycastからコマンドを実行することで、拡張機能用のテンプレートをもとに実装を始めることができます。

必要な部分だけ書き換えることでミスを減らせるので嬉しいですね。

テンプレートを保存したディレクトリにsrc/index.tsファイルがあるため、こちらをベースに実装してみます。

src/index.ts

import { useState } from 'react';
import { Action, ActionPanel, Form, showToast, Toast } from '@raycast/api';

export default function Command() {
  const [jwt, setJwt] = useState('');
  const [decoded, setDecoded] = useState('');
  const [issuedAt, setIssuedAt] = useState('');
  const [expiredAt, setExpiredAt] = useState('');

  const handleSubmit = () => {
    try {
      const [header, payload, signature] = jwt.split('.');
      const decodedPayload = Buffer.from(payload, 'base64').toString('utf-8');
      const parsedPayload = JSON.parse(decodedPayload);
      const issuedAt = new Date(parsedPayload.iat).toLocaleString('ja-JP');
      const expiredAt = new Date(parsedPayload.exp).toLocaleString('ja-JP');
      const decodedString = JSON.stringify(parsedPayload, null, 2);
      setIssuedAt(issuedAt);
      setExpiredAt(expiredAt);
      setDecoded(decodedString);
    } catch (error: any) {
      showToast({
        style: Toast.Style.Failure,
        title: "Something went wrong",
        message: error.message,
      });
    }
  };

  return (
      <Form
        actions={
        <ActionPanel>
          <Action.SubmitForm title="Decode" onSubmit={handleSubmit} />
        </ActionPanel>
      }>
      <Form.TextField id="jwt" title="Payload" value={jwt} onChange={setJwt} />
      <Form.TextArea id="decoded" title="decoded" value={decoded} />
      <Form.TextField id="issued_at" title="issued_at" value={issuedAt} />
      <Form.TextField id="expired_at" title="expired_at" value={expiredAt} />
    </Form>
  );
}

以下の手順でデコードしているだけで、処理としては非常に単純です。

1. .で分割してpayloadを取り出す。
2. base64デコード
3. 日時項目をparse
4. Formに値をセット

2023/04/25 補足

Raycast上での送信操作が行われた場合に発火する関数をonSubmitに渡しています。

また、useStateの仕組みを使ってFormの状態を管理しているため、set〇〇関数によって値が更新されます。

これをhandleSubmit関数で取得し各種処理を行っています。

使い方

1. 作成した拡張機能を呼び出して

2. JWTをFormに入力してCmd + Enter

3. デコードされたJSONとparseされたiat, expが表示されます

JWTのサンプルはこちらからお借りしました。

嬉しいところ

サンプルをお借りしたサイトを始めとして、既に世の中には多くのデコードツールが存在しますが、一番嬉しいのは普段自分が使っているランチャーでそのまま作業ができる点です。

また、文字列をクリップボードにコピーするようなAPIも提供されているようなのでさらなる改良ができそうです。

最後に

今回はRaycast Extensionの作成方法についてご紹介しました。

非常に簡単なので、皆様も普段から少し面倒くさいと思っていた作業をこれを機にツール化してみてはいかがでしょうか。