はじめに
こんにちは！
バックエンドエンジニアとして働きながら、RustやTauriでのアプリケーション開発に興味を持っています。
Macで作業をしていると、特定のボタンやウィンドウだけをきれいにスクリーンショットしたい場面がよくありませんか？
標準の Cmd + Shift + 4 だと範囲指定が面倒だったり、ウィンドウキャプチャだと余白（影）が入ってしまったり…。
そこで、「Chromeの検証ツール（DevTools）のように、OS全体のUI要素をホバーするだけで認識してキャプチャできるツール」 があれば便利だと思い、xray というアプリを開発しました。
オープンソースとして公開しましたので、紹介させてください。
xray とは？
GitHub Repository: https://github.com/wlswo/xray
xray は、汎用 UI キャプチャおよびインスペクションツールです。
ウェブ開発でおなじみのインスペクターのような感覚で、macOS 上のあらゆる UI 要素を検査・キャプチャできます。
実際の動作デモ
百聞は一見に如かず。実際にどのように動くかをご覧ください。
| Webページの要素をキャプチャ | macOSネイティブアプリをキャプチャ |
|---|---|
 |
 |
マウスをホバーすると要素がハイライトされ、クリックするだけでクリップボードに画像がコピーされます。
主な機能
- ⚡️ グローバルインスペクター: 画面上のウィンドウ、ボタン、アイコンなどの UI 要素にマウスを合わせると、自動的に境界線を認識してハイライト表示します。
- 📸 スマートキャプチャ: ハイライトされた要素をクリックするだけで、即座にクリップボードにコピーされます。あとは貼り付けるだけです。
- 🤫 システムトレイ統合: 普段は邪魔にならないよう、メニューバーのシステムトレイに常駐します。
-
⌨️ グローバルショートカット:
Cmd + Shift + Xを押すだけで、いつでもどこでもインスペクターを呼び出せます。
技術スタック
macOS のネイティブ API にアクセスしつつ、軽量で高速なアプリを作るために以下の技術選定を行いました。
-
Backend: Rust (Tauri, Accessibility API, CoreGraphics)
- Accessibility API を使用して UI 要素の座標やサイズを取得しています。
-
Frontend: React + TypeScript
- 画面上にオーバーレイ表示される視覚的なハイライト部分を担当しています。
-
State Management: Tauri Events
- バックエンド（Rust）で検知したホバーイベントをフロントエンドに通知する仕組みです。
インストールと使用方法
現在は開発者向けにソースコードからのビルド方法を案内しています。
1. セットアップ
リポジトリをクローンし、依存関係をインストールします。
git clone [https://github.com/wlswo/xray.git](https://github.com/wlswo/xray.git)
cd xray
npm install
2. 開発ビルドの実行
npm run tauri dev
3. 使用方法
アプリを起動したら、以下の手順でキャプチャを試してみてください。
権限の付与: 初回起動時、macOS の「アクセシビリティ」と「画面収録」の権限を求められます。これらを許可してください（OS の UI 情報を読み取るために必須です）。
インスペクション開始: Cmd + Shift + X を押すとオーバーレイモードになります。
キャプチャ: 撮りたい要素にマウスを乗せてクリック！
貼り付け: 画像はクリップボードにあるので、Slack や GitHub の Issue など好きな場所に Cmd + V で貼り付けてください。
おわりに
「こういうツールが欲しかった！」という方がいれば、ぜひ使ってみてください。 Rust や Tauri の学習用プロジェクトとしても面白い構成になっていると思います。
もし気に入っていただけたら、GitHub で ⭐️ Star を押していただけると開発の励みになります！ また、バグ報告や機能追加の Pull Request も大歓迎です。
👉 GitHub: https://github.com/wlswo/xray