1 はじめに

本書は、読者がデジタルノートアプリケーション「eYACHO」あるいは「GEMBA Note」を用いて、アプリケーションを開発するために必要な技術を身につけることにある。そのため演習を通して、eYACHO/GEMBA Noteアプリケーション開発と運用に関わる次の基礎知識を習得する。

  1. 複数のノートを横断的に検索し、結果を一覧表示するアプリケーション開発の手順
  2. ユーザーインターフェースのカスタマイズ方法
  3. アプリ開発に関わるコンテンツを格納する開発パッケージの運用

読み始めるにあたって、eYACHO/GEMBA Noteの特長と用途を解説し、各章のテーマと目的、サンプルを動作確認するときの作業手順、演習問題の進め方、本文中に現れるサンプルコードとコマンドの記述方法について説明する。

1.1 eYACHO/GEMBA Noteとは

eYACO/GEMBA Noteは、今現在生じていることを手書き、テキスト、写真、動画で記録したり、複数のメンバーと同じ図面や画像に書き込んだり、現場レポートを共同で作成するなど、チーム作業の支援や、さまざまな情報を一元管理して、生産性の向上を支援する「現場」での利用を目的としたデジタルノートアプリである。

単なるノートアプリではなく、

  • ビジネス帳票を簡易に作成
  • データベース機構
  • リアルタイム画面共有による情報共有

といった特長を有するアプリケーション開発基盤でもある。

図1-1 eYACHO/GEMBA Note機能全体像

GEMBA NoteとeYACHOは、同じ機能をもった姉妹製品である。
eYACHOは、ある建設企業と共同で開発され、建設や土木に関わる業務に特化したコンテンツ(例えば、クレーンの図、測量計算テンプレート、工事写真管理 等)を内蔵している。

一方、GEMBA Noteは、建設現場だけではなく、他の多種多様な現場で行われる業務において使われることを想定した汎用アプリという位置づけである。

1.2 eYACHO/GEMBA Noteができること

「待ったなし」の現場のための超機能性と使いやすさの両立

刻一刻と状況が変わる様々な現場では、いくつものアプリを切り替えて使うことは現実的ではない。その点で、eYACHO/GEMBA Noteは、現場で必要とされる数多くの機能を持ったデジタルノートである。

そんな多機能なアプリであるが、ツールボックス、UIカスタマイズなど、様々なカスタマイズ機能があり、必要な操作に絞ったメニューの提供が可能なので、初心者でもすぐに使い始めることができる。

「人と人の今その時をつなぐ」リアルタイム伝送技術

MetaMoJiのリアルタイム情報転送技術「Share」により、現場と事務所、遠く離れた拠点と本社など離れた地点とストレスのない情報共有が可能である。

「Share」技術では、画面の画像を圧縮伝送するのではなく、更新された編集差分のみのデータを通信することで、伝送量を大幅に圧縮。どんなに細かな帳票でも解像度を落とすことなく情報共有が迅速にできるので、ストレス無く図面や細かな管理帳票をやりとりすることができる。

「自由」と「定型」の融合

eYACHO/GEMBA Noteは、紙のノートのように 自由 に何でも書けるデジタルノートである。
加えて、定型業務で求められる帳票を、エンドユーザーが速やかに作成したり、業務システムとの連携やデータのImport/Exportが可能なので、定型 業務にも適している。

情報を集約して一覧を表示させるアグリゲーション

eYACHO/GEMBA Noteには、タグスキーマをベースとしたデータベース機能を有する。アプリを使ってノート、ページ、オブジェクト単位で タグを貼り付けることで、ノートやページをまたいで、検索や集計といったデータベース処理が可能になる。

ノートに蓄積したデータや外部サービスの情報から、ある目的にあったデータのみを集約して一覧表示することができる。現場の管理者がさまざまな視点から情報を理解するのに役立つ。

用途としては、

  • 複数人が別々のノートに書き込んだデータの集約
  • 日報から月報の集計

など業務システムを構築することができる。

カスタマイズによる拡張機能

eYACHO/GEMBA Noteは、さまざまな現場業務をカバーできる多くの機能を搭載しているので、個別に開発をせずにそのまま運用可能である。また、高度なITスキルがなくても、どの現場でも共通の使いやすいUIやメニュー構成にカスタマイズすることも可能である。

eYACHO/GEMBA Noteは、様々なレベルでのカスタマイズ機能を有している。
エンドユーザーでの用紙テンプレートの作成・共有のレベルから、システム部門やSI会社による高度なシステム開発まで幅広く行うことができる。

柔軟かつ多層的なカスタマイズ環境を提供することにより、現場をIT化するためのアプリケーション開発基盤として利用できる。

図1-2 eYACHO/GEMBA Noteカスタマイズ

誰がどのように使うのか?

各現場で必要な帳票をシステム部門や外部のSI会社に頼ることなく、自分たちで作成して、同僚と共有。管理部門ではなく、現場が主導するシステム化が進むので、現場が満足するIT化が実現される。

部門や拠点をまたいだ詳細で稠密な情報をリアルタイムで共有できるので、生産性が大幅に向上し、真の「働き方改革」を実現する。
さらに、システム開発企業やSI会社により、他のシステムと連携した高度な業務システム構築も可能である。

1.3 eYACHO/GEMBA Noteアプリケーションとは

eYACHO/GEMBA Note上で開発したアプリケーションができることを示した図が次である。

図1-3 eYACHO/GEMBA Noteアプリケーション

🔳 フォーム部品による帳票の作成

テキスト、表、フォーム部品をノートに配置して、業務に適した帳票(フォーム)を作成することができる。

🔳 タグスキーマによるデータベース化

フォーム上に配置したフォーム部品とリンクしたタグスキーマを通して、フォームのデータをデータベースとして活用する。

🔳 カスケード入力

動的な項目の選択を、ドロップダウン形式のメニューを準備することで実現する。

🔳 検索条件の定義

検索対象のコネクタ、データ抽出の方法を宣言するSQLなどを通して、アグリゲーション検索条件を定義する。

🔳 集約

定義した検索条件を操作コマンドやボタンから実行する。

🔳 集約結果の出力(本書では取り扱わない)

集約した結果をボタンアクションを通して画像、PDF、CSVとして出力する。

🔳 外部システムとの連携(本書では取り扱わない)

REST APIを用いることで、他のシステムからデータを取得したり、出力することが可能になる。

🔳 URLスキームの起動(本書では取り扱わない)

他のWebアプリケーションから、URLスキームを起動することにより、eYACHO/GEMBA Note上にノートを取り込む(インポート)。また呼び出し元アプリケーションにデータを送ることもできる。

1.4 想定するユーザー

本書を利用してeYACHO/GEMBA Noteアプリを開発してみようというユーザーは、どちらかの製品をすでに利用しており、次のような基本操作を行うことができることを前提としている。

  • ノートの作成とページの編集
  • テキストの追加と編集
  • 写真や図形の追加と編集
  • 表の編集

リレーショナルデータベースシステムにおけるデータの操作や定義を行うための専用言語SQL(Structured Query Language)の知識を持っていると、アグリゲーションの定義と実行に関して理解が早く進むと思われる。

1.5 各章の概要

本書は、全部で8章から構成される。それぞれの章の概要とその章で習得するポイント、そして成果対象物を例示しながら概要を説明する。

2章からは、演習課題を通して、前の課題に新たなコンテンツや機能を順次追加していく形態をとりながら1つの開発パッケージを完成させていく。

