1.概要
※「Buddy はじめに」を最初お読みください。
-
Buddy は、主に社内業務向けの Web アプリケーションを、開発・運用するシステムです。Buddy 自体も、Buddy で開発されたアプリケーションも、Web ブラウザ上で動作します。
-
Buddy サーバーには、運用管理機能、開発機能、アプリ実行機能がひとつにパッケージされています。Buddy サーバーは利用契約ごとに一つ提供されます。
-
本文書では開発機能について解説します。開発機能は、開発の権限を持つユーザーのみが利用できます。
-
モジュールや API の詳細については「Buddy API リファレンス」を、スクリプト(Javascriptのプログラム)の書き方の注意点などは「プログラミングガイド」をご覧ください。
2.Buddy と Webアプリケーション
-
Web アプリケーションは、Web ブラウザ上で動作するアプリケーションです。Buddyの運用管理機能や開発機能自体も、Buddy によって開発されたアプリも、Web アプリケーションです。
-
Web アプリケーションは、それを提供する Web サーバー(Buddy サーバー)と適宜通信しながら連携して動作します。したがって、Buddy サーバーと通信できる環境でないと利用できません。
※ 将来、Web ブラウザ内にアプリケーションやデータを保存して、サーバーと通信できない環境でも使えるアプリを開発できるようにする予定ですが、現在はサーバーと通信できないと Buddy 自体も開発されたアプリも利用できません。
3.URL とログイン情報
-
Buddy のアドレス(URL)は契約時に連絡されます。
-
ユーザーリストを管理し、ユーザーの権限(一般、開発、運用管理、運用管理・開発)を設定する作業は運用管理者がおこないます。
4.ブラウザ
-
Buddy と各アプリは、パソコンでは次のブラウザで動作します。開発にはパソコンを使用してください。
- Firefox
- Chrome
- Edge
-
Buddy でのアプリ開発はパソコンのメモリを多く必要とします。4G バイトでも動きますが、8G バイト以上を推奨します。また、画面が広くないと効率よく開発が行えません。できるだけ解像度の大きなディスプレーをご利用ください。スマホやタブレットでの開発は想定していません。
-
開発されたアプリはスマホやタブレットでも動作しますが、ブラウザによって一部動かない部分がある場合があります。
-
不具合報告やご意見等をいただく際は、ブラウザとそのバージョンを書き添えていただくようお願いします。
-
以前はInternet Explorer 11(IE11)も対象でしたが、マイクロソフト社がInternet Explorerのサポートを2022/6/16で停止したことにともない、Buddyでも対象外となりました。
すでにIE11で稼働しているアプリが動作しなくなることはありませんが、今後BuddyのIE11での不具合が見つかってもサポートされませんので、ご注意ください。
5.アプリ開発の概要
-
アプリケーションは利用契約のプランに応じた制限の範囲でいくつでも作成できます。(同時に稼働できるアプリ数はサーバーのメモリ容量の制約を受けます。また、ディスクの空き容量が少なくなるとアプリの作成ができなくなります。)
-
アプリ作成は概ね次の手順でおこないます。

[設計]
-
① テンプレートを選び(もしくは白紙の状態で)、名前を付けてアプリを作成する。
-
② データベース(DBテーブル、DBビュー)設計、スクリーン設計、レポート設計など
をおこなう。
[デバッグ用生成とテスト]
-
③ 設計情報に基づいてアプリをデバッグ環境用に生成する。
-
④ 生成したデバッグ用アプリをテストする。
※ 必要に応じて②から繰り返す。
[本番用生成]
-
⑤ アプリを本番環境用に生成する(リリースと言う)。
-
上記①と②ではアプリの設計情報が作成されるだけで、③と⑤のアプリの生成をおこなってはじめて実行できる状態のアプリができることに注意してください。
デバッグ用アプリと本番用アプリは URL が異なります。 -
データベースもアプリの生成をおこなう際に設計情報にもとづいて、デバッグ用、本番用それぞれに作成・更新されます。
デバッグ用と本番用のデータベースは独立していますので、デバッグ環境でテストする時に入力したデータが本番環境に影響することはありません。 -
スクリーン設計では、アプリを構成する各画面を設計します。
文字列、画像、入力欄、ボタンなど、様々なパーツ(モジュールと呼ぶ)が用意さていて、それを配置し、必要に応じてスクリプト(Javascript 言語によるプログラム)を書いて、様々な動作を実現します。 -
レポート設計では、アプリから出力する Excel ファイルや PDF ファイルの内容を設計します。Excel レポートは、テンプレートとなる Excel ファイルを用意し、そこにデータを埋め込むことで出力します。
※生成の手順について
- データベースの構造は、デバッグ用生成の際にデータベース設計の内容がデバッグ用データベースに反映し、本番用生成の際にそれが本番用データベースに反映します。データベース設計を変更・保存したあと、いきなり本番用生成をおこなうと正しくデータベースに反映しません。必ずデバッグ用生成をおこない、動作確認をおこなってOKであれば本番用生成をおこなう、という手順でおこなってください。
※フレームワークについて
-
上の図では省略していますが、アプリの生成の際には、ユーザーが作成した設計情報に、Buddyに用意されているアプリの枠組みや部品(スクリーンモジュールなど)が組み合わされてアプリの実行ファイルとなります。
このアプリの枠組みや部品のことを「フレームワーク」と呼びます。 -
フレームワークにはメジャーバージョンとして1と2があり、フレームワーク1とフレームワーク2には互換性がありません。アプリを新規作成する際にどちらのフレームワークを使うか選択します。
※フレームワークのアップデートについて
- 改良のためにフレームワークをアップデートすることがあります。その際、既存のアプリにそれを適用してアプリの挙動が変わったり不具合が生じると困るので、既存アプリには適用されません。既存アプリにアップデートを適用するには、「既存アプリから作成」という機能でアプリのコピーを作成する際にアップデート適用を指定します。詳しくは後述の【アプリ新規作成】の「既存アプリのコピー」の項をご覧ください。
5.1.フレームワーク2
-
Buddyではアプリの枠組みや部品を「フレームワーク」と呼びます。2023年5月のアップデートで、フレームワークを抜本的に改良した「フレームワーク2」をリリースしました。従来のフレームワークを「フレームワーク1」と呼んで区別します。
※フレームワーク2は、アプリ作成にも利用いただけますが、まだベータバージョンであり、未実装の部分もあります。今後さらに改良を進めていきます。 -
アプリを生成するとフレームワークが組み込まれた状態となって、アプリとして動作します。つまり、各アプリにはフレームワークが組み込まれています。アプリを新規作成する際には、フレームワーク1と2のどちらを使用するかを選択します。
フレームワーク2がリリースされ、今後フレームワーク2を使ったアプリが増えていくことになりますが、従来のフレームワーク1のアプリも引き続き動作します。 -
フレームワーク1と2には互換性はありません。フレームワーク1のアプリをフレームワーク2に移行するには、もう一度作り直すことになります。
フレームワーク2の改良点・特徴
-
スクリーンスクリプトの書き方がシンプルになりました。Buddyが提供する様々な機能は全てbuddyというオブジェクトから利用できます。
-
データベースとモジュールの結びつきを扱うDataLinkerという仕組みが導入され、非常に簡潔に書けるようになりました。
-
データベース操作などの非同期処理が最近の主流であるプロミスを使用した方式になり、簡潔でわかりやすい書き方ができるようになりました。
-
スクリーンテンプレートが一新され、作成後のスクリーンにモジュールの追加・削除を行った際にも、スクリプトはできるだけそのままで動作するようになりました。
-
新しいスクリーンテンプレート「一覧」「閲覧・入力」が追加され、よりシンプルな画面構成が可能となりました。これを利用したアプリをExcelデータから簡単な操作で作成できるようになりました。
-
スクリーンモジュールはすべてフレームワーク2用に一新されました。使用頻度の高い基本的なモジュールのみが標準モジュールとなり、それ以外はプラグインとして必要な時にリポジトリから取り込んで使用するようになりました。今後、特別な機能を持ったモジュールもプラグインとして提供し、作成できるアプリの幅を広げていく予定です。
※リポジトリでは、プラグインモジュールとともに、アプリ、アイコン画像、スクリーンテーマも提供されます。
6.データベースの基本
-
データベースは、データを永続的に保存し取り出せる仕組みです。アプリで何らかのデータを保存する必要がある時にはデータベースを使用します。
※ Buddy では PostgreSQL というリレーショナルデータベースを使用しています。 -
DB テーブルは「カラム」と呼ぶいくつかの項目を組み合わせたデータ(一件ずつを「レコード」と呼ぶ)がたくさん集まったものです。Excel になぞらえれば、各列がカラム、各行がレコードに相当する、と考えればよいでしょう。
-
各カラムには名前を付けるとともに、そのカラムに格納するデータが、数値なのか、文字列なのか、といった型を与えます。型に合致しないデータを入れようとするとエラーになります。
-
DB テーブルは実際にデータを格納できるものですが、DB ビューはそれ自体はデータを持たず、テーブルからカラムやレコードを限定したり、テーブル同士を結びつけたりして、仮想的なテーブルを作成するものです。(その他にも機能がありますが、あとで説明します。)

7.名前について
-
アプリ名、DB テーブル名、DB テーブルのカラム名、DB ビュー名、スクリーン名、レポート名など、アプリの設計では様々なものに名前を付ける必要があります。
これらの名前には、半角英数字または「_」(アンダースコア)のみが使えます。大文字小文字を混ぜた名前を付けられますが、同じ名前かどうかをチェックする際には大文字小文字は区別されません。例えば「Test」という名前のスクリーンがすでにあれば、「test」という名前のスクリーンは作成できません。 -
多くのものについて、半角英数字の名前とは別に表示用の名前を付けられます。
表示用の名前には制約はなく、日本語の名前を付けることができます。 -
ユーザーIDについては、メールアドレスをそのまま使えるように、半角英数字と「_」「@」「-」「.」の記号が使えます。
8. ユーザーと権限について
-
Buddy の開発画面と各アプリの画面は、全てユーザー名とパスワードによるログインが必要です。
※ アプリについては、ログインを必要としないゲスト利用ができる設定が可能です。(【アプリメニュー】の【権限管理】を参照) -
原則としてBuddyの開発画面と各アプリのユーザーは共通で、シングルサインオン(どれかのアプリでログイン済みであれば、他のアプリでもログイン済みの扱い)になります。特定のアプリについて、共通のユーザー管理と切り離して固有のユーザー管理をおこなうようにすることも可能です。
-
各アプリの開発や利用について、編集や閲覧をどのユーザーやグループがおこなえるか、の権限管理ができます。
-
ユーザーやグループによってアプリの特定の画面に使用権限を与える(例えば、この画面は「経理部」グループのメンバーのみが利用できるというような)権限の設定ができます。
9.トップページ

-
上の画像はログイン後のアプリ画面の例で、アプリ一覧が表示されています。アプリをクリックすると、別ウィンドウでそのアプリが起動します。
※アプリ数が多い場合のために、検索機能やお気に入り機能などが用意されています。これらの機能を使用する方法は、「運用管理ガイド」の「アプリ表示管理」をご覧ください。 -
Buddyの画面は、大きく分けて上部のヘッダ、左側のマニュアル、中央のコンテンツ(アプリ画面ではアプリ一覧)、右側のお知らせ、からなります。
-
画面左側のマニュアルは、それぞれのアイコンをクリックすれば別ウィンドウでそのマニュアルが開きます。
-
画面右側のお知らせは、管理者からのお知らせやアプリからのメッセージで、未読のものがあるときに表示されます。クリックすると内容を見ることができます。
-
ヘッダの左端には次の画面選択アイコンがあります。現在選択されている画面のアイコンは色つきで表示されます。
(アプリ)
- アプリ画面に切り替えます。その左のBuddyのロゴをクリックしても同じようにアプリ画面に切り替えます。ログイン後はアプリ画面になります。
アプリ画面ではアプリの一覧から選択してアプリを起動します。 (運用管理)
- 運用管理画面に切り替えます。
運用管理画面では、ユーザー管理、アプリ画面へのアプリ表示の調整、アプリの一時停止、ログの閲覧などを行います。ただし、運用管理機能を使用するには運用管理権限が必要です。 (開発)
- 開発画面に切り替えます。
開発画面ではアプリの開発を行います。ただし、開発機能を使用するには開発権限が必要です。
- ヘッダの右端には、バージョン番号表示とともに、三つのアイコンがあります。
(ユーザー)
- マウスカーソルを合わせると、現在ログイン中のユーザー名が表示されます。クリックすると「ユーザー設定」画面が開きます。(後述)
(Buddy1へ)
- クリックすると画面をBuddy1に切り替えます。
(マニュアル)
- クリックするとマニュアルと問い合わせの画面が開きます。
10.開発
- 画面上部の開発アイコン
をクリックすると次のような開発画面に移ります。

- 開発メニュー には次のメニューがあります。
(アプリの新規作成)
- アプリを新規に作成します。
(リポジトリから作成)
- リポジトリにあるアプリをコピーして作成します。
(Excelデータから作成)
- Excelのシートにある表に基づいて、データベースと一覧・閲覧入力のスクリーンを持つアプリを自動的に作成します。
-
アクティビティ には、最近の操作(アプリの作成、生成など)の一覧が表示されます。一覧の中の行をクリックすると、当該アプリの編集画面に遷移します。
-
既存アプリの編集 には、既存アプリの一覧が表示され、一覧の中の行をクリックすると、当該アプリの編集画面に遷移します。
検索 のテキストボックスに入力すると、入力文字列を名前に含むアプリに絞り込まれます。
アプリの一覧は、「名前」「表示名」などの項目名をクリックすると、その項目内容で並べ替えることができます。
「デバッグ」「リリース」はそれぞれデバッグ用の生成、本番用の生成をおこなった日時です。リリースしているアプリについては「開く」ボタンをクリックしてアプリの実行画面を開くことができます。
11.アプリ新規作成
- 開発メニューの「アプリの新規作成」アイコンをクリックすると、次のダイアログが開きます。

-
「アプリ名」「表示名」を入力し、「テンプレート」と「framework」を選択して「作成」ボタンをクリックするとアプリが作成されて、そのアプリの編集画面に遷移します。
-
frameworkは、作成するアプリで使用するフレームワークを選択します。フレームワーク1に慣れていてあえてframework1を選ぶのでない限り、通常はframework2を選択していただけばOKです。
-
「テンプレート」の「選択」ボタンをクリックすると次のダイアログが開きます。

- 「既存アプリのコピー」は既存のアプリをコピーして新規アプリを作成します。「組み込みテンプレート」は、Buddyに用意されたアプリテンプレートにもとづいて新規アプリを作成します。
(既存アプリのコピー)
- このBuddyサーバー内の既存アプリから選んでコピーして新規アプリを作成します。
(設計情報をアップロード)
- このBuddyサーバーまたは他のBuddyサーバーからダウンロードされたアプリの設計情報ファイルをアップロードして、新規アプリを作成します。
※設計情報をダウンロードする方法は後述 (白紙のアプリ)
- 中身のない新規アプリを作成します。一からアプリを作成するときに使用します。
既存アプリのコピー
- 既存アプリのコピー を選択したときは、次のようなダイアログとなります。

-
「コピー元」は「選択」ボタンをクリックしてコピー元となるアプリを選択します。
-
「バージョン」は通常は「(最新)」ですが、過去の保存されたバージョンがある場合はそこから選択して、過去のバージョンのコピーで作成することができます。
※バージョンの保存の方法は後述。 -
「Frameworkアップデート」は、コピーして作成するアプリで、アプリの構成要素となるスクリーンモジュールなどのフレームワークを最新のものにするかどうかを選択します。
「する」を選択すると、フレームワークは最新のものとなります。「しない」を選択すると、コピー元のアプリと同じフレームワークを使います。
フレームワークのアップデートをおこなうことで、最新の機能が使えるようになりますが、スクリーンのスクリプトをそれに合わせて変更する必要がある場合もあります。
※「する」を選択してフレームワーク1のアプリをコピーする場合、フレームワーク1の最新版になります。フレームワーク2になるわけではありません。
<アプリ作成時の制限>
-
アプリを作成する際に、Buddyサーバーの空きディスク容量が4Gバイト(またはメモリが4Gバイト未満の場合はメモリ容量)よりも少ないと、作成できません。
-
設計情報をアップロードして作成する場合は、上記の必要空きディスク容量に加えて、アップしたdatファイルのサイズの12倍の空きディスク容量が必要です。
12.リポジトリからのアプリ作成
- 開発メニューの「リポジトリから作成」アイコンをクリックすると、次のダイアログが開きます。

-
リポジトリにあるアプリの一覧が表示されます。
検索 に検索文字列を入力したり、更新順と名前順を切り替えることで、目的のアプリを見つけやすくなります。 -
アプリの一覧で背景色がついているアプリは、リポジトリ上での公開区分が「プライベート」のものです。「プライベート」とは、現在アクセスしているBuddyサーバーにのみ見えるようになっているものです。
-
各アプリの詳細ボタンをクリックすると、別タブでリポジトリ上での当該アプリの説明ページが開きます。
-
「デモアプリ」などはアプリの分類のタグです。例えば「開発サンプル」をクリックすると、次のようにその分類のアプリだけに絞り込まれた状態となります。

- 目的のアプリが見つかったら、そのアプリ名をクリックすると、次のダイアログが開きます。

-
アプリ名、表示名は、自由に変更できます。
-
作成するアプリは、選択したアプリが表示されていますが、クリックすることで選択し直すことも可能です。
-
アプリを生成するのチェックを入れておくと、アプリ作成後に自動的にデバッグ版とリリース版の生成まで行われます。
-
作成ボタンをクリックすると、アプリが作成されて、その編集画面に移ります。
開発サンプル
-
リポジトリにあるアプリで「開発サンプル」に分類されているアプリは、実用に供するというよりはアプリ開発の技法を習得するためのサンプルという位置づけのものです。
スクリプト部分にはできるだけコメントを入れてわかりやすいように配慮しています。 -
特に「Buddy開発サンプル集モジュール編1」「Buddy開発サンプル集モジュール編2」「Buddy開発サンプル集スクリプト編」およびそれらのフレームワーク2版は、個々のスクリーンモジュールの使い方や、目的毎のスクリプトのサンプルになっていますので、Buddyでの開発を始めようという方はぜひ参考にしてください。
13.Excelからのアプリ作成
- 開発メニューの「Excelデータから作成」アイコンをクリックすると、次のダイアログが開きます。

- ファイル選択で元になるExcelファイルを選択します。例えば次のExcelファイルを選択します。

- すると、内容が読み取られて次のダイアログが開きます。

-
アプリ名と表示名はExcelファイルのファイル名から作られます。カラム設定の各カラムの名前と表示は、Excelの先頭行が項目名になっているものとして、そこから作られます。種類と詳細はExcelの当該列の内容から推定されます。
いずれも変更が可能なので、適宜変更します。
また使用するはクリックすると使用しないに変更でき、アプリでは使用しない列を指定できます。 -
作成をクリックすると、データベースと一覧・閲覧入力のスクリーンからなるアプリが自動的に作成されます。
作成したアプリを生成し、DBテーブルのインポートで元になったExcelファイルを読み込んでデータをインポートすることもできます。
その結果は次のようなアプリの画面となります。

14.アプリ開発画面
- アプリを新規作成すると、次のようなアプリの編集画面になります。(この例は白紙のアプリの場合です。)

-
上部のヘッダ部にある開発アイコンはクリックすると開発のメニュー画面に戻ります。
その右のアプリアイコンはクリックするとアプリメニューダイアログが開いてそのアプリに関する各種の操作を行うことができます。
その右の2行の表示の上は、現在の対象アプリの名前とバージョン。下は、「デバッグ」「リリース」の選択と生成日時、「生成」と「開く」のアイコンです。 -
「生成」をクリックするとデバッグ用生成または本番用リリースがおこなえ、「開く」をクリックするとデバッグ用または本番用アプリを別タブで開くことができます。
-
画面左のメニュー部分は、アプリ開発に必要な項目が並んでいます。
[-]が表示されている部分は、クリックするとその内容を隠すことができます。内容が隠れると[+]に表示が変わり、クリックすると内容を表示する状態に戻ります。
- アプリ生成
- アプリの生成に関連する機能がまとめられています。
- アプリメニュー
- アプリの状態を表示するとともに、アプリの管理機能がまとめられています。
- アプリ文書
- アプリについてのメモとマニュアルを編集できます。
- スクリーンテーマ編集
- スクリーンテーマ(画面デザインについての設定をまとめたもの)の編集ができます。
- 絞り込み検索
- その下の、DBテーブル設計、DBビュー設計、スクリーン設計、レポート設計、サーバー機能設計、に表示される項目が、入力した文字列を含む名前のものに絞り込まれます。
- DBテーブル設計
- アプリのデータベースのテーブルを設計します。[新規作成]をクリックすると新規に作成し、既存のものの名前をクリックすると編集できます。
- DBビュー設計
- アプリのデータベースのビューを設計します。[新規作成]をクリックすると新規に作成し、既存のものの名前をクリックすると編集できます。
- スクリーン設計
- アプリのスクリーン(画面)を設計します。[新規作成]をクリックすると新規に作成し、既存のものの名前をクリックすると編集できます。
- レポート設計
- アプリのレポート(ExcelやPDFでの出力)を設計します。[新規作成]をクリックすると新規に作成し、既存のものの名前をクリックすると編集できます。
- サーバー機能設計
- アプリのサーバー機能(サーバー側で実行されるプログラム)を設計します。[新規作成]をクリックすると新規に作成し、既存のものの名前をクリックすると編集できます。
15.アプリ生成
- 開発画面の左側のメニューで「アプリ生成」を選ぶと次の画面が表示されます。

-
「現在のバージョン」はこのアプリの現在のバージョン番号を表示します。
-
「次のバージョン」は次に生成を行ったときのバージョン番号です。現在のバージョン番号から末尾番号が一つ増えた番号に自動的にセットされますが、変更することができます。ただし番号を増やす変更のみ可能です。
-
「バージョン保存」ボタンをクリックすると次のダイアログが開きます。「保存する」をクリックすると現在のバージョンを保存します。保存したバージョンはアプリをコピーする際に選ぶことができます。

-
「デバッグ版」と「リリース版」それぞれの「アプリ生成」はアプリの生成を行います。「アプリを開く」は生成されたアプリを別タブで開きます。
-
「生成オプション」ではアプリ生成時のオプションとして次のものを設定します。
- Babelを使用
- InternetExplorerなどの古いブラウザでも新しいJavascriptの機能が使えるようにプログラムの自動変換を行います。
使用すると、実行されるプログラムは設計画面で入力したままではなく変換後のものになるため、デバッグがしにくくなります。必要な場合にのみ使用してください。 - キャッシュ
- 「保持する」では生成時のキャッシュを保持することで生成を速くします。「クリアする」ではキャッシュを使用せずに生成し直します。
通常は「保持する」で構いませんが、何らかの不具合がキャッシュに含まれてしまったような場合に「クリアする」を使用してください。
- 「開発メモ」は開発上のメモを残すためのものです。デバッグ用生成やリリースをおこなった場合は自動でそのメモが登録されます。
16.アプリメニュー
- 開発画面の左側のメニューで「アプリメニュー」を選ぶと次の画面が表示されます。

