質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

2回答

1912閲覧

Pythonで、".join"を使用し、文字列連結をした場合の改行の記載方法。

yujin1202

総合スコア61

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2021/04/20 09:38

単純な事なのでしょうが(改行方法です。)、ハマってしまったので教えてください。

こんな様なWebアプリケーションを、Python+Flaskで作成しております。
イメージ説明

行きたい国を選んで、チェックボックスをチェックして、送信ボタンをクリックすると、下記の様に表示させたいと思っております。

イメージ説明

下記の様に、Pythonのコードと、HTML(index2)を書いたのですが、上記の様に縦に記載されずに、こんな風に横に記載されます。
Afgahanistan / Australia / France

勿論、pythonの下記コードに原因があるのは分かっているのですが、どうしても改行での表記が分かりません。("\n" とかなのでしょうが。。。)

message = ' {} '.format(' / '.join(name)))

改行の記載方法を教えて頂きたく。

<Python> ```ここに言語を入力 # -*- coding: utf-8 -*- from flask import Flask, render_template from collections import defaultdict from flask import request

app = Flask(name)

@app.route('/', methods=['GET'])
def get():
return render_template('index1.html',
title = 'Form Sample(get)',
message = 'Where do you want to go?')

@app.route('/', methods=['POST'])
def post():
name = request.form.getlist('checkbox')
return render_template('index2.html',
title = 'Form Sample(post)',
message = ' {} '.format(' / '.join(name)))

if name == 'main':
app.run()
コード

<Index2.html> (Index1は、本質問とは関係なので省きます。) ```ここに言語を入力 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello World</title> </head> <body> <h1>{{ title }}</h1> <p>{{ message }}</p> </form> </body> </html>コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Flaskで「render_template("a.html", b="x<br>y")」みたいなことをした場合、テンプレート中に埋め込みたい変数の値(この例では「x<br>y」の部分)は、特に指定しない限りテンプレート・エンジンのJinja2の機能によって、「<」や「>」などHTMLに影響を与える文字は自動的にエスケープされます。

以下のようなコードではどうでしょうか?
実際に動作確認したわけではないので間違いがあったらスミマセン。

  • pythonコード

python

1# (省略) 2 3@app.route('/', methods=['POST']) 4def post(): 5 name = request.form.getlist('checkbox') 6 return render_template( 7 'index2.html', 8 title = 'Form Sample(post)', 9 message = name, 10 ) 11 12# (以下省略)
  • index2.html

html

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>Hello World</title> 7 </head> 8 <body> 9 <h1>{{ title }}</h1> 10 <p> 11 {% for msg in message %} 12 {{ msg }}<br> 13 {% endfor %} 14 </p> 15 </form> 16 </body> 17</html>

<br>」ではなく「<ul>」と「<li>」使った方がそれっぽいかもしれません。

投稿2021/04/20 15:01

編集2021/04/20 15:05
msiz07

総合スコア172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yujin1202

2021/04/20 15:23

ありがとうございます。 たった今、正常に動く事を確認しました! >特に指定しない限りテンプレート・エンジンのJinja2の機能によって、「<」や「>」などHTMLに影響を与える文字は自動的にエスケープされます。 なるほど、Jinja2の機能影響を受けると言う事ですね。 ですから、HTML側での処理とした方が良いのでは?との御提言と理解しました。 兎に角、動きました。 解決です。 ベストアンサーとさせて頂きます。 ありがとうございました。
guest

0

ここでの表示はHTMLの文法/処理方式に沿って行なわれるので、HTMLの文法に合せる必要があります。

HTMLで改行するには「<br>」を使います。

投稿2021/04/20 09:45

TakaiY

総合スコア13790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yujin1202

2021/04/20 12:32

>ここでの表示はHTMLの文法/処理方式に沿って行なわれるので、HTMLの文法に合せる必要があります。 御回答をありがとうございます。 はい。ここは、もっともな御回答だと思います。 ありがとうございます。 ただ、かなり試行錯誤したのですが、<br>を下記のどこに記入すれば良いのか? が分からないです。 message = ' {} '.format(' / '.join(name))) 度々で申し訳ないのですが、教えて頂きたく。
TakaiY

2021/04/20 13:10 編集

/ の代わりでどうでしょう? message = ' {} '.format('<br>'.join(name))) もしくは message = ' <br> '.join(name) で充分かと
yujin1202

2021/04/20 14:04

早速、ありがとうございます。 ただ、両方共、下記の様に表示されて、やはり縦になりません。。。 Afgahanistan<br>Australia<br>France もう一度、よくコードを見てみます。。。。
TakaiY

2021/04/20 23:31

そうか。msiz07さんの回答のとおりですね。 そもそも応答をHTMLにしなければなりませんでしたね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問