最終的には1~2個のノートとそれらを表現するタグスキーマおよびアグリゲーション検索条件からなる「不動産管理アプリケーション」を実現する。

🔳 2章「アプリケーション開発の準備」

eYACHO/GEMBA Note上にアプリを開発するには、まず「開発パッケージ」を準備するところから始める。そのためどのような権限と事前準備が必要か説明する。

🔳 3章「フォームを作成する」

eYACHO/GEMBA Noteでは、基本的にノート上に、手書き、テキスト、画像など、さまざまなコンテンツを配置して情報を整理するために用いる。
帳票やアイテムを構成するためのフォーム部品が揃っている。これらをノートや図形の上に配置して、定型的なフォームを作成する。

図1-4 物件フォームの例

🔳 4章「データを定義する」

フォーム部品を配置しただけでは、ノート内には情報を保持しているが、値を取り出して活用することはできない。その部品が「何を意味するのか」という表現が欠けている。そこで「タグスキーマ」という構造体を準備、部品それぞれがどのような意味や役割を果たすのか定義する。

🔳 5章「検索条件を定義する」

eYACHO/GEMBA Noteは、タグスキーマにリンクしたフォーム部品をデータベースとして処理することができる。その検索機能は「アグリゲーション」呼ばれ、各種コネクタが収集したデータから検索条件に合ったデータを抽出して表示する。この章では検索条件の作成方法について学ぶ。

🔳 6章「検索条件を実行する」

第5章で定義したアグリゲーション検索条件を実行して、フォームの横断検索の結果を表示する。加えて、ボタンアクションによってタグスキーマの値を更新する仕組みについて解説する。

図1-5 タイプ別物件集計一覧

🔳 7章「UIをカスタマイズする」

eYACHO/GEMBA NoteのUI表示は、XML形式の定義ファイルを作成し、それをノートあるいはノートテンプレートに読み込ませることによってカスタマイズすることができる。そのカスタマイズ方法と作成したフォームを定型UIとして再利用できるように登録する手順について学ぶ。

🔳 8章「アプリケーションを運用する」

実装が終了した開発パッケージを他のユーザーと共有する作業と手順について解説する。

1.6 演習問題について

各章には演習問題を配置している。演習問題に取りかかる時は、同じ開発パッケージにコンテンツを追加・修正していく。演習で用いるファイルや参考にする素材は以下の場所から直接ダウンロードあるいは内容を表示してファイルを保存する。

バックアップ

ファイル 内容物の説明
PropertyManagementMaster__1.0.3__backup.gncproj 模範解答のバックアップファイル

物件フォーム関連

ファイル 内容物の説明
property.css 物件情報HTMLのスタイルシート
property.html 物件情報HTMLファイル
propertyForm.dydoc 物件フォームのeYACHO/GEMBA Note形式ファイル [1]
propertyList.csv CSVファイルからインポートする演習に用いる

[1] フォーム作成演習を省略するときにインポートして用いる

共有リスト

ファイル 内容物の説明
propertyTypes.txt 共有リスト登録演習で用いる [2]

[2] 共有リスト登録演習を短縮するときに用いる

UI定義

ファイル 内容物の説明
simple_ui.xml UIカスタマイズの演習で用いる

1.7 コラムについて

各章には、「コラム」と呼ぶeYACHO/GEMBA Noteアプリ開発に関わる補足説明を配置してある場合がある。あるいは、余談的な内容を付与している時もある。全くGEMBA Noteと関係がないわけではなく、一般に普及している関連技術の説明や、GEMBA Noteとの比較や比喩について述べて、読者の知識をより広く豊かにする目的で設けている。

1.8 コード記述と操作コマンドについて

本書では、コード類の説明とコマンドの実行例を示すために数字、記号を使い分けている。それぞれの意味は以下の通りである。

[コードの書式の例]

SELECT * 
FROM P_TABLE  
WHERE name != '' -- コメント

SQLのような式やコードを提示したときは、着目する箇所に – を付与し、その後ろにコメントを記入する。

[コマンド実行の書式の例]

> sqlite3 property_management.db

コマンドを実行するときは、Windowsコマンドプロンプトを用いて行う。コマンドの先頭に > シンボルを配置し、その後ろにコマンドを記述する。

1.9 商標について

本文中に記載されている会社名、製品名等は、各社の登録商標または商標である。本文中ではTM、(R)マーク等は明記していない。

  • Google、Androidは、Google Inc. の商標である。
  • iOS、iPad、macOSは、Apple Inc.の商標である。
  • Linuxは、Linus Torvalds氏の日本およびその他の国における登録商標または商標である。
  • Microsoft、Visual Studio Code、VS Code、Windowsは、米国Microsoft Corporation の米国およびその他の国における登録商標である。
  • その他記載された会社名、製品名等は、各社の登録商標もしくは商標、または弊社の商標である。
  • 本書は、株式会社MetaMoJiが作成したものであり、本書の著作権は、株式会社MetaMoJiに帰属する。

1.10 特記事項

本書は、eYACHOとGEMBA Noteの両方の製品におけるアプリケーション開発について述べるが、本章以降では、製品の呼称はGEMBA Noteのみとする。

演習はWindows 10/11上のPCで実習することを前提としている。

1.11 用語の説明

本ドキュメントに登場するよく使われる言葉や略語について説明する。

用語 説明
GEMBAアプリ eYACHOあるいはGEMBA Note上で開発したアプリケーション
SQL アグリゲーションのデータ抽出方法を定義するデータベース操作言語。
アグリゲーション 各種コネクタによって収集したデータから検索条件に合ったデータを抽出し、表示するしくみ。
アプリ開発教則本(教則本) 本ドキュメントのことを指す。
コネクタ 各種データソースに接続してデータを抽出する。
コンテキストメニュー 操作している対象に応じて表示されるコマンドのリスト。
対象物を長押し(iOS)、あるいは右クリック(Windows)によって表示される。
タグインスタンス タグスキーマ定義から生成されたデータを指す。データベースシステムのレコードに相当する。
タグスキーマ 対象物を表現する入れ物。データベースシステムのテーブルに相当する。
タグプロパティ タグスキーマを構成する属性。データベースシステムのフィールドに相当する。
ナビゲーションメニュー eYACHO/GEMBA Note製品のトップバーメニュー
物件 アプリ開発教則本でテーマとした不動産物件

1.12 参考ドキュメント

アプリケーション開発に関連するドキュメントは次の通りである。

2 アプリケーション開発の準備

この章では、GEMBA Note上でアプリケーション開発を始めるにあたって手順の流れ、必要となる利用権限、開発者機能を使用する設定、開発環境となるWindows PC上での操作についての留意点を述べる。

2.1 アプリケーションを開発する手順

GEMBA Noteアプリの開発は、開発パッケージを作成し、そこにフォーム(帳票)、タグスキーマ、アグリゲーション検索条件を追加し、設定する作業になる。その手順を示したのが次の図である。

図2-1 GEMBA Noteアプリ開発手順

[1] 開発者機能を使用する

パッケージ開発機能を有効にして、開発パッケージフォルダを見えるようにする。

[2] パッケージを作成する

アプリケーションのコンテンツを取りまとめる開発パッケージを準備する。

[3] フォーム(帳票)を作成する

GEMBA Noteのアプリケーションは、まず「フォーム」と呼ばれるノート上に様々なコンテンツを配置したページを作成することから始まる。

[4] タグスキーマを作成する

フォームをデータベース化するため、「タグスキーマ」と「タグプロパティ」を定義して、データを構造化する。

