ray.so コードスニペット画像ジェネレータ

ray.so を使用して美しいコードスニペット画像を生成し、ローカルに保存します。

要件

• ユーザーは、直接またはコンテキスト内のファイル/選択を指示することで、コードスニペットを 必ず 提供する必要があります
• 生成前に、すべての スタイルパラメータについてユーザーに確認し、利用可能なすべてのオプション を提示する 必要があります
• スクリーンショットキャプチャに agent-browser を使用 する必要があります (まず利用可能性を確認してください)

ワークフロー

ステップ 1: agent-browser の利用可能性を確認

先に進む前に、agent-browser が利用可能であることを確認してください:

which agent-browser

agent-browser が PATH に見つからない場合は、このスキルには agent-browser が必要であり、それなしでは進められないことをユーザーに知らせてください。

ステップ 2: 利用可能なオプションを取得

curl を使用して ray.so の GitHub リポジトリから現在のテーマと言語を取得します:

# 利用可能なテーマを取得してパース
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

# 利用可能な言語を取得してパース
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u

ステップ 3: ユーザーにすべてのパラメータを確認

AskUserQuestion を使用して、すべての パラメータについて確認し、利用可能なすべてのオプション を提示する 必要があります。パラメータは以下の順序で確認してください:

3.1 テーマ選択

利用可能なすべてのテーマを提示します。質問では、ステップ 2 から取得したすべてのテーマをリストしてください。例:

質問: 「どのテーマを使いたいですか?」
説明: 「利用可能なテーマ: [curl 出力からすべてのテーマをリスト]」
クイック選択オプション (人気のある 4 つを選択):
- breeze (デフォルト、紫グラデーション)
- midnight (シアン-ブルー)
- vercel (ミニマリストダーク)
- sunset (温かみのあるオレンジ)
注: ユーザーは「その他」を選択して、フルリストから任意のテーマを入力できます

3.2 言語選択

可能な場合は言語を推測してください。 以下の場合はこの質問をスキップしてください:

• ユーザーが明示的に言語を指定した
• コードがファイル拡張子が明確なファイルから来ている (例: .py → python、.js → javascript、.ts → typescript、.rs → rust、.go → go など)
• 構文が明らかに識別可能である (例: def/import → python、func/package → go、fn/let mut → rust)

言語を確実に推測できない場合にのみこの質問をしてください:

質問: 「構文強調表示の言語は?」
説明: 「利用可能な言語: [curl 出力からすべての言語をリスト]」
オプション:
- auto (自動検出)
- javascript
- python
- typescript
注: ユーザーは「その他」を選択して、フルリストから任意の言語を入力できます

3.3 ダーク/ライトモード

質問: 「ダークモードまたはライトモード?」
オプション:
- ダークモード (デフォルト)
- ライトモード

3.4 背景

質問: 「グラデーション背景を表示しますか?」
オプション:
- はい、背景を表示 (デフォルト)
- いいえ、透明/最小限の背景

3.5 パディング

質問: 「コードの周りのパディングはどのくらいですか?」
オプション:
- 16 (コンパクト)
- 32 (小)
- 64 (中、デフォルト)
- 128 (大)

3.6 行番号

質問: 「行番号を表示しますか?」
オプション:
- いいえ (デフォルト)
- はい

3.7 タイトル

質問: 「コードの上にタイトルを追加しますか? (例: ファイル名)」
オプション:
- タイトルなし (デフォルト)
- はい、タイトルを追加
はいの場合は、タイトルテキストを確認してください。

注: 出力パス/ファイル名について確認してください。現在の作業ディレクトリに適切なファイル名で保存してください (例: rayso-snippet.png、またはタイトルが提供されている場合は fibonacci.png など)。ユーザーの元のリクエストで明示的に指定されている場合にのみ別のパスを使用してください。

ステップ 4: ray.so URL を構築

重要: すべてのパラメータは URL ハッシュ (#の後) に含まれる 必要があり、クエリ文字列には含まれません。

シェルコマンドを使用して URL を構築します:

# 1. コードを Base64 エンコード
CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)

# 2. Base64 文字列を URL エンコード
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")

# 3. すべてのパラメータをハッシュに含めて URL を構築
# フォーマット: https://ray.so/#param1=value1&param2=value2&code=ENCODED_CODE
# width パラメータを含めないでください - ray.so がコンテンツに合わせて自動サイズします
URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"

# 必要に応じてオプションパラメータを追加:
# 行番号の場合: &code= の前に "&lineNumbers=true" を追加
# タイトルの場合: &code= の前に "&title=URL_ENCODED_TITLE" を追加

URL ハッシュパラメータ:

パラメータ	値	デフォルト
theme	リストのテーマ	breeze
padding	16, 32, 64, 128	64
background	true, false	true
darkMode	true, false	true
language	リストのテーマ、または "auto"	auto
lineNumbers	true, false	false
title	URL エンコードされた文字列	(なし)
width	数値 (ピクセル)	auto
code	Base64 エンコード、その後 URL エンコード	(必須)

width に関する注意: 固定幅が具体的に必要でない限り、width パラメータを含めないでください。これなしで、ray.so はフレームをコンテンツに合わせて自動サイズし、不要な空白を避けます。

URL 構築の例:

# コード: for i in range(23):\n    print(i)
# テーマ: midnight、パディング: 64、ダークモード: true、背景: true、言語: python、タイトル: test.py

