flask

【Python】Flaskのチュートリアルがもっとわかるようになるまとめ【初心者向け】

『Python(パイソン)』をホームページやウェブサイトとして表示させる便利箱、

『Flask(フラスク)』のチュートリアルをやってみまして、

チュートリアルをやっている最中、個人的に調べたことなどをまとめることにしました。

初心者向けに、できるだけ専門用語を少なくして、あえてちょっと回りくどくなっていたりしますので、

気楽に読み進めていただければと思います。

アオキ
『Python(パイソン)』でホームページをつくってみたいという物好きなあなたにとって、
アオキ
なにかしらお役に立ちますように。
Sponsored link

【Python】Flaskチュートリアルのその前に

いきなりこんな事を言うのもどうかと思うんですが、

普通にホームページをつくりたいだけなら『Python(パイソン)』は使わなくて大丈夫です。

普通につくるなら、HTML(エイチティーエムエル)+CSS(シーエスエス)でできちゃうし、

ブログを作りたいなら『Wordpress(ワードプレス)』を使った方が、情報量もたっぷりあるし、よっぽど簡単です。

参考記事

それでも『Python』でホームページを表示させたいとしたら、

  • 普通のホームページじゃあきたらず
  • 『WordPress(ワードプレス)』では満足できず
  • 『Python(パイソン)』ならではの機能を使いたい

というような条件になるのかなと思います。

『Python(パイソン)』ならではといえば、

  • 機械学習だったり、
  • 人工知能だったり、
  • IoTだったり、
  • Webスクレイピングだったり、

でしょうか。

他の言語でもできないことはないと思うけれど、『Python(パイソン)』でやる方が簡単なケースですね。

そういった目的があって、

Pythonおじさん
『Wordpress(ワードプレス)』じゃ満足できないんだよー

っという方のために、できるだけわかりやすく解説してみることにしました。

ここからややこしい話になっていきますが、

プログラムを勉強する時に大事な事が1つありまして、

わからないところがあっても気にせず先に進む

ようにしてもらえたらと思います。

わからないところを3日調べ続けてもわからない、なんてことはしょっちゅうあるので、

わからなかったら別の方法を探すなり、気晴らしに他の事をやってみたりして、

アオキ
とりあえず動いたからまぁいっか

的な軽い気持ちで先に進む事をお勧めします。

ではあらためて・・

Python Flaskチュートリアルの前に基本から

『Python(パイソン)』でホームページが作成できる便利箱『Flask(フラスク)』のチュートリアルでは、

本当に簡単な『ブログ』をつくる方法を紹介していました。

機能としては、

  • ユーザー登録
  • ログイン/ログアウト
  • ブログ記事の投稿
  • ブログ記事の編集
  • ブログ記事の削除

といった、

ブログやってる人
ブログだったら当たり前でしょー

的な機能にはなるのですが、

いざこの機能をつくってみようとすると、いろいろと考える事がでてきます。

例えば、

  • ユーザー登録で同じ名前の人がいたらどうする?
  • ログイン中はずっとログインしてないとダメだよね
  • ブログの見た目変えたいんだけど
  • ブログで保存できる内容を増やしたいんだけど

などなど。

今回のチュートリアルでは簡単な作りになっているのですが、

機能が複雑になるにつれ、プログラムがどんどん増えてくることになります。

天才A
このまま機能増えていったらプログラムどんどん増えてパンクするんじゃね?
天才B
なら機能が増えてもいいように役割分担しておくといいんじゃね?

的な感覚で、世界中の天才達が話し合ったかどうかはわかりませんが、

ウェブサイトやウェブアプリといった複雑なサイトに対しては、

『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(フラスク)】なんでしょうね。

ではではようやく本題へ・・

Sponsored link

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のインストール・・なのですが、いきなり難関だと思います。

