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;
      }  

[ 画面例 ]

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

[ 利用例 ]