[5] フォーム部品とタグプロパティをリンクする

フォーム上に配置したコンテンツにタグスキーマを設定し、各フォーム部品がどのタグプロパティに紐づくかリンク付けする。

[6] アグリゲーション検索条件を定義する

データベース化されたタグスキーマとタグプロパティの定義を用いて、検索条件の振る舞いを定義する。

[7] アグリゲーション検索条件を設定する

検索条件を実行できるのは、アグリゲーションを実行して、表およびサムネイルで結果を表示する方法と、ボタン部品からの起動と2通りある。結果の表示方法や形式、ボタン部品のアクションを設定する。

[8] アグリゲーションを実行する

定義したアグリゲーション検索条件が実際に動作するか、実行の確認を行う。

[9] コンテンツを登録する

作成したフォームやアイテムが再利用できるように、開発パッケージに登録する。

[10] 開発パッケージをリリース・配置する

実装した開発パッケージを他のユーザーが利用できるように、リリースあるいは配置する。

[11] パッケージを管理する

開発パッケージのバックアップを取得したり、新たな機能やコンテンツを追加して開発パッケージを更新する。

2.2 eYACHO/GEMBA Noteのインストール

eYACHO/GEMBA Noteは、App Store、Google play store、Microsoftストアからインストールする。無償アプリなのでインストールはできるが、利用するにはライセンスが必要であり、組織ID、ユーザーID、そしてパスワードを設定して、株式会社MetaMoJiが提供するクラウドサービスにログインする。

まだライセンスを購入していない、または開発オプションを購入していない場合は、以下のリンクにある「認定技術者制度」を利用し、スキル取得をめざしてトライアルライセンスを発行してもらうとよい。

  • eYACHO 認定技術者制度へのリンク
  • GEMBA Note 認定技術者制度へのリンク

iPadを用いて開発環境を利用することはできるが、マルチウィンドウを活用して、マウス操作でコピー&ペーストなど開発作業がしやすいWindows版アプリの利用をおすすめする。

2.3 必要な利用権限

GEMBA Noteのアプリを開発するには、製品ライセンスだけではなく、パッケージの開発を行うために、開発者向けの機能を使うことができる「開発者権限」が必要である。

また開発したパッケージを運用できる「パッケージ管理者権限」も存在し、組織におけるアプリ開発のポリシーに則って、それぞれの権限を適切なユーザーに割り振る。

これらの権限の設定は、Webのユーザー管理ツール(「緑ツール」と呼ばれる)にログインできるアカウントで操作する。

図2-2 開発者権限の設定

2.4 開発者機能を使用する

開発者のユーザーでログインすると、パッケージ開発機能を有効にすることができる。

  1. ノート一覧画面の上部右端にあるアプリアイコンをクリックしてメニューを表示し、
  2. メニューの 開発者機能を使用する を選択する。

フォルダツリー上に「パッケージ開発フォルダ」が現れる。

図2-3 開発者機能の使用設定

2.5 パッケージを作成する

開発パッケージとは、GEMBA Note上で帳票やアイテムを開発し、そのコンテンツを「アグリゲーション」と呼ばれる集約機能を提供するコンテンツを格納するコンテナである。

パッケージ開発ドライブを選択し、ナビゲーションメニュー上の > パッケージの作成 からパッケージを作成開始する。

図2-4 パッケージの作成手順

2.6 Windows PC上での操作

Windows PCにインストールされているアプリには、「ストアアプリ」と「デスクトップアプリ」の2種類がある。GEMBA Noteはストアアプリであり、本来はiPhone、iPad、Androidデバイスのようなスマートフォンやタブレット向けに開発された。

Windows環境では、Microsoft Surfaceのように、画面タッチ操作ができる機種もあるが、一般的に普及しているWindows PCでは、画面タッチはできないので、マウスとキーボードを使って操作する。

スマートフォン・タブレットでのジェスチャー Windows PC上での操作
1本の指・ペンでタップする 左クリック
1本の指・ペンで長押し 右ボタンのクリック
ダブルタップから長押しして、ドラッグする 左クリックしてドラッグ
2本の指でタップする 右ボタンのクリック
2本の指でダブルタップから長押しして、ドラッグする 右クリックしてドラッグ
ピンチイン Ctrl + マウスホイール上回転
ピンチアウト Ctrl + マウスホイール下回転

Windows PC上で、Ctrl+C をキーボードで操作してテキストをコピーして、Ctrl+V でペーストすることはGEMBA Noteのノート内ではできない。右クリックで対象物を選択するとコンテキストメニューが現れるので、そこでコピーし、別の場所で右クリック > メニューの中からペーストを選択する。

演習問題2 不動産管理パッケージを作成する

次の手順で「不動産管理パッケージ」を作成する。
※ただし、あくまでも入力例なので、自分にあった内容で記入する。

  • パッケージ開発フォルダを選択する。
  • トップバーメニュー上の アイコンをクリックし、パッケージの作成 を選択する。
    • 「パッケージの作成」ダイアログが現れる。
  • パッケージ名を「不動産管理」と入力する。
  • バージョンをクリックし、0.1と設定し、コメントに「初回リリース」と入力、完了ボタンをクリックする。
  • 開発者情報に自分の名前やニックネームを記入する。
  • 完了ボタンをクリックする。
    • パッケージ開発フォルダの下に「不動産管理」フォルダが追加される。

コラム「パッケージ」

プログラミング言語における「パッケージ」(あるいはモジュール)とは、関連するコンテンツをまとめて再利用可能な単位にしたものである。具体的には、パッケージには以下のような機能がある。

  • コードの再利用
    • 一度作成したコードを他のプロジェクトやプログラムで簡単に再利用できるようにする。
  • 依存関係の管理
    • 必要なライブラリやモジュールを簡単に管理し、プロジェクトにインポートする。
  • バージョン管理
    • パッケージはバージョン番号が付けられるため、特定のバージョンを指定して使用する。

例えば、Pythonでは「pip」というツールを使って必要なパッケージをインストールしたり、管理する。

GEMBA Noteのパッケージについては第8章で説明するが、ファイルの実体はZIP形式であり、アプリを構成するタグスキーマ、アグリゲーション検索条件、共有リスト、用紙やノートテンプレートをまとめたものである。

3 フォームを作成する

GEMBA Noteにおいてコンテンツは、アイテム、表、図形、写真、動画などを指す。特に、帳簿や伝票、申込書など、業務や取引に必要な情報の記入や印刷のために用いられる定型的な書類は「帳票」と呼ばれ、GEMBA Noteではノートのページ上に「フォーム部品」を並べて実現する。

この章では、フォーム部品を配置し、定型的かつ再利用できるフォームを作成する手順を学ぶ。

3.1 フォーム部品

ノートを開き、ナビゲーションメニューの アイコンをクリックし、フォーム部品を追加 を選択すると、利用可能なフォーム部品がツールボックス上に現れる。 利用したい部品をクリックして、現在のノートに張り付ける。

図3-1 フォーム部品

各部品の内容については、「参考ドキュメント」の「フォーム作成ガイド」を確認する。

3.2 フォーム部品を配置する

ツールボックスから利用したいフォーム部品をクリックし、現在開いているページに張り付ける。

手作業では、左右上下と部品の位置がまちまちになるので、対象となる部品を投げ縄で選択し、コンテキストメニューの 整列 から 左寄せ そして 上下に整列 と操作すると、部品の左位置が揃い、上下等間隔に配置される。

