アプリ開発

HOME
４．Python
アプリ開発
Visual Studioを使ったFlaskアプリ開発の基本

2018年5月26日 / 最終更新日時 : 2018年5月26日馬場真哉アプリ開発

Visual Studioを使ったFlaskアプリ開発の基本

Visual Studioを使って、画面に単純な文字を表示するだけの、ものすごく単純なFlaskアプリケーションを開発します。
Visual Studioを使うことで開発は比較的簡単になるかと思います。templateを使った実装も解説します。

この記事ではWebアプリの開発を何も知らない人を対象とします。といっても、この記事の著者もWebアプリ開発に明るくありません。自分の勉強の意味も込めて書きました。
誤りが含まれるかもしれませんが、ご容赦ください。何かあれば、ご指摘いただけますと幸いです。

スポンサードリンク

1．Flaskとは

FlaskはPythonにおけるWebフレームワークの1つです。WebアプリをPythonで作る際に用いるフレームワークの候補の1つとなります。ほかにはDjangoなどがあります。
Flaskは軽量なWebフレームワークと呼ばれます。これ単体でできることは多くありませんが、代わりに比較的簡単に実装することができます。ほかのライブラリを組み合わせることで拡張することもできます。

2．Flaskプロジェクトの作成

Visual Studioのインストールとセットアップは『Python+Visual Studioで簡単アプリ開発』を参照してください。

Pythonでアプリを開発する場合は、メニューの「ファイル」→「新規作成」→「プロジェクト」の順にまずはクリックします。

「新しいプロジェクト」というウィンドウが出たら、左側のメニューから「△Python」を選択します。
そして以下のように「Pythonアプリケーション」を選択し、あたらしいPythonプロジェクトを作成します。今回は「flask_hello_world」という名前のプロジェクトを作ることにします。

そうしたら、以下のような画面が出てくるはずです（メニューは人によって異なるかもしれません）。
プロジェクト名と同じ名称で「flask_hello_world.py」というファイルができています。中央のエディタでflask_hello_world.pyを編集します。

ところで、今回はFlaskを使って、アプリ開発を行うのでした。
予めFlaskというライブラリをインストールしておく必要があります。
Visual Studioを使う場合は、右下の「Python環境」というタブをクリックして、「Python環境」ウィンドウを表示させることで、Visual Studio上でライブラリの管理ができるようになります。「flask」と検索窓に打ち込んで、インストールすればよいです。
ライブラリのインストールまで済めば、あとはコードを書くだけです。

スポンサードリンク

3．任意の文字を表示するWebアプリを作る

任意の文字を表示するWebアプリを作ります。表示させる文字は「あああああ」でも何でもいいのですが、「Hello World」と表示させることが多いので、それに従います。
flask_hello_world.pyに、以下のように記述します。
（これは、下2行とコメントを除き、「http://flask.pocoo.org/」から引用しました）

'''
Flaskで作る、ごく簡単なアプリケーションです
'''

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000, debug=True)

ここまで書きあげたら、「F5」を押すと、アプリが立ち上がります。黒い画面（コマンドプロンプト）が立ち上がるはずなので、そこに書かれているURL（おそらく『http://127.0.0.1:5000/』となっているはずです）をコピーして、Google ChromeやInternet Explorerなどのブラウザの張り付けると、「Hello World!」とだけ書かれたそっけないWebページが見られるはずです。
Visual Studio上の「■」ボタン（停止ボタン）をクリックすると、動作が止まります。動作を止めた後で、先ほどのURLにアクセスしてもエラーになります。

コードの説明をします。
1~4行目はコメントです。
5~6行目は「Flaskを使う場合のおまじない」という表現で濁しておきます。
大事なのは8行目からです。
『@app.route(“/”)』とすることで、トップページにユーザーがアクセスしたときの動作をここから記述することができます。
トップページにユーザーがアクセスすると、「hello」という関数が呼ばれます。
この「hello」関数は「Hello World!」という文字列を返すだけのものです。10行目の”Hello World!”という文字列を”あああああ”にすると、表示される文字も「あああああ」に変わります。

12行目の『if __name__ == “__main__”:』からは、「.py」ファイルの実行時の動作が書かれてあります。アプリを起動するように、という指示が書いてあります。app.run関数で、hostとportを指定しています。これで『http://127.0.0.1:5000/』にアクセスすると、結果を確認できます。
なお、『host=’127.0.0.1’』は指定しなくても同じ結果になるはずです。127.0.0.1はローカルホストと呼ばれる「自分を表すホスト名」を意味しています。『http://localhost:5000/』というURLにアクセスしても『http://127.0.0.1:5000/』と同じ結果になります。

『debug=True』とすると、何かエラーが出た際の修正などが楽になります。

文字を表示するだけなら10行ほどのコードで完成します。

↓は実行結果です。

4．テンプレートを使って画面を作る

もう少し凝った画面を作っていくことにします。

Flaskでは「static」と「templates」という2つのフォルダを作成するのが推奨されています。
staticフォルダには、画像ファイルやCSSファイル、JavaScriptファイルなどを格納します。
templatesには、HTMLファイルを格納します。ただし、普通のHTMLファイルではなく、Pythonプログラムと連携したテンプレートを格納します。

今回はstaticフォルダは作らず、templatesフォルダだけを作ることにします。
ソリューションエクスプローラーの、プロジェクトファイル名を右クリックして「追加」→「新しいフォルダー」を選択します。フォルダが追加されるので、templatesという名称にしておきます（フォルダを右クリックしたら何度でも名前を変えることができます。Visual Studioはよくわかんなければ右クリックしたら、何か起こります）。

