カテゴリー: JavaScript

GoogleMap Javascript でGreatCircleライン

投稿日: 投稿者:

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

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

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


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

[ 描画画面例 ]
GoogleMap

Leaflet

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 |
+---------+---------+------+------+-----------+------+-------+-------+

Javascript ES2015 で連想配列を検索

投稿日: 投稿者:

連想配列の検索がESですっきり短くできないかと、探してたところ見つけましたので、備忘録しておきます。

ここで教えて頂く : https://qiita.com/Nossa/items/4a425e57ec4b7eedb7cb

< コード例 >


   /**
   * 連想配列存在確認
   * @param {type} ary 連想配列
   * @param {type} cd HS4キーの検索対象値
   * @returns {Boolean} 存在 or Not
   */
  let isExistItmInArray = (ary, cd) => {
    
    // ES2015ですっきりさせる //
    const res = ary.some(e => e.HS4 === cd);
    return res;
    
    
    // 昔のやり方 //
    //let res = false;
    //$.each(ary, function (i, itm) {
    /*for (let i = 0; i < ary.length; i++) {
      //console.log(ary[i] + "%" + cd);
      //if (cd.indexOf(ary[i]["HS4"]) === 0) {
      if (ary[i]["HS4"] === cd) {
        res = true;
        break;
      }
    }
    return res;*/
  }

jQuery Chosen でセレクトボックス

投稿日: 投稿者:

セレクトボックスの項目が増えて、選びにくくなって来たので使ってみました。

ここで教えて頂きました : https://qiita.com/mtanabe/items/59dc6c8fea7d9e10093f

本家 : https://harvesthq.github.io/chosen/

プロパティ、イベント、何もいじらなくても、不満な部分解消出来てますが、何か不足発覚したら、ドキュメント見させて頂き、変更しようと思ってます。

< 利用例 >

Javascript ES6 テンプレートリテラル

投稿日: 投稿者:

JavascriptでES6を使い始めて、PHPのようにヒアドキュメントみたいなことが出来るのがわかり、使ってみました。

+ がなくなり、すっきりわかりやすくなったので、HTML tableタグの記述とかに使っていこうと思います。

< コード例 >


  /**
   * 中分類tableタグ
   * @param {type} caption
   * @returns {String}
   */
  getMiddleResultHTML (caption) {
    
    
       
    let html = `<table id='mrestbl' class='table table-striped table-bordered table-hover table-sm'>
    <caption style='caption-side: top;'>${caption}</caption>
    <thead>
    <tr style='text-align:center;' class='bg-dark text-white'>
    <th>No</th><th>CD</th><th>説明</th>
    </tr>
    </thead>
    <tbody>`;
    
    // tr走査してtd生成 //
    let curno;
    let curfunctitle = "";
    $.each(this.records, function (i, itm) {
      
      curno = Number(i + 1);
      
      let curhtml = `<tr class='curpo mtr'>
      <td class='text-right nocell' style='color:navy; border-right-color: #555555'>
      ${curno}
      </td>
      <td class='text-right' >${itm["itemCode2"]}</td>
      <td>${itm["itemName2"]}</td>
      </tr>`;
      
      html += curhtml;
      
    });
    html += "</tbody></table>" ;
    //console.log(html);
    
    return html;
    
  }

< JSONデータソース >

[
    {
        "itemCode1": 1,
        "itemName1": "動物（生きているものに限る。）及び動物性生産品",
        "itemCode2": 1,
        "itemName2": "動物（生きているものに限る。）"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物（生きているものに限る。）及び動物性生産品",
        "itemCode2": 2,
        "itemName2": "肉及び食用のくず肉"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物（生きているものに限る。）及び動物性生産品",
        "itemCode2": 3,
        "itemName2": "魚並びに甲殻類、軟体動物及びその他の水棲無脊椎動物"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物（生きているものに限る。）及び動物性生産品",
        "itemCode2": 4,
        "itemName2": "酪農品、鳥卵、天然はちみつ及び他の類に該当しない食用の動物性生産品"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物（生きているものに限る。）及び動物性生産品",
        "itemCode2": 5,
        "itemName2": "動物性生産品（他の類に該当するものを除く。）"
    }
]

Javascriptで曜日

投稿日: 投稿者:

たいていの場合、曜日の出力はサーバー側でMySQLのUDFとか、Javaのメソッドで行ってましたが、最初は曜日が必要なかったのですが、後から必要になり、サーバー側入れ替えが面倒とか、権限がないとかの場合もあるので、調べてたら出来ました。

ここで教えて頂く:　https://www.nishishi.com/javascript-tips/get-day-of-the-week.html

コード例

今更ながらアローを使い始める。


    // 日本語曜日関数 //
    let getDofWJ = (dt) => {
      let dtobj = new Date(dt);
      let wv = dtobj.getDay();
      return ["日", "月", "火", "水", "木", "金", "土"][wv];
    };

Javascript ES6 のクラスを使ってみる

投稿日: 投稿者:

IE11を使ってる人も多く、まだ変化が多いので、ECMA Scriptは使ってませんでしたが、Win7のサポート終了でIE11からEdgeへの移行もすすむと思いますので、最近、使い始めてみました。

まだ、Javaのクラスと同等な使い方出来なくて、とまどう部分も多いですが、コード量減らすことができて、重宝しております。

< 作ったコード例 >

あちこちに書いたAJaxの処理をクラスに入れてみました。


class MyAjax {
  
  /**
   * コンストラクタ
   * @param {type} url URL
   * @param {type} mapdata リクエストパラメータ
   * @param {type} datatype 応答データタイプ (デフォルトはjson)
   * @param {type} type リクエストメソッド (デフォルトはPOST)
   * @param {type} cache キャッシュ (デフォルトはなし)
   * @param {type} async　非同期 (デフォルトは同期)
   * @returns {MyAjax}
   */
  constructor(url, mapdata, datatype = "json", type = "POST", cache = false, async = false) {
    
    this.url = url;
    this.mapdata = mapdata;
    this.datatype = datatype;
    this.type = type;
    this.cache = cache;
    this.async = async;
  }
  
  // 実行 //
  exec() {
    
    let rtn;
    $.ajax({
      url: this.url,
      type: this.type,
      cache: this.cache,
      dataType: this.datatype,
      async: false,
      data: this.mapdata,
      success: function (jsnortxt) {
        rtn = jsnortxt;
      },
      error: function (xhr, ts, err) {
        rtn = "ERROR";
      }
    });
    return rtn;
  }

}

呼び出し側


// -C 検索
let aJax = new MyAjax("GetJPFromID", {tblid: tblid, mvtp: mvtp});
let katakata = [];
katakata = aJax.exec();

Javascript クラスの static がブラウザによってはエラーとなる

投稿日: 投稿者:

JavascriptのES6クラスについては、IE11で動作しない、ブラウザによっては動かないのがあるなどの理由で、利用をためらってましたが、

Windows10の普及でIE11もなくなると思うので使い始めました。

同じような重複したコードが排除出来て、うれしいですが、まだ仕様が確定してないのか、動かない部分ありましたので、備忘録しておきます。

Vilaldy, Brave, Firefox で動かなかったコード (Edge, Chromeでは動く)


static STATICTEXT = "スタティック";

 

動いたコード


static STATICTEXT () {
return "スタティック";
}