TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

MotionBoardでは、ページの切り替えや前面表示など、複数の画面を切り替えて表示する方法はいくつかあります。今回ご紹介するテクニックは、ボード上に複数あるチャートを「ボタン」アイテムを使ってアニメーション風にグラフィカルに拡大・縮小・移動表示することをする方法です。それぞれのチャートは「コンテナ」内に配置して、その「コンテナ」に動きをつけることにより、あたかも画面が拡大・縮小・移動するような動きを表現できます。

例えば、下記【全体画面】で[関東]ボタンをクリックすると、【拡大表示】のように画面が拡大するイメージです。

【全体画面】

【拡大表示】「関東」ボタンクリック時

STEP1 コンテナの配置

1.コンテナを複数アイテム配置します。

 類似したコンテナを簡単に複数配置する方法は、「アイテムクリップボードを使ってボード作成工数を削減しよう」を参照してください。

STEP2 ボタンの配置とアクション追加の設定

1.ボタンを配置して、コンテナを移動・拡大・全面表示を行います。

 (1)「コンテナ」にアクションを与える「ボタン」を配置します。(ここでは中部の「コンテナ」にアクションを加えます)

 (2)アクション種別で「アイテム前面背面変更」を選択し、「前面背面アクション」を「最前面に移動」とし「中部コンテナ」を選択します。OKボタンをクリックします。

(3)「アクション追加」ボタンをクリックしてアクションを追加します。

 「アクション種別」で「アイテム移動とリサイズ」を選択し、「中部コンテナ」を拡大すると自動的に「アイテム名」に追加されます。「x,y,幅,高さ」を設定しOKをクリックします。

  補足:処理時間を長く(右にスライド)すると、ゆっくりと移動とリサイズが行われるため、よりアニメーション風に動作します。

 (4)「アクション」が二つ登録されましたら、OKボタンをクリックします。

2.1.(1)~(4)の手順を繰り返し行い、残りの「関東コンテナ」「関西コンテナ」「九州コンテナ」にアクションをつけるボタンを配置しましょう。

3.最前面移動、移動、リサイズをした「コンテナ」を元に位置に戻すための「ボタン」を配置しましょう。

  「最前面移動」「移動」「リサイズ」をした「コンテナ」を元の位置に元の大きさで、移動・リサイズするように設定します。

 

この記事にリアクションしてみませんか?

What do you think of this post?
  • 分かりやすい (0)
  • 問題が解決した (0)
いいね!ボタンありがとうございます!

塚田 涼太郎

MotionBoard Dr.Sum
プロフィールへ >

2020年からDr.Sum MotionBoard のプリセールスとして活動しています。ユーザー様のお困りごと/お悩みごとを解決できるようブログ執筆の活動をしています。お困りごとが解決したら是非「いいね」ボタンのクリックをお願いします!

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【脱Excel】MotionBoardの入力機能で業務アプリをつくる

公開:2024.08.05
更新:2024.08.05

分かりやすい

2

解決した

0
  • データ入力
  • デザイン
  • コンテナ

MotionBoard

【まとめ】SVF Cloud帳票をinvoiceAgentに連携する方法

公開:2024.04.18
更新:2024.08.07

分かりやすい

2

解決した

2
  • 帳票作成・出力
  • システム連携
  • 電帳法
  • 文書定義
  • 処理定義

SVF

Dr.Sum Copilotをインストールしてみた【OpenAI】

公開:2024.04.05
更新:2024.04.18

分かりやすい

2

解決した

0
  • Copilot

Dr.Sum

Ranking

Rankingランキング

1

棒グラフを大きい順番に並び替えたい!(ソートしたい)

公開:2019.06.15
更新:2023.11.27

分かりやすい

13

解決した

12
  • デザイン
  • グラフ
  • 集計表

MotionBoard

2

経過時間を時:分:秒で時刻表示したい!【320秒→05:20】

公開:2022.08.02
更新:2024.05.08

分かりやすい

11

解決した

7
  • グラフ

MotionBoard

3

カスタム項目の書き方 よく使う関数からIfまで

公開:2023.07.28
更新:2024.10.30

分かりやすい

25

解決した

7
  • データ加工

MotionBoard

Info

Information

ウイングアーク1stからのお知らせ

int(57)