Environment)でFlaskを用いて簡単なWEBアプリをつくります。想定レベルは「Progateで一通りPythonはやったけど、まだ実際にアプリを作ったことはないしフレームワークなにそれ」の人です。...ごめんなさい、若干盛りました。わからない人は先にこのページを読んできてください。理解していなくても大丈夫です。...あ、httpプロトコルについては簡単に知っていた方がいいですね。「GETメソッド」「クエリ」「絶対パス・相対パス」の意味くらいはわかってからの方がいいと思います。ぐぐればトータルで15分くらいで理解できる内容かと思います。基本的に公式チュートリアルを日本語で噛み砕いた内容です。virtualenvはインストール済み想定です(インストールがまだの場合はこちら)。念のため最新版にアップデートしておきましょう。今回はGAEのスタンダード環境の制限のため、Pythonについては2.7でないといけません。3.5などをインストールしている場合もこちらを参考に2.7に切り替えておいてください。SDKもインストール済みです。Engineにデプロイディレクトリを準備まずは自分のPC上で今回つくるアプリのディレクトリ(フォルダ)を作成します。今回は「myapp」というフォルダを作ったことにして話を進めます。(写真は中にいろいろ入ってますが、これは完成系です。今はmyappフォルダをつくってくれればOK)ディレクトリの中身はこんなかんじです。(それぞれのファイルの用意の仕方もこれから解説します。)※なお、たとえばtemplates/とは「templates」という名前のディレクトリ(フォルダ)のことです。ターミナル(コマンドライン)がわからない方は先にProgateかなんかで学習してきた方がいいと思います。myapp/main.pystatic/templates/app.yamlappengine_config.pyrequirements.txtなお、GAEに限らずFlaskで必要となるのはtemplates/より上の部分です。app.yaml以下はGAE用の設定ファイルです。以下の内容のpythonファイルをつくってmyappフォルダの直下に置きます。以下の内容のテキストファイルをつくってmyappフォルダの直下に置きます。拡張子は.txtです。Flask==0.12.2Werkzeug<0.13.0,>=0.12.0ここに書いたものがあとでpipコマンドによってlibディレクトリにインストールされるわけです。今回はFlaskフレームワークを利用します。FlaskはWerkzeugというWSGI規格のアプリ(これは...そういうもんと思ってください)をつくるためのツールと、Jinja2というテンプレートエンジン(HTML内に動的に変数を埋め込むもの。PHPでいうTwig)を利用します。▷WSGIがなんなのか気になる方はこちらの記事がわかりやすかったです。あれJinja2はインストールしなくていいのかと思われたでしょうが、これでJinja2もセットでダウンロードされます。ここではFlaskとWerkzeugのバージョンを指定するので、なるべく最新の安定版を指定しましょう。最新版はこちらから確認できます。PyPIVirtualenvをアクティベートVirtualenvはその名の通り「仮想環境」です。これからWEBアプリに必要な各ライブラリや依存ファイルをダウンロードするのですが、Virtualenvを利用すれば自分のMacをごちゃごちゃにしてしまう心配がありません。ここからはターミナルを使います。さきほど作成したmyappフォルダに移動します。▷Macの場合、フォルダを右クリック→Optionを押していると「"〜〜〜"のパス名をコピー」というメニューが出るので、それをクリックしてペーストすればOKです。パス名にスペースが含まれているとエラーになります。いう場合はパスを""(ダブルクォーテーション)で囲えばOKです。myappフォルダのパスVirtualenvに必要なenv/ディレクトリを自動生成します。env自動生成したenv/bin/activateに対してsourceコマンドを実行すると、virtualenvがアクティベートされます。(=以降は仮想環境に入ります)なお、仮想環境を終了するときはdeactivateと入力すればOKです。env/bin/activateライブラリをダウンロードFlaskライブラリをpipでダウンロードします。6.0.0以上である必要があります。--versionで確かめましょう。それ以下ならこちらを参考にアップデートしてください。ちなみにGAEのスタンダード環境では2018/5/29現在、利用可能なPythonのバージョンは2.7となります。Enviroment)を選択する必要があります。それぞれの環境の違いはこちらの公式ガイドをご覧ください。以下のコマンドを入力します。意味は「libフォルダにrequirements.txt(さっき作ったやつ)に書かれているものを全てインストールする」ということになります。requirements.txtこれでmyappにFlaskとWerkzeugをインストールできました。Engineに対してアプリケーションの構成を伝えるファイルです。以下の内容のテキストファイルをつくり、ファイル名を「app.yaml」にしてmyappフォルダの直下に置きます。latestなお、app.yamlの詳しい書き方はこちらに公式リファレンス(英語)があります。Engineのための設定は終わりです。ここからはFlaskアプリケーションの設計になります。出力するHTMLを用意するFlaskでは出力するHTML(HTML以外にもXML、XHTMLにも対応しています)をtemplates/ディレクトリに入れておきます。今回は簡単なWEBページを表示するので、HTMLファイルを用意します。静的な(普通の)HTMLだけでなく、文中に変数を埋め込んだ動的なHTMLも用意できます。その時に使うのがテンプレートエンジンであるJinja2ですね。▷ちなみにどうでもいいですが、Jinjaは「神社」です。公式サイトを覗いてみると鳥居までありますよ。今回は静的なHTMLファイルと、Jinja2で変数を埋め込んだHTMLファイルの2通りを用意します。静的なHTMLファイルこれはもうそのまんまです。今回はこんなかんじのHTMLファイルをつくって、toppage.htmlという名前でtemplates/ディレクトリに保存します。}}で囲った部分が変数として扱われます。今回は受け取ったユーザーの名前を表示するページを作ってみます。}}に、次のステップで作るmain.py内のPythonコードから値を渡すわけです。作ったファイルの拡張子は普通に.htmlでOKです。showname.htmlという名前でtemplates/ディレクトリに保存しましょう。main.pyを書くmain.pyはその名の通り、Pythonで書かれたFlaskアプリのメインファイルです。基本的なFlaskアプリの仕組みは、main.pyが通信リクエスト(httpなど)を受け取るtemplates/に格納されているHTMLファイルをレスポンスとして返すという流れになります。static/フォルダにはCSSやJavascript、画像ファイルなどのHTMLから参照する静的(static)なファイルをいれておきます。当然ながら実用的なWEBアプリをつくるにはすべてのPythonコードを1ファイルに書いていたら管理しにくすぎるのでファイルは分割しますが、べつにmain.py1ファイルにすべてのコードを書いてもOKです。今回は初めてのFlaskアプリ作成なので、全体の流れを見通すために1ファイルで書くことにしましょう。以下、main.pyの内容です。テキストエディタで作成しましょう。文字コードを指定するコード中に英数字しか書かないなら問題ないのですが、もし日本語を含める場合は文字コードを指定しないとエラーになります。最初にこのようにコメントの形で書けばOKです。プログラムの1〜2行目にこのようなコメントを書くと例外的にコメントではなく文字コードの指定として扱われます。UTF-8flaskパッケージをimportするさて、そうしたらまずはflaskのライブラリ(flaskモジュール)を読み込みます。flaskflaskモジュールとはすなわちflask.pyのこと...とProgateで習いましたよね。flaskはflask.pyを読み込むはずです。libフォルダのどこを探してもflask.pyなんていうファイルはありません。...じゃあどうなっているのかというと、Pythonには「パッケージ」という機能があります。flaskはflask/ディレクトリ内すべてを読み込みます。正確にいうとimportしたのはflaskモジュールではなくflaskパッケージです。インスタンス'app'を作成するflaskパッケージをimportして最初にやることは、flaskパッケージ内(具体的にはapp.py)で定義されているFlaskクラスのインスタンスを作成することです。Flaskクラスはアプリケーションそのものを定義するクラスです。よってFlaskクラスのインスタンスはアプリケーションそのものです。Flaskクラスの引数にはモジュール/パッケージ名を入れます。今回はmain.py(='main'モジュール)1ファイルで作成するので、こうなりますね。flask.Flask('main')これはつまり、「appインスタンスは'main'モジュールを参照するFlaskアプリケーションである」ということです。...おいおい、自分自身のファイル名もわざわざ入力してやらなきゃわかんねえのか?と思いますよね。実はもっといい書き方があります。Pythonには__name__という変数が予約されています。これは自分自身のモジュール/パッケージ名を表します。▷厳密には場合によるのですが、またこんど説明します。上のコードはこのように書き換えられます。flask.Flask(__name__)ルーティングを作成するappインスタンスを作成したら、あとはFlaskクラスに定義されているメソッドであるrouteを利用してパス(URLのこと)ごとの処理を関数として書いていくだけです。イメージわいてきたでしょ?さて、routeメソッドの内部処理がどうなっているのか見ていくのはprint関数の仕組みを見るのと同じで、つまり「WEBアプリケーションをつくる」という観点からすると不要です。実用的には、「routeメソッドにパスと関数を渡すと、そのパスにアクセスしたときにその関数を実行する」という理解でOKです。▷厳密には「アクセス」というか「リクエスト」です。一般的にブラウザでWEBサイトにアクセスするということは、サーバーに対してURL(パス)という形のリクエストを送り、そのリクエストに対するレスポンスとして受け取ったHTMLを画面に表示しているわけです。一般的なWEBサイトでもバックグラウンドで使う(REST)サーバーでも、仕組みは一緒です。詳しくは「通信プロトコル」とか「httpリクエスト」についてぐぐってもらえれば勉強できます。具体的にどうやって「パスと関数を渡す」のでしょう。理解していればここは想像がつきますね。理解していなくても実用上は問題ないのですが、理解しておけばなんでこの形になってるかがわかります。解説はこちらからどうぞ。ついて軽くおさらいします。今回routeはappのインスタンスメソッドなので、app.routeの形で呼び出します。ルーティングの形はこうなります。処理あとはこのセットをパスの数だけ用意して、それぞれにパスごとの処理を書けばいいのです。今回は初めてなので、まずはさっき用意した静的なページtoppage.htmlを出力することにしましょう。トップページにしたいので、@app.routeの引数は'/'とします。パス(=リクエスト)が'/'のときの処理を関数として書きます。関数名はなんでもいいです。今回は引数はいらないですね。templates/に格納しているHTMLを出力するには、flaskパッケージに定義されている関数であるrender_template(ファイル名)を利用します。flask.render_template('toppage.html')これで、「'/'にアクセスされたときはtoppage.htmlを出力する」というコードができました。...実は、(トップページを表示するだけでいいのであれば)ここまででもうWEBアプリは完成しているのです。コードらしいコードなんて最後の数行だけしか書いてないのに、もうこれで一通りなのです。あとはページやら処理やらを増やしていくだけです。今回はもうひとつページをつくります。先ほどshowname.htmlをつくりましたね。あれを出力しましょう。今度はJinja2による埋め込みのある、動的なページです。さっきと同じようにrender_template('showname.html')をやるだけだと、埋め込んだ変数を利用できません。実はrender_templateメソッドには出力するファイル名以外にも引数を渡せます。name='フラスク太郎')これでOKです。雰囲気でわかると思いますが、引数としてテンプレート内の変数に値を代入できるのです。film='ベニスに死す')のようにいくらでも増やせます。これでは表示する名前が「フラスク太郎」に固定されてしまって、変数を埋め込んだ意味があまりありません。いうことで、クエリで受け取った名前を出力するようにしてみましょう。▷「クエリ」とはhttp://exapmle.com/abc?name=taro&age=50のようなリクエストURLの?name=taro&age=50の部分です。このURLの意味は、「パスはhttp://exapmle.com/abc、nameはtaro、ageは50」という意味です。パラメータを複数用意するときは&で接続します。FlaskではURLやクエリを扱うメソッドが用意されています。完全なURLはrequest.urlで取得できますし、クエリ文字列はrequest.query_stringで取得できます。クエリを扱う際に最も便利なのはrequest.argsです。ここにクエリパラメータが辞書型で入っています。'taro'となります。name=name)これでmain.pyは完成です!完成したmain.pymain.pyはこのようになりました。name=name)ちなみに下のように書いても同じことです。import文の挙動を理解していればわかりますね。/JavaScriptや画像ファイルなどstatic(静的な)ファイルを用意する場合はstatic/フォルダにいれておきます。Storageのような外部サービスを利用しても全く問題ありません。今回はCSSを用意しましょう。以下のような内容のCSSファイルを作って、stylesheet.cssという名前でstatic/フォルダ内に保存しましょう。background:pink;}用意したCSSを読み込むようにHTMLにCSSへのリンクを加えましょう。今回はトップページのみこのCSSを読み込むようにします。toppage.htmlを以下のようにします。</body></html>app.yamlを作成した際に、こんなふうに設定していました。main.appこれは「URLが'/static'で始まる場合はstatic/フォルダを参照し、それ以外はmain.appに渡す」という指示になっています。Engineにデプロイする(アップロードして利用可能にする)だけなんですが、その前にちゃんと動くのか手元で試しに動かしてみましょう。SDKで簡単にできます。ここからはターミナルでの作業です。myapp/フォルダの直下(ルートディレクトリといいます)に移動します。myappフォルダのパスそうしたら、以下のコマンドを入力します。app.yamlこれで、自分のPCの8080番ポートで今作ったアプリが動いている状態になりました!ブラウザで以下のURLにアクセスしましょう。▷'localhost'とは自分自身という意味です。http://localhost:8080/...ちゃんとこんな画面が表示されましたか?背景がピンク色なら、CSSもしっかり配置できているということですね。試しにhttp://localhost:8080/static/stylesheet.cssにアクセスしてみると、ちゃんとCSSファイルが表示されます。次は/shownameページをみてみましょう。http://localhost:8080/shownameこんな画面が表示されましたね?クエリをつけなかったので、名前を表示する部分には'None'が入っています。これを避けるにはif文でパラメータが空の場合の挙動を設定してあげればいいですね。(今回はそこまでやりませんが、このくらいのアレンジはもうできますよね?)クエリに名前をいれてもう一度アクセスしてみましょう。http://localhost:8080/showname?name=フラスク太郎パラメータ'name'の値が変数nameにちゃんと代入されています。app.yamlの実行中にmyapp内に変更を加えることができます。変更はすぐに反映されます。リアルタイムプレビューとして利用できるので、これは開発に便利ですね!試しにどこかいじってブラウザを更新してみてください。テスト(localhost:8080への出力)を終了するには、ターミナルでcontrolキーを押しながらcです。Engineにデプロイします。SDKでワンコマンドです。myappのルートディレクトリに移動します。myappフォルダのパスgcloudコマンドでデプロイします。ID」に書いてある英数字をそのままコピペします。プロジェクトIDこれでデプロイ完了です!▷デプロイについて詳しくはこちらの公式チュートリアル(英語)をご覧ください。いまデプロイしたmyappは世界中に公開されています。デフォルトのURLは以下のようになります。http://プロジェクトID.appspot.com/もちろん独自ドメインを設定することも可能です。Engineから利用する前提知識はProgateでのPythonレッスン修了レベルです。noshift.workというサイトを運営しています。このブログではサイト運営のこととか技術的なことを書こうかなと思っています。Beatlesが好きな人は今度カラオケオールしましょう。当サイトをご利用いただくにあたって、訪問者の方は以下のプライバシーポリシーに同意したものとみなさせていただきます(同意頂けない場合は当サイトをご利用いただけません)。非個人情報の収集について当サイトではサイト内容の改善のため、Google社によるアクセス解析ツール「Googleアナリティクス」を利用しています。アドレスやこれまでアクセスしたウェブサイト、デバイス特有の情報、ロケーション情報、および本サービスに関連して訪問者のデバイスに保存され、当該デバイスにおいてアクセスされ、当該デバイスから収集されるその他の情報(場合により、Cookie管理に関する訪問者のオプションに関する情報を含みます)など特定の情報がお使いのウェブブラウザからGoogle社に自動的に送信されます。これらは匿名の情報として送信され、訪問者の個人を特定するようなものではありません。収集された情報は、サイト内容の改善や利用状況の把握の目的で統計的に利用いたします。このデータの収集にはCookieが使用されており、Google社がお使いのブラウザからCookieを読み取るほか、Cookieを設定することもあります。Cookieを無効にすることでトラフィックデータの収集を拒否することが出来ます。お使いのブラウザから設定してください。Analytics利用規約https://www.google.com/analytics/terms/jp.htmlGoogle社プライバシーポリシーhttp://www.google.co.jp/intl/ja/policies/privacy/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。