プログラミングガイド
2021/04/28
   2.1.5. this
   2.4.1.files
   4.4.3.結合
  4.6.api
   8.1.3.NULL
   8.2.1.配列
   8.4.1.変換
    8.4.1.1.UPPER
    8.4.1.2.LOWER
    8.4.1.3.TO_CHAR
    8.4.1.4.FORMAT
    8.4.2.1.SUBSTR
    8.4.2.2.LEFT
    8.4.2.3.RIGHT
    8.4.2.4.CONCAT
   8.4.3.数値
    8.4.3.1.ABS
    8.4.3.2.ROUND
    8.4.3.3.FLOOR
    8.4.3.4.CEIL
   8.4.4.日時
    8.4.4.1.NOW
    8.4.4.2.AGE
    8.4.4.3.DATE_PART
    8.4.5.1.COUNT
    8.4.5.2.MAX
    8.4.5.3.MIN
    8.4.5.4.AVG
    8.4.5.5.ARRAY_AGG

1.概要

この文書では、Buddyでのアプリ開発の中で必要となるJavascriptおよびSQLでのプログラミングについて、様々な技法や注意点を解説します。Buddyの開発機能やその使い方については「開発ガイド」をご覧ください。またBuddyに用意されているAPIについては「APIリファレンス」をご覧ください。

全般
全体に共通する話題
デザイン
アプリのデザイン調整について
スクリーンスクリプト
スクリーンのスクリプトについて
サーバー機能
サーバー機能について
SQL
PostgreSQLのSQLで使われる式などについて

2.全般

2.1.Javascriptの注意点

2.1.1.+記号

2.1.2.小数計算

2.1.3.非同期処理

2.1.4.複数の非同期処理とasync

2.1.5. this

2.1.6.コールバック関数での this

2.2.スクリーンスクリプトとサーバー機能の使い分け

api.transaction
トランザクション(一連のデータベース操作をひとまとまりとして実行する)
lib.BuddyFile
アプリのfilesディレクトリ内のファイルやディレクトリを操作する
lib.FileManager
一時的なダウンロード用URLをファイルに与える
lib.Workbook
Excelファイルの読み書き
lib.XPDFJ
PDFファイルを作成する

2.3.日時の処理

2.3.1.データベースの日時型

2.3.2.JavascriptのDate型

2.3.3.データベースの時間間隔型

2.3.4.日時関係のフィルタ

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を付けない。
JYMDHMS
日時(Date型またはDate型に変換できる文字列)を yyyy年mm月dd日 hh時mm分ss秒にする。オプションパラメータ「1」を付けると0を付けない。
HMS
時刻(Date型または文字列)を hh:mm:ss にする。オプションパラメータ「1」を付けると0を付けない。オプションパラメータ「s」をつけると秒を省略して時分のみを返す。
AGE
日付(Date型またはDate型に変換できる文字列)を誕生日として現在の満年齢にする。オプションパラメータ「d」を付けると日単位計算(誕生日前日に年を取る)となる。

2.4.filesとファイルマネージャー

2.4.1.files

images
※スクリーンやレポートのモジュールで使用する画像を格納
import
※DBテーブルの作成やデータインポートに使用するCSVファイルを格納
javascripts
※アプリで利用するJavascriptのライブラリファイルを格納
outputs
レポートの出力で作成されるファイルを格納
stylesheets
※スタイルシート(CSS)ファイルを格納
templates
※XLSXレポートのExcelテンプレートファイルを格納
theme
※スクリーンテーマファイルを格納
users
ユーザーが自由に利用するためのフォルダ
attachments
DBテーブルのファイル型のカラムにセットしたファイルを格納(設計情報にはない)

2.4.2.ファイルマネージャー

2.5.ECMAScript 6

3.デザイン

アプリの画面デザインを調整するためにいくつかの手段が用意されています。

3.1.アイテムの属性による調整