図3-2 フォーム部品の整列

3.3 フォーム部品を設定する

フォーム部品を配置したときは初期の状態で設定されている。部品それぞれのふるまいを変更するには、対象となる部品を長押し/右クリックし、コンテキストメニューの フォーム をクリックし、<対象部品名>の設定 を選択する。下の例は、1行テキストフィールドの場合を表示する。

図3-3 フォーム部品の設定

画面右のツールボックスに、対象となる部品の属性情報が現れるので、目的や用途に応じて変更する。

3.4 共有リストを登録する

フォーム部品の中で、1行テキストや数値フィールドは、選択項目をプルダウンメニューの中から選択する機能がある。設定は、ツールボックス上の設定から行うこともできるが、開発パッケージ内で共有で利用できるように登録することもできる。

開発パッケージ上を長押し/右クリックし、操作 > 共有リストの管理 から登録を開始する。登録完了前に「パスワード」を入力し、他のユーザーによる不用意な変更を防止する。

図3-4 共有リストの登録

演習問題3-1 物件タイプを共有リストに登録する

次の手順で、物件タイプをメニューとして利用できるように登録する。

  • テキストエディタを用いて、次の物件タイプを記入する(タイプ名の後ろは改行する)
    • アパート
    • 一戸建て
    • 土地
    • オフィス
    • その他
  • 上記テキストファイルを、適当な名前、例えば PropertyTypes.txt と与えて保存する。
    • ファイル形式はUTF8とする。
  • 前節の手順[1]から[3]と同じ操作を行い、共有リストに登録する。

演習問題3-2 物件フォームを作成する

「不動産管理パッケージ」上で、ノートを作成し、次の図が表す見出しとフォーム部品を配置、それぞれの部品を設定して、物件フォームを完成させる。

図3-5 物件フォーム
  • 「不動産管理パッケージ」のフォルダ上で、新規ノート作成 をクリックし、ベーシックテンプレートの中から「無地-横」を選択する。
  • ノートの名称は「物件フォーム」とする。
  • 見出し「物件情報」、各項目の見出しをテキストとして記入し、上記図に示したフォーム部品を配置する。
    • 「物件タイプ」の1行テキストフィールドは、前節で登録した共有リストを設定する。
      • 長押し/右クリック > 1行テキストフィールドの設定 で、ツールボックスに設定画面を表示させる。
      • 入力方法リスト に切り替え、選択肢の中から 共有リストを使う を選び、登録した共有リストを指定して編集を完了する。
      • 1行テキストフィールドをクリックして物件種別のメニュー項目があらわれるか確認する。
    • 「価格」の数値フィールドは、3桁区切りとする。
      • 数値フィールドの設定から、表示形式 をクリックし、桁区切り をオンにして編集を完了する。
      • 同じ設定画面から プレフィックス・サフィックス を選択し、サフィックス に「円」を記入する。
  • ノートの背景色や文字のフォントや大きさは、各自の好みで設定する。

コラム「HTMLで物件フォームを表現する」

HTML(Hyper Text Markup Language)はWebページを作成するための言語である。物件フォームをHTMLで表現してみると、次のようなコードになる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>物件情報フォーム</title>
    </head>
    <body>
        <h1>物件情報</h1>
        <form method="post" action="something">
            <table>
                <tr>
                    <th>名称</th>
                    <td><input type="text" name="name" placeholder="物件の名前を記入"></td>
                </tr>
                <tr>
                    <th>物件タイプ</th>
                    <td><input type="text" name="type" placeholder="物件のタイプを記入"></td>
                    <!-- 選択リストではなくテキスト入力の例 -->
                </tr>
                <tr>
                <th>価格</th>
                    <td><input type="number" name="price" placeholder="価格を入力"></td>
                </tr>
                <tr>
                <th>住所</th>
                    <td><textarea name="address" rows=5></textarea></td>
                </tr>
            </table>
        </form>
    </body>
</html>

formタグの中で、ボタンを配置して、入力項目に対して何らかのアクションを実行する。例えば、ボタン実行で入力項目をメールで送信、あるいはデータベースに保存するのが一般である。

アクション実行に必要となるのがinput要素やtextarea要素の内部に定義される name や id という属性であるが、これらが次章で述べる「タグスキーマ」を構成する「タグプロパティ」に相当する。

このHTMLファイル(property.html)は、演習素材として公開してある。HTMLではCSSファイルを参照してUI部品を整形することができるが、GEMBA NoteにはこのようなUIスタイルを統合的に扱う仕組みはない。

4 データを定義する

スキーマとは、情報の構造を定義するための記述のことを意味する。GEMBA Noteでは、ページや図形と、その上に配置したフォーム部品の構造を定義するために「タグスキーマ」と呼ばれる対象物を用意している。構造を定義することによって情報の検索、集約、加工(計算)を行うことができる。

この章では、前章で作成したフォームにデータ構造をもたせ、次の章でアグリゲーション検索に用いる準備をする。

4.1 タグスキーマを作成する

対象となる開発パッケージ上を長押し/右クリックし、現れたコンテキストメニューの 操作 > タグスキーマ一覧 を選び、タグスキーマの作成を開始する。
ノートが開いている状態で、ナビゲーションメニュー上の 設定 > タグスキーマ一覧 からも作成・編集ができる。

図4-1 タグスキーマを作成する手順

4.2 タグプロパティを追加する

タグスキーマの構成要素であるタグプロパティを追加する。プロパティの数だけステップ1~3を繰り返す。

図4-2 タグプロパティを追加する手順

タグID およびプロパティID を指定する箇所には、ギア型のアイコンが付与されている。ここをクリックすると、日本語や英語の表示文字列を指定することができ、アグリゲーション検索結果を表で表示するときの見出しに用いられる。

図4-3 表示文字列の編集

演習問題4-1 物件タグスキーマを作成する

タグスキーマ編集機能を用いて、物件情報(Property)を定義する。

タグスキーマの定義:

タグID 日本語表示名
Property 物件

タグプロパティの定義:

プロパティID 日本語表示名 データの型
Name 名称 文字列型
Type タイプ 文字列型
Price 価格 整数型
Address 住所 文字列型

4.3 コンテンツにタグスキーマを設定する

コンテンツがどのタグスキーマと関係しているか設定する。
設定させる対象物は、ノートが存在するページ自体でもよいし、フォーム上の文字列、図形、フォーム部品などそのコンテンツを構成している部品であればなんでもよい。ただし、アグリゲーション検索結果を「ボックス」で表示するときに、ここの設定が一覧表示に反映される。

ここで示すのはページに関連付けする例である。

図4-4 コンテンツとタグスキーマを関連付ける手順
  1. ページ一覧から対象のページを長押し/右クリックする。
  2. コンテキストメニューの ページ属性 を選択する。
  3. 「タグの設定」ダイアログ上で タグの追加をクリックする。
  4. 関連付けるタグスキーマを選ぶ。
  5. 完了ボタンをクリックして終了。

4.4 フォーム部品とタグプロパティをリンクする

フォームを構成するフォーム部品がどのタグプロパティと関係しているか設定する。

図4-5 フォーム部品とタグプロパティをリンクする手順
  1. 対象フォーム上のフォーム部品を長押し/右クリックする。
  2. コンテキストメニューの フォーム > タグにリンクする を選択する。
  3. 「リンクの設定」ダイアログ上で関連付けるタグプロパティ(日本語表記)を選択する。
  4. フォーム上の全てのフォーム部品に対して同じ手順を繰り返す。

