extract-axure-data

Axure データの抽出

Axure プロトタイプから構造化データを抽出し、ページの再構築、コンテンツ分析、デザインレビューに活用できます。このスクリプトは依存関係を自動でインストールするため、URLを指定するだけで実行できます。

こんなときに使用します

• ユーザーが Axure プロトタイプの URL を共有し、抽出または再構築を希望している場合
• ワイヤーフレームやプロトタイプの複製、再構築、分析を依頼された場合
• AxShare、Axure Cloud、または start.html#p= や start.html?id=...&p=... を含むプロトタイプ URL について言及された場合
• プロトタイプからデザイントークン、スクリーンショット、インタラクションデータを取得したい場合

仕組み

Axure はページデータを静的 JS ファイル（data/document.js、files/{page}/data.js）に保存します。このスクリプトはブラウザーを使わずに Node.js でこれらを直接解析するため、高速で、サイトマップ、インタラクション、注釈の取得に対応しています。スクリーンショットとデザイントークンの取得にはレンダリングが必要なため、Playwright が Chromium のインスタンスを起動します。start.html?id=...&p=... を経由する Axure プレビュー URL の場合、スクリプトはまずレンダリングされたフレームの URL を解決し、ページデータ、スクリーンショット、テキストを正しいページリソースディレクトリから抽出します。

クイックスタート

このスキルディレクトリを基準に、scripts/extract.mjs の抽出スクリプトを実行します。

# Basic extraction — screenshot + design tokens (default)
node scripts/extract.mjs <AXURE_URL> --all

# Full extraction — add interactions, annotations, page text
node scripts/extract.mjs <AXURE_URL> --all --advanced

# Specific pages only
node scripts/extract.mjs <AXURE_URL> --pages login,dashboard

初回実行時に、Playwright と Chromium が ~/.cache/axure-extractor/ に自動インストールされます。所要時間は1～2分で、インストールは一度だけです。

パラメーター

フラグ	説明	デフォルト
<url>	Axure プロトタイプの URL（必須）	—
--all	すべてのページを処理	最初のページのみ
--advanced	インタラクション、注釈、ページテキストを追加	オフ
-o DIR	出力ディレクトリ	./axure-export
--pages P1,P2	名前を指定したページのみ処理	—
--no-screenshot	スクリーンショットをスキップ	スクリーンショットを取得
--no-headless	ブラウザーウィンドウを表示	ヘッドレス
--connect-cdp URL	起動中の Chrome に接続（認証用）	—
--verbose	詳細なログを表示	オフ

出力構成

axure-export/
├── sitemap.json           # Page tree and hierarchy (always produced)
└── pages/{pageName}/
    ├── screenshot.png      # Page screenshot
    ├── theme.json          # Design tokens (colors, fonts, spacing, radii)
    ├── data.json           # Page metadata and diagram        (--advanced)
    ├── notes.json          # Component annotations            (--advanced)
    ├── interactions.json   # Event map (clicks, navigations)  (--advanced)
    └── content.md          # Rendered page text as Markdown   (--advanced)

おすすめのワークフロー：ページの再構築

Axure プロトタイプを実際の Web ページとして再構築する場合は、2段階で進めます。スクリーンショットとテーマトークンがあれば、視覚的な忠実度の約80％を実現でき、追加データは細部の調整にのみ役立つため、最初からすべてを抽出すると、基本的な仕上がりが十分な場合に時間を浪費することになります。

ステップ1 — 基本的な抽出：

node scripts/extract.mjs <URL> --pages <target>

視覚的な参照として screenshot.png を、正確な色、フォント、間隔の参照として theme.json を使用します。ページを作成します。

ステップ2 — 必要に応じて調整：

node scripts/extract.mjs <URL> --pages <target> --advanced

インタラクションが不足している場合や注釈に誤りがある場合は、追加ファイル（interactions.json、notes.json、content.md）に詳細が含まれているため、修正に役立ちます。

認証が必要なプロトタイプ

一部の Axure プロトタイプではログインが必要です（AxShare、企業の SSO）。方法は2つあります。

