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

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

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

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Q&A

解決済

1回答

533閲覧

Python3 Flask テーブル幅をドラッグで調整

maedat

総合スコア4

Flask

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

0グッド

0クリップ

投稿2023/01/11 04:55

Flaskを使用してwebアプリを作成しております。

index.htmlをEdgeに投げ込むと、テーブル表の幅をドラッグで調整できるのですが、
flaskを使用して、index.htmlを動作させるとテーブル表の幅をドラッグできず、幅も調整できません(静的表示になっている)

index.html

1<!DOCTYPE html><html lang="ja"> 2<head> 3<meta charset="utf-8"> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6 7<link rel="stylesheet" href="jquery.resizableColumns.css"> 8<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 9<script src="jquery.resizableColumns.min.js"></script> 10 11</head></html> 12 13<body> 14<h1>DateBase</h1> 15<h1>Table</h1> 16 17<table border="1" style="text-align: center;vertical-align:middle;background-color:rgb(222, 243, 234);">> 18 <thead> 19 <tr> 20 <th>Office54</th> 21 <th>Python</th> 22 <th>jQuery</th> 23 </tr> 24 </thead> 25 <tbody> 26 <tr> 27 <td>FiveFour</td> 28 <td>Django</td> 29 <td>javascript</td> 30 </tr> 31 <tr> 32 <td>Great</td> 33 <td>Perfect</td> 34 <td>Amaging</td> 35 </tr> 36 </tbody> 37</table> 38 39<script> 40$(function(){ 41 $("table").resizableColumns({ 42 }); 43}); 44</script> 45</body>

上記htmlファイルはEdgeに投げ込むとドラッグ可能です。
以下flaskのapp.pyファイルです。ローカルでEdgeを開きます。

app.py

1from flask import Flask, render_template, request, session, url_for, redirect, jsonify,g 2from flask.views import MethodView 3 4app = Flask(__name__) 5 6#「/」へアクセスがあった場合に、"Hello World"の文字列を返す 7@app.route("/") 8def hello(): 9 return render_template('index.html') 10 11#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する 12if __name__ == "__main__": 13 app.run(debug=True)

htmlファイルを単純にEdgeに投げると幅をドラッグ調整できますので、おそらく、jqueryのパスは問題ないと思うのですが、
なぜ、flaskで動作させ、「http://127.0.0.1:5000」にアクセスすると、目的の動作をしなくなるのでしょうか。
index.htmlファイルは、app.pyの同層にtemplatesフォルダがあり、そのフォルダ内に入れております。

何卒、宜しくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

.jsや.cssなどの静的ファイルはurl_forを用いてパスを解決する必要があります。
【Python】【Flask】外部CSSファイルやJavaScriptを読み込むを参考に、静的ファイルを適切なディレクトリに配置してindex.htmlを修正してください。

投稿2023/01/11 05:12

編集2023/01/11 05:13
can110

総合スコア38233

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

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

maedat

2023/01/11 05:40

うまくいきません。 <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.resizableColumns.css') }}"> <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.resizableColumns.min.js') }}"> を追加しました。 app.pyと同層にtemplatesフォルダとstaticフォルダを設けました。 templatesフォルダには、cssフォルダを設け、そこに上記cssファイルを格納。 staticフォルダには、上記jsファルダを設け、そこに上記jsファイルを格納しました。 app.pyファイルを実行し、http://127.0.0.1:5000にアクセスしますと、白紙ページとなります。
can110

2023/01/11 05:47

> templatesフォルダには、cssフォルダを設け、そこに上記cssファイルを格納。 cssフォルダもtemplates配下ではなくstatic配下に置かないといけません。 あと、白紙ページとなるのであればindex.htmlの編集(構文)ミスなりで正しく読み込まれていないようが気がします。
maedat

2023/01/11 06:03

すみません。誤記です。 templatesフォルダ内には、index.htmlファイルを設け、 templatesフォルダと同層に、staticフォルダを設けております。 index.htmlファイルは掲載したコードです。
can110

2023/01/11 06:06

当方環境では回答にあげたサイトのとおりにしてFlask上でテーブル表の幅をドラッグで調整できています。 何らかhtmlコードに誤記やファイルの配置ミスなどがあると思われます。
maedat

2023/01/11 06:13

<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.resizableColumns.css') }}" /> </head></html> <body> <h1>DateBase</h1> <h1>Table</h1> <table border="1" style="text-align: center;vertical-align:middle;background-color:rgb(222, 243, 234);"> <thead> <tr> <th>Office54</th> <th>Python</th> <th>jQuery</th> </tr> </thead> <tbody> <tr> <td>FiveFour</td> <td>Django</td> <td>javascript</td> </tr> <tr> <td>Great</td> <td>Perfect</td> <td>Amaging</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.resizableColumns.min.js') }}"></script> <script> $(function(){ $("table").resizableColumns({ }); }); </script> </body>
maedat

2023/01/11 06:13

上記にて解決しました。ありがとうございます。
maedat

2023/01/11 06:14

ちなみに、ドラッグする際、表示がチラツクのですが、もっとゆっくり調整できるような仕様とかご存じでしょうか。
can110

2023/01/11 06:16

jquery.resizableColumnsははじめて触ったので詳しいことは分かりません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問