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

Hello, Lucy（クイックスタート | 10 - 15min）

Welcome to Lucy Studio!
このガイドはLucy Studioを初めて使う方のために用意しました。
シンプルなWelcome画面を自分で作りながら、Lucy Studioの核心を学んでみましょう。

次のような完成物を作ります:

完成したWelcome画面

インタラクティブチュートリアルの使い方

各ステップのフレームにある矢印・強調エリア・ツールチップに沿って進めてください。パルスの点をクリックするか、下部のドットでステップを移動できます。

学べること​

  • Form Containerでレイアウトを作る — UIの基本構造を理解する
  • Textを配置して整列する — タイポグラフィと階層構造
  • ImageとButtonを追加する — インタラクティブな要素を扱う
  • 完成したデザインを見る — Lucy Studioの成果物を確認する

必要なもの: インストール済みのLucy Studio

このガイドを始める前に​

✅ Lucy Studioはインストールされていますか？

まだの場合はインストールガイドを先に読んでください。（2〜3分）

ステップ1: チュートリアルプロジェクトをクローンしてファイルを開く​

目標: Lucy Studioを開いてTutorialをクローンし、チュートリアルファイルを開きます。

  1. Lucy Studioを開き、クローンしたプロジェクトフォルダを開きます。
  2. フォルダ内でtutorials > quick_start_tutorialファイルを探してクリックします。
  3. クリックすると次のような画面が表示されます。右側の空きスペースでチュートリアルを試してみてください。

チュートリアル開始画面

ステップ2: ColumnとForm Containerを追加する​

目標: Columnとその中にForm Containerを追加して、レイアウトの骨組みを作ります。

  1. 左のPlateからColumnをキャンバスに追加します。
  2. 左のPlateからForm Container（Formウィジェット）を追加します。
  3. Formウィジェットを選択し、Style PanelでSizedBoxを追加したあと、横は無限（∞）、縦は200pxに指定します。
  4. Property PanelでformId（読み込むform lfpのパス）を入力します。
  5. Style PanelでClipRRectを追加してborderRadiusを指定します。
  6. Columnを選択し、Style PanelでPaddingを追加します。
  7. Style PanelでDecoratedBoxを追加して、Color・Border・BorderRadiusを指定します。
    • 用意された例をクリックすると、style panelにcolorとborder、そしてborder radiusが適用されているのを確認できます。例に使われているカラーと太さを見て、同じように適用してみてください。
STEP 2
PanelからColumnウィジェットを キャンバスにドラッグ&ドロップ

ステップ3: Textウィジェットを追加する​

目標: Columnの中にタイトルとサブタイトルのテキストを配置します。

タイトルテキストの追加​

  1. 左のWidget Tree PlateのColumnで右クリックし、Add a child to this widgetを選択してTextウィジェットを追加します。
  2. 追加したTextウィジェットを選択し、Property PanelでText・FontSize・FontWeight・Colorを指定します。
  3. テキストを**「Welcome to Lucy Studio」**に変更します。

サブタイトルテキストの追加​

目標: タイトルの下に説明テキストを追加します。同じ方法でColumnにTextウィジェットをもう1つ追加します。

  1. 追加したTextウィジェットを選択し、Property Panelで次のテキストを指定します:

    Design. Develop.
    All in One Studio.

💡 重要: このテキストは2行で表示される必要があります。

STEP 3
左のWidget Tree PlateのColumnで右クリックし、「Add a child to this widget」を選択してTextウィジェットを追加

ステップ4: 画像を追加する​

目標: 画像を追加して視覚的な要素を加えます。

  1. 左のWidget Tree PlateのColumnで右クリックし、Add a child to this widgetを選択してRowウィジェットを追加します。
  2. 左のImage PanelからImageウィジェットをキャンバスにドラッグ&ドロップします。
  3. Imageウィジェットを選択し、Property PanelでSizeを指定します。

💡 ヒント: 画像のサイズを調整するには、画像を選択して右のパネルでwidth/heightを設定してください。

STEP 4
左のWidget Tree PlateのColumnで右クリックし、「Add a child to this widget」を選択してRowウィジェットを追加

ステップ5: 「Get Started!」ボタンを追加する​

目標: インタラクティブな要素を追加して完成度を高めます。

  1. 左のWidget Tree PlateのColumnにButtonウィジェットを追加します。

  2. Buttonを選択し、Property PanelでSize・Radius・FillColor・Text・TextStyleを指定します。（テキストは「Get Started!」、色は紫系）

  3. Buttonをインタラクティブにするため、そのButtonにIDを指定します。

  4. スクリプトウィンドウを開き、次の簡単なコードを貼り付けます。

    btn_get_started.onClick = function () {
      btn_get_started.setProperty('text', 'Welcome to Lucy Studio!');
    };

  5. 最後にColumnを選択し、Style PanelでPaddingを追加して全体の余白を整えます。

STEP 5
Widget Tree PlateでColumnにButtonウィジェットを追加

完成しました! 🎉​

自分の手で作ったWelcome画面です。

作った成果物をデバイスやLucy Playerで表示して、ボタンをタップしてみましょう。

学んだこと:

  • ✓ Form Containerでレイアウト構造を理解
  • ✓ Textの配置と整列を体験
  • ✓ Imageなどさまざまなウィジェットを扱う
  • ✓ 簡単なScriptの作成でインタラクティブなButtonを作る
  • ✓ Lucy Studioの核心ワークフローを体験

次は?

  • Build your first CRUD App : 30-40min Tutorial（準備中）