Tabulator 開発日記

 

 

 

Tabulator を始めました。
仕事ではずっと jqGrid を使ってましたが、jqGridで作ったサイトを今風にリニューアルすることにして、ふさわしいGridを探してましたところ、Tabulatorにたどり着きました。
さすが、後発なだけあって Bootstrap、レスポンシブにもしっかり対応していて動作が軽快で気に入りました。
日本語の情報がまだ少ない気がしますが、公式サイトのサンプル、ドキュメントが詳しく丁寧でわかりやすいので助かります。
今までjQGridで行ってきたカスタマイズをTabulatorで行ってみたコード例などのんびり書いて行こうかと思います。

本家Home
テーマの配色が都バスの掲示板みたいです。

 

 

入門はこれらがわかりやすいです。

https://mmtomitomimm.blogspot.com/2018/12/tabulator.html
https://oopsoop.com/tabulator/
https://confrage.jp/tabulator%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%81%97%E3%81%9F%E3%82%89%E7%B0%A1%E5%8D%98%E3%81%ABweb%E3%82%A2%E3%83%97/

https://qiita.com/yamori813/items/d0c6971ca5154d8fc1bf

https://qiita.com/e21084/items/dcd7e190dc651127aa71

https://ascii.jp/elem/000/001/269/1269722/

tips集を公開して下さってる方がいてこれも分かりやすく役に立ちそうです。

Tabulator tips

 

 

 

 

jqGrid 行を挿入

[ コード例 ]

      
      // 列の値をセット //
      const loadaveval = info["LOADAVE"].split(",")[0];
      const msval = info["MYSQLRSSTOTAL"].toString().replace(",", "");
      const javaval = info["JAVARSSTOTAL"].toString().replace(",", "");
      const httpdval = info["HTTPDRSSTOTAL"].toString().replace(",", "");
      
      // ID //
      const gid = "OSINFOWS_" + cntWSMessage;
      // 行 //
      const insdata = {id: gid, free: info["FREE"], loadave: loadaveval,
        javarsstotal: javaval, 
        tomcat_sscnt: info["TOMCAT_SSCNT"], 
        mysqlrsstotal: msval,
        httpdrsstotal:httpdval, httpdpscount: info["HTTPDPSCOUNT"],
        disk_used: info["DISK_USED"], 
        tm_add: info["DATENOW_FORMAT"]
      };
      
      // 最初の行に挿入 // 
      $("#osinfo").jqGrid("addRowData", undefined, insdata, "first");

Tomcat war デプロイ用スクリプト

回数が少なく時々な場合は、気になりませんでしたが、再デプロイが多いと面倒で間違いも懸念されるので、かんたんなスクリプトにしておきました。

#!/bin/sh

echo $1

if [ $# != 1 ]; then
  echo "No argument will exit"
  exit 1
else
  echo "OK will proceed" 
fi


cd /home/centos

cp /home/centos/$1.war /home/tomcatapps
rm -rf /home/tomcatapps/$1
systemctl restart tomcat9
sleep 5
ls /home/tomcatapps/$1 -l

IATA and ICAO Codes

Androidアプリで航空会社マスタを起動時に読込、スタティックで保存するために使ってます。
人気度低いですが、正常稼働率100%で、プランはありません。無償で利用出来ます。

ドキュメント : https://api.rakuten.net/vacationist/api/iata-and-icao-codes

< コード例 Java OKHttp >


OkHttpClient client = new OkHttpClient();

Request request = new Request.Builder()
	.url("https://iatacodes-iatacodes-v1.p.rapidapi.com/api/v9/flights?bbox=46.01%2C-12.21%2C56.84%2C9.66")
	.get()
	.addHeader("x-rapidapi-key", "????????????????????????????")
	.addHeader("x-rapidapi-host", "iatacodes-iatacodes-v1.p.rapidapi.com")
	.build();

Response response = client.newCall(request).execute();

< レスポンス例 >

パラメータなしでリクエストして、756件の応答がありました。

AlmaLinux8 をVirtualBoxにインストール

昨年12月の CentOS8サポートの2021年での終了、後継の CentOS8 Streamの方向性が、FedoraとRHELの中間、実験的リリースで不安定なパッケージも含まれる可能性があるとのことなので、運用中のCentOS8の後継をどうしようかと悩んでました。

解説リンク

AlmaLinuxとRockyLinuxが対応するようなので、早速、AlmaLinuxをVirtualBoxのゲストにインストールしました。

パッケージの対応状況とか調べていきたく思ってます。

MySQL8 1億レコードを試す

飛行機の航跡データを1分間隔でAPIで取得して追加してます。

1回の追加レコード数が3500から9000位、検索を頻繁に行うカレントテーブルのレコードが多すぎると、検索、更新で速度パフォーマンスが劣化するので、カレントは4日分、4日より古いのは旧テーブルにMySQLのイベントで追加していってます。(4日より多い期間の検索は3テーブルをUNION ALLでつないだ仮想テーブルを SELECT DISTINCT してます)

ユーザーテーブルは利用中ユーザーのライブ地図、ビュー地図のAPI応答を保存していて、主にパストトラック線の描画、ADS-B応答の停止状況のチェックに使ってます。
検索結果にUNIONでマージされるので、更新インターバルが異なるデータからのビュー地図の表示が不自然になり、業務用途では統一性に欠け、目的不明瞭でばつな気がしますが、ホビー用途としては、全ユーザーの利用結果を含めたプレイバック再現が出来て、オープンデータ利用による機能向上の見本みたいなのになるかと思ってます。

旧テーブルはinnoDBのバッファープールを圧迫するといけないので エンジンはMyISAMにしてます。

カレントテーブルのレコード数は約2200万をキープ、旧テーブルは現在、約6300万で増え続けてるので、足して1億を超えた時に、パフォーマンスが劇的に劣化するようなことがあれば、保存期間を設定して古い追加時刻から削除していくつもりです。

検索処理でのスロークエリの発生状況も気になるところなので、Seleniumとか使ってテストしていきます。

< カレント履歴テーブル >

1分間隔で全世界のADS-B応答を取得した結果を蓄積
保存期間 : 4日

CREATE TABLE `h_pasttrack_all` (

	`CD_ICAO24` CHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO24機材識別コード' COLLATE 'utf8_general_ci',
	`NM_CALLSIGN` CHAR(10) NOT NULL DEFAULT '' COMMENT '機材コールサイン' COLLATE 'utf8_general_ci',
	`UTM_POSITION` INT(11) NULL DEFAULT '0' COMMENT 'ADS-B送信時刻',
	`UTM_LASTCONTACT` INT(11) NOT NULL DEFAULT '0' COMMENT '最終取得時刻',
	`LAT` FLOAT NOT NULL DEFAULT '-500' COMMENT '緯度',
	`LON` FLOAT NOT NULL DEFAULT '-500' COMMENT '経度',
	`ALT_BARO` FLOAT NOT NULL DEFAULT '0' COMMENT '気圧高度 (m)',
	`ALT_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地高度 (m)',
	`SPEED_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地速度 (m/s)',
	`DEG_TRUE` FLOAT NOT NULL DEFAULT '-1' COMMENT '飛行方向角',
	`RT_VERTICAL` FLOAT NOT NULL DEFAULT '-500' COMMENT '上昇下降率 (m/s)',
	`IS_ONGROUND` TINYINT(4) NOT NULL DEFAULT '0' COMMENT '地上 or 空中フラグ',
	`NM_SQUAWK` CHAR(4) NOT NULL DEFAULT '' COMMENT 'スコークコード' COLLATE 'utf8_general_ci',
	`CD_ACTYPE` CHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO機材コード' COLLATE 'utf8_general_ci',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	INDEX `h_pasttrack_all_LAT` (`LAT`) USING BTREE,
	INDEX `h_pasttrack_all_LON` (`LON`) USING BTREE,
	INDEX `h_pasttrack_all_IS_ONGROUND` (`IS_ONGROUND`) USING BTREE,
	INDEX `h_pasttrack_all_INM_SQUAWK` (`NM_SQUAWK`) USING BTREE,
	INDEX `h_pasttrack_all_UTM_POSITION` (`UTM_POSITION`) USING BTREE,
	INDEX `h_pasttrack_all_TM_ADD` (`TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_all_CD_ICAO24` (`CD_ICAO24`) USING BTREE,
	INDEX `h_pasttrackall_NM_CALLSIGN` (`NM_CALLSIGN`) USING BTREE,
	INDEX `h_pasttrack_all_CD_ICAO24_TM_ADD` (`CD_ICAO24`, `TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_all_LAT_LON_TM_ADD` (`LAT`, `LON`, `TM_ADD`) USING BTREE
)
COMMENT='OpenSky全機応答航跡履歴'
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;

< 旧履歴テーブル >

カレントテーブルの4日より前のレコードを蓄積
保存期間 : 現時点では未設定、レコードは増え続ける


        CREATE TABLE `h_pasttrack_old` (
	`CD_ICAO24` CHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO24機材識別コード' COLLATE 'utf8_general_ci',
	`NM_CALLSIGN` CHAR(10) NOT NULL DEFAULT '' COMMENT '機材コールサイン' COLLATE 'utf8_general_ci',
	`UTM_POSITION` INT(10) NULL DEFAULT '0' COMMENT 'ADS-B送信時刻',
	`UTM_LASTCONTACT` INT(10) NOT NULL DEFAULT '0' COMMENT '最終取得時刻',
	`LAT` FLOAT NOT NULL DEFAULT '-500' COMMENT '緯度',
	`LON` FLOAT NOT NULL DEFAULT '-500' COMMENT '経度',
	`ALT_BARO` FLOAT NOT NULL DEFAULT '0' COMMENT '気圧高度 (m)',
	`ALT_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地高度 (m)',
	`SPEED_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地速度 (m/s)',
	`DEG_TRUE` FLOAT NOT NULL DEFAULT '-1' COMMENT '飛行方向角',
	`RT_VERTICAL` FLOAT NOT NULL DEFAULT '-500' COMMENT '上昇下降率 (m/s)',
	`IS_ONGROUND` TINYINT(3) NOT NULL DEFAULT '0' COMMENT '地上 or 空中フラグ',
	`NM_SQUAWK` CHAR(4) NOT NULL DEFAULT '' COMMENT 'スコークコード' COLLATE 'utf8_general_ci',
	`CD_ACTYPE` CHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO機材コード' COLLATE 'utf8_general_ci',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	INDEX `h_pasttrack_all_LAT` (`LAT`) USING BTREE,
	INDEX `h_pasttrack_all_LON` (`LON`) USING BTREE,
	INDEX `h_pasttrack_all_IS_ONGROUND` (`IS_ONGROUND`) USING BTREE,
	INDEX `h_pasttrack_all_INM_SQUAWK` (`NM_SQUAWK`) USING BTREE,
	INDEX `h_pasttrack_all_UTM_POSITION` (`UTM_POSITION`) USING BTREE,
	INDEX `h_pasttrack_all_TM_ADD` (`TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_all_CD_ICAO24` (`CD_ICAO24`) USING BTREE,
	INDEX `h_pasttrackall_NM_CALLSIGN` (`NM_CALLSIGN`) USING BTREE,
	INDEX `h_pasttrack_all_CD_ICAO24_TM_ADD` (`CD_ICAO24`, `TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_all_LAT_LON_TM_ADD` (`LAT`, `LON`, `TM_ADD`) USING BTREE
)
COMMENT='OpenSky全機応答航跡履歴旧'
COLLATE='utf8_general_ci'
ENGINE=MyISAM
;

< ユーザーテーブル >

ユーザー設定デフォルト5秒間隔で指定した地図のバウンダリに存在する飛行機のADS=B応答を蓄積
保存期間 : 24時間

CREATE TABLE `h_pasttrack` (
	`ID` INT(10) NOT NULL AUTO_INCREMENT COMMENT 'シーケンス番号',
	`NM_SESSION` VARCHAR(100) NOT NULL DEFAULT '' COMMENT 'WEBサーバーセッションID' COLLATE 'utf8_general_ci',
	`CD_ICAO` VARCHAR(4) NOT NULL DEFAULT '' COMMENT 'ICAO航空会社コード, ICAO空港コード' COLLATE 'utf8_general_ci',
	`CD_ICAO24` CHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO24機材識別コード' COLLATE 'utf8_general_ci',
	`NM_CALLSIGN` VARCHAR(10) NOT NULL DEFAULT '' COMMENT '機材コールサイン' COLLATE 'utf8_general_ci',
	`UTM_POSITION` INT(10) NOT NULL DEFAULT '0' COMMENT 'ADS-B送信時刻',
	`UTM_LASTCONTACT` INT(10) NOT NULL DEFAULT '0' COMMENT '最終取得時刻',
	`LAT` FLOAT NOT NULL DEFAULT '-500' COMMENT '緯度',
	`LON` FLOAT NOT NULL DEFAULT '-500' COMMENT '経度',
	`ALT_BARO` FLOAT NOT NULL DEFAULT '0' COMMENT '気圧高度 (m)',
	`ALT_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地高度 (m)',
	`SPEED_GEO` FLOAT NOT NULL DEFAULT '0' COMMENT '対地速度 (m/s)',
	`DEG_TRUE` FLOAT NOT NULL DEFAULT '-1' COMMENT '飛行方向角',
	`RT_VERTICAL` FLOAT NOT NULL DEFAULT '-500' COMMENT '上昇下降率 (m/s)',
	`IS_ONGROUND` TINYINT(3) NOT NULL DEFAULT '0' COMMENT '地上 or 空中フラグ',
	`NM_SQUAWK` VARCHAR(6) NOT NULL DEFAULT '' COMMENT 'スコークコード' COLLATE 'utf8_general_ci',
	`CD_ACTYPE` VARCHAR(6) NOT NULL DEFAULT '' COMMENT 'ICAO機材コード' COLLATE 'utf8_general_ci',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	PRIMARY KEY (`ID`) USING BTREE,
	INDEX `h_pasttrack_NM_SESSION_CD_ICAO` (`NM_SESSION`, `CD_ICAO`) USING BTREE,
	INDEX `h_pasttrack_TM_ADD` (`TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_CD_ICAO24` (`CD_ICAO24`) USING BTREE,
	INDEX `h_pasttrack_NM_CALLSIGN` (`NM_CALLSIGN`) USING BTREE,
	INDEX `h_pasttrack_NM_LAT` (`LAT`) USING BTREE,
	INDEX `h_pasttrack_NM_LON` (`LON`) USING BTREE,
	INDEX `h_pasttrack_IS_ONGROUND` (`IS_ONGROUND`) USING BTREE,
	INDEX `h_pasttrack_NM_SQUAWK` (`NM_SQUAWK`) USING BTREE,
	INDEX `h_pasttrack_UTM_POSITION` (`UTM_POSITION`) USING BTREE,
	INDEX `h_pasttrack_CD_ICAO24_TM_ADD` (`CD_ICAO24`, `TM_ADD`) USING BTREE,
	INDEX `h_pasttrack_LAT_LON_TM_ADD` (`LAT`, `LON`, `TM_ADD`) USING BTREE
)
COMMENT='OpenSky応答航跡履歴'
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;

< パフォーマンス向上策として行ったこと >

1) 文字列のデータ型をVARCHARからCHARに変更 (CHARの方が効率がよいという説あり)
2) 検索条件になる列の複合インデックスの列順 (狭く絞れるのを先に置く)
3) 最初は、PRIMARY KEYにAUTO_INCREMENTの列を存在させたが、一説によると、AUTO_INCREMENTの採番が負荷、メモリ消費なので削除
4) 経緯度データの型はFLOATにしてサイズ節約(OpenSkyの応答もFLOATなのでDOUBLE, DECIMALを使って数mの精度にすることが、無理でそもそも扱ってるデータにそこまでの精度は要求されてない)