TECH BLOG

MENU

MotionBoard

MotionBoard

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

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

【全体画面】

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

STEP1 コンテナの配置

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

  • 分かりやすい (0)
  • 問題が解決した (0)
ありがとうございます✨
プロフィールへ

ウイングアーク テクニカルエンジニア

ウイングアーク1stの技術部隊が記載しています。中の人は製品に詳しく、日頃からお客様と接点のある人です。お役立ち情報をたくさん書いていきますので、どうぞよろしくお願いします!

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【まとめ】invoiceAgentのWeb APIを使ってみる

  • #API

2023.04.05

invoiceAgent

ユーザーごとに閲覧可能なデータを制御しよう!

  • #集計表
  • #データ加工

2021.02.26

Dr.Sum

まるでWebサイト!? 折りたたみメニューの作り方!

  • #集計表
  • #デザイン
  • #コンテナ
  • #ボタン

2021.01.13

MotionBoard

Ranking

Rankingランキング

1

Excelのデータを加工したい。~変換(横持ち⇔縦持ち)について~

  • #データ取り込み
  • #データ加工

2021.01.19

Dr.Sum

2

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

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

2019.06.15

MotionBoard

3

SVFエラー解決までの近道 -帳票が出力されない編

  • #帳票作成・出力

2018.11.06

SVF

Info

Information

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