TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

企業内のポータルサイトへ売上予算達成率のチャートや、社外公開サイトにシステムステータスなどを公開する際など、特定のWebサイト内の一部分にMotionBoardの画面を表示したいという要件はありませんか?MotionBoardでは、YouTubeの動画のように簡単にボード全体またはアイテム個別にiframe機能を使って表示することができますのでご紹介します。(一部HTMLの基礎知識が必要になります)

なお、YouTube及びMotionBoardのWebサイトへの埋め込みは下記をご覧ください。

参照:動画と再生リストを埋め込む
参照:Webアプリケーションへの組み込み

また、MotionBoardの画面を表示する際は、ログインIDとパスワードでログインが必要となります。以下の例ではシングルサインオンで表示する方法を使っています。詳細な説明は下記をご確認ください。

参照:シングルサインオンでボードを開く

MotionBoardの画面を他のWebページ内に表示する方法~HTMLの書き方~

画面埋め込み後のイメージは下記のようになります。

・ボードの埋め込み(ボード全体を埋め込みます)
<iframe src=”http://hostname:8787/motionboard/sso?extid=mbsso&id=user@local&pw=password&boardpath=boardname&mbtype=html5e” width=”900″ height=”400″></iframe>

・アイテムの埋め込み(ボード内の一つのアイテム「チャートなど」を埋め込みます)
<iframe src=”http://hostname:8787/motionboard/sso?extid=mbsso&id=user@local&pw=password&boardpath=boardname&mbtype=html5c&mbitem=itemname” width=”300″ height=”200″></iframe>

・HTML修正箇所
hostname=サーバ名(またはIPアドレス)
user@local=Motionboardへのログインユーザー
password=Motionboardへのログインユーザーのパスワード
boardname=「ボード管理」の「ボード設定」「ボードアクセスURL」のboardpath=後の文字列 mbtype=HTML5表示の場合、ボードを埋め込む場合はhtml5e、チャートを埋め込む場合はhtml5c
     Flash表示の場合、ボードを埋め込む場合はmbeswf、チャートを埋め込む場合はmbcswf
mbitem
=「チャート」の「プロパティ」の「共通」「アイテムID」

width=フレームの幅を指定(ピクセル数またはパーセント)
height=フレームの高さを指定(ピクセル数またはパーセント)

詳細は下記マニュアルをご覧ください。

参照:Webアプリケーションへの組み込み

少しWeb構築の知識が必要な部分もありますが、MotionBoardのボードやアイテムを他のWebサイト内に表示することは比較的簡単に行えますので、必要に応じて配置してみてください。埋め込んだMotionBoardのサーバ名はWebページを表示している端末からサーバ名(IPアドレスを指定した場合はIPアドレス)でアクセスできる環境が必要ですので注意してくださいね。

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

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

塚田 涼太郎

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

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

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

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

2024.04.18

SVF

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

  • #Copilot

2024.04.05

Dr.Sum

特定の文字列で分割して階層構造をつくりたい!~DS Scriptで分割する~1

  • #データ加工
  • #DS Script

2023.07.17

Dr.Sum

Ranking

Rankingランキング

1

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

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

2019.06.15

MotionBoard

2

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

  • #データ加工

2023.07.28

MotionBoard

3

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

  • #グラフ

2022.08.02

MotionBoard

Info

Information

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