> This page is for プラットフォーム, version レガシー. > For other versions, use one of these documentation indexes: > - V4 (default): https://developer.frame.io/platform/v4/llms.txt > - V4 Experimental: https://developer.frame.io/platform/v4-experimental/llms.txt > - レガシー: https://developer.frame.io/platform/v2/llms.txt > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://developer.frame.io/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developer.frame.io/_mcp/server. # 注釈の操作 # 概要 Frame.io での注釈は、描画オブジェクト（カラー、座標、およびサイズを備えています）のシリアル化 JSON blob として表されます。blob では、外部境界ペア以外のすべての引用符は、スラッシュでエスケープされます（例：`\"key\":\"value\"`）。 3 つの基本的なシェイプ（**矢印**、**矩形**、**線**）があります。また。フリーハンド描画もあります。フリーハンド描画は、このガイドの範囲外ですが、シリアル化座標データの同じ基本原則に従います。 ## 座標系 すべてのシェイプは、左上の原点を持つデカルト座標系に配置され、各軸は 0 から 1 までのスケールがあります。 ![coordinate_plane.png](/_fern-img/099478340a4f8604fd4389c5d431ec9e9321f509f2d6055b0c92dd62e4e36147.webp) ## 基本的なシェイプデータ すべてのシェイプは、座標とスタイルデータの組み合わせで、上記の平面に配置されます。各シェイプは共通属性をいくつか持ち、それぞれ、座標系のアドレス指定の方法がわずかに異なります。 距離／幅／高さのすべての属性は、メイン座標グリッド自体と同じ 0 から 1 までのスケールを使用しますが、通常、シェイプの原点からマークされます。 つまり、ビデオが 640 x 480 ビューポートに表示されている場合、`x=1` は、そのコンテキストでは絶対値 640 px に等しくなります。これにより、表示スクリーン、サイズ、およびコンテキスト変化に合わせて相対的な位置を維持しながら、注釈をシームレスに拡大・縮小できます。 **メモ**：矩形の原点は、描画原点に関係なく常にシェイプの左上隅になります。 ** ### 共通属性 | 属性| 説明| |----------|----------| | `tool`| 矢印、矩形、または線。 ** ** ** 作成中のシェイプを示します。| | `color`| シェイプの 6 桁 16 進カラー。| | `size`| シェイプの線のピクセルサイズ。矢印の場合、終了幅は、プログラムによって決定されるため、これは、線の開始のみを指します。| ### 矢印 | 属性| 説明| |:----------|:----------| | `x`| 矢印の原点の x 座標。| | `y`| 矢印の原点の y 座標。| | `w`| 矢印の原点を基準にした、矢印の開始から終了までの y 軸位置の差。| | `h`| 矢印の原点を基準にした、矢印の開始から終了までの x 軸位置の差。| ### 矩形 | 属性| 説明| |:----------|:----------| | `x`| 矩形の左上隅の x 座標。| | `y`| 矩形の左上隅の y 座標。| | `w`| 左上の矩形原点を基準にした、矩形の幅。| | `h`| 左上の矩形原点を基準にした、矩形の高さ。| | `ix`| 矩形の描画 x 原点。（必須ではありません）。| | `iy`| 矩形の図面 y 原点。（必須ではありません）。| | `radius`| 矩形の角丸の半径。正にする必要があります。150 を超える値は、視覚的に区別できません。| ### 線 | 属性| 説明| |:----------|:----------| | `x1`| 線の原点の x 座標。| | `y1`| 線の原点の y 座標。| | `x2`| 線の終点の x 座標。画像平面の絶対値。| | `y2`| 線の終点の y 座標。画像平面の絶対値。| ## 単純な例：座標平面 ![plane-example.png](/_fern-img/99384da1b5af9a10636927f13840b9554fa518600b181af4f71f094dab50861c.webp) ```serialized {"annotation": "[{\"tool\":\"line\",\"color\":\"#E74A3C\",\"size\":3,\"x1\":0.0028530670470756064,\"y1\":0.012680297987002695,\"x2\":0.9964336661911555,\"y2\":0.9903312727849104},{\"tool\":\"line\",\"color\":\"#34A3DB\",\"size\":3,\"x1\":0.004992867332382311,\"y1\":0.98779521318751,\"x2\":0.9942938659058488,\"y2\":0.012680297987002695}]} ``` ```json { "annotation": [ { "tool": "line", "color": "#E74A3C", "size": 3, "x1": 0.0028530670470756064, "y1": 0.012680297987002695, "x2": 0.9964336661911555, "y2": 0.9903312727849104 }, { "tool": "line", "color": "#34A3DB", "size": 3, "x1": 0.004992867332382311, "y1": 0.98779521318751, "x2": 0.9942938659058488, "y2": 0.012680297987002695 } ] } ``` ### 内訳 ![blue-plane.png](/_fern-img/ced74a7487e5331393af727a794384e9e3294d7f048fda4c64e73b4ba32b4445.webp) ```json { "tool":"line", "color":"#34A3DB", "size":3, "x1":0.004992867332382311, "y1":0.98779521318751, "x2":0.9942938659058488, "y2":0.012680297987002695 } ``` ![plane-example-red.png](/_fern-img/35bbbbcbe89e4262ec4e0fedf5e13d48baeceb10421fe48bcb854eb216a28676.webp) ```json { "tool":"line", "color":"#E74A3C", "size":3, "x1":0.0028530670470756064, "y1":0.012680297987002695, "x2":0.9964336661911555, "y2":0.9903312727849104 } ``` ## 複雑な例：たくさんのボックス ![lots-of-boxes.png](/_fern-img/9241b75e4785251c5c42b5b11306370df8d0510932e1537e20dbcde58977fea3.webp) ```serialized {"annotation": "[{\"tool\":\"rect\",\"color\":\"#34A3DB\",\"size\":3,\"x\":0.008426966292134831,\"y\":0.02663337494798169,\"w\":0.0702247191011236,\"h\":0.10986267166042447,\"ix\":0.008426966292134831,\"iy\":0.02663337494798169,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#1ABCA1\",\"size\":3,\"x\":0.8932584269662921,\"y\":0.0449438202247191,\"w\":0.08895131086142327,\"h\":0.35122763212650854,\"ix\":0.8932584269662921,\"iy\":0.0449438202247191,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E67422\",\"size\":3,\"x\":0.023408239700374533,\"y\":0.7873491468997087,\"w\":0.1254681647940075,\"h\":0.2047440699126093,\"ix\":0.023408239700374533,\"iy\":0.7873491468997087,\"radius\":8},{\"tool\":\"rect\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.6919475655430711,\"y\":0.5409904286308781,\"w\":0.29868913857677903,\"h\":0.4427798585101955,\"ix\":0.6919475655430711,\"iy\":0.5409904286308781,\"radius\":8},{\"tool\":\"arrow\",\"color\":\"#E74A3C\",\"size\":3,\"x\":0.25374531835205993,\"y\":0.23137744486059092,\"w\":0.24250936329588013,\"h\":0}]}" ``` ```json { "annotation": [ { "tool": "rect", "color": "#34A3DB", "size": 3, "x": 0.008426966292134831, "y": 0.02663337494798169, "w": 0.0702247191011236, "h": 0.10986267166042447, "ix": 0.008426966292134831, "iy": 0.02663337494798169, "radius": 8 }, { "tool": "rect", "color": "#1ABCA1", "size": 3, "x": 0.8932584269662921, "y": 0.0449438202247191, "w": 0.08895131086142327, "h": 0.35122763212650854, "ix": 0.8932584269662921, "iy": 0.0449438202247191, "radius": 8 }, { "tool": "rect", "color": "#E67422", "size": 3, "x": 0.023408239700374533, "y": 0.7873491468997087, "w": 0.1254681647940075, "h": 0.2047440699126093, "ix": 0.023408239700374533, "iy": 0.7873491468997087, "radius": 8 }, { "tool": "rect", "color": "#E74A3C", "size": 3, "x": 0.6919475655430711, "y": 0.5409904286308781, "w": 0.29868913857677903, "h": 0.4427798585101955, "ix": 0.6919475655430711, "iy": 0.5409904286308781, "radius": 8 }, { "tool": "arrow", "color": "#E74A3C", "size": 3, "x": 0.25374531835205993, "y": 0.23137744486059092, "w": 0.24250936329588013, "h": 0 } ] } ``` ### 内訳 以上のことを念頭に置いて、上の画像の各要素をレイアウトして、注釈座標系をより明確に把握すると便利です。この例の各矩形の `size` と `radius` は、Frame.io UI のデフォルトを取っていることに注意してください。 #### ブルーの矩形 ![blue-box.png](/_fern-img/ccc803531559e559395c2811d2be436316bbce6249c89b4af0b366efcf6b4d27.webp) ```json { "tool":"rect", "color":"#34A3DB", "size":3, "x":0.008426966292134831, "y":0.02663337494798169, "w":0.0702247191011236, "h":0.10986267166042447, "ix":0.008426966292134831, "iy":0.02663337494798169, "radius":8 } ``` #### グリーンの矩形 ![box-green.png](/_fern-img/4ce987f7843bf36e865fe0ceb6ae0ebbfa383cf719018754070a489fb3e3f17a.webp) ```json { "tool":"rect", "color":"#1ABCA1", "size":3, "x":0.8932584269662921, "y":0.0449438202247191, "w":0.08895131086142327, "h":0.35122763212650854, "ix":0.8932584269662921, "iy":0.0449438202247191, "radius":8 } ``` #### レッドの矩形 ![red-box.png](/_fern-img/61638bc1073613b5456b11ac4ce287447c3aaade152c0e6faf7699d995b11b31.webp) ```json { "tool":"rect", "color":"#E74A3C", "size":3, "x":0.6919475655430711, "y":0.5409904286308781, "w":0.29868913857677903, "h":0.4427798585101955, "ix":0.6919475655430711, "iy":0.5409904286308781, "radius":8 } ``` #### オレンジの矩形 ![orange-box.png](/_fern-img/b7a8f7c7feb18d0439ef14f7fe71441d3cada3f551dda44c9e69ef9c8b34a8d4.webp) ```json { "tool":"rect", "color":"#E67422", "size":3, "x":0.023408239700374533, "y":0.7873491468997087, "w":0.1254681647940075, "h":0.2047440699126093, "ix":0.023408239700374533, "iy":0.7873491468997087, "radius":8 } ``` #### レッドの矢印 ![red-arrow.png](/_fern-img/1f3e9db0880bf0bef5aa305de38471893b8ae9901226383441ff08c317087160.webp) ```json { "tool":"arrow", "color":"#E74A3C", "size":3, "x":0.25374531835205993, "y":0.23137744486059092, "w":0.24250936329588013, "h":0 } ```