HTS macam-macam

2020-05-262020-05-26

date.nager.at (祝日)

祝日カレンダーを作ることになり、海外の祝日が取得できるフリーのAPIを探してましたところ、見つけました。

APIKeyなし、リミットなし無償です。

< 出力例 >

[????@??????? ~]# http https://date.nager.at/api/v2/publicholidays/2020/JP
HTTP/1.1 200 OK
Content-Encoding: gzip
Content-Type: application/json; charset=utf-8
Date: Tue, 26 May 2020 01:59:57 GMT
Server: Microsoft-IIS/10.0
Strict-Transport-Security: max-age=2592000
Transfer-Encoding: chunked
Vary: Accept-Encoding

[
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-01-01", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "元日", 
        "name": "New Year's Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-01-13", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "成人の日", 
        "name": "Coming of Age Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-02-11", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "建国記念の日", 
        "name": "Foundation Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-04-29", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "昭和の日", 
        "name": "Shōwa Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-05-04", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "憲法記念日", 
        "name": "Constitution Memorial Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-05-04", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "みどりの日", 
        "name": "Greenery Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-05-05", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "こどもの日", 
        "name": "Children's Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-07-20", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "海の日", 
        "name": "Marine Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-08-11", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "山の日", 
        "name": "Mountain Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-09-21", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "(敬老の日", 
        "name": "Respect for the Aged Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-10-12", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "体育の日", 
        "name": "Health and Sports Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-11-03", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "文化の日", 
        "name": "Culture Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-11-23", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "勤労感謝の日", 
        "name": "Labour Thanksgiving Day", 
        "type": "Public"
    }, 
    {
        "counties": null, 
        "countryCode": "JP", 
        "date": "2020-12-23", 
        "fixed": false, 
        "global": true, 
        "launchYear": null, 
        "localName": "天皇誕生日", 
        "name": "The Emperor's Birthday", 
        "type": "Public"
    }
]

2020-05-17

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

2020-05-122020-05-16

jQuery Chosen でセレクトボックス

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

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

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

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

< 利用例 >

2020-05-102020-05-15

輸出入品目表

HSコードが素早く検索出来ます。

データはRESAS (内閣府地域経済分析システム)のAPIを使ってます。

< URL >

https://psn.saoline.co/hs20/

< 画面例 >

2020-05-102020-05-15

日本地図

市区町村や郵便番号を選んで、選んだ地区を中心とした地図を表示します。

Bootstrap4を使ってるのでレスポンシブです。

データはRESAS (内閣府地域経済分析システム)のAPIなどを使ってます。

< URL >

https://psn.saoline.co/jpinfo/

< 機能 >

地区選択を市区町村と郵便番号別地区で切替え
地図は、Leflet, Gppgle, Bing, Openlayerが選べる
Leafletは多数のレイヤーを切替え出来る
GeoJSONのマーカーを選んで表示出来る
調べた場所の現在の天気と天気予報がわかる

< 画面例 >

2020-05-102020-05-15

2020年版 UNLO地名コード

同様のものは昔作りましたが、データが古くなってきて新しく増えた都市や港がないので、最新のデータを利用しました。

Bootstrap4を使ったので、レスポンシブです。

セルクリックで地図、天気予報を下に表示します。

地図は、Leaflet, Yahoo, Bing, Google, OpenLayers, MapBox を選べますので、好み、用途に対応してます。

天気予報データは、OpenWeatherMapのAPIを使ってます。

ジオコーダーは、OpenCageのAPIを使ってます。

現在時刻用のタイムゾーンは、ipgeolocation.ioのAPIを使ってます。

APIは全てフリーライセンスのプランなので、利用リミットに達した場合、処理出来ないことがありますので、ご了承下さい。

< URL >

https://psn.saoline.co/unlo20/

[ セルクリックの動作 ]

UNLOコード列 : 天気予報を表示

地名列 : クリックした地名でジオコーダーして得た経緯度を中心とした地図を表示

ロケーション列 : 表示されている経緯度を中心とした地図を表示

< 画面例 >

2020-05-102020-05-10

Leaflet で GeoJSON のマーカーを表示

GeoJSONを使って多数のマーカーを地図で高速に表示出来るので、GoogleMapのAPIで使ってましたが、課金が多くなって来るので、Leafletへの代替中で調べて試したところ、下のようなので出来ました。

< コード例 >


      // ローカルのGeoJSONを読込 //
      const fnm = "GeoJSON/" + this.geojsonnm + ".json";
      
      // -- featuresを走査 -- //  
      $.getJSON(fnm, function (data) {
        let popuphtml = "";
        let icn;
        let geojson = L.geoJson(data, {
          onEachFeature: function (feature, layer) {
            // ポップアップのHTML //
            popuphtml = feature.properties.name + "<br>" +
                    feature.properties.zip + "<br>" +
                    feature.properties.addr + "<br>" +
                    feature.properties.tel;
            // HTMLをレイヤーにバインドする //
            layer.bindPopup(popuphtml);

            // PCの場合、マウスオーバーでポップアップさせる //
            if (!IS_TABLETUSER) {
              layer.on('mouseover', function (e) {
                this.openPopup();
              });
              layer.on('mouseout', function (e) {
                this.closePopup();
              });
            }

          }
          // マーカーをプロパティで記述したアイコンに変更 //
          , pointToLayer: function (feature, latlng) {

            if (feature.properties.icon !== "") {
              icn = L.icon({
                iconUrl: feature.properties.icon,
                //shadowUrl: 'leaf-shadow.png',
                iconSize: [20, 20]
              });

            }
            return L.marker(latlng, {icon: icn});
          }


        });
        // マップに追加 //
        geojson.addTo(lmap);

      });

< GeoJSON例 >

{
  "features": [
    {
      "type": "Feature",
      "properties": {
        "zip": "162-0845",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛省本庁",
        "unlo": "",
        "tel": "",
        "id": "28741",
        "tp": "",
        "addr": "新宿区市谷本村町5-1",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.7288,
          35.6928
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "239-0811",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛大学校",
        "unlo": "",
        "tel": "",
        "id": "28742",
        "tp": "",
        "addr": "横須賀市走水1-10-20",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.72196,
          35.25767
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "359-0042",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛医科大学校",
        "unlo": "",
        "tel": "",
        "id": "28743",
        "tp": "",
        "addr": "所沢市並木3-2",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.46762,
          35.80379
        ],
        "type": "Point"
      }
    },

< 地図表示例>

2020-05-102020-05-10

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": "動物性生産品（他の類に該当するものを除く。）"
    }
]

2020-05-102020-05-10