😽
自衛隊 大阪大規模接種センター（大阪会場）のWebサイトのUIが駄目なので、改善案を考えた。
高齢者のワクチン接種の予約のために、以下のサイトが解説されていますがUIが大変不便に感じました。
自衛隊 大阪大規模接種センター（大阪会場)
自治体番号の入力が求められるのですが、自治体番号を調べるにはリンク先のPDFから検索しないといけません。
65歳以上の高齢者の方には、大変めんどう、ITに疎い方には不便な作業だと感じました。
そこでプルダウンで選べるようにすれば、自治体番号の存在を気にしなくても、「お住いの自治体を選ぶ」の目的を達成できるのではと考えました。
下記コードの大元、ほとんどコピーさせていただきました。
自治体番号=全国地方公共団体という認識でいいと判断しました。
<html lang="ja">
<head>
<title>HTML 文書のサンプル</title>
</head>
<body>
<form style="text-align: center">
<p>都道府県</p>
<select id="prefectures" name="prefectures">
</select>
<p>市町村</p>
<select id="city" name="city" onFocus="change()">
</select>
<p>
<button type=button onclick="display()">
自治体番号を表示
</button>
<p>自治体番号： <span id="span1"></span></p>
</p>
</form>
</body>
</html>
<script >
var arr = [
{
"26": {
"id": "26",
"name": "京都府",
"short": "京都",
"kana": "キョウトフ",
"en": "kyoto",
"city":[
{"municipal_num":"261009","city":"京都市"},
{"municipal_num":"262013","city":"福知山市"},
{"municipal_num":"262021","city":"舞鶴市"},
{"municipal_num":"262030","city":"綾部市"},
{"municipal_num":"262048","city":"宇治市"},
{"municipal_num":"262056","city":"宮津市"},
{"municipal_num":"262064","city":"亀岡市"},
{"municipal_num":"262072","city":"城陽市"},
{"municipal_num":"262081","city":"向日市"},
{"municipal_num":"262099","city":"長岡京市"},
{"municipal_num":"262102","city":"八幡市"},
{"municipal_num":"262111","city":"京田辺市"},
{"municipal_num":"262129","city":"京丹後市"},
{"municipal_num":"262137","city":"南丹市"},
{"municipal_num":"262145","city":"木津川市"},
{"municipal_num":"263036","city":"大山崎町"},
{"municipal_num":"263222","city":"久御山町"},
{"municipal_num":"263435","city":"井手町"},
{"municipal_num":"263443","city":"宇治田原町"},
{"municipal_num":"263648","city":"笠置町"},
{"municipal_num":"263656","city":"和束町"},
{"municipal_num":"263664","city":"精華町"},
{"municipal_num":"263672","city":"南山城村"},
{"municipal_num":"264075","city":"京丹波町"},
{"municipal_num":"264636","city":"伊根町"},
{"municipal_num":"264652","city":"与謝野町"}
]
},
"27": {
"id": "27",
"name": "大阪府",
"short": "大阪",
"kana": "オオサカフ",
"en": "osaka",
"city":[
{"municipal_num":"271004","city":"大阪市"},
{"municipal_num":"271403","city":"堺市"},
{"municipal_num":"272027","city":"岸和田市"},
{"municipal_num":"272035","city":"豊中市"},
{"municipal_num":"272043","city":"池田市"},
{"municipal_num":"272051","city":"吹田市"},
{"municipal_num":"272060","city":"泉大津市"},
{"municipal_num":"272078","city":"高槻市"},
{"municipal_num":"272086","city":"貝塚市"},
{"municipal_num":"272094","city":"守口市"},
{"municipal_num":"272108","city":"枚方市"},
{"municipal_num":"272116","city":"茨木市"},
{"municipal_num":"272124","city":"八尾市"},
{"municipal_num":"272132","city":"泉佐野市"},
{"municipal_num":"272141","city":"富田林市"},
{"municipal_num":"272159","city":"寝屋川市"},
{"municipal_num":"272167","city":"河内長野市"},
{"municipal_num":"272175","city":"松原市"},
{"municipal_num":"272183","city":"大東市"},
{"municipal_num":"272191","city":"和泉市"},
{"municipal_num":"272205","city":"箕面市"},
{"municipal_num":"272213","city":"柏原市"},
{"municipal_num":"272221","city":"羽曳野市"},
{"municipal_num":"272230","city":"門真市"},
{"municipal_num":"272248","city":"摂津市"},
{"municipal_num":"272256","city":"高石市"},
{"municipal_num":"272264","city":"藤井寺市"},
{"municipal_num":"272272","city":"東大阪市"},
{"municipal_num":"272281","city":"泉南市"},
{"municipal_num":"272299","city":"四條畷市"},
{"municipal_num":"272302","city":"交野市"},
{"municipal_num":"272311","city":"大阪狭山市"},
{"municipal_num":"272329","city":"阪南市"},
{"municipal_num":"273015","city":"島本町"},
{"municipal_num":"273210","city":"豊能町"},
{"municipal_num":"273228","city":"能勢町"},
{"municipal_num":"273414","city":"忠岡町"},
{"municipal_num":"273619","city":"熊取町"},
{"municipal_num":"273627","city":"田尻町"},
{"municipal_num":"273660","city":"岬町"},
{"municipal_num":"273813","city":"太子町"},
{"municipal_num":"273821","city":"河南町"},
{"municipal_num":"273830","city":"千早赤阪村"}
]
},
"28": {
"id": "28",
"name": "兵庫県",
"short": "兵庫",
"kana": "ヒョウゴケン",
"en": "hyogo",
"city":[
{"municipal_num":"281000","city":"神戸市"},
{"municipal_num":"282014","city":"姫路市"},
{"municipal_num":"282022","city":"尼崎市"},
{"municipal_num":"282031","city":"明石市"},
{"municipal_num":"282049","city":"西宮市"},
{"municipal_num":"282057","city":"洲本市"},
{"municipal_num":"282065","city":"芦屋市"},
{"municipal_num":"282073","city":"伊丹市"},
{"municipal_num":"282081","city":"相生市"},
{"municipal_num":"282090","city":"豊岡市"},
{"municipal_num":"282103","city":"加古川市"},
{"municipal_num":"282120","city":"赤穂市"},
{"municipal_num":"282138","city":"西脇市"},
{"municipal_num":"282146","city":"宝塚市"},
{"municipal_num":"282154","city":"三木市"},
{"municipal_num":"282162","city":"高砂市"},
{"municipal_num":"282171","city":"川西市"},
{"municipal_num":"282189","city":"小野市"},
{"municipal_num":"282197","city":"三田市"},
{"municipal_num":"282201","city":"加西市"},
{"municipal_num":"282219","city":"丹波篠山市"},
{"municipal_num":"282227","city":"養父市"},
{"municipal_num":"282235","city":"丹波市"},
{"municipal_num":"282243","city":"南あわじ市"},
{"municipal_num":"282251","city":"朝来市"},
{"municipal_num":"282260","city":"淡路市"},
{"municipal_num":"282278","city":"宍粟市"},
{"municipal_num":"282286","city":"加東市"},
{"municipal_num":"282294","city":"たつの市"},
{"municipal_num":"283011","city":"猪名川町"},
{"municipal_num":"283657","city":"多可町"},
{"municipal_num":"283819","city":"稲美町"},
{"municipal_num":"283827","city":"播磨町"},
{"municipal_num":"284424","city":"市川町"},
{"municipal_num":"284432","city":"福崎町"},
{"municipal_num":"284467","city":"神河町"},
{"municipal_num":"284645","city":"太子町"},
{"municipal_num":"284815","city":"上郡町"},
{"municipal_num":"285013","city":"佐用町"},
{"municipal_num":"285854","city":"香美町"},
{"municipal_num":"285862","city":"新温泉町"}
]
}
}
];
window.onload = function(){ //ページを読み込んだ際に発動
for(var i=26;i<29;i++){ //大阪府、京都府、兵庫県のみ
let op = document.createElement("option");
var StringNum;//"01"のように文字として定義されているので文字数字を作成
if(i<10){
StringNum="0"+String(i);
}
else
{
StringNum=String(i);
}
op.value = arr[0][StringNum].name;
op.text = arr[0][StringNum].name;
document.getElementById("prefectures").appendChild(op);
}
}
function change()
{
if(document.getElementById("city").value!=null){//選択される都道府県が変更された際に市町村データをリセット
var element = document.getElementById("city");
while (element.firstChild)
{
element.removeChild(element.firstChild);
}
}
let op1 = document.createElement("option");
for(var i=26;i<29;i++)
{
var StringNum;
if(i<10){
StringNum="0"+String(i);
}
else
{
StringNum=String(i);
}
if(document.getElementById("prefectures").value==arr[0][StringNum].name)
{
var para=StringNum;//該当する都道府県のID（文字列）
}
}
for(var ii=0;ii<arr[0][para].city.length;ii++)//市町村プルダウンメニュー作成
{
let op1 = document.createElement("option");
op1.value = arr[0][para].city[ii].municipal_num;
op1.text = arr[0][para].city[ii].city;
document.getElementById("city").appendChild(op1);
}
}
function display()
{
const str = document.getElementById("city").value;
document.getElementById("span1").textContent = str;
}
</script>
追記
ScreenToGifという、画面操作を録画してGifファイルを作成できるフリーソフトが大変便利でした。今後、スライド資料作り等に重宝しそうです。
Discussion