演習問題4-2 物件フォーム部品に物件タグプロパティを紐づける

タグプロパティへのリンク機能を用いて、物件フォーム部品それぞれを物件タグプロパティに関連づける。

図4-6 物件フォーム部品とタグプロパティをリンクする

リンクするフォーム部品とタグプロパティID:

フォーム部品 タグプロパティID
名称 Name
物件タイプ Type
価格 Price
住所 Address

演習問題4-3 物件データを準備する

次章のアグリゲーション検索機能の動作を確認するため、タグスキーマとそのタグプロパティを紐づけた物件フォームに値を記入し、テスト用のデータを準備する。

  1. 完成した物件フォームのノートを保存する。
    • 7章で用紙テンプレート登録用に用いる。
    • ノートの名前を適当に設定する。
  2. そのノートを長押し、あるいは右クリックして、複製して開く をメニューから選択する。
  3. 複製したノートが開くので、物件フォームのページをコピーし、2~4枚のページを作成する。
    • ノートの名前を適当に変更する。
  4. それぞれのフォームに架空の物件情報を記入する。
    • 物件タイプが異なるように準備する。

コラム「SQLiteで物件テーブルを定義する」

この章で説明した物件のタグスキーマをデータベースSQLiteで定義してみる。 SQLiteは、オープンソースで軽量なデータベース管理システムであり、サーバーとしてではなくアプリケーションに組み込むことが多い。次章から説明するアグリゲーション検索に定義するSQL式は、SQLiteの文法に準じている。

まずコマンドラインツールをSQLite公式サイトからダウンロードする。

[SQLite公式サイト] https://www.sqlite.org/download.html

  • インストールするOS環境に応じて圧縮ファイルをダウンロードする。
    • Windowsの場合は、Precompiled Binaries for WindowsからZIPファイル(sqlite-tools-win-x64-***.zip)をダウンロードする。
  • ダウンロードしたZIPファイルを解凍し、適当な場所(例えば、Cドライブ以下にsqliteフォルダを作成する)に配置する。
    • 次の3つの実行ファイルが存在することを確認する。
      • sqlite3.exe: コマンドラインツール。
      • sqldiff.exe: 2つのデータベースの差分を調べる。
      • sqlite3_analyzer.exe: データベースの分析レポートを表示する。
  • 上記フォルダ上でコマンドプロンプトを開く。
  • sqlite3を作成するデータベース名とともに実行する。
> sqlite3 property_management.db
  • 物件テーブルを作成する
sqlite> create table property(name text, type text, price integer, address text);
  • 物件データを追加する
sqlite> insert into property values('コーポ六本木', 'アパート', 120000, '東京都港区六本木4-18-16');
sqlite> insert into property values('新青山オフィス', 'オフィス', 1230000, '東京都港区北青山1-2-3');
  • 物件データを取得する
sqlite> select * from property;
  • コマンドラインから抜ける
sqlite> .exit

5 検索条件を定義する

リレーショナルデータベースに蓄積されたデータは操作言語SQLで検索できるように、GEMBA Noteにおいても同様のことを行うことができる。

GEMBA Noteではタグスキーマにリンクしたフォーム入力データをタグデータベース(タグDB)として操作を行うことができる。それが「アグリゲーション」と呼ばれる集約機能である。

アグリゲーション検索システムは、各種DBコネクタによって収集したデータの中から検索条件に合ったデータを抽出し、表示するしくみを提供する。

5.1 検索条件を作成する

検索条件を作成するには2つの入り口がある。

  • パッケージ開発フォルダのコンテキストメニュー > 操作アグリゲーション検索条件一覧
  • (ノートを開いた状態で)ツールボックス > タグ一覧 > アグリゲーション検索条件一覧

検索条件を作成する流れを以下の図に示す。

図5-2 検索条件の作成2
図5-3 検索条件の作成3
  1. 検索条件を追加する項目をクリックする。
  2. テーブル名を決める。ここで指定した名称をSQL式の中で利用する。
  3. コネクタのタイプを選択する(後述)。
  4. どのタグスキーマを検索するのか選択する。
  5. コネクタタイプがLocalTagDBやServerTagDBの場合は、どこのフォルダを検索するかパスを指定する。
  6. フォルダを選択する。
  7. 対象とするフォルダを選択する。
  8. 「コネクタの追加」ダイアログ上で 完了ボタンをクリックする。
  9. 「検索条件の設定」ダイアログ上の SQL をクリックする。
  10. SQL式を記述する。
  11. 「SQLの設定」ダイアログ上で 完了ボタンをクリックしてSQL式の編集を終える。
  12. 「検索条件の設定」ダイアログ上の 完了ボタンをクリックして検索条件の編集を終える。

5.2 検索条件の構成

検索条件は、設定ID、結果タグスキーマ、検索パラメータ、コネクタ、そしてSQLを設定することで定義される。その実体はXMLファイルであり、エクスポートすることでその内容を見ることができる。

図5-4 検索条件ファイルの内容

5.3 検索条件の構成要素

検索条件を構成する要素の内訳は次の通りである。

構成要素 説明
設定ID アグリゲーション検索条件を識別する。
パッケージ情報 開発パッケージを識別する。
抽出設定 抽出テーブル名、コネクタタイプ(次ページを参照)、検索対象のタグスキーマ、コネクタ固有のパラメータから構成
SQL コネクタからのデータ抽出方法をデータベース操作言語のSQLで記述する。
結果タグスキーマ 検索結果の内容を表現するタグスキーマ
検索パラメータ 検索時に用いられる変数に相当する。SQL式の中で用いられる。

5.4 コネクタのタイプ

コネクタは、GEMBA Noteがサポートする各種データソースに接続してデータを抽出する。その種類には、タグスキーマの検索方法の違いにより以下のようなものが存在する。

コネクタタイプ 説明
NoteTagDB 同じノート内のタグDBを検索する。
LocalTagDB 同じローカル環境のタグDBを横断検索する。
ServerTagDB 同じサーバー環境のタグDBを横断検索する。シェアノートを正しく検索するときに用いる。
初期状態では検索件数は1,000に設定されている。
REST GETやPOSTなどHTTPメソッドでアクセスできるデータソースを検索する。
Unit 同じノート内の表ユニットを検索する。
Salesforce Salesforce Apex RESTから検索する。

5.5 SQLを記述する

  • SQLの記述は「SQLite」に準じており、詳細な仕様は​ https://www.sqlite.org/lang_select.htmlを参照のこと。
  • 以下のカラム(タグプロパティ)をSELECTの結果カラムとして記述しておくと、コネクタのタイプがNoteTagDB、LocalTagDB、ServerTagDBの場合は、結果としてサムネイル表示や該当ページへのジャンプができる。
    • _driveId ,_documentId , _roomId, objectType ,_objectId ,_ownerId ,_pageId ,_layerType ,_layerId ,_x ,_y ,_width ,_height
    • アスタリスク (*)を、SELECT文のカラムとして記述すると、全ての利用可能なカラムを取得する。
  • 英数以外の文字や空白を含むカラム名を使う場合は、必ず以下のようにASでカラムエイリアスを指定する。
    • SELECT “完了” AS “完了”,“期限” AS “期限”,…

5.6 フォルダを指定する

コネクタのタイプが LocalTagDB あるいは ServerTagDB の場合、検索するフォルダを指定する。

