SkyPattern ユーザーガイド

SkyPattern は、インタラクティブなキャンバス上で幾何学的要素を作成および操作できる幾何学的デザインツールです。このガイドでは、アプリケーションの効果的な使い方を説明します。

• はじめに
  • インターフェースの概要
  • 基本的なナビゲーション
• 要素の操作
  • 新しい要素の追加
  • 要素タイプ
    • 基点
    • 定数
    • 角度距離
    • 直線沿い
    • 交差線
    • XとYの交差
    • 直線
    • ベジェ曲線
    • 円弧
    • 高度な交差
    • 変換要素
    • 型紙ピース
  • 数式の使用
    • 基本演算
    • 動的関数 (要素の操作)
    • 静的数学関数
    • 定数と要素参照
    • 重要な注意事項
  • 要素管理
    • 要素の選択
    • 要素の並べ替え
    • 要素の名前変更
    • 要素の非表示/表示
    • レイヤーの使い方
    • 要素の削除
• キャンバス操作
  • 原型モードと配置モードとメモモード
  • 座標系
  • キーボードショートカット
  • 入力操作
• 保存と読み込み
  • クラウドドキュメント
  • ローカルバックアップ
• パターンウィザード
  • ステップ① — 寸法の調整
  • ステップ② — 配置の確認
  • ステップ③ — PDF 設定の確認
  • ステップ④ — 製作開始
  • ステップ⑤ — 縫製開始
  • 印刷ページの組み立て
    • ページレイアウトの説明
    • 組み立て手順
• ヒントとベストプラクティス
  • 要素の命名
  • 複雑なデザインの構築
  • 数式の例
  • トラブルシューティング
• 高度な機能
  • ベジェ曲線の編集
  • 円弧と曲線の交差
  • 動的測定

はじめに

インターフェースの概要

SkyPattern インターフェースは、3 つの主要な領域で構成されています。

1. 上部ツールバー: SkyPattern のロゴ、モード切り替え（原型/配置）、PDF/SVGエクスポート、ローカルバックアップ用の保存/読み込みボタン、入力モード切り替え（マウス/トラックパッド）、テーマ切り替え（ライト/ダーク）、言語セレクターがあります。
2. キャンバス領域: インタラクティブな SVG キャンバスで、幾何学的要素の表示と操作が可能です。
3. 右側パネル: アイコン付きの要素リスト、追加/削除ボタン、プロパティエディタがあります。左端をドラッグしてパネルの幅を広げたり狭めたりできます。
4. 下部ステータスバー: ドキュメント ID、現在のモード、保存ステータスが表示されます。

基本的なナビゲーション

SkyPattern は、ツールバーで切り替えられる2つの入力モードをサポートしています。

マウスモード（）：

• パン: マウスホイール（中ボタン）をクリック＆ドラッグ、またはShiftキーを押しながら左マウスボタンでドラッグ
• ズーム: マウスホイールをスクロールしてズームイン/ズームアウト

トラックパッドモード（）：

• パン: 2本指スクロールで上下左右に移動
• ズーム: ピンチジェスチャー（2本指でピンチイン/アウト）

両モード共通：

• 要素を選択: キャンバスまたは要素リスト内の任意の要素をクリックして選択
• モード切り替え: ツールバーのタブで「原型」、「配置」、「メモ」モードを切り替え
• テーマ切り替え: テーマボタンをクリックしてライト/ダークモードを切り替え
• グリッド切り替え: グリッドボタン（）をクリックしてキャンバス上の1cm基準グリッドの表示/非表示を切り替えます。グリッドは配置と測定の確認に役立ちますが、エクスポートには表示されません。

要素の操作

新しい要素の追加

1. 右側パネルの ➕ ボタンをクリックするか、n キーを押します。
2. 名前のない新しい要素が作成され、選択されます。
3. エディターのドロップダウンから要素の種類を選択します。
4. 要素のプロパティを設定します。

要素タイプ

基点

• 目的: 特定の X,Y 座標に固定点を作成します
• プロパティ:
  • X 座標 (cm)
  • Y 座標 (cm)
• 例: x: 10, y: 20 は、位置 (10cm, 20cm) に点を作成します

