『Python(パイソン)』をホームページやウェブサイトとして表示させる便利箱、
『Flask(フラスク)』のチュートリアルをやってみまして、
チュートリアルをやっている最中、個人的に調べたことなどをまとめることにしました。
初心者向けに、できるだけ専門用語を少なくして、あえてちょっと回りくどくなっていたりしますので、
気楽に読み進めていただければと思います。
【Python】Flaskチュートリアルのその前に
いきなりこんな事を言うのもどうかと思うんですが、
普通にホームページをつくりたいだけなら『Python(パイソン)』は使わなくて大丈夫です。
普通につくるなら、HTML(エイチティーエムエル)+CSS(シーエスエス)でできちゃうし、
ブログを作りたいなら『Wordpress(ワードプレス)』を使った方が、情報量もたっぷりあるし、よっぽど簡単です。
参考記事
それでも『Python』でホームページを表示させたいとしたら、
- 普通のホームページじゃあきたらず
- 『WordPress(ワードプレス)』では満足できず
- 『Python(パイソン)』ならではの機能を使いたい
というような条件になるのかなと思います。
『Python(パイソン)』ならではといえば、
- 機械学習だったり、
- 人工知能だったり、
- IoTだったり、
- Webスクレイピングだったり、
でしょうか。
他の言語でもできないことはないと思うけれど、『Python(パイソン)』でやる方が簡単なケースですね。
そういった目的があって、
っという方のために、できるだけわかりやすく解説してみることにしました。
ここからややこしい話になっていきますが、
プログラムを勉強する時に大事な事が1つありまして、
わからないところがあっても気にせず先に進む
ようにしてもらえたらと思います。
わからないところを3日調べ続けてもわからない、なんてことはしょっちゅうあるので、
わからなかったら別の方法を探すなり、気晴らしに他の事をやってみたりして、
的な軽い気持ちで先に進む事をお勧めします。
ではあらためて・・
Python Flaskチュートリアルの前に基本から
『Python(パイソン)』でホームページが作成できる便利箱『Flask(フラスク)』のチュートリアルでは、
本当に簡単な『ブログ』をつくる方法を紹介していました。
機能としては、
- ユーザー登録
- ログイン/ログアウト
- ブログ記事の投稿
- ブログ記事の編集
- ブログ記事の削除
といった、
的な機能にはなるのですが、
いざこの機能をつくってみようとすると、いろいろと考える事がでてきます。
例えば、
- ユーザー登録で同じ名前の人がいたらどうする？
- ログイン中はずっとログインしてないとダメだよね
- ブログの見た目変えたいんだけど
- ブログで保存できる内容を増やしたいんだけど
などなど。
今回のチュートリアルでは簡単な作りになっているのですが、
機能が複雑になるにつれ、プログラムがどんどん増えてくることになります。
的な感覚で、世界中の天才達が話し合ったかどうかはわかりませんが、
ウェブサイトやウェブアプリといった複雑なサイトに対しては、
『MVC(エムブイシー)モデル』という決まりをつくることにしました。
『MVC(エムブイシー)モデル』というのは、ブログなどに関するプログラムを、
- M・・Model(データの保存)
- V・・View(見た目)
- C・・Controller(処理)
の3つに役割分担し、それぞれプログラムのファイルを分けてつくるようにしようという考え方です。
*MVCモデルは2008年頃には登場していたようです。
*2018年現在はMVVMなどありますが説明の都合上カットします。
有名どころでは、
- Ruby(ルビー)を一躍有名にした『RubyOnRails(ルビーオンレイルズ)』
- PHP(ピーエイチピー)を再び人気者にのしあげた『Laravel(ララベル)』
なども『MVC(エムブイシー)モデル』をベースにプログラムが作成されています。
では今回の『Flask(フラスク)』も『MVC(エムブイシー)モデル』かというと、
PHPの『Laravel(ララベル)』を触っていた身としては、
という感覚です。
PHPの『Laravel(ララベル)』と比べると格段に機能が少ないので、
余計な機能はとっぱらって、
とにかく『Python(パイソン)』でつくったプログラムを、ホームページやウェブサイトとして表示させるためだけに特化した便利箱が【Flask(フラスク)】なんでしょうね。
ではではようやく本題へ・・
Python Flaskチュートリアル ことはじめ
『Flask(フラスク)』公式チュートリアルはこんな感じです。
えぇ、思いっきり英語です。
久々に英語どっぷり読みながら、「ん？」っと思った点を毎回ググって前に進んでいました。
実は、この記事を書いた後に知ったのですが、日本語のチュートリアルもあったようです(汗
とはいえちょいちょい内容が違うようなので、
今回は公式ホームページのチュートリアルの補足をやっていこうと思います。
まずはフォルダ構成です。
パソコンの中の適当な場所に「flask-tutorial」 というフォルダをつくって、
その中に「flaskr」というフォルダをつくって、
「flaskr」フォルダの中に「templates」フォルダと「static」をつくって、
「templates」フォルダの中に「auth」フォルダと「blog」フォルダを作ってあります。
見方としては、
ファイル名の後に .py とか、 .html とか、 .sql や .in と書いてあるものはファイルで、他は全てフォルダになります。
また、今回は説明の都合上、「venv」フォルダと「test」フォルダは省きます。
venvはPython用仮想環境で、testは文字通りテスト環境です。
先ほどの『MVC(エムブイシー)モデル』でいうと、
- 「template」(テンプレート)フォルダの中は全部『View(ビュー：見た目)』で、
- 「static」(スタティック)フォルダの中も『View(ビュー)』で、
- 「db.py」は『Model(モデル：データベース操作)』
かなと思います。
フォルダを分けているのもなんらかの意味がある、とぼんやり思っておけばOKと思います。
ここからは、公式チュートリアルの説明を補足する形で書いていきます。
Python Flaskチュートリアル Installation
まずはFlaskのインストール・・なのですが、いきなり難関だと思います。
流れとしては、
- Pythonインストール
- venv(Python標準の仮想環境)作成・・インストール影響範囲を狭める
- pipでflaskインストール・・pipはPython用のパッケージ管理ツール
になり、
windowsなら『Anaconda(アナコンダ)』が簡単でいいのかなと思います。
Anaconda・・Pythonで機械学習や統計でよく使うパッケージをひとまとめにした仮想開発環境。
『Anaconda(アナコンダ)』インストール後、
任意のフォルダに移動してpip install flask
でflaskをインストールできます。
*大分はしょっていますのでご要望あれば追って記事追加したいと思います。
肝心の『Flask(フラスク)』チュートリアルですが、流れはこうなっています。
- Tutorial (完成図の説明)
- Project Layout (フォルダ構成)
- Application Setup (最初の設定)
- Define and Access the Database (モデル：データベース接続)
- Blueprints and Views (ファイルを分けて見た目(ビュー)を作成)
- Templates (これもビュー(見た目)を作成)
- Static Files (これもビュー(見た目)を作成)
- Blog Blueprint (ブログ機能をファイルを分けて作成)
- Make the Project Installable (最後の仕上げ)
公式チュートリアルを見つつ読み進めてもらえればと思います。
Python Flaskチュートリアル0. Tutorial
1ページ目は、今回のチュートリアルで作成できるブログの画面になります。
- ユーザー登録
- ログイン/ログアウト
- ブログ記事の投稿
- ブログ記事の編集
- ブログ記事の削除
などができるようになるとという内容なので、さーっと読み飛ばしてOKです。
Python Flaskチュートリアル1. Project Layout
1ページ目、
mkdir flask-tutorial
cd flask-tutorial
とあります。
mkdirはmake directoryの略で、flask_tutorialというフォルダつくるという意味で、
cd は フォルダ移動になり、 作ったflask_tutorialフォルダ の中に入るという意味です。
「hello.py」 はテスト用のファイルなので飛ばしてもokです、一応補足しておくと、
from flask import Flask #flaskの機能を読み込んで
app = Flask(__name__) #appにflaskのアプリ名を読み込んで
@app.route(‘/’) #ルートフォルダにアクセスしたら
def hello():
return ‘Hello, World!’ #hello worldと表示する
といった内容です。
また、.gitignore というファイルがありますが、
venv/
*.pyc
__pycache__/
instance/
.pytest_cache/
.coverage
htmlcov/
dist/
build/
*.egg-info/
『git(ギット)』というノーベル賞ものの超優秀なパッケージ管理システムがあるのですが、その『git(ギット)』に登録しないファイルを記載しているのですが、こちらも長くなるので別記事にしたいと思います。
Python Flaskチュートリアル2. Application Setup
mkdir flaskr
はフォルダ作る、ですね。
で、「flaskr」フォルダのなかに、__init__.pyファイルを作っています。
flaskアプリを読み込んだ時に最初に実行されるファイルになります。
チュートリアルだどファイルが分割して表示されていてわかりずらいので先に完成形を貼っておきます。
補足として、35行目〜38行目に『blueprint』という記載がありますが、
『blueprint』はPythonのファイルを分けて記述できるようにする機能のようです。
機能が増えるほど、1つのファイルに書いていくのはしんどくなるので、
『blueprint』をうまく作ってファイルを分割していけばいいのかなと思います。
また、チュートリアル内に「Run The Application」とあり、
つくっているアプリ名(今回の場合はflaskr)を環境変数に記載してからflask runでブラウザに表示されるようになります。
__init__.py を完成形にしていると「hello.py」を読みこまないのでこの時点では表示されません・・
次は記事を保存するためのデータベースについて。
Python Flaskチュートリアル3. Define and Access the Database
データベースにはいくつか種類があるのですが、
『Flask(フラスク)』チュートリアルでは、
一番 簡易的と言われている
『sqlite(エスキューライト)』
を使う事になっています。
データベースを扱うための『db.py』の完成形はこちら。
補足としては、
def get_db() はデータベースを呼び出す関数で、これから他のファイルから呼び出されます。
また、「schema.sql(スキーマ.エスキューエル)」というファイルで、
『SQL(エスキューエル』というデータベースを操作できる言語を使って、データベースの構成を決めています。
DROPが削除で、CREATEが作成になります。
※『SQL(エスキューエル)』も長くなるので別記事にて・・
また、このファイルを作成・保存したあとコマンドプロンプトで init_db とうつことで、
実際の『sqlite(エスキューライト)』データベースが作成されるようになっています。
Python Flaskチュートリアル4. Blueprints and Views
「auth.py」の内容の完成形はこちら。
長いファイルですが、読むコツがあって、
最初に def と書いてある箇所(関数)を見るか、最初にアットマーク(デコレータ)で始まる箇所をみればOKです。
「auth.py」ファイルの機能としては大きく5つになります。
– def login_required(view): ・・ログインしてるか
– @bp.before_app_request ・・ログイン前の処理
– @bp.route(‘/register’, methods=(‘GET’, ‘POST’))・・ユーザー登録
– @bp.route(‘/login’, methods=(‘GET’, ‘POST’))・・ログイン
– @bp.route(‘/logout’)・・ログアウト
プログラム内に
- session(セッション：ユーザー情報一時保管)
- SQL (select とかinsert で始まる箇所：データベース操作)
- render_template(画面表示)
- GETとPOST(データのやり取り)
- デコレータ(アットマークをつけた関数に、@マークの下の関数の機能を追加できる)
がありますが、こちらも長くなるので別記事に・・
Python Flaskチュートリアル5. Templates
「templates」テンプレートフォルダは文字通り、ブラウザ画面に表示される画面になります。
『Flask(フラスク)』では『Jinja(ジンジャ)』という機能を使っていて、
『Jinja(ジンジャ)』を使ってHTML（エイチティーエムエル)の中にPythonコードを含めるようになります。
テンプレート->テンプル->神社->Jinja だそうです。
「base.html」 が基本の画面構成で、
{% block content %}{% endblock %}
の中で、個別に表示させたい内容を別ファイル(「register.html」や「login.html」)で作成しています。
Python Flaskチュートリアル6. Static Files
「static」フォルダ内のファイルはそのまま、CSS(シーエスエス：スタイルシート)になります。
もしCSSってなんだっけ・・という場合はこちらの記事も参照ください。
参考記事
Python Flaskチュートリアル7. Blog Blueprint
「blog.py」の完成形はこちら。
このファイルもアットマーク(デコレータ)を探す事で役割が見えてきます。
- @bp.route(‘/’)・・トップ画面
- @bp.route(‘/create’, methods=(‘GET’, ‘POST’))・・記事作成
- def get_post(id, check_author=True):・・投稿内容取得
- @bp.route(‘/
- @bp.route(‘/
ブログ記事の作成・編集・読み込み・削除などがそれぞれ記載されており、これらは『CRUD(シーアールユーディー』と呼ばれたりします。
ブログ記事の『CRUD(シーアールユーディー)』はデータベースの基本操作になるので、知っておくとあとあと楽になるかもです。
- C ・・Create (作成)
- R・・Read(読み込み)
- U・・Update(更新・編集)
- D・・Destroy(削除)
Python Flaskチュートリアル8. Make the Project Installable
最後は 「setup.py」と「MANIFEST.in」をチュートリアルに沿って作成すればOKです。
環境がうまくいっていれば、flask runとコマンドをうてばブラウザ上に表示されるはず・・
Python Flaskチュートリアル おわりに
ややこしいことをできるだけわかりやすくと心がけて書いたつもりですが、
よけいにややこしくなった感もあり、説明するあんばいが難しいなと感じています。
できるだけわかりやすくなるよう、随時編集していきますので、
もしここがわかりずらかったなどあればぜひこちらまで、ご連絡いただければと思います。
『Python』関連ではこんな記事も読まれています。
1. 【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】2. 【Python(パイソン)】でできる事の実例 じゃらんや楽天トラベルからデータをとってゴニョゴニョできちゃうんです
3. 【Python(パイソン)】でホームページをつくった時の話【Flask/Vagrant/Heroku】
4. 【Python】Flaskのチュートリアルがもっとわかるようになるまとめ【初心者向け】
5. 【Python】用語集まとめてみた。～Webサービスをつくりたい人向け～【初心者向け】※随時更新中
6. 【Python】でWebアプリをがっつりやるならDjango一択な4つの理由【初心者向け】
7. 【Python/Django】Webアプリのテンプレートなら『cookiecutter』がよさげ【簡単で安心】
8. 【Python/Django】mysqlとの接続があまりにあっさりしすぎて拍子抜けした話
9. 【Python/Django】webフレームワークを使う6つのコツ〜最短距離でアプリをつくるために【初心者向け】
10. 【Django】Webアプリのフォルダ構成のアイデア〜違うアプリで同じテーブルを使いたい！
11. 【Django】【Laravel】【RubyOnRails】を比較してみた【初心者向け】【体験談】
アオキのツイッターアカウント。
