公開日：4/21/2020
    シェア：

    (Flask)のチュートリアルをやってみる！（クイックスタート編①）

    　
    Flask公式サイト（https://a2c.bitbucket.io/flask/）

    Flaskには公式の解説ページ（https://a2c.bitbucket.io/flask/index.html）が準備されています。
    でも、コレを見ても何がどうなってどうなるのかがわかりにくいので、実際にやってみながら、それぞれが何をしているのかを探っていきたいと思います！

    また最初から環境を整えるのは大変なので前回作ったものをいじっていきます！
    今回はFlask公式のクイックスタートをやっていきます。

    最小規模のFlaskアプリケーション

    こちらは前回作ったものとほぼ同じものから始まります。既に
    # -*- coding: utf-8 -*-
    from flask import Flask
    app = Flask(__name__)
    @app.route('/')
    def welcome_Python():
        return 'ようこそ！Pythonプログラミングの世界へ'
    が入っていると思いますが、最後に
    if __name__ == '__main__':
    app.run()
    を追加しておきます。これを入れておくと実行が楽になります。

    「#」でコメントを入れる

    ここでもうひと手間。コメントをいれておきましょう。
    コメントはプログラムの実行に関係のないメモのようなものです。今回だと先程の「if__name.....」の上に「#これを入れるとpython welcome.pyで実行できる」を入いれておきます。
    「#」を入れるとその行がコメントとして扱われるので、メモ書き等々入れることができます。
    この時点でのコード
    では、これで実行してみましょう。
    実行はターミナルからというのはもうOKですよね？しかし、「if__name.....」をいれたのでSpiderの「▶（ファイルを実行）」を押せば実行できるんです。

    では、http://127.0.0.1:5000にアクセスしてみましょう。テキストが表示されればこのステップはクリアです。
    実行結果

    デバックモードで実行する

    続いて、デバックモードでの実行方法を見ていきます。コードを変更すると自動的に更新・反映してくれるという便利モードで、開発中は基本「デバックモード」がおすすめです。
    デバックモードのコードは簡単。
    app.debug = True
    をapp.run()の上に追加するだけです。
    これでコードを変更するとすぐに反映されるようになります。
    ここまでのコード
    「ようこそ！Pythonプログラミングの世界へ」を変更して保存→結果を表示しているブラウザを更新すると書き換えた内容に変わります。


    ルーティング

    このあたりから難しくなってきます！
    まずはルーティング！URLによって処理（表示）を変えます。とりあえずやってみましょう。
    @app.route('/')
    def welcome_Python():
        return 'ようこそ！Pythonプログラミングの世界へ'
    の下に
    @app.route('/second_page')
    def second_page():
        return '2ページ目です'
    を追加で入れます。
    予算ですが、second_pageを2nd_pageにしようとすると数字のところでエラーがでます。
    では、これで結果を見てみましょう。
    ①http://127.0.0.1:5000/の結果


    ② http://127.0.0.1:5000/second_pageの結果
    はい！アドレスに合わせて表示されるページが変わりましたね！これが「ルーティング」です。
    補足ですが、便宜上2ページと書いていますが、正確には表示される文字列がURLの文字列で変わる仕組みです。

    変数ルール

    続いて、URLに入力した内容を結果に表示する「変数ルール」をやっていきます。
    例えば、http://127.0.0.1:5000/○○○○とアドレスに入れたときに〇〇〇〇を表示する方法です。

    早速、下のコードを追加しましょう。
    @app.route('/')
    def show_text(Input_text):
        return 'アドレスに追加されたのは... %s' %Input_text
    だんだん難しくなってきましたが、よく見ると見覚えがある気もしますよね。詳しい解説は実行の後にご紹介します。

    ここまでのコード
    では、これで保存をしてから下のアドレスで結果を確認してみましょう！


    http://127.0.0.1:5000/○○○○とアドレスに入れたときに〇〇〇〇の部分が表示されました。

    変数とは？

    さて、ここで出てくる「変数」ですが、プログラミングをやったことがある人であれば馴染みがありますが、初心者だと知らない人もいるかもしれませんね。
    プログラミングでは、数字とか文字で何かをするときには「変数」を使うことが多々あります。
    ここで定番の例えになるのが「箱」です。数字や文字は箱に梱包をしてやり取りをします。
    今回のコードであれば「Input_text」が変数で、その中にアドレスの最後の「/」以降の文字列を入れようという内容です。

    そして、この変数には入れるものによって種類があります。（箱の大きさみたいなもの）
    • string　　文字列
    • int 整数
    • float 小数点のある数字
    • path アドレスに便利
    それに合わせて
    return 'アドレスに追加されたのは... %s' %Input_text
    の「%s]も変わります。
    • %s・・・文字列
    • %d・・・数字

    URLビルド

    URLを指定のページにジャンプするのに便利な機能です。例えば処理などをしたあとに確認画面やありがとう画面などにジャンプさせるときに使います。
    公式サイトの通りだと、うまく動かない（エラーがでる）ので、先人たちの知恵をお借りして動かしてみます。

    まず、コードの変更していきます
    ①from flask import Flask　を変更する
    from flask import Flask
    ↓ 
    from flask import Flask, url_for, redirect
    ②コードの追加
    @app.route('/jump_page')
    def jump_page():
        return redirect(url_for("welcome_Python")) 
    ①でurl_forとredirectの機能を使えるようにしました。URLビルドはこの「url_for」の使い方がメインのようです。
    次に②で「jump_page」というアドレスがくっついたら「welcome_Python」の処理をしてね...となります。
    ここまでのコード

    では、これでどんな動きをするかを見てみましょう。保存をしたらブラウザで下のアドレスを確認してみましょう。

    http://127.0.0.1:5000/jump_page の結果


    welcome_Pythonのページにリダイレクトされました。
    HTTP メソッド
    公式のテキストを簡単に解釈すると「ユーザーが入力した情報を送る」という操作です。ここでは「GET」や「POST」など使うんですが、今回も実際にコードを書いて動かしながら見ていきしょう。

    まず、コードを変更していきます
    ①from flask import Flask　を変更する
    from flask import Flask, url_for, redirect
    ↓
    from flask import Flask, url_for, redirect, request

    ②コードの追加
    コードが文字化けするので画像ですみません
    まず①でrequestを使えるようにします。②で入力する画面を出すのですが、ちょっと難しいので詳しい内容は簡単に。ここのポイントは「if」と「form」です。
    ここまでのコード
    では、これでどんな動きをするかを見てみましょう。保存をしたらブラウザで下のアドレスを確認してみましょう。

    http://127.0.0.1:5000/jump_page の結果


    適当に文字を入力して「OK」をクリックしてみましょう


    入力した文字が表示されました。

    スタティックファイル・レンダリングテンプレート

    これでも十分WEBアプリケーションを作れたような気がするのですが、やはりHTMLのファイルがないと不便です（というより、使い物にならない...）
    と、いうことでクイックスタートの残りの部分についてはWEBページを作りながら説明していきます。
    まず、下準備としてフォルダとhtmlファイルを作ります。

    ①フォルダをつくる

    場所はルートフォルダ（この通りにやっていればprjFlaskWeb）の中。名前は「templates」です。（フォルダの名前は決まっているので勝手に変えないように注意！）


    ②htmlファイルを作る

    「templates」の中に「page01.html」「page02.html」というファイルを作成します。


    ファイルが追加されたのが確認できます。

    では、それぞれのHTMLを作っていきましょう。

    page01.htmlのコード

    page01.htmlには次のコードを入れていきます。
    文字化けするので画像ですみません。

    page01.htmlのコード

    page02.htmlのコード

    page02.htmlには次のコードを入れていきます。
    文字化けするので画像ですみません

    page02.htmlのコード

    メインのコード（welcome.py）を変更

    続いて、welcome.pyも書き換えておきましょう

    ①from flask import Flask, url_for, redirectに追加
    from flask import Flask, url_for, redirect
    ↓
    from flask import Flask, url_for, redirect, request, render_template
    ②次のコードを追加
    @app.route('/page01/')
    def page01():
        return render_template('page01.html')
    @app.route('/finish/')
    @app.route('/finish/')
    def finish(name=None):
        return render_template('page02.html', name=name)
    では、それぞれの動きを見ていきましょう。

    http://127.0.0.1:5000/page01/の結果

    http://127.0.0.1:5000/finish/の結果

    http://127.0.0.1:5000/finish/読者/の結果
    アドレスで表示するページを分けることができました。注目点は表示する内容を①Pythonのコードで分ける②HTMLで分けるの2通りがあるという点。使用用途に合わせて変更していきましょう。

    結構長くなったので、今回はここまで！続きはまた次の記事でご紹介します！