定数

• 目的: 再利用可能な数値を定義します
• プロパティ:
  • 値（数式も使用可能）
  • 説明（任意）：定数が何を表すかを示すテキストメモ
• 例: value: 15 または value: 10 * 1.5

角度距離

• 目的: 別の点から特定の角度と距離にある点を作成します
• プロパティ:
  • 基準点: 基準点の名前
  • 角度: 方向（度単位、0° = 右/東、90° = 下/南、180° = 左/西、270° = 上/北）
  • 距離: 基準点からの距離（cm）
• 例: 「basePoint」から、角度 45°、距離 20

直線沿い

• 目的: 既存の2点間の直線上に点を配置します
• プロパティ:
  • 始点: 直線の始点
  • 終点: 直線の終点
  • 長さ: 始点からの直線沿いの距離（cm）
• 例: 直線の中間点: length: len(@point1, @point2) * 0.5

交差線

• 目的: 2本の直線が交差する位置を検索します
• プロパティ: 始点と終点のペアを使用して2本の直線を定義します
• 例: 直線1「point1」から「point2」、直線2「point3」から「point4」

XとYの交差

• 目的: ある要素のX座標と別の要素のY座標を使用して点を作成します
• プロパティ:
  • 点X: X座標を取得する要素
  • 点Y: Y座標を取得する要素

直線

• 目的: 2点間に目に見える線を描画します
• プロパティ: 始点と終点

ベジェ曲線

• 目的: コントロールハンドルを使用して滑らかな曲線を作成します
• プロパティ: コントロール角度と距離を持つ複数の点
• 使用方法: コントロールハンドルをクリックしてドラッグし、曲線の形状を調整します

円弧

• 目的: 円弧または円弧セグメントを作成します
• プロパティ:
  • 中心点: 円弧の中心
  • 半径: 円弧の半径（cm）
  • 開始角度: 開始角度（度）（0° = 右、90° = 下）
  • 終了角度: 終了角度（度）
• 例: 0° から 90° の四分円、または 0° から 360° の完全な円

高度な交差

• 円弧と曲線の交差: 円弧とベジェ曲線の交点を検索します
• 円弧と直線の交差: 円弧と2点で定義された無限直線の交点を検索します
• ベジェ曲線と直線の交差: ベジェ曲線と2点で定義された無限直線の交点を検索します
• 曲線に沿った点: 曲線に沿って特定の距離に点を配置します。距離が曲線の全長を超えてはなりません。超えた場合はエラーが表示されます。

変換要素

• 目的: 平行移動と回転を適用して要素の変換されたコピーを作成します
• プロパティ:
  • 要素: 変換する要素名の配列
  • X移動: 水平オフセット（cm）
  • Y移動: 垂直オフセット（cm）
  • 回転: 回転角度（度）
  • 回転中心: 回転の中心となる点（オプション、デフォルトは原点 0,0）
• 機能:
  • 複数の要素を一度に変換
  • 指定された回転中心点を中心に回転をサポート
  • 点、ベジェ曲線、その他の幾何学要素に対応
  • 変換された要素は、元の要素名と変換名を組み合わせて命名されます（例：point1transform1）
• 例: ["point1", "curve1"] を translateX: 10、translateY: 5、rotation: 45、pivot: "centerPoint" で変換
  • point1transform1 と curve1transform1 を作成
  • centerPoint を中心に 45° 回転し、右に 10cm、下に 5cm 平行移動
• 用途: 袖の型紙を回転して配置、襟のパーツを異なる角度で配置、装飾要素を中心点の周りに繰り返し、円形レイアウトでのパターンピースの配置

型紙ピース

