API – ページ 4 – Saoline Tips

GoogleMap Javascript でGreatCircleライン

投稿日: 2021-07-24 投稿者: Hisa

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

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

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


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

[ 描画画面例 ]
GoogleMap

Leaflet

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

Google Maps APIプログラミング入門改訂2版【電子書籍】[ 勝又　雅史 ]
価格：3168円 (2023/2/14時点)

楽天で購入

Mapbox Cookbook【電子書籍】[ Bill Kastanakis ]
価格：3858円 (2023/2/14時点)

楽天で購入

GoogleChartの連続描画でメモリーリークと解消方法

投稿日: 2021-07-24 投稿者: Hisa

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

[ 利用例 ]

date.nager.at (祝日)

投稿日: 2020-05-26 投稿者: Hisa

祝日カレンダーを作ることになり、海外の祝日が取得できるフリーの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"
    }
]

Leaflet で GeoJSON のマーカーを表示

投稿日: 2020-05-10 投稿者: Hisa

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時点)

楽天で購入

HP（エイチピー）ノートパソコン 14.0型薄型（Core i5/16GB/256GB/Windows 11/指紋認証/office付き） HP 14s-dq2000 シリーズ 515Y8PA-AAAB
価格：94800円（税込、送料別) (2023/1/23時点)

楽天で購入

かんたんJavaScript ECMAScript2015対応版（プログラミングの教科書） [ 高橋広樹 ]
価格：2838円（税込、送料無料) (2023/2/9時点)

楽天で購入

teraren.com 郵便番号API

投稿日: 2020-05-10 投稿者: Hisa

仕事で郵便番号のデータが必要になり、データの更新保存等手間なので、フリーのAPIがないかと探してたところ、見つけました。

https://postcode.teraren.com/doc

RESAS 市区町村コード API

投稿日: 2020-05-10 投稿者: Hisa

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

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

都市データパック 2022年版【電子書籍】[ 東洋経済新報社 ]
価格：17820円 (2022/12/27時点)

楽天で購入

RESAS 輸出入品目API

投稿日: 2020-05-10 投稿者: Hisa

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

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

4桁まで対応してます。

通関士教科書通関士完全攻略ガイド 2022年版【電子書籍】[ ヒューマンアカデミー ]
価格：3960円 (2023/2/2時点)

楽天で購入

OpenCage Geocorder

投稿日: 2020-05-10 投稿者: Hisa

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リクエスト/日となってます。