HSコードが素早く検索出来ます。
データはRESAS (内閣府地域経済分析システム)のAPIを使ってます。
< URL >
< 画面例 >

品目表

品目検索
Semakin di depan

市区町村や郵便番号を選んで、選んだ地区を中心とした地図を表示します。
Bootstrap4を使ってるのでレスポンシブです。
データはRESAS (内閣府地域経済分析システム)のAPIなどを使ってます。
< URL >
https://psn.saoline.co/jpinfo/
< 機能 >
< 画面例 >

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

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

郵便番号検索タイプ : BingMap

GoogleMap : 航空写真ラベルなし : 東京近辺自衛隊駐屯地マーカー
|
|
同様のものは昔作りましたが、データが古くなってきて新しく増えた都市や港がないので、最新のデータを利用しました。
Bootstrap4を使ったので、レスポンシブです。
セルクリックで地図、天気予報を下に表示します。
地図は、Leaflet, Yahoo, Bing, Google, OpenLayers, MapBox を選べますので、好み、用途に対応してます。
天気予報データは、OpenWeatherMapのAPIを使ってます。
ジオコーダーは、OpenCageのAPIを使ってます。
現在時刻用のタイムゾーンは、ipgeolocation.ioのAPIを使ってます。
APIは全てフリーライセンスのプランなので、利用リミットに達した場合、処理出来ないことがありますので、ご了承下さい。
< URL >
https://psn.saoline.co/unlo20/
[ セルクリックの動作 ]
UNLOコード列 : 天気予報を表示
地名列 : クリックした地名でジオコーダーして得た経緯度を中心とした地図を表示
ロケーション列 : 表示されている経緯度を中心とした地図を表示
< 画面例 >


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で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": "動物性生産品(他の類に該当するものを除く。)"
}
]
仕事で市区町村コードのデータが必要になり、ため込んで更新するのも面倒なので探してたところ見つけました。
https://opendata.resas-portal.go.jp/docs/api/v1/cities.html

|
|
仕事でHSコード(輸出入品目)のデータが必要になり、探してましたところ見つけました。
https://opendata.resas-portal.go.jp/docs/api/v1/tradeInfoItemTypes/middle.html
4桁まで対応してます。

|
|
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リクエスト/日 となってます。
TimezoneのAPIはGoogleを使ってましたが、課金されるので、フリーなのを探してたところ見つけました。
ipgeolocation Timezone API : https://ipgeolocation.io/timezone-api.html

1K/日, 30K/月 なので、今のところ収まりますが、アクセスが増えたら、BRONZEを検討してみます

コメントを投稿するにはログインしてください。