※このページは拡張中なので、説明の順序や内容が変更されることがあります。
Flaskは初心者向け、小規模向けの開発を行うのに向いているフレームワークです。
フルスタックとはフロントエンドとバックエンド両方のことです。
結論を先に言うと、Pythonを使っている人で小規模Web開発するならFlaskを使ってバックエンドを作ってフロントエンドはホームページ作成などを通して別で学んだ知識を使う。です。
■フレームワークとは
ビルドする際に必要な機能を備えたツールです。
最近、紹介しているseleniumはライブラリに該当します。
フレームワークはライブラリと少しだけ似ています。
自分で書いていないコードのパッケージであるという意味では同じ
ライブラリは特定のことをするために呼び出すもの
フレームワークはフレームワークのルールに従い、フレームワークのアーキテクチャを利用しなければならない
ライブラリの場合
requests.get(“https://www~“)のようになるが
ライブラリに対してgetを要求して情報を取得したりするわけですが
フレームワークの場合
自分で書いたコードがフレームワークのルールに沿って書かれていなければならず、
フレームワークが自分の書いたメソッドを呼び出すようになる。
Pythonを使って開発する場合、選択肢は以下になります。
初心者向け、小規模向けならFlask
大規模、商用向けならDjango
■フロントエンドとバックエンドで用いられるフレームワークの違い
フロントエンドはAngular や Rreact
バックエンドはNode や Flask , Django
なので、今回の話はバックエンドの話になります。
■フロントエンドのバックエンドで用いられる言語の違い
フロントエンドはHTMLで構造、CSSでスタイル、JavaScriptでインタラクティビティを与えます。
ホームページ作成を学ぶことで、HTML＞CSS＞JavaScriptの比重で学ぶことができます。
バックエンドはJavaScript,Java,Python,Rudyなどの言語で作れます。
■バックエンドとは具体的に何か
①クライアント
ユーザと対面する部分
②サーバ
常時インターネットに接続されたPC
要求を受け付ける準備ができている
③データベース
情報確報場所
これらの３つを備えている。
クライアントから要求が飛んでくるので、サーバが受け取り、データベースから必要な情報を集めてHTML CSS JavaScriptのデータをブラウザなどに送る
とまぁ、前置きはこのくらいにしておいて、実際に動かさないとわかんないよねっていうのが本音
■Flaskを使って最小限のシステムを構築する
以下は公式のクイックスタートリンク
※Ver更新などがあった場合、webページのヘッダ当たりにこの情報は古いですよと書かれているので、注意しておいてください。
最小限の環境を準備できるというコードをコピペして、Pycharmなどのご自身で使用している開発環境に落とし込みます。
ファイル名は理解しやすいように公式と同じ”hello.py”としておく。
flaskは外部ライブラリ同様にインポートが必要ですので、それは忘れず行います。※Pycharmの場合は１行目の”flask”に赤い波下線が表示されるので、そこにカーソルを持ってくるとflaskをインポートする選択肢が表示されます。
■サーバを開発環境で実行する
次に環境変数に上記コードをエクスポートしなければならないらしいのでやります。
Pycharm画面下のターミナルを表示して、
ここに書いてあるコードを実行します。
私はwin11で多分Powershellでやればいいと思うので、Powershellのコマンドを用います。
使っているOS(Win,Mac,Linux)によっておおよそどれかは決まってくるのですが、そのあたりはまだ理解しきれていないので、必要に応じて調べてください。
上部２行が指定されたコマンドを入力したものです。
赤字で警告が出ていますが、冒頭で説明したように今動かしているPCは開発環境なんだから、ちゃんとサーバー用意しろよって言われてます。
とはいえ、青字でリンクが表示されているので、ここから実行できます。
127.0.0.1のIPアドレスは自分自身を示すIPなので、試しに確認したかったら、このリンクから開発環境でエクスポートしたものは確認できるぜ。
くらいのことはしてくれています。
※青字のリンクが表示されない場合、Bash Fish CMD Powershellのタグ選択が間違っていると思うので、他のサンプルを試したほうがいいです。
青字のリンクに飛ぶと以下のような表示がされます。
そして、最後にctrl + cを入力してサーバを終了させます。
■__name__とは
これはPythonに組み込まれている特別な属性の１つです。
クラス、関数、メソッド、記述子、またはジェネレータのインスタンスの名前になります。
上記コード中にprintを書き込むと__main__が返されます。
print(__name__) # __main__と表示されるこれのコードは任意の時点で実行すると、今何が実行されているか知ることができます。
Pythonのモジュールやパッケージがインポートされると__name__にその名前が設定されます。
要するに、インポートモジュールはスクリプトや対話型のプロンプトとして実行されているということ。
上記のようにmainが表示されるときはスクリプトとして実行されたときに何かを実行するということ。
■＠app.route(‘/’)とは
概要的な意味は、ホームルートであり、www.~~~.com/ のように最後に”/”をつけるとそこがホームのページ。
構文的にはデコレータのコードになります。
まず、”@”について説明します。
これは”syntactic sugar”と呼ばれています。
別ページで紹介予定のDecorator(準備中)を参照していただくのもよいと思います。
■ ▶や■でサーバを簡単に起動、停止させるには
hello.pyに以下のコードを追加します。
if __name__ == "__main__":
app.run()サーバを開発環境で実行したときに環境変数を設定したのを覚えてますか、
上記のコードを入れておくことで、通常時、__name__=__main__なのでアプリを実行するという命令を入れておくことで画面上部の▶や■でサーバの起動、停止ができるようになります。
■デバッグモードを使って稼働しながら編集する
if __name__ == "__main__":
app.run(debug=True)上記のコードに対して”debug=True”を追加しただけですね、こうしておくと、▶で実行した後、コードを編集、保存した時点で変更が反映されるようになります。
■シェルとは
ターミナルに入力するコマンドをコマンドラインといい。
コマンドラインはシェルとも呼ばれています。
■簡単なwebページを表示してみる
Flaskを使うにはいくつかルールがあるのでそれに従います。
main.pyに以下を記述します。
from flask import Flask, render_template #templateを使ってHTMLを記述します。
app = Flask(__name__) # Flaskクラスのインスタンスを作る
@app.route("/") # ここがホームのページになります。
def home():
return render_template('index.html') # ホームのページに表示するhtmlファイルを指定します。
# ▶■で起動したり停止させることができる
if __name__ == "__main__":
app.run(debug=True)次に、templatesというディレクトリを新規に作成し、中にindex.htmlを新規作成します。
画像などを埋め込んだりすることもあると思うので、staticというディレクトリも作っておきます。
とはいえ、すべてのhtmlを一から作るのは非効率ですので、フリーのHTMLテンプレートを拾ってきて、それを放り込んだ状態が上記です。
※フリーのtemplateをダウンロードしてきたらHTMLファイルはtemplatesフォルダを新規作成して入れ、それ以外の画像などのファイルはstaticフォルダを新規作成して格納します。
本体のindex.htmlファイルはtemplatesへ入れます。 ↓公式リンク
cssやimagesの入ったファイルはstaticへ入れます。 ↓公式リンク
※ここまでできた時点でmain.pyを実行し、ローカルの環境で表示させてみると、CSS（スタイル）が適応されていない状態の画面が確認できます。
そのため、index.htmlのファイルパスも編集する必要が出てきます。
以下のようにスタイルシートや画像ファイルのパスを修正していきます。
<link rel="stylesheet" href="static/css/styles.css">※フリーとはいえ再配布できないものを使用しているので、上記のようによくあるコードを一例としています。
コード内の書き換えは置換を使えばすぐできます。環境によってやり方は違いますが、Windows x PyCharmを使っていればCtrl + Rで実行できます。
後は、実行し、http://127.0.0.1:5000にアクセスすればFlaskを介してwebページが表示されます。
■HTML内にPythonのコードを入れるには
例として、今年は何年かHTMLに反映していきます。
pyファイルのほうから修正していきます。
必要なライブラリをインポートして、変数を準備、引数としてtemplateに与えます。
from flask import Flask, render_template
import datetime
app = Flask(__name__)
@app.route("/")
def home():
this_year = datetime.datetime.now().year
return render_template('index.html', year=this_year)
# ▶■で起動したり停止させることができる
if __name__ == "__main__":
app.run(debug=True)続いて、HTMLファイルのほうを修正していきます。
以下は下線があるもの以外はHTMLファイルを生成するとついてくるコードなので理解できていない方でも定型文程度にご理解ください。
フッターに”Copyright {{ year }}.”を追加しているだけでです。”year”が上記から引数として与えられた数字が入ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<footer>
<p>Copyright {{ year }}.</p>
</footer>
</html>“{{ *** }}”を使ってpythonコードを埋め込むことができます。
数式を入れることもできます。このあたりが詳しく知りたい方は以下を参照してください。 ↓以下jinja公式リンク
・・・拡張中だよ
コメント