はじめに
早いもので､もう3年生になりました｡作業効率化が好きな@7wataaaです｡
N/S高等学校 Advent Calendar 2022の19日目記事です｡
この記事では､Raycastというアプリの拡張機能を作成する方法について解説してみようと思います｡
拙い記事ですがご容赦ください🙇
ランチャーアプリRaycast
Raycastは無料のランチャーアプリです｡
使い心地が良くて､最近とても気に入っています｡
拡張機能の開発について
Raycastでは､コマンドを新たに自作したり､Storeからインストールしたりして機能を拡張することができます｡
拡張機能の開発は、こちらの公式ドキュメントを参考に進めました｡
ReactとTypeScriptを使って開発することできるようですね｡
スタイルを自分で作成する必要はなく､提供されるコンポーネントを組み合わせていく形で開発できました｡
Google Calendar APIでイベントを追加する
今回はRaycastから自分用のGoogle Calendarに予定を追加する機能を開発してみたいと思います｡
(Raycastの開発だけご覧になりたい方はここまで飛ばしてください)
イベントの追加には､Calendar APIのquickAddなるものを使ってみました｡
POST /calendar/v3/calendars/calendarId/events/quickAdd HTTP/1.1
Content-Type: application/json
Host: www.googleapis.com
Content-Length: 23
{
"text": "Meeting"
}
bodyに予定の文字列を付与することでカレンダーに追加できるようです。
日時も､
"12/19 1400-1500 Meeting"
とすることで指定できるようです｡
(細かい仕様がわからないのでご教授いただけたら嬉しいです｡)
あとはアクセストークンを用意し､Bearerの形式で一緒に送ります。
GCPでOAuthの設定をする
クライアントの作成と､スコープの設定を行います｡
PKCEフローのために､iOSのクライアントを使用する必要があるようです｡
今回必要なスコープはこちら↓
これでGCPの設定は完了です｡
アクセストークンは､公式ドキュメントを参考にするか､API ExampleのOAuth機能を少し改変するだけで取得できそうです｡
それでは､Raycast側の開発に移っていきます｡
インストールから起動まで
公式ドキュメントを参考に進めました｡
デフォルトで用意されている拡張機能作成用のコマンドでプロジェクトを作成します｡
いろんなテンプレートが用意されているようです｡
"Detail"を選択してみます｡
作成完了です｡
コマンドを起動すると､こんな画面になりました｡
生成されたindex.tsxはこんな感じ｡
import { Detail } from '@raycast/api';
export default function Command() {
return <Detail markdown="# Hello World" />;
}
ここではDetailコンポーネントが使用されていますが､
他にも様々なコンポーネントが用意されており､API Examplesを起動することで確認できます｡
いろんなコンポーネントがあるので眺めるだけでも楽しいです｡
必要なUIを作る
Preferencesという機能を使って､カレンダーIDを保存し､
サインインします､､
アカウントを選択し､､
認証できました🎉
続いて､quickAddのtextを入力するフォームを作る必要があります｡
この部分のコードはこんな感じになりました。
export const QuickAddPage = () => {
useEffect(() => {
authorize();
}, []);
return (
<Form
actions={
<ActionPanel>
<Action.SubmitForm
title="Submit"
onSubmit={async (values: QuickFieldValues) => {
// textを受け取れるので、ここからリクエストを送信する
}}
/>
</ActionPanel>
}
>
<Form.TextField
id="quickAddField"
title="QuickAdd"
placeholder="e.g., Meeting with X next tuesday at 3pm"
autoFocus
/>
<Form.Separator />
</Form>
);
};
スタイルを考えなくて良いため簡単です。
残りのリクエスト部分は、
export const insertEventToGoogleCalendar = async (calendarId: string, params: QuickAddParams) => {
await authorize();
const quickAddURL = `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events/quickAdd`;
const res = await axios.post<calendar_v3.Schema$Event>(quickAddURL, params, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${(await client.getTokens())?.accessToken}`,
},
});
return res;
};
このように実装できました。
使い慣れたTypeScriptを使えるのはやっぱりいいですね。
完成
無事完成させることができました。
おわりに
本記事では、実際にRaycastの拡張機能としてGoogleカレンダーに予定を追加する機能を実装してみました。
Raycastはデベロッパーフレンドリーであり、アプリ自体のUXもかなりいいのでおすすめです。
そして今回はReact & TypeScriptで拡張機能を実装しましたが、簡単なコマンドであれば手軽にShellScript等でも書くことができます。例: 自作コマンド
みなさんもぜひ拡張機能を使いこなして面倒な作業から開放されましょう。
ここまで読んでくださりありがとうございました！