debugging-output-and-previewing-html-using-ray

Name: debugging-output-and-previewing-html-using-ray
Author: coollabsio

github.com/coollabsio開発65.2k49 回インストール今日更新

リポジトリ

debugging-output-and-previewing-html-using-ray について

ローカル HTTP サーバー経由で、デバッグデータやビジュアルコンテンツを Spatie の Ray デスクトップアプリに送るスキルです。ログ、プレビュー、ウィンドウ情報のリクエスト形式とエンドポイントを説明します。

主な機能

01Ray へのログと値の送信
02カスタム HTML やテキストの表示
03データのテーブル表示
04エントリーへのラベル、色、サイズ設定
05通知と計測データの送信
06ウィンドウとテーマ色の取得

活用シーン

01デバッグ中のアプリデータの確認
02Ray での HTML やビジュアル素材のプレビュー
03ラベルと色による関連エントリーの整理
04カスタムプレビューの Ray テーマへの適合

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/coollabsio/coolify --skill debugging-output-and-previewing-html-using-ray

インストール後、Claude Code で/debugging-output-and-previewing-html-using-rayを入力して読み込まれたか確認します。

詳細

Ray スキル

概要

Ray は、開発者向けの Spatie のデスクトップデバッグアプリケーションです。ローカルサーバーに HTTP リクエストを送信して、データを直接 Ray に送れます。

アプリケーションのデバッグや、デザイン、ロゴなどのビジュアルコンテンツのプレビューに役立ちます。

PHP 関数の ray() は、内部でこの処理を行います。

接続情報

設定	デフォルト	環境変数
ホスト	`localhost`	`RAY_HOST`
ポート	`23517`	`RAY_PORT`
URL	`http://localhost:23517/`	-

リクエスト形式

メソッド： POST Content-Type： application/json User-Agent： Ray 1.0

基本的なリクエスト構造

{
  "uuid": "unique-identifier-for-this-ray-instance",
  "payloads": [
    {
      "type": "log",
      "content": { },
      "origin": {
        "file": "/path/to/file.php",
        "line_number": 42,
        "hostname": "my-machine"
      }
    }
  ],
  "meta": {
    "ray_package_version": "1.0.0"
  }
}

フィールド

フィールド	型	説明
`uuid`	string	この Ray インスタンスの一意な識別子です。既存のエントリーを更新するには、同じ UUID を再利用します。
`payloads`	array	送信するペイロードオブジェクトの配列です
`meta`	object	オプションのメタデータです（ray_package_version、project_name、php_version）

Origin オブジェクト

各ペイロードには origin 情報が含まれます。

{
  "file": "/Users/dev/project/app/Controller.php",
  "line_number": 42,
  "hostname": "dev-machine"
}

ペイロードの種類

ログ（値の送信）

