Flask触ってみた（初級）

Asterisk

　　　　　　　　　　　　　　

皆様こんにちは！お日柄もよく～。　後略

さて、アドベントカレンダー、実際何を書いていいかわからず結構悩みましたが、知り合いから卒業制作でWebアプリケーションを作成するので、Flaskを使っていきたいと相談を受けました。（この時点ではFrisk？あのスースーする奴かくらいに思ってた）今回はその学習した内容をまとめてみては、と考え綴りました。

flaskとは？

調べてみると

Flask（フラスコ/フラスク）はPythonのWebアプリケーションフレームワークで、小規模向けの簡単なWebアプリケーションを作るのに適しています。
Webフレームワークとは、ウェブサイトやウェブアプリケーションを作るための機能を提供し、ウェブフレームワークを使わない時よりもより容易にWebアプリケーションを作ることができるものです。

コーディング苦手マンはこれを読んで歓喜＼( 'ω')／
まずは基礎知識をつけるところから始めることにしました。

今回はWebサイト上でテキストを入力して、チャットボットに読み込ませて合成音声を用いて読み上げるWebアプリケーションを作るようなので、

・flaskの準備
・文字のプリント
・テキストボックスの用意

辺りを基礎知識として勉強してみるところから始めました。

今回は参考書等を揃えたりする時間もなかったので、記事に沿ってお勉強
しました。以下にリンクを貼っておきます。


flaskの準備

flaskを導入する為まずはVisual Studio Codeのワークスペースを作りました。
次にコマンドプロンプトを開き、pipコマンドを使って
Flaskのインストールを行います。

pip install flask

インストールの確認のため、Pythonの対話型シェルを起動します。

python

対話型シェルが開いたら、バージョンの確認をします。

import flask
flask.__version__

上記コマンドでバージョンが表記されればインストール完了です！


Webサイト上に文字を表示させる

flask_sample.py

from flask import Flask
app = Flask(__name__, static_folder='.', static_url_path='')
@app.route('/')
def index():
   return app.send_static_file('index.html')

app.run(port=8000, debug=True)

上記のプログラムをワークスペース上に保存します。
次に、index.htmlを同じ階層に作成します。
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <title>初めてのFlaskアプリケーション</title>
</head>
<body>
<p>Flask</p>
</body>
</html>

上記二つが完成したら、コマンドプロンプト上で実行します。
cdコマンドでワークスペースの階層まで行ったら下記コマンドで実行します

python flask_sample.py

上記の工程が完了したら、ブラウザ上でlocalhostにアクセスします。
今回はflask_sample.pyでポート番号を8000に指定しているので、以下のURLをブラウザで入力します。

http://localhost:8000

画像1

こんな感じ。文字の出力だけならそこまで難しくない。記事を見た所rootを増やすとurlにパスを貼ることでページの遷移が簡単にできるらしい。
リンクに関連付けたりするとURLにパスを手書きしなくても移動できることは安易に想像できたが、今回は長くなりそうなので割愛します。
（気になる方は上記リンクを覗いてみてね）


テキストボックスを用意する

Webサイト上でテキストボックスを用意するのは実は簡単でした。
HTMLで書くだけ！もう少し作りこむとAPI通信でログイン情報の問い合わせまで行ってくれる優れもの。flask勉強してて一番感動したかも...？

ソースコードはこちら↓↓
index.html

<!DOCTYPE html>
<html>
<head>
 <title>form練習</title>
</head>
<body>
 <form method="POST">
   <input type="text" name="id" placeholder="userID">
   <input type="password" name="pwd" placeholder="Password">
   <input type="submit" value="送信">
 </form>
</body>
</html>

​

画像2

今回は初級なので、サーバに登録した情報との問い合わせなどは割愛しますが、今後必要になりそうなので個人的に学習を進めていこうと思います。


まとめ

今回Flaskの勉強をしてみて、フレームワークはなんて便利なんだろうと感動してます。今回割愛した部分も本当は詰め込みたかったのですが、アドベントカレンダーの一記事としては長くなってしまうこと、Flaskは簡単で、学習カロリーはあまり高くないので、Web開発の際には選択肢にあってもいいのかなと思い、取り上げさせて頂きました。まだまだ深堀りできそうなので時間がある限りは色々作ってみたいと思います。

　　　　　　　　　　　　　　　　　　　　　　　　　　　

この記事が気に入ったらサポートをしてみませんか？