場所 folder要素の記述
ホーム /home/
個人フォルダ /home/private/
チームすべて /home/team/
チーム /home/team/チーム名/
チーム内のフォルダ /home/team/チーム名/フォルダ1/…/フォルダN/
検索実行時のノートが存在するフォルダ /context/

演習問題5 物件検索条件を作成する

物件タグスキーマ(ID: Property)を検索する条件を作成する。条件の設定は次の通り。

検索条件の構成要素 設定する値(例)
設定ID propertyList
日本語表記 物件一覧
結果タグスキーマ Property
抽出テーブル名 P_TABLE
コネクタのタイプ LocalTagDB
検索するタグスキーマ Property
検索対象のパス /context/
SQL SELECT * FROM P_TABLE WHERE Name != ’’

WHERE文は、物件名に値がない物件データは検索しないという意味である。

コラム「基本的なSQL文」

SQL (Structured Query Language) は、データベースとやり取りするための標準的な言語である。データベースの中には複数のテーブルが含まれる。テーブルは、行と列から構成されるデータの集合体である。各行はレコードを表し、各列はデータフィールドあるいはカラムを表す。

SQLにはいくつかの基本的なコマンドがあり、データベースの操作に用いられる。

SELECT: データを取得する

SELECT name, age FROM users;
-- usersテーブルの列nameとageの値を取得する

WHERE: 条件を指定する

SELECT * FROM users WHERE age > 20;
-- usersテーブルのageの値が20より大きいレコードを取得する

ORDER BY: データを指定した列で並び替える

SELECT * FROM users ORDER BY age DESC;
-- usersテーブルのageの値が大きい順番でレコードを取得する

JOIN: 複数のテーブルから関連するデータを結合して取得する

SELECT users.name, orders.order_id 
FROM users 
JOIN orders ON users.user_id = orders.user_id;
-- usersテーブルとordersテーブルのうちuser_idの値が合致するレコードのname列とorder_id列の値を取得する

GROUP BY句と集計関数

SELECT department, COUNT(*) 
FROM employees 
GROUP BY department;
-- employeesテーブルのdepartmentの値ごとにその数を取得する
※集計関数として、SUM、COUNT、AVG、MAX、MINなどを用いることができる。

6 検索条件を実行する

前章で定義したアグリゲーション検索条件を実行する方法をこの章では説明する。またボタンアクションで、タグスキーマの値を変更する方法について解説する。

6.1 アグリゲーションを実行する

前の章で作成したアグリゲーション検索条件を実行するには、まず開発パッケージ上でノートを開き、そのページ上で > アグリゲーション をクリックして開始する。

図6-1 アグリゲーションの実行
  1. メニューの中から アグリゲーションを クリックする。
  2. 結果を表にして追加 を選択する。
  3. 検索条件 をクリックする。
  4. 実行するアグリゲーション検索条件を選択する。
  5. 完了ボタンをクリックする。

検索した結果が表形式でノートに追加される。表の見出しはアグリゲーション検索条件を定義するときに指定した結果タグスキーマの中からSQL文で設定したカラム(タグプロパティ)となる。

6.2 アグリゲーションを更新する

アグリゲーション検索条件を実行した表形式のノート上で、フォーム部品のボタンを用いると、最新の内容に更新することができる。

配置したボタンを長押し/右クリックして設定を開始する。

図6-2 アグリゲーションの更新
  1. コンテキストメニューの中から フォーム > ボタンフィールドの設定 を選択する。
  2. ツールボックス上の 実行するコマンド をクリックする。メニューの中から アグリゲーションの更新 を選択する。
  3. 「アグリゲーションの更新」ダイアログ上で、動作が 最新に更新 がオンになっていることを確認する。
  4. 完了ボタンをクリックする。

初期設定でボタン部品のラベルは「最新に更新」に変わる。実行するアグリゲーションに応じてラベル名を変更する。

演習問題6-1 物件検索条件を実行する

  1. 開発パッケージ上で新規にノートを作成する。
    • ページの形式は横型無地がよい。
  2. 作成したページ上に表形式のアグリゲーションを追加し、実行する検索条件は前の章で定義した propertyList を実行する。
  3. 表の右上にフォーム部品のボタンを配置し、実行するコマンドは「アグリゲーションの更新」を設定する。
  4. 現在のページを閉じて、新たに物件データを追加、削除を試みて、更新ボタンをクリックして検索結果に反映されることを確認する。
図6-3 物件検索条件の実行

なお、ある物件の行の上で、右クリックするとコンテキストメニューが現れ、その中の 元のデータへ移動 を選択すると、該当するフォームへジャンプし、内容を確認、編集することができる。

6.3 検索パラメータを利用する

検索を実行するとき、あるフォーム部品の値を検索条件に用いるときは「検索パラメータ」を利用する。ここでは選択した物件タイプの値から検索結果を絞り込む条件を例にして、検索パラメータの試用手順を説明する。

検索パラメータ用タグスキーマの作成

物件タイプのフォーム部品と紐づけるタグスキーマを作成する。

タグスキーマの定義:

タグID 日本語表示名
PropertySearch 物件検索オプション

タグプロパティの定義:

プロパティID 日本語表示名 データの型
propertyType 物件タイプ 文字列型

物件タイプのフォーム部品を準備

  • 新たなページ(横型無地)を作成し、その上に、見出し「物件タイプ」、その隣に1行テキストフィールドを配置する。
  • 1行テキストフィールドのリストの設定は共有リストPropertyTypesを利用する。
  • タグスキーマPropertySearchは、見出し「物件タイプ」に設定する。
    • 見出しを長押し/右クリックして、コンテキストメニューのタグ > 設定 から追加する。
    • 1行テキストフィールドに設定してもよい。
  • 1行テキストフィールドとタグスキーマPropertySearchのタグプロパティpropertyTypeを紐づけする。
図6-4 検索パラメータフォーム部品

アグリゲーション検索条件の更新

  • 物件検索条件 propertyList を複製し、propertyListWithType とする。
    • アグリゲーション一覧上で対象をタップ/右クリックすると複製コマンドが現れる。
  • 検索条件設定ダイアログ上の「検索パラメータ」の追加ボタンをクリックして TYPE(文字列型、初期値:アパート)を追加する。
  • SQLを選択し、WHERE文に条件を追加する。
図6-5 検索パラメータを使ったSQL式

更新ボタンの編集

  • 最新に更新 ボタンを編集して、設定の変更 を選択する。
  • 検索パラメータを更新する をオンにすると、検索条件一覧が現れる。
  • 複製して作成した検索条件 propertyListWithType を選択する。
  • 検索パラメータにリンクするタグ をタグスキーマPropertySearchのタグプロパティpropertyTypeに設定する。
図6-6 検索パラメータを使ったボタン修正

演習問題6-2 タイプを指定して物件検索条件を実行する

前述の「検索パラメータを利用する」を参考にして、物件タイプを指定する1行テキストフィールドを配置して、最新に更新 ボタンをクリックすると、タイプごとの物件一覧に切り替わる検索条件を定義する。

図6-7 タイプ別物件一覧

6.4 アグリゲーション結果をタグに反映

ボタン部品のコマンドとして設定し、ボタンを押してアグリゲーションを実行する。結果はボタンと同じページのタグスキーマのタグプロパティ値へ反映される。データの転記、計算、加工に利用する便利なコマンドである。

図6-8 アグリゲーション結果をタグに反映する例

演習問題6-3 最安値の物件を探す

物件フォームを再利用して、最安値 ボタンを配置し、ボタンをクリックすると該当物件の名称、タイプ、価格、住所がフォーム上の入力部品に反映されるアグリゲーション検索条件を定義する。

