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

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

ただいまの
回答率

87.34%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 402

score 36

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

こんな様な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>コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

  • pythonコード
# (省略)

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

# (以下省略)
  • index2.html
<!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>
    {% for msg in message %}
      {{ msg }}<br>
    {% endfor %}
    </p> 
    </form>
  </body>
</html>

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 00:23

    ありがとうございます。
    たった今、正常に動く事を確認しました!

    >特に指定しない限りテンプレート・エンジンのJinja2の機能によって、「<」や「>」などHTMLに影響を与える文字は自動的にエスケープされます。

    なるほど、Jinja2の機能影響を受けると言う事ですね。
    ですから、HTML側での処理とした方が良いのでは?との御提言と理解しました。
    兎に角、動きました。
    解決です。
    ベストアンサーとさせて頂きます。
    ありがとうございました。

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/20 21:32

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

    御回答をありがとうございます。
    はい。ここは、もっともな御回答だと思います。
    ありがとうございます。

    ただ、かなり試行錯誤したのですが、<br>を下記のどこに記入すれば良いのか? が分からないです。
    message = ' {} '.format(' / '.join(name)))

    度々で申し訳ないのですが、教えて頂きたく。

    キャンセル

  • 2021/04/20 22:08 編集

    / の代わりでどうでしょう?

    message = ' {} '.format('<br>'.join(name)))

    もしくは

    message = ' <br> '.join(name)

    で充分かと

    キャンセル

  • 2021/04/20 23:04

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

    キャンセル

  • 2021/04/21 08:31

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

    キャンセル

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る