開発ガイドフローノード 1：YiDA アプリの作成
まず、YiDA ワークスペースでアプリを作成します（詳細は使い方ガイドを参照）。既に利用可能なアプリがある場合は、この手順をスキップします。以下の例では、demo example という名前の空アプリを作成します。
フローノード 2：カスタムページの作成
次に、デモを実装するためのカスタムページを作成します。今回はページテンプレートを使用しないため、テンプレート選択画面でSkip をクリックし、カスタムページデザイナーへ直接進みます。
YiDA のカスタムページデザイナーは以下のとおりです。機能の詳細については、デザイナードキュメントを参照してください。デザイナーに入った後、現在のページ名を変更できます。
フローノード 3：コンポーネントのドラッグと属性の設定
このデモは非常にシンプルで、3 つのコンポーネントのみで構成されています。コンポーネントライブラリパネルからキャンバスへドラッグしてください。コンポーネントの設定オプションの詳細については、コンポーネントドキュメントを参照してください。- 入力フィールド — 名前を入力するために使用します。
Title属性を「名前」に設定します。 - ボタン — 入力された名前を読み取り、挨拶文を生成するために使用します。
Title属性を「生成」に設定します。 - テキスト — 挨拶文を表示するために使用します。見栄えを整えるため、スタイルパネルで上マージンを 20px、フォントサイズを 20px に設定します（下図参照）。
フローノード 4：グローバル変数の作成
この手順からロジックを実装していきます。まず、挨拶文を保存するためのグローバル変数を作成します（グローバル変数の使い方の詳細は、グローバル変数ドキュメントを参照）。以下のように、helloWord という名前のグローバル変数を作成します。
フローノード 5：ボタンのクリックイベントのバインド
ユーザーがボタンをクリックした際、入力フィールドの内容を読み取り、生成した挨拶文を下部に表示する必要があります。ここでは、イベントのバインド方法と挨拶文の生成方法について解説します。 1. ボタンにクリックイベントをバインドします。以下のように、バインド後にアクションパネルへ JS 関数が自動生成されます（関数名はカスタマイズ可能）。 2. getValue API を使用して入力フィールドの内容を読み取ります。YiDA は豊富な YiDA JSAPI を提供しています。以下のように、入力フィールドコンポーネントの固有識別子に基づき、ユーザーの入力を取得します。 3. 挨拶文を組み立て、setState API を使用してグローバル変数を更新し、ページの再レンダリングをトリガーします。onClick の完全なコードは以下のとおりです。フローノード 6：テキストとデータソース変数のバインド
最後の手順として、表示のためにグローバル変数を Text コンポーネントのContent 属性にバインドします（下図参照）。
フローノード 7：プレビューと公開
これでデモは完成です。デザイナー右上のPreview ボタンをクリックしてプレビューします。
プレビュー後、Save ボタンをクリックしてページを保存します。その後、アプリ右上のアクセスボタンをクリックすると、先ほど構築したデモページを開くことができます。