スクリーン設計画面では、アイテム(スクリーンに配置したモジュール)の属性を設定できます。例えば、ボタンの色を変えたければ、「bg-color」属性を変更します。
 複数のアイテムに同じ設定をしたい場合、非グリッドスクリーンでは「属性コピー」という機能が用意されています。グリッドスクリーンでは、複数のアイテムを同時に選択して属性を設定できます。これらの操作方法は「開発ガイド」の【17.02.03.アイテム(配置したモジュール)の調整】【17.02.04. 属性コピー】をご覧ください。

3.2.setStyle()

アプリの動作中にデザインを変更したい場合、スクリーンのスクリプトでアイテムの「setStyle()」アクションを呼び出してCSSのスタイルをセットします。例えばアイテム名が「BUTTON1」のボタンの色を変えたければ、

  this.items.BUTTON1.setStyle({backgroundColor: "#ff0000"});

のようにします。この時、CSSのスタイル名としては「background-color」ですが、Javascriptのオブジェクトで指定する時はハイフンを除いてハイフンの後ろの1文字は大文字にするルールになっています。

3.3.スクリーンテーマ

スクリーンテーマは、スクリーンの要素にあらかじめ設定されたクラス名や、アイテムの「クラス」や「部分クラス」で指定した名前に適用するスタイルをまとめて指定する機能です。アイテムの属性に用意されていないスタイルを指定したり、アプリ全体のスタイルを統一するのに利用できます。
 例えば文字列モジュールで表示する文字列が長すぎる時に、切り捨てる、「…」ではみ出している部分があることを示す、スクロールバーを表示する、といった表示方法の調整はアイテム属性ではできませんが、スクリーンテーマでは可能です。また、スクリーン自体のヘッダ部分や背景といったもののスタイルの調整もスクリーンテーマで可能です。
 スクリーンテーマの使い方は、「開発ガイド」の【22. スクリーンテーマ編集】をご覧ください。

3.4.スタイルシート

CSSファイルを用意して、それをアプリに組み込むことも可能です。その方法は「開発ガイド」の【23. スタイルシート管理】をご覧ください。

4.スクリーンスクリプト

4.1.スクリーンスクリプトの基本

4.2.コード挿入と名前挿入

4.3.モジュールの操作

onClick
マウスの左ボタンのクリック時
onFocus
フォーカスされた時
onBlur
フォーカスを失った時
onMouseDown
マウスのボタンが押された時
onMouseUp
マウスのボタンが離れた時
onDoubieClick
マウスの左ボタンのダブルクリック時
onContextMenu
マウスの右ボタンのクリック時
setColWidth()
列の幅を設定する。
setColStyle()
列ごとのセルのスタイルを設定する。
setCellStyle()
セルの位置や内容に応じたスタイルを設定する。
setFilter()
セルの表示内容に適用するフィルタを設定する。
setStyle()
テーブル全体に対するスタイルを設定する。
setWhere()
絞り込み条件を設定する。
setOrder()
表示順序を設定する。
setOffset()
表示する先頭のレコード番号を設定する。
setNum()
表示件数を設定する。
getCount()
絞り込み条件に該当したレコード数を得る。
setColWidth()
列の幅を設定する。
setColStyle()
列ごとのセルのスタイルを設定する。
setCellStyle()
セルの位置や内容に応じたスタイルを設定する。
setFilter()
セルの表示内容に適用するフィルタを設定する。
setStyle()
DBテーブル全体に対するスタイルを設定する。
outputData()
表示内容をExcelやCSV形式のファイルとして出力する。
search()
検索をおこなう。
this.items.RECORDSELECTOR1.setMax(件数)
全体の件数をセット。
RECORDSELECTOR1_onChange: function(evt){…} … 位置を変える操作をした時に呼ばれる
※ DB テーブルと DB レコードセレクタの操作方法については、新規スクリーン作成で「検索画面」を選択して作成したスクリーンのスクリプトも参考にしてください。
type
次のいずれかでグラフの種類を指定します。
棒グラフ
GroupedBarChart
積み上げ棒グラフ
BarChart
折れ線グラフ
LineChart
積み上げ折れ線グラフ
AreaChart
円グラフ
PieChart
data
系列ごとのデータを示すオブジェクトの配列。
Label … 系列名
values
{x: 横値, y: 縦値} の配列
※ 円グラフでは一系列のみ(配列を渡しても先頭のものだけを使用)
margin
{top: 10, bottom: 50, left: 50, right: 10} のようなオブジェクトで上下左右の余白を指定。
※ 余白に縦横軸の目盛やラベルが表示されるので、適切な大きさが必要です。

