月: 2020年5月

date.nager.at (祝日)

投稿日: 投稿者:

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

Home URL : https://date.nager.at/

Usage URL : https://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"
    }
]

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/

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

< 利用例 >

日本地図

投稿日: 投稿者:

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

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

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

< URL >

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

< 機能 >

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

< 画面例 >

Leaflet: グーグル衛星レイヤー

 

 

 

Leaflet : オープンストリートマップ

 

郵便番号検索タイプ : BingMap

 

 

 

 

GoogleMap : 航空写真ラベルなし : 東京近辺自衛隊駐屯地マーカー

2020年版 UNLO地名コード

投稿日: 投稿者:

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

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

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

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

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

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

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

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

< URL >

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

[ セルクリックの動作 ]

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

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

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

< 画面例 >

 

 

 

 

 

 

 

 

 

 

 

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"
      }
    },

< 地図表示例>

 

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

独習JavaScript 新版 [ CodeMafia 外村 将大 ]
価格：3278円（税込、送料無料) (2023/1/1時点)

楽天で購入

 

 

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

RESAS 市区町村コード API

投稿日: 投稿者:

仕事で市区町村コードのデータが必要になり、ため込んで更新するのも面倒なので探してたところ見つけました。

https://opendata.resas-portal.go.jp/docs/api/v1/cities.html