• 目的: 点、線、曲線、円弧を接続して閉じた多角形を作成します
• プロパティ:
  • 点配列: 境界を定義する要素名（点、ベジェ曲線、または円弧）
  • 配置X: 配置モード用の水平位置（cm）。手動で編集するか、配置モードで型紙ピースをドラッグして設定できます。
  • 配置Y: 配置モード用の垂直位置（cm）。手動で編集するか、配置モードで型紙ピースをドラッグして設定できます。
  • 配置回転: 配置モード用の回転角度（度）（型紙ピースの中心を軸に回転）
  • 地の目角度: 地の目の方向（度、デフォルトは90°＝垂直）
  • 地の目長さ: 地の目インジケーターの長さ（cm）
  • 地の目X: ピースの中心からの水平オフセット（cm）
  • 地の目Y: ピースの中心からの垂直オフセット（cm）
  • 地の目を表示: 地の目の表示/非表示を切り替え（チェックボックス）
  • ノッチ: ノッチ（合印マーカー）を表示する輪郭点の配列
• 機能:
  • 隣接する点の間でベジェ曲線と円弧を自動的に切り詰めます
  • 塗りつぶされた閉じたパスとしてレンダリングされます
  • 図形の重心にラベルを表示します
  • 原型モード: 定義された座標で表示されます
  • 配置モード: 配置X/Y位置で表示され、地の目インジケーターが表示されます
  • 地の目: 布地の地の目方向を示す両端に矢印のある線を表示します。地の目は配置回転を調整すると型紙ピースと一緒に回転します。
• 例: 点配列: ["cornerA", "edgeCurve", "cornerB", "arcSegment", "cornerC"]
  • edgeCurve がベジェ曲線の場合、cornerA と cornerB の間で自動的に切り詰められます
  • arcSegment が円弧の場合、cornerB と cornerC の間に円弧セグメントを描画します
  • 隣接する点がない曲線と円弧は全長を使用します
  • 90°の地の目（垂直）は、布地を裁断する際にピースを正しく配置するのに役立ちます
• 用途: 洋裁型紙、技術図面、またはデザインテンプレートの型紙ピースの境界を定義します。袖ぐりや襟ぐりなどの滑らかな曲線のエッジには円弧を使用します。地の目インジケーターは、型紙ピースを裁断する際に適切な布地の地の目方向を確保するのに役立ちます。

数式の使用

ほとんどの数値プロパティは数式を使用できます。使用できる関数:

基本演算

• 10 + 5、width * 2、radius / 3
• (10 + 5) * 2 (括弧はグループ化用)
• +、-、*、/ 演算子をサポート

動的関数 (要素の操作)

• len(@point1, @point2) - 2点間の距離 (cm)
• len(@bezierCurve) - ベジェ曲線の全弧長 (cm)
• angle(@point1, @point2) - point1 から point2 への角度 (度)
• angle(@point1, @vertex, @point2) - 頂点における2本のアーム間の角度 (絶対値)
• getX(@pointName) - 点の X 座標を取得
• getY(@pointName) - 点の Y 座標を取得
• bisect(@point1, @vertex, @point2) - 頂点における2本のアーム間の角度を二等分する角度

重要: 関数内で要素名を参照する場合は、必ず先頭に @ を付けてください。例: len(@basePoint, @corner) であり、len(basePoint, corner) ではありません。

静的数学関数

• 三角法: sin(radians), cos(radians), tan(radians)
• 逆三角法: asin(value), acos(value), atan(value)
• 2引数アークタンジェント: atan2(y, x)
• 角度変換: torad(degrees), todeg(radians)
• 弦関数: crd(radians) (弦 = 2×sin(角度/2)), acrd(chord_length) (逆弦関数、ラジアンで返す)
• 指数/対数: exp(x), log(x), log10(x)
• 基本数学: sqrt(x), abs(x), pow(base, exponent), sign(x)
• 丸め: ceil(x), floor(x), round(x), trunc(x)
• 複数の引数: min(a, b, c, ...), max(a, b, c, ...)

定数と要素参照

• 組み込み定数: PI (3.14159...), GOLDEN_RATIO (1.618...)
• 要素参照: 要素名を直接使用します: myConstant, centerRadius
• 関数内の要素名: 関数呼び出しで要素名を参照するには @elementName を使用します

重要な注意事項

• 三角関数はラジアンを使用しますが、SkyPatternの角度は度数法で表されます。
• 変換関数を使用します: sin(torad(myAngle)) または todeg(asin(0.5))
• 弦関数もラジアンを使用します: crd(torad(60)) または todeg(acrd(1.5))
• 要素名は大文字と小文字が区別されます。
• 関数には括弧とカンマ区切りの引数が必要です。

