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

2. コアコンセプト

Projects, Pages, and Widgets Intro（プロジェクト、ページ、ウィジェットの紹介）​

Project​

  • 独立して完結したアプリです — アプリケーションを構成するすべてのファイルはassetsフォルダ配下に整理されます（pages、scripts、providers、themeなど）。新規プロジェクトを作成すると、これらのファイルは自動的に生成されます。
  • プロジェクトの作成・管理方法について詳しくはManage Projects in Lucy Team Cloudをご覧ください。

Page​

  • Pageはアプリの1つの画面であり、画面間を移動する単位です — ナビゲーション層と考えるとよいでしょう。
  • 各Pageの中には、実際に動くインタラクティブなコンテンツを保持するFormがあります — インタラクション層です。
  • Formはページのウィジェットツリー、スクリプト、データを保持します。
  • 補足：ここでいうFormはFormContainerウィジェットとは異なります — FormContainerウィジェットを使うと、1つのFormを別のFormの中に埋め込むことができます。
  • ページの作成・管理方法について詳しくはLayout and Screen Designをご覧ください。

Widget​

  • Widgetは、Formの中に配置する視覚的な構成要素です。

Layout Concepts（レイアウトの概念）​

  • レイアウトウィジェットは、Lucy Studioでデザインを構成する最も基本的な要素です。ページに構造を与え、その中のウィジェットを整列できるようにします。Lucy Studioではすべてのレイアウトウィジェットが1つのセクションにまとめられていますが、概念的にはBasic・List・Areaの3グループに分けて考えられます。
  • 以下は各ウィジェットの簡単な紹介です。個々のレイアウトウィジェットとそのプロパティ、より詳しいレイアウトの概念についてはLayout and Screen DesignとWork with Widgetsをご覧ください。

Basic Layout Widgets​

レイアウトウィジェットは、その中に他のウィジェットを保持します。レイアウトの中に置かれたウィジェットはそのレイアウトの**child（子）であり、レイアウトはその子のparent（親、1つ上の階層）です。同じparentを共有するウィジェット同士はsibling（兄弟、同じ階層）**です。このparent → child → siblingという構造をウィジェットツリー(widget tree)と呼びます。

ウィジェットツリーの構造

  • Column vs Row：

    • Column：子を上から下へ配置します。
    • Row：子を左から右へ配置します。

    ColumnとRowの比較

  • Stack：子同士を重ねて配置します（パンケーキを積み重ねるイメージです）。

    Stackレイアウト

  • Wrap：子を1行に並べていき、収まりきらなくなった分を次の行へ折り返します。

    Wrapレイアウト

  • Main-Axis vs Cross-Axis：

    • Column — Columnは子を上から下へ配置するため、main-axis（主軸）は縦方向、cross-axis（交差軸）は横方向になります。

    Columnのmain-axis

    • Row — Rowは子を左から右へ配置するため、main-axis（主軸）は横方向、cross-axis（交差軸）は縦方向になります。

    Rowのmain-axis

List Layout Widgets​

  • ListView：1次元方向にスクロールするリスト
  • GridView：2次元グリッドレイアウト
  • MasonryGrid：高さの異なるカードを固定列に配置

Area Layout Widgets​

  • SafeArea：モバイル端末のノッチ、ナビゲーションバー、ホームインジケーターと重ならないよう自動的に余白を追加します。
  • Card：グループ化されたコンテンツをまとめるMaterialスタイルのカードコンテナ
  • PageView：ページ単位でスクロールするビュー
  • VSplit：ページ領域を縦に分割します
  • HSplit：ページ領域を横に分割します

Applying Style to Widgets（ウィジェットへのスタイル適用）​

すべてのウィジェットは、ウィジェットスタイルと呼ばれる内側のデコレーターで包むことができます。他のウィジェットを保持するレイアウトウィジェットとは異なり、ウィジェットスタイルは1つのウィジェットだけを包み、その周囲のウィジェットツリー構造を変えずに見た目や振る舞いだけを変更します。同じウィジェットに複数のスタイルを重ねて適用でき、最も外側から内側の順に適用されます。

これらのスタイルの適用方法・活用方法について詳しくはStylesをご覧ください。

Design System & Components（デザインシステム & コンポーネント）​

Design System​

Lucyのデザインシステムは、Styles ダイアログで管理する再利用可能なスタイル一式です — Text Styles、Color Themes、Icon Sets。一度定義すればアプリ全体で再利用でき、定義を変更するとそれを使っているすべての箇所が自動的に更新されます。これにより、すべての画面で一貫した見た目を保てます。