this.items.GRAPH1.downloadImage(); を実行するとグラフに表示されている内容を画像として保存することができます。

this.items.MAP1.markersLength()
マーカー数を返す。
this.items.MAP1.del Marker(markeridx)
markeridx番目(先頭が0)のマーカーを削除。
this.items.MAP1.clearMarkers()
全てのマーカーを削除。
MAP1_onClick: functi on(evt){…}
クリック位置の緯度・経度が、evt.latlng.lat、 evt.latlng.lng で得られる。
this.items.CALENDAR1.textLength(date)
dateで指定の日付の表示文字列の数を返す。
this.items.CALENDAR1.delText(date, idx) … dateで指定した日付のidx番目(先頭が0)の表示文字列を削除。
this.items.CALENDAR1.clearText(date)
dateで指定した日付の表示文字列を全て削除。
CALENDAR1_onClick: function(evt){…}
日付部のクリック時に、evt.date でクリックされた日付(Date型)が得られる。
CALENDAR1_onChange: function(evt){…}
表示年月を変更した時に、evt.year と evt.month で変更後の表示年月が得られる。
this.items.TIMETABLE1.setDays(days)
日数を設定。
this.items.TIMETABLE1.addText(start, end, text, bgcolor) … 開始日時startから終了日時endまでに文字列textを背景色bgcolorで表示。
this.items.TIMETABLE1.textLength()
セットした表示文字列数を返す。
this.items.TIMETABLE1.delText(idx)
idx番目の表示文字列を削除。
this.items.TIMETABLE1.clearText()
表示文字列を全て削除。

この例のfillStyleやfillRect()は、HTML5のCANVAS機能に用意されたプロパティやメソッドです。詳しくはhttps://developer.mozilla.org/ja/docs/Web/HTML/Canvas をご参照ください。

4.3.1.[テーブルとDBテーブルのスタイル]

this.items.DATABASETABLE1.setColWidth(
    [
        {outer: 50, inner: 'auto'},
        {outer: 200, inner: 'auto'},
        {outer: 100, inner: 'auto'},
    ]
);
this.items.DATABASETABLE1.setColStyle(
    [
        {outer: {backgroundColor: 'lightgrey', textAlign: 'right'}},
        {},
        {outer: {textAlign: 'right'}},
    ] 
);
this.items.DATABASETABLE1.setCellStyle(
    function(row, col, text){
        var result = undefined;
        if(Number(text) < 0) result = {color: 'red'};
        return result;
    } 
);
this.items.DATABASETABLE1.setStyle({
    outer: {width: 400}, 
    inner: {width: 500, backgroundColor: 'white'}
});

4.4.データベース操作

  1. データの読み書き
  2. サブクエリ(副問い合わせ)
  3. 結合

4.4.1.データの読み書き

getCount(options, callback)
レコード数
readData(options, callback)
レコード読み取り
insertRecord(options, callback)
レコード挿入
updateRecord(options, callback)
レコード更新
upsertRecord(options, callback)
レコード更新または挿入(該当レコードがあれば更新、なければ挿入)
deleteRecord(opti ons, cal l back)
レコード削除
getCount(options, callback)
レコード数
readData(options, callback)
レコード読み取り

4.4.2.サブクエリ

  1. 絞り込み条件
  2. 別のDBテーブル・ビューやサブクエリとの結合

