メインコンテンツまでスキップ

Panel

Panelは画面右側にあり、現在選択しているウィジェットの詳細なプロパティや機能をリアルタイムで編集できるパネルです。

Canvasで選択したウィジェットの色、フォント、サイズ、アニメーション、イベント、データバインディングなど、さまざまなプロパティを直感的に設定・変更できます。

作業モード（Design Mode / Animation Mode）によって、Panelで設定できる機能が変わります。

Design ModeAnimation Mode
主な目的アプリの機能・構造・データ連携を定義アプリのインタラクションと視覚効果を定義
主要タブProperty、Style、Data Set、Provider Instance、VariableAction、Detect Transition、State Transition
中心的な役割ウィジェットに何を表示し、どのデータを使うかを設定ウィジェットに何が起きたときに、どう動かすかを設定

Design ModeでのPanelの機能​

Design Modeは、UI配置、データ連携、変数管理などアプリの機能と構造を開発するための基本の作業モードです。

このモードでは、Panelは**8つのメニュー（Property、Style、State、Data Set、Variables、Provider Instance、i18n、Local History）**で構成されます。

Design ModeのPanel構成

1. Property タブ​

選択したウィジェットの基本的な機能と動作方式を設定する領域です。

  • 基本プロパティの設定： ウィジェットの名前、表示可否（Visibility）、位置制御、整列（Alignment）など、ウィジェット固有のプロパティを設定します。
  • ウィジェットごとの詳細設定： Page、Form、Row、Imageなど、選択したウィジェットの種類に応じて、ページ作成、データバインディング、レイアウト整列などの固有のプロパティを設定します。

2. Style タブ​

ウィジェットの視覚的なデザイン要素を設定する領域です。

  • 背景・外枠の設定： 背景色、ボーダー（Border）、角丸（Radius）、ボックスシャドウ（Box Shadow）などを設定します。
  • 変換（Transform）： Transform機能を使って、ウィジェットのサイズ、回転、位置などを調整します。
  • ジェスチャー検出（Gesture Detector）： タップ（Tap）、ドラッグ（Drag）など、ユーザーのタッチジェスチャーに反応するイベントをウィジェットに設定できます。
  • 装飾（DecoratedBox）： ウィジェットにBox Decorationを適用し、複雑な背景デザインを実現します。

3. Data Set タブ​

ウィジェットにバインドするデータの構造と定義を設定する領域です。

Data SetとProvider Instanceの関係
Data SetはUIにバインドするための構造化データコンテナで、Provider Instanceは外部データの呼び出しを担当します。

  • Data Setの作成： 独自のData Setを作成し、使用するデータの項目（Group/Item）と構造を定義します。
  • Provider Instance連携： すでに定義済みのProvider Instanceに接続し、データ構造を取得してData Setに定義できます。
  • Data Binding： Contents Data Setを活用して、ウィジェットにデータを接続（バインディング）します。

4. Provider Instance タブ​

外部データソース（API）との通信を定義・設定する領域です。サーバーとのデータ送受信ロジックを管理します。

  • Instanceの作成： 使用するデータ Providerを検索・選択してInstanceを作成します。
  • Callタブの設定： API呼び出しに必要なパラメータを設定し、定数値や他のウィジェットのプロパティ値と接続（バインディング）します。
  • Responseタブの設定： API呼び出しの結果として受け取るレスポンスデータ構造を定義し、必要なデータだけを抽出して使えるようマッピングします。

5. Variable タブ​

アプリ内でデータを一時的に保存・操作するための変数を作成・管理する領域です。

  • 変数の種類： ページ全体で有効なPage Variable、またはForm内で有効なForm Variableとして作成できます。
  • 複合変数： **Simple（単純）な変数や、複数の項目を持つComplex（複合）**変数を作成できます。
  • Grid Variable： Grid 形式のウィジェットで使う変数を作成・管理します。

6. State タブ​

