2018-07-23スポンサーリンク追記(2018/08/15)ソースコードの全体像を載せてなかったので、Githubのリポジトリを公開しておきます。拙いコードで恥ずかしいですが、記録として残しておきます。https://github.com/alumi-mic/flasksample-hatebu今回はFlaskアプリケーションでテンプレートビューを使用してページを表示するところまで実践します。FlaskでHelloWorldアプリをつくる本記事の構成この記事の構成は以下の通り。今回作成するファイル構成は以下の通りです。前回作成したflaskAppディレクトリ下に作成していきます。この記事は初心者向けの記事ではありますが、ディレクトリとファイルの作成は最悪コマンドがわからなくてもGUIでできるので割愛します。ファイルの解説も簡単に付け加えておきます。#pythonスクリプトがあるディレクトリを表す役割を持つ。今回はシンプルなアプリです。先日作成したはてぶのスクレイピングプログラムで抽出した人気記事を表示するだけのものです。app.run()bs4を使ったスクレイピング機能に関してはこっちの記事で簡単に解説してあるので割愛します。今回はflaskで動作している部分を解説していきます。requestsとbs4を読み込みます。installで入れておきましょう。BeautifulSoup次がとても重要です。Flask(__name__)は、appという変数にFlaskクラスのインスタンスを代入する処理です。flaskの基礎になるWSGIに基づくWebアプリケーションには、実際のアプリケーションを実装する呼び出し可能オブジェクトが必要になります。それがflaskクラスのインスタンスです。このflaskのインスタンスを明示的につくるのがこのコードの役割というわけです。以下のコードについて。こちらは、機能としてはapp.pyを実行すればサーバーが立ち上がるようにするためのものです。コマンドで呼び出された場合は実行され、importなどにより呼び出された場合は実行されない、という機能になっています。次はテンプレートビューにデータを送るコードについて。render_template('index.html',hatebu_array=hatebu_array)ここで行っているのは、はてぶのお気に入り数20以上の投稿のタイトル・URL・お気に入り数の三つのデータを抜き出して、hatebu_arrayに挿入する作業です。hatebu_arrayは、以下のような二次元配列になります。]最後に、rennder_tenmplateメソッドでテンプレートにデータを送っています。rennder_tenmplateメソッドには、第一引数に送り先のテンプレートファイル、第二引数以降に送りたい変数を入れます。次はテンプレートの作成を行います。テンプレートビューの作成templatesディレクトリ下にある、layout.htmlをまずは編集しましょう。これが複数のテンプレートの共通部分になります。</html>基本は普通のHTMLと同じですが、bodyの中に特殊な記述があります。これがFlaskが採用しているテンプレートエンジンjinja2で、PythonコードをHTML内に書き込むための記法です。</body>次に、今回のメインのページとなるindex.htmlを見ていきます。%}でベースになるテンプレートを読み込んでいます。%}の間にHTMLが書かれています。この中身が先ほどのlayout.htmlのbody内にはめ込まれます。HTMLの中でPythonのfor文を動かして文字を表示させてます。実行!Flaskのアプリを実行します。前回はいろいろ面倒なコマンドを書きましたが、今回はapp.pyをpythonで実行するだけで完了です。app.py一応今回で簡単なアプリケーションができてしまったわけなので、次回はherokuにデプロイしてネット上に公開する方法を解説しようと思います。コメントをキャンセルメールアドレスが公開されることはありません。千葉県を中心にボランティア活動や勉強会などを行っています。好きな言語はC#とPythonとC++です。関係の技術が好きです。XamarinとかTypeScriptも触ってます。質問・相談・お仕事のご依頼は、Twitterまたは問い合わせフォームまで。今月の人気記事1一年間プログラミングを独学した過程を振り返ってわかったこと。