4.4.3.結合

innerJoin(source, asname)
内部結合(inner join)
leftOuterJoin(source, asname)
左外部結合(left outer join)
rightOuterJoin(source, asname)
右外部結合(right outer join)
fullOuterJoin(source, asname)
完全外部結合(full outer join)
crossJoin(source, asname)
交差結合(cross join)
on(leftColumn, rightColumn, options)
JOIN ON条件の指定
using(column1, column2, ...)
JOIN USING条件の指定
op
カラム値の比較に用いる演算子(デフォルトは '=')

4.5.データベースの where

4.6.api

target
デバッグ用ならdebug、本番用ならrelease
urlRoot
ベースとなるURL。下記で説明するfil es内のファイルは、このURLの後に /files/ と続ければURLが得られる
alert
Javascriptのalert() で表示
confirm
Javascriptのconfirm() で表示
message
指定した文字列を表示するダイアログを開く
openFile
files内のファイルを開く※
openUrl
指定したURLを開く※
show
指定したスクリーンをダイアログとして開く
showModal
指定したスクリーンをモーダルダイアログとして開く
closeDialog
ダイアログとして開かれたスクリーンの中で呼ぶと閉じて結果を返す
showFileSelector
ファイルマネージャーダイアログを開く
showDateSelector
日付選択ダイアログを開く
open
レポート出力ダイアログを開く
exists
指定した名前のフィルタが存在するかどうか
apply
指定した名前のフィルタを適用して結果を返す
set
フィルタ関数を追加・変更する
set
set(キー, バリュー, コールバック関数) で、キーにバリューをセットする。コールバック関数はオプションで、指定するとセットが完了すると呼ばれる。
get
get(キー, コールバック関数) で、キーのバリューを取り出し、コールバック関数を第一引数エラー、第二引数バリュー、として呼び出す。
del
del(キー, コールバック関数) で、指定のキーを削除する。
keys
keys(コールバック関数) で、キーのリストをコールバック関数で返す。
data
data(コールバック関数) で、すべてのキーと値のオブジェクトをコールバック関数で返す。
async
複数の非同期処理を順次実行したり、同時実行して全部終わるのを待ったりする機能を提供する
decimal
小数計算を誤差なくおこなう機能を提供する
objectAssign
Javascriptのオブジェクトからオブジェクトへプロパティをコピーします
superagent
指定のURLやパラメーターでhttpアクセスして結果を得る(いわゆるAJAX)機能を提供する
xml2js
XML形式のテキストデータをJavascriptのオブジェクトに変換

4.7.スクリーンコンテナの動的な使用

4.8.データベースのトリガイベント

4.9.デバッグ

4.10.スクリーン間の連携

4.10.1.クエリ

4.10.2.api.store

4.10.3.api.KeyValueStore

4.10.3.1.○「同期実行」の単純なスクリプトの例
  // サーバー機能スクリプト(機能名「mul」) 
  result = options.a * options.b;
4.10.3.2.○「非同期実行」の単純なスクリプトの例
  // サーバー機能スクリプト(機能名「mul」)
  result = options.a * options.b; 
  callback(null, result);
4.10.3.3.○上記を呼び出すスクリーンスクリプトの例
  api. serverFunction.execute("mul", {a: 2, b: 3}, function(err, res) { if( err )  {
      console.log(JSON.parse(err.response.text));
    } else { 
      console.log(res.console.log);
      // res.result で得られる結果を用いた処理
    }
  });

4.11.Javascriptライブラリファイルの使用

5.サーバー機能

5.1.実行タイプ

同期実行
スクリプトの実行が終わるまで待って、その時点の変数resultの内容が返される。
非同期実行
スクリプトの中であらかじめ用意されている callback という関数を呼び出すとサーバー機能の実行は終わり、その引数(第一引数がエラー、第二引数が結果)によって結果が返る。

5.2.サーバー機能の呼び出し

