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

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

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

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

Python

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

IoT

IoT(Internet of Things)とは、インターネットがコンピュータなどの情報・通信機器のネットワークだけでなく、世の中のある様々なモノに接続されて自動認識・自動制御・遠隔計測などの能力を備えることです。「モノのインターネット」と一般的にいわれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3502閲覧

python-bottleでhtml、JS、cssをわけるやり方がわからない

退会済みユーザー

退会済みユーザー

総合スコア0

Bottle

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

Python

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

IoT

IoT(Internet of Things)とは、インターネットがコンピュータなどの情報・通信機器のネットワークだけでなく、世の中のある様々なモノに接続されて自動認識・自動制御・遠隔計測などの能力を備えることです。「モノのインターネット」と一般的にいわれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/03 13:36

編集2019/09/13 11:35

私は電子工作系の部活に入っておりLEDキューブを作りました。
それの機能としてラズパイを用いスマホで光らせ方を決められるようにしようとしています。
※うちの部活にはiotできる人がいないのでこうしています(T_T)

DIR

1/home/pi 2/ctrlLED/ 3 -cntrolLED_on_web.py//←これが.pyのあれ 4 -static/ 5 -html/ 6 -index.html//メイン画面 7 -wrong.html//パスワード違った際ここに飛ぶ、画像が表示されるが同じように404吐く 8 -js/Script2.js//.jsのあれ 9 -css/StyleSheet1.css//.cssのあれ

該当のソースコード達

from bottle import route,run,get,template,static_file host = 'localhost' @route('/') @route('/<passward:int>') def index(passward): if passward == 123456789: return template('/home/pi/ctrlLED/static/html/index.html') else: return template('/home/pi/ctrlLED/static/html/wrong.html') @get('./static/html/<filepath:path>') def static(filepath): print("print filepath") print(filepath) return static_file(filepath,root='./static/html') run(host='172.31.2.100', port=85)

index.html

1<!DOCTYPE html> 2 3<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4<head> 5 <meta charset="utf-8" /> 6 <title>エレ研</title> 7 <link rel="stylesheet" type="text/css" href="static/html/css/StyleSheet1.css"> 8 <script type="text/javascript" src="static/html/js/Script2.js"></script> 9</head> 10<body> 11 <table> 12 <tr> 13 <th>面1</th> 14 <th>x1</th> <th>x2</th> <th>x3</th> <th>x4</th> 15 <th>x5</th> <th>x6</th> <th>x7</th> <th>x8</th> 16 </tr> 17 <tr> 18 <th>y1</th> 19 <td></td> <td></td> <td></td> <td></td> 20 <td></td> <td></td> <td></td> <td></td> 21 22 </tr> 23 <tr> 24 <th>y2</th> 25 <td></td> <td></td> <td></td> <td></td> 26 <td></td> <td></td> <td></td> <td></td> 27 </tr> 28 <tr> 29 <th>y3</th> 30 <td></td> <td></td> <td></td> <td></td> 31 <td></td> <td></td> <td></td> <td></td> 32 </tr> 33 <tr> 34 <th>y4</th> 35 <td></td> <td></td> <td></td> <td></td> 36 <td></td> <td></td> <td></td> <td></td> 37 </tr> 38 <tr> 39 <th>y5</th> 40 <td></td> <td></td> <td></td> <td></td> 41 <td></td> <td></td> <td></td> <td></td> 42 </tr> 43 <tr> 44 <th>y6</th> 45 <td></td> <td></td> <td></td> <td></td> 46 <td></td> <td></td> <td></td> <td></td> 47 </tr> 48 <tr> 49 <th>y7</th> 50 <td></td> <td></td> <td></td> <td></td> 51 <td></td> <td></td> <td></td> <td></td> 52 </tr> 53 <tr> 54 <th>y8</th> 55 <td></td> <td></td> <td></td> <td></td> 56 <td></td> <td></td> <td></td> <td></td> 57 </tr> 58 </table> 59</body> 60</html>

ctrlLEDJS.js

1/*できてない、HTMLで表を作ってマウスでクリックすると色が永久的につくみたいな感じのがやりたい 2サイトを少し見て回ったけどわかりずらかったので、教えていただけるとありがたいです 3*/
table { width: 100px; border: 2px solid black; border-collapse: collapse; background-color:white; } table th{ border: 1px solid black; } table td { border: 1px solid black; text-align: center; padding: 3px 3px; } table td:hover { background-color: rebeccapurple; }