- 「アプリ情報」には次の情報が表示されます。ここでの表示内容は表示のみで直接編集することはできません。
- アプリ名
- 英数字によるアプリ名で、URLの一部となるものです。アプリ作成時に指定し、変更できません。
- アプリ表示名
- 日本語を含めて自由に付けられるアプリの名前です。「表示設定」で変更できます。
- 作者
- アプリを作成したユーザーのユーザーIDです。
- 作成日
- アプリを作成した日時です。
- バージョン
- 現在のアプリのバージョン番号です。バージョン番号はアプリの生成の時に増えていきます。
- ログインの分離
- アプリのログインをBuddy全体のユーザー管理から分離してアプリ独自のユーザー管理をおこなうかどうかを表示します。「権限管理」で変更できます。
- フレームワークのバージョン
- フレームワークとはボタンやテキストボックスといったスクリーンモジュールなど、アプリの構成要素としてBuddyで提供されているものです。
フレームワークのバージョンはアプリを作成するときに決まります。 - アイコン
- アプリのアイコンです。「アイコン変更」で変更できます。
- デバッグ生成日時
- アプリのデバッグ版を生成した日時です。
- リリース生成日時
- アプリのリリース版を生成した日時です。
- ストレージ使用量(開発)、ストレージ使用量(デバッグ)、ストレージ使用量(リリース)
- アプリがBuddyサーバーのディスク容量をどれだけ使用しているかを表示します。
- 「管理メニュー」には次のボタンがあります。
- Framework変更
- アプリのフレームワークのバージョンを変更します。フレームワーク2の場合のみ変更可能です。
- Plugin管理
- リポジトリにあるプラグインから選んで、このアプリに追加します。
- アイコン変更
- アプリのアイコンを変更します。サンプルやリポジトリから選ぶほか、画像をアップロードしてアイコンとすることもできます。
- 表示設定
- アプリの表示名、アプリを開いたときの最初のスクリーン、タグを設定します。
タグは、アプリを検索するときの手がかりとなるような何らかの分類名を任意に指定します。アプリの名称と紛らわしくないように、「#」などの記号を先頭につけておくと良いでしょう。 - スクリーン設定
- 最初のスクリーンを「(スクリーン一覧)」にしたときには、タイル状にスクリーンの一覧が表示される画面が最初のスクリーンになります。そのスクリーン一覧にどのスクリーンをどういう順序で表示するかを設定します。
- ダウンロード
- アプリの設計情報をダウンロードします。アプリのデータを含めるかどうかを選択できます。
- ファイル管理
- アプリに付随するファイル群を管理します。(後述)
- 権限管理
- アプリの開発と利用の権限を設定します。(後述)
- 外部Module管理
- ファイルとして用意されたモジュールをアプリに組み込みます。スタイルシート(CSSファイル)とスクリプト(Javascriptのライブラリファイル)を組み込むことができます。(後述)
- ログ閲覧
- アプリのログを閲覧します。(後述)
- インポート
- アプリのデータを他のアプリからコピーします。データベースのテーブルごとに選択して行うことができます。(後述)
- KVストア管理
- キーバリューストアという簡易的なデータベースを管理します。(後述)
- WebAPI設定
- WebAPIは、外部のシステムからアプリのサーバー機能を呼び出してデータのやり取りなどをおこなう仕組みです。アプリでWebAPIの利用を許可するかなどの設定を行います。(後述)
- リポジトリ登録
- このアプリをリポジトリに登録します。(後述)
- アプリ削除
- アプリを削除します。削除すると復活はできないので、慎重におこなってください。
16.1.Framework変更
- Framework2の場合、次のダイアログが開き、Frameworkのバージョンを変更できます。

「変更後」のリストから使いたいバージョンを選んで、「OK」をクリックすると変更されます。
「安定版のみを表示」のチェックを外すと、安定版以外の実験的なバージョンもリストに表示されて選択できます。
16.2.Plugin管理
- 次のダイアログが開き、すでにインストールされたプラグインの一覧を確認できます。

-
インストールされたPluginには、現在このアプリにインストールされているプラグインのリストが表示されます。
リストの右端にある「更新」をクリックすると、プラグインを最新の状態に更新します。「削除」をクリックすると、このアプリから削除します。 -
Pluginを追加するのリストから、追加したいプラグインの「追加」をクリックするとインストールされたPluginに追加されます。(左端に[+]と表示されますが、これはリストに追加されただけの状態で、まだアプリに保存されていないことを表しています。)
そして、「保存」をクリックすると実際にアプリに追加されます。 -
多くのプラグインはスクリーンモジュールですが、XMLサポートやCSVサポートなどのようにスクリプトで使えるライブラリを追加するものもあります。
16.3.設計情報のダウンロード
- アプリの設計情報をファイルとしてダウンロードし、それをアップロードして新規にアプリを作成することができます。
オプションとしてアプリのデータを含めることもできます。

- 開発画面のアプリメニューで「ダウンロード」を選ぶと次のダイアログが開きます。

-
データを含めたい場合は「テーブルデータを含める」のチェックを入れます。
-
「ダウンロード」ボタンをクリックするとダウンロードされます。
16.4.ファイル管理
- 開発画面のアプリメニューで「ファイル管理」を選ぶと次のダイアログが開き、アプリで使用するファイルを管理することができます。

-
デフォルトではアイコン形式で表示されますが、「表示スタイル」を詳細表示にすると、ファイル名、更新日時、サイズによる一覧で見ることができます。
「フィルタ」でファイルの種類を選ぶと、その種類のファイルだけが表示されます。 -
次のフォルダはあらかじめ用意されています。
フォルダ名 | 説明 |
---|---|
images | スクリーンやレポートのモジュールで使用する画像を格納 |
import | DBテーブルの作成やデータインポートに使用するCSVファイルを格納 |
javascripts | アプリで利用するJavascriptのライブラリファイルを格納 |
outputs | レポートの出力で作成されるファイルを格納 |
style sheets | スタイルシート(CSS)ファイルを格納 |
templates | XLSXレポートのExcelテンプレートファイルを格納 |
theme | スクリーンテーマファイルを格納 |
users | ユーザー毎にフォルダを用意する場合のためのフォルダ |
-
ファイル管理で操作するこれらのフォルダやファイルは、当該アプリの files というフォルダ内にあります。filesフォルダは、エディタ環境、デバッグ環境、本番環境、のそれぞれに存在します。「表示対象」で、どのfilesの中を閲覧・操作するか選択します。
-
アプリをデバッグ用に生成すると、エディタ環境の files フォルダは、デバッグ環境の files フォルダにコピーされます。デバッグ環境の files フォルダは、 /debug/ アプリ名 /files という URL に相当します。例えば images フォルダ内にある sample.jpg というファイルは、/debug/ アプリ名 /files/images/sample.jpg という URL になります。
-
アプリを本番用にリリースすると、エディタ環境の files フォルダは、本番用アプリの files フォルダにコピーされます。本番用アプリでの URL は、/app/ アプリ名/files/… となります。
-
データベースのファイル型カラムに入れたファイルは、デフォルトではattachmentsというフォルダに入ります。このattachmentsフォルダはデータベースと対応するものなので、デバッグ環境と本番環境にのみ作られ、エディタ環境のfilesにはありません。
-
設計画面でアップロードする各種のファイル以外にも、そのアプリで必要となるファイルがあれば、独自のフォルダを作成するなどしてアップロードすることができます。例えばヘルプを PDF ファイルで用意したら、「help」フォルダを作ってその中に入れておき、その URL を開くボタンをスクリーンに配置する、といった使い方ができます。
-
フォルダアイコンをクリックするとフォルダの中に入ったり、名前が「..」のフォルダアイコンをクリックすると親のフォルダへ戻ることができます。
なお、閲覧・表示できるのはfiles内に限られます。 -
ファイルのアップロードは、フォルダとファイルのアイコンが並んでいる領域へファイルをドラッグアンドドロップするか、「参照」あるいは「ファイル選択」ボタンをクリックしてファイルを選択しておこないます。
-
ファイルのアイコンをクリックするとそのファイルが選択された状態となり、アイコンの右下の「↓」でダウンロードできます。また「削除」「名前変更」ボタンで、選択中のファイルを削除したり名前を変更したりできます。
-
フォルダを削除したり名前変更したい場合は、フォルダを「削除」「名前変更」ボタンへドラッグアンドドロップしてください。
-
「フォルダ作成」で新しいフォルダを作成できます。
16.5.権限管理
- 開発画面のアプリメニューで「権限管理」を選ぶと次のダイアログが開きます。
※ 試用版ではユーザー権限管理は使用できません。
※ 権限を変更した場合、その権限設定をデータベースにも反映させるにはアプリを生成する必要がありますのでご注意ください。

-
アプリケーションの運用・開発に関する権限と、利用に関する権限の設定ができます。アプリケーションの利用権限は、デバッグ版アプリとリリース版アプリに分けて設定します。
-
デフォルトでは開発権限は特に設定されていませんが、これは作者(アプリを作成したユーザー)のみが運用管理・開発を行える状態になります。
「作者のみ」ボタンをクリックするとデフォルトの状態に戻ります。
「全体公開」ボタンをクリックすると、誰でも可能な状態になります。
「サポートを受ける」は、Buddyサポートが使用する.buddysupportという特殊ユーザーに許可した状態となります。
これらのボタンによらず、個別にユーザーやグループを設定することも可能です。 -
権限設定の各列の働きは次のようになります。
説明 | |
---|---|
許可ユーザー | 指定されたユーザーは、その権限を許可される |
拒否ユーザー | 指定されたユーザーは、その権限を拒否される |
許可グループ | 指定されたグループに属するユーザーは、その権限を許可される |
拒否グループ | 指定されたグループに属するユーザーは、その権限を拒否される |
-
許可ユーザーか拒否ユーザーに該当した場合は、それによって(グループに関係なく)権限が決まります。
-
許可ユーザーと拒否ユーザーの両方に該当した場合や、許可グループと拒否グループの両方に該当した場合は、「優先」の指定によって権限が決まります
ログインの分離
- 「ログインの分離」を「する」にすると全体のユーザー管理にしたがったシングルサインオンではなく、このアプリ独自のユーザー管理にもとづいてログインすることになります。

- 「ログインの分離」を「する」にするとその右に「ユーザー管理」ボタンが現れます。このボタンをクリックすると、次のダイアログが開き、アプリ独自のユーザーやグループの管理がおこなえます。

