CookBook

IM-BloomMaker でページ切り替え時にアニメーションを付加する方法

投稿日:

このCookBookではエレメントの固有IDとCSSエディタを組み合わせ、「ページを開く」アクションでページ切り替え時に、横方向にスクロールするようなアニメーションが行われる画面を作成していきます。

完成イメージ

このCookBookで作成するサンプル画面です。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートファイル: cookbook_189918_im_bloommaker-data
IM-BloomMaker のインポート画面からインポートしてください。
なお、インポート後には IM-BloomMaker ルーティング定義の認可設定が必要ですのでご注意ください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/189918
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 変数の作成
    一覧画面と詳細画面に表示するアイテム情報を格納するための変数を作成します。

  2. 一覧画面の作成
    アイテム情報が格納された変数の内容を一覧表示する画面を作成します。

  3. 詳細画面の作成
    一覧画面で選択したアイテム情報を個別に詳細表示する画面を作成します。

  4. CSSの設定
    コンテナページ切り替え時にアニメーションを行うCSSを追加します。

  5. アクションの作成と割り当て
    一覧画面と詳細画面を行き来するためのアクションを作成します。

1.変数の作成

ここでは、一覧画面と詳細画面に表示するアイテム情報を格納するため、以下の変数を作成します。

変数 説明
items 一覧画面表示用のマップ型・1次元配列の変数
selectedItem 詳細画面表示用のマップ型変数
  1. コンテンツ種別「Bulma」のコンテンツを作成し、「デザイン編集」ボタンをクリックしてください。
  2. 「変数」タブをクリックしてください。
  3. プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックしてください。
  4. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

ノート:
name 以外にアイテム情報を追加することができます。
このとき、items 配下のキーと selectedItem 配下のキーは一致させてください。

一覧画面の作成

ここでは、アイテム情報が格納された変数の内容を一覧表示する画面を作成します。
この画面では、以下のエレメントを配置していきます。

  • 見出しレベル1
  • カラム(繰り返し)
  • ボタン
  1. 「New Page #1」タブを開いてください。
  2. 「コンテナページ」が選択されていることを確認してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      name:Item List
    • 「共通」プロパティを以下のように設定してください。
      ID:list-container
  3. 「コンテナページ」に「レイアウト(Bulma)」-「見出しレベル1」を配置してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      textContent(固定値):Item List
    • 「余白」プロパティを以下のように設定してください。
      外余白(左)(固定値):2%
      外余白(右)(固定値):2%
  4. 「コンテナページ」に「繰り返し(Bulma)」-「カラム(繰り返し)」を配置してください。
    • 「余白」プロパティを以下のように設定してください。
      外余白(左)(固定値):5%
      外余白(右)(固定値):5%
  5. 配置した「カラム(繰り返し)」の配下にある「カラムアイテム(繰り返し)」を選択してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      list:$variable.items
  6. 「カラムアイテム(繰り返し)」に「フォーム部品(Bulma)」-「ボタン」を配置してください。
  7. 配置した「ボタン」の配下にある「ボタン要素」を選択してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      textContent(変数値):$variable.items[$index].name
      color(固定値):success
      fullwidth:チェックボックス オン

詳細画面の作成