該当のエラーコード

*.*.*.* - - [13/Sep/2019 20:28:43] "GET /123456789 HTTP/1.1" 200 2915 Traceback (most recent call last): File "/usr/lib/python2.7/wsgiref/handlers.py", line 86, in run self.finish_response() File "/usr/lib/python2.7/wsgiref/handlers.py", line 128, in finish_response self.write(data) File "/usr/lib/python2.7/wsgiref/handlers.py", line 212, in write self.send_headers() File "/usr/lib/python2.7/wsgiref/handlers.py", line 270, in send_headers self.send_preamble() File "/usr/lib/python2.7/wsgiref/handlers.py", line 194, in send_preamble 'Date: %s\r\n' % format_date_time(time.time()) File "/usr/lib/python2.7/socket.py", line 328, in write self.flush() File "/usr/lib/python2.7/socket.py", line 307, in flush self._sock.sendall(view[write_offset:write_offset+buffer_size]) error: [Errno 32] Broken pipe *.*.*.* - - [13/Sep/2019 20:28:43] "GET /123456789 HTTP/1.1" 500 59 ---------------------------------------- Exception happened during processing of request from ('*.*.*.*', 53782) Traceback (most recent call last): File "/usr/lib/python2.7/SocketServer.py", line 290, in _handle_request_noblock self.process_request(request, client_address) File "/usr/lib/python2.7/SocketServer.py", line 318, in process_request self.finish_request(request, client_address) File "/usr/lib/python2.7/SocketServer.py", line 331, in finish_request self.RequestHandlerClass(request, client_address, self) File "/usr/lib/python2.7/SocketServer.py", line 654, in __init__ self.finish() File "/usr/lib/python2.7/SocketServer.py", line 713, in finish self.wfile.close() File "/usr/lib/python2.7/socket.py", line 283, in close self.flush() File "/usr/lib/python2.7/socket.py", line 307, in flush self._sock.sendall(view[write_offset:write_offset+buffer_size]) error: [Errno 32] Broken pipe ---------------------------------------- *.*.*.* - - [13/Sep/2019 20:28:57] "GET /123456789 HTTP/1.1" 200 2915 the filepath css/StyleSheet1.css *.*.*.* - - [13/Sep/2019 20:28:57] "GET /static/html/css/StyleSheet1.css HTTP/1.1" 404 749 the filepath js/Script2.js *.*.*.* - - [13/Sep/2019 20:28:57] "GET /static/html/js/Script2.js HTTP/1.1" 404 743

*は自分のスマホのIPアドレスなので伏せます
一回更新しようとして間違って「クリックすると前に戻ります」してしまったのでがばがばかもしれませんが、ご容赦ください

試したこと
このサイトを参考に変えて、わからないところは他サイトでっていう感じです。
https://teratail.com/questions/130896

補足情報
私はRasberrryPiZeroWを使っていて、開発アプリはPython3(IDLE)とテキストエディターです。
まずないと思いますが、ラズパイのせいでできないという感じならどうすればよいか教えていただきたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

@route('/static/<file:path>')

fileという名前のpath型の引数を受け取る、という宣言です。

そしてそのようにしてURLで指定されたデータを、このデコレータで修飾した関数に引数としてfileという名前付きの引数として渡します。

ところがその関数は

def seiteki(filepath):

と宣言されていて、fileという引数を受け取るようになっていません

ですからseiteki() got an unexpected keyword argument 'file'という"予期しないfileという引数を受け取った"というメッセージのエラーになっています。

この部分は参考にした記事から変更せずにそのまま書けばよかったのではないでしょうか?


もしかして、indexという名前の関数を使ってしまってそれがエラーになったのでしょうか?
関数の名前だけ変えればいいでしょう。


コメント

return template(./static)#あるひとはこうして return template(static/...)#あるひとはこうして

