セレクトメニューの都道府県は毎回、作るよりストックしておくべし。
2021.12.13
駆け出しフロントエンドエンジニアさんや駆け出しコーダーさんの中にはお問い合わせなどで、都道府県を毎回、書いている人はいると思いますが、大体、同じことを何回もするのは無駄です。なので、自分専用の雛形を作っておくといいですよ。そうする事によって作業は結構、短縮されたりします。今回は自分がよく使う、セレクトメニューの都道府県をJSで都道府県リストを生成するように作りました。
繰り返しになりますが、こんな感じに自分が使用するデータや独自の関数はストックしておくと作業効率は上がります、毎回調べてプログラミングやコードを書くのは仕事上では手間になるので辞めた方が良いです。
最後にJSコードとGitHubのリンクを貼っときますので、ご自由使用くださいませ。
https://github.com/zip358/select_jp_ken
let useKendata = [
{'no':'01','name':'北海道'},
{'no':'02','name':'青森県'},
{'no':'03','name':'岩手県'},
{'no':'04','name':'宮城県'},
{'no':'05','name':'秋田県'},
{'no':'06','name':'山形県'},
{'no':'07','name':'福島県'},
{'no':'08','name':'茨城県'},
{'no':'09','name':'栃木県'},
{'no':'10','name':'群馬県'},
{'no':'11','name':'埼玉県'},
{'no':'12','name':'千葉県'},
{'no':'13','name':'東京都'},
{'no':'14','name':'神奈川県'},
{'no':'15','name':'新潟県'},
{'no':'16','name':'富山県'},
{'no':'17','name':'石川県'},
{'no':'18','name':'福井県'},
{'no':'19','name':'山梨県'},
{'no':'20','name':'長野県'},
{'no':'21','name':'岐阜県'},
{'no':'22','name':'静岡県'},
{'no':'23','name':'愛知県'},
{'no':'24','name':'三重県'},
{'no':'25','name':'滋賀県'},
{'no':'26','name':'京都府'},
{'no':'27','name':'大阪府'},
{'no':'28','name':'兵庫県'},
{'no':'29','name':'奈良県'},
{'no':'30','name':'和歌山県'},
{'no':'31','name':'鳥取県'},
{'no':'32','name':'島根県'},
{'no':'33','name':'岡山県'},
{'no':'34','name':'広島県'},
{'no':'35','name':'山口県'},
{'no':'36','name':'徳島県'},
{'no':'37','name':'香川県'},
{'no':'38','name':'愛媛県'},
{'no':'39','name':'高知県'},
{'no':'40','name':'福岡県'},
{'no':'41','name':'佐賀県'},
{'no':'42','name':'長崎県'},
{'no':'43','name':'熊本県'},
{'no':'44','name':'大分県'},
{'no':'45','name':'宮崎県'},
{'no':'46','name':'鹿児島県'},
{'no':'47','name':'沖縄県'},
];
document.getElementById("ken").insertAdjacentHTML('afterbegin',(function(ken){
let str = '';
for (const key in ken) {
str+= '<option value=' + ken[key].no + '>' + ken[key].name +'</option>';
}
return str;
}(useKendata)));
タグ
01, 39, github, JS, let, name, no, useKendata, エンジニア, エンド, お問い合わせ, コーダー, コード, こと, ご自由, ストック, セレクト, データ, プログラミング, フロント, メニュー, リスト, リンク, 中, 事, 人, 今回, 仕事, 何回, 作業, 使用, 効率, 北海, 大体, 専用, 感じ, 手間, 方, 最後, 毎回, 無駄, 生成, 短縮, 自分, 都道府県, 関数, 雛形, 駆け出し,
都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。
2020.03.09
JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。
デモ8：： https://zip358.com/tool/demo8/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="common.js"></script>
<title>Document</title>
</head>
<body onload="ken()">
<object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
<a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png"></a><br>
データ引用元：<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>{
"kenmei":[
{"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
{"id":"2","ken":"青森県","eiji":"AOMORI"},
{"id":"3","ken":"岩手県","eiji":"IWATE"},
{"id":"4","ken":"宮城県","eiji":"MIYAGI"},
{"id":"5","ken":"秋田県","eiji":"AKITA"},
{"id":"6","ken":"山形県","eiji":"YAMAGATA"},
{"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
{"id":"8","ken":"茨城県","eiji":"IBARAKI"},
{"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
{"id":"10","ken":"群馬県","eiji":"GUNMA"},
{"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
{"id":"12","ken":"千葉県","eiji":"CHIBA"},
{"id":"13","ken":"東京都","eiji":"TOKYO"},
{"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
{"id":"15","ken":"新潟県","eiji":"NIIGATA"},
{"id":"16","ken":"富山県","eiji":"TOYAMA"},
{"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
{"id":"18","ken":"福井県","eiji":"HUKUI"},
{"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
{"id":"20","ken":"長野県","eiji":"NAGANO"},
{"id":"21","ken":"岐阜県","eiji":"GUFU"},
{"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
{"id":"23","ken":"愛知県","eiji":"AICHI"},
{"id":"24","ken":"三重県","eiji":"MIE"},
{"id":"25","ken":"滋賀県","eiji":"SHIGA"},
{"id":"26","ken":"京都府","eiji":"KYOTO"},
{"id":"27","ken":"大阪府","eiji":"OSAKA"},
{"id":"28","ken":"兵庫県","eiji":"HYOGO"},
{"id":"29","ken":"奈良県","eiji":"NARA"},
{"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
{"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
{"id":"32","ken":"島根県","eiji":"SHIMANE"},
{"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
{"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
{"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
{"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
{"id":"37","ken":"香川県","eiji":"KAGAWA"},
{"id":"38","ken":"愛媛県","eiji":"EHIME"},
{"id":"39","ken":"高知県","eiji":"KOUCHI"},
{"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
{"id":"41","ken":"佐賀県","eiji":"SAGA"},
{"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
{"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
{"id":"44","ken":"大分県","eiji":"OOITA"},
{"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
{"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
{"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
]
}
function ken() {
$.getJSON("ken.json", function (json) {
var svg_ken = document.getElementById('svg_ken').contentDocument;
var ken = $(svg_ken);
ken.find('path').attr('fill', '#fff');
////
for (var i = 0; i < 47; i++) {
ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
});
}
////
for (var i = 0; i < 47; i++) {
ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
function () {
$(this).attr('fill', '#4080ff');
},
function () {
$(this).attr('fill', '#fff');
});
}
});
}タグ
358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,
?Ponanza（ポナンザ）の作成者さんが作ったお天気のアレを真似たひとり用。
2020.02.22
Ponanza（ポナンザ）の作成者さんが作ったお天気のアレを真似たひとり使用？ものです。下記のものを作りました。開発者の場合、自分で作りたい衝動にかられると思います。まんまと駆られて作りました…なので考え方をお裾分けです。今までQiitaで公開したソースコードも必要になりますので、リンクを貼っときます。そしてメインのソースコードは下記になります（ Twitterのoauthライブラリを呼び出しが必要になります。 ）。
※個人の開発者様用なので位置情報は引っ張って来てません、天気の都道府県を変更されるか、Twitterの位置情報を使用し天気のAPIへ投げるなりしてください（本家はIP情報から位置情報を特定しようとしているようです）。乱暴な説明ですが駆け出しのプログラマーじゃない限りできると思います。
本家はこちら
https://note.com/issei_y/n/ne128a0cf27ca
追記：ソースコードをComposerで使用できるようにしました。
https://qiita.com/zip358com/items/8c1a128e24cc33ca7ca7
composer require zip358/tw_name_change<?php
require_once ("vendor/autoload.php");
require_once ("moon.php");
require_once ("tenki.php");
use Abraham\TwitterOAuth\TwitterOAuth;
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
$user_data=$connection->get("users/show",["screen_name"=>$user_screen_name]);
$name = $user_data->name;
date_default_timezone_set('Asia/Tokyo');
$icons = moon::$icon + tenki::$icon + array("@"=>"@");
$year = date("Y");
$mon = (int)date("m");
$day = (int)date("d");
$H = (int)date("H");
if($H>=6 and $H<=17){
tenki::main();
tenki::$url = "https://api.openweathermap.org/data/2.5/weather?id=".tenki::$ken->kochi["id"]."&appid=".tenki::$appid;
tenki::api();
$chg = tenki::$icon[str_replace("n","d",tenki::$response->weather[0]["icon"])];
}else{
moon::main($year,$mon,$day);
$chg = moon::icon();
}
foreach($icons as $key=>$val){
if(preg_match("/$val/",$name)){
$hit = $val;
}
}
$name = str_replace("$hit",$chg,$name);
$connection->post("account/update_profile", ["name" =>$name]);
タグ
0, 128, 27, API, ca, cf, com, https, IP, issei, ne, note, oauth, Ponanza, qiita, Twitter, アレ, お裾分け, コード, こちら, ソース, ひとり, ひとり用, プログラマー, ボナンザ, メイン, もの, ライブラリ, リンク, 下記, 位置, 作成者, 使用, 個人, 公開, 場合, 変更, 天気, 必要, 情報, 本家, 特定, 考え方, 自分, 衝動, 説明, 都道府県, 開発者, 限り, 駆け出し,
天気予報を取得するアレを使用してみた（Openweathermap_api）。
2020.02.19
ご自由にお使いください。尚、openweathermap.orgより
アカウントを作成後、APIKEYを取得しお使いください。
下記のソースコードをコピーしての可変等は可能です。
余談
天気予報の絵文字が合致していていないかもしれません。
また都道府県のIDもズレている場合、お好みで変更ください。
ZIPコードで情報を取得するとより正確な天気予報となるそうです。
下記のコードを実行するとこんな感じになります。
ソースコードはこんな感じになります。
<?php
class Openweathermap_api{
public $url = "https://api.openweathermap.org/data/2.5/weather?id=";
public $appid = "apikey";
public $ken ="";
public $response ="";
public $icon = array(
"01d"=>"?",
"02d"=>"?",
"03d"=>"?",
"04d"=>"?",//?
"09d"=>"?",
"010d"=>"?",
"011d"=>"?",
"013d"=>"?",
"050d"=>"?",
);
function __construct()
{
$this->ken = (object)(json_decode(@file_get_contents("ken.json"),true));
}
function api(){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $this->url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$this->response = (object)json_decode(curl_exec($ch),true);
curl_close($ch);
}
}
$tenki = New Openweathermap_api();
$tenki->url = "https://api.openweathermap.org/data/2.5/weather?id=".$tenki->ken->kochi["id"]."&appid=".$tenki->appid;
$tenki->api();
print($tenki->icon[str_replace("n","d",$tenki->response->weather[0]["icon"])]);
var_dump($tenki->response);{
"hokkaido": {
"id": "2130037",
"kenmei": "北海道",
"kenfurigana": "ほっかいどう"
},
"aomori": {
"id": "2130656",
"kenmei": "青森県",
"kenfurigana": "あおもり"
},
"iwate": {
"id": "2112518",
"kenmei": "岩手県",
"kenfurigana": "いわて"
},
"miyagi": {
"id": "2111888",
"kenmei": "宮城県",
"kenfurigana": "みやぎ"
},
"akita": {
"id": "2113124",
"kenmei": "秋田県",
"kenfurigana": "あきた"
},
"yamagata": {
"id": "2110554",
"kenmei": "山形県",
"kenfurigana": "やまがた"
},
"fukushima": {
"id": "2112923",
"kenmei": "福島県",
"kenfurigana": "ふくしま"
},
"ibaraki": {
"id": "2112669",
"kenmei": "茨城県",
"kenfurigana": "いばらき"
},
"tochigi": {
"id": "1850310",
"kenmei": "栃木県",
"kenfurigana": "とちぎ"
},
"gunma": {
"id": "1863501",
"kenmei": "群馬県",
"kenfurigana": "ぐんま"
},
"saitama": {
"id": "1853226",
"kenmei": "埼玉県",
"kenfurigana": "さいたま"
},
"chiba": {
"id": "2113014",
"kenmei": "千葉県",
"kenfurigana": "ちば"
},
"tokyo": {
"id": "1850144",
"kenmei": "東京都",
"kenfurigana": "とうきょう"
},
"kanagawa": {
"id": "1860291",
"kenmei": "神奈川県",
"kenfurigana": "かながわ"
},
"niigata": {
"id": "1855429",
"kenmei": "新潟県",
"kenfurigana": "にいがた"
},
"toyama": {
"id": "1849872",
"kenmei": "富山県",
"kenfurigana": "とやま"
},
"ishikawa": {
"id": "1861387",
"kenmei": "石川県",
"kenfurigana": "いしかわ"
},
"fukui": {
"id": "1863983",
"kenmei": "福井県",
"kenfurigana": "ふくい"
},
"yamanashi": {
"id": "1848649",
"kenmei": "山梨県",
"kenfurigana": "やまなし"
},
"nagano": {
"id": "1856210",
"kenmei": "長野県",
"kenfurigana": "ながの"
},
"gifu": {
"id": "1863640",
"kenmei": "岐阜県",
"kenfurigana": "ぎふ"
},
"shizuoka": {
"id": "1851715",
"kenmei": "静岡県",
"kenfurigana": "しずおか"
},
"aichi": {
"id": "1865694",
"kenmei": "愛知県",
"kenfurigana": "あいち"
},
"mie": {
"id": "1857352",
"kenmei": "三重県",
"kenfurigana": "みえ"
},
"shiga": {
"id": "1852553",
"kenmei": "滋賀県",
"kenfurigana": "しが"
},
"kyoto": {
"id": "1857907",
"kenmei": "京都府",
"kenfurigana": "きょうと"
},
"osaka": {
"id": "1853909",
"kenmei": "大阪府",
"kenfurigana": "おおさか"
},
"hyogo": {
"id": "1862047",
"kenmei": "兵庫県",
"kenfurigana": "ひょうご"
},
"nara": {
"id": "1855608",
"kenmei": "奈良県",
"kenfurigana": "なら"
},
"wakayama": {
"id": "1848938",
"kenmei": "和歌山県",
"kenfurigana": "わかやま"
},
"tottori": {
"id": "1849890",
"kenmei": "鳥取県",
"kenfurigana": "とっとり"
},
"shimane": {
"id": "1852442",
"kenmei": "島根県",
"kenfurigana": "しまね"
},
"okayama": {
"id": "1854381",
"kenmei": "岡山県",
"kenfurigana": "おかやま"
},
"hiroshima": {
"id": "1862413",
"kenmei": "広島県",
"kenfurigana": "ひろしま"
},
"yamaguchi": {
"id": "1848681",
"kenmei": "山口県",
"kenfurigana": "やまぐち"
},
"tokushima": {
"id": "1850157",
"kenmei": "徳島県",
"kenfurigana": "とくしま"
},
"kagawa": {
"id": "1860834",
"kenmei": "香川県",
"kenfurigana": "かがわ"
},
"ehime": {
"id": "1864226",
"kenmei": "愛媛県",
"kenfurigana": "えひめ"
},
"kochi": {
"id": "1859133",
"kenmei": "高知県",
"kenfurigana": "こうち"
},
"fukuoka": {
"id": "1863958",
"kenmei": "福岡県",
"kenfurigana": "ふくおか"
},
"saga": {
"id": "1853303",
"kenmei": "佐賀県",
"kenfurigana": "さが"
},
"nagasaki": {
"id": "1856156",
"kenmei": "長崎県",
"kenfurigana": "ながさき"
},
"kumamoto": {
"id": "1858419",
"kenmei": "熊本県",
"kenfurigana": "くまもと"
},
"oita": {
"id": "1854484",
"kenmei": "大分県",
"kenfurigana": "おおいた"
},
"miyazaki": {
"id": "1856710",
"kenmei": "宮崎県",
"kenfurigana": "みやざき"
},
"kagoshima": {
"id": "1860825",
"kenmei": "鹿児島県",
"kenfurigana": "かごしま"
},
"okinawa": {
"id": "1854345",
"kenmei": "沖縄県",
"kenfurigana": "おきなわ"
}
}タグ
2.5, API, APIKEY, appid, class, data, ID, lt, Openweathermap, org, php, pub, public, quot, url, weather, zip, アカウント, アレ, お好み, コード, コピー, ご自由, ズレ, ソース, 下記, 予報, 余談, 作成, 使用, 取得, 可能, 合致, 場合, 変更, 天気, 実行, 情報, 感じ, 正確, 絵文字, 都道府県,