Styles ダイアログ

  • Text Styles：名前を付けた、再利用可能なタイポグラフィ
  • Color Themes：名前を付けた色で、ライト/ダークテーマのバリエーションを持ちます。Color Themesはテーマを認識するため、1つの色がライト/ダークでそれぞれ異なる値を持つことができ、アプリは実行中にテーマを切り替えられます（$app.changeTheme）。
  • Icon Sets：再利用可能なアイコンの集合

Components​

Lucy StudioのComponentは、一度作成してアプリ全体で再利用できるウィジェットグループです。マスターを変更すると、アプリ全体のインスタンスも合わせて更新されます。Lucy Studioでのコンポーネントの使い方についてさらに詳しくはWork with Widgetsをご覧ください。

  • Component vs. page — pageは遷移可能な画面であり、componentはページの中に埋め込む再利用可能なパーツです。
  • Master vs. instance — マスター定義は1つで、それを使う各箇所がインスタンスになります。インスタンスはそれぞれ独自の値（インスタンスごとのプロパティ・変数）で上書きできます。

Data Binding（データバインディング）​

Data Bindingは、ウィジェットのプロパティの値がどこから来るかをあらかじめ決めておく仕組みです。ウィジェットのProperties パネルでプロパティを選ぶと、すでに値を持っている事前定義済みのData Setに接続できます。

一度接続すると、接続元のソースが変わるたびにLucy Studioが自動的にウィジェットを最新の状態に保ちます。この点が、スクリプトで直接値を設定する場合と異なります — スクリプトはその瞬間に一度だけ値を送り込みますが、bindingはソースを監視し続け、値が変わるたびに反応します。

各接続先の詳細についてはData and State Managementをご覧ください。

Script（スクリプト）​

Lucy Studioは標準のJavaScriptとプラットフォームAPIを組み合わせることで、複雑なロジックや動的な振る舞いを実装できます。例えば、ユーザーイベントにリアルタイムで反応したり、実行中にウィジェットのプロパティを動的に変更したり、サーバーにデータをリクエストして画面に反映したり、ページ間の遷移のようなアプリのフローを制御したりできます。

画面に配置したウィジェットは自動的にスクリプトのグローバルオブジェクトとして登録されるため、スクリプト内でウィジェットのIDを使って直接参照できます（例：button1.visible = false）。

スクリプトの書き方や利用できるグローバルオブジェクト・関数の詳細についてはLogic and Scriptingをご覧ください。

Animation Mode​

Animation Modeは、コードを書かずに画面上で直接ウィジェットの動作条件と実行ロジックを組み立てられるNoCodeロジックツールです。UI上で条件と反応を選んでつなぐだけで複雑なインタラクションを組み立てられるため、スクリプトなしでも素早く直感的にロジックを構成できます。大きく3つの機能で構成されています。

  • Detect Transition 変数やウィジェットのプロパティ値の変化を検知し、設定した条件が満たされると登録済みの反応を自動的に実行します。
  • State Transition ウィジェットが別の状態に変わるときに再生されるアニメーション効果を設定します。（例：ボタンの色が別の色にフェードする）
  • Action 特定のユーザー操作（イベント）に応じて実行するロジックを設定します。（例：ボタンをタップしたときにページへ遷移する）複数のActionを順番に、または並行して実行でき、条件によって実行するかどうかを制御できます。

詳細についてはStudio Interfaceセクションをご覧ください。

Workflow: Build in Studio, Preview in Player（ワークフロー：Studioで制作し、Playerでプレビュー）​

What Lucy Player Is（Lucy Playerとは）​

Lucy Playerを使うと、Lucy Studioで作成したデザインをリアルタイムでテストできます。iOS、Android、Windows、macOSで動作するため、実機で画面をプレビューできます。

How Studio & Player Connect（StudioとPlayerの接続方法）​

環境に応じて、Lucy PlayerとLucy Studioの接続にはいくつかの方法があります。

  • 同じネットワークに接続している場合、Lucy StudioがLucy Playerを自動的に見つけます。
  • 同じコンピューター上で実行している場合、Lucy Playerはすぐに検出されて接続されます。
  • 異なるネットワークに接続している場合（例：モバイルデータ通信を使用している場合）は、Lucy Studioが生成したQRコードをスキャンする必要があります。

Live Preview（ライブプレビュー）​

キャンバスでページを編集すると、実機ですぐに編集内容を確認しながら、デザインが実際にどう見えるかを正確に把握できます。Lucy Playerに接続し、画面を送信するデバイスを選び、Lucy StudioのAction barで再生ボタンを押すだけです。Lucy Playerのセットアップ方法とLucy Studioとの接続手順の詳細についてはTest and Debugをご覧ください。