yukiyukiponsuの日記

雑記ブログ

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

【コピペでできるpython】Flaskを使ってボタンで画面遷移をしてみよう

この記事をシェアする

f:id:yukiyukiponsu:20190507193628j:plain

 

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

 

いまわっちさ東京にいるんだが、昨日3/14に東京で雪さ降ってただ。おいどんはおったまげて、ちきゅうさ、わやになるとおもうてしまったじゃ

 

さて茶番はここまでにして、今日はpythonのFlaskを使ってボタンで画面遷移を行いたいとおもいまーす。

 

「Flaskとは何か」「どうやって使うのか」については、前回の記事に書いたのでまだ読んでない人はこっちの記事から読んでください。

www.yukiyukiponsu.work

 

早速本題に入ります。

やりたいこと

pythonのFlaskを使ってボタンで画面遷移してみたい!

事前準備

フォルダの位置関係

フォルダの位置関係

見やすく整理すると

BlogFlask

|- manage_run.py

|- app

    |- app.py

    |- __pycache__ (こいつは実行するとできるファイルなので無視してください)

    |- templates

             |- index.html

             |- next_index.html

 

前回の記事と違いは、next_indexファイルが増えたことくらいですかね。

ソースコード

manage_run.py

こいつは以前と変わっていません。

from app.app import app

if __name__ == "__main__":
    app.run()
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>
  <!-- ボタンを押すと、/nextpageに飛ぶ -->
  <form action="/nextpage" method="get">
    <input type="submit" value='next!'>
  </form>
  </body>
</html>
next_page.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>
  <!-- ボタンを押すと、/templatesに飛ぶ -->
  <form action="/templates" method="get">
    <input type="submit" value='back!'>
  </form>
  </body>
</html>
app.js

こいつが本当に大事なやつ

from flask import Flask,render_template

app = Flask(__name__)

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

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

#「/nextpage」へアクセスがあった場合に、next_index.htmlを返す
@app.route("/nextpage", methods=["GET"])
def nextpage():
    return render_template("next_index.html")

#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する
if __name__ == "__main__":
    app.run(debug=True)

コメント文で重要な部分は書いているので、わからない部分は自分でググってみてください(ググり力を鍛えないとマジで今後がキツイ <= 今、自分が直面している一番の問題)

 

少し補足したい場所がありまして、それは methods=["GET"] の部分です。webには大きく POST、GETというものが存在します。めっちゃ詳しく解説してくださっている記事がありますのでリンク貼っておきます。

GETとPOSTの違いについて : https://qiita.com/kanataxa/items/522efb74421255f0e0a1

 

見るの面倒だなと言う人のために軽く説明すると

GET : 情報を取得するときに使えばいい

POST : 新しい情報の登録など比較的内密に情報を登録するときに使えばいい

以上です。こんな感じで覚えておけばまぁ問題ないと思います。

 

今日の内容は以上になります。

 

ちょっと寄り道です。

 

今ってエンジニアの需要が凄いらしく需要過多みたいですね。自分の周りにはエンジニアしかいないのでわからないのですが、今のうちにプログラミングを習っておいた方がいいのかもしれません。

 

以下の記事は日本経済新聞経済産業省の発表をまとめてくれたものになります。

要約すると、人工知能(AI)やあらゆるモノがネットにつながる「IoT」など先端的なIT(情報技術)を担う人材が2030年に55万人不足する恐れがあるということです。

https://www.nikkei.com/article/DGXMZO44101430T20C19A4MM8000/

 

この記事からわかるように早めにプログラミングを習っておいた方がいいと思います。今までプログラミングをやってなかったかたも挑戦してみることをオススメします。

 

プログラミングスクールにいくなら絶対、株式会社divの教材をオススメします。(*宣伝費等はもらっていません。自分の本心からの言葉です。)

株式会社divの社長である「まこなり社長」はYouTubeで情報発信をしていて、とても有益な情報を無料で提供してくれています。

オススメの動画


「イシュー」がない人はヤバイ

 

参加費無料で完全マンツーマンの無料カウンセリングしてくれるみたいなので、まぁ試しにポチるのも悪くないのかなと。

 

ポチるかポチらないのかはあなた次第ですが、結局行動する人しか人生を豊かには出来ないと思うので行動した方がいいのかなーと。一応以下にリンクは貼っておきます。興味のある方はどうぞ。

 

 

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

 

それではまた明日!