('で括るのを忘れているのではと思いますがおいておきます)

Unix系OSのシェルにおいて、a/b/./c/da/b/c/d同じ場所を指します。
"aの下のbの下のその場所のcの下のd"と"aの下のbの下のcの下のd"は実質同じですから。

事実Pythonのパス操作ライブラリでもその同一性は考慮されていて

>>> from pathlib import Path >>> Path('a/b/./c/d') == Path('a/b/c/d') True

と、同じだと認識されるのでそこで違いが出ることはまずありません。

動かすハードウェアが違うせいでファイルの読み込みや、呼び出しができていない気がしますがどうなんでしょうか?

基本的にそれは考慮する必要はないでしょう。
そんな問題ではなく、実装か配置か実行のいずれかの問題だと考えます。


カレントディレクトリが/home/pi/ctrlLED/じゃないのでは。
どうやって実行しているか書いてないのでわかりませんが。

投稿2019/09/03 14:21

編集2019/09/13 14:19
quickquip

総合スコア11038

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

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

退会済みユーザー

退会済みユーザー

2019/09/03 22:12

サイトをみたら引数の識別子がfilepathでやっていました。すみません、こんな初歩的なことに気づかなくて… 回答ありがとうございました
退会済みユーザー

退会済みユーザー

2019/09/05 14:03

調べていろいろいじってみてできなく、また何点か疑問が生じたため質問させていただきます。 まず一つ目に ``` @route('/static/<filepath:path>') def static(filepath): return template(./static)#あるひとはこうして return template(static/...)#あるひとはこうして ``` とサイトによって違いが見れたのですが、これらの書き方はラズベリーパイで動かす場合できるのでしょうか?私はほとんど上記の書き方(returnを2個書くとかはしてない)で書き、HTML側もサイトを見て呼び出しのURLがちゃんとしたにもかかわらず、404が出ました。 2点目ですが、1点目とほぼ同じ内容なのですが、動かすハードウェアが違うせいでファイルの読み込みや、呼び出しができていない気がしますがどうなんでしょうか?ラズパイでもできるようなものを探したのですが、自分の探し方が悪いのかやっている人が見つかりませんでした。 以上です。
退会済みユーザー

退会済みユーザー

2019/09/06 09:10

現状の配置です。 /home/pi / ctrlLED/ -controlLED_on_web.py//←動かしてるpythonのやつ -static/ -html/ -index.html -wrong.html//←.pyでパスワードを設定し違うとこれに飛ぶ(画像が出るはずだができてない) -hudzFrz.jpg//その画像 -css/StyleSheet1 -js/Script2 ってなってます。index.htmlはStyleSheet1とScript2を読み込むようにしてます。 ```index.html のその部分 <head> <!--メタとかはとばします--> <link rel="stylesheet" type="text/stylesheet" href="./html/css/StyleSheet1.css"> <script type="text/javascript" src="./html/js/Script2.js"> </head> ``` ```今の.py from bottle import route,run,get,template,static_file host = 'localhost' @route('/') @route('/<passward:int>') def index(passward): if passward == 123456789: return template('/home/pi/ctrlLED/static/html/index.html') else: return template('/home/pi/ctrlLED/static/html/wrong.html') @get('./static/<filepath:path>') def static(filepath): return static_file(filepath,root='./static') run(host='172.31.2.100', port=85) ``` 配置は https://teratail.com/questions/130896 を参考にして、そこのベストアンサーも見つつ書き直しました。 相対パスとかは https://web-designer.cman.jp/other/path/ ここでなんとなく理解しましたが、 上のやつでやってもできません....... エラーコードは "GET /html/css/StyleSheet1.css HTTP/1.1" 404 769 "GET /html/js/Script2.js HTTP/1.1" 404 757 です。よみこめてないんですかね...
quickquip

2019/09/06 10:32

インデントが必要なので、これは質問を編集して書いてもらった方がよいかと。
quickquip

2019/09/06 10:33

それはそれとして、アクセスのリクエストが /html/〜 に来ていますが、URLのパターンに明らかに無いので失敗しますね。
退会済みユーザー

退会済みユーザー

2019/09/13 11:24

質問を編集しました。また、Chromeのデベロッパーツールでエラーを見たのですが、どうやらcssのファイルは中身が読み込めていない状態で、jsは読み込めてない感じでした。 また、.pyを見ていただけるとわかると思いますが、print("print filepath") を追加しましたが、htmlのページは認識されてもstaticの中身は返されていない感じでした。 プログラムが実行されるどのタイミングで404を吐くのですか?
退会済みユーザー

退会済みユーザー

2019/10/06 06:37

カレントディレクトリが違いました。 なかばあきらめて放置していて気付くのが遅れてしまいまして。申し訳ございません。 本当にありがとうございましたm(-_-)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問