CODE='for i in range(23):
    print(i)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"
echo "$URL"

ステップ 5: agent-browser で高品質画像をキャプチャ

agent-browser を使用 する必要があります (ステップ 1 で確認)。このアプローチは、ray.so の内部エクスポートと同じ html-to-image ライブラリを使用し、高い pixelRatio でシャープで鮮明なテキストレンダリングを行います。

重要: --session で一意のセッション名を常に使用して、古いセッションの問題を避けてください。

# 一意のセッション名を生成
SESSION="rayso-$(date +%s)"

# 1. ビューポートを設定
agent-browser --session $SESSION set viewport 1400 900

# 2. URL を開く
agent-browser --session $SESSION open "$URL"

# 3. ページが完全にレンダリングされるまで待機
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# 4. html-to-image ライブラリを読み込み (ray.so が内部で使用するのと同じライブラリ)
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 5. 4 倍解像度でキャプチャ (鮮明なテキストを生成)
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

# 6. ブラウザを閉じる
agent-browser --session $SESSION close

# 7. データ URL を PNG ファイルに変換
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png

# 8. 一時ファイルをクリーンアップ
rm /tmp/rayso-dataurl-$SESSION.txt

重要な注意:

• ray.so が独自のエクスポート機能に使用する html-to-image ライブラリを使用します
• pixelRatio: 4 は、ネイティブ解像度の 4 倍で鮮明でシャープなテキストを持つ高 DPI 画像を生成します
• データ URL はライブラリから直接キャプチャされ、スクリーンショットからではありません
• ImageMagick は不要です - 高解像度での純粋なブラウザベースのレンダリング
• 出力は正しくサイズ設定され、余分な空白がありません

ステップ 6: 出力を確認して終了

保存されたファイルの場所をユーザーに報告してください。タスクは完了しています - スクリーンショットが保存された後、追加の確認、探索、または検証を実行しないでください。

完全な例

ユーザー: 「このPython関数のコードスニペット画像を作成してください」

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

1. which agent-browser を確認 - 利用可能であることを確認

2. テーマと言語を取得:

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

3. AskUserQuestion を介してユーザーにパラメータを確認:

   • テーマ: ユーザーが「midnight」を選択
   • 言語: def 構文から python として推測 - 確認されません
   • ダークモード: ユーザーが「ダークモード」を選択
   • 背景: ユーザーが「はい」を選択
   • パディング: ユーザーが「64」を選択
   • 行番号: ユーザーが「いいえ」を選択
   • タイトル: ユーザーが「タイトルなし」を選択

4. URL を構築 (すべてのパラメータをハッシュに、自動サイズ設定のため width なし):

CODE='def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}"

5. 高品質画像をキャプチャ:

SESSION="rayso-$(date +%s)"

agent-browser --session $SESSION set viewport 1400 900
agent-browser --session $SESSION open "$URL"
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# html-to-image ライブラリを読み込み
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 4 倍解像度でキャプチャ
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
agent-browser --session $SESSION close

# PNG として保存
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png
rm /tmp/rayso-dataurl-$SESSION.txt

6. 報告: 「コードスニペット画像を ./fibonacci.png に保存しました」

画像解像度と品質

このスキルは、html-to-image ライブラリを pixelRatio: 4 で使用して、鮮明でシャープなテキストを持つ高品質画像を生成します。これは、ray.so が組み込みエクスポート機能に使用するのと同じレンダリングアプローチです。

出力品質:

• デフォルト: 4 倍のネイティブ解像度 (フレームはコンテンツに自動サイズ、その後 4 倍でレンダリング)
• テキストは高 DPI でレンダリングされ、低解像度からアップスケールされません
• グラデーション背景とすべての CSS スタイルが保持されます
• 不要な空白がありません (フレームがコードに合わせて自動サイズ)

解像度を調整:

• より小さいファイルの場合: eval コマンドで pixelRatio:4 を pixelRatio:2 に変更
• 最高品質の場合: pixelRatio:6 を使用 (ray.so の「6x」エクスポートオプションと同じ)

固定幅を強制:

• 複数の画像で一貫したサイズ設定が必要な場合のみ、URL に &width=NUMBER を追加

トラブルシューティング

• agent-browser が利用可能でない場合: ユーザーに知らせ、進めないでください
• curl がテーマ/言語の取得に失敗した場合は、これらの一般的なデフォルトを使用してください:
  • テーマ: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind
  • 言語: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash
• パラメータが適用されない場合: すべてのパラメータがクエリ文字列ではなく URL ハッシュ (#の後) にあることを確認してください
• タイトルが表示されない場合: title パラメータがハッシュに含まれている必要があります: #title=filename.py&code=...
• html-to-image が読み込みに失敗した場合: ネットワーク接続を確認してください。ライブラリは jsdelivr CDN から読み込まれます
• キャプチャが空白を返す場合: フレームセレクタ #frame > div が変更されている可能性があります。ページ構造を検査してください
• 非常に長いコードスニペットの場合、ray.so は切り詰める可能性があります。複数の画像に分割することを検討してください
• ページが正しく読み込まれない場合は、待機時間を増やしてください (4000ms 以上を試してください)
• 空白のページが表示される場合: --session フラグで一意の新しいセッション名を使用してください
• データ URL が形式が正しくない場合: base64 デコード前に引用符と改行を削除してください