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

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

ただいまの
回答率

91.35%

  • Python

    3871questions

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

  • Webサイト

    793questions

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

  • Flask

    81questions

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

  • Jinja

    17questions

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

解決済

回答 1

投稿 2017/11/26 20:24 ・編集 2017/11/26 21:05

  • 評価
  • クリップ 0
  • VIEW 56

harunouta

score 19

前提・実現したいこと

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.

該当のソースコード

# -*- coding: utf-8 -*-
# Flask などの必要なライブラリをインポートする
from flask import Flask, render_template, request, redirect, url_for
import random

# 自身の名称を app という名前でインスタンス化する
app = Flask(__name__)

# メッセージをランダムに表示するメソッド
def picked_up():
    messages = [
        "こんにちは、あなたの名前を入力してください",
        "やあ!お名前は何ですか?",
        "あなたの名前を教えてね"
    ]
    # NumPy の random.choice で配列からランダムに取り出し
    return random.choice(messages)

# ここからウェブアプリケーション用のルーティングを記述
# index にアクセスしたときの処理
@app.route('/')
def index():
    title = "ようこそ"
    message = picked_up()
    # index.html をレンダリングする
    return render_template('index.html',
                           message=message, title=title)

# /post にアクセスしたときの処理
@app.route('/post', methods=['GET', 'POST'])
def post():
    title = "こんにちは"
    if request.method == 'POST':
        # リクエストフォームから「名前」を取得して
        name = request.form['name']
        # index.html をレンダリングする
        return render_template('index.html',
                               name=name, title=title)
    else:
        # エラーなどでリダイレクトしたい場合はこんな感じで
        return redirect(url_for('index'))

if __name__ == '__main__':
    app.debug = True # デバッグモード有効化
    app.run(host='0.0.0.0') # どこからでもアクセス可能に


index.html

{% extends "layout.html" %}
{% block content %}
  <!-- Form
  ================================================== -->
<div class="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p class="lead">
          {% if name %}
            こんにちは {{ name }} さん
          {% else %}
            {{ message }}
          {% endif %}
        </p>
        <form action="/post" method="post" class="form-inline">
          <label for="name">名前</label>
          <input type="text" class="form-control" id="name" name="name" placeholder="Name">
          <button type="submit" class="btn btn-default">送信する</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}


layout.html

<!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">
    {% if title %}
      <title>{{ title }}</title>
    {% else %}
      <title>Bootstrap 101 Template</title>
    {% endif %}
    <!-- Bootstrap -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    {% block content %}{% endblock %}
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>

補足情報(言語/FW/ツール等のバージョンなど)

記事のPythonコードからnumpyを使わないコードに書き換えてあります。
ターミナルではPythonのコードは問題なく起動しています。

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

jinja2.exceptions.TemplateNotFound
TemplateNotFound: index.html


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

投稿 2017/11/26 20:58

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/26 21:03

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

    キャンセル

  • 2017/11/26 21:11

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

    キャンセル

  • 2017/11/26 21:19

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

    キャンセル

  • 2017/11/27 09:05

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

    キャンセル

  • 2017/11/27 10:07

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

    キャンセル

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

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • Python

    3871questions

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

  • Webサイト

    793questions

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

  • Flask

    81questions

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

  • Jinja

    17questions