ここでは、一覧画面で選択したアイテム情報を個別に詳細表示する画面を作成します。
この画面では、以下のエレメントを配置していきます。

  • 見出しレベル1
  • カラム(繰り返し)
  • ボタン
  1. 「Item List」タブの右隣にある「+」アイコンをクリックしてコンテナページを追加してください。
  2. 「コンテナページ」が選択されていることを確認してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      name:Details of item
    • 「共通」プロパティを以下のように設定してください。
      ID:details-container
  3. 「コンテナページ」に「レイアウト(Bulma)」-「見出しレベル1」を配置してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      textContent(固定値):Details of item
    • 「余白」プロパティを以下のように設定してください。
      外余白(左)(固定値):2%
      外余白(右)(固定値):2%
  4. 「コンテナページ」に「レイアウト(Bulma)」-「コンテナ」を配置してください。
    • 「余白」プロパティを以下のように設定してください。
      外余白(左)(固定値):5%
      外余白(右)(固定値):5%
  5. 「コンテナ」に「フォーム部品(Bulma)」-「水平フィールド」を配置してください。
  6. 配置した「水平フィールド」の配下にある「水平フィールドラベル」を選択してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      label(固定値):Name
  7. 配置した「水平フィールド」の配下にある「水平フィールドボディ」-「フィールド」-「フィールドコンテンツ」に「フォーム部品(Bulma)」-「テキスト入力」を配置してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      showLeftIcon(固定値):チェックボックス オフ
  8. 「テキスト入力」配下にある「テキスト入力要素」を選択してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      readonly(固定値):チェックボックス オン
      value(変数値):$variable.selectedItem.name
  9. 「コンテナページ」に「レイアウト(Bulma)」-「コンテナ」を配置してください。
    • 「余白」プロパティを以下のように設定してください。
      外余白(上)(固定値):2rem
      外余白(左)(固定値):5%
      外余白(右)(固定値):5%
  10. 「コンテナ」に「フォーム部品(Bulma)」-「ボタン」を配置してください。
  11. 配置した「ボタン」の配下にある「ボタン要素」を選択してください。
    • 「エレメント固有」プロパティを以下のように設定してください。
      textContent(固定値):Back to list
      color(固定値):dark
      fullwidth:チェックボックス オン

CSSの設定

ここでは、コンテナページ切り替え時にアニメーションを行うCSSを追加します。
以下のコンテナページに対して、表示時のアニメーションを追加します。

  • list-container
  • details-container
ノート:
コンテナページの「エレメントID」プロパティに指定した値は、HTML上ではid属性として同じ値が設定されます。
CSSでこのID属性を指定することで、特定のコンテナページに対してCSSを適用できます。
  1. デザイナのツールバーから「CSS編集」アイコンをクリックしてください。
  2. 以下のCSSを入力して「決定」ボタンをクリックしてください。

ノート:
slide-out, slide-in の内容を変更することで、アニメーションを変更することができます。
指定方法の仕方は CSS3 アニメーションを参照してください。

アクションの作成と割り当て

ここでは、一覧画面と詳細画面を行き来するためのアクションを作成します。
以下の画面上にあるボタンに対して、それぞれアクションを設定します。

  • 「Item List」ページのボタン … 「Details of item」ページを表示
  • 「Details of item」ページのボタン … 「Item List」ページを表示
  1. 「アクション」タブをクリックして、「新規作成」アイコンをクリックしてください。
  2. 以下のアクションを追加してください。
    • 変数「$variable.selectedItem」に 変数「$variable.items[$index]」を代入する
    • ページ「Details of item」を開く
  3. アクション名に「select item」を入力して、「決定」ボタンをクリックしてください。
  4. 再度「新規作成」アイコンをクリックしてください。
  5. 以下のアクションを追加してください。
    • ページ「Item List」を開く
  6. アクション名に「back to list」を入力して、「決定」ボタンをクリックしてください。
  7. 「Details of item」タブをクリックして、「Back to list」が表示されている「ボタン要素」を選択してください。
    • 「イベント」プロパティを以下のように設定してください。
      クリック時:back to list
  8. 「Item List」タブをクリックして、「Item 1」が表示されている「ボタン要素」を選択してください。
    • 「イベント」プロパティを以下のように設定してください。
      クリック時:select item

動作確認

作成した画面の動作確認を行います。
ツールバーの「プレビュー」アイコンをクリックし、プレビュー画面を開いてください。

表示されたアイテム名のボタンをクリックして、アニメーションが実行されることを確認してください。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

no image

IM-BloomMaker Bulma で IM-Knowledge のコンテンツ一覧画面を作ってみよう

2020 Summer から IM-BloomMaker に新しくコンテンツ種別 Bulma が追加されました。 この CookBook では Bulma のエレメントを用いて、IM-Knowledg …

REST API 経由でジョブネットを起動する方法

この CookBook では、REST API とを経由してジョブネットを実行する方法について紹介しています。 完成サンプル 以下の完成サンプルをダウンロードしてご活用ください。 LogicDesig …

スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

このCookBookでは、スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法について紹介しています。 Formaの入力チェックプログラムでは以下の2つのチェッ …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

RSSRSSRSSRSS