要素管理

要素の選択

• キャンバス上の要素をクリックします
• 右側パネルの要素リストを使用します
• 選択された要素はハイライト表示されます
• 要素リストの虫眼鏡（🔍）ボタンをクリックしてフィルターモードを有効にすると、検索ボックスが表示され、名前で要素を絞り込めます

要素の並べ替え

• ⬆︎ と ⬇︎ ボタンを使用して計算順序を変更します
• 要素はリスト順に計算されるため、依存関係のある要素は先に配置する必要があります

要素の名前変更

• 要素エディターの名前フィールドを編集して要素名を変更します
• 名前を変更すると、数式・点フィールド・配列・変換由来の名前を含む、ドキュメント全体の参照が自動的に更新されます
• 例：p1 を名前変更すると、変換由来の名前 p1t1 も 新しい名前t1 のように自動更新されます

要素の非表示/表示

• 各要素にはエディターパネルに「非表示」チェックボックスがあります
• 非表示にした要素はキャンバスやエクスポートに表示されません
• 構築要素を一時的に隠したり、重なり合う要素を管理するのに便利です
• 非表示の要素も存在し、計算されますが、表示されないだけです

レイヤーの使い方

レイヤーを使うと、関連する要素をグループ化して表示を制御することで、複雑なパターンを整理できます。

レイヤーへの要素の割り当て:

• 要素を選択して要素エディターを開きます
• エディター内の「レイヤー名」ドロップダウンを見つけます
• ドロップダウンから既存のレイヤーを選択するか、「+ new」を選択して新しいレイヤーを作成します
• 新しいレイヤーを作成する場合は、プロンプトが表示されたらわかりやすい名前を入力します
• レイヤーに割り当てられていない要素は常に表示されます

レイヤーの表示管理:

• レイヤーパネルは右側カラムの上部に表示されます。「レイヤー」見出しの横にある三角トグル（▼/▶）をクリックすると折りたたみ/展開できます
• 各レイヤーは名前の横にチェックボックスが表示されます
• チェックあり = レイヤーがキャンバスと要素リストに表示されます
• チェックなし = レイヤーが非表示になります
• チェックボックスをクリックして、要素のグループ全体を素早くオン/オフできます

ベストプラクティス:

• 構築要素と完成した型紙ピースを別々に整理するためにレイヤーを使用します
• パターンセクション別に関連要素をグループ化します（例：「袖」「身頃」「襟」）
• 現在作業していないレイヤーを非表示にして、視覚的な混雑を減らします

使用例:

• ガイドラインや基準点用に「構築」レイヤーを作成します
• 最終的な型紙ピース用に「パターン」レイヤーを作成します

要素の削除

• 要素を選択して ➖ ボタンをクリックします
• 注意: この要素を参照している他の要素は計算ができなくなります

キャンバス操作

原型モードと配置モードとメモモード

SkyPatternには、ツールバーで切り替えられる3つの表示モードがあります。

• 原型モード: すべての要素を作成・編集する既定の作業モードです。すべての点、線、曲線、型紙ピースが定義された座標に表示されます。パターンの作図にはこのモードを使用します。

• 配置モード: 完成した型紙ピースを配置するためのレイアウトモードです。このモードでは：

  • 型紙ピースのみが表示されます（点や線などの構築要素は非表示）
  • 各型紙ピースは配置X/Y位置で表示されます
  • クリック＆ドラッグで型紙ピースを移動できます（配置X/Y値が自動的に更新されます）
  • カット、印刷、エクスポートのためのピース配置に便利です
  • 型紙ピースのラベルは見やすいように大きく表示されます

• メモモード: メモの作成と情報共有のためのリアルタイム共同編集テキストエディターです。このモードでは：

  • キャンバスの代わりにシンプルなテキストエディターが表示されます
  • リアルタイム共同編集: 複数のユーザーが同時に同じドキュメントを編集できます
  • 変更は接続されているすべてのクライアント間で自動的に同期されます
  • 接続状態インジケーターがリアルタイム共同編集の接続状態を表示します
  • すべてのメモはデータベースに保存され、セッション間で保持されます
  • パターンの指示、寸法メモ、デザインアイデア、またはチーム共同作業に便利です

