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

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フォルダがあり、そのフォルダ内に入れております。

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

回答1件

ベストアンサー

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

投稿2023/01/11 05:12

編集2023/01/11 05:13

can110

総合スコア37023

回答へのコメント

shoshin-sha

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の編集（構文）ミスなりで正しく読み込まれていないようが気がします。

shoshin-sha

2023/01/11 06:03

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

can110

2023/01/11 06:06

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

shoshin-sha

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>

shoshin-sha

2023/01/11 06:13

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

shoshin-sha

2023/01/11 06:14

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

can110

2023/01/11 06:16

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