ウィジェットがhover、pressed、focused、disabled、selectedなどの状態のときに、プロパティ値を切り替えられる領域です（例：ボタンの背景色を通常は青、hover時は水色に）。

  • 状態の登録： hover/pressed/focusedのようにマウスの侵入・クリックなどで自動的に検出される状態のほか、disabled/selectedや自分で定義したカスタム状態を追加できます。カスタム状態はスクリプトやバインディングで直接オン・オフします。
  • プロパティの上書き： 状態ごとに変更するプロパティと値を指定します。
  • トランジション時間： 状態が切り替わった瞬間に値が即座に変わるのではなく、指定した時間（ms）かけてなめらかに変化するよう設定できます。
  • Propagate to children： 子ウィジェットにも同じ状態を一緒に適用するかどうかを設定できます。

7. i18n タブ​

ウィジェットのテキストなど、翻訳可能な文言を言語ごとに管理する領域です。

備考

このタブはFree プランではロックされており、Pro・Enterprise プランで使用できます。

  • 自動翻訳： 「Auto Translate」をクリックすると、検出された対象のTEXTを一度に自動翻訳できます。
  • プロジェクトの対応言語・デフォルト言語・自動翻訳サービスの設定は、別のプロジェクト設定で管理します。

8. Local History タブ​

作業中の内容を一定間隔で自動的に記録しておく、ローカル専用のセーフティネット機能です。保存し忘れて作業内容を失ってしまったときに、以前の状態に戻せます。

  • Auto Save（自動保存）： 編集中は、設定した間隔（デフォルト30秒、設定で10秒〜5分に調整可能）ごとに現在の状態が自動的に記録されます。
  • Manual Save（手動保存）： 好きなタイミングでコメントを残しながら手動で保存できます。
  • Milestone（マイルストーン）： 保存済みバージョンのうち重要な時点をマイルストーンとして指定し、長期間保護できます。
  • Compare（比較）： リストから2つの時点を選び、何が変わったかを比較できます。
  • Restore（復元）： 全体、または選んだ項目（スクリプト、画面構成、変数など）だけを、以前の状態に戻せます。復元前の現在の状態は自動的にバックアップされます。
警告

Local Historyは自分のPCにのみ保存されるローカル専用の記録です。プロジェクトを別のコンピューターに移したり、チームメンバーと共有したりしても、履歴自体は一緒には移動しません。

Animation ModeでのPanelの機能

Animation Modeは、ウィジェットとページ間のアニメーションおよびインタラクションを設定する作業モードです。

このモードでは、Panelは**3つのタブ（Action、Detect Transition、State Transition）**で構成されます。

Animation ModeのPanel構成

1. Action タブ​

ユーザーの特定の操作に反応して実行されるロジックを設定する領域です（例：ボタンをタップしたときにページ遷移）。

  • イベントの定義： ウィジェットで発生する**イベント（Event）を選択し、そのイベント発生時に実行するアクション（Action）**を指定します。
  • 順次実行： 複数のアクションを並行（同時）または順番に実行でき、作業フローを自由に構成できます。
  • 条件の設定： 特定の条件が満たされたときだけアクションが実行されるよう設定でき、複雑なロジックを実現できます。

2. Detect Transition タブ​

Lucy Studio内で変数やコントロールのプロパティ値の変化を監視し、設定した条件が満たされると登録済みのEvent Responseを自動的に実行する機能です。

  • リアルタイムの状態変化の検出と、自動的なイベント実行に最適化された機能です。
  • シンプルなUI操作だけで、望む条件と反応を簡単に登録・変更できます。

3. State Transition タブ​

ウィジェットが別の状態（State）に変わるときに現れる繊細なアニメーション効果を設定する領域です（例：ボタンの色の変化）。

  • トランジションタイプ： タイプにはLayout、Action、Condition、Linkがあります。
    • Layout： スタイルを含むウィジェットのプロパティの数値を、Interval（一定時間）かけて変更できます。
    • Action： アクションを実行できます。
    • Condition： Conditionがtrueであれば、該当のトランジショングループを実行できます。
    • Link： 該当のトランジショングループを実行できます。

Design ModeのState（6番目のタブ）とは異なる機能です。
State Transitionは特定のトリガーが発生したときに再生されるタイムラインアニメーションであり、Stateは「今この状態かどうか」によってプロパティを切り替える機能です。