五十音のボタンを並べる

 入力用に五十音のボタンを並べたい

htmlに書けばいいけどめんどくさいので処理を考える

aiueobutton.py

　とりあえず五十音の配列を作ってみる

　五十音の文字列でもいいけど後で見難いからね

aiueo = ["あいうえお",

         "かきくけこ",

         "さしすせそ",

         "たちつてと",

         "なにぬねの",

         "はひふへほ",

         "まみむめも",

         "やゆよ",

         "らりるれろ",

         "わをん",

         "がぎぐげご",

         "ざじずぜぞ",

         "だぢづでど",

         "ばびぶべぼ",

         "ぱぴぷぺぽ",

         "っゃゅょ"

]

でこれを回して、dictionaryに必要な要素を詰めて、配列にして返すファンクションを用意する

def getList():

    btn_list = []

    for row in aiueo:

        for character in row:

            data = {"cap":character, "class":"aiubtn"}

            btn_list.append(data)

   

    return btn_list

htmlで使うから表示用の文字とクラスくらいしか思いつかなかった

app.py

import aiueobutton

@app.route('/')

def home():

    return render_template("index.html",

                           aiueo_btn_list=aiueobutton.getList())

index.html

<div class="aiueo-area">

    {% for dic in aiueo_btn_list %}

        <span id={{dic.cap}} class="{{dic.class}}">{{dic.cap}}</span>

    {% endfor %}

</div>

style.css

.aiueo-area span {

    background-color: lightgray;

    color:whitesmoke;

    font-size: 24px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 30px;

    height: 30px;

    margin: 2px;

    margin-left: 0px;

    margin-right: 0px;

    cursor: pointer;

} 

としたら

はい！ボタンができました。

横の並びがうまく制御できてないけど

それはまた考えよう