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

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

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

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Python

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

Q&A

解決済

1回答

23297閲覧

Flaskを用いてwebページを作る際にページがweb上で表示されないエラー

退会済みユーザー

退会済みユーザー

総合スコア0

Flask

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Python

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

0グッド

0クリップ

投稿2017/11/26 11:24

編集2017/11/26 12:05

###前提・実現したいこと
Pythonウェブアプリケーションフレームワーク Flaskを使って、名前を入力するとそれを反映させてページを表示するwebサイトを作ろうとしています。
以下の記事を参考に進めています。
参考記事

###発生している問題・エラーメッセージ
Pythonファイルと同じフォルダ内にhtmlファイル(index.html, layout.html)を置き、Pythonのコードを走らせながら、参考記事の通りにhttp://localhost:5000/indexへアクセスしてみましたが、404NotFoundと表示されました。何が原因でこのような表示になっているかわからず、困っています。

Not Found The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

###該当のソースコード

Python

1# -*- coding: utf-8 -*- 2# Flask などの必要なライブラリをインポートする 3from flask import Flask, render_template, request, redirect, url_for 4import random 5 6# 自身の名称を app という名前でインスタンス化する 7app = Flask(__name__) 8 9# メッセージをランダムに表示するメソッド 10def picked_up(): 11 messages = [ 12 "こんにちは、あなたの名前を入力してください", 13 "やあ!お名前は何ですか?", 14 "あなたの名前を教えてね" 15 ] 16 # NumPy の random.choice で配列からランダムに取り出し 17 return random.choice(messages) 18 19# ここからウェブアプリケーション用のルーティングを記述 20# index にアクセスしたときの処理 21@app.route('/') 22def index(): 23 title = "ようこそ" 24 message = picked_up() 25 # index.html をレンダリングする 26 return render_template('index.html', 27 message=message, title=title) 28 29# /post にアクセスしたときの処理 30@app.route('/post', methods=['GET', 'POST']) 31def post(): 32 title = "こんにちは" 33 if request.method == 'POST': 34 # リクエストフォームから「名前」を取得して 35 name = request.form['name'] 36 # index.html をレンダリングする 37 return render_template('index.html', 38 name=name, title=title) 39 else: 40 # エラーなどでリダイレクトしたい場合はこんな感じで 41 return redirect(url_for('index')) 42 43if __name__ == '__main__': 44 app.debug = True # デバッグモード有効化 45 app.run(host='0.0.0.0') # どこからでもアクセス可能に

index.html

html

1{% extends "layout.html" %} 2{% block content %} 3 <!-- Form 4 ================================================== --> 5<div class="form"> 6 <div class="container"> 7 <div class="row"> 8 <div class="col-md-12"> 9 <p class="lead"> 10 {% if name %} 11 こんにちは {{ name }} さん 12 {% else %} 13 {{ message }} 14 {% endif %} 15 </p> 16 <form action="/post" method="post" class="form-inline"> 17 <label for="name">名前</label> 18 <input type="text" class="form-control" id="name" name="name" placeholder="Name"> 19 <button type="submit" class="btn btn-default">送信する</button> 20 </form> 21 </div> 22 </div> 23 </div> 24</div> 25{% endblock %}

layout.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 {% if title %} 8 <title>{{ title }}</title> 9 {% else %} 10 <title>Bootstrap 101 Template</title> 11 {% endif %} 12 <!-- Bootstrap --> 13 <link href="/static/css/bootstrap.min.css" rel="stylesheet"> 14 15 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 16 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 17 <!--[if lt IE 9]> 18 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 19 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 20 <![endif]--> 21 </head> 22 <body> 23 {% block content %}{% endblock %} 24 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 25 <script src="/static/js/jquery.min.js"></script> 26 <!-- Include all compiled plugins (below), or include individual files as needed --> 27 <script src="/static/js/bootstrap.min.js"></script> 28 </body> 29</html>

###補足情報(言語/FW/ツール等のバージョンなど)
記事のPythonコードからnumpyを使わないコードに書き換えてあります。
ターミナルではPythonのコードは問題なく起動しています。

33#試してみたこと
http://localhost:5000/index」ではなく、
http://localhost:5000/」へアクセスしましたところ、

jinja2.exceptions.TemplateNotFound TemplateNotFound: index.html

と表示されるようになりました。

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

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

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

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

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

guest

回答1

0

ベストアンサー

python

1# ここからウェブアプリケーション用のルーティングを記述 2# index にアクセスしたときの処理 3@app.route('/') 4def index():

この @app.route('/') はサイトのルートパス「/」にアクセスした時にこのindexという関数が実行されるという意味です。

なのでブラウザでは 「http://localhost:5000/」 というURLを入力してアクセスする必要があります。

投稿2017/11/26 11:58

tell_k

総合スコア2120

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

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

tell_k

2017/11/26 12:11

それはテンプレートが存在しないというエラーです。なのでindex関数自体は動いています。参考記事に書いてあるように、templatesディレクトリを作ってその中に、layout.htmlとindex.htmlはいれれば動きそうな気がします。 記事で提示されているリポジトリです。 ここを参考に動かしてみるのが一番手っ取り早いです。 https://github.com/ynakayama/flask-hello/tree/hello-world
退会済みユーザー

退会済みユーザー

2017/11/26 12:19

お返事いただきましてありがとうございます。 templatesというディレクトリを作成し、pythonのフォルダを起動させましたが、今度は UnicodeDecodeError UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3 in position 0: ordinal not in range(128) という表示が出ました。
tell_k

2017/11/27 00:05

多分エラーの全文を載せた方が回答がつきやすいです。そのエラーだけだとどこがエラーになってるのか、判別がつかないです。利用してるPythonのバージョンも記載してください。ぱっと見Python3系でしか動かないコードなのにPython2系で動かしたためにエラーになってるように見えます。
退会済みユーザー

退会済みユーザー

2017/11/27 01:07

Python 2.7.14で動かしていました。Python3で動かした後に、もしエラーが表示されるようであれば、再度新たに質問させていただきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問