Visual StudioのFlaskプロジェクトの活用
Visual Studioは大変に高機能ですので、ボタンをポチポチ通すだけで、簡単にFlaskアプリケーションを作ることができます。
Visual Studioによって自動で作成されたFlaskアプリケーションを眺めることで、Flaskアプリケーションの開発の仕方を調べるとともに、自動生成されたプロジェクトの改造の方法も見ていきます。単純なアプリであれば、ゼロから作るよりも、改造をするだけの方が簡単に開発ができるように思います。
この記事はVisual StudioとFlaskでアプリを作ってみたという一連の記事の中の1つです。
詳しくは以下の記事も参照してください
・Visual Studioで作ってみたFlaskアプリ
この記事ではWebアプリの開発を何も知らない人を対象とします。といっても、この記事の著者もWebアプリ開発に明るくありません。自分の勉強の意味も込めて書きました。
誤りが含まれるかもしれませんが、ご容赦ください。何かあれば、ご指摘いただけますと幸いです。
スポンサードリンク
目次
- Flaskプロジェクトの作り方
- Flaskプロジェクトの構造
1．Flaskプロジェクトの作り方
Flaskプロジェクトを作ってみましょう。
Visual Studioのインストールとセットアップは『Python+Visual Studioで簡単アプリ開発 』を参照してください。
Pythonでアプリを開発する場合は、メニューの「ファイル」→「新規作成」→「プロジェクト」の順にまずはクリックします。
「新しいプロジェクト」というウィンドウが出たら、左側のメニューから「△Python」を選択します。
そして以下のように「Flask Web プロジェクト」を選択し、あたらしいPythonプロジェクトを作成します。今回は「FlaskWebProject1」という名前のプロジェクトを作ることにします(何も変えなければ、最初からこの名前になっているはずです)。
以下のような画面がでることがあります。この時は推奨通り『仮想環境にインストール』を選んでおきます。
プロジェクトが出来上がった状態で、キーボードの「F5」を押すと、Google Chromeなどのブラウザが立ち上がって、以下のような画面が出てきます。
おめでとうございます。Flaskアプリケーションの完成です！
以前にこのサイトで取りあげたHello Worldと表示するだけのアプリ『VisualStudioを使ったFlaskアプリ開発の基本』と比べると、シュっとしていてかっこよい画面ですね(もちろんプロのデザイナー様からすると色々と問題があるのかもしれませんが)。
どうでもいい（？）推しポイントを述べておくと、ブラウザを左右縮めてやることで中身がシュシュシュシュっと移動して、画面に収まってくれます(なんだか楽しいんですが、実は後述するようにFlaskとはあまり関係がない機能です)。
右上の三本線(ハンバーガーメニューというらしい)をクリックすると、メニューがミョロミョロっと出てきて、これも楽しいです(これもFlaskとは関係ない)。
ちなみに「Microsoft Azure」の「Learn More」をクリックすると、Microsoftさんのサイトに飛ばされます。Microsoftさんの商売魂がうかがえます。
アプリを終了させる場合は、Visual Studioの上の方にある赤い四角のボタンを押します。
スポンサードリンク
2．Flaskプロジェクトの構造
改造を施す前に、まずはプロジェクトの構造を見ていきます。
Visual Studioのソリューションエクスプローラー(右下にタブがあるのでそれを選択)を見ると、以下のようになっています。
たくさんファイルがありますね。
冗長な気もしますが、Webアプリに必要な要素を(すごく雑に)説明した後、Flaskアプリケーションのファイルの配置について説明する手順で進めていきます。
Webアプリに必要な要素
Webアプリを開発するだけ(実際にユーザーに使ってもらうところまでは考えない。個人で作るだけ)を考えた時でも、色々なことを覚える必要があります。HTMLとCSS、Javascript、そしてPythonの知識が最低限必要かと思います。順にみていきます。
HTML：Webページの”中身”を記述する。
CSS ：HTMLで書かれたWebページをオシャレにする
Javascript：ユーザーの操作に反応するものを作る
Python：ユーザーの操作に反応するものを作る
ここで微妙な立場にあるのがJavascriptです。今回はPythonのWebフレームワークであるFlaskを使ってアプリを開発するのですが、実はJavascriptだけでもアプリを開発するすることは可能です。どっちがいいんだといわれたら、作りたいものによって変わるとしか言えません。
「今回は」Javascriptをほとんど使わず、基本的にはPythonで実装していく方針にします。
Visual Studioが用意してくれたモノ
PythonでWebアプリを作りたいだけなのに、色々なことを覚えるのは大変ですね。最終的にはちゃんと勉強したほうがいいのでしょうが、ちょっとお試しで何かを作りたいという場合にはつらいです。
そこでCSSとJavascriptに関してはほとんど実装をせずに、「他の人が作ってくれた便利な道具」を使うことにします。
ソリューションエクスプローラーにおいて『static』フォルダに何やら色々入っていますね。
Visual Studioは大変に高機能なので、便利そうな道具を色々とプロジェクトに含んでくれています。邪魔だと怒る人もいるかもしれませんが、この記事ではこれらを使う(そしてVisual Studioが用意しなかったものは使わない)という方針で進めていきます。
『static/content』の中にCSSファイルが入っています。bootstrapという名前が見えますね。
Bootstrapについては例えば外部サイトですが『Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】』を参照してください。これを使うことで、ブラウザの左右の幅を狭めた時に中身がシュシュシュシュと移動してくれたわけです。
『static/script』の中にはJavascriptファイルが入っています。これも、何も考えずにそのまま使うことにします。
jQueryなどは有名なJavascriptライブラリです。この記事では紹介しませんが、興味があれば調べてみてください。
アプリの構成
サボってほとんどをあり物で済ますわけですが、自分で実装しないといけない部分ももちろんあります。
それは各種Pythonファイルと『static/templates』に入っているHTMLファイルです。
これらの役割を簡単に見ていきます。
まずはソリューションエクスプローラーの上から2番目の項目「FlaskWebProject1」と書かれたプロジェクトファイル名を右クリックして「プロパティ」を選択します。
左の「全般」タブを選択すると、「スタートアップファイル」として『runserver.py』と設定されているのがわかるはずです。
アプリを起動させる際「F5」キーを押したわけですが、この時に実行されるPythonファイルは『runserver.py』だということです。
こいつの中身を見てみます。
『runserver.py』
"""
This script runs the FlaskWebProject1 application using a development server.
"""
from os import environ
from FlaskWebProject1 import app
if __name__ == '__main__':
HOST = environ.get('SERVER_HOST', 'localhost')
try:
PORT = int(environ.get('SERVER_PORT', '5555'))
except ValueError:
PORT = 5555
app.run(HOST, PORT)
『app.run』関数を実行してアプリを起動させること”だけ”がこのPythonファイルの役割です。
『VisualStudioを使ったFlaskアプリ開発の基本』で作成したアプリでは、『flask_hello_world.py』という1つのファイルに、テンプレートを呼び出す機能も、アプリを起動させる機能も、全部実装していました。これを、役割ごとにファイルを分割したわけです。
今回の一連の記事では紹介しませんが、実際にアプリをデプロイさせる時などには、このように分けておいた方が便利なようです。
実装することだけを考えても、機能ごとにファイルを分割させた方が見通しが良くなりますね。
『runserver.py』の6行目で何やらインポートをしています。
ソリューションエクスプローラーの『FlaskWebProject1』フォルダの直下に『__init__.py』というファイルがあります。この名前のファイルを作っておくと、FlaskWebProject1をパッケージとしてインポートできるようになります。
『runserver.py』は『FlaskWebProject1というパッケージ』をインポートして、それを起動させているだけ、ということです。
『__init__.py』の中身は以下の通りです。
""" The flask application package. """ from flask import Flask app = Flask(__name__) import FlaskWebProject1.views
appを定義したうえで、viewsをインポートしています。
『views.py』の中身は以下の通りです。
"""
Routes and views for the flask application.
"""
from datetime import datetime
from flask import render_template
from FlaskWebProject1 import app
@app.route('/')
@app.route('/home')
def home():
"""Renders the home page."""
return render_template(
'index.html',
title='Home Page',
year=datetime.now().year,
)
@app.route('/contact')
def contact():
"""Renders the contact page."""
return render_template(
'contact.html',
title='Contact',
year=datetime.now().year,
message='Your contact page.'
)
@app.route('/about')
def about():
"""Renders the about page."""
return render_template(
'about.html',
title='About',
year=datetime.now().year,
message='Your application description page.'
)
『views.py』でようやくルーティングの実装が見えてきます。
例えば『/home』にアクセスすると、『home()』関数が実行されて、『static/templates/index.html』が呼び出されます。
ここから先は『VisualStudioを使ったFlaskアプリ開発の基本』と同様なので説明は端折りながら進めていきます。
『index.html』の中身は以下の通りです。
{% extends "layout.html" %}
{% block content %}
<div class="jumbotron">
<h1>Flask</h1>
<p class="lead">Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="http://flask.pocoo.org/" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
Flask gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://flask.pocoo.org/docs/">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>The Python Package Index is a repository of software for the Python programming language.</p>
<p><a class="btn btn-default" href="https://pypi.python.org/pypi">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Microsoft Azure</h2>
<p>You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.</p>
<p><a class="btn btn-default" href="http://azure.microsoft.com">Learn more »</a></p>
</div>
</div>
{% endblock %}
まずは1行目『{% extends “layout.html” %}』とすることで『laytout.html』を参照しています。『laytout.html』の中身は後ほど確認します。
このHTMLファイルを見ると、細かくdivタグで囲まれていることがわかります。各々のdivタグには『class=”jumbotron”』等のclassが設定されています(5行目)。
これがBootstrapの便利な所です。Bootstrapには様々なclassが用意されており、『class=”jumbotron”』のjumbotronを変えてやることで、デザインを自由に変更させることができます。
続いて『laytout.html』です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - My Flask Application</title>
<link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/static/content/site.css" />
<script src="/static/scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
<li><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
{% block content %}{% endblock %}
<hr />
<footer>
<p>© {{ year }} - My Flask Application</p>
</footer>
</div>
<script src="/static/scripts/jquery-1.10.2.js"></script>
<script src="/static/scripts/bootstrap.js"></script>
<script src="/static/scripts/respond.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>
この『laytout.html』でBootstrapの読み込みなどをしてくれています。画面のヘッダーとフッターもここで記述されています。
25行目などで、リンク先のURLとして『href=”{{ url_for(‘home’) }}”』などと記述されています。『url_for』はFlaskの便利機能でして、リンク先を指定する場合にしばしば使用されます。
『href=”{{ url_for(‘home’) }}”』と設定されているリンクを踏むとトップページに移動します。
改造をしていく方針
改造をしていく基本的な方針は『views.py』に機能を増やしていくことです。
今はhome、contact、aboutの3種類の遷移先しかありませんでしたが、これを増やしたうえで、対応するテンプレートも追加すれば、画面を追加することができます。
このやり方の欠点は、『views.py』が肥大化してしまうことです。
ちょっと凝ったアプリを作ろうと思うと、「この機能はどこに実装したんだったか忘れちゃった」みたいなことにもなりかねません。
なるべく機能ごとにファイルを分けたいですね。例えば、ログイン機能はまったく別のPythonファイルで実装する、といった具合です。
そこで使われるのがBluePrintです。
これを使うことで、ファイルを分割できます。
細かい使い方は、実際にアプリを開発していく際に、解説をしていくことにします。
参考文献
|
独学プログラマー Python言語の基本から仕事のやり方まで Pythonのことがさっぱりわからないという方は、この本から入ると良いかと思います。あまり分厚くない本ですので、読み切ることは難しくないはずです。 Pythonの基本文法やコードを書くコツなどが載っています。 |
  |
|
入門Python3 こちらは分厚い本ですが、その分細かく載っています。Flaskの解説も少しあります。辞書的な使い方をしても良い本かと思います。 |
  |
スポンサードリンク
更新履歴
2018年5月26日：新規作成