図6-9 最安値物件を検索する

条件の設定は次の通り。

検索条件の構成要素 設定する値(例)
設定ID propertyMinPrice
日本語表記 最安値物件
結果タグスキーマ Property
抽出テーブル名 P_TABLE
コネクタのタイプ LocalTagDB
検索するタグスキーマ Property
検索対象のパス /context/
SQL SELECT * FROM P_TABLE WHERE Name != ’’ AND Price > 0 ORDER BY Price LIMIT 1

SQL文は、物件名が設定されており、価格が0円より大きく、価格を小さい順に並べた時の最初の物件データを取得する。

6.5 結果タグスキーマの役割

前の演習問題で最安値物件を抽出した後、ノートを保存し、5章で定義したアグリゲーションpropertyList(物件一覧)を実行すると、最安値となる同じ物件が2つ現れる。これはpropertyMinPriceの「結果タグスキーマ」が、「検索するタグスキーマ」と同じであるからである。

これを解決するには、

  • Propertyとは異なる出力用のタグスキーマを作成し(例えば、PropertyOutput)、
  • 最安値検索を行う物件フォームのタグスキーマの設定を出力用タグスキーマに差し替え、
  • 各入力部品とのリンクも出力用タグスキーマのタグプロパティに更新して、
  • propertyMinPriceの結果タグスキーマを出力用タグスキーマに再設定する。

を行う必要がある。

結果タグスキーマは、検索結果の中に入っているデータを解釈するために用いるタグスキーマである。検索対象となるタグスキーマの全てのプロパティではなくその一部のプロパティを表示したり、表示順序を変更したり、加工や計算した結果を求める時に利用する。

コラム「カスケードメニュー」

フォーム部品の中で、1行テキストフィールドや数値フィールドは、選択項目をプルダウンメニューの中から選択する機能がある。静的に固定された内容であれば、ツールボックス上の設定あるいは開発パッケージ内で共有リストで登録することができる。

動的に変化する内容の場合、アグリゲーションを用いる。このとき用いるタグスキーマは、GEMBA Note製品にあらかじめ定義されている StringValue (文字列の場合) あるいは NumberValue (数値の場合)を利用する。

例えば、物件名を1行テキストフィールドから選択させるアグリゲーション検索条件の設定は次の通りである。

検索条件の構成要素 設定する値(例)
設定ID menuProperty
日本語表記 物件名メニュー
結果タグスキーマ StringValue
抽出テーブル名 P_TABLE
コネクタのタイプ LocalTagDB
検索するタグスキーマ Property
検索対象のパス /context/
SQL SELECT Name as v, Name AS ja, Name AS en FROM P_TABLE WHERE Name != ’’

定義した検索条件は、該当するフォーム部品の設定画面を開き、リストの設定 から アグリゲーション にチェックを入れて、ここに指定する。

図6-10 カスケードメニュー設定

7 UIをカスタマイズする

GEMBA Note製品自体のユーザーインターフェースはXML形式の定義ファイルを準備し、それをノートあるいはノートテンプレートとして読むことによってカスタマイズすることができる。

詳しくは参考ドキュメントの「カスタムUI設定ガイド」を参照のこと。

7.1 カスタマイズできる箇所

GEMBA Noteの編集画面は初期設定では、全ての利用できるメニューやコマンドが表示されている。ある特定のコンテンツによっては、数多くのコマンドやメニューはユーザーにとって不要なものも存在する。そこで、必要なメニューやコマンドだけを編集状態のとき表示できるようにするのが「UI定義ファイル」である。

UIを定義するために、編集画面の領域ごとにUIの名称とXMLファイルの中で用いるIDを与えている。それを表した図が以下である。

図7-1 カスタマイズ箇所

7.2 UI定義ファイルの構成

GEMBA NoteのUIをカスタマイズするにはXML形式のファイルを準備する。その主な構成は次の通りである。

<?xml version="1.0" encoding="UTF-8"?>
<uicustomsetting xmlns="http://xmlns.metamoji.com/noteanytime/uicustomsetting/1.0" version="1" name="この属性値を見て更新があったかチェックする">
    <custom key="custom要素を区別する値">
        <name string="入力UI"/>
        <navibarleft>
            <!-- 左側メニュー項目を定義する -->
        </navibarleft>
        <navibarmode>
            <!-- 中央に配置するアイテムを定義する  -->
        </navibarmode>
        <navibarright>
            <!-- 右側メニュー項目を定義する -->
        </navibarright>
        <pagetab>
            <!-- ページタブ項目を定義する -->
        </pagetab>
        <menuset>
            <!-- メニューとその項目を定義する -->
        </menuset>
    </custom>
</uicustomsetting>

7.3 UI定義ファイルをインポートする

UI定義ファイルは、ノートテンプレートあるいはノートに読むことによってカスタマイズする。

[ノートテンプレートの場合]

  • 対象のノートテンプレートを長押し/右クリックして、コンテキストメニューの中の ノートテンプレート作成 を選択する。
  • その後は、下図の1~4の流れでファイルを読み込む。

[ノートの場合]

  • 開いているノートのナビゲーションメニュー上の 設定 をクリックする。
  • ノートの設定 > カスタム設定 を選択する。
  • その後は、下図の2~4の流れでファイルを読み込む。
図7-2 UI定義ファイルのインポート

UI定義ファイルの中にcustom要素が複数ある場合は、どちらを利用するかチェックを入れる。

7.4 フォームを登録する

作成したフォームのようなコンテンツは、メニューから素早く再利用できるようにテンプレートとして登録することができる。

  1. 対象となるページを長押し/右クリックする。
  2. コンテキストメニューから 登録/作成 > 用紙テンプレートの登録 を選ぶ。
  3. 適当なテンプレート名を記入する。
  4. 完了ボタンをクリックする。
図7-3 テンプレートとして登録

演習問題7-1 UIをカスタマイズする

演習素材の中からサンプルのUI定義ファイルをカスタマイズする。

  1. 演習素材の中から simple_ui.xml をダウンロードする。
  2. 物件データが含まれるノートを開く。
  3. 開いているノートのナビゲーションメニュー上の 設定 をクリックする。
  4. ノートの設定 > カスタム設定 を選択し、simple_ui.xmlをインポートする。
  5. メニュー構成が変わったことを確認する。

演習問題7-2 物件フォームをテンプレートに登録する

次の手順で物件フォームを用紙テンプレートに登録する。

  1. 物件フォームが含まれるノートを開く。
  2. ページ一覧を開く。
  3. 物件フォームがあるページを長押し/右クリックし、コンテキストメニューの 登録/作成 > 用紙テンプレートの登録 から登録を開始する。
  4. ノートを新規作成するときに、用紙テンプレート > 共有テンプレート の中に登録したフォームが含まれているか確認する。

演習問題7-3 CSVファイルからデータをインポートする

登録されたテンプレートを利用するとCSVファイルからデータを取り込むことができる。次の手順でデータのインポートを試みる。

  1. 演習素材の中から propertyList.csv をダウンロードする。
  2. 「不動産管理パッケージ」のフォルダ上で、新規ノート作成 をクリックし、適当なノートを作成する。
  3. ノート編集状態で、 メニューの中から ページを追加 > CSVから追加 を選択する。
  4. インポートするCSVファイルが聞かれるので、propertyList.csvを選択する。
  5. 「ページ追加の設定」ダイアログ上で、用紙テンプレート に前の演習問題で登録したテンプレートを設定する。 図7-5 CSVファイルのインポート
  6. 完了 ボタンをクリックすると、CSVファイルの読み込みが開始される。新たなページが追加され、それぞれCSVファイルの内容が反映されていることを確認する。