座標系

• 原点 (0,0) は左上にあります
• Xは右（東）に増加します
• Yは下（南）に増加します
• 角度: 0° = 右、90° = 下、180° = 左、270° = 上
• すべての距離はセンチメートル（cm）単位です

キーボードショートカット

• n: 新しい要素を追加
• 要素の外側をクリックして選択解除

入力操作

マウスモード（既定）：

• クリック: 要素を選択
• ホイールクリック＆ドラッグ: キャンバスを移動
• Shift + 左クリック＆ドラッグ: キャンバスを移動
• ホイールスクロール: ズームイン/ズームアウト
• ベジェハンドル: クリック＆ドラッグで曲線のコントロールポイントを調整

トラックパッドモード：

• クリック: 要素を選択
• Shift + 左クリック＆ドラッグ: キャンバスを移動（2本指スクロールの代替）
• 2本指スクロール: キャンバスを全方向に移動
• ピンチジェスチャー: ズームイン/ズームアウト（2本指）
• ベジェハンドル: クリック＆ドラッグで曲線のコントロールポイントを調整

ツールバーの入力モード切り替えボタン（/）を使用して、マウスモードとトラックパッドモードを切り替えます。

保存と読み込み

クラウドドキュメント

ドキュメントID（下部のステータスバーに表示）をお持ちの場合、作業内容は500ミリ秒ごとに自動的にクラウドに保存されます。

ローカルバックアップ

ツールバーのローカルバックアップボタン（データベースアイコン）をクリックしてバックアップダイアログを開きます。

• ローカルバックアップを保存: デザインのJSONファイルをコンピュータにダウンロードします
• バックアップから読み込み: 以前に保存したJSONファイルを選択するファイルピッカーを開きます
• オフラインでの作業やデザインの共有に便利です。

パターンウィザード

パターンウィザードは、型紙のカスタマイズ・配置・印刷という一連のワークフローを案内します。測定値があらかじめ設定されたテンプレート型紙を使用する際に特に便利です。

ウィザードを開く： ツールバーの魔法の杖ボタンをクリックしてウィザードパネルを開閉します。

ステップ① — 寸法の調整

ウィザードには、説明が設定されているすべての定数要素が一覧表示されます。値を編集するとパターンがリアルタイムで更新されるため、次に進む前に変更の効果を確認できます。

各フィールドの説明（例：「胸囲」「背丈」）を読んで、何を調整しているかを理解してください。

ステップ② — 配置の確認

印刷する前に、各型紙ピースを仮想印刷キャンバス上に配置する必要があります。配置（ピース）モードに切り替えて、各ピースの印刷位置を確認・調整します。

• 配置を自動計算する： このボタンをクリックすると、段積みアルゴリズムを使用してすべてのピースが重ならないように自動的に配置されます。すぐに結果を確認できるよう、ピースモードに切り替わります。
• 手動調整： ピースモードでピースをクリックしてドラッグすると、位置を微調整できます。手動での配置は、自動アルゴリズムよりもはるかに密度が高く、用紙を効率よく使える配置が実現できます。

ステップ③ — PDF 設定の確認

PDF 印刷設定をクリックして印刷ダイアログを開きます。用紙サイズ、向き、重なりのマージン、ページグリッド（列数×行数）を設定します。

• 縦横枚数を自動計算する： すべてのピースを収めるために必要な最小ページ数を自動的に計算し、合計ページ数が最小になるよう縦向きまたは横向きを選択します。

ステップ④ — 製作開始

PDF を印刷したら、ページを組み合わせて実物大の型紙を作成します。ウィザードには組み立て手順が含まれています。以下の印刷ページの組み立てを参照してください。

ステップ⑤ — 縫製開始

メモタブを開くをクリックして、このパターンドキュメントに添付されている作り方のメモや縫製説明書を確認します。

印刷ページの組み立て

印刷後、次の手順に従って個別のページを1枚の大きな型紙に組み立てます。

ページレイアウトの説明

