yukiyukiponsuの日記

雑記ブログ

質問はCONTACTやコメントでお願い致します。

【コピペでできるpython】Flaskを使ってhtmlを表示してみよう

この記事をシェアする

f:id:yukiyukiponsu:20190710213958j:plain

 

こんにちは、ゆきぽんずです。

 

今日はpythonFlaskを使ったhtmlの表示をしていきます。

 

Flask(フラスク)とは、プログラミング言語Python用の、軽量なウェブアプリケーションフレームワークのことです。似たようなものにDjango(ジャンゴ)というものがあるんですが、Djangoは初心者がするのには難しいですし、何より記事を書ける人たちはDjangoのことを既に詳しく知っているため初心者用の記事があまりないというのが厳しいところです(pythonの書き方をある程度知っている人でないと、そもそもDjangoは無理です)。

 

さらにDjangoは大規模アプリ向きのフレームワークで、個人で作るアプリ程度であればFlaskで十分です。Flaskを学べばDjangoにも何とかついていけるようになります。だからこそ初心者の方はFlaskからやりましょう!!!

 

というかフレームワークって何気なく使っていますが、抽象的でよくわからないですよね。フレームワークというのは、例えるならクッキーを星マークにしたい時に手(全部やる)を使うか、市販の型抜き(フレームワーク)を使ってやるかという感じです。

 

さてさて前置きが長くなってしまいましたが、それでは本題に入っていきます!

やりたいこと

Flaskを使ってみたい

ソースコードをコピペする前の事前準備

Flaskをpythonにインストール

pip install flask

フォルダの位置関係

フォルダの位置関係

分かりやすいようにちょっときれいに整理

BlogFlask

|-manage_run.py

|-app

    |-app.py

|-templates

        |-index.html

このフォルダのような位置関係でファイルを作成してください(ファイルとフォルダは自分で作成する必要があります)。各々のファイルのソースコードを載せますのでコピペしてくだしゃい。

ソースコード

manage_run.py
from app.app import app

if __name__ == "__main__":
    app.run()
app.py
from flask import Flask,render_template

app = Flask(__name__)

#「/」へアクセスがあった場合に、"Hello World"の文字列を返す
@app.route("/")
def hello():
    return "Hello World"

#「/templates」へアクセスがあった場合に、index.htmlを返す
@app.route("/templates")
def index():
    return render_template("index.html")

#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する
if __name__ == "__main__":
    app.run(debug=True)
index.html
<!doctype html>
<html lang="ja">
  <head>
  <!-- あってもなくても動くけど入れといた方がいいメタタグ -->
  <!-- 文字をutf-8に -->
    <meta charset="utf-8">
  <!-- どのデバイスで見ても見え方を一緒にする = レスポンシブデザイン -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <!-- 文字の表示を真ん中に -->
  <body class="text-center">
  <h2>いっけーい</h2>
  </body>
</html>

コピペできましたか?できた方はmanage_run.pyがある位置まで移動してmanage_run.pyを実行してください

manage_run.py実行

manage_run.py

できましたかね?(;^ω^)

後は、http:....をブラウザさんに入力するだけです。

実行結果

実行結果1

さらに127.0.0.1:5000/templatesとすると

実行結果2

つくったhtmlが反映されていますね( ´∀`)bグッ!

 

注意点としてgoogle検索等の上の検索欄(灰色の場所)でhttp:..を入力してくださいね。

今日の記事は以上です。

 

これからFlaskを使った内容が続くと思います。最終的にはログイン機能の付いたチャットアプリみたいなものを作ってみようかなと思っています。

 

今日もブログを読んでくださりありがとうございます。

 

それではまた明日!