IM-BloomMaker for Accel Platform IM-BloomMaker チュートリアルガイド 初版 2019-08-30

4.4. デザイナ画面を開く

次に、アプリケーション画面を作成するための「デザイナ」画面を確認していきます。

4.4.1. デザイナ画面を開く

  1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。

  2. デザイン編集を行うコンテンツをコンテンツツリーから選択しクリックします。

  3. 「デザイン編集」をクリックします。

    ../../../_images/open_designer_screen_01.png
    図:「デザイン編集」
  4. 「デザイナ」画面が表示されます。

4.4.2. デザイナ画面の詳細

デザイナ画面は、用途に応じて複数のペイン(区画)に分かれています。
各ペインの詳細は以下のとおりです。
../../../_images/open_designer_screen_02.png
図:「デザイナ」画面 - 初期表示
  1. ヘッダ

    デザイナに対する基本的な操作を提供するヘッダです。
    上書き保存といったコンテンツに対するアクションや、コピー・貼り付けといったアプリケーションを構成する要素の操作などが行えます。
  2. エレメントパレット

    アプリケーションを構成するエレメントの一覧です。この一覧から利用するエレメントを選択し、コンテナ上に配置します。
  3. コンテナ

    エレメントを配置しアプリケーションを構成する画面です。
  4. コンテナヘッダ

    アプリケーション画面のページを設定する画面です。
  5. プロパティタブ

    コンテナに配置したエレメントに対し、エレメント固有の動作や見た目などを設定する画面です。
  6. 変数タブ

    アプリケーション画面が保持する情報を変数として設定する画面です。
  7. アクションタブ

    エレメントに対して特定の操作が行われたときに実行される処理を設定する画面です。
  8. 画面構成タブ

    コンテナに配置されているエレメントの並び順や構成を閲覧するための画面です。

コラム

ヘッダから、「プレビュー」アイコンをクリックして「プレビュー」画面を表示することで、チュートリアルを実施中にいつでもアプリケーションの確認ができます。
次節「ページを設定する」では、作成するアプリケーションに複数の画面を持たせるための設定を行います。