HSコードが素早く検索出来ます。
データはRESAS (内閣府地域経済分析システム)のAPIを使ってます。
< URL >
< 画面例 >
Semakin di depan
市区町村や郵便番号を選んで、選んだ地区を中心とした地図を表示します。
Bootstrap4を使ってるのでレスポンシブです。
データはRESAS (内閣府地域経済分析システム)のAPIなどを使ってます。
< URL >
https://psn.saoline.co/jpinfo/
< 機能 >
< 画面例 >
|
同様のものは昔作りましたが、データが古くなってきて新しく増えた都市や港がないので、最新のデータを利用しました。
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": "動物性生産品(他の類に該当するものを除く。)" } ]
仕事で郵便番号のデータが必要になり、データの更新保存等手間なので、フリーのAPIがないかと探してたところ、見つけました。
仕事で市区町村コードのデータが必要になり、ため込んで更新するのも面倒なので探してたところ見つけました。
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を検討してみます
コメントを投稿するにはログインしてください。