5.3.権限

5.4.console

5.5.データベース操作とトランザクション

5.6.サーバー機能からサーバー機能を呼び出す

5.7.その他

async
非同期処理を順次実行するなどする
api.sendMessage()
メッセージを送信する
api.serverFunction
サーバー機能から別のサーバー機能を呼び出します。
api.transaction
DBテーブル・ビューの操作のトランザクション処理を行います。
api.xml2js
xml2jsモジュール。スクリーンプログラムのapi.lib.xml2jsモジュールと同等。
customLog()
カスタムログを出力する
constants
constants.appName でアプリ名、constants.target で”debug”か”release”
require()
events、crypto、object-assign、nodemailer、decimal のみがrequireできる
lib.BuddyFile
アプリのfilesディレクトリ内のファイルを操作する
lib.FileManager
実行時に作成し、ダウンロードが終われば不要となる一時的なファイルを管理する
lib.BuddyReport
レポートを出力する
lib.Workbook
エクセル(xlsx)ファイルを作成する
lib.XPDFJ
PDFファイルを作成する
lib.sendMail
メールを送信する

6.Jasmineによるテスト

7.WebAPI

7.1.WebAPI設定

7.2.WebAPIの呼び出し方

cmd
※コマンド名
user_id
※ユーザーID
password
ログイン時に指定(※login時に必須)
token
ログイン時にサーバーからもらったトークン(※serverfunc時に必須)
param
cmdに対応するパラメータ(JSON)(※serverfunc時に必須)
input type="file"の上記以外の任意の名前
添付ファイル
login
user_idとpasswordでログインする。成功するとトークンが返る。
serverfunc
サーバー機能の実行。
cmd
※login
user_id
※ユーザーID
password
※パスワード
返値
JSONで {"token": トークン文字列}
cmd
※serverfunc
user_id
※ユーザーID
token
※ログイン時にサーバーからもらったトークン
param
※パラメータオブジェクト
funcName
※実行するサーバー機能名
options
サーバー機能のoptionsに渡される
files
オプション。添付ファイルのあるときに指定
input名
input名のファイルをどこに入れるか。「files/」で始まる、存在するディレクトリパスを指定。
返値
サーバー機能の返す {"result": …, "console": {"log": […]}} のJSON文字列

7.3.ログ

