Q&A
選択された言語はどのように取得しているのでしょうか？
ここに質問の内容を詳しく書いてください。
ただいまflaskで翻訳アプリを作っています。
実現したいこと
ドロップダウンメニューから言語を選択して翻訳後、
ドロップダウンメニューの初期値を翻訳言語にしたい。
python
1#HTMLのほうのコード 2<select name="name"> 3 {% for lang in lang %} 4 <option value="{{ lang }}"> {{ lang }}</option> 5 {% endfor %} 6</select> 7 8#pythonのコード 9lang = {"ドイツ語": "de", "英語": "en", "スペイン語": "es", "フランス語": "fr", 10 "イタリア語": "it", "ポルトガル語": "pt", "日本語": "ja", "韓国語": "ko", "ヒンディー語": "hi"} 11 12#翻訳実行後、結果とともにページを再表示 13return render_template('translate.html', lang=lang.keys())
発生している問題・エラーメッセージ
selectedを追加しても一番最後の要素が自動で初期値になるだけで
困っています。
よろしくお願いいたします。
回答1件
0
ベストアンサー
どのような処理をしているのかわかりませんが、やりたいことのニュアンス的に以下の様な感じじゃないでしょうか？
python
1from flask import Flask, render_template 2 3app = Flask(__name__) 4 5 6@app.route('/') 7def index(): 8 langs = [ 9 {"display": "ドイツ語", "code": "de"}, 10 {"display": "英語", "code": "en"}, 11 {"display": "スペイン語", "code": "es"}, 12 {"display": "フランス語", "code": "fr"}, 13 {"display": "イタリア語", "code": "it"}, 14 {"display": "ポルトガル語", "code": "pt"}, 15 {"display": "日本語", "code": "ja", "selected": True}, 16 {"display": "韓国語", "code": "ko"}, 17 {"display": "ヒンディー語", "code": "hi"} 18 ] 19 20 return render_template('index.html', langs=langs) 21 22 23if __name__ == '__main__': 24 app.run() 25
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>おためし</title> 6</head> 7<body> 8<select name="name"> 9 {% for lang in langs %} 10 {% if lang.selected %} 11 <option value="{{ lang.code }}" selected> {{ lang.display }}</option> 12 {% else %} 13 <option value="{{ lang.code }}"> {{ lang.display }}</option> 14 {% endif %} 15 {% endfor %} 16</select> 17</body> 18</html>
selectedを追加しても一番最後の要素が自動で初期値になるだけで困っています。
selectedをなんとなく質問文のHTMLに書いても、全てにselectedが付いて、最後に見つけたselectedが選択されているって事になるだけじゃないですかね。
画面遷移が発生したりして選択言語が変わる場合も、似たような感じでどれが選択されているのかを渡せばやりたいことができると思います。
投稿2022/07/19 06:34
総合スコア2401
回答ありがとうございます！！！！
今で先なので戻り次第さっそく取り掛かります！
やりたいことはまさにこんな感じでございます(#^.^#)
なんとなく理解することができた気がします！
あとは"selected": Trueを動的に設定すれば大丈夫って感じですよねっ！
ちょっとどうやればいいのかわからないのでダメだったら教えてください(>_<)
なんとかできたんですけどコードに自信がありませんなのでちょっと見てくれませんか？
まずHTMLはvalue="{{ loop.index0 }}"にしてインデックスを取得しました。
それからpythonのほうでlanguage = request.form['name']で
インデックスを取得してprint(langs[int(language)]['code'])で言語コードを
取得して翻訳します。それからrender_templateで再読み込みする前に
def reset():
for i in range(9):
lang[i]['selected'] = False
のリセット関数で全部falseに変えてlangs[int(language)]['selected'] = Trueをしてます！
たぶん動いているんじゃないかと思いますが、理解出来ない部分があります。
valueにloop.index0はインデックスが欲しいから指定しているんだと思いますが、['name']という名前で受け取るものとして適切だと思えません。
コードが拡張されて複雑になったら修正失敗などの原因になる気がするので、jaやenなどのコードを指定して渡して貰った方が良いんじゃないかと思います。(貰ったcodeからindexを検索しましょう。)
for i in range(9)はlangsが9個だから9なんだと思いますが、配列の長さは`len(langs)`で取得可能なので、そちらを使った方が良いです。
10個になったり8個になったら、関係する場所全部直すことになります。
大抵の場合、いつかミスりますので、変更が不要な形にしましょう。
`lang[i]['selected'] = False`については、その上に`print(langs[int(language)]['code'])`と書いてあるので、langという配列なのかlangsという配列なのかがわかりません。
こういうよくわからないのを避けるために、動作する最小のコードを質問文に掲載していただく必要があります。
また、この部分は、なんでいちいちFalseに指定し直しているのか不明です。
特定のテンプレートにlangs配列を渡すなら、それが呼び出される関数でlangsを作成して、必要な部分にselectedを指定すれば良いと思います。
もしかしてlangsはグローバルなんでしょうか？
私が例で書いたコードの様にindexでlangsを作れば毎回同じ内容になります。
例のコードは`{"display": "日本語", "code": "ja", "selected": True},`と書いてある通り、問答無用で日本語がセレクトされていますが、このselectedを書かずに、langs定義後、指定されたcodeに従ってselectedを指定すればやりたいことができるんじゃないでしょうか？
FlaskはWebなので、グローバル変数を使うのはやめた方が良いです。
Webは複数同時にアクセスされる可能性があり、グローバル変数を使った場合、変数が想定通りの内容になっているか不明です。
デプロイするとき等にgunicornやmod_wsgiなどを使用すると思いますが、これらを使うとFlaskは複数プロセスで実行され、メモリ空間が別になり、また、そのプロセスも再起動を繰り返したりする可能性がありますので設計を見直した方が良いです。
お忙しいところ誠に恐縮でございます＞＜
codeからindexを検索する方法がわかりませんでした！！
あと、len(langs)にしたら動きました！ありがとうございます！！
lang[i]['selected'] = Falseは完全にスペルミスでございます。
それ以降のことはよくわからなかったんですけど、一回リセットしているのは
同じページから何度も言語を選択しなおして翻訳しなおししたいからです！
そのたびに同じページに再render_templateしてます。
あ..たぶん意味が分かりました！
確かにlangsは、importの下に書いていてグローバルになっています。
でもそうしないとスコープ的になんか厳しいんです＞＜
ひとまず本当にありがとうございます！
もうちょっと頑張ってみます。
すみません、できました＞＜
@app.route('/trans/', methods=['GET', 'POST'])
def trans():
langs = [
{"display": "ドイツ語", "code": "de"},
{"display": "英語", "code": "en"},
{"display": "スペイン語", "code": "es"},
{"display": "フランス語", "code": "fr"},
{"display": "イタリア語", "code": "it"},
{"display": "ポルトガル語", "code": "pt"},
{"display": "日本語", "code": "ja"},
{"display": "韓国語", "code": "ko"},
{"display": "ヒンディー語", "code": "hi"}
]
こういうことでよかったんですよね！！
できたなら良かったですね。
自己回答でもなんでも良いので質問を締めていただけますか。
あなたの回答
tips
プレビュー
