Q&A
> {{ url_for("info") }}
これは通常のHTMLではないですが、
なにかフレームワークのテンプレート構文でしょうか？
もし、JavaScriptフレームワークなのでしたら、
onclick="location.href='https://xxx.jp/'"
などの、HTMLにJS構文を書くのは、様々な処理に悪影響を及ぼすので、
やるべきではありません。
また、あくまでJSフレームワーク上で処理をさせる、とやれば、
自ずと本質問の問題は発生しないものと思われます。
HTMLで""を3重に使いたい場合、どのように書けばよいでしょうか？
HTMLで""の内側に""を使いたい場合、下記のように''を使用するとうまくいきそうであることはわかりました。
HTML
1<!-- 2重の場合はうまくいく --> 2<button onclick="location.href='https://xxx.jp/'">遷移ボタン</button>
今回の本題は、上記のURLをFlaskのurl_forで指定するために、""が3重の構造になった場合です。このとき場合、"と'をいろいろ使い分けても、以下のようなvscodeのエラー表示が消えてくれません。
HTML
1<!-- 3重の場合はうまくいかない --> 2onclick="location.href='{{ url_for("info") }}'"
vscode上に表示されるエラー内容
- htmlファイル名が赤く光る
- 数式上の色がおかしい（=が赤くなるなど）
エラーメッセージがでるわけではなく、一応動いてはいるのですが、正しい書き方を把握したいと考え投稿しました。
実際のディレクトリ構造とコードは以下です。該当する箇所は、layout.htmlの14行目のbuttonクラスにhrefを設定する箇所です。質問内容に直接関係のない部分が大半ではありますが、最小構成で全体のスクリプトを掲載させていただきます。
ディレクトリ構造 test |-app.py |-templates | |-layout.html | |-home.html | |-info.html |-static |-css |-style.css
コード
python
1# app.py 2from flask import Flask, render_template 3app = Flask(__name__) 4@app.route('/') 5def home(): 6 return render_template('home.html') 7@app.route('/info') 8def info(): 9 return render_template('info.html') 10if __name__ == '__main__': 11 app.run(debug=True)
HTML
1<!-- layout.html --> 2<!DOCTYPE html> 3<html lang='ja'> 4 <head> 5 <meta charset='uft-8'> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <title>{% block title %}sample_page{% endblock %}</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 9 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> 10 </head> 11 <body> 12 <div class="row"> 13 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 14 <div class="dropdown"> 15 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick=location.href="{{ url_for('info') }}"> 16 <a>INFO</a> 17 </button> 18 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 19 <a class="dropdown-item" href="{{url_for('info')}}#member">member</a> 20 <a class="dropdown-item" href="{{url_for('info')}}#message">message</a> 21 </div> 22 </div> 23 </nav> 24 </div> 25 <div class="container"> 26 {% block content %} 27 {% endblock %} 28 </div> 29 30 <div class="home"> 31 <a href="{{ url_for('home') }}">HOMEへ戻る</a> 32 </div> 33 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 34 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 35 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 36 </body> 37</html>
HTML
1<!-- home.html --> 2{% extends "layout.html" %} 3{% block title %} 4home - {{super() }} 5{% endblock %} 6{% block content %} 7<h1>Home画面です</h1> 8{% endblock %}
HTML
1<!-- info.html --> 2{% extends 'layout.html' %} 3{% block title %} 4info - {{super() }} 5{% endblock %} 6{% block content %} 7<h1 id='member'>member</h1> 8<div class='row'> 9 <div class='col-sm-6 offset-sm-3'> 10 <table class="table"> 11 <tr><td>member</td><td>山田花子</td></tr> 12 <tr><td>member</td><td>山田花子</td></tr> 13 <tr><td>member</td><td>山田花子</td></tr> 14 <tr><td>member</td><td>山田花子</td></tr> 15 <tr><td>member</td><td>山田花子</td></tr> 16 <tr><td>member</td><td>山田花子</td></tr> 17 <tr><td>member</td><td>山田花子</td></tr> 18 </table> 19 </div> 20</div> 21<h1 id='message'>message</h1> 22<div class='row'> 23 <div class='col-sm-10 offset-sm-1'> 24 <p>ビデオを使うと、伝えたい内容を明確に表現できます。[オンライン ビデオ] をクリックすると、追加したいビデオを、それに応じた埋め込みコードの形式で貼り付けできるようになります。キーワードを入力して、文書に最適なビデオをオンラインで検索することもできます。 25 Word に用意されているヘッダー、フッター、表紙、テキスト ボックス デザインを組み合わせると、プロのようなできばえの文書を作成できます。たとえば、一致する表紙、ヘッダー、サイドバーを追加できます。[挿入] をクリックしてから、それぞれのギャラリーで目的の要素を選んでください。 26 </p> 27 </div> 28</div> 29{% endblock %}
css
1/* style.css */ 2@media only screen and (min-width : 768px) { 3 .dropdown:hover .dropdown-menu { 4 display: block; 5 } 6}
version情報は、以下の通りです。
bootstrap 4.3
flask 1.1.1
python 3.8
以上です。よろしくお願いします。
bladeテンプレートかな？
url_for("info")はpythonのwebフレームワークであるflaskの構文です。（追記：ちょっと自信ないです。pythonのtemplateエンジン jinjaの構文かもしれません）
今回でいうと、app.pyのinfo関数の処理に飛ばすということを表していて、info関数の中でinfo.htmlというテンプレートを返しています。
> onclick="location.href='https://xxx.jp/'"
> などの、HTMLにJS構文を書くのは、様々な処理に悪影響を及ぼすので、
> やるべきではありません。
これは初耳でした。
以下のようなページでこのような実装が紹介されており（検索すると一番上のほうに出てくる）、そこに疑問は持ちませんでしたが、
代わりに具体的にどうやって実装すべきかということがわかるURLなどありましたらご共有いただきたいです。
https://techacademy.jp/magazine/24552
https://www.sejuku.net/blog/82466
せっかくなので、もし可能なら3重にするにはどうすればよいのか、に対する答えも知りたいところではありますが…
> 以下のようなページでこのような実装が紹介されており
あ、Flaskなんですね。
であれば大丈夫です。
サーバーサイドなので。
つまり、Flaskの書式に適っているので、修正の必要がないが、
VSCodeのHTML構文チェックには引っかかっていると言う状態です。
なので、VSCodeを、Flaskの書式に対応させるか、
Flaskのコントローラー側で、
url_for("info")を格納した単体変数を用意し、
それを、{{ その単体変数 }}と言うふうに入れるかですかね。
いずれにせよ、
上記措置をせず、そのままのHTML構文で行くなら、エラーが出るのは泣き寝入りするしかないでしょう。
上記で回答になりそうなので、回答で記載しますね。
回答3件
0
直接の回答ではないのでマイナス評価になりそうですが
サーバーサイドのプログラムでHTML要素にonXXXを指定しないのが一番です。
jsは適当なidやclass（もしくはカスタムデータや属性）を振っておいて
js側で処理を指定するのが賢明です
投稿2021/04/05 08:02
総合スコア117650
恥ずかしながらJSほとんど触ってことがないので、可能なら教えていただきたいのですが、
たとえば、HTMLでは、<button id='to_info' info_url="url_for('info')">のようにidとurl情報を付けておいて、JS側で
function to_info_page (info_url) {
location.href = info_url;
};
var e = document.getElementById("to_info")
e.onclick = to_info_page (e.info_url)
のような処理をするほうがよいということでしょうか？
url_forの仕様を理解していないので正確な回答はできませんが
カスタムデータをつかって埋め込む手はあります
data-info-url="url_for('info')"
これに対して
document.querySelectorAll('[data-info-url]').forEach(x=>{
x.addEventListener('click',()=>{
console.log(x.dataset.infoUrl);
})
});
みたいな参照は可能です
上記のコードをそのまま使ったところうまくいきました。
HTMLでは「data-hoge-hoge」と指定しJS側では「x.dataset.hogeHoge」という形で取り出さないといけないんですね。dada-を付けないといけないのはなるほどという感じでしたが、勝手にcamelCaseになるのは不思議な仕様だなぁと感じました。
querySelectorAllの後あたりが文法的にあまり理解できていないので、今後また勉強します。
蛇足ですが、自分でもすぐに理解できそうなやり方として
HTMLでは
<button id='to_info' data-info-url="url_for('info')">
JSでは
var e = document.getElementById('to_info');
e.addEventListener('click', function() {
document.location.href = e.dataset.infoUrl
}, false);
としてもうまくいきました。
何にせよありがとうございました。
0
ベストアンサー
結論からいいますと、
Visual Studio Code上でのエラーは解消できない可能性が高いです。
なぜなら、HTML構文的には間違っているからです。
ですが、Flaskにおいての処理は正常に行われるかと。
（Flaskはあくまでサーバーサイドなので）
よって、どうしてもツール上のエラーを解消したいのであれば、下記のいずれかの措置が必要になります。
- Visual Studio Codeにプラグインを入れるなどして、Flask構文ではエラーが出ないようにする
url_info('info')の実行値を、Flaskのコントローラー側（ようはPython構文）の方で保持し、
その変数を持って、{{ value }}のようにテンプレートに記述する。
- JavaScriptの処理を、
onclick属性で書くのをやめ、JavaScript処理は別のJSファイルによって関数を記述するなどで実行するようにし、HTMLには、onclick="click_func()"、data-url="{{ url_info('info') }}"などとし、そのdata-url属性の値を使って、location.hrefメソッドを実行するようにする。
以上の措置でいけるかと。
JavaScriptの書き方に関しては、どうかご自身でお調べください。
しかし、Flask側で、なんらかの処理方法が存在するかもしれません。
投稿2021/04/05 06:08
総合スコア9555
返信遅れてしまい申し訳ありません。JSについてググっていて遅くなってしまいました。
yambejpさんにも質問させていただいている内容になりますが、onclick属性で書かないようにする方法の一例としては、
たとえば、HTMLでは、<button id='to_info' info_url="url_for('info')">のようにidとurl情報を付けておいて、JS側で
function to_info_page (info_url) {
location.href = info_url;
};
var e = document.getElementById("to_info")
e.onclick = to_info_page (e.info_url)
のように処理をするということを意図されていますか？
この質問にはご回答いただけなかったですが、JavaScript側の処理についてはじめに具体的な方法を提示いただけたおかげで、なんとか解決できました。（解決方法は、yambejpさんとのやりとりに記載しました）
調べ始めの取っ掛かりを作っていただけたのでベストアンサーとさせていただきます。
0
"に置き換えればいいです。
コードの文脈に従ってエスケープする事も忘れずに。
html
1<button onclick="alert("\"hoge\"")">hoge</button>
投稿2021/04/05 05:00
総合スコア266
{{ }}は、Flaskの書式のようなので、
本回答は適当ではありません。
あなたの回答
tips
プレビュー