admin
20171218162546 webapi:login {"cmd":"login","user_id":"admin","password":"*****"}
admin
20171218170620 webapi:serverfunc {"cmd":"serverfunc","user_id":"admin","token": …

7.4.権限制御

サーバー機能の権限制御
実行の権限を、ユーザーとグループに対して設定。

8.SQL

8.1.SQLの式の基本

8.1.1.文字列とカラム名

8.1.2.大文字小文字

8.1.3.NULL

8.1.4.型とキャスト

数値 - 数値
numeric
数値 - 自動連番
bigint
数値 - 整数
bigint
数値 - 小数点
double precision
数値 - 金額
money
日付・時間 - 日時
timestamp with time zone
日付・時間 - 日付
date
日付・時間 - 時間
time with time zone
日付・時間 - 時間間隔
interval
文字列
text(型の詳細はどれでも)
真偽値
boolean
ファイル
text(型の詳細はどれでも)

8.2.SQLの演算子

: 足し算、引き算

IS
IS NULL、IS NOT NULL
|| ~ ~* !~ !~*
文字列連結、正規表現一致、正規表現一致(大文字小文字同一視)、それらの否定
IN
要素かどうか
BETWEEN … 範囲内
LIKE ILIKE
パターン一致、パターン一致(大文字小文字同一視)
< > <= >=
小なり、大なり、以下、以上
= <> !=
等しい(または代入)、等しくない、等しくない
NOT … 論理否定
AND … 論理積
OR … 論理和

8.2.1.配列

<@
左が右に含まれる
@>
右が左に含まれる
&&
共通要素がある

8.3.SQLの条件式

CASE式
順に条件を調べて真になると対応する結果を返します。
COALESCE()
引数のうちのNULLでない最初の値を返します。
NULLIF()
二つの引数が等しければNULL、異なれば第一引数を返します。
GREATEST()
引数のうちの最大の値を返します。
LEAST()
引数のうちの最小の値を返します。

8.4.SQLの関数

8.4.1.変換

8.4.1.1.UPPER

大文字に変換する。UPPER('abc') → 'ABC'。

8.4.1.2.LOWER

小文字に変換する。LOWER('ABC') → 'abc'。

8.4.1.3.TO_CHAR

数値や日時を、書式を指定して文字列に変換する。TO_CHAR(NOW(), 'HH24:MI:SS') → '10:45:22'。書式の詳細は、https://www.postgresql.jp/document/9.4/html/functions-formatting.html を参照。

8.4.1.4.FORMAT

複数の値を、C言語のsprintfと同様の書式(ただし型指定はsのみ)を指定して文字列に変換する。FORMAT('|%5s|%10s|', 123, 'test') → | 123| test|。書式の詳細は、https://www.postgresql.jp/document/9.4/html/functions-string.html#FUNCTIONS-STRING-FORMAT を参照。

8.4.2.文字列

8.4.2.1.SUBSTR

文字列の指定の位置から指定の文字数を切り出す。文字数を省略すると末尾まで。SUBSTR('abcdef', 2, 3) → 'bcd'。SUBSTR('abcdef', 2) → 'bcdef'。

8.4.2.2.LEFT

文字列の先頭から指定の文字数を切り出す。LEFT('abcedf', 3) → 'abc'。

8.4.2.3.RIGHT

文字列の末尾から指定の文字数を切り出す。RIGHT('abcedf', 3) → 'edf'。

8.4.2.4.CONCAT

文字列として結合。引数はいくつでもよく、文字列でないものは文字列に変換され、NULLは無視される。CONCAT('abc', NULL, 123) → 'abc123'。

8.4.3.数値

8.4.3.1.ABS

絶対値。ABS(-123) → 123。

8.4.3.2.ROUND

四捨五入。第二引数で小数点以下の位を指定。ROUND(123.456) → 123。ROUND(123.456, 2) → 123.46。

8.4.3.3.FLOOR

引数より大きくない最大の整数。FLOOR(123.456) → 123。FLOOR(-123.456) → -124。

8.4.3.4.CEIL

引数より小さくない最小の整数。CEIL(123.456) → 124。CEIL(-123.456) → -123。

8.4.4.日時

8.4.4.1.NOW

現在の日時。NOW() → '2018-01-30 11:10:01.416283+09'。

8.4.4.2.AGE

日時間の経過時間。結果はinterval型。引数が一つの時は当日の午前0時までの経過時間。AGE('2018-2-1'::timestamp, '1945-8-15'::timestamp) → '72 years 5 mons 17 days'。AGE('1959-2-17'::timestamp) → '58 years 11 mons 13 days'。

8.4.4.3.DATE_PART

日時やinterval型から指定の部分を切り出す。DATE_PART('month', NOW()) → 1。DATE_PART('year', AGE('1959-2-17'::timestamp)) → 58。指定できる部分名など詳細は、
https://www.postgresql.jp/document/9.4/html/functions-datetime.html#FUNCTIONS-DATETIME-EXTRACT を参照。

8.4.5.集約・配列

8.4.5.1.COUNT

件数(引数の値がNULLのものはカウントしない)。COUNT(*) ではレコード数をカウント。

8.4.5.2.MAX

最大値。

8.4.5.3.MIN

最小値。

8.4.5.4.AVG

平均値。

8.4.5.5.ARRAY_AGG

値を配列にまとめる。NULLも含む。

8.4.5.6.ARRAY_TO_STRING

配列を指定の区切り文字で連結して文字列化。ARRAY_TO_STRING(ARRAY[1,2,3], ';') → '1;2;3'。