staticフォルダをさらに右クリックして「追加」→「新しい項目」でHTMLファイルを選択します。『layout.html』という名称で保存します。
同様にして『index.html』と『sub.html』も作成します。

Webアプリを作る際は、単一のページで済むことは少ないです。そのため「様々なページに共通する部分」を『layout.html』に記載します。
ページ固有の内容については、個別に分けたテンプレートに記述をしていきます。
これは私のオリジナルなやり方というわけではなく、さまざまなプロジェクトで似たようなことが行われています。

Visual Studioは大変に高機能なので、HTMLファイルを追加しただけで、すでにコードが少し書かれた状態になっています。これを改造しろということですね。Visual Studioのバージョンによって少し変わるかもしれませんが、私の場合は以下のような内容が記されていました。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

headタグの中のtitleタグで囲まれた部分に、Webページのタイトルを書きます。
bodyタグで囲まれた部分が実際に画面に表示される箇所です。

layout.htmlを以下のように書き替えます。

<!DOCTYPE html>

<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

変えたのは3カ所だけです。
3行目の『lang=”en”』を『lang=”ja”』にしました。我が国は日本なので日本語を指定します。これはどうでもいいんですが（よくは無いけど）、重要なのは後の2つです。
6行目のtitleタグの中に『{{title}}』と入れました。
9行目を追加して『{% block content %}{% endblock %}』としました。

6行目のような、中括弧を2つつなげたものを入れ込むことで、Pythonのプログラム（今回は『flask-hello-world.py』）から値を受け取ることができます。
値の受け取り方はほかにもあるのですが、とりあえず、これで、記事のタイトルを自由に変更できるようになりました。

またbodyタグの中に『{% block content %}{% endblock %}』と記載することで、「index.htmlなどの記述をこのブロックに入れ込むよ」という指定ができます。

残りのindex.htmlとsub.htmlには、全く同様の記述をすることにします。以下のように書きます。

{% extends "layout.html" %}

{% block content %}

<p>ここに何かを書く！！</p>
<p>{{contents}}</p>

{% endblock %}

ポイントは3つ。
まずは頭に『{% extends “layout.html” %}』と記すことでlayout.htmlのレイアウトを参照することができます。
次に、画面に表示する内容を、3行目『{% block content %}』と8行目『{% endblock %}』で囲みます。こうすることで、layout.htmlとの対応が取れます。
最後に、画面に表示する内容を記します。pタグは段落を表します（ここら辺はHTMLの基本を別途学ばれた方が良いでしょうが）。
『{{contents}}』という記述を入れたので、これもやはりPythonプログラムから値を受け取って、内容を変更させることができます。

ちなみに、2つのHTMLファイルで同じ記述としたのは、あくまでも勉強のためです。

最後に、頑張って作ったHTMLファイルを呼び出してもらうように、『flask-hello-world.py』を修正しましょう。全部書くと以下のようになります。

'''
Flaskで作る、ごく簡単なアプリケーションです
'''

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template(
        'index.html',
        title='Home Page',
        contents='インデックスです'
    )

@app.route("/sub")
def sub():
    return render_template(
        'sub.html',
        title='Sub Page',
        contents='サブページです'
    )

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000, debug=True)

まずは5行目。インポートするものが増えました。render_templateもインポートしないと動かないので注意してください。
9行目からのhello関数を改造しました。
render_template関数の結果を返すように変更されています。この関数の引数に、先ほど作った『○○.html』を入れるわけです。中括弧2つ{{}}のなかに受け渡す文字列もここで指定します。

まったく同じように、16行目からsub関数を定義しました。
これで例えば『http://127.0.0.1:5000/』にアクセスすると「インデックスです」とでて、『http://127.0.0.1:5000/sub』にアクセスすると「サブページです」と出るようになります。

↓は実行結果です。

—————

参考文献

独学プログラマー Python言語の基本から仕事のやり方まで

Pythonのことがさっぱりわからないという方は、この本から入ると良いかと思います。あまり分厚くない本ですので、読み切ることは難しくないはずです。
Pythonの基本文法やコードを書くコツなどが載っています。

入門Python3

こちらは分厚い本ですが、その分細かく載っています。Flaskの解説も少しあります。辞書的な使い方をしても良い本かと思います。

演習で力がつく HTML/CSSコーディングの教科書

HTMLとCSSはこの本を読んで勉強した記憶があります。
Web開発の本はたくさんあるので、お好きなものを選ばれても良いかと思います。

書籍以外の参考文献

Welcome | Flask (A Python Microframework)
英語ですが、Flaskの基本的な事柄はここで学ぶことができます。

Flask入門 — flask 0.1 documentation
こちらは日本語でFlaskの基本を学べるサイトです。

HTMLクイックリファレンス
HTMLの書き方で悩んだらここを見ます。

スポンサードリンク

更新履歴
2018年5月26日：新規作成

カテゴリー: アプリ開発、４．Python

タグ: Flask Python Visual Studio Web

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

アプリ開発

2018年5月26日

アプリ開発

2018年5月26日

Visual Studioを使ったFlaskアプリ開発の基本

目次

1．Flaskとは

2．Flaskプロジェクトの作成

3．任意の文字を表示するWebアプリを作る

4．テンプレートを使って画面を作る

参考文献

書籍以外の参考文献

コメントを残すコメントをキャンセル

Visual Studioで作ってみたFlaskアプリ

Visual StudioのFlaskプロジェクトの活用

目次

1．Flaskとは

2．Flaskプロジェクトの作成

3．任意の文字を表示するWebアプリを作る

4．テンプレートを使って画面を作る

参考文献

書籍以外の参考文献

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル