月: 2021年7月

jQuery JSONファイルの同期読込

投稿日: 投稿者:

jQueryであるJSONファイルを同期で読み込む必要がある場合に使ってます。
$.ajaxSetup, asyncのセットで出来ます。

[ コード例 ]


      $.ajaxSetup({async: false});     // 同期
      $.getJSON(geojsonfnmChart, function (data) {
        chartdata = data;
      });
      $.ajaxSetup({async: true});      // 同期解除

 

ここで教えていただきました。
https://jslob.repop.jp/2017/06/getjsonjson.html

Javascript forEach の活用

投稿日: 投稿者:

ECMA2015以降、forEachで配列の一括処理が出来て、コードがわかりやすくなるので使ってます。

[ コード例 ]


    const myturf = new MyTurf();
    const pushToArray = (ll, idx) => {

      if (idx > 0) {

        prevll = coordinates[idx - 1];
        // turf.jsで方向角を求める //
        tmpbearing = myturf.getBeaing(prevll, ll);
        // 時計式角度を航空式角度に変換 //
        tmpbearing = tmpbearing < 0 ? Number(tmpbearing) + Number(360) : tmpbearing;
        // アイコン用整数に四捨五入 //
        tmpbearing = Math.round(tmpbearing);

        barray.push(tmpbearing);
      }
    };
    
    // 位置配列を走査して方向角配列に追加して行く //
    coordinates.forEach((ll, idx) => pushToArray(ll, idx));

DOM操作を伴う場合、jQueryの$.eachの方がすっきり書けるので、jQueryを使ってます。
jQueryの場合、コールバックに渡す引数の要素番号が 先になり、forEachと逆です。

[ jQuery $.each 例 ]


$.each($("#" + itm["id"]).children("td"), function (j, itmc) {
  $(this).addClass("td_lsilver");
});

GoogleMap Javascript で ポリラインGeoJSON読込

投稿日: 投稿者:

GoogleMap JavascriptでGeoJSONファイルを読み込み、ポリラインを引いてみました。
線のスタイルが同じで、Futureがひとつの場合、かなり短く書けます。

[ コード例 ]


const geojsonfnm = "geojson/SimpleLine.json";

$.getJSON(geojsonfnm, function (data) {

      const geomes = data["geometry"]["coordinates"];


      // GeoJSON を描画 //
      let lines = gmapS.data.addGeoJson(data);
      linesThisG = lines;

      // 線の設定 //
      gmapS.data.setStyle({
        strokeColor: "#FFFF00", // 黄色
        strokeWeight: 2,
        geodesic: true         // 球面線
      });

});

[ geojson/SimpleLine.json の内容]

{
  geometry:{
    coordinates:[...]   <== ここに経緯度データが入ってる
    type:LineString
  }
  type:Feature
}

注意点として、Leafletでは type:Featureを省略しても使えましたが、GoogleMapの場合、厳密に評価するようで、Feature, Featuresがないとエラーになります。

[ Leafletで使えたGeoJSON ]

{
  crs:{...}
  coordinates:[...]
  type:LineString
}

MySQL ログの時刻をOSに合わす

投稿日: 投稿者:

MySQLのデフォルトのログの時刻がUTCでわかりにくいので、OSの時刻に合わせます。

[ my.cnf ]

log_timestamps=SYSTEM   <=== これを追加

[ 変更前 ]

時刻の末尾がZ

2021-07-24T00:27:57.759453Z 4 [System] [MY-013381] [Server] Server upgrade from '80023' to '80026' started.
2021-07-24T00:28:03.206784Z 4 [System] [MY-013381] [Server] Server upgrade from '80023' to '80026' completed.

[ 変更後 ]

時刻の末尾に +9.00がつく

2021-07-24T09:36:02.475995+09:00 4 [System] [MY-013381] [Server] Server upgrade from '80025' to '80026' completed.
2021-07-24T09:36:02.609224+09:00 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1 is enabled for channel mysql_main
2021-07-24T09:36:02.609856+09:00 0 [Warning] [MY-013746] [Server] A deprecated TLS version TLSv1.1 is enabled for channel mysql_main

MySQL8 初期設定 パスワードポリシー

投稿日: 投稿者:

MySQL8からユーザーのパスワードポリシーのデフォルトが厳しくなり、かんたんなパスワードが設定できなくなったので、my.cnfで永続的に設定しています。

[ デフォルトの状態 ]


mysql> SHOW variables like '%validate_password%';
+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password.check_user_name    | ON     |
| validate_password.dictionary_file    |        |
| validate_password.length             | 8      |
| validate_password.mixed_case_count   | 1      |
| validate_password.number_count       | 1      |
| validate_password.policy             | MEDIUM |
| validate_password.special_char_count | 1      |
+--------------------------------------+--------+

[ my.cnfに設定 ]


validate_password.policy=LOW
validate_password.length=4
validate_password.check_user_name=OFF

mysqld を再起動

[ 変更後の状態 ]

[root@???? ?????]# mysql -uroot -p -e "SHOW variables like '%validate_password%'";
Enter password: 
+--------------------------------------+-------+
| Variable_name                        | Value |
+--------------------------------------+-------+
| validate_password.check_user_name    | OFF   |
| validate_password.dictionary_file    |       |
| validate_password.length             | 4     |
| validate_password.mixed_case_count   | 1     |
| validate_password.number_count       | 1     |
| validate_password.policy             | LOW   |
| validate_password.special_char_count | 1     |
+--------------------------------------+-------+

Leaflet Javascript マーカーツールチップのカスタマイズ

投稿日: 投稿者:

 

 

 

 

 

 

Leaflet Javascript マーカーツールチップのカスタマイズについて備忘録しておきます。

1) スタイルの設定
2) ツールチップにスタイルとコンテンツをセット
3) マーカーにバインド

[ コード例 ]

// ツールチップスタイルのセット //
const tooltipStyleWP = {direction: 
            "right",
            offset: L.point(-30, 24), // x, y <= のオフセット位置
            opacity: 0.8,
            permanent: isPermanetTooltip || isPermanentTarget ? true : false,
            className: "waypointTTClass" + CLASS_TAIL

          };

// ツールチップ、スタイルとコンテントのセット //
const ttp = L.tooltip(tooltipStyleWP).setContent(feature.properties.ident);

// マーカーアイコンのセット //
icn = L.icon({
            iconUrl: feature.properties.icon,
            iconSize: [12, 12]
          });

// マーカーにバインド //
L.marker(latlng, {icon: icn}).bindTooltip(ttp);

 

[ className CSS例 ]


      /* 飛行機マーカーツールチップ */
      /* 暗色 */
      .aircraftTTClass {
        background: transparent;
        border: 1px solid #FFFFFF;
        font-size: 13px;
        color: #FFFFFF;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .aircraftTTClassL {
        background: #f2f2f2;
        border: 1px solid navy;
        font-size: 13px;
        color: #222222;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClassL::before {
        border-right-color: transparent;
      }

      /* Waypointマーカーツールチップ */
      /* 暗色 */
      .waypointTTClass {
        background: transparent;
        border: 1px solid #FFFF00;
        font-size: 11px;
        color: #FFFF00;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .waypointTTClassL {
        background: transparent;
        border: 1px solid navy;
        font-size: 11px;
        color: #868600;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClassL::before {
        border-right-color: transparent;
      }

[ 画面例 ]

 
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Mapbox Cookbook【電子書籍】[ Bill Kastanakis ]
価格：3858円 (2023/1/19時点)

楽天で購入

 

 

GoogleMap Javascript でAntimeridianライン (太平洋上日付変更線越え線の適正化)

投稿日: 投稿者:

Leafletで国際線飛行機の航跡ラインを描画したところ、日付変更線を通過するラインがおかしいままなので(プラグインをラップして使うと正しくなるようですが、まだ調べ切れてないので)、利用頻度少なく、課金もさほどないと思い、GoogleMapを使ってみました。

[ 描画例 ]

GoogleMap

Leaflet

GoogleMap Javascript でGreatCircleライン

投稿日: 投稿者:

Leafletで国際線飛行機の航跡ラインを描画したところ、長距離のラインが直線のままなので(プラグインをラップして使うと球面線になるようですが、まだ調べ切れてないので)、利用頻度少なく、課金もさほどないと思い、GoogleMapを使ってみました。

オプションの設定で、グレートサークルが適用されます。

[ ポリラインオプション設定例 ]


// 線の設定 //
gmapS.data.setStyle({
        strokeColor: "#FFFF00", // 黄色
        strokeWeight: 2,
        geodesic: true         // 球面線
      });

[ 描画画面例 ]
GoogleMap

Leaflet

GoogleChartの連続描画でメモリーリークと解消方法

投稿日: 投稿者:

GoogleChartをJavaScriptで利用していて、変化状況をリアルタイムで表示する折れ線グラフを作ってみたところ、メモリリークが激しいので、調べて直してみました。

1) チャートオブジェクトはグローバル変数にする
2) 描画する前にクリアする

[ コード例 ]


let gchart;

/**
 * 汎用折れ線チャートクラス
 * @type type
 */
class ChartOSInfo {

  /**
   * コンストラクタ
   */
  constructor(chartData, divid, tp, columnnm, columntitle) {
  -- 省略 -- 
  }

  -- 省略 --
  
   /**
   * 折れ線グラフ描画
   * @returns {undefined}
   */
  drawLineChart() {

    -- 省略 --

    // チャートの初期化 //
    if (gchart) {
      gchart.clearChart();
    }
    
    // チャートの描画 //
    gchart = new google.visualization.LineChart(document.getElementById(this.divid));
    gchart.draw(datatable, options);

    
  }

}

ここで教えていただきました。
https://base64.work/so/javascript/1461742

[ 利用例 ]

 

MySQL8 JSON TABLE で配列を扱う

投稿日: 投稿者:

MySQL8からJSONの配列をレコードとして扱えるので、使ってみました。

[ Table例 ]
空港の滑走路のマスタで、複数の滑走路をJSONにしてます。

CREATE TABLE `m_runway` (
	`CD_IATA` CHAR(3) NOT NULL DEFAULT '' COMMENT 'IATA空港コード' COLLATE 'utf8_general_ci',
	`CD_ICAO` CHAR(4) NOT NULL DEFAULT '' COMMENT 'ICAO空港コード' COLLATE 'utf8_general_ci',
	`LAT` DOUBLE(22,10) NOT NULL DEFAULT '500.0000000000' COMMENT '緯度',
	`LON` DOUBLE(22,10) NOT NULL DEFAULT '500.0000000000' COMMENT '経度',
	`RUNWAYS` JSON NULL DEFAULT NULL COMMENT 'JSON明細',
	`TM_ADD` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '追加時刻',
	INDEX `m_runway_CDIATA` (`CD_IATA`) USING BTREE,
	INDEX `m_runway_CDICAO` (`CD_ICAO`) USING BTREE,
	INDEX `m_runway_LAT` (`LAT`) USING BTREE,
	INDEX `m_runway_LON` (`LON`) USING BTREE
)
COMMENT='滑走路マスタ'
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;

[ JSON列のJSON ]


