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

RESAS 輸出入品目API

仕事でHSコード(輸出入品目)のデータが必要になり、探してましたところ見つけました。

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

4桁まで対応してます。

OpenCage Geocorder

GeocorderのAPIはGoogleを使ってましたが、課金されるので、フリーなのを探してたところ見つけました。

SDKも多数あってチュートリアルも詳しいです。https://opencagedata.com/code

経緯度を渡すと、タイムゾーンも取得できます。
日本の郵便番号を渡すと、誤結果が多いので地名で渡してます。

デモページでのレスポンス
OpenCage Geocorder : https://opencagedata.com/

HTTP Status code: 200

HTTP Headers:
  Content-Type: application/json; charset=utf-8
  access-control-allow-origin: *
  X-RateLimit-Limit: 2500
  X-RateLimit-Remaining: 2499
  X-RateLimit-Reset: 1589155200

Content:
{
  "documentation": "https://opencagedata.com/api",
  "licenses": [
    {
      "name": "see attribution guide",
      "url": "https://opencagedata.com/credits"
    }
  ],
  "rate": {
    "limit": 2500,
    "remaining": 2499,
    "reset": 1589155200
  },
  "results": [
    {
      "annotations": {
        "DMS": {
          "lat": "31° 47' 33.88056'' N",
          "lng": "35° 13' 4.46736'' E"
        },
        "MGRS": "36RYA0998619605",
        "Maidenhead": "KM71ot60dg",
        "Mercator": {
          "x": 3920439.541,
          "y": 3713626.637
        },
        "OSM": {
          "edit_url": "https://www.openstreetmap.org/edit?node=2754824262#map=17/31.79274/35.21791",
          "note_url": "https://www.openstreetmap.org/note/new#map=17/31.79274/35.21791&layers=N",
          "url": "https://www.openstreetmap.org/?mlat=31.79274&mlon=35.21791#map=17/31.79274/35.21791"
        },
        "UN_M49": {
          "regions": {
            "ASIA": "142",
            "IL": "376",
            "WESTERN_ASIA": "145",
            "WORLD": "001"
          },
          "statistical_groupings": [
            "MEDC"
          ]
        },
        "callingcode": 972,
        "currency": {
          "alternate_symbols": [
            "ש״ח",
            "NIS"
          ],
          "decimal_mark": ".",
          "html_entity": "₪",
          "iso_code": "ILS",
          "iso_numeric": "376",
          "name": "Israeli New Sheqel",
          "smallest_denomination": 10,
          "subunit": "Agora",
          "subunit_to_unit": 100,
          "symbol": "₪",
          "symbol_first": 1,
          "thousands_separator": ","
        },
        "flag": "🇮🇱",
        "geohash": "sv9hc7syhtphz8kd165p",
        "qibla": 157.26,
        "roadinfo": {
          "drive_on": "right",
          "road": "דויד חזן",
          "speed_in": "km/h"
        },
        "sun": {
          "rise": {
            "apparent": 1589078820,
            "astronomical": 1589073300,
            "civil": 1589077200,
            "nautical": 1589075340
          },
          "set": {
            "apparent": 1589127900,
            "astronomical": 1589133360,
            "civil": 1589129460,
            "nautical": 1589131380
          }
        },
        "timezone": {
          "name": "Asia/Jerusalem",
          "now_in_dst": 1,
          "offset_sec": 10800,
          "offset_string": "+0300",
          "short_name": "IDT"
        },
        "what3words": {
          "words": "とつじょ・はずれて・あなぐま"
        }
      },
      "bounds": {
        "northeast": {
          "lat": 31.7928446,
          "lng": 35.2180076
        },
        "southwest": {
          "lat": 31.7926446,
          "lng": 35.2178076
        }
      },
      "components": {
        "ISO_3166-1_alpha-2": "IL",
        "ISO_3166-1_alpha-3": "ISR",
        "_category": "building",
        "_type": "building",
        "city": "エルサレム",
        "continent": "Asia",
        "country": "イスラエル",
        "country_code": "il",
        "house_number": "11",
        "neighbourhood": "קרית בעלז",
        "road": "דויד חזן",
        "state": "מחוז ירושלים",
        "suburb": "הבוכרים"
      },
      "confidence": 10,
      "formatted": "דויד חזן 11, エルサレム, イスラエル",
      "geometry": {
        "lat": 31.7927446,
        "lng": 35.2179076
      }
    }
  ],
  "status": {
    "code": 200,
    "message": "OK"
  },
  "stay_informed": {
    "blog": "https://blog.opencagedata.com",
    "twitter": "https://twitter.com/OpenCage"
  },
  "thanks": "For using an OpenCage API",
  "timestamp": {
    "created_http": "Sun, 10 May 2020 01:59:15 GMT",
    "created_unix": 1589075955
  },
  "total_results": 1
}

 

フリーでの制限は、1リクエスト/秒, 2500リクエスト/日 となってます。

ケータイ用インドネシア語辞典 2020年版

昔、公開したインドネシア語辞書ページが、都合によりドメイン移転することになり、移転先用の改修を試みましたが、設計が古くうまく動かないので、リニューアルしました。

見た目、機能はあまり変わりません。

旧版との違いとして、検索結果はメモとして端末側で保存するので、自分で消さない限り、ずっと残るので、学習用単語カードな使い方ができるかと思います。

旧版からの追加機能としては、単語の音声出力が出来ます。

特徴としては、

1) 印 => 日 検索で、ローマ字が出る
2) 日 => 印 検索で、ひらがな、ローマ字が使える
3) 検索結果をローカルに記憶して、一覧で見れる

だけです。

辞書データは下サイトの運営者作成のを、使わせて頂いてます。

https://indo-ka.sakura.ne.jp/

< URL >

印日 : https://psn.saoline.co/kamus20/katainp.jsp

日印 : https://psn.saoline.co/kamus20/tangoinp.jsp

< 画面例 >

印日

日印

メモ