無限の可能性!! Raycast Extension

Raycast 機能拡張のカスタマイズ方法

はじめに

Raycast アドベントカレンダー７日目にチャレンジしましたが、間に合いませんでした。すみません。

と言うことで、以前、Raycast の機能を使って機能拡張を作成する方法を紹介しました。
Raycastの機能拡張をカスタマイズ(テンプレート解説)

今回は、すでにある Raycast の機能拡張をちょっと工夫して、自分好みにカスタマイズする方法を紹介します！

---

そもそもRaycastって？

Raycastは、PCでの作業をもっと効率的にする便利ツールです。
AIを含む有料の機能も魅力的ですが、公式の「ストア」から約1,800種類もの機能拡張が無料で提供されていて、GitHub上で日々アップデートされています。そのため、自分の好きなように変更もできるんです。

---

実例：F1機能拡張を日本語にカスタマイズ

私の趣味であるF1観戦にピッタリな「 Formula1 Extension 」という機能拡張があります。これを使えば、公式のF1サイトからレースの日程やドライバー情報、チームのポイントがチェックできるんですが、リンク先などが英語でちょっと不便…。
そこで、日本語化し、リンク先も日本のWikipediaを表示するように変更してみましょう！

• F1を知らない方へ。F1（フォーミュラ1）は、世界最高峰の自動車レースです。特別な設計のF1カーが、時速300km以上で走るスピードを競います。レースは年間20〜24回、世界中のサーキットで開催され、ドライバーとチームがチャンピオンを目指します。
  F1では、個人の「ドライバーズチャンピオン」と、チーム全体の「コンストラクターズチャンピオン」の2つのタイトルがあります。車の設計やエンジンの性能が大切で、最新技術が集結しているのも魅力です。
  日本では鈴鹿サーキットでのレースが有名で、現在は日本人ドライバーの 角田裕毅（つのだゆうき） 選手が活躍中。今年のレースは終わっており、角田選手の順位を Raycast でぜひ確認してみてください。

---

カスタマイズの準備

まず、Raycastの「公式リポジトリ」という場所から、機能拡張のデータをダウンロードします。ただし、全部を取るとサイズが大きすぎるので、必要な部分だけを取り出します。

以下のコマンドを実行してください：

git clone --filter=blob:none --sparse https://github.com/raycast/extensions.git
cd extensions
git sparse-checkout init --cone
git sparse-checkout set extensions/f1-standings

この手順により、F1関連の拡張機能だけをクローンできます。なお、リポジトリ全体をダウンロードすると約18GBのディスク容量が必要になるため、注意してください。

実際に動かしてみる

実際に動かしてみます。以下のコマンドを入力すると、Raycastで拡張した機能を試せます：

npm install && npm run dev

ショートカットキー (多分、「⌘ + スペース」か「option + スペース」) でRaycastを起動し、以下のように表示されることを確認してください。

• 機能拡張画面
  

• ドライバー順位
  

• ドライバーの詳細画面(英語のWikiPedia)
  

トラブルシュート

• 次画面に進もうとすると「Could not load seasons」でエラーになる場合は、
  useSeasons.ts の 以下の行をコメントアウトしてみてください。
• 変更前

    signal: cancelRef.current.signal,
  

• 変更後

    //signal: cancelRef.current.signal,
  

カスタマイズ手順: Wikipediaのリンク変更

機能拡張内で、ドライバー情報のURLは英語版Wikipedia (en.wikipedia.org) を使用しています。これを日本語版Wikipedia (ja.wikipedia.org) に変更するため、以下のようにコードを編集します(本来は英語ページから日本語ページのリンクを辿った方が正確ですが、簡易的な修正にしています)。

例: ドライバー情報URLの変更

• 変更前

  url={standing.Driver.url};
  

• 変更後

  url={standing.Driver.url.replace("en.wikipedia.org", "ja.wikipedia.org").replace("Yuki_Tsunoda","角田裕毅")};
  

例えば、角田裕樹選手 に関するリンクは以下のように変換されます：

• 変換前: https://en.wikipedia.org/wiki/Yuki_Tsunoda
• 変換後: https://ja.wikipedia.org/wiki/角田裕毅

ちょっと強引な修正ですが、カジュアルな変更ができるのもRaycastの魅力です。

表示のタイトルを日本語に変更

次に、メニューで表示されるタイトルも日本語に変更します。
package.json というファイルを開いて、以下のように変えてみましょう：

• 変換前: "title": "Driver Standings"
• 変換後: "title": "ドライバー順位"

他の部分も同じように：

• "Constructor Standings" → "コンストラクター順位"
• "Race Schedule" → "レース日程"

変更箇所の確認

React らしく,変更した内容は即座に反映されるため、Raycast の画面を起動したまま修正すると容易に確認できると思います。

• 機能拡張画面
  

• ドライバーの詳細画面(日本語のWikiPedia)
  

カスタマイズの可能性は無限大

Raycastの機能拡張はオープンソースで提供されているため、独自の機能を追加することも、既存の機能を自分好みにカスタマイズすることも可能です。今回のように、ちょっとした変更で使い勝手が向上します。
きちんと各国語対応させて本家にPRしても良いかもしれません。

今後も便利な機能拡張を作成したり、カスタマイズして共有していきたいと思います。興味がある方はぜひトライしてみてください！