-
ユーザーの追加や編集、グループの追加・編集・削除の方法は、運用管理でのユーザー管理やグループ管理と同様です。
-
「ログインの分離」を「する」にするとその右に「ゲスト」プルダウンリストが現れます。ユーザーを追加した上で、「ゲスト」を「(使用しない)」でなくどれかのユーザーを選択すると、アプリの URL を開いた時にログイン不要となり、そのゲストアカウントのユーザーでログインした扱いとなります。これにより、ログインの不要なオープンなアプリを作成できます。
-
「ログインの分離」を「する」にするとその右に「ユーザー数制限」の入力欄が現れます。ここに整数値を入力すると、その制限の範囲でユーザーの追加が行えるようになります。
また、この制限数を設定し、上記のユーザー管理でグループ「admin」を作成すると、そのグループのメンバーはユーザーマネージャー画面(https://ホスト名/debug/アプリ名/usermanager)でユーザー追加などが行えるようになります。
16.6.外部Module管理
- 開発画面のアプリメニューから「外部Module管理」を選ぶと次のダイアログが開きます。


-
スタイルシートではCSSファイルを、スクリプトではJSファイル(Javascriptのライブラリファイル)をアプリに埋め込むことができます。
-
「追加」ボタンをクリックすると、ファイル管理ダイアログが開きますので、その中のCSSやJSファイル群の中から追加したいファイルを選択します。ファイル管理ダイアログで、ユーザーが用意した ファイルをアップロードすることができます。
-
「削除」ボタンをクリックすると、削除することができます。(そのアプリで使われなくなるだけで、ファイルそのものが削除されるわけではありません。)
-
複数のファイルを組み込む際、その内容によっては順序が重要な場合もありますので、注意してください。
16.7.ログ閲覧
- 開発画面のアプリメニューで「ログ閲覧」を選ぶと次のダイアログが開きます。

- 「デバッグ」「リリース」を選び、「アクセスログ」「エラーログ」「API ログ」「生成ログ」「カスタムログ」を選ぶと、ログファイルの一覧が表示されます。閲覧したいログファイルをクリックすると、内容が表示されます。
16.8.インポート
- 開発画面のアプリメニューから「インポート」を選ぶと次のダイアログが開きます。

- 「インポート」は他のアプリからデータベースやファイルをコピーしたり、そのアプリのデバッグ版とリリース版のデータベース間でデータをコピーしたりできる機能です。
まず、アプリの一覧からコピー元となるアプリをクリックします。
すると次のダイアログが開きます。

-
「インポート元」と「インポート先」では、デバッグ版とリリース版のどちらを対象とするか選択します。
-
「インポート設定」にはコピー先となるDBテーブルの一覧が表示されます。テーブル名の先頭のマーク■はコピー元テーブルが指定されていることを、□はコピー元が指定されていないことを示します。▲はコピー元が指定されているが、名前が異なるなどの相違がある状態を表します。
テーブル名をクリックすると次のダイアログが開きます。

-
「対応するテーブル」はコピー元となるテーブルを選択します。デフォルトではコピー先と同名のテーブルが選択されていますが、変更できます。
「カラム選択」の「インポート元」はコピー元となるカラムを選択します。デフォルトではコピー先と同名のカラムが選択されていますが、変更できます。 -
「ファイルコピー」はfiles内のファイルもコピーするかどうかを指定します。
-
「インポート方式」は、「総入れ替え」か「部分置換・追加」かを選択します。
「総入れ替え」ではインポート先のテーブルのデータは削除され、インポートされたデータに全体が置き換えられます。
「部分置換・追加」ではプライマリキーが同じデータがあれば更新され、なければ追加されます。 -
「エラー処理」は、「エラーを無視して続行」「全体を停止して巻き戻し」から選択します。「全体を停止して巻き戻し」にした場合、エラーがあるとインポート処理全体がなかったことになります。
-
データベースはアプリをデバッグ用に生成したりリリースしたりしてはじめて、設計情報を反映した状態になります。一度もデバッグ用生成やリリースをしていないとデータベース自体が存在しません。インポート先・インポート元を選択するときには注意してください。
-
「インポート」ボタンをクリックするとインポートが実行され、結果が表示されます。
16.9.KVストア管理
- 開発画面のアプリメニューから「KVストア管理」を選ぶと次のダイアログが開きます。

-
「KVストア(キーバリューストア)」は、アプリにあらかじめ用意されている簡易的なデータベースで、キーとなる文字列とバリューとなる文字列の組を保存します。デバッグ版とリリース版があります。
-
「デバッグ」「リリース」は閲覧・操作する対象を選択します。
-
追加するときは、キーとバリューを入力して「追加」ボタンをクリックします。
-
削除する時は「×」ボタンをクリックします。
-
バリューの変更は直接編集することでおこなえます。
16.10.WebAPI設定
- 開発画面のアプリメニューから「WebAPI設定」を選ぶと次のダイアログが開きます。

-
「WebAPI」は、アプリのサーバー機能をHTTPのPOSTによって呼び出して結果を得ることができる機能で、外部システムとBuddyアプリの連携のために用います。
-
「WebAPI許可」は、アプリでWebAPI使用を許可するかどうかを指定します。
-
「トークン有効期限(秒)」は、WebAPIで認証に用いる「トークン」(ログイン時に発行される)の有効期間を秒数で指定します。無指定にすると、無期限に有効となります。
-
WebAPIの使い方については、「プログラミングガイド」をご覧ください。
17.アプリ文書
- 開発画面の左側のメニューから「アプリ文書」を選ぶと次の画面が表示されます。

-
「メモ」「マニュアル」を選んで入力し、「保存」ボタンをクリックすると保存されます。
-
「メモ」は開発者や管理者向けの説明のために使用してください。
-
「マニュアル」は、ユーザー向けのマニュアルとしてアプリ画面から表示されます。
18.スクリーンテーマ編集
- 開発画面の左側のメニューから「スクリーンテーマ編集」を選ぶと次の画面が開きます。

-
スクリーンテーマは、スクリーンの要素にあらかじめ設定されたクラス名や、スクリーンに配置したモジュールの「クラス」や「部分クラス」で指定した名前に適用するスタイルをまとめて指定する機能です。アプリ全体のスタイルを統一するのに利用できます。
-
右上にはスクリーンテーマ全体を操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 読込み
- 「ダウンロード」で保存しておいたスクリーンテーマを読み込む
- ダウンロード
- 現在のスクリーンテーマをファイルとして保存する
- リポジトリ登録
- 現在のスクリーンテーマをリポジトリに登録する
- 埋込CSS編集
- CSSコードを記入してスクリーンテーマに埋め込むことができる(フレームワーク2の機能です。フレームワーク1では使用できません)
- テーマ設定
- クラス属性を優先するかどうかを指定します。ItemLabelなどのItemXXXクラスはモジュールの種類に応じて自動的に割り当てられます。アイテムのクラス属性で指定したクラスとItemXXXの両方を指定した場合、クラス属性の方を優先するかどうかの指定です。デフォルトは「しない」で、ItemXXXのほうが優先されます。
- テーマを選択するをクリックすると、次のダイアログが開いてリポジトリにあるスクリーンテーマを読み込むことができます。

-
詳細をクリックすると説明を見ることができます。名前をクリックするとそのスクリーンテーマが読み込まれます。
-
「現在のテーマで定義されたクラスを編集する」には現在定義されているクラス名の一覧が表示されます。
その下にあるテキストボックスに新たなクラス名を入力し、「クラス定義を追加」ボタンをクリックすると、クラスを追加できます。 -
既存のクラス名をクリックすると次のダイアログが開いてスタイル定義を編集します。

-
「日本語」「英語」は、属性の名称をどちらで表示するか選択します。英語にするとCSSでの名称となります。
-
「全般」「フォント」…は表示する属性を指定した分類に限定します。
-
「追加」ボタンをクリックして開くダイアログで属性を選択すると、現在のスタイル定義にその属性がない場合に追加されます。
-
属性に対する値を入力したら、「OK」をクリックしてください。
この時、値のない属性は除かれます。 -
「クラスを削除」でこのクラスを削除できます。
-
次のクラス名があらかじめ用意されていますが、直接入力で独自のクラス名を追加することもできます。
クラス名 | 説明 |
---|---|
APP_で始まる名前 | アプリ全体のパーツに対するクラス名(後述) |
DATA_LABEL などの大文字の名前 | 登録・編集や検索などのテンプレートで作成したスクリーンで設定されているクラス名 |
Item で始まる名前 | モジュールの種類に応じて内部的に付けられているクラス名 |
-
今のところ、テーマに設定されているクラス名とスクリーンのモジュールで設定されているクラス名が対応しているかのチェックなどはされません。ユーザーの責任で管理する必要があります。
-
アプリ全体のパーツには次のクラス名が付けられています。
クラス名 | 説明 |
---|---|
APP_BODY | アプリのHTMLでのBODY ※デフォルトのカーキ色部分の色はこの背景色で指定可 |
APP_BACKGROUND | 各スクリーンの背景 |
APP_HEDER | ヘッダ全体 |
APP_HEDER_TITLE | ヘッダのアプリアイコンとアプリ名部分 |
APP_HEDER_NAME | ヘッダのアプリ名部分 |
APP_HEDER_MENU_BUTTONS | ヘッダの右側のアイコン部分 |
- 例えばAPP_HEADERの背景色を設定すると、ヘッダの色を変えられます。
18.1.主なスタイル属性
- 主なスタイル属性は次の通りです。詳しくはCSSの仕様を参照ください。(CSSとは、WEBページのレイアウトを指定する規格です。)なお、CSSではハイフンで区切られている名前、例えばfont-sizeは、fontSizeのようにJavascriptで指定する時のやり方で記述しています。
属性 | 説明 |
---|---|
left | 画面上での位置を指定する(自由配置の場合) |
top | 画面上での位置を指定する(自由配置の場合) |
width | 画面上での大きさを指定する |
height | 画面上での大きさを指定する |
padding | 内部の余白を指定する |
margin | 外部の余白を指定する |
border | 枠線を指定する |
color | 文字色を指定する |
fontSize | 文字サイズを指定する |
textAlign | そのモジュール内の横の配置 |
lignHeight | 一行の高さ |
boxSizing | 「width」や「height」が「padding」と「margin」を含むかどうか(border-box=含む、content-box=含まない、無指定はborder-boxと同様) |
backgroundColor | 背景色を指定する |
backgroundImage | 背景を画像とする場合に指定する |
-
「padding」、「margin」 は、CSS での指定と同様に単独の値を指定すると上下左右を一括指定したことになり、半角スペース区切りで複数指定すれば、2 つの場合「上下 左右」3つの場合「上 左右 下」4つの場合「上 右 下 左」の指定となります。
-
「width 」や「 height」 に % 指定をすると、そのモジュールの親のボックスのサイズに対する割合となります。
19.DB テーブル設計
- 「DBテーブル設計」では、アプリのデータベースにデータを格納するための「テーブル」を設計します。データベースはデバッグ用とリリース用があることに注意してください。アプリの生成を行うことで、設計した内容がデバッグ用やリリース用のデータベースに反映します。
19.1.DB テーブル新規作成

-
「白紙のテーブル」「既存のファイルから作成」のいずれかをクリックします。
-
「白紙のテーブル」の場合は空のテーブルの設計画面になります。
-
「既存のファイルから作成」は、先頭行に項目名が書かれている CSV を元に、それをインポートできるようなテーブルを作成する機能です。CSV ファイルの文字コードは、シフトJIS と UTF8 によるものが受け入れ可能です。
19.1.1.既存ファイルから作成
- 「既存ファイルから作成」を選択すると次のダイアログが開きます。

-
「テーブル名」は作成するテーブル名(半角英数字)、「表示名」はその表示名(日本語でOK)を指定します。
-
「ファイル」の「選択」ボタンをクリックすると次のファイル選択ダイアログが開きます。

- ファイル選択ダイアログではfiles/importフォルダ内のファイル一覧が表示され、そこからクリックして選択できます。新規のファイルはドラッグアンドドロップでアップロードできます。

- 使用したいファイルを選択して「選択」ボタンをクリックすると、ファイル選択ダイアログは閉じて、次のようなダイアログが開きます。

-
指定したファイルの先頭部分が表示されますので、それを見ながら、各カラムの名前、型、型の詳細を指定します。
カラムの名前については、ファイルの先頭行からセットされています。日本語の場合はローマ字化してセットされます。変更可能ですので、適宜修正してください。
カラムの型と型の詳細は、最初は「文字列」「フリー」になっていますが、その右の「▼」をクリックして選択できす。 -
「テーブル名」は新しい名前が自動的にセットされていますが、適宜変更してください。テーブル名には半角英数字と「_(アンダースコア)」しか使えません。「表示名」は日本語の名前を使うことができます。
-
「エンコード」は、ファイルの文字コードで「Shift_JIS」と「UTF8」から選びます。ファイルの内容と合致していない時は変更してください。
-
「プライマリキー」はデータを一意に特定する値です。原則としてテーブルにはプライマリキーを指定します。鍵のアイコンをクリックしてオレンジ
になっているカラムがプライマリキーです。複数のカラムをプライマリキーとして、その組み合わせによってデータを一意に特定することも可能です。「ID」という名前の項目があると自動的にプライマリキーにセットされますが、解除することもできます。また、「ID」という名前の項目がない場合は「IDカラムを追加」を「する」にすれば「ID」カラムが追加されてプライマリキーになります。
-
テーブル名と各カラム名と型を指定したら、「作成」をクリックすると、テーブルが作成され、そのテーブルの設計画面になります。指定した内容は設計画面で変更することも可能です。
19.2.DB テーブル設計
- DBテーブル設計は、新規作成後は次のような画面になります。

-
「カラム編集」はテーブルのカラム(データを入れる項目)を追加・編集する領域です。「白紙のテーブル」で新規作成すると「ID」というカラムがセットされた状態で作成されます。
-
「データ確認」はデータベース内でこのテーブルに実際に格納されているデータを表示します。テーブルを新規作成した時には設計情報にテーブルが作られるだけで、まだデータベースには存在しません。そのために上の図のように「データ確認」には表示されません。デバッグ版やリリース版のアプリの生成をおこなうと、データベースに反映して、「データ確認」に表示されるようになります。
-
テーブルのカラムを作成し、アプリ生成の後にデータを入力した時には次のような画面になります。

- 右上にはこのテーブルを操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このテーブルを削除します。
- 履歴
- このアプリのデータベースに対する操作の履歴を表示します。過去の状態に戻すこともできます。(後述)
- 権限設定
- このテーブルに対する閲覧・編集の権限をどのユーザーやグループが持つかを設定します。(後述)
- ルール設定
- このテーブルのデータが常に満たすべきルールを設定します。ルールに反するデータをテーブルに入れようとするとエラーになります。(後述)
- トリガー設定
- 「トリガー」は、このテーブルのデータが、挿入・変更・削除された時にイベントを発生させる仕組みです。スクリーンのスクリプトでイベントにもとづく処理を行うことができます。(後述)
- インデックス設定
- 「インデックス」は、あらかじめデータに索引情報を作っておいて、データ件数が多いときにも高速に読み出せるようにする仕組みです。(後述)
- テーブル設定
- このテーブルの、テーブル名や表示名の変更、バージョン管理や履歴管理の有無の設定がおこなえます。(後述)
- ビュー解析
- 「ビュー」はテーブルのデータを加工・集計したり、複数のテーブルを組み合わせたりする仮想的なテーブルです。ビュー解析ではどのテーブルがどのビューで使われているかの相関関係を見ることができます。(後述)
- テストデータ作成
- アプリをデバッグする時には、テーブルにテスト用のデータを入れたい場合があります。そのためのデータを自動生成することができます。(後述)
-
この画面の「データの確認」以外の部分で何らかの入力・修正をおこなった場合は、必ず「保存」して下さい。
保存せずにブラウザを閉じたりリロードしたり他のアプリの開発画面に移ったりすると、変更内容は失われます。 -
この画面で設計したテーブルの構造等は、アプリをデバッグ用に生成したときや本番用にリリースしたときに、初めて実際のデータベースに反映します。
従って、「データの確認」に表示されるテーブルの構造は、現在設計中のものとは異なる場合があることに注意してください。
19.2.1.カラム編集
- カラム編集領域には次のような表形式でカラムの一覧が表示され、追加・編集・削除がおこなえます。

-
「カラム名」「表示名」…の項目名の部分は区切り線部分にマウスカーソルを置いて
のようにカーソルが⇔になった状態で左右にドラッグすると、各項目の幅を調整することができます。
-
各項目の意味は次の通りです。
- 端の小さな枠
- ピンアイコンがあるとプライマリキーであることを示す
「プライマリキー」は、そのテーブルのレコードを一意に識別するキーとなるもの - カラム名
- カラムの名前(半角英数字と「_ 」でなければならない)
- 表示名
- わかりやすい日本語表示の名前
- 型
- 「数値」「真偽値」「文字列」「日付・時間」「ファイル」から、どの型のデータを格納するかを選択する
- 型の詳細
- それぞれの型に合わせて詳細を選択する(数値の場合は「自動連番」「整数」「小数点」…など)
- 「詳細設定」ボタン
- そのカラムの詳細を設定する(後述)
- 「テンプレートから追加」ボタン
- 「氏名」「住所」など、良くあるカラムについてリストから選択することで、カラム名、表示名、型、型の詳細をまとめてセットすることができます。(後述)
-
カラムを追加するときは「(新規追加)」にカラム名を入力し、その他の項目も入力・選択してください。既存のカラムは各項目を直接編集できます。
-
「型」に「ファイル」を指定した場合、そのカラムにファイルの内容そのもの(バイナリーデータ)を格納するのではなく、アップロードしてサーバー上の所定の場所に保存したファイルのファイル名をカラムの値とすることになります。そのために「データインプット」というモジュールが用意されています。(後述)
-
カラムの「詳細設定」ボタンをクリックすると、次のダイアログが開きます。

- 既定値
- レコードを追加する際に値を指定しなかった場合の値
- 値の範囲
- 値を「開始後」「終了値」「刻み値」で指定した値のどれかに限定する
- 選択肢
- 値をいくつかの選択肢のどれかに限定する
- 必須
- 省略できない項目を指定する
- 読み込み専用
- レコードを追加する際に指定した値を後から変更できないようにする
- 配列
- 複数の値を格納する(「データ確認」で入力するときは、{値,…}と、カンマ区切りで値を並べ、「{」と「}」で囲む) (※後述)
- 複数選択
- 選択肢を指定した場合に、複数選択可を設定する
- メモ
- 覚え書きに使用
- 「削除」ボタン
- このカラムを削除します
-
「既定値」で、日時、日付、時刻型のカラムに対しては、レコード追加をおこなった日時をセットする指定として「CURRENT_TIMESTAMP」「CURRENT_DATE」「CURRENT_TIME」を指定できます。
-
「配列」を「はい」にしたカラムには複数の値を格納できます。ただし、後述する「検索」「単票」「登録・編集」などのスクリーンテンプレートやデータインプットモジュールは、今のところ配列カラムには対応していません。
-
「テンプレートから追加」ボタンをクリックすると次のダイアログが開きます。

- 良くあるカラムが用意されています。ここから選ぶことで、カラム名、表示名、型、型の詳細をまとめてセットすることができます。
19.2.2.履歴
- DBテーブルのメニューから「履歴」を選択すると次のような画面になります。

-
このアプリのデータベースのすべてのテーブルとビューについての操作の履歴でまだデータベースに反映していないものが表示されます。アプリをデバッグ用に生成してデータベースに反映すると、履歴は削除されます。
-
履歴の一覧からクリックして選択し、「選択した状態に戻す」ボタンをクリックすると、過去の状態に戻すことができます。
-
DB テーブル設計での不適切な指定のためにアプリの生成に失敗した時は、原因となった編集操作を取り消してください。その後に正しい指定をしても、失敗の原因となる編集操作が履歴に残ったままだと、やはり生成に失敗します。
19.2.3.権限設定
- DBテーブルのメニューから「権限設定」を選択すると次のような画面になります。

-
「権限管理をする」のチェックを入れると、その下の表で設定した内容にしたがって権限がチェックされるようになります。表で権限の内容を設定していても、「権限管理をする」のチェックを入れない限り権限チェックはされないので注意してください。
-
「デバッグ用編集」「デバッグ用閲覧」ではデバッグ用データベースでのこのテーブルの編集と閲覧の権限を設定します。「編集」「閲覧」では本番用データベースの権限を設定します。「許可ユーザー」「拒否ユーザー」の設定に該当するとそれによって許可・拒否が決まります。そうでない場合「許可グループ」「拒否グループ」の設定で決まります。
許可と拒否の両方に該当した場合は「優先」によってどちらになるかが決まります。 -
デフォルトでは上の図のように「許可グループ」が「all」(全ユーザーが所属するグ
ループ)になっているので、誰でも編集・閲覧ともに可能です。
19.2.4.ルール設定
- DBテーブルのメニューから「ルール設定」を選択すると次のような画面になります。

-
「ルール」はこのテーブルのデータが常に満たすべきもので、ルールに反する状態になるような操作はエラーとなって実行できません。
-
ルールを追加するには「(新規追加)」の部分に名前を入力します。(名前の重複は許されません。)そして「式」の欄をクリックします。
既存ルールを編集・削除するには、そのルールの名前か式をクリックします。
次のルール編集のダイアログが開きます。

- 式はPostgreSQLのSQL式で指定します。「自由記述」ではSQL式を直接入力します。その他の、例えば「(カラム)が指定の値と等しくなければならない」などを選択すると、次の画面になり、対象のカラムの選択と、値の入力を行います。

-
入力したら「OK」ボタンをクリックすると設定されます。
-
「削除」ボタンをクリックするとこのルールが削除されます。
-
なお、すでにデータの入っているテーブルについてルールを追加・変更して、既存データがルールに反する状態になると、そのアプリを生成するときにエラーとなって生成できなくなります。その場合は、「履歴」で問題のルールの追加・変更を取り消すか、あるいはデータ確認でデータを調整してください。
19.2.5.トリガー設定
- DBテーブルのメニューから「トリガー設定」を選択すると次のような画面になります。

-
「トリガー」はこのテーブルにデータを挿入・変更・削除した時にイベントを発生させ、スクリーンのスクリプトでそのイベントにもとづいて何らかの処理を行えるようにするものです。
例えばアプリを同時に開いている他のユーザーがデータを追加した時にそれを検知して画面を更新する、といったことが可能となります。 -
トリガーを追加するには「(新規追加)」に名前を入力します。(名前の重複は許されません。)そして「DB操作」の部分をクリックします。
既存のトリガーを変更・削除するには、名前かDB操作の部分をクリックします。
次のダイアログが開きます。

- DB操作
- 「INSERT(挿入)」、「UPDATE(更新)」、「DELETE(削除)」、「TRUCATE(空にする)」を指定し、「実行前」「実行後」で、内容の変化が実行される前か後かを指定します。
- カラム
- 指定のカラムの内容変化をトリガとしたい場合に、そのカラムを指定します。
- レベル
- 「文単位」…一度のDB操作に対して一度、「行単位」…変化のあった各レコード毎に、を指定します。
- 条件式
- トリガの起動条件を式で指定します。
式の中では「OLD.カラム名」で変更前の値、「NEW.カラム名」で変更後の値が参照できます。
-
例えば、テーブルに新しいレコードが挿入された時にイベントを発生させるなら、「DB操作」を「INSERT」にします。更新時に、カラム「count」の値が変化したらイベントを発生させるなら、「DB操作」を「UPDATE」、「カラム」を「count」にします。更新時にカラム「stock」と「used」の差が10未満の時にイベントを発生させるなら、「DB操作」を「UPDATE」、「式」を「NEW.stock – NEW.used < 10」とします。
-
テーブルトリガによるイベントによってどういう動作をさせるかを設定する方法は、プログラミングガイドの【データベースのトリガイベント】で説明します。
19.2.6.インデックス設定
- DBテーブルのメニューから「インデックス設定」を選択すると次のような画面になります。

-
「インデックス」は、カラムや式の値に索引を作成しておいて検索や並べ替えを速くするものです。
-
インデックスを追加するには「(新規追加)」に名前を入力します。(名前の重複は許されません。)そしてその行をクリックします。
既存のトリガーを変更・削除するには、その行をクリックします。
次のダイアログが開きます。

-
「重複可」は、指定したカラムや式の値に重複が許されるかどうかを指定します。
-
「式」は、「自由記述」であれば「値」に直接PostgreSQLのSQL式を入力します。「カラム選択」であれば対象のカラムを選択します。
-
なお、すでにデータの入っているテーブルについてインデックスを追加・変更して、既存データが設定に反する状態になると、そのアプリを生成するときにエラーとなって生成できなくなります。その場合は、「履歴」で問題のインデックスの追加・変更を取り消すか、あるいはデータ確認でデータを調整してください。
19.2.7.テーブル設定
- DBテーブルのメニューから「テーブル設定」を選択すると次のような画面になります。

- テーブル名
- 作成時に付けた半角英数字の名前
- 表示名
- わかりやすい日本語表示の名前
- バージョン管理
- コード化データの履歴問題(※)に対応するためのバージョン管理をおこなうかどうか
- 履歴管理
- データの変更履歴保存をおこなうかどうか
- メモ
- 覚え書きに使用
- タイプ
- 「FLOW」…追加されていくタイプ、「STOCK」…書き換えていくタイプ (今のところ機能上の違いはありません)
- ※コード化データの履歴問題:コード化されたデータが変更されたとき、単純に変更すると過去のデータも新データで表示されてしまい、別コードとすると集計等の処理で別扱いになってしまう問題。これに対処するためのバージョン管理の仕組みを用意しています。
ただし、アプリでバージョン管理の機能を活用するための機能は今後の提供予定です。
19.2.8.ビュー解析
- DBテーブルのメニューから「ビュー解析」を選択すると次のような画面になります。

-
テーブルやビューの親子関係を字下げの状態で表示します。例えば上の図であれば、「table1」が「view1」で使われていることをしましています。
-
「フィルタ」は、指定した文字列を含む名前のものに絞り込みます。
19.2.9.テストデータ作成
- DBテーブルのメニューから「テストデータ作成」を選択すると次のような画面になります。

-
アプリのテストやデモのためにテーブルに格納するテストデータを自動で作成する機能です。
-
各カラムについて「種類」を選択します。「(空欄)」ではそのカラムは空欄になります。その他の選択肢の場合、必要に応じて次のように詳細指定を行います。

-
「出力件数」は作成するデータの件数を指定します。
-
「出力形式」は「XLSX」か「CSV」を選択します。
-
「作成」ボタンをクリックすると作成され、完了するとダウンロードダイアログが開きますので、「ダウンロード」ボタンをクリックするとダウンロードできます。

19.2.10.データ確認
- 「DBテーブル設計」画面の「データ確認」部分には、このテーブルに現在格納されているデータが表示されます。
「カラム編集」部分で設定・保存した設定内容は、アプリを生成した時にデバッグ版やリリース版のデータベースに反映します。「データ確認」は現在のデータベースの内容を表示するものなので、「カラム編集」部分での設定と「データ確認」に表示される内容が一致しない場合もあることに注意してください。

-
「デバッグ」「リリース」を選択すると、そのデータベースの当該テーブルの内容が表示されます。一度もアプリのデバッグ版生成やリリース版生成をしていない場合は、データベースが存在しないので、データは表示されません。
-
「更新」ボタンをクリックすると最新の内容に表示が更新されます。
その右のテキストボックスに入力して、検索アイコンをクリックすると、入力文字列を含む行に表示位置が移動します。(絞り込み検索ではありません。)
-
左端列は表示上の順序番号です。この部分をクリックするとそのレコードが選択されてピンク色になります。再度クリックすると選択が解除されます。
-
データ内容は直接編集することができます。下端の行に入力して右端の「追加」ボタンをクリックしてレコードを追加できます。
カラム属性を「配列」にしたカラムに入力するときは、「{ 値 , …}」と、カンマ区切りで値を並べて、「{」と「}」で囲みます。 -
サブメニューアイコン
をクリックすると、次のダイアログが開きます。

- インポート
- デバッグ版やリリース版のデータベースの当該テーブルにCSVデータやエクセルデータを投入する(後述)
- エクスポート
- デバッグ版やリリース版のデータベースの当該テーブルの内容をファイルに出力する(後述)
- データ履歴
- 履歴管理しているテーブルでデータ変更の履歴を確認できる(後述)
- バージョン
- バージョン管理しているテーブルでデータのバージョンを閲覧できる(後述)
- 自動連番設定
- 自動連番カラムについて番号を設定する(後述)
- 全選択
- 全レコードを選択状態にする
- 選択反転
- 全レコードの選択状態を反転する
- 選択解除
- 全レコードを非選択状態にする
- CBにコピー
- 選択されているレコードをクリップボードにコピーする。一行に一レコードで、カラム間はタブ区切りとなる
- データ削除
- 選択したレコードを削除する
19.3.データインポート
- DBテーブル設計の「データ確認」のサブメニューから「インポート」を選ぶと次のダイアログが開きます。

-
「インポート対象」は「デバッグ」「リリース」から選択します。
-
「ファイル」の「選択」ボタンをクリックすると次のファイル選択ダイアログが開きます。

- ファイル選択ダイアログではfiles/importフォルダ内のファイル一覧が表示され、そこからクリックして選択できます。新規のファイルはドラッグアンドドロップでアップロードできます。

- 使用したいファイルを選択して「選択」ボタンをクリックすると、ファイル選択ダイアログは閉じて、次のようなダイアログが開きます。

-
選択したファイルの先頭部分が表示されますので、各列の「˅」をクリックして、どのカラムに対応させるかを選択します。
先頭行の内容がカラム名か表示名と一致する場合は、自動的にそれが選択された状態となります。 -
「文字コード」は「Shjift-JIS」と「UTF-8」から選択します。表示された内容が文字化けしている場合は切り替えてみてください。
-
「先頭行」は、ファイルの先頭行の扱いを選択します。
項目 | 説明 |
---|---|
データ行として扱う | CSVが1行目からデータ行である場合に指定する。 |
ヘッダ行として扱う | CSVの1行目が項目を表すヘッダ行である場合に指定する。 カラム名やカラムの表示名と一致していれば自動的にそのカラムと対応づけられる。 |
無視する | CSVの1行目が項目を表すヘッダ行である場合に指定するが、カラムとの対応づけを自動で行わず手動で行う時に指定する。 |
-
「空欄の扱い」は「NULLとして扱う」と「デフォルト値を入れる」から選択します。
-
「インポート方法」は「データを削除して総入れ替え」と「部分置換・追加」から選択します。
-
「エラー処理」は「エラーが起きた行を無視して続行」と「全体を停止」から選択します。
「全体を停止」にした場合、どこかでエラーがあるとインポート全体が無かったことになります。 -
「インポート」ボタンをクリックすると実行されます。
19.4.データエクスポート
- DBテーブル設計の「データ確認」のサブメニューから「エクスポート」を選ぶと次のダイアログが開きます。

-
「出力対象」は「デバッグ」と「リリース」から選択します。
-
「ファイル形式」は「CSV」と「XLSX」(Excel)から選択します。
-
「ヘッダの形式」は、出力ファイルの先頭行をどうするかについて、「カラム名」「表示名」「なし」から選択します。
-
「エクスポート」ボタンをクリックすると、ファイルが作成され、ダウンロードできます。
19.5.データ履歴
- DBテーブル設計の「データ確認」のサブメニューから「データ履歴」を選ぶと次のダイアログが開きます。

-
テーブル属性で「履歴管理」を「はい」にした状態で生成した場合、そのテーブルではいつ誰がどのようなデータの変更(新規登録、編集、削除)をおこなったたかが記録されます。
-
「日時(開始)」「日時(終了)」に「2021/04/05」や「2021/04/05 10:30」のように入力すると日時の範囲を絞って該当する履歴のみを表示することができます。
-
「処理」は「INSERT」が新規登録、「UPDATE」が編集、「DELETE」が削除です。データインポートにともなう場合は、「IMPORT:INSERT」や「IMPORT:UPDATE」などと表示されます。
-
履歴の件数が多い場合、まず100件が表示されます。「さらにデータを取得」で100件ずつデータが読み込まれて表示されます。
19.6.バージョン情報
- DBテーブル設計の「データ確認」のサブメニューから「バージョン」を選ぶと次のダイアログが開きます。

-
テーブル属性で「バージョン管理」を「はい」にした状態で生成した場合、そのテーブルではデータの変更があると直接書き換えられるのではなく別バージョンとしてレコードが保存されます。通常はバージョン番号は内部に隠れていて、閲覧されるのは最新バージョンになります。
-
例えば上の図の状態であれば、ID が8のレコードはyuubinbangouが変更されてバージョン2が、ID が11のレコードはyuubinbangouが変更されてバージョン2が、さらにjuushoが変更されてバージョン3が作られたことがわかります。
-
「レコードID」はデータベース内部でレコードを一意に識別するIDです。「バージョン」はレコードIDに対するバージョン番号です。
-
「絞り込み」はプルダウンリストからカラムを選び、その右のテキストボックスに値を入力すると、それに合致する履歴だけが表示されます。
-
バージョン情報の件数が多い場合、まず100件が表示されます。「さらにデータを取得」ボタンをクリックすると、100件ずつ読み込んで表示します。
19.7.自動連番設定
- DBテーブル設計の「データ確認」のサブメニューから「自動連番設定」を選ぶと次のダイアログが開きます。自動連番になっているカラムについて、現在の値を変更し、次からの連番の番号を調整することができます。

-
「環境」は、対象のデータベースがデバッグかリリースかを選択します。
-
「対象カラム」は、対象のカラムを選択します。
-
「変更後の値」は、設定する値(整数値)を入力します。
-
「保存」ボタンをクリックすると保存されます。
20.DB ビュー設計
-
「DBビュー」は、データベースの他のテーブルやビューを元に、表示のために仮想的なテーブルを作る機能です。テーブルはデータを格納するものですが、ビューはそれを加工して表示するだけで、それ自体でデータを保持している訳ではありません。
-
DBビューには、大まかに、①抽出、②結合、③加工、④集計の機能があります。以下、図で例示して説明します。




20.1.DB ビュー新規作成
- 「DBビュー設計」の「新規作成」をクリックすると次のダイアログが開きます。

- 一覧ビュー
- DBテーブルや他のDBビューを元に、カラムを選ぶ、カラムの順序を指定する、カラムの値から計算した値を得る、条件に合致するレコードに絞り込む、などの加工を施したり、他のDBテーブルやDBビューと結合したりして、得られたレコードの一覧を表示するビューを作成します。
- 集計ビュー
- DBテーブルや他のDBビューを元に、指定したカラムの値によってレコードをグループ化し、グループ毎に指定したカラムの値を集計(合計、カウント、平均など)するビューを作成します。
- リンクビュー
- 他のアプリのDBテーブルを閲覧するビューを作成します。
20.1.1.一覧ビュー
- DBビューの新規作成で「一覧ビュー」を選ぶと次のダイアログが開きます。

-
「ビュー名」は既存のDBテーブルやDBビューと重複しない、半角英数字と「_」による名前を指定します。
-
「表示名」は日本語の名前を付けることができます。
-
「ベース」は、このビューのベースとなるDBテーブルまたはDBビューを選択します。
-
「詳細設定」はカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れています。クリックすると内容が表示されます。
-
「表示」は、このビューで表示したいカラムについて「表示する」にします。
-
「ソート」は、どのカラムの値にもとづいてレコードを並べ替えるかを指定します。「ソートなし」となっているボタンをクリックすると「昇順(1)」や「降順(1)」と変わります。複数のカラムについて指定することもでき、その場合は「昇順(2)」や「降順(2)」のようにカッコで添える数字で優先順位が示されます。
-
「作成」ボタンをクリックすると、作成されて設定画面に切り替わります。
20.1.2.集計ビュー
- DBビューの新規作成で「集計ビュー」を選ぶと次のダイアログが開きます。

-
「ビュー名」は既存のDBテーブルやDBビューと重複しない、半角英数字と「_」による名前を指定します。
-
「表示名」は日本語の名前を付けることができます。
-
「ベース」は、このビューのベースとなるDBテーブルまたはDBビューを選択します。
-
「詳細設定」は、どのカラムでグループ化し、どのカラムを集計するかを指定します。
「グループ項目」でカラムを選択して、グループ化するカラムを指定します。複数のカラムを指定することもできます。
「集計項目」でカラムを選択するとともにその右のプルダウンリストで集計方法(合計、カウント、平均、最大、最小)を指定します。複数のカラムを指定することもできます。 -
「作成」ボタンをクリックすると、作成されて設定画面に切り替わります。
20.1.3.リンクビュー
- DBビューの新規作成で「リンクビュー」を選ぶと次のダイアログが開きます。

-
「ビュー名」は既存のDBテーブルやDBビューと重複しない、半角英数字と「_」による名前を指定します。
-
「表示名」は日本語の名前を付けることができます。
-
「リンク先アプリ」は、リンク先のアプリを選択します。「**リンク先テーブル」は、リンク先のDBテーブルまたはDBビューを選択します。
-
「表示」は、このビューで表示したいカラムについて「表示する」にします。
-
「ソート」は、どのカラムの値にもとづいてレコードを並べ替えるかを指定します。「ソートなし」となっているボタンをクリックすると「昇順(1)」や「降順(1)」と変わります。複数のカラムについて指定することもでき、その場合は「昇順(2)」や「降順(2)」のようにカッコで添える数字で優先順位が示されます。
-
「作成」ボタンをクリックすると、作成されて設定画面に切り替わります。
20.2.一覧ビューの設計
- DBビュー設計で、一覧ビューを新規作成後は次のような画面になります。

-
「カラム編集」はこのビューのカラムを元となるテーブルやビューのカラムから選んで、追加・変更・削除します。カラムの値を加工する式を指定することもできます。カラムの並び順(ソート)も設定できます。(後述)
-
「テーブルリンク編集」は、ベースとなるテーブルやビューに、他のテーブルやビューを結合する指定を行います。(後述)
-
「データ確認」はデータベース内でこのビューの元となるテーブルに実際に格納されているデータにもとづいてビューの結果を表示します。ビューを新規作成した時には設計情報にテーブルが作られるだけで、まだデータベースには存在しませんので、「データ確認」には表示されません。デバッグ版やリリース版のアプリの生成をおこなうと、データベースに反映して、「データ確認」に表示されるようになります。
-
画面右上にはこのビューを操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このテーブルを削除します。
- 履歴
- このアプリのデータベースに対する操作の履歴を表示します。過去の状態に戻すこともできます。DBテーブル設計の補助メニューの「履歴」と同じです。(前述)
- 権限設定
- このビューに対する閲覧の権限をどのユーザーやグループが持つかを設定します。(後述)
- 抽出条件設定
- ビューでは元となったテーブルやビューのレコードすべてではなく、条件に合致したものだけを抽出することができます。その条件を設定します。(後述)
- ビュー設定
- ビュー名、表示名、種類、メモを設定することができます。(後述)
- ビュー解析
- ビュー解析ではどのテーブルがどのビューで使われているかの相関関係を見ることができます。DBテーブルの補助メニューの「ビュー解析」と同じです。(前述)
20.2.1.カラム編集
- DBビュー設計のカラム編集部分は次のような表になっています。

-
「カラム名」は半角英数字と「_」による名前、「表示名」は日本語の名前、「式」は各カラムの値となるPostgreSQLの式、「ソート」はカラムの値にもとづく並べ替えの指定です。
上図の例で式が「table1.ID」となっているのはテーブル「table1」の「ID」カラムを意味しています。式を例えば「table1.price * 0.1」とすることで計算結果を値とすることもできます。 -
カラムの追加は、次のいずれかの方法によります。
「(新規追加)」に手入力し、その他の項目を入力する。
「選んで追加」ボタンをクリックし、ベーステーブル・ビューや結合テーブル・ビューのカラムの一覧から選択する。
「テーブルリンク編集」部分に表示されているテーブル・ビューのカラムを「(新規追加)」へドラッグアンドドロップする。 -
各項目は直接編集することが可能ですが、「詳細設定」ボタンをクリックすると次のダイアログが表示されて、編集できます。

-
「メモ」は覚え書きとして利用してください。
-
式の「編集」ボタンをクリックすると次のダイアログが開いて式を編集できます。
式を直接手入力するほか、「カラム名挿入」「式挿入」から選択して入力することができます。
※ここで入力する式は、JavascriptではなくPostgreSQLの式です。プログラミングガイドを参照してください。

-
「削除」ボタンをクリックするとこのカラムを削除できます。(このビューから削除されるだけで、元のテーブル・ビューから削除されるわけではありません。)
-
「並び順変更」ボタンをクリックすると、次のダイアログが開き、カラムの並び順を変更できます。

- レコードの並び順は各カラムの「ソートなし」となっているボタンをクリックすると、「昇順(1)」「降順(1)」のように指定できます。複数のカラムについて指定することもでき、その場合は「昇順(2)」「降順(2)」のように括弧内の数で優先順位が示されます。
20.2.2.テーブルリンク編集
- DBビュー設計のテーブルリンク編集部分は次のようになっています。

-
赤い枠で表示されているのは、新規作成時に指定したベーステーブル・ビューです。その他の枠はベーステーブル・ビューと結合されるテーブル・ビューです。
それぞれの枠はヘッダ部をドラッグして見やすい位置に調整できます。 -
結合するテーブル・ビューを追加するには次のいずれかの方法に寄ります。
「テーブル追加」ボタンをクリックし、テーブル・ビューの一覧から選択する。
開発画面左側のメニューからテーブル名やビュー名をドラッグアンドドロップする。 -
結合するテーブル・ビューを削除するには、「×」をクリックします。
-
「整列」は、各テーブル・ビューの枠を自動的に整列します。
-
結合するテーブル・ビューはベーステーブル・ビューとカラムを指定して連結する必要があります。上図の例では、table1の「グループID」とtable2の「ID」を連結しています。
連結するには、対象のカラムの一方から他方へドラッグアンドドロップします。線で結ばれて連結したことが示されます。
連結線をクリックすると、次のダイアログが開きます。

-
連結の仕方として「二つのテーブルに共通するデータのみ(JOIN)」と「ベーステーブルのすべてのデータ(LEFT OUTER JOIN)」から選びます。
JOINの場合、相手に同じ値のレコードがない場合はそのレコードはビューの結果に含まれません。
LEFT OUTER JOINの場合、ベーステーブル・ビューは必ず全レコードが結果に含まれます。
LEFT OUTER JOINでは連結線が矢印で表示されます。 -
今のところ、リンクビューは他のビューの要素とすることはできません。
20.2.3.権限設定
- DBビュー設計のメニューで「権限設定」を選ぶと次のダイアログが開きます。

-
「権限管理をする」のチェックを入れると、その下の表で設定した内容にしたがって権限がチェックされるようになります。表で権限の内容を設定していても、「権限管理をする」のチェックを入れない限り権限チェックはされないので注意してください。
-
「デバッグ用閲覧」ではデバッグ版データベースでのこのビューの閲覧の権限を設定します。「閲覧」ではリリース版データベースの権限を設定します。「許可ユーザー」「拒否ユーザー」の設定に該当するとそれによって許可・拒否が決まります。そうでない場合「許可グループ」「拒否グループ」の設定で決まります。
許可と拒否の両方に該当した場合は「優先」によってどちらになるかが決まります。 -
デフォルトでは上の図のように「許可グループ」が「all」(全ユーザーが所属するグ
ループ)になっているので、誰でも閲覧可能です。
20.2.4.ビュー設定
- DBビュー設計のメニューで「ビュー設定」を選ぶと次のダイアログが開きます。

-
「ビュー名」「表示名」は新規作成時に指定したものですが、変更できます。
-
「ビューの種類」は、一覧ビューとして作成したか、集計ビューとして作成したかによって、「一覧」または「集計」となります。このビューの種類は作成後に相互に切り替えることも可能です。
-
「メモ」は、開発上のメモとして使用できます。
-
内容を変更したら、「保存」ボタンをクリックして保存してください。
20.2.5.抽出条件設定
- DBビュー設計のメニューで「抽出条件設定」を選ぶと次のダイアログが開きます。

- 条件はPostgreSQLの式で指定します。直接編集することもできますが、「条件を追加」ボタンをクリックすると、次のダイアログが開きます。

-
カラムを選択し、値を入力し、比較方法とAND・ORを選択して「追加」ボタンをクリックします。
-
条件式を編集したら「保存」ボタンをクリックするのを忘れないようにしてください。
20.3.集計ビューの設計
- DBビュー設計で、集計ビューを新規作成後は次のような画面になります。

-
集計ビューの設計画面は、以下の点以外は一覧ビューと同じです。
-
「カラム編集」の各カラムに「集計タイプ」があり、次の中から選びます。
- グループ項目
- そのカラムの値でグループ化し、元のテーブル・ビューで同じ値のレコードを、ビューの一レコードにまとめます。
- 合計、カウント、最大、最小、平均
- それぞれの方法で、まとめられたレコードのこのカラムの値を集計します。
- 集計と無関係の式
- カラムの値を用いない式、あるいは合計、カウント、最大、最小、平均以外の集計関数を用いた式を指定することができます。
20.4.リンクビューの設計
- DBビュー設計で、リンクビューを新規作成後は次のような画面になります。

-
「リンク情報」には、「リンク先アプリ」と「リンク先DBテーブルまたはDBビュー」が表示され、クリックすると新規作成時のような設定画面でリンク先の選択とカラム選択を変更することができます。
-
「カラム編集」には、カラムの一覧が表示されますが、閲覧のみです。変更したい場合は上記のようにリンク先アプリ名かリンク先テーブル・ビュー名をクリックしてください。
21.スクリーン設計
- Buddyでの「スクリーン」は、アプリの画面を構成するものですが、次の三つの使われ方があります。
-
アプリの各画面として使われる。これが基本的な使われ方です。それぞれURLを持ち、相互に遷移できます。
-
ダイアログの内容として使われる。
-
スクリーンコンテナという仕組みによって他のスクリーンに埋め込んで表示するものとして使われる。
- スクリーンの設定で「タイプ」として「ページ」と「コンテナ」が選べます。ダイアログの内容として使われる場合と、スクリーンコンテナで埋め込まれる場合には、「コンテナ」を選択しておくと、そのスクリーンの位置づけがわかりやすくなります。
21.1.スクリーン新規作成
- 「スクリーン設計」の「新規作成」をクリックすると次のダイアログが開きます。

- テンプレートの一覧から目的のものをクリックすると、それぞれの新規作成用ダイアログが開きます。
- 白紙の画面
- 中身のない画面を作成します。
- 閲覧画面
- DBテーブルやDBビューの内容を一レコードずつ表示する画面を作成します。メインのテーブル・ビューと一対多の関係になる明細テーブル・ビューを指定することもできます。
- 入力画面
- DBテーブルのレコードを追加・編集する画面を作成します。メインのテーブルと一対多の関係になる明細テーブルを指定することもできます。
- 検索画面
- 検索条件を入力して、それに該当するDBテーブルやDBビューの内容を一覧表形式で表示する画面を作成します。
- 一覧画面
- (フレームワーク2の場合のみ)検索条件での絞り込み、データの追加・閲覧・編集(次の閲覧・入力画面をダイアログで使用)、インポート、エクスポートの機能を持った一覧画面を作成します。
- 閲覧・入力画面
- (フレームワーク2の場合のみ)閲覧・入力をおこなう画面を作成します。上記の一覧画面と組み合わせて使います。
- メニュー画面
- いくつかの画面へのメニューとなる画面を作成します。
- 既存の画面をコピー
- 既存のスクリーンをコピーして新規作成します。
-
Buddyで作成するスクリーンには、画面要素を配置する方法として、BOXレイアウトとグリッドレイアウトがあります。BOXレイアウトは、横配置BOX(要素が左から右へ配置されて幅を超えると改行)縦配置BOX(要素が上から下へ配置)自由配置BOX(要素をBOX内の自由な位置に配置)を組み合わせて画面を構成します。グリッドレイアウトは、Excelのようにあらかじめ縦横に区切られた中に要素を配置します。
-
閲覧、入力、検索、クロス集計の各テンプレートでは、今のところ配列カラムを扱えません。
21.1.1.白紙の画面
- スクリーンの新規作成で「白紙の画面」を選ぶと次のダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「作成」ボタンをクリックすると作成されて設計画面に移ります。
21.1.2.閲覧画面
- スクリーンの新規作成で「閲覧画面」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「ベース」は、閲覧するDBテーブル・ビューを選択します。
-
「識別キー」は、DBテーブル・ビューのレコードを一意に識別するカラムで、通常はプライマリキーのカラムとなります。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「詳細設定」は、表示するカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れていますので、クリックして内容を表示してください。
-
「検索画面」と「登録編集画面」は、閲覧画面から検索画面や登録編集画面へのリンクボタンを設ける場合に、リンク先のスクリーン名を入力します。既存のスクリーンであれば選択できます。まだ存在しないが作成予定のスクリーン名を入力しておくこともできます。
-
「カラム設定」は、表示するカラムを設定します。「表示名」はカラムの表示名になっていますが、変更することができます。「表示」はチェックを外せばそのカラムは表示されなくなります。「モジュール」は文字で表示する時は「文字列」、画像のカラムであれば「画像」を選択すると画像として表示されます。
-
「明細テーブル」は、ベースのテーブル・ビューと一対多の関係となる明細テーブルを表示したい場合に「明細テーブル追加」で選択します。
明細テーブルを追加すると、「詳細設定」の中に次のような部分が追加されます。

-
「明細1」は、明細となるテーブル・ビューを選択します。「明細1」と番号付なのは、明細テーブルは複数追加することができるからです。
-
「参照キー」は、ベーステーブル・ビューの識別キーと対応する明細テーブル・ビューのカラムを選択します。例えばベースの識別キーが「ID」で、明細の参照キーが「mainID」であれば、ベースのカラム「ID」の値と明細のカラム「mainID」の値が等しいレコードが対応付けされます。
-
各カラムの「表示名」「表示」「モジュール」は、ベーステーブル・ビューの「カラム設定」と同様です。
-
「集計カラム」は明細の複数のレコードについて集計をおこないたい場合に選択します。例えば集計カラムとして「price」を選び、「集計タイプ」を「合計」にすると、明細のレコードの「price」カラムの値が合計されて表示されるようになります。
集計カラムはその行の右端の「-」ボタンをクリックすると削除できます。 -
「削除」ボタンをクリックすると、その明細テーブル・ビューを削除します。
-
必要な設定を終えたら「作成」ボタンをクリックすると作成されて設計画面に移ります。
21.1.3.入力画面
- スクリーンの新規作成で「入力画面」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「ベース」は、入力するDBテーブルを選択します。
-
「識別キー」は、DBテーブルのレコードを一意に識別するカラムで、通常はプライマリキーのカラムとなります。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「詳細設定」は、表示するカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れていますので、クリックして内容を表示してください。
-
「検索画面」と「閲覧画面」は、入力画面から検索画面や閲覧画面へのリンクボタンを設ける場合に、リンク先のスクリーン名を入力します。既存のスクリーンであれば選択できます。まだ存在しないが作成予定のスクリーン名を入力しておくこともできます。
-
「カラム設定」は、表示するカラムを設定します。「表示名」はカラムの表示名になっていますが、変更することができます。「表示」はチェックを外せばそのカラムは表示されなくなります。「モジュール」はどのスクリーンモジュールで入力・表示するかと指定します。
-
フレームワーク1の場合、選択できるスクリーンモジュールは次のものです。
- テキストボックス
- テキストボックスに文字入力します。
- データインプット
- 対象のカラムの型に応じた入力方法となります。
- 文字列
- 入力せず表示するだけの場合。
- プルダウンリスト
- 選択肢から選んで入力します。
- コンボボックス
- 選択肢から選ぶほか、文字入力もできます。
- フレームワーク2の場合、選択できるスクリーンモジュールは次のものです。
- 文字入力
- テキストボックスに文字入力します。
- TEXTAREA
- 複数行のテキストボックスに文字入力します。
- プルダウン
- 選択肢から選んで入力します。
- チェックBOX
- チェックボックスで入力します。
- ラジオ
- ラジオボタンで入力します。
- 日時入力
- 日時入力のダイアログで入力します。
- リスト
- 選択肢の表から選んで入力します。
- ファイル選択
- ファイルを選択します。
- 文字列
- 入力せず表示するだけの場合。
- 画像
- 画像を表示します。
- 「明細テーブル」は、ベースのテーブル・ビューと一対多の関係となる明細テーブルを表示したい場合に「明細テーブル追加」で選択します。
明細テーブルを追加すると、「詳細設定」の中に次のような部分が追加されます。

-
「明細1」は、明細となるテーブル・ビューを選択します。「明細1」と番号付なのは、明細テーブルは複数追加することができるからです。
-
「参照キー」は、ベーステーブル・ビューの識別キーと対応する明細テーブル・ビューのカラムを選択します。例えばベースの識別キーが「ID」で、明細の参照キーが「mainID」であれば、ベースのカラム「ID」の値と明細のカラム「mainID」の値が等しいレコードが対応付けされます。
-
各カラムの「表示名」「表示」「モジュール」は、ベーステーブル・ビューの「カラム設定」と同様です。
-
「集計カラム」は明細の複数のレコードについて集計をおこないたい場合に選択します。例えば集計カラムとして「price」を選び、「集計タイプ」を「合計」にすると、明細のレコードの「price」カラムの値が合計されて表示されるようになります。
集計カラムはその行の右端の「-」ボタンをクリックすると削除できます。 -
「削除」ボタンをクリックすると、その明細テーブル・ビューを削除します。
-
必要な設定を終えたら「作成」ボタンをクリックすると作成されて設計画面に移ります。
21.1.4.検索画面
- スクリーンの新規作成で「検索画面」を選ぶと次のようなダイアログが開きます。


-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「ベース」は、検索するDBテーブル・ビューを選択します。
-
「識別キー」は、DBテーブル・ビューのレコードを一意に識別するカラムで、通常はプライマリキーのカラムとなります。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「詳細設定」は、表示するカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れていますので、クリックして内容を表示してください。
-
「登録編集画面」と「閲覧画面」は、入力画面から登録編集画面や閲覧画面へのリンクボタンを設ける場合に、リンク先のスクリーン名を入力します。既存のスクリーンであれば選択できます。まだ存在しないが作成予定のスクリーン名を入力しておくこともできます。
-
「レコード画面」は、検索結果の一覧表中の行をクリックした際に開くスクリーン名を入力・選択します。「閲覧画面」と同じものを指定しても構いません。
-
「一覧表示設定」は、検索結果の一覧表に表示するカラムの設定です。「表示名」はカラムの表示名になっていますが、変更することができます。「表示」はチェックを外せばそのカラムは表示されなくなります。「ソート」はどのカラムの値にもとづいて並び順を決めるかを指定します。「画像表示」は、画像型のカラムについてチェックを入れると画像として表示されるようになります。
-
「検索項目設定」は、検索条件としてどのカラムを対象とするかを設定します。「検索」は「(検索しない)」にすると検索対象とせず、それ以外は入力した値とどのように比較して検索条件とするかを指定します。「モジュール」は検索値の入力欄に使用するモジュールを指定します。
- テキストボックス
- テキストボックスに文字入力します。
- データインプット
- 対象のカラムの型に応じた入力方法となります。
- プルダウンリスト
- 選択肢から選んで入力します。
- コンボボックス
- 選択肢から選ぶほか、文字入力もできます。
-
「全体検索」は、全体検索用の一つのテキストボックスに入力された文字列がどれかのカラムの値と部分一致する、という検索方法の対象となるカラムを指定します。
-
必要な設定を終えたら「作成」ボタンをクリックすると作成されて設計画面に移ります。
21.1.5.一覧画面
- フレームワーク2のアプリの場合、スクリーンの新規作成で「一覧画面」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「ベース」は、一覧表示するDBテーブル・ビューを選択します。
-
「識別キー」は、DBテーブル・ビューのレコードを一意に識別するカラムで、通常はプライマリキーのカラムとなります。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「詳細設定」は、表示するカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れていますので、クリックして内容を表示してください。
-
「登録編集画面」は、一覧画面の+ボタンから新規入力画面を開くときにダイアログで使われる画面のスクリーン名を指定します。まだ存在しないが作成予定のスクリーン名を入力しておくこともできます。
-
「閲覧画面」「レコード画面」は、一覧表中の行をクリックした際に開くダイアログで使われる画面のスクリーン名を入力・選択します。
-
「一覧表示設定」は、検索結果の一覧表に表示するカラムの設定です。「表示名」はカラムの表示名になっていますが、変更することができます。「表示」はチェックを外せばそのカラムは表示されなくなります。「ソート」はどのカラムの値にもとづいて並び順を決めるかを指定します。「画像表示」は、画像型のカラムについてチェックを入れると画像として表示されるようになります。
21.1.6.閲覧・入力画面
- フレームワーク2のアプリの場合、スクリーンの新規作成で「閲覧・入力画面」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「ベース」は、閲覧・入力するDBテーブルを選択します。
-
「識別キー」は、DBテーブルのレコードを一意に識別するカラムで、通常はプライマリキーのカラムとなります。
-
「レイアウト」は、「BOXレイアウト」と「グリッドレイアウト」から選択します。
-
「詳細設定」は、表示するカラムについて設定します。「[+]詳細設定」と表示されている時は内容が隠れていますので、クリックして内容を表示してください。
-
「検索画面」と「閲覧画面」は、入力画面から検索画面や閲覧画面へのリンクボタンを設ける場合に、リンク先のスクリーン名を入力します。既存のスクリーンであれば選択できます。まだ存在しないが作成予定のスクリーン名を入力しておくこともできます。
-
「カラム設定」は、表示するカラムを設定します。「表示名」はカラムの表示名になっていますが、変更することができます。「表示」はチェックを外せばそのカラムは表示されなくなります。「モジュール」はどのスクリーンモジュールで入力・表示するかと指定します。選択できるスクリーンモジュールは次のものです。
- 文字入力
- テキストボックスに文字入力します。
- TEXTAREA
- 複数行のテキストボックスに文字入力します。
- プルダウン
- 選択肢から選んで入力します。
- チェックBOX
- チェックボックスで入力します。
- ラジオ
- ラジオボタンで入力します。
- 日時入力
- 日時入力のダイアログで入力します。
- リスト
- 選択肢の表から選んで入力します。
- ファイル選択
- ファイルを選択します。
- 文字列
- 入力せず表示するだけの場合。
- 画像
- 画像を表示します。
- 「明細テーブル」は、ベースのテーブル・ビューと一対多の関係となる明細テーブルを表示したい場合に「明細テーブル追加」で選択します。
明細テーブルを追加すると、「詳細設定」の中に次のような部分が追加されます。
21.1.7.メニュー画面
- スクリーンの新規作成で「メニュー画面」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「表示する画面」は、作成するメニュー画面に表示したいスクリーンを選択します。クリックすると選択されて色が変わります。
-
必要な設定を終えたら「作成」ボタンをクリックすると作成されて設計画面に移ります。
21.1.8.既存の画面をコピー
- スクリーンの新規作成で「既存の画面をコピー」を選ぶと次のようなダイアログが開きます。

-
「スクリーン名」は、半角英数字と「_」で、他のスクリーンと重複しない名前を付けます。
-
「表示名」は、日本語の名前を付けられます。
-
「コピー元アプリ」は、どのアプリのスクリーンをコピーするかを指定します。最初はそのアプリ自身になっていますが、クリックするとアプリを選択することができます。
-
「コピー元スクリーン」は、コピー元となるスクリーンを選択します。
-
必要な設定を終えたら「作成」ボタンをクリックすると作成されて設計画面に移ります。
-
他のアプリからコピーする場合、現在のアプリとはデータベースの構成などが異なることになり、コピーしたスクリーンでのモジュールやスクリプトのデータベースとの連携やその他の機能が動かなくなる場合があります。十分に注意してください。
21.2.スクリーン設計
※フレームワーク1のアプリの場合
※フレームワーク2のアプリの場合

-
スクリーン設計画面には、三つの部分があります。
「レイアウト編集」は、作成されるスクリーンに対応した領域で、ここに画面を構成する要素(モジュール)を配置していきます。
「スクリプト編集」は、このスクリーンの動作を記述するスクリプト(Javascript のプログラム)を編集する領域です。
右側には「モジュール」「アイテム」のタブで切り替える領域があります。「アイテム」の中には「アイテム一覧」「アイテム属性」「イベントハンドラ一覧」の領域があります。 -
各領域はそのヘッダ部分をクリックして内容を開いたり閉じたりできます。例えば「[-] レイアウト編集」と「[-] アイテム一覧」をクリックして閉じると、次のような画面になります。「[+] レイアウト編集」や「[+] アイテム一覧」となっているヘッダをクリックすると開くことができます。
例えばレイアウト編集とアイテム一覧の領域を閉じると次のような画面になります。

- 各領域の高さや幅は、その領域の下端や右端にマウスカーソルを置いてカーソルが⇕や⇔になったところで上下や左右にドラッグすることで調整できます。
例えば次の画面例は「レイアウト編集」領域の下端を上下にドラッグして高さを調整しているところです。

- 右上にはこのスクリーンを操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このスクリーンを削除します。
- 履歴
- 保存の履歴を表示します。指定した履歴の状態に戻すことができます。(後述)
- 全画面表示
- 大きなダイアログでスクリーン全体のイメージを表示します。
- スタイルコピー
- アイテム(画面に配置したモジュール)のスタイルを、他のスクリーンのアイテムからコピーします。(後述)
- 作り直す
- (フレームワーク1のアプリのみ)このスクリーンを作成した時のテンプレートに戻って、テンプレートの設定を調整して再度スクリーンを作成します。(後述)
- 権限設定
- このスクリーンを閲覧する権限を設定します。(後述)
- スクリーン設定
- このスクリーン全体についての設定を行います。(後述)
- グリッド設定
- グリッドレイアウトのスクリーンの場合に、グリッドを追加・削除したり順序を入れ替えたりします。(後述)
- スクリーン設計画面で何かを変更をした場合は、保存するのを忘れないようにしてください。
21.2.1.BOXレイアウトとモジュール配置
- BOXレイアウトは、縦配置BOX、横配置BOX、自由配置BOXを組み合わせてその中にテキストボックスやボタンなどのモジュールを配置していくことで、画面を組み立てます。BOXは入れ子にすることもできます。スクリーン全体は横配置BOXになっています。

- 例えば上の図の状態では、縦配置BOXの中に二つのボタンを、その右の横配置BOXの中に二つのテキストボックスを配置した状態です。スクリーンに配置したモジュールの一つ一つを「アイテム」と呼びます。
BOX | 配置方法 |
---|---|
横配置BOX | 右へ右へと配置されていき、領域の幅に納まらない場合は折り返される |
縦配置BOX | 下へ下へと配置されていく |
自由配置BOX | 自由な位置に配置できる |
- 画面右側の「モジュール」タブでは、スクリーンに配置できるモジュールのアイコンが一覧表示され、「レイアウト編集」領域へドラッグアンドドロップすることで配置できます。(フレームワーク2では、標準モジュールに加えてプラグインとして追加したモジュールが一覧表示されます。)
例えばテキストボックスモジュールをドラッグ中の状態は次のようになります。ドロップされると、横配置BOXや縦配置BOXでは次に要素が置かれる位置に自動的に配置されます。

-
アイテムを別のBOX内へ移動させるには、「レイアウト編集」領域でドラッグアンドドロップして移動します。
-
画面右側のタブを「アイテム」に切り替えると、アイテム一覧や各アイテムの属性を閲覧、調整できます。例えば次の様な画面になります。

-
「アイテム一覧」には、このスクリーンに配置されているアイテムのリストが、入れ子関係がインデントで示されて表示されます。
このリストの要素を上下にドラッグすることで、BOX内でのアイテム同士の順序を変更することができます。アイテムの順序は、横配置BOXでは左から右へ、縦配置BOXでは上から下へ、自由配置BOXでは奥から手前へ、です。 -
紫色で表示されているのは、マウスカーソルが位置しているアイテムです。緑色で表示されているのは、現在選択されているアイテムです。
「レイアウト編集」領域の上部に例えば「349×280」のように表示されているのは、紫色で表示されているアイテムの横×縦のサイズです。
アイテムの選択は、そのアイテムをクリックすることで行います。選択中のアイテムを再度クリックすると選択が解除されます。また、Ctrlキーを押しながら選択することで、複数のアイテムを選択できます。 -
「レイアウト編集」領域の上部には次のアイコンがあります。
(太い枠線)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに太い枠線が付くようにスタイルがセットされます。
(細い枠線)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに細い枠線が付くようにスタイルがセットされます。
(外枠)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに細い枠線が付くようにスタイルがセットされます。ただし、グリッドスクリーンで複数のグリッドやアイテムを選択している時にはそれらを囲むように細い枠線がつきます。
(枠線なし)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムの枠線が取り除かれます。
(枠線の色)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると色選択ダイアログが開き、選択中のアイテムの枠線に選択した色が付くようにスタイルがセットされます。
(背景の色)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると色選択ダイアログが開き、選択中のアイテムの背景に選択した色が付くようにスタイルがセットされます。
(アイテムを前へ移動)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムの位置が一つ前に移動します。
(アイテムを後ろへ移動)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムの位置が一つ後ろに移動します。
(削除)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムを削除できます。
(アイテムを複製)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムが複製されます。BOXを選択中の場合は、BOX内のアイテムも複製されます。複製によって作られたアイテムのアイテム名は「_1」のような枝番が付いたものになります。
(スタイル編集)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムのスタイルを編集するダイアログが開きます。(アイテム属性の「スタイル」の「編集」ボタンをクリックするのと同じです。)
(枠線を表示)
- 各アイテムの占める領域を点線で囲んで示します。アイコンが緑になっているとこの機能がオンです。
(機能編集モード)
- アイテムの機能を編集するモードにします。アイコンが緑になっているとこの機能がオンです。
-
機能編集モードがオフの時は、各アイテムの下端や右端にマウスカーソルを合わせて⇕や⇔になったところで上下左右にドラッグして高さや幅を調整できます。(高さや幅はアイテムの属性で数値で指定することもできます。)
-
機能編集モードがオンの時は、レイアウト編集領域の選択中のアイテムをクリックすると、そのアイテムに何らかの機能を持たせるためのダイアログが開きます。ダイアログの内容はモジュールによって異なります。
21.2.2.BOXの機能(フレームワーク2)
- フレームワーク2の水平配置BOXと垂直配置BOXには、繰り返し機能とアイテムセット機能があります。
繰り返し機能
-
繰り返し機能は、BOX内に配置したアイテムを、指定の回数繰り返して表示する機能です。
-
例えば水平配置BOXの中に、文字列、文字入力、ボタンの各モジュールを一つずつ配置すると次のような状態似なります。

- ここで水平配置BOX「HORIZONTAL1」の「繰返し回数」属性を「3」にすると、次のようになります。

-
「アイテム一覧」を見るとわかるように、配置されているアイテムはあくまでLABEL1、TEXTBOX1、BUTTON1の3つだけです。繰り返し機能はその同じものを繰り返し表示する機能です。
ただし、文字入力などではそれぞれ異なる内容を入力することができ、ボタンもどれがクリックされたか区別することができます。その方法については後述の「繰り返しBOXの操作」をご覧ください。 -
※BOXを選択した状態で
(アイテムを複製)をクリックすると、BOXとその内容がコピーされて新しいアイテムとして配置されます。この場合はアイテムが増えるのが、繰り返し機能とは違います。
-
設計時に「繰返し回数」を指定して固定的に繰り返しを指定することもできますが、アプリ実行時にユーザーが繰返し回数を調整することもできます。
それには、「繰返し調整ボタン」属性を「調整ボタンを使用する」にします。
すると次のようにアプリ実行時の画面で、そのBOX内にマウスカーソルが入ると「+」「-」のボタンが現れて、繰返し回数を増減することが出来るようになります。

- 繰り返し機能に関係する属性として「明細テーブル」があります。
画面に明細テーブルの複数のレコードを表示するのに繰り返し機能を利用することができます。そのときに、「明細テーブル」属性に明細テーブル名をセットしておきます。すると、DataLinkerという仕組みでデータベースから読み出したデータをセットするときに、レコード数に応じて繰返し回数が自動的にセットされるようになります。
このとき、BOX内のアイテムの「データリンク」属性にはその明細テーブルのどのカラムと対応するかをセットしておきます。
アイテムセット
- アイテムセット機能は、BOX内のアイテム群を自動でセットする機能です。
レイアウト編集領域上部の(機能編集モード)
アイコンをクリックして機能編集モードをオンにします。(アイコンが緑色になります。)
機能編集モードでレイアウト部分に配置したBOXをクリックすると、次のダイアログが開きます。(機能編集モードオフの状態でクリックすると選択されるだけです。)

- ボタンをクリックすることで次の3つのアイテムセットができます。
- ボタンメニュー作成
- ボタンが並んだメニューを作成します。指定の名前でボタンを作るほか、スクリーンの一覧から選択してスクリーンの名前のボタンを作ることもできます。
- テーブル入力作成
- データベースの入力・表示用アイテムを配置できます。対象のDBテーブルやDBビューを選び、カラムと使用するモジュールの種類を選択すれば作成されます。
- 中央寄せフレーム作成
- BOXを画面幅いっぱいにするとともに、その中に画面の左右中央に配置されるBOXを作成します。
- 例として、テーブル入力作成では次のようなダイアログでテーブル/ビューとカラムに対応したモジュールを選択します。

- すると、次のようにBOX内に、「ID」「name」「amount」の文字列と、それぞれの表示・入力用アイテムが配置されます。表示・入力用アイテムには対応するカラムを示す「データリンク」属性も自動的にセットされます。

- アイテムセットは何度でもやり直すことができます。
21.2.3.グリッドレイアウトとモジュール配置
- グリッドレイアウトでは、Excelのように縦横にセルの並んだグリッドにモジュールを配置します。各セルには一つモジュールを配置できます。


- 右側のタブ「モジュール」から、モジュールを「レイアウト編集」領域のグリッドのセルにドラッグアンドドロップすることで、セルにモジュールを配置できます。配置されたモジュールを「アイテム」と呼びます。
例えば次の図は、「TEXTBOX1」の下のセルにテキストボックスモジュールをドラッグして、「TEXTBOX2」を配置しようとしているところです。

-
アイテムの別のセルへの移動は、ドラッグアンドドロップで行うことができます。
-
右側のタブを「アイテム」に切り替えると、「アイテム一覧」にアイテムの一覧が表示されます。
-
紫色で表示されているのは、マウスカーソルが位置しているセルやアイテムです。「レイアウト編集」の上部には「100x28」などとその大きさが表示されます。
緑色で表示されているのは選択されているセルやアイテムです。クリックすることで選択と選択解除ができます。また、Ctrlキーを押しながらクリックすることで、複数のセルやアイテムを選択できます。 -
「レイアウト編集」領域の上部には次のアイコンがあります。
(太い枠線)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに太い枠線が付くようにスタイルがセットされます。
(細い枠線)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに細い枠線が付くようにスタイルがセットされます。
(外枠)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムに細い枠線が付くようにスタイルがセットされます。ただし、グリッドスクリーンで複数のグリッドやアイテムを選択している時にはそれらを囲むように細い枠線がつきます。
(枠線なし)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムの枠線が取り除かれます。
(枠線の色)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると色選択ダイアログが開き、選択中のアイテムの枠線に選択した色が付くようにスタイルがセットされます。
(背景の色)
- (フレームワーク2)選択中のアイテムがあるときに表示されます。クリックすると色選択ダイアログが開き、選択中のアイテムの背景に選択した色が付くようにスタイルがセットされます。
(行を追加する)
- 選択中に表示されます。クリックすると選択中のセルの下に一行追加します。
(列を追加する)
- 選択中に表示されます。クリックすると選択中のセルの右に一列追加します。
(行を削除する)
- 選択中に表示されます。クリックすると選択中のセルを含む行を削除します。
(列を削除する)
- 選択中に表示されます。クリックすると選択中のセルを含む列を削除します。
(選択したセルを結合する)
- 複数のセルが選択されている時に表示されます。クリックすると選択されているセルを含む矩形領域を一つのセルに結合します。
(セルの結合を解除する)
- 結合されたセルを選択中に表示されます。クリックすると結合を解除します。
(削除)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムを削除できます。
(スタイル編集)
- 選択中のアイテムがあるときに表示されます。クリックすると選択中のアイテムのスタイルを編集するダイアログが開きます。(アイテム属性の「スタイル」の「編集」ボタンをクリックするのと同じです。)
(枠線を表示)
- セルを区切る線を表示します。アイコンがオレンジになっているとこの機能がオンです。
(機能編集モード)
- アイテムの機能を編集するモードにします。アイコンがオレンジになっているとこの機能がオンです。
-
機能編集モードがオフの時は、選択したセルやアイテムの下端や右端にマウスカーソルを合わせて⇕や⇔になったところで上下左右にドラッグして高さや幅を調整できます。
-
セルの大きさは上述のようにドラッグでも変更できますが、右側のタブを「アイテム」にすると「セルの属性」領域で数値で指定することもできます。

- セル(行)の高さはピクセル数ですが、セル(列)の幅はそのグリッドの中での相対的な大きさを示すものです。例えば、3列のグリッドで、幅が50、100、200だとすると、50:100:200(=1:2:4)の比率になりますので、各列の幅はグリッド全体の幅の1/7、2/7、4/7 になります。
21.2.4.モジュールの概要
-
モジュールには次のものがあります。ここでは簡単に機能を説明し、主な属性を説明します。詳細については「APIリファレンス」を参照ください。
-
フレームワーク2では、標準でどのアプリにも用意されるモジュールは限定されていて、その他のモジュールはプラグインとしてリポジトリからアプリに取り込んで使用します。
レイアウト用
- 横配置BOX
- その内部が横配置になる
- 縦配置BOX
- その内部が縦配置になる
- 自由配置BOX(フレームワーク1のみ)
- その内部が自由配置になる
- 水平区切り線(フレームワーク2では区切り線)
- 水平の区切り線
- 垂直区切り線(フレームワーク1のみ)
- 垂直の区切り線
入力・選択用
- ボタン
- クリックすることで何らかの操作をさせる。
- データインプット(フレームワーク1のみ)
- DBテーブルのカラムを指定して、そのカラムの属性に適した入力をおこなう。
- テキストBOX(フレームワーク1)
- テキストを入力する(単行または複数行)。
- 文字入力(フレームワーク2)
- テキストを入力する(単行)
- TEXTAREA(フレームワーク2)
- テキストを入力する(複数行)
- チェックBOX
- オン/オフを切り替える。
- ラジオボタン
- いくつかの中のひとつだけをオンにする。
(選択グループ名が同じラジオボタンはその中のひとつしかオンにならない) - プルダウンリスト
- 選択肢(リスト)の中から選ぶ。
- コンボBOX
- テキストBOXとプルダウンリストを兼ねたもの。
- トグルスイッチ(フレームワーク1のみ)
- オン/オフを切り替える。
- スライダー
- 左右にスライドすることで最小値から最大値の間を指定する。
- 日付選択
- 日付または日時を選択する。
- 色選択
- 色を選択する。
- DBレコードセレクタ
- DBテーブルのレコードを選択する。
- タブ
- タブ形式のメニューから選択する。(スクリーンコンテナで入れ子にした画面を切り替える時などに使用する)
- メニュー
- メニューから選択する。(BOXレイアウトでは第一階層のメニュー項目が横に表示されるが、グリッドレイアウトではクリックすると第一階層のメニュー項目が縦に開く動作となる)
- ファイル選択
- パソコンの中のファイルを選択し、内容を取得したり、サーバーにアップロードしたりする。
- データインプットモジュールは、DBテーブル設計で設定した「型」と「型の詳細」に応じた方法で、それに合致した入力のみを受け付ける
・真偽値型 ・・・チェックボックス(「表示」で指定した文字列がラベルになる)。
・選択肢を設定・・・プルダウンリストでの入力。
・日時型 ・・・日時選択のダイアログでの入力。
・ファイル型 ・・・テキストボックスとして表示。クリックするとファイル選択ダイアログからファイルのアップロードが可能。
(サーバーに保存されファイル名が値となり、配列属性の場合は複数のファイルがアップロードできファイル名の配列が値となる)。
※データインプットモジュールは、ユーザーの入力を受け付けるためのモジュールで、データベースに値をセットする機能は持たない。データベース操作はスクリプトのデータベース操作機能を使用しておこなうことに注意。
表示用
- 画像
- 画像を表示する。
- 文字列
- 文字列を表示する。
- リスト
- 一行ずつの文字列をリストとして表示する。また表示方法を切り替えると、ラジオボタンやチェックボックスの並びとして表示することもできます。
- 箇条書き(フレームワーク1のみ)
- 先頭にマークがついたリスト。
- テーブル
- 文字列を表形式で表示する。
- DBテーブル(フレームワーク1のみ)
- DBテーブル・ビューの内容を一覧表の形で表示する。
- スピン(フレームワーク1のみ)
- 動作中であることを回転で示す。
- プログレスバー(フレームワーク1のみ)
- 進行状況を表示する。
- カレンダー
- カレンダーを表示する。
- タイムテーブル
- タイムテーブル(ガントチャート的なもの)を表示する。
- クロス集計
- DBテーブル・ビューに対してクロス集計をおこなう。
- 地図
- 地図を表示する。
- グラフ
- グラフを表示する。
- キャンバス
- HTML5のCANVAS要素を埋め込む。(スクリプトによって図形の描画が可能)
埋め込み・連携
- スクリーンコンテナ
- 他のスクリーンを埋め込む。繰り返すこともできる。
- IFrame
- 他のWEBページを埋め込む。
21.2.5.プラグインの利用(フレームワーク2)
-
フレームワーク2では、アプリを新規作成した際の標準の状態では含まれていないモジュールなどを、プラグインとして組み込んで利用することができます。
-
フレームワーク2のアプリでは、スクリーン設計の「モジュール」領域は次の図のようになっています。

-
モジュールの一覧には、標準で用意されているものと、追加したプラグインモジュールとが表示されます。(上の図は標準モジュールのみの状態です。)
-
プラグイン管理をクリックすると、次のダイアログが開きます。

-
インストールされたPlugin には、このアプリにすでに追加されたプラグインの一覧が表示されます。
一覧の「更新」をクリックすると、より新しいバージョンがある場合に取り込まれて更新されます。「削除」をクリックすると、アプリから除かれます。 -
Pluginを追加する には、プラグインの一覧が表示されます。「Buddy公式リポジトリ」とあるのは、Buddy公式のリポジトリ(倉庫)サーバーにそのプラグインがあることを意味しています。(今のところBuddy公式以外のリポジトリはありません。)
一覧のプラグイン名をクリックすると、別タブでそのプラグインの内容を説明する画面が開きます。「追加」をクリックすると、このアプリに追加されます。 -
プラグインの追加や削除をおこなったら、「保存」ボタンをクリックしてダイアログを閉じてください。保存しないとアプリに反映しないので注意してください。
プラグインの一覧
- プラグインには、スクリーンモジュール、スクリプトで利用するbuddy.libに機能を追加するもの、その他があります。
※スクリーンモジュールのプラグイン
- Canvas
- Canvasを表示するモジュール。スクリプトで図形、文字、画像を表示することができる。
- iframe
- HTML文書や他のサイトをその中に表示する、iframeを表示するモジュール。
- PDF閲覧
- PDFを表示するモジュール。また、PDFから内容の文字列を取得したり、PDFを画像化したりする機能もbuddy.lib.PDF()で得られるオブジェクトを通じて提供されます。
- QRコード
- 指定した文字列のQRコードを表示するモジュール。また、QRコードを読み取るライブラリ機能も提供。
- カレンダー
- カレンダーを表示するモジュール。スクリプトでクリックされた日付を得たり、日付欄に文字を表示したりできる。
- クロス集計
- クロス集計設定モジュールとクロス集計表モジュール。クロス集計設定では列ラベル、行ラベル、集計値をドラッグアンドドロップで設定できる。
設定した内容は専用のクロス集計表モジュールで表示できる他、グラフプラグインを使ってグラフ化することも可能。 - グラフ
- グラフを表示するモジュール。折れ線、棒、円などのグラフを表示できる。
- コメント
- コメントを表示・入力するモジュール。データのIDなどごとに分けてコメントを管理できる。
- コンボBOX
- キーボード入力と選択肢からの選択を併用できる、コンボボックスのモジュール。
- スタンプ
- 承認欄のようなスタンプを表示・入力するモジュール。「承認」「保留」のようなスタンプの種類は自由に指定できる。また、スタンプを押すことができるアカウントを設定できる。
- スライダー
- マウスでドラッグして値を調整できるスライダーのモジュール。
- タブ
- 横並びの選択ボタンから一つを選ぶタブのモジュール。
- ダイアログ入力
- 表示上はテキストボックスだが、クリックするとダイアログが開いて入力するモジュール。テキスト入力とリストからの選択が可能。
- ファイルプレビュー
- ファイルを選択した際に内容を表示するモジュール。対象は、画像ファイル(jpg、pngなど)、テキストファイル(txt、csvなど)。
- ファイルリスト
- ファイルの一覧を表示するモジュール。スクリプトでアプリのfiles領域内の指定のディレクトリ内のファイル一覧を得てセットすることで表示する。
- リンク
- 文字列をリンクとして表示するモジュール。
- 動作ボタンセット
- クリックしたときの動作があらかじめ組み込まれたボタンモジュール。画面移動、レポート出力、データインポート、データエクスポート、通知の5種類がある。よくある動作をスクリプトを書かずに実現できる。
- 区切り線
- 区切り線を表示するモジュール。
- 地図
- 地図を表示するモジュール。緯度、経度、倍率を指定できる。スクリプトでクリックされた位置の緯度・経度を得たり、指定の位置にマーカーを表示したりできる。
- 多段選択
- 複数のプルダウンリストで、上位の選択によって下位の選択肢が変化するモジュール。
- 履歴操作ダイアログ
- 履歴管理を「完全」と設定したDBテーブルについて、履歴を表示するモジュール。操作したアカウント、操作内容、日時がわかるほか、削除や更新について処理前の状態を復元することも可能。
- 手書入力
- 手書きで文字や図形を入力できるモジュール。入力内容は画像として保存できる。
- 既読
- その画面を開いたアカウントと日時が記録され、その一覧を表示できるモジュール。
- 画像付リスト
- 各選択肢に画像も表示されるリストモジュール。
- 色選択
- 色を選択するモジュール。クリックで色選択ダイアログが開き、選択した色が表示される。
※buddy.libに機能を追加するもの
- CSVサポート
- CSVを読み取る機能が、buddy.lib.CSV.parse() として追加されます。
- OCRサポート
- OCR(Optical Character Recognition/光学的文字認識)とは、印刷されたドキュメントを写真やスキャンで取り込んで文字を認識する技術です。画像を解析して画像の中にある文字列を抽出する機能が、buddy.lib.OCR.recognize()として追加されます。
- XMLサポート
- XMLを読み取る機能が、buddy.lib.XML.parse() として追加されます。
- docxサポート
- Microsoft Wordのdocxファイルから、ファイル内の文字列を読み取る機能が、buddy.lib.MSDOC()として追加されます。
- markdownサポート
- markdown形式のテキストをHTMLに変換する機能が、buddy.lib.Markdown.parse() として追加されます。また、buddy.lib.Markdown.styles で表示に必要なCSSも提供されます。
※その他のプラグイン
- レイアウト画面テンプレートセット
- スクリーンを新規作成するときのテンプレートを追加します。今のところ次の二つがあります。
画面切り替えメニュー … 左側に画面名のメニューがあり、選択したものが右側のスクリーンコンテナ内に表示されるスクリーン。
中央寄せ画面 … ブラウザの幅が指定の幅を超えると内容が中央寄せで表示されるスクリーン。 - 拡張フィルタ
- フィルタ(文字列や文字入力モジュールなどで指定して表示文字列を加工するもの)を追加します。
21.2.6.アイテム属性
- 「アイテム」タブの「アイテム属性」では、スクリーンに配置したモジュールをクリックして選択すると、そのアイテムの属性が表示され、調節できます。次の画面例はボタンモジュールの場合です。

-
「日本語」は、各属性の名称を日本語で表記していることを示しています。「英語」に切り替えると英語表記となります。
-
どのような属性があるかはモジュールによって異なりますが、多くのモジュールに共通する属性には次のものがあります。
- アイテム名
- アイテムの名称で、半角英数字と「_」で記述します。スクリーン内で重複しないようにしなければなりません。
- アイテムの種類
- どのモジュールかを示します。変更できません。
- アイテムのクラス
- スクリーンテーマによるスタイル指定をおこなう場合に指定します。手入力することも、既存のものから選択することもできます。「編集」ボタンをクリックすると、指定したクラス名に対応するスタイルを編集することができます。
- 部分クラス
- 複合的なモジュールの場合に、部分ごとにクラス名を指定したい場合に利用します。利用できる場合は「編集」ボタンが表示されるので、クリックすると編集できます。
- スタイル
- このアイテムに対して個別的にスタイルを指定したい場合に利用します。「編集」ボタンをクリックすると編集することができます。
- 表示
- ボタン、テキストボックスなど、何らかの文字列を表示するモジュールで、その表示する文字列を指定します。
- 選択肢
(フレームワーク2ではリスト) - プルダウンリスト、箇条書きなど、選択肢をともなうものでは選択肢属性があります。「編集」ボタンをクリックすると編集できます。(後述)
- 使用不可
- 「はい」にすると、使用できない状態になります。例えばボタンであればクリックしてもイベントが発生しなくなります。
- 読み取り専用
- 入力用のモジュールの場合に、「はい」にすると入力ができなくなります。例えばテキストボックスであれば表示専用となります。
- 改行
- 「はい」にすると、横配置BOX内に配置したとき、そのアイテムの右で改行して次のアイテムは次の行に表示されるようになります。
- 数式
(フレームワーク2では自動計算) - テキストボックスやデータインプットで、他のアイテムの値にもとづいて計算した結果を表示したいときに利用します。「編集」ボタンをクリックすると編集できます。(後述)
- テーブル名
カラム名
(フレームワーク2ではデータリンク) - DBテーブル・ビューの名前とそのカラム名を指定します。スクリーンのスクリプトで、この指定にもとづいてアイテムの値とデータベースの値をやり取りします。アイテム属性でテーブル名・カラム名を指定しただけではダメで、スクリプトの記述が必要であることに注意してください。(後述)
21.2.7.モジュールの主なアイテム属性
- 各モジュールの主なアイテム属性は次の通りです。詳細については「リファレンスマニュアル」を参照ください。
入力・選択用
- データインプット
- テーブル名、カラム名…対象のテーブル・カラムを指定。
サムネイル表示…画像型のカラムの場合に「はい」にすると画像のサムネイル表示。
ダイアログ使用…
複数行…「はい」にすると複数行入力可。
プレースホルダ・・・入力欄が空の場合に表示される説明文を指定する。あらかじめ入力内容をセットするには「表示」属性で指定する。 - テキストBOX
(フレームワーク2では文字入力) - プレースホルダ・・・入力欄が空の場合に表示される説明文を指定する。あらかじめ入力内容をセットするには「表示」属性で指定する。
- チェックBOX
- 表示・・・チェックBOXの横に表示される文字列
- ラジオボタン
- 表示 ・・・ラジオボタンの横に表示される文字列。
選択グループ名・・・ラジオボタンをグループ化する名前(この名前が同じラジオボタンはその中のひとつしかオンにならない)。 - プルダウンリスト
- 選択肢(フレームワーク2ではリスト) ・・・「編集」をクリックすると設定用ダイアログが開く
選択肢の自動読込(フレームワーク2) ・・・「はい」にすると、「データリンク」でセットしたカラムから選択肢を読み込みます。 - コンボBOX
- 選択肢(フレームワーク2ではリスト)・・・「編集」をクリックすると設定用ダイアログが開く
- スライダー
- 最小値 ・・・最小値
最大値 ・・・最大値
ステップ ・・・刻み値 - 日付選択
- 範囲先頭日 ・・・選択範囲の先頭日
範囲末尾日 ・・・選択範囲の末尾日
時刻使用 ・・・「時分秒」または「時分」で時刻も選択
時選択肢 ・・・時の選択肢をカンマ区切りで
分選択肢 ・・・分の選択肢をカンマ区切りで - タブ
- タブ ・・・タブの項目を指定する。クリックすると項目編集用ダイアログが開く
- メニュー
- メニュー・・・メニューの項目を指定する。クリックすると項目編集用ダイアログが開く
- ファイル選択
- ファイルタイプ・・・選択できるファイルの種類
※ファイルタイプを画像にすると、スマホなどではファイル選択時にカメラを起動して撮影した画像を使うことができる
- データインプットモジュールは、DBテーブル設計で設定した「型」と「型の詳細」に応じた方法で、それに合致した入力のみを受け付ける
・真偽値型 ・・・チェックボックス(「表示」で指定した文字列がラベルになる)。
・選択肢を設定・・・プルダウンリストでの入力。
・日時型 ・・・日時選択のダイアログでの入力。
・ファイル型 ・・・テキストボックスとして表示。クリックするとファイル選択ダイアログからファイルのアップロードが可能。
(サーバーに保存されファイル名が値となり、配列属性の場合は複数のファイルがアップロードできファイル名の配列が値となる)。
※データインプットモジュールは、ユーザーの入力を受け付けるためのモジュールで、データベースに値をセットする機能は持たない。データベース操作はスクリプトのデータベース操作機能を使用しておこなうことに注意。
表示用
- 画像
- ソース ・・・表示する画像ファイルを指定する
画像の伸縮 ・・・「伸縮なし」では画像ファイルのもとのサイズのままで画像モジュールの大きさを左上隅にあわせて表示する。「横幅にあわせる」では画像の横幅をモジュールの横幅にあわせるように伸縮。「高さにあわせる」では画像の高さをモジュールの高さに合わせるように伸縮。「両方にあわせる」では横幅と高さの両方をあわせるように伸縮。「縦横比保持で納める」では画像ファイルのもとの縦横比を保持してモジュールの大きさに納まるように伸縮。 - 文字列
- リンク表示 ・・・(フレームワーク1のみ)「はい」にするとURLなどと扱ってリンク表示する(クリックすると開く)。(フレームワーク2では、プラグインとしてリンクモジュールが用意されている。)
フィルタ・・・適用するフィルタ名をカンマ区切りで指定。(リンク表示と両方指定した場合、フィルタは表示する文字列に適用され、リンク先のURLなどはフィルタ適用前のものとなる。) - リスト
- 複数選択・・・「はい」にすると複数の項目が選択できる。
リストの種類・・・リスト、ラジオボタン/チェックボックス(縦並び、横並び)を選択。複数選択だとチェックボックスになる。
選択肢(フレームワーク2ではリスト) ・・・「編集」ボタンをクリックすると設定用ダイアログが開く。 - 箇条書き
(フレームワーク1のみ) - 選択肢 ・・・「編集」ボタンをクリックすると設定用ダイアログが開く。
- カレンダー
- 年、月・・・カレンダーの年月。省略すると当月のカレンダーが表示される
- タイムテーブル
- 開始時・・・左端時刻を時の数値で指定。
終了時・・・右端時刻を時の数値で指定。
開始日・・・表示の開始日。
日数・・・何日分表示するか。 - 地図
- 緯度 ・・・地図の中心の緯度。
経度 ・・・地図の中心の経度。
ズーム・・・地図の倍率。
埋め込み・連携
- スクリーンコンテナ
- スクリーン名 ・・・その中に表示するスクリーンを指定する。
- IFrame
- ソース ・・・その中に表示するWEBページのURL。
21.2.8.クラスとスタイル
クラス
- 「アイテム」タブの「アイテム属性」で「アイテムのクラス」には、そのアイテムに設定されているクラス名がボタンとして表示されます(設定がないと「(設定なし)」と表示されます)。このボタンをクリックすると次のようなダイアログが開きます。

- 一覧表部分には、スクリーンテーマで設定されているクラスについて、クラス名、サンプル、「編集」ボタン、「追加」ボタンが表示されます。
クラス名をクリックすると、下の「クラス指定」にセットされます。
「追加」ボタンをクリックすると、「クラス指定」に追加セットされます。これにより、アイテムのクラスを複数指定することができます。
「クラス指定」にクラス名を入れたら、「OK」ボタンをクリックすることで、アイテムに適用されます。
「編集」ボタンをクリックすると、次のダイアログが開いてそのクラスのスタイル定義内容を編集できます。(このダイアログはスクリーンテーマでの編集画面と同じものですので、使い方はスクリーンテーマの項をご覧ください。)

スタイル
- 「アイテム属性」で「スタイル」の「編集」ボタンをクリックすると、次のダイアログが開き、そのアイテム固有のスタイルを編集できます。

-
「対象」は、どのアイテムを対象にスタイルを編集するかを指定します。「(グループ一括)」は、複数のアイテムを選択している時にそのすべてのアイテムを対象とすることを意味します。
-
「表示」は、スタイル属性の名称を日本語で表記するか英語(CSSの名称に従う)で表記するかを指定します。
-
「全般」「フォント」「枠線」「背景・余白」はタブ切替になっており、「全般」では設定されているすべてのスタイル属性が表示されますが、それ以外のタブではよく使われるそれぞれの分類のスタイル属性に絞って表示されます。
-
「追加」は、一覧表にないスタイル属性を追加したい場合にクリックすると、次のダイアログが開いて追加するスタイル属性を選択できます。

-
必要なスタイル属性を追加したり、値を入力したりしたら、「保存」ボタンをクリックすると保存されます。値が空のスタイル属性は除かれます。
-
「スタイルをクリア」はすべてのスタイル属性を空にします。
-
「スタイルをクラス定義に変換」ボタンをクリックすると、アイテムの名前によるクラス名でのクラス定義に変換します。調整したスタイルを複数のアイテムに適用したいときに利用してください。
21.2.9.選択肢(フレームワーク1)
- 「アイテム属性」の「選択肢」属性の「編集」ボタンをクリックすると、選択肢を設定するダイアログが開きます。
手動入力とDB取得の二つのモードがありますが、デフォルトは手動入力です。

-
「名前」の「選択肢を追加」に入力して追加します。「値」には名前と同じものが自動的に入りますが、変更することができます。「名前」は選択肢として表示される名前で、「値」はそれを選択したときの値になります。
行の右端にある「-」ボタンをクリックすると削除できます。 -
入力が終わったら「保存」ボタンをクリックすると保存されます。
-
「絞込アイテム」は、他のアイテムの値にもとづいて選択肢を絞り込みたい場合に使用します。
絞込アイテムを選択すると、「クラス」という欄が現れるので、絞り込みアイテムで指定したアイテムの値に応じた指定をします。
例えばプルダウンリスト「SELECT2」で、「SELECT1」で選択されている値(「哺乳類」か「爬虫類」)によって選択肢を変えたい場合、次の図の例のようにします。すると、SELECT1 で「哺乳類」が選ばれている時は SELECT2 の選択肢は「犬」「猫」となり、「爬虫類」が選ばれている時は「蛇」「トカゲ」となります。

- 「DB取得へ切り替え」ボタンをクリックすると、次のようなダイアログが開き、手動入力でなく、DBテーブル・ビューの内容から選択肢を作るように指定します。

-
「DBテーブル/ビュー」は選択肢の元となるデータが入ったDBテーブル・ビューを指定します。
-
「名前カラム」と「値カラム」はそれぞれ名前と値となるカラムを指定します。
-
「最大件数」は指定したDBテーブル・ビューから最大何件取り出して選択肢とするかを指定します。
-
「キャッシュ」はチェックを入れると、DBテーブル・ビューから取り出したデータを記憶しておいて使うことで何度も表示される時に高速化します。
-
「空白の選択肢」はチェックを入れると、選択肢の先頭に空白の選択肢を挿入します。例えば検索条件をプルダウンリストで指定する時に「指定しない」こともできるようにしたい場合に利用します。
-
「絞込アイテム」を指定すると「絞り込みカラム」の設定項目が現れますので、手動入力での「クラス」に相当する内容が入っているカラムを指定します。
21.2.10.リスト(フレームワーク2)
- 「アイテム属性」の「リスト」属性の「編集」ボタンをクリックすると、選択肢を設定するダイアログが開きます。

-
「名前」に入力して追加します。「値」には名前と同じものが自動的に入りますが、変更することができます。「名前」は選択肢として表示される名前で、「値」はそれを選択したときの値になります。
行の右端にある「削除」ボタンをクリックすると削除できます。 -
「OK」ボタンをクリックすると保存されます。
-
フレームワーク2では、選択肢をデータベースから読み込むには、「データリンク」属性をセットし、「選択肢の自動読込」属性を「はい」にします。
「データリンク」でセットしたカラムに選択肢があればそれが使用され、外部参照になっていればその参照先から読み込まれます。
21.2.11.数式(フレームワーク1)
- 「アイテム属性」の「数式」属性の「編集」ボタンをクリックすると、そのアイテムの値を計算する数式を設定するダイアログが開きます。

- 「タイプ」が「使用しない」の場合は数式の設定を行いません。

- 「タイプ」が「スクリプト」の場合は、スクリーンのスクリプトで数式を記述します。「式のテンプレートを挿入する」ボタンをクリックすると、スクリプト中に数式記述の枠組みが挿入されます。

- 「タイプ」が上記以外の「合計」などの場合は、対象のアイテムを指定してその値の合計などの計算結果が、このアイテムの値となります。
「ソース」は対象のアイテムを指定します。「変換」は対象アイテムの値を数値や整数に変換してから計算する場合に指定します。「削除」ボタンをクリックするとその行を削除できます。
「エラー処理」は、数式の計算でエラーになった場合にどのように表示するかを指定します。
21.2.12.自動計算(フレームワーク2)
- 「アイテム属性」の「自動計算」属性の「設定なし」あるいは「(設定あり)」ボタンをクリックすると、そのアイテムの値を計算する数式を設定するダイアログが開きます。

-
計算のタイプは、どういう計算をするかを選択します。そして、その計算の対象を種類と値で指定します。上の画面例では、TEXTBOX1の入力値とTEXTBOX1_1の入力値を乗算することを指定しています。
-
計算のタイプの「スクリプト」はスクリーンのスクリプトで計算式を指定することを表します。(後述の「自動計算の数式」)
-
OKをクリックすると設定されます。
-
詳細設定をクリックすると次のダイアログが開きます。

-
エラー処理は、計算がエラーとなった場合の表示の仕方を指定します。
-
端数処理は、小数点以下の端数をどう処理するかを指定します。なお、小数点以下第二位で四捨五入といった処理をしたい場合はスクリプトで記述してください。
-
繰り返し処理は、繰り返しされているBOX内にあるアイテムで自動計算する場合に、どう処理するかを指定します。「すべての合計をとる」は、繰り返し内のすべての合計をとって、繰り返しの外のアイテムにセットする場合に使います。「同じインデックスの値」では繰り返しの各行(インデックスが異なる)ごとに計算して、その結果をその行のアイテムにセットする場合に使います。
例えば、次のようなスクリーン(unit,amount,priceの入ったBOXが繰り返される)では、アイテムpriceの自動計算にアイテムunitとアイテムamountの乗算を指定しますが、この計算は繰り返しの各行毎におこなうので、「同じインデックスの値」を指定します。
アイテムtotalの自動計算にはアイテムpriceの合計を指定しますが、繰り返しの全体の合計をしたいので、「すべての合計をとる」を指定します。

21.2.13.履歴
- スクリーン設計画面の補助メニューから「履歴」を選ぶと、次のようなダイアログが開きます。

-
このスクリーンのこれまでの保存履歴が一覧表示されます。
-
一覧の中の履歴をクリックすると、次のようなダイアログが開きます。

- 「復元する」ボタンをクリックすると、指定した履歴の状態にスクリーンが復元されます。このとき、現在編集中の状態は破棄されることに注意してください。
21.2.14.スタイルコピー
- スクリーン設計画面の補助メニューから「スタイルコピー」を選ぶと、次のようなダイアログが開きます。

-
「スクリーン」ではコピー元となるスクリーンを選択します。
-
「コピー先」はこのスクリーンにあるアイテムの一覧です。
-
「コピー元」はスタイルのコピー元となるアイテムを「スクリーン」で指定したスクリーンのアイテムから選択します。コピー先と同名のアイテムがある場合はそれが自動的に選択された状態となりますが、変更できます。
「コピー元をクリア」ボタンをクリックするとすべてのコピー元を一括で非選択の状態にすることができます。 -
「コピー実行」ボタンをクリックすると、スタイルのコピーが実行されます。
21.2.15.作り直す(フレームワーク1)
- スクリーン設計画面の補助メニューから「作り直す」を選ぶと、作成時に選んだテンプレートに応じた設定ダイアログが開きます。
例えば閲覧テンプレートで作成した場面の場合であれば、次のようなダイアログが開きます。

-
内容は、このスクリーンを作成したときに設定したのと同じものがセットされています。
ただしスクリーン名は「screen1 remake」などと別の名前になります。これは、このスクリーンを上書きして作り直すのではなく、新規に作成する機能であるためです。 -
設定内容を適宜変更したら、「作成」ボタンをクリックすると、指定したスクリーン名で新規に作成されます。
-
閲覧、入力、検索などのテンプレートにもとづいて作成したスクリーンについて、画面に含めるカラムを変更するなどしたい場合に、この「作り直す」機能を使えば全く一から作り直すのではなく、変更したい部分だけを変えて作り直すことができます。
21.2.16.権限設定
- スクリーン設計画面の補助メニューから「権限設定」を選ぶと、次のダイアログが開きます。

- 「許可ユーザー」「拒否ユーザー」の設定に該当するとそれによって許可・拒否が決まります。
そうでない場合は「許可グループ」「拒否グループ」の設定で決まります。
許可と拒否の両方に該当した場合は「優先」によってどちらになるかが決まります。
21.2.17.スクリーン設定
- スクリーン設計画面の補助メニューから「スクリーン設定」を選ぶと、次のダイアログが開きます。

属性 | 説明 |
---|---|
スクリーン名 | 新規作成時に指定したスクリーン名 |
表示名 | 自由に名前をつけることができる |
タイプ | 「ページ」と「コンテナ」から選択する ※ページ ・・・独立した画面として表示されるもの ※コンテナ・・・スクリーンコンテナモジュール(後述)の中に配置することで他のスクリーンの中に入れ子にして表示するためのもの。あるいはダイアログとして表示するためのもの。コンテナタイプのスクリーンは、アプリの最初のスクリーンをスクリーン一覧にした場合に一覧には表示されない。 |
スクリーンのクラス | クラス名を指定する (※この設定はまだ機能しません) |
編集領域の幅 | 編集領域の画面幅(ピクセル)を指定する。レイアウト編集の表示はこの幅に合わせたものになる |
編集領域の高さ | <BOXレイアウトの場合>編集領域の画面高さ(ピクセル)を指定する |
表示領域幅上限 | <グリッドレイアウト>グリッドの表示領域の幅(ピクセル)の上限(画面幅がこれより大きくなると、両側に余白が取られる) |
モバイル対応幅 | アプリ実行時の画面幅がこれより小さくなると次のようになる <BOXレイアウト>「モバイル用画面」が指定されていればそのスクリーンが代わりに表示される <グリッドレイアウト>「モバイル用画面」が指定されていればそのスクリーンが代わりに表示される。「モバイル用画面が指定されていない場合、各グリッドの幅指定はすべて100%とみなされて縦に並ぶようになる。また、「モバイル対応」が「する」のグリッドでは行のセルが横でなく縦に並ぶようになる |
モバイル用画面 | アプリ実行時の画面幅が「モバイル対応幅」未満の場合、代わりに表示するスクリーン名を指定する |
メモ | 開発上で記録しておくためのメモ |
- グリッド画面のグリッドの表示領域の幅は、画面幅に応じて伸び縮みします。ただし「表示領域幅上限」よりは広くならず、画面幅がそれより大きいと両側に余白が取られます。
21.2.18.グリッド設定
-
グリッドレイアウトは最初は一つのグリッドで構成されますが、グリッドを必要なだけ追加して複数のグリッドで構成することができます。
各グリッドの幅や順序を調整したり、画面幅の狭いモバイル時には別の順序で表示したりでき、柔軟な画面構成が可能となります。 -
スクリーン設計画面の補助メニューから「グリッド設定」を選ぶと、次のようなダイアログが開きます。

-
左上部分にはグリッド配置のイメージ図が表示されます。ドラッグアンドドロップで順序を入れ替えることができます。
右上部分にはグリッド名の一覧が表示されます。
図の中のグリッドや一覧のグリッド名をクリックすると選択することができます。 -
「名前」は選択中のグリッドの名前です。
-
「横幅」は選択中のグリッドの画面全体に対する%での横幅を指定します。
各グリッドは順に左から右へ配置され、全体の幅を超えると改行されます。 -
「グリッドを追加」ボタンをクリックすると、指定した行数と列数のグリッドが追加されます。
例えば2行2列のグリッド1、2、3を、それぞれ幅100%、40%、60%とすると次のように配置されることになります。

-
「グリッドを削除」ボタンをクリックすると、選択中のグリッドを削除できます。
-
「モバイル設定」ボタンをクリックすると、次のダイアログが開き、画面幅が「スクリーン設定」の「モバイル対応幅」より狭いモバイル時の表示の設定ができます。

-
「順番」は、モバイル時のグリッドの表示順序です。ドラッグアンドドロップで順番を変更できます。
-
「モバイル調整」は「する」にすると、モバイル時に、通常は横に並ぶ行内の各セルが縦に並ぶようになります。
-
アプリ実行時の画面幅が「モバイル対応幅」より小さいと上記の配置が変わり、各グリッドの幅がすべて100%とみなされて縦に並ぶようになります。このとき、上記の「モバイル設定」での「順番」の順で並びます。

- また、グリッドの「モバイル調整」を「する」にした場合、アプリ実行時の画面幅が「モバイル対応幅」より小さいと、通常は横に並ぶ各行のセルが縦に並ぶようになります。

21.2.19.ファイル型カラムでのデータインプット(フレームワーク1)
-
ファイル型カラムに対応したデータインプットモジュールをスクリーンに配置すると、ファイルをアップロードしてサーバーに保存することができます。アプリで使用される各種のファイルを納めるための大元のディレクトリとしてあらかじめ用意されている「files」というディレクトリがあり、その中にカラムの「ルートディレクトリ」属性で指定した名前のディレクトリが作られて、その中にアップロードされたファイルが保存されます。(【ファイル管理】参照)
-
ファイル型カラムに対応したデータインプットモジュールは、見かけはテキストボックスですが、クリックすると次のようなファイル選択ダイアログが開きます。

-
上の画面例では、対応するカラムの「ルートディレクトリ」に「attachments」が指定されています。それにより、現在のディレクトリとして「files/attachments」と表示されています。その下の領域にファイルをドラッグアンドドロップすることでファイルをアップロードできます。上の例では「test.txt」「test2.txt」の二つのファイルがアップロードされています。
-
ファイルのアイコンの「×」で削除、「↓」でダウンロードができます。右上のメニューの「名前変更」でファイル名の変更、「フォルダ作成」でサブディレクトリの作成ができます。
-
「ファイルの種類」は、対応するカラムの型の詳細が「フリー」であれば「すべて」、「PDF」などの種類が指定されていればそれになります。「PDF」の場合であれば、拡張子が「.pdf」のファイルだけが表示されます。
-
アップロードされているファイルのアイコンをクリックすると、そのファイル名がダイアログ下部のテキストボックスに入ります。「選択」ボタンをクリックすると、それがデータインプットモジュールの値としてセットされます。
-
対応するカラムに配列属性がセットされている場合は、複数のファイルを選択できます。
複数のファイルが選択できる場合、各ファイルのアイコンにチェックボックスが表示され、選択されているファイルにチェックが入ります。
21.3.スクリプト
21.3.1.スクリプト編集とイベントハンドラ一覧
- スクリーン設計画面には、次の画面例のように、左下に「スクリプト編集」領域、右下に「イベントハンドラ一覧」領域があります。

-
「スクリプト編集」領域は、スクリプトを編集します。
フレームワーク1とフレームワーク2ではスクリプトの書き方が大きく異なります。(後述) -
「スクリプト編集」領域の上部には次のものがあります。
- 「コード挿入」ボタン
- よくあるプログラムコードを、ダイアログで選択することで入力することができます。(後述)
- 「名前挿入」ボタン
- スクリプト中で記述が必要となる、DBテーブル・ビュー名やカラム名、スクリーン名、レポート名、サーバー機能名について、ダイアログで選択することで入力することができます。(後述)
- 検索テキストボックスと
- テキストボックスに入力して
をクリックすると、スクリプトから入力文字列を検索できます。
(詳細検索)
- 詳細検索モードにして、正規表現による検索や置換などを行えるようにします。再度クリックすると詳細検索モードを解除します。(後述)
(スクリプト編集設定)
- スクリプト編集領域のテーマ(色合い)とフォントサイズについての設定をおこないます。
- 詳細検索モードでは、キーワード検索の部分が次のようになります。

- 「単語」「大小文字区別」「正規表現」のそれぞれのチェックボックスは、検索の方法を指定します。「検索」「置換」両方に入力して、「逐次置換」または「一括置換」をクリックすると、検索で見つかった部分を置換します。
フレームワーク1でのスクリプト
フレームワーク1では、空のスクリーンでは次のスクリプトがあらかじめセットされています。
module.exports = function(api){
var actions = {
};
var events = {
onLoad: function(){
},
onUnload: function(){
},
};
var formulas = {
};
return {
"actions": actions,
"events": events,
"formulas": formulas,
};
};
- 「actions」には、このスクリーンで使用できる関数を記述します。例えば次のようにfooを記述すると、このスクリプトの中で this.foo() として呼び出すことができます。
var actions = {
foo: function(){
…
},
- 「events」には、イベントハンドラを記述します。「イベントハンドラ」とは、例えばボタンがクリックされたときや、スクリーンが表示されたとき、のようなイベントによって実行される関数のことです。
あらかじめ用意されている onLoad イベントハンドラはスクリーンが表示されたときに、onUnload イベントハンドラはスクリーンを離れるときに、実行されます。
次のように BUTTON1_onClick を記述すると、「BUTTON1」という名前のアイテムがクリックされたときに実行されます。
var events = {
BUTTON1_onClick: function(){
…
},
-
「イベントハンドラ一覧」領域には、選択中のアイテムとスクリーンのイベントハンドラの一覧が表示されます。一覧中のイベントハンドラ名をクリックすると、スクリプト中の該当行がハイライトされます。
-
「formulas」には、アイテムの値を計算する式を記述します。(後述)
フレームワーク2でのスクリプト
- フレームワーク2では、空のスクリーンでは次のスクリプトがあらかじめセットされています。
buddyscreen.on("load", async(evt)=>{
//初期化処理
})
buddyscreen.on("unload", async(evt)=>{
})
buddyscreen.on("receive", async(evt)=>{
})
-
buddyscreen.on("…", …)と書かれているのはスクリーンが表示されたとき(load)、別のスクリーンに切り替わるとき(unload)、パラメータやsendで送られたデータを受け取ったとき(receive)の各イベントハンドラです。詳しくはプログラミングガイドをご覧ください。
-
各アイテムのイベントハンドラは、例えばBUTTON1というアイテム名のボタンをクリックした場合であれば、次のように書きます。
buddyscreen.items.BUTTON1.on('click', async(evt)=>{
// イベント発生時に実行する処理を記述する
})
- 自由に関数を定義して、普通にそれを呼び出すことができます。例えば、次のようにできます。上記のフレームワーク1の場合のようにactionsの中で定義したりthis.foo()と呼び出したりということはありません。
function foo() {
…
}
buddyscreen.on("load", async(evt)=>{
foo();
})
- Buddyが用意している様々な機能は、あらかじめ用意されているbuddyというオブジェクトと、buddyscreenというオブジェクトを通じて利用できます。詳しくはAPIリファレンスのフレームワーク2編をご覧ください。また、多くの機能が後述のコード挿入で利用可能です。
例えば次のようにしてログインユーザーの情報を得ることができます。
//ログインユーザー(自分自身)の情報を得る
const userInfo = await buddy.api.getUserInfo();
// userInfo.user_id //ユーザーID
// userInfo.name //表示名
// userInfo.guset //ゲストアカウントかどうか(true/false)
- 上記の例でわかるように、フレームワーク2では非同期処理をasyncとawaitを使って記述するようになりました。詳しくはプログラミングガイドの非同期処理の項をご覧ください。
21.3.2.繰り返しBOXの操作(フレームワーク2)
-
フレームワーク2でのBOXの繰り返し機能はスクリプトでは次のように操作します。
-
繰返し回数をスクリプトで変更するには、例えば次のようにrepeatをセットします。
buddyscreen.items.HORIZONTAL1.repeat = 3;
- 値を入力するアイテムが繰り返されているBOX内にある場合、繰り返しの何番目のものかを指定して値を取得・設定するには、次のようにします。何番目かを示す番号は0から始まることに注意してください。
※単に buddyscreen.items.TEXTBOX1.value = "foo"; のようにすると、繰り返されているすべてのTEXTBOX1に同じ値がセットされるので、注意してください。
value = buddyscreen.items.TEXTBOX1[0].value;
buddyscreen.items.TEXTBOX1[1].value = "foo";
- 繰り返されているBOX内のアイテムのイベントハンドラは、次のように書きます。(BUTTON1[0].on(…)のようには書けないことに注意してください。)
buddyscreen.items.BUTTON1.on('click', async(evt)=>{
// evt.index で繰り返しの何番目かがわかる
…
});
- 例えば繰り返されているBOXの中にTEXTBOX1とTEXTBOX2があって、TEXTBOX1の値を10倍したものをTEXTBOX2にセットしたいとすると、次のようにします。
buddyscreen.items.TEXTBOX1.on('change', async(evt)=>{
buddyscreen.items.TEXTBOX2[evt.index].value = evt.value * 10;
}
21.3.3.コード挿入と名前挿入
- 「コード挿入」ボタンをクリックすると次のダイアログが開き、各種の操作をおこなうプログラムコードをカーソル位置に挿入できます。(フレームワーク1とフレームワーク2では、内容が少し異なります。)





-
「選択中のアイテム」タブは、選択中のアイテムについての、イベントハンドラの挿入、および関数呼び出しの挿入ができます。
-
「一般」タブは、一般的なよく使われるコードを挿入できます。
-
「DB」タブは、DBテーブル・ビューを操作するコードを挿入できます。
-
「フィルタ」タブは、フィルタを適用するコードを挿入できます。フィルタについては【フィルタ】を参照してください。
-
「チェック」タブは、ある値が満たすべきパターン、例えばひらがなでなければならない時にそのチェックをおこなうコードを挿入できます。
-
例えば「メッセージを表示」をクリックすると、次のように挿入されます。挿入されたコードは選択された状態で、青く表示されます。もし誤って挿入した場合は、キーボードの「Delete」を押せば削除できます。
※フレームワーク1
※フレームワーク2
- 「名前挿入」ボタンをクリックすると次のようなダイアログが開き、DB テーブル、DB ビュー、それらのカラム名、スクリーン名、レポート名、サーバー機能名をカーソル位置に挿入できます。

21.3.4.formulasと数式(フレームワーク1)
- アイテム属性の「数式」で、タイプが「スクリプト」の場合、「式のテンプレートを挿入」ボタンをクリックすると、スクリプトの formulasの中に数式を記述するための枠組みが挿入されます。

- タイプが「スクリプト」の場合、formulasの中に記述した関数は、そのスクリーンが表示される際に、スクリーンを構成する各モジュールの値が更新される毎に連鎖的に呼び出されます。(その関数の中で他のモジュールの値を参照している可能性があるため。)従って、formulasの中の関数では他のモジュールの値を参照するのはOKですが、モジュールの値を更新するような操作をすると無限ループに陥る危険があります。また、new Date()で現在の日時を返すなど、呼び出すたびに違う結果を返すような関数もやはり無限ループになりますので、注意してください。
21.3.5.自動計算と数式(フレームワーク2)
- アイテム属性の「自動計算」で、計算のタイプが「自動計算しない」または「スクリプト」の場合、スクリプトで次の例のように、アイテムのcalculateメソッドを定義することで自動計算ができます。

- 関数では他のアイテムの値を参照するのはOKですが、アイテムの値を更新するような操作をすると無限ループに陥る危険があります。また、new Date()で現在の日時を返すなど、呼び出すたびに違う結果を返すような関数もやはり無限ループになりますので、注意してください。(実際には無限に続くことはないようになっていますが、アプリの動作が極端に重くなることが考えられます。)
22.レポート設計
- レポートは、閲覧、印刷、加工などの目的でデータをPDFやExcel形式で出力する機能です。
22.1.レポート新規作成

-
「PDFレポート」「Excelレポート」から選択します。
-
Buddyで出力するPDFは、文字セットとして「UniJIS-UCS2-EXT-HW-H」と「UniJIS-UCS2-HW-H」が選べます。「UniJIS-UCS2-EXT-HW-H」は、例えば上が「土」の「吉」などの拡張漢字を使えるようにしたものですが、Chrome 内蔵のPDFビューアーでは正しく表示できません。内蔵のPDFビューアーを無効にするには、Chrome の右上にある、点が三つ縦に並んだアイコンをクリックして設定画面を開きます。画面下部の「詳細設定」をクリックして詳細設定を開きます。その中の「サイトの設定」をクリックします。下のほうにある「PDFドキュメント」をクリックし、「PDF ファイルを Chrome で自動的に開く代わりにダウンロードする」をオンにします。そして Adobe Reader または AdobeAcrobat をインストールして下さい。
22.2.レポート新規作成 ~ PDF
- レポート新規作成で「PDFレポート」を選ぶと次のダイアログが開きます。

-
「レポート名」は半角英数字と「_」での名前です。「表示名」は日本語で名前を付けることができます。「出力ファイル名」は、レポート名に「.pdf」が付いたものになりますが、変更することもできます。
-
「用紙サイズ」は出力するPDFの用紙サイズです。デフォルトでは横210mm×縦297mm(A4縦)ですが、「編集」ボタンをクリックすると次のダイアログが開いて変更できます。

-
「横幅」「高さ」を数値入力することもできますが、上のリストから用紙サイズを選択し、「縦方向」「横方向」を選ぶと、そのサイズがセットされます。
-
まだ内容のない白紙のPDFレポートを作成して、一から内容を設計していく場合は、上記の名称類と用紙サイズを入力したら「作成」をクリックします。レポートが作成されてその設計画面に移ります。
-
「分割設定」は、例えば宛名ラベルなど、一枚の用紙に複数のページを配置する場合に設定します。「[+] 分割設定」となっているヘッダ部分をクリックすると次のように開きます。

-
「分割数」は横と縦にそれぞれいくつ配置するかを指定します。「間隔」はページ同士の間隔です。「余白」は用紙の周囲に取る余白です。用紙サイズと、分割数、間隔、余白によって、一つのページのサイズが決まります。
-
「データソース設定」は、DBテーブル・ビューとそのカラムを指定して、その表示領域を自動的に配置したレポートを作成することができます。作成後に調整することもできます。
「[+] データソース設定」となっているヘッダ部分をクリックすると次のように開きます。

-
「テーブル/ビュー」は対象のDBテーブル・ビューを選択します。「カラム選択」に対象のテーブル・ビューのカラムリストが表示されます。緑色になっているものは選択されているものです。クリックすることで選択・解除を切り替えられます。
「タイプ」は「単票」「リスト」から選択します。単票は一ページに一レコードを出力します。リストは表形式で一ページに複数のレコードを出力します。 -
必要な入力をして「作成」ボタンをクリックすると作成され、レポート設計画面に移ります。
22.3.PDFレポート設計

- 右上にはこのレポートを操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このレポートを削除します。
- レポート設定
- このレポートについての設定を行います。(後述)
- テスト出力
- 実際に出力したPDFを表示できます。データベースのデータから指定した件数が出力に使われます。(後述)
レイアウト編集
-
「レイアウト編集」領域にモジュールを配置してPDFを設計します。
モジュールは右側の「モジュール」領域からドラッグアンドドロップすることで配置できます。
配置されたモジュールを「アイテム」と呼びます。 -
レイアウト領域のアイテムをクリックすると選択され、緑色で表示されます。
-
「レイアウト編集」領域の上部には次のものがあります。
(削除)
- 選択中のアイテムを削除します。
(ガイドを表示)
- アイテムの位置や大きさを、ガイドの格子に沿った位置に限定します。アイコンが青色だとこの機能がオンです。ガイド格子のサイズを選択して変更できます。この機能がオフだと自由な位置とサイズに配置できます。
- レイアウト編集領域の表示倍率を変更します。倍率を低くするとページ全体など広い範囲を表示でき、倍率を高くすると細かな位置調整などがやりやすくなります。
-
選択中のアイテムは、ドラッグによって位置を調整したり、右端部や下端部にマウスカーソルを置いて⇔や⇕になった状態でドラッグすることで大きさを調整できます。
この時、ガイド表示がオンだとガイド格子に沿う位置や大きさとなります。 -
右側の「アイテムリスト」には配置されているすべてのアイテムのリストが表示されます。
アイテムリストでクリックしてアイテムを選択することもできます。 -
選択中のアイテムは、右側の「アイテムリスト」でも背景色が変わって表示されます。
また、選択中のアイテムの属性が、右側の「アイテム属性」領域に表示され、調整できます。 -
Ctrlキーを押しながらクリックすることで、複数のアイテムを選択することができます。
これによって、まとめて位置や大きさの調整をしたり、アイテム属性をまとめて設定することができます。
モジュール
- モジュールは次の機能を持っています。
モジュール | 説明 |
---|---|
文字列 | 文字列を表示 |
データ | 指定したデータソース(DBテーブルやDBビュー)の指定のカラムの値を表示 |
真偽値 | 指定した条件式の値が真か偽かによって表示を切り替える |
画像 | 画像を表示(JPEGまたはPNG) |
式 | Javascriptの式の値を表示し、式の中でカラムの値を参照できる |
領域 | 領域を入れ子にする |
-
今のところPDFのレポートに表示できる画像はJPEGとPNGのみです。また、インターレースPNGは表示できません。
-
領域には、次の領域タイプがあります。
タイプ | 説明 |
---|---|
自由配置 | 領域内の自由な位置にモジュールを配置できる |
横配置 | 右へ右へとモジュールが配置される |
縦配置 | 下へ下へとモジュールが配置される |
テーブル | 項目名などを示すためのヘッダ行と繰り返されるデータ行からなり、行内は横配置 |
-
領域タイプは、領域を配置したあとの最初におこなってください。内部にモジュールを配置したあとで領域タイプを変更すると、不正常な状態となる場合があります。(例外として、横配置と縦配置の相互の変更はモジュール配置後でも OK です。)
-
今のところ、内部に別の領域を入れ子にできるのは、自由配置領域のみです。
-
領域はデータソースのレコード毎に繰り返して表示することができます。このためには、領域オプションの「データソース」を指定します。データソースの「選択」ボタンをクリックすると次のダイアログが開きます。

データソースにはDBテーブル・ビュー、CSVファイル、JSDATA(Javascriptのデータ)を指定することができます。ダイアログ上部の「データベース」「CSV」「JSDATA」で切り替えます。
- 「データベース」の場合は、「テーブル名」でテーブルまたはビューを選択します。「抽出条件」欄は後述する入れ子の領域で使用します。

- 「CSV」の場合は「CSVファイル」の「選択」ボタンで、アップロードしたCSVファイルを選択します。CSVファイルは先頭行が半角英数字の項目名になっている必要があります。

-
「JSDATA」の場合は、スクリーンのスクリプトでレポート出力を行う際にJSON形式でデータを与えます。「データテーブル名」は、そのデータ中のどのテーブル部分を使うかを指定します。
-
「データソース」を指定した領域の中では、データモジュールを配置したり、式モジュールの中でカラムの値を参照できます。データモジュールの場合は、アイテムオプションの「コンテンツ」にカラム名を指定します。式モジュールの場合、「コンテンツ」に指定した Javascript の式の中で「this.data. カラム名」とすることでカラムの値を参照できます。
データソースがCSVの場合は先頭行の項目名がカラム名の扱いになります。 -
「データソース」を指定した領域を入れ子にすると、例えば外側の領域では納品テーブル(nouhin)の各レコードについて繰り返し、内側の領域ではそれぞれの納品データに対応した納品明細テーブル(nouhinmeisai)のレコードについて繰り返す、というようなことができます。これをおこなうには、内側の領域のデータソースで、「テーブル・ビュー」に「nouhinmeisai」を、「条件」に「'nouhinid = ' + this.data.ID」のようにします。これは、nouhin テーブルの「ID」カラムと、nouhinmeisai テーブルの「nouhinid」カラムが、それぞれ納品データ番号を表しているので、外側の nouhin テーブルのレコードの「ID」の値と等しい「nouhinid」を持つ nouhinmeisai テーブルのレコードを内側で繰り返す、ということになります。
「条件」に設定する内容は、結果がPostgreSQLでの条件式を表す文字列となるようなJavascriptの式です。 -
データソースを指定して繰り返す領域は、指定したデータソースのレコード数が多い場合は、領域オプションの「1 頁あたりの繰返回数」の指定があればその件数毎に区切られて、次のページに表示されます。「1 頁あたりの繰返回数」の指定がない場合は、領域の大きさに納まる範囲で区切ります。
-
テーブルタイプの領域に配置できるのは、文字列モジュールとデータモジュールのみです。モジュールをドロップすると、それに対応した項目名表示のための文字列モジュールが自動的に配置されます。テーブルの一行目が項目名表示となり、二行目以降はデータソース指定に従ってレコード毎に繰り返されます。
アイテム属性
- アイテムには次の属性があります。
属性 | 説明 |
---|---|
アイテム名 | 半角英数と「_ 」による名前 |
アイテムの種類 | モジュールのタイプ |
左位置 | アイテムの領域左端からの位置 |
上位置 | アイテムの領域上端からの位置 |
横幅 | アイテムの幅 |
高さ | アイテムの高さ |
重なり順 | 領域内でのアイテムの重なりの前後関係を決める数値を指定(数値が大きいほど手前に表示、省略すると0) |
内容 | 表示する内容(データの場合はカラム名、式の場合は式、画像の場合は画像ファイルパス名 |
フィルタ | 適用するフィルタ名をカンマ区切りで指定 |
文字揃え | 表示する文字列の配置を選択。省略すると両端寄せ(末尾行は左寄せ、それ以外は両端寄せ) |
フォント | フォントを選択 |
フォントサイズ | フォントのサイズ(ポイント)フォント |
文字色 | 文字色 |
余白 | 周囲の余白 |
枠線表示 | 枠表示指定(上下左右の表示したいものにチェック) |
枠線の種類 | 実線または破線1~4(破線は1が細かく、2、3、4と粗くなる) |
枠線の太さ | 枠線幅 |
枠線の色 | 枠線色 |
枠線の高さ | 「内容にあわせる」「アイテムにあわせる」から選択(デフォルトは内容に合わせる) |
画像表示 | データモジュールでカラムが画像の場合に画像として表示するか |
画像伸縮 | 画像の場合に、widthとheightに画像をどうあわせるかを指定 |
テストのみ使用 | 「はい」にすると、設計画面のテスト出力では表示されるが、アプリでの出力では表示されない |
-
枠線関係の「表示」「種類」「太さ」「色」は全て指定しないと枠線は表示されません。
-
枠線の種類の破線 1 ~ 4 は画面上では同じ破線として表示されます。
実際の PDF 出力でどのような表示になるかは、テスト出力で確認してください。 -
枠線の高さを指定しない、あるいは「内容にあわせる」では、そのアイテムで表示する文字列の高さと余白によって枠線の高さが決まります。「アイテムにあわせる」ではアイテムの高さと同じになります。
-
真偽値モジュールでは、次の属性があります。
領域 | 説明 |
---|---|
条件式 | 真偽を判定する条件式を指定します(式の中では this.data.カラム名 でカラム値が指定できます) |
表示方法 | 「チェックボックス」「○で囲む」「文字列」から選択します。チェックボックスは真の場合チェックが入ります。「○で囲む」は真の場合に楕円で囲みます。「文字列」は次の真文字列または偽文字列を表示します。 |
真文字列 | 真の場合に表示する文字列 |
偽文字列 | 偽の場合に表示する文字列 |
- 領域には次の属性があります。
領域 | 説明 |
---|---|
領域名 | 半角英数と「_ 」による名前 |
領域の種類 | タイプを選択 |
データソース | データソース |
左位置 | 親領域左端からの位置 |
上位置 | 親領域上端からの位置 |
領域の横幅 | 領域の幅 |
領域の高さ | 領域の幅(高さ) |
枠線表示 | 枠表示指定(上下左右の表示したいものにチェック) |
枠線の種類 | 実線または破線1~4(破線は1が細かく、2、3、4と粗くなる) |
枠線の太さ | 枠線幅 |
枠線の色 | 枠線色 |
繰返し方向 | データソースを指定した場合の繰り返し方向(現在は DOWN のみ) |
繰返回数/1頁 | 繰り返しを何件ずつで区切るか |
- 領域の場合は枠線はその領域の高さにあわせて表示されます。
レポート設定
- 補助メニューの「レポート設定」を選ぶと次のダイアログが開きます。

- 新規作成時に指定した項目を変更することができます。それ以外に次の項目があります。
項目 | 説明 |
---|---|
タイプ | 今のところ PAGE に固定 |
メモ | 開発上のメモ |
フォント | デフォルトのフォント |
フォントサイズ | デフォルトのフォントサイズ(ポイント) |
フォント色 | デフォルトの文字色(#RRGGBB) |
余白 | 用紙周囲の余白 |
- 位置や大きさの属性は、「10mm」のように「mm」を付けて指定してください。
フォントサイズは「12pt」のようにポイントで指定します。
テスト出力
- 補助メニューの「テスト出力」を選ぶと次のダイアログが開きます。

-
「出力対象」は、デバッグ用とリリース用のどちらのデータベースからデータを取るかを選択します。「出力最大件数」は、最大何件まで出力するかを指定します。
-
「出力」ボタンをクリックすると出力PDFが生成され、内容を確認できます。
位置ガイドとしての背景画像
- 上記のアイテムオプションの「出力」の「テストのみ」と「z-index」を使うと、設計時の位置ガイドとして背景に画像を置くことができます。出力する用紙にあらかじめ罫線などが印刷されていてそれに合わせた位置に文字列やデータを表示したい場合、それぞれの位置(用紙左端から何 mm、上端から何 mm)を定規で測って 左位置 と 上位置に設定すれば良いのですが、項目が多いと面倒です。その用紙のスキャン画像を作って、 左位置 と 上位置 は 0、横幅 と 高さ は用紙サイズに合わせ、重なり順 を -1、テストのみ使用を「はい」にして配置します。テスト出力で印刷してみて、実際の用紙とのずれがあれば、左位置 や 上位置 などを調節してください。その背景画像を位置ガイドとして、実際に出力する項目を配置すれば良いわけです。
22.4.レポート新規作成 ~ Excel
- レポート新規作成で「Excelレポート」を選ぶと次のダイアログが開きます。

-
「レポート名」は半角英数字と「_」での名前です。「表示名」は日本語で名前を付けることができます。「出力ファイル名」は、レポート名に「.xlsx」が付いたものになりますが、変更することもできます。
-
「データソース」は、このレポートで出力したいDBテーブル・ビューを選択します。
-
「作成」ボタンをクリックすると、「データソース」で指定したDBテーブル・ビューを一覧表示する内容のExcelレポートが自動生成され、その設計画面に移ります。
-
あらかじめ作成した Excel のテンプレートファイルをアップロードします。方法はCSV の場合と同様です。目的のファイルを選択し、「次へ」をクリックします。
-
※ テンプレートとなる Excel ファイルをどのように作成するかは後述します。
-
※ 今のところ Excel ファイルは、拡張子が .xlsx の Excel2007 以降のファイル形式のも
ののみが扱えます。拡張子が .xls の古い形式のファイルは扱えません。 -
画面右にある「…を一覧出力する Excel テンプレートの雛形を作成」は、DB テーブルや DB ビューを選択して「作成」ボタンをクリックすると、その DB テーブルやDB ビューを一覧出力する Excel テンプレートの雛形を作成します。
例えば「nouhinmeisai」というビューであれば、「nouhinmeisai_skelton_template.xlsx」というファイル名でテンプレートファイルが作られます。これをダウンロードして加工することで、Excel テンプレートを作成できます。
22.5.Excelレポート設計

- 右上にはこのレポートを操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このレポートを削除します。
- レポート設定
- このレポートについての設定を行います。(後述)
- テスト出力
- 実際に出力したExcelを表示できます。デバッグ用データベースのデータから指定した件数が出力に使われます。(後述)
-
「テンプレートファイル」は、このExcelレポートの元となるテンプレートファイルです。BuddyのExcelレポートは、Excelファイルとしてテンプレートファイルを用意し、その中に記述されたデータ埋め込み命令に従ってデータを埋め込むことで生成されます。テンプレートファイルは、Excelレポートの新規作成の際に指定したデータソースに従って自動的に生成されますが、修正することができます。
-
画面下部にはExcelシートのようなイメージで、テンプレートファイルの内容が表示されます。このシートは内容を確認できるだけで、編集はできません。内容の編集は次の方法で行います。
-
アイコンをクリックすると、テンプレートファイルをダウンロードできます。ダウンロードしたファイルを修正したら、次の「変更」でそれをアップロードすることでこのExcelレポートに適用できます。
※テンプレートファイルの書き方については後述します。 -
「変更」ボタンをクリックすると、次のようなダイアログが開きます。

- ファイルの一覧がアイコンで表示されている領域に、ドラッグアンドドロップでファイルをアップロードすることができます。ファイルの一覧からアイコンをクリックして選択し、「選択」ボタンをクリックすると、そのファイルがこのExcelレポートのテンプレートファイルとなります。
レポート設定
- 補助メニューの「レポート設定」を選ぶと次のダイアログが開きます。

- 新規作成時に指定した項目を変更することができます。それ以外に「メモ」に開発上のメモを入力することができます。
テスト出力
- 補助メニューの「テスト出力」を選ぶと次のダイアログが開きます。

-
「出力対象」は、デバッグ用とリリース用のどちらのデータベースからデータを取るかを選択します。「出力最大件数」は、最大何件まで出力するかを指定します。
-
「出力」ボタンをクリックすると出力PDFが生成され、内容を確認できます。
22.6.Excel テンプレートファイルの編集
-
今のところエクセルファイルは、拡張子が .xlsx の Excel2007 以降のファイル形式のもののみが扱えます。拡張子が .xls の古い形式のファイルは扱えません。
-
レポートのテンプレートとなる Excel ファイルは、下記で示すデータ埋め込み命令の他は、通常の Excel ファイルのように作成すれば、文字やセルの書式(色、文字の修飾や配置、罫線など)はそのまま出力されます。
-
Excel の数式を含めるには特殊な書き方が必要です。(後述)
-
データベースのテーブルやビューのデータを埋め込むには、埋め込みをおこなう領域の左上隅のセルで、先頭に <repeat src="dbi:テーブルまたはビュー名" direction="方向 "> と書きます。方向は「down」が下への繰り返し、「right」が右への繰り返しです。そして埋め込みをおこなう領域の右下隅のセルで、末尾に </repeat> と書きます。
repeatのsrcには、上述のように「dbi:テーブルまたはビュー名」と書くほか、「dbi:式」(式は、{table: テーブルまたはビュー名, where: where節内容, orderby: orderby節内容} というオブジェクトを返すJavascriptの式)という指定も可能です。 -
上記で作成した埋め込み領域の中で、{{カラム名}} と書けば、そのカラムの値が埋め込まれます。{{式}} と書いてJavascriptの式の値を埋め込むこともできます。式の中ではカラムの値は「this.data.カラム名」として得ることができます。また、レポート出力実行時にパラメータを与えていれば、式の中でその値を「this.param.パラメータ名」として得ることができます。セルの中に{{…}} 以外に文字列を書けばそれはそのまま出力されます。
-
例えばあるセルに、「{{age}}歳」と書けば、ageカラムの値と「歳」が表示されます。
「{{this.data.age < 6 ? '幼児' : ''}}」と書けば、ageカラムの値が6未満の時に「幼児」と表示されます。 -
{{カラム名}} や {{式}} で、{{フィルタ名:カラム名}} や {{フィルタ名:式}} として、表示する内容にフィルタを適用することができます。フィルタとは、文字列を加工する関数のことで、例えば数値に三桁ごとのカンマを挿入する COMMA などがあります。
{{COMMA:uriage}} とすれば、uriage カラムの値がカンマ区切りで表示されることになります。{{フィルタ1:フィルタ2:…}} のようにフィルタを複数適用することができます。
入れ子のrepeat ①~group による方法
-
<repeat …> に group="式" と書けば、その式の値が同じ連続するレコードがひとまとめになります。そして、その中に <repeat> を入れ子にすることができます。入れ子にする場合は内側の repeat では src の指定は不要です。direction も省略すると外側の repeatと同じになりますが、異なる方向を指定することも可能です。<repeat>は必ずその終了を示す </repeat> と対にならなければならないという点に注意してください。
-
<repeat group="…">の中では、<count> と書けばグループ化されたレコード数を、<sum exp=" 式 "> と書けば指定した式の値の合計を表示することができます。
例えば「<repeat group="this.data.year">」の中で「<sum exp="this.data.uriage">」と書けば、year カラムの値が同じレコードがグループ化されて、その uriage カラムの値の合計が表示されます。 -
全レコードの件数や合計を表示したい場合は、全体を <repeat group="1">…</repeat> で囲んでその中に <count> や <sum exp=" 式 "> を書きます。
-
<count> や <sum exp=" 式 "> にフィルタを適用したい場合は、<count filter="COMMA"> や <sum exp=" 式 " filter="COMMA"> のように書きます。複数のフィルタを適用するときはスペース区切りで指定します。
入れ子のrepeat ②~ srcによる方法
- 上述のgroupによるrepeatの入れ子では、一つのテーブルまたはビューに対して、同じ値が連続する部分をグループ化します(src指定は一番外側のrepeatのみ)が、異なるsrc指定を持つrepeatを入れ子にすることもできます。例えば外側では部署テーブル、内側では社員テーブルを指定して、各部署ごとの社員リストを出力したいとすると、外側では「<repeat src="dbi:busho">」とし、内側では「<repeat src="dbi:{table: 'shain', where: {bushoID: this.data.ID}}">」とします。「where: {bushoID: this.data.ID}」という指定によって、shainテーブルのbushoIDカラムの値が外側の部署テーブルのIDに等しいものに絞り込んでいます。
Excelの数式の扱い
- セルにExcelの数式を書いた場合、出力されるExcelでは数式とはならず、数式の結果が表示されます。出力されるExcelで数式となるようにしたい場合は先頭に「’」を入れて「’=…」と書きます。これによってテンプレートのExcelでは文字列として扱われ、出力されたExcelでは数式と扱われます。
数式を書く場合、セルの参照には注意が必要です。「A1」のような絶対参照は<repeat>によってレコードが繰り返し埋め込まれることによってセル位置がずれることがないセルでないと正しく参照できません。<repeat>によるセル位置のずれが起こっても相対位置は変わらないセルであれば、Excelのindirect()関数を使って、例えば「'=indirect("RC[-3]",false)」と書けば三つ左のセルの値を参照できます。
数式の中に上述の{{…}}や<count>や<sum>を書くことができます。例えば「’=<sum exp="this.data.jisseki">/<sum exp="this.data.yosan">」と書いてjissekiの合計をyosanの合計で割った値を表示することができます。
22.7.レポートの使用
- 作成したレポートをアプリの中で使用するには、スクリーンのスクリプトの中で、 api.outputDialog.open( レポート名 , オプション ) としてレポート出力ダイアログを開き、その中でレポート出力をおこないます。オプションには必要に応じて次のプロパティを持つオブジェクトを指定します。
説明 | |
---|---|
where | 絞り込み条件 |
order | 並べ替え指定 |
offset | 何件目から出力するか(先頭が0) |
num | 何件出力するか |
-
上記以外のプロパティも指定することができ、レポート中の式で「this.param. プロパティ名」で参照できます。
-
jsdataプロパティでデータを与えると、データベースでなくそのデータ内容を出力することができます(次項)。
22.8.スクリプトで与えたデータの出力
-
通常はsrcやデータソースに「dbi:テーブル名」のように指定してデータベースから読み取ったデータをレポート出力しますが、次のようにしてスクリプトで組み立てたデータを与えて出力することができます。
-
上述の、レポート出力ダイアログを開くときのオプションで、jsdataプロパティとして例えば次のような形で出力したいデータを指定します。
jsdata: {
shain: [
{ namae: ‘田中’, nenrei: 34, … },
{ namae: ‘鈴木’, nenrei: 45, … },
…
],
kokyaku: [
…
]
}
-
この例では、「shain」「kokyaku」がテーブル名にあたり、「namae」「nenrei」がカラム名にあたります。
-
そして、レポートのsrcやデータソースで「jsdata:shain」や「jsdata:kokyaku」を指定すると、上記で与えたデータを出力することができます。
-
「jsdata:…」のsrcやデータソースに対しては、where、order、offset、numのオプションは指定しても効果はありません。スクリプトで与えたデータの全体がそのままの順序で出力されます。
23.フィルタ
-
フィルタは、引数を一つ受け取って、それを加工した結果の文字列を一つ返すJavascript の関数です。上記のようにレポートで使用する他、スクリーンのスクリプトでも使用することができます。
-
フィルタは下記のような名前で指定しますが、ハイフンで区切ってオプションパラメータを付けることができます。(例:YMD-h-1)
-
あらかじめ用意されているフィルタには次のものがあります。
<一般>
フィルタ | 説明 |
---|---|
TRIM | 前後の半角スペースやタブを取り除く。オプションパラメータで数字を指定するとその文字数で切る。 |
<数値>
フィルタ | 説明 |
---|---|
COMMA | 桁区切りのカンマを挿入する。 |
YEN | ¥表記する(桁区切りのカンマ挿入もおこなう)。 |
<日時関係>
フィルタ | 説明 |
---|---|
YMD | 日付(Date型またはDate型に変換できる文字列)をyyyy/mm/ddにする。オプションパラメータ「h」を付けると区切りが「/」でなく「-」になる。オプションパラメータ「1」を付けると0を付けない。 |
JYMD | 日付(Date型またはDate型に変換できる文字列)を yyyy年mm月dd日 にする。オプションパラメータ「1」を付けると0を付けない。 |
GYMD | 日付(Date型またはDate型に変換できる文字列)を 元号y年m月d日 にする。 |
YMDHMS | 日時(Date型またはDate型に変換できる文字列)をyyyy/mm/ddhh:mm:ssにする。オプションパラメータ「h」を付けると区切りが「/」でなく「-」になる。オプションパラメータ「1」を付けると0を付けない。オプションパラメータ「s」を付けると秒を省略。 |
JYMDHMS | 日時(Date型またはDate型に変換できる文字列)を yyyy年mm月dd日 hh時mm分ss秒にする。オプションパラメータ「1」を付けると0を付けない。 |
HMS | 時刻(Date型または文字列)を hh:mm:ss にする。オプションパラメータ「1」を付けると0を付けない。オプションパラメータ「s」を付けると秒を省略。 |
AGE | 日付(Date型またはDate型に変換できる文字列)を誕生日として現在の満年齢にする。オプションパラメータ「d」を付けると日単位計算(誕生日前日に年を取る)となる。 |
※ 日付関係のフィルタでは、「元号y年m月d日」の形式の文字列も受け付けるようになっていますので、元号表記と西暦表記の相互変換に使用することができます。
※ 日付関係のフィルタでは、ISO8601の「2016-06-01T10:20:30.456Z」の形式(タイムゾーンはZの他「+0900」「+09:00」もOK)にも対応しています。
<文字種変換>
フィルタ | 説明 |
---|---|
HIRA2KATA | ひらがなをカタカナにする |
KATA2HIRA | カタカナをひらがなにする |
ZEN2HAN | 全角英数記号を半角にする |
HAN2ZEN | 半角英数記号を全角にする |
ZEN2HANKATA | 全角カナを半角カナにする |
HAN2ZENKATA | 半角カナを全角カナにする |
- ユーザーが独自のフィルタを追加できる仕組みを用意する予定です。
24.サーバー機能設計
-
「サーバー機能」は、アプリのサーバー側で動作するスクリプトです。スクリーンのスクリプトはアプリのクライアント側、つまりブラウザ上で動作しますが、サーバー側で動作するスクリプトが必要な時は「サーバー機能設計」でおこないます。
-
体験版ではサーバー機能設計は使用できません。
-
サーバー機能のスクリプトの書き方、使える機能、スクリーンのスクリプトとサーバー機能の使い分けについては「プログラミングガイド」を参照ください。
24.1.サーバー機能新規作成

- 白紙のサーバー機能
- 空の状態のサーバー機能を作成します。一から作成するときに使用します。
- データインポート
- DBテーブルにCSVファイルからデータを入力する内容のサーバー機能を作成します。
- データエクスポート
- DBテーブル・ビューのデータをCSVファイルに書き出す内容のサーバー機能を作成します。
- テンプレートを選択すると、次のダイアログが開きます。

-
「サーバー機能名」は、半角英数字と「_」による名前をつけます。「表示名」は日本語の名前をつけることができます。
-
「作成」ボタンをクリックすると、作成されて、サーバー機能設計画面に映ります。
24.2.サーバー機能設計

-
「スクリプト編集」領域で、サーバー機能のスクリプトを編集します。
-
右上にはこのサーバー機能を操作するための次のアイコンがあります。
- 変更を保存します。保存後に変更があると赤く表示されます。
- 操作を元に戻します。
- 元に戻した操作をやり直します。
- 補助メニューを開きます。
- 補助メニューには次のボタンがあります。
- 削除
- このサーバー機能を削除します。
- 権限設定
- このサーバー機能を実行できる権限を設定します。(後述)
- サーバー機能設定
- このサーバー機能についての設定を行います。(後述)
権限設定
- 補助メニューで「権限設定」を選択すると、次のようなダイアログが開きます。

-
「権限管理をする」のチェックを入れると、設定した権限内容が適用されます。チェックを入れない場合は誰でも実行できる状態となります。
-
「許可ユーザー」「拒否ユーザー」「許可グループ」「拒否グループ」の欄をクリックするとユーザーやグループを選択するダイアログが開きます。
「許可ユーザー」か「拒否ユーザー」に該当するとそれで実行の可否が決まります。そうでない場合「許可グループ」「拒否グループ」への該当で決まります。「優先」は許可と拒否の両方に該当した場合にどちらを優先するかを指定します。
サーバー機能設定
- 補助メニューで「サーバー機能設定」を選択すると、次のようなダイアログが開きます。

- 次の属性項目があります。
属性 | 説明 |
---|---|
名前 | サーバー機能名(半角英数字と「_」) |
表示名 | 日本語での名前 |
実行ユーザー | サーバー機能を実行するユーザーを「system」「ユーザー」から選択します。「system」の場合は「.system」という特殊なユーザーで実行され、「ユーザー」の場合は実行時のログインユーザーとして実行されます。 |
タイムアウト | タイムアウトまでの時間をミリ秒で指定します。指定した時間内に結果が返されないと、タイムアウトのエラーとなります。 |
実行形式 | 「同期実行」と「非同期実行」から選択します。 「同期実行」の時は、スクリプトの実行が終わるまで待って、その時点の変数resultの内容が下記のコールバック関数を通して返されます。 「非同期実行」の時は、スクリプトの中であらかじめ用意されている callback という関数を呼び出すとサーバー機能の実行は終わり、その引数(第一引数がエラー、第二引数が結果)によって結果が返ります。 いずれの場合もタイムアウトで指定した時間内に結果が返らないとエラーになります。 フレームワーク2では「同期実行」を選択してください。 |
メモ | 開発上のメモ |
テスト実行オプション | テスト実行時にoptionsとしてスクリプトに渡されるオプションを指定します。(後述) |
スクリプト編集
-
「スクリプト編集」領域ではサーバー機能のスクリプトを編集します。
-
上部には次のボタンやアイコン類があります。
- 「コード挿入」ボタン
- よくあるコードを選択して挿入できます。
- 「名前挿入」ボタン
- DBテーブル・ビューやそのカラム、スクリーン、レポート、サーバー機能の名前を選択して挿入できます。
- 「検索」テキストボックスと
- 「検索」テキストボックスに入力して
をクリックすると、スクリプト中から該当文字列を検索できます。
(テスト実行)
- テスト実行を行います。(後述)
(ファイル管理)
- ファイル管理を行います。(「アプリメニュー」の「ファイル管理」と同じ機能です。)
(詳細検索)
- 検索機能を拡張し、詳細検索や置換が行えるモードにします。(後述)
(APIリファレンス)
- APIリファレンスを開きます。
(スクリプト編集設定)
- スクリプト編集についての、テーマとフォントサイズを設定します。
(詳細検索)をクリックして詳細検索モードに切り替えると、上部が次のように切り替わります。

- 「単語」「大小文字区別」「正規表現」のそれぞれのチェックボックスは、検索の方法を指定します。「検索」「置換」両方に入力して、「逐次置換」または「一括置換」をクリックすると、検索で見つかった部分を置換します。
テスト実行
-
作成したサーバー機能はアプリ中ではスクリーンのスクリプトから呼び出して実行しますが、サーバー機能設計画面から
(テスト実行)をクリックすることでテスト実行することができます。
-
サーバー機能のスクリプトには、実行時に「options」としてデータを与えることができます。テスト実行時にこのoptionsを指定するには、補助メニューの「サーバー機能設定」で「テスト実行オプション」の「設定」ボタンをクリックします。

-
「実行時オプションを使用する」のチェックを入れると、その下で設定した内容がoptionsに渡されます。
-
「属性名」と「値」を必要なだけ指定し、「OK」ボタンをクリックすると設定されます。
-
上記画面例であれば、optionsには {name: "test", value: 1000} というオブジェクトが渡されることになります。