流れとしては、

  1. Pythonインストール
  2. venv(Python標準の仮想環境)作成・・インストール影響範囲を狭める
  3. pipでflaskインストール・・pipはPython用のパッケージ管理ツール

になり、

windowsなら『Anaconda(アナコンダ)』が簡単でいいのかなと思います。

Anaconda・・Pythonで機械学習や統計でよく使うパッケージをひとまとめにした仮想開発環境。

『Anaconda(アナコンダ)』インストール後、

任意のフォルダに移動してpip install flask

でflaskをインストールできます。

*大分はしょっていますのでご要望あれば追って記事追加したいと思います。

肝心の『Flask(フラスク)』チュートリアルですが、流れはこうなっています。

  1. Tutorial (完成図の説明)
  2. Project Layout (フォルダ構成)
  3. Application Setup (最初の設定)
  4. Define and Access the Database (モデル:データベース接続)
  5. Blueprints and Views (ファイルを分けて見た目(ビュー)を作成)
  6. Templates (これもビュー(見た目)を作成)
  7. Static Files (これもビュー(見た目)を作成)
  8. Blog Blueprint (ブログ機能をファイルを分けて作成)
  9. Make the Project Installable (最後の仕上げ)

公式チュートリアルを見つつ読み進めてもらえればと思います。

Sponsored link

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(ギット)』に登録しないファイルを記載しているのですが、こちらも長くなるので別記事にしたいと思います。

Sponsored link

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(エスキューライト)』データベースが作成されるようになっています。

Sponsored link

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(データのやり取り)
  • デコレータ(アットマークをつけた関数に、@マークの下の関数の機能を追加できる)

がありますが、こちらも長くなるので別記事に・・

Sponsored link

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ってなんだっけ・・という場合はこちらの記事も参照ください。

参考記事

Sponsored link

Python Flaskチュートリアル7. Blog Blueprint

「blog.py」の完成形はこちら。

このファイルもアットマーク(デコレータ)を探す事で役割が見えてきます。

  • @bp.route(‘/’)・・トップ画面
  • @bp.route(‘/create’, methods=(‘GET’, ‘POST’))・・記事作成
  • def get_post(id, check_author=True):・・投稿内容取得
  • @bp.route(‘//update’, methods=(‘GET’, ‘POST’))・・記事編集(更新)
  • @bp.route(‘//delete’, methods=(‘POST’,))・・記事削除

ブログ記事の作成・編集・読み込み・削除などがそれぞれ記載されており、これらは『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チュートリアル おわりに

ややこしいことをできるだけわかりやすくと心がけて書いたつもりですが、

よけいにややこしくなった感もあり、説明するあんばいが難しいなと感じています。

できるだけわかりやすくなるよう、随時編集していきますので、

もしここがわかりずらかったなどあればぜひこちらまで、ご連絡いただければと思います。

Sponsored link

関連記事

  1. Django

    【Python/Django】Webアプリのテンプレートなら『cookiecutter』がよさげ【簡…

    っとなったとしたら、Pythonの全部入りwebフレームワ…

  2. Django

    【Django】Webアプリのフォルダ構成のアイデア〜違うアプリで同じテーブルを使いたい!

    とある業界の予約システムをつくることになりまして、ログイン周りとラ…

  3. Python

    Python(パイソン)でできる事の実例 じゃらんや楽天トラベルからデータをとってゴニョゴニョできち…

    子ども向け無料プログラミング寺子屋『CoderDojo熊本』に参加され…

  4. Django

    【Python/Django】mysqlとの接続があまりにあっさりしすぎて拍子抜けした話

    DjangoからPostgresqlがどうしてもwin7だと接続できな…

  5. HTML/CSS

    【初心者向け】パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  2. MySQL

    【mysql】SQL文のつくり方のコツ〜ちょっとずつ組み立てる〜【初心者向け】
  3. Vue.js

    Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初…
  4. Vue.js

    【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテ…
  5. Laravel

    【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【N…
PAGE TOP