オンプレクラウド

MotionBoard Classic

MotionBoard

「近くのカフェ」と検索して、地図上のピンをクリック――するとその場所の情報が表示されます。
このように、地図上で探して、クリックすると情報が見られる体験を、業務アプリの中でも再現できたら便利だと思いませんか。

MotionBoardのGEOアイテムを使えば、こうした操作も可能です。
本記事では、GEOアイテムの「クリック時アクション」に絞って、実行できる処理の内容や設定方法を紹介します。
そのため、GEOアイテムの構成や作成手順には触れません。
あらかじめGEOアイテムを作成済みの状態から解説を進めていきます。

 

GEOアイテムの基本について知りたい方へ

「GEOアイテムの構成要素」や「GEOアイテムの作成の流れ」については以下マニュアルをご参照ください。

MotionBoard Cloud Classic マニュアル:GEOアイテムの構成要素
MotionBoard Cloud Classic マニュアル:GEOアイテムの作成の流れ

 

GEOアイテムの「クリック時アクション」とは?

GEOアイテムの「クリック時アクション」は、地図上のエリアやポイントをクリックしたときに、あらかじめ設定した処理を実行する機能です。

「クリック時アクション」以外の詳細設定は以下マニュアルをご覧ください。

MotionBoard Cloud Classicマニュアル:[アイテムプロパティ]画面-[詳細設定]タブ(GEOアイテム)

 

クリックアクションの設定手順

今回は「アイコンクリックするとにお店の情報が表示される」ボードを例に設定手順を紹介します。

完成イメージはこちら

クリックアクションの設定手順

前提

今回使用するGEOアイテムが作成済の状態から始めます。

前提

位置情報の含まれたデータソースを使用して、データソース定義を作成します。

  1. [ボード管理]>[データ管理]タブ>[新規作成]で任意のデータソース定義名(DS_GEO)を入力し[OK]をクリックします。
    クリック時アクション_前提2
  2. 位置情報の含まれたデータソースを選択し[OK]をクリックします。
    クリック時アクション_前提3
  3. データソースエディタで[OK]をクリックします。
    クリック時アクション_前提4
  4. [ボード管理]画面で[OK]をクリックします。
    クリック時アクション_前提5

基本設定

  1. 対象のGEOアイテムをクリックして[プロパティ]を選択します。
    クリック時アクション_基本設定
  2. [GEO]>[項目設定]で表示したい項目を設定します。
    表示名:「店名」「電話番号」「営業時間」
    値:「連番」(※3.でアイコンを表示するための識別番号として設定しています。)
    住所1:「住所」
    クリック時アクション_基本設定
  3. 店舗やサービスのジャンルを識別するための地図アイコンを設定します。
    [ポイント設定]>[イメージ]で表示したいアイコンの画像と最大値、最小値を設定します。
    クリック時アクション_基本設定
  4. 地図アイコン上に表示されている「ポイント名」を非表示にします。
    [詳細設定]>[テキスト]>[表示項目]>[ポイント名]のチェックを外し設定します。
    クリック時アクション_基本設定アイコンの下に表示されていた「店名」「電話番号」「営業時間」が非表示になりました。クリック時アクション_基本設定
  5. クリックしたお店情報を表示するために、「お店」「営業時間」「電話番号」の変数を作成します。画面右上の[管理]>[システム変数の編集]をクリックします。
    クリック時アクション_基本設定
    右下の「新規作成」ボタンから、変数を作成します。(データ型:文字型)
    ・GEOクリック_お店情報
    ・GEOクリック_営業時間
    ・GEOクリック_電話番号
    クリック時アクション_基本設定
  6. コンテナアイコンをクリックして、お店を「クリック」した際に表示するコンテナを作成します。
    クリック時アクション_基本設定
  7. 「クリック時アクション」で反映されるシステム変数を表示できるよう、図形をコンテナに[配置]し、5.で作成した変数を設定します。
    クリック時アクション_基本設定
  8. 必要に応じて、表示したい画像があれば設定します。
    クリック時アクション_基本設定
  9. 最後に、コンテナを非表示にするための「閉じる」ボタンを配置します。
    クリック時アクション_基本設定