既存の Chrome セッションに接続する（推奨 — Cookie を再利用します）：

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows：

start chrome --remote-debugging-port=9222

その Chrome ウィンドウからログインして、次を実行します：

node scripts/extract.mjs <URL> --all --connect-cdp http://localhost:9222

ブラウザーウィンドウを表示する（抽出中に手動でログイン）：

node scripts/extract.mjs <URL> --all --no-headless

依存関係のインストール

スクリプトは初回実行時に自動でインストールします。失敗した場合：

# Manual install
cd ~/.cache/axure-extractor   # macOS/Linux
# or: cd %USERPROFILE%\.cache\axure-extractor   (Windows)

npm install playwright
npx playwright install chromium

# If Chromium download is slow (e.g. behind GFW):
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install chromium

Playwright をまったくインストールできない場合、スクリプトは機能を制限して処理を続行します。サイトマップ、ページデータ、注釈、インタラクション（ブラウザーを必要としないもの）は引き続き抽出しますが、スクリーンショットとテーマトークンの取得はスキップします。

出力データ形式

theme.json

計算済みスタイルから抽出したデザインシステムのトークン：

{
  "colors": {
    "background": [{"value": "rgb(255,255,255)", "count": 42, "tags": ["div"]}],
    "text": [{"value": "rgb(51,51,51)", "count": 28, "tags": ["p","span"]}],
    "border": [{"value": "rgb(221,221,221)", "count": 12}]
  },
  "typography": {
    "families": [{"value": "\"PingFang SC\", sans-serif", "count": 56}],
    "textStyles": [{"size": "14px", "lineHeight": "22px", "weight": "400", "count": 20}]
  },
  "spacing": [{"value": "16px", "count": 15}],
  "radius": [{"value": "4px", "count": 8}]
}

notes.json

Axure で作成されたコンポーネントの注釈：

{
  "page": {"description": "User login page"},
  "id-username-input": {"description": "Username field", "placeholder": "Enter username"},
  "id-submit-btn": {"description": "Login button", "action": "Submit form"}
}

interactions.json

Axure のインタラクションデザイナーで定義されたイベントのマッピング：

{
  "onClick": {"targetPage": "dashboard", "action": "navigate"}
}

Playwright で不足分を補う

エクスポートデータは静的 JS の解析とスナップショットの取得に基づいているため、一部の動的コンテンツ（インタラクションの状態、条件付きパネル、動的パネルの切り替えなど）が不完全な場合があります。Playwright CLI を使用してプロトタイプページに戻り、追加のデータを取得できます。

# 打开 Axure 原型
playwright-cli open <AXURE_URL>
playwright-cli snapshot

# 点击交互元素查看动态面板切换
playwright-cli click e12
playwright-cli screenshot --filename=panel-state-2.png

# 获取元素的精确样式
playwright-cli eval "el => getComputedStyle(el).cssText" e5

playwright-cli close

コマンドの完全なリファレンス：Playwright CLI 公式スキルドキュメント

典型的な補完シナリオ

シナリオ	Playwright の動作
動的なパネルの状態	クリックして切り替えを実行した後、スクリーンショットを撮影します
条件による表示／非表示	条件を満たした後、DOM を取得します
インタラクションアニメーション	インタラクションの過程を録画します
ログインが必要なプロトタイプ	ログイン済みの Chrome セッションを再利用します
Axure のマスターコンテンツ	ページに移動した後、コンテンツ全体を取得します

トラブルシューティング

問題	対処方法
HTTP 404: .../data/document.js	URL が Axure プロトタイプではないか、ベース URL が正しくありません
サイトマップの抽出に失敗しました	URL にアクセスできることを確認します：curl -I <url>
スクリーンショットが真っ白です	ページの描画に時間がかかっています。--no-headless を試して状態を確認してください
ログインが必要です	--connect-cdp を使用してください（前述の「認証が必要なプロトタイプ」を参照）
Playwright のインストールに失敗します	手動でインストールするか、ミラーを使用するために PLAYWRIGHT_DOWNLOAD_HOST を設定してください