各印刷ページには次の内容が含まれています：

• 左上隅のページラベル：「Page(1,1)」「Page(2,1)」など
  • 1つ目の数字 = 列（左から右）
  • 2つ目の数字 = 行（上から下）
• 2種類の線を持つ重なりマージン：
  • 実線 — 裁断線（ここで切る）
  • 破線 — 重なりの境界線
• 中央のパターンライン

組み立て手順

1. すべてのページを並べる（大きなテーブルまたは床の上）
   • ページラベルに従ってグリッド状に並べる
   • Page(1,1) を左上に、Page(2,1) をその右に配置する
2. 内側のページをカットする
   • 四方に隣接ページがあるページは、実線の重なり線に沿って切る
   • 端のページは重なりマージンを残す
3. 位置を合わせてテープで固定する
   • 上の行から始める
   • ページを重ね、パターンラインと印を合わせる
   • 重なりゾーンを使って正確に位置を合わせる
   • 表面をきれいに保つために、裏からテープで固定する
   • 行ごとに作業し、最後に行同士をつなぎ合わせる
4. 位置合わせを確認する
   • ページをまたいでパターンラインがスムーズにつながっていることを確認する
   • ラインが合わない場合は、100% スケールで印刷したか確認する

ヒントとベストプラクティス

要素の命名

• 「centerPoint」、「radius」、「cornerAngle」のように、わかりやすい名前を付けます。
• 名前は数式で使用されるため、スペースや特殊文字は使用しないでください。
• キャメルケースまたはアンダースコアを使用します（例：baseWidth または base_width）。
• 全角文字は自動的に半角に変換されます：日本語や中国語のキーボードで全角文字を入力した場合、自動的に半角に変換されます（例：ａ → a、１ → 1）。

複雑なデザインの構築

1. 基点から始めて主要な位置を決定します。
2. 重要な測定値には定数を作成します。
3. 角度/距離要素と直線要素を使用して、関連点を作成します。
4. 直線と曲線を追加してデザインを視覚化します。
5. 交点を使用して派生点を見つけます。

数式の例

• 定数: myRadius / 2 - 半径定数の半分
• 垂直角度: angle(@center, @corner) + 90 - 角度から90度
• 位置のシフト: getX(@point1) + 5 - X位置を右に5cm移動
• 中点の距離: len(@point1, @point2) * 0.5 - 2点間の距離の半分
• 線上の分数: len(@point1, @point2) / 3 - 距離の3分の1
• 三角法: sin(angle(@p1, @p2) * PI / 180) * 10 - 角度のサインに10を掛ける
• 複雑な式: sqrt(pow(getX(@p2) - getX(@p1), 2) + pow(getY(@p2) - getY(@p1), 2)) - 距離の公式
• 角度の二等分線: bisect(@arm1, @vertex, @arm2) - 2つのアームを均等に分割する角度
• 最小/最大: max(getX(@p1), getX(@p2), getX(@p3)) - 最も右のX座標

トラブルシューティング

• 要素が計算されない: 参照されているすべての要素が存在し、最初に計算されていることを確認してください。
• 予期しない位置: 数式と要素の順序を確認してください。
• パフォーマンスの問題: 複雑な曲線を単純化するか、要素数を減らしてください。
• 曲線に沿った点の「距離が範囲外」エラー: 距離の値が曲線の全長を超えています。距離を小さくするか、len(@曲線名) で曲線の長さを確認してください。

高度な機能

ベジェ曲線の編集

• ベジェ曲線を選択すると、コントロールハンドルが表示されます。
• ハンドルをドラッグして曲線の形状を調整します。
• コントロール角度は度、距離はキャンバス単位(cm)で表されます。

円弧と曲線の交差

• 正確な交点を見つけるのに役立ちます。
• 交点インデックスで、使用する交点を選択します(0、1、2...)。

動的測定

• 依存関係が変更されると、要素は自動的に更新されます。
• 基本値を変更することで、パラメトリックなデザインを作成できます。

このガイドでは、SkyPatternの基本機能について説明します。 さまざまな要素タイプと数式を試して、複雑な幾何学的デザインを作成しましょう。