😽

自衛隊 大阪大規模接種センター(大阪会場)のWebサイトのUIが駄目なので、改善案を考えた。

10 min read

https://twitter.com/allforbigfire/status/1403779717736505346

高齢者のワクチン接種の予約のために、以下のサイトが解説されていますがUIが大変不便に感じました。

自衛隊 大阪大規模接種センター(大阪会場)

https://info.vc-osaka.liny.jp/info/top

自治体番号の入力が求められるのですが、自治体番号を調べるにはリンク先のPDFから検索しないといけません。
65歳以上の高齢者の方には、大変めんどう、ITに疎い方には不便な作業だと感じました。

そこでプルダウンで選べるようにすれば、自治体番号の存在を気にしなくても、「お住いの自治体を選ぶ」の目的を達成できるのではと考えました。

下記コードの大元、ほとんどコピーさせていただきました。

https://qiita.com/barcarunrun/items/9035838f068ef31095e0

自治体番号=全国地方公共団体という認識でいいと判断しました。

https://www.soumu.go.jp/denshijiti/code.html

<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

ログインするとコメントできます