[
    {
        "name": "06",
        "width": {
            "km": 0.046,
            "nm": 0.025,
            "feet": 150,
            "mile": 0.028,
            "meter": 45.72
        },
        "length": {
            "km": 2.316,
            "nm": 1.25,
            "feet": 7598,
            "mile": 1.439,
            "meter": 2315.87
        },
        "surface": "Asphalt",
        "trueHdg": 51.2,
        "isClosed": false,
        "location": {
            "lat": 40.6469841,
            "lon": -75.45063
        },
        "hasLighting": true,
        "displacedThreshold": {
            "km": 0,
            "nm": 0,
            "feet": 0,
            "mile": 0,
            "meter": 0
        }
    },
    {
        "name": "13",
        "width": {
            "km": 0.046,
            "nm": 0.025,
            "feet": 150,
            "mile": 0.028,
            "meter": 45.72
        },
        "length": {
            "km": 1.766,
            "nm": 0.954,
            "feet": 5794,
            "mile": 1.097,
            "meter": 1766.01
        },
        "surface": "Asphalt",
        "trueHdg": 123.1,
        "isClosed": false,
        "location": {
            "lat": 40.6551933,
            "lon": -75.44975
        },
        "hasLighting": true,
        "displacedThreshold": {
            "km": 0,
            "nm": 0,
            "feet": 0,
            "mile": 0,
            "meter": 0
        }
    },
    {
        "name": "24",
        "width": {
            "km": 0.046,
            "nm": 0.025,
            "feet": 150,
            "mile": 0.028,
            "meter": 45.72
        },
        "length": {
            "km": 2.316,
            "nm": 1.25,
            "feet": 7598,
            "mile": 1.439,
            "meter": 2315.87
        },
        "surface": "Asphalt",
        "trueHdg": 231.2,
        "isClosed": false,
        "location": {
            "lat": 40.6600342,
            "lon": -75.42926
        },
        "hasLighting": true,
        "displacedThreshold": {
            "km": 0.152,
            "nm": 0.082,
            "feet": 499,
            "mile": 0.095,
            "meter": 152.1
        }
    },
    {
        "name": "31",
        "width": {
            "km": 0.046,
            "nm": 0.025,
            "feet": 150,
            "mile": 0.028,
            "meter": 45.72
        },
        "length": {
            "km": 1.766,
            "nm": 0.954,
            "feet": 5794,
            "mile": 1.097,
            "meter": 1766.01
        },
        "surface": "Asphalt",
        "trueHdg": 303.1,
        "isClosed": false,
        "location": {
            "lat": 40.6465263,
            "lon": -75.4322357
        },
        "hasLighting": true,
        "displacedThreshold": {
            "km": 0,
            "nm": 0,
            "feet": 0,
            "mile": 0,
            "meter": 0
        }
    }
]

[ Select SQL例 ]

NESTED PATH を指定


    SELECT
      r.CD_IATA,
      r.CD_ICAO,
      -500 AS LAT,
      -500 AS LON,
      detail.NM_RUNWAY,
      detail.HDG,
      ROUND(detail.FEET, 0) AS FEET, 
      ROUND(detail.METER, 0) AS METER
    FROM 
      m_runway r, 

      JSON_TABLE(RUNWAYS, '$[*]' 
      COLUMNS (
        `NM_RUNWAY` VARCHAR(100) PATH '$.name',
        HDG INT PATH '$.trueHdg',
        
        NESTED PATH '$.length' 
        COLUMNS (
          FEET FLOAT PATH '$.feet',
          METER FLOAT PATH '$.meter'
        )               
        )
      ) AS detail
    WHERE
      CD_ICAO = 'RJTT'

[ 結果 ]

+---------+---------+------+------+-----------+------+-------+-------+
| CD_IATA | CD_ICAO | LAT  | LON  | NM_RUNWAY | HDG  | FEET  | METER |
+---------+---------+------+------+-----------+------+-------+-------+
| HND     | RJTT    | -500 | -500 | 04        |   35 |  8215 |  2504 |
| HND     | RJTT    | -500 | -500 | 05        |   42 |  8215 |  2504 |
| HND     | RJTT    | -500 | -500 | 16L       |  150 | 11053 |  3369 |
| HND     | RJTT    | -500 | -500 | 16R       |  150 |  9862 |  3006 |
| HND     | RJTT    | -500 | -500 | 22        |  215 |  8215 |  2504 |
| HND     | RJTT    | -500 | -500 | 23        |  222 |  8215 |  2504 |
| HND     | RJTT    | -500 | -500 | 34L       |  330 |  9862 |  3006 |
| HND     | RJTT    | -500 | -500 | 34R       |  330 | 11053 |  3369 |
+---------+---------+------+------+-----------+------+-------+-------+