コラム「Visual Studio Codeで編集する」

UI定義ファイル、エクスポートしたタグスキーマのファイル、あるいはアグリゲーション検索条件ファイルはXML形式のファイルである。これらを編集するとき、メモ帳などのシンプルなテキストエディタではファイルを破壊する可能性がある。そこでもっと高度なテキスト編集ツールが必要となる。

Visual Studio Code(VS Code)は、Microsoftが提供している多機能なソースコードエディタである。VS Codeには次のような特徴がある。

  • オープンソースなので誰でも無料で利用ができる。
  • Windows、macOSあるいはLinuxなどの幅広いOSで利用ができる。
  • コードの自動補完機能があり、効率的な編集ができる。
  • 「拡張機能」という仕組みで機能をカスタマイズできる。

プログラムコードやテキストを編集するエディターなので、必ずしもVS Codeをインストールする必要はないが、ソースファイルを管理するGitとも親和性がよく、のちのちGitを使ってソースファイル管理を行う場面も現れるので、このエディターの利用をおすすめしたい。

次のURLから環境にあわせてソフトウェアをインストールする。

https://code.visualstudio.com/download

8 アプリケーションを運用する

この章では、GEMBA Noteの開発パッケージを他のユーザーが利用できるようにする過程と操作について説明する。

8.1 開発パッケージを公開する

開発したパッケージを他のユーザー、組織全体(全社)、あるいは特定のチームに公開するには以下の操作がある。

  • バックアップ(開発者向け)
    • 開発者権限を持つユーザーは、非常時に備えて開発パッケージの複製を作成することができる。
    • 作成したバックアップファイルは他の開発者も復元可能
  • リリース(開発者向け)
    • 開発者権限を持つユーザーは、開発パッケージからパッケージに関わるコンテンツをリリースする。
  • 配置(パッケージ管理者向け)
    • 開発者がリリースしたパッケージファイルをパッケージ管理者権限を持つユーザーが「(全社に)配置」する。
    • 開発者がパッケージ管理者である場合は、開発パッケージから直接(全社に)配置することができる。

8.2 パッケージをバックアップする

一般的にバックアップとは、機器の故障やデータの破損・消失などが発生した際に復旧できるよう、複製を取得して別媒体に保管しておくことを指す。GEMBA Noteでも、もしもの時の備えのために、開発パッケージのバックアップを定期的あるいは新たな開発フェーズの前に取っておくことをおすすめする。

バックアップを作成するときは、対象のパッケージ開発フォルダ上で長押し/右クリックする。

  • コンテキストメニューから その他 > バックアップ を選択。
  • バックアップを確認するダイアログが現れ、はい を選択する。
  • どこにファイルを保存するか聞かれるので、場所を指定し、保存する。

保存されるファイルは、<パッケージ名>__<バージョン>__backup.gncprojとなる。

復元するときは、「開発パッケージフォルダ」を選択しておき、ナビゲーションメニュー上の > ファイルを読み込む > バックアップ形式 からインポートするバックアップファイルを選択する。

8.3 パッケージをリリースする

開発者は、パッケージ開発フォルダからパッケージファイルをリリースする。作成したテンプレートやタグスキーマ、アグリゲーション検索条件などの設定が1つにまとめられたパッケージファイルを作成する。

対象のパッケージ開発フォルダを長押し/右クリックする。

  • コンテキストメニューから リリース を選択する。
  • どこにファイルを保存するか聞かれので、場所を指定して保存する。

保存したファイルは、<パッケージ名>__<バージョン>__package.gncproj となる。

8.4 パッケージを配置する

パッケージ管理者は、開発者が作成したパッケージファイルをもとに、開発パッケージを全ユーザーが利用できるように配置することができる。

まず、ナビゲーションメニュー上の設定をクリックし、メニューの中から パッケージの管理 を選択する。

図8-1 パッケージを配置する
  1. インポート をクリックする。
  2. インポートするパッケージファイルを選択する。
  3. 開くボタンをクリックする。
  4. 開発パッケージの内容を確認し、インポートボタンをクリックする。
    1. パッケージを配置してよいか聞かれる。
    2. インポートには少し時間がかかる。
  5. インポートしたパッケージにチェックせずに閉じると全社への配置とはならない。
  6. インポートしたパッケージにチェックを入れる。
  7. 使用する ボタンをオンにしてダイアログを閉じる。全社のユーザーがこのパッケージを利用可能になる。

8.5 特定のチームに公開する

全社配置せずにパッケージを公開した場合は、チームごとに公開することが可能である。

対象のチームフォルダを長押し/右クリックし、コンテキストメニューから 操作 を選んで開始する。

図8-2 チームに公開する
  1. 操作メニューの中から パッケージの選択 を選ぶ。
  2. 公開するパッケージにチェックを入れる。
  3. 使用する トグルボタンをオンにする。
  4. 戻るボタンをクリックする。
  5. 完了ボタンをクリックする。

演習問題8-1 不動産管理パッケージをバックアップする

  1. 不動産管理パッケージの内容を確認するため、パッケージフォルダ上で長押し/右クリックする。
  2. コンテキストメニューの 操作 を選択し、次の項目に作成したコンテンツが含まれるか確認する。
    • タグスキーマ一覧
    • アグリゲーション検索条件一覧
    • 用紙一覧
    • 共有リストの管理
  3. バックアップファイルを作成する。

演習問題8-2 不動産管理パッケージを配置する

次の手順で不動産管理パッケージを配置する。

  1. 不動産管理パッケージからパッケージファイルを作成する。
  2. 作成したパッケージファイルをインポートする(全社配置はしない)。
  3. 適当なチームフォルダを作成する。
  4. まだパッケージに含まれる用紙は利用できないことを確認する。
  5. 作成したチームフォルダ上で、配置したパッケージを選択する。
  6. パッケージに含まれるコンテンツが利用できることを確認する。

コラム「デプロイとは?」

英単語のdeployは、「展開する」「配置する」といった意味がある。システム開発における「デプロイ」は、開発したアプリケーションをサーバー上に展開・配置して利用できるようにすることを意味する。

たとえば、Webアプリケーションであれば実行ファイルをWebサーバーやアプリケーションサーバーにアップロードして、その実行ファイルを起動することでサーバー上でアプリケーションが動くようになり、ユーザーが利用できる状態になる。この一連の作業がデプロイと呼ばれる。

デプロイを行うためには準備が必要であり、準備の工程としてソースプログラムから実行ファイルへ変換する「ビルド」、そして実行ファイルを含めた動作環境を公開する作業を「リリース」と呼ぶ。

GEMBA Noteの開発環境ではビルド作業を必要としないが、開発パッケージをリリースして、配置する作業があるのは、このような背景があるからである。一般的にはデプロイ作業の前後で、サーバーを停止して、再起動を必要とする場合が多いが、GEMBA Noteではこれも必要としない。

更新履歴

日付 説明
2025-10-10 GEMBA Note V7に伴う見直し
2025-01-23 バックアップファイルを更新(1.0.3)
2024-11-26 細々とした文言修正
2024-10-23 物件検索オプションタグプロパティ名を変更
2024-08-26 β版
2024-07-11 開発手順を追記
2024-06-26 α版