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

###前提・実現したいこと
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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

投稿2017/11/26 11:58

tell_k

総合スコア2120

退会済みユーザー

2017/11/26 12:03

ご回答いただきましてありがとうございます。「http://localhost:5000/」へアクセスしましたところ、 jinja2.exceptions.TemplateNotFound TemplateNotFound: index.html と表示されるようになりました。

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で動かした後に、もしエラーが表示されるようであれば、再度新たに質問させていただきたいと思います。

行動規範の内容に同意します