{
  "type": "log",
  "content": {
    "values": ["Hello World", 42, {"key": "value"}]
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

カスタム（HTML／テキストコンテンツ）

{
  "type": "custom",
  "content": {
    "content": "<h1>HTML Content</h1><p>With formatting</p>",
    "label": "My Label"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

テーブル

{
  "type": "table",
  "content": {
    "values": {"name": "John", "email": "[email protected]", "age": 30},
    "label": "User Data"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

色

直前のログエントリーの色を設定します。

{
  "type": "color",
  "content": {
    "color": "green"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

使用可能な色： green、orange、red、purple、blue、gray

画面の色

画面の背景色を設定します。

{
  "type": "screen_color",
  "content": {
    "color": "green"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

ラベル

エントリーにラベルを追加します。

{
  "type": "label",
  "content": {
    "label": "Important"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

サイズ

エントリーのサイズを設定します。

{
  "type": "size",
  "content": {
    "size": "lg"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

使用可能なサイズ： sm、lg

通知（デスクトップ通知）

{
  "type": "notify",
  "content": {
    "value": "Task completed!"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

新しい画面

{
  "type": "new_screen",
  "content": {
    "name": "Debug Session"
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

計測（タイミング）

{
  "type": "measure",
  "content": {
    "name": "my-timer",
    "is_new_timer": true,
    "total_time": 0,
    "time_since_last_call": 0,
    "max_memory_usage_during_total_time": 0,
    "max_memory_usage_since_last_call": 0
  },
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

後続の計測では、is_new_timer: false を設定し、実際のタイミング値を指定します。

シンプルなペイロード（コンテンツなし）

これらのペイロードに必要なのは、type と空の content のみです。

{
  "type": "separator",
  "content": {},
  "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
}

種類	目的
`separator`	視覚的な区切り線を追加
`clear_all`	すべてのエントリーをクリア
`hide`	このエントリーを非表示にする
`remove`	このエントリーを削除
`confetti`	紙吹雪のアニメーションを表示
`show_app`	Ray を前面に表示
`hide_app`	Ray ウィンドウを非表示にする

複数のペイロードの組み合わせ

1 つのリクエストで複数のペイロードを送信できます。同じ uuid を使うと、ログエントリーに修飾子（色、ラベル、サイズ）を適用できます。

{
  "uuid": "abc-123",
  "payloads": [
    {
      "type": "log",
      "content": { "values": ["Important message"] },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "color",
      "content": { "color": "red" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "label",
      "content": { "label": "ERROR" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    },
    {
      "type": "size",
      "content": { "size": "lg" },
      "origin": { "file": "test.php", "line_number": 1, "hostname": "localhost" }
    }
  ],
  "meta": {}
}

例：完全なリクエスト

緑色のラベル付きログメッセージを送信します。

curl -X POST http://localhost:23517/ \
  -H "Content-Type: application/json" \
  -H "User-Agent: Ray 1.0" \
  -d '{
    "uuid": "my-unique-id-123",
    "payloads": [
      {
        "type": "log",
        "content": {
          "values": ["User logged in", {"user_id": 42, "name": "John"}]
        },
        "origin": {
          "file": "/app/AuthController.php",
          "line_number": 55,
          "hostname": "dev-server"
        }
      },
      {
        "type": "color",
        "content": { "color": "green" },
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
      },
      {
        "type": "label",
        "content": { "label": "Auth" },
        "origin": { "file": "/app/AuthController.php", "line_number": 55, "hostname": "dev-server" }
      }
    ],
    "meta": {
      "project_name": "my-app"
    }
  }'

利用可能かどうかの確認

データを送信する前に、Ray が起動しているか確認できます。

GET http://localhost:23517/_availability_check

Ray は利用可能な場合に HTTP 404 を返します（エンドポイントは存在しませんが、サーバーは起動しています）。

Ray の情報の取得

ウィンドウの取得

開いているすべての Ray ウィンドウの情報を取得します。

GET http://localhost:23517/windows

ウィンドウの ID と名前を含むウィンドウオブジェクトの配列を返します。

[
  {"id": 1, "name": "Window 1"},
  {"id": 2, "name": "Debug Session"}
]

テーマカラーの取得

Ray が現在使用しているテーマカラーを取得します。

GET http://localhost:23517/theme

カラーパレットを含むテーマ情報を返します。

{
  "name": "Dark",
  "colors": {
    "primary": "#000000",
    "secondary": "#1a1a1a",
    "accent": "#3b82f6"
  }
}

用途： カスタム HTML コンテンツを Ray に送信するときは、これらのテーマカラーを使用すると、コンテンツを Ray の現在のテーマに合わせ、見た目を自然に統一できます。

例：色を合わせた HTML を送信します。


# First, get the theme

THEME=$(curl -s http://localhost:23517/theme)
PRIMARY_COLOR=$(echo $THEME | jq -r '.colors.primary')

# Then send HTML using those colors

curl -X POST http://localhost:23517/ \
  -H "Content-Type: application/json" \
  -d '{
    "uuid": "theme-matched-html",
    "payloads": [{
      "type": "custom",
      "content": {
        "content": "<div style=\"background: '"$PRIMARY_COLOR"'; padding: 20px;\"><h1>Themed Content</h1></div>",
        "label": "Themed HTML"
      },
      "origin": {"file": "script.sh", "line_number": 1, "hostname": "localhost"}
    }]
  }'

ペイロードの種類のリファレンス

種類	コンテンツフィールド	目的
`log`	`values` (array)	値を Ray に送信
`custom`	`content`, `label`	HTML またはテキストコンテンツ
`table`	`values`, `label`	テーブルとして表示
`color`	`color`	エントリーの色を設定
`screen_color`	`color`	画面の背景色を設定
`label`	`label`	エントリーにラベルを追加
`size`	`size`	エントリーのサイズを設定（sm/lg）
`notify`	`value`	デスクトップ通知
`new_screen`	`name`	新しい画面を作成
`measure`	`name`, `is_new_timer`, timing fields	パフォーマンスのタイミング計測
`separator`	(empty)	視覚的な区切り線
`clear_all`	(empty)	すべてのエントリーをクリア
`hide`	(empty)	エントリーを非表示にする
`remove`	(empty)	エントリーを削除
`confetti`	(empty)	紙吹雪のアニメーション
`show_app`	(empty)	Ray ウィンドウを表示
`hide_app`	(empty)	Ray ウィンドウを非表示にする

Markdown 対応

ログインしてコメント

基本情報

作者: coollabsio
リポジトリ: coollabsio/coolify
カテゴリ: 開発
インストール数: 49
GitHub スター: 65,204

問題を報告