「クリック時アクション」の流れ

ここでは、「クリック時アクション」の設定手順を確認します。
GEOアイテムのプロパティから設定できます。

  1. 対象のGEOアイテムをクリックして[プロパティ]を選択します。
    クリックアクションの設定手順
  2. [詳細設定]>[クリック時アクション]にて[反映するシステム変数]を設定します。
    クリックアクションの設定手順
  3. [実行されるボタン]に対してアクションを設定します。
    クリックアクションの設定手順
  4. ボタンアクション設定

    [表示非表示切り替え]:コンテナ表示
    [アイテムリロード]:表示したコンテナのお店情報をリロード
    クリックアクションの設定手順

アイコンをクリックすると、お店の情報が表示されました。クリック時アクション_前提6

クリック時に実行できる主なアクション例

「クリック時アクション」には、業務画面の操作性を高めるために役立つ機能です。
ここでは、実際によく使われるアクションもいくつかご紹介します。

このように使い方次第で画面の表現力を大きく広げることができますので柔軟に組み合わせてみてください。

設定時の注意点

「クリック時アクション」を設定したのに、「チャートが動かない」「表示が切り替わらない」といったケースでは、データ連携の不整合が原因であることがあります。
もし、設定時に何かエラーが発生した場合はご参照ください。

データ連携の整合性をチェック

GEOアイテムと他パーツの間では、共通のキー項目(例:エリアIDや名称)を一致させる必要があります。

以下の点をチェックしておくと、トラブルを未然に防げます。

具体例:値の不一致

たとえば、GEOアイテム側では「東京都」となっているのに、チャート側では「東京」だけになっている場合は
クリックしても連携がうまくいかず、データが表示されません。
アクション設定の前に、連携に使うキーの確認・統一をしておくことが、スムーズな構築のポイントです。

 

まとめ|GEOアイテムの可能性を広げよう

GEOアイテムは、地図でデータを見るだけでなく、クリックを起点に画面の動きを作りたい場合にも有効です。

「地図でデータを見る」だけでなく、さまざまな機能を組み合わせることで、GEOアイテムは業務画面の表現力をさらに高めることができます。
今回紹介した「クリック時アクション」とあわせて、業務に合った表現をぜひ試してみてください。

 

関連記事はこちら

 

 

 

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

What do you think of this post?
  • 分かりやすい (0)
  • 問題が解決した (0)
ありがとうございます!とても励みになります。

にっしー

MotionBoard
プロフィールへ >

カスタマーサクセス部所属。 産休・育休を経て、MotionBoard業務に舞い戻ってきました。 日々の業務での「発見」や「実体験」をお届けしていけたらと思います!

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【Connect】開発コスト・運用コストを抑えたスクリプトの構築方法

公開:2025.02.06
更新:2025.02.06

分かりやすい

1

解決した

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

Dr.Sum

invoiceAgent【「業務を変える動画たち」シリーズ】記事まとめ

公開:2025.01.16
更新:2025.12.05

分かりやすい

0

解決した

0
  • 業務を変えるシリーズ

invoiceAgent

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

公開:2024.08.05
更新:2024.08.05

分かりやすい

6

解決した

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

MotionBoard Classic

Ranking

Rankingランキング

1

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

公開:2019.06.15
更新:2026.02.02

分かりやすい

14

解決した

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

MotionBoard Classic

2

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

公開:2023.07.28
更新:2025.11.26

分かりやすい

35

解決した

8
  • データ加工

MotionBoard Classic

3

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

公開:2022.08.02
更新:2024.05.08

分かりやすい

15

解決した

8
  • グラフ

MotionBoard Classic

Info

Information

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