「Flask」の記事 - Crieit

気分が落ち込んだ時に、自動で周囲の人に通知するアプリを作りました

2022-04-09T22:40:57+09:00

こんにちは！

「metnal」というアプリを作りましたので、ご紹介させてください。

metnalとは

metnelは、「気分が落ち込んだ時に、自動で家族や友人、パートナーなどに通知することで、周囲の人の助けを受けることをサポートする」アプリです。

特徴として、
1. 手軽に始められるように、LINEでのみログイン可能。メールアドレスやパスワードでアカウントを管理すると、アカウントを紛失したり、ログインが面倒になったりすることで、離脱してしまうリスクがあります（多くの人がアカウントを紛失した経験があると思います笑）。
2. 機能は非常にシンプル。その時の気分をつけるだけで、独自のスコアリングに基づき、自動で気分のスコアが表示されます。
3. 周囲の人に、気分のスコアを共有できます。また周囲の人が登録することで、スコアが極端に低くなった時（気分が落ち込んだ時）にLINEのbotを通じて自動で通知されます。

となっております。
このアプリが十分に機能した場合、周囲の人の落ち込みを即座に発見できることが期待されます。

利用方法

こちらをご覧ください！

利用技術等

qiitaにまとめてみました。
一読して頂ければ幸いです！

FlaskをVisual Studio Codeで動かしデバックする

2021-02-20T11:18:40+09:00

Pythonの人気のWebアプリケーションフレームワークFlaskをVisual Studio Codeで動かす方法です。

Flask用のPython仮想環境を構築

Visual Studio CodeでCtrl + Shift + @、
あるいはメニューのターミナル(T) > 新しいターミナルでターミナルを表示する。
環境を作りたいディレクトリに移動して、以下のコマンドを実行すると"myflask"の名称でPythonの仮想環境が作られる。
(myflaskの名称でディレクトリが作成され、中にライブラリやpythonのexeが作成される)

python -m venv myflask

Ctrl + Shift + Pでコマンドパレットを表示し、"interpreter"と入力し、Pythonインタープリターを選択、
作成した仮想環境が表示されいればそれを、なければ.\myflask\Scripts\python.exeのように入力する。

改めてCtrl + Shift + Pでコマンドパレットを表示し、Python Create Terminalと入力する。
ターミナルが立ち上がり(myflask)と先頭に表示されていれば、
仮想環境のPythonが叩けます。

(ターミナルで.\myflask\Scripts\Activate.ps1としても仮想環境への切り替えが行なえます。)

Flaskのインストール

Pythonの仮想環境でFlaskのインストールを行う。

pip install flask

自分の環境だと以下のエラーがでたので指示に従ってpipをアップグレードしてから再度インストールしました。

WARNING: You are using pip version 20.1.1; however, version 21.0.1 is available.
You should consider upgrading via the 'c:\path\src\myflask\scripts\python.exe -m pip install --upgrade pip' command.

c:\path\src\myflask\scripts\python.exe -m pip install --upgrade pip
pip install flask

動作確認用にapp.pyを以下のように作成しておきます。

# app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

Python FlaskのVS Codeデバッグ環境

Ctrl + Shift + Dあるいは、虫に三角形のマークからデバッグのメニューを表示し、"実行とデバッグ"をクリックします。
選択肢は"Python Flask"を選びます。

Flaskのファイルがrun.pyのようにapp.pyと異なる場合は、launch.jsonを適宜編集し、
FLASK_APPにファイル名を指定しておきます。

"env": {
    "FLASK_APP": "run.py",
},

デバッグ実行は緑色の三角ボタンで実行できます。
ソースコード上行数の左をクリック、あるいは、F9でブレークポイントを指定します。

コマンドでFlaskを立ち上げる場合は以下のようにします。

$env:FLASK_APP = "run.py"
flask run

(コマンドプロンプトでなくPowerShellの場合
set FLASK_APP=run.pyでなく上記でないと動かないようです)

nginx + uWSGI + Flask で python webアプリを立ち上げる

2021-01-13T15:45:49+09:00

nginx + uWSGI + Flask で python webアプリを立ち上げる

開発中は Flask の dev server で良いのだけれど、リリース時にはフロントのHTTPサーバを用意する必要がある。

Deployment は選択肢がいくつかあるけれど、今回はUbuntu上で、HTTPサーバに nginx、Flaskで作ったPython Webアプリを動かす WSGIコンテナに uWSGI を使った構成の設定例。

インストール

nginx, uwsgi, Flask をインストールする。uwsgi と Flask は venv 環境で。

$ uname -a
Linux hoge-machine 5.4.0-52-generic #57~18.04.1-Ubuntu SMP Thu Oct 15 14:04:49 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
$ sudo apt install nginx
$ python3 -V
Python 3.6.9
$ mkdir venv; cd venv
$ python3 -m venv flaskapp
$ source ~/venv/flaskapp/bin/activate
(flaskapp) $ pip install -U pip
(flaskapp) $ pip install flask uwsgi

nginx の設定ファイル

https://flask.palletsprojects.com/en/1.1.x/deploying/uwsgi/#configuring-nginx

flask で uwsgi を使う場合の nginx 設定ファイル例は上に載っているので、それを参考に。
アプリ名を nginx_yourapp とか your_application とかにしているが適当に変える。

nginx_yourapp.conf

server {
    listen 80;
    listen [::]:80;

    server_name hoge-machine.com;

    root /var/www/example.com;
    index index.html;

    location = /your_application { rewrite ^ /your_application/; }
    location /your_application {
        try_files $uri @your_application;
    }
    location @your_application {
        include uwsgi_params;
        uwsgi_pass unix:/tmp/your_application.sock;
    }
}

nginx の設定ファイルは /etc/nginx/sites-available 下に置いて、/etc/nginx/sites-enabled 下に
シンボリックリンクを張り、サービス再起動する。Permission 関係はよしなに。

$ mkdir -p ~/path/to/nginx_yourapp; cd ~/path/to/nginx_yourapp
$ vim nginx_yourapp.conf
(上記の設定ファイルを作る)
$ cp nginx_yourapp.conf /etc/nginx/sites-available/
$ ln -s /etc/nginx/sites-available/nginx_yourapp.conf /etc/nginx/sites-enabled/nginx_yourapp.conf
$ systemctl restart nginx

webアプリの準備

https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application

Flask の HelloWorld。

index.py

from flask import Flask

app = Flask(__name__)


@app.route("/")
def hello_world():
    return "Hello, World!"

uwsgi の起動コマンド

ソケットファイルは nginx の設定ファイルと合わせること
--chmod-socket=666 はパーミッション関連でこけたら
--mount はアプリパスと実行するスクリプト名:Flask appオブジェクト名を正しく指定する
--virtualenv は venv で作ったPython仮想環境を正しく指定する。

$ uwsgi -s /tmp/nginx_yourapp.sock --chmod-socket=666 --manage-script-name --mount /nginx_yourapp=index:app --virtualenv ~/venv/flaskapp

後はブラウザから http://<サーバのIPアドレス>/nginx_yourapp/ にアクセスすれば Hello World が表示される。

FAQ

502 Bad Gateway が出る

ソケットファイルの permission 関連がおかしいかも。
/var/log/nginx/error.log あたりを覗くとヒントがあるかも。

404 Not Found が出る

アプリパス指定が正しくないかも。

接続できない

nginx が正しく動いているなら、 http://<サーバのIPアドレス>/ で何かが開けるはず。
ダメならnginxが正しく起動できていないか、そもそもサーバに到達できてないか、
サーバが外からのリクエストを受け付けていないので、そちらの方面でなんとかする。

Flask + Nuxt.js(spa) + axiosでCSVファイルをmultipart/form-dataによりアップロードする

2019-08-10T20:58:35+09:00

Flask + Nuxt.js + axiosでCSVファイルをmultipart/form-dataによりアップロードする。なお、Nuxt.jsのモードはspaにしている。
FlaskとNuxt.jsの連携を確認したいので、バリデーションやエラーのハンドリングはほとんどしない。
まずFlaskでファイルのアップロードを確認し、その後Nuxt.jsでファイルをアップロードしていく。

FlaskでCSVファイルをmultipart/form-dataによるアップロード(POST)を受けつける

Flaskをインストールする

pipenvでFlaskが動く環境を作る。

$ touch Pipfile
$ pipenv --python 3.7.4
$ pipenv install Flask==1.1.1

Flaskが動くことを次のコードで確認する。

app.py

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'hello'


if __name__ == "__main__":
    app.run(debug=True)

次のコマンドで起動することで、オートリロードを有効にする。
FLASK_ENV=development flask run

$ FLASK_ENV=development flask run
...(略)
Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

curlで/にアクセスし、helloがレスポンスで返ってくることを確認する。

$ curl http://127.0.0.1:5000/
hello

FlaskでPOSTを受けつけるようにする

@app.routeのmethodsでPOSTを受け付けるようにする。

app.py

@app.route("/api/upload", methods=["POST"])
def upload():
    return 'アップロード成功'

curlのオプション-X HTTPメソッドによりPOSTでレスポンスが返ってくることを確かめる。

$ curl -X POST http://127.0.0.1:5000/api/upload
アップロード成功

Flaskでmultipart/form-dataのファイルを受けつける

app.config['UPLOAD_FOLDER']にアップロード先のディレクトリを指定しておく。
multipart/form-dataによりアップロードされたファイルはrequest.filesに格納されている。
request.files[フィールド名]からファイルをFileStorageオブジェクトとして取得する。
FileStorageオブジェクトはsaveメソッドを持っており、このメソッドでファイルを保存することができる。
保存時はsecure_filename関数で安全なファイル名にする。

import os
from flask import Flask, request
from werkzeug.utils import secure_filename

UPLOAD_FOLDER = './uploads'

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


@app.route("/api/upload", methods=["POST"])
def upload():
    fileStorageObj = request.files['file']
    filename = secure_filename(fileStorageObj.filename)
    fileStorageObj.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return 'アップロード成功'


if __name__ == "__main__":
    app.run(debug=True)

テスト用のダミーCSVを用意する。

dummy.csv

name,age,pref
田原 唯菜,56,香川県
伊沢 圭一,57,鳥取県
鈴村 良夫,6,千葉県

このファイルをcurlでアップロードする。
multipart/form-dataは-F フィールド名=値で指定する。ファイルの場合は@ファイル名で指定する。

$ curl -X POST -F [email protected] http://127.0.0.1:5000/api/upload
アップロード成功

uploadsディレクトリにファイルが格納されていることが確認できる。

ファイルと一緒にテキストもリクエストする

ファイルと一緒にテキストもリクエストできることを確認しておく。

ファイルの取得は以下の形で行うが、

request.files['file']

ファイル以外の取得はform[フィールド名]で取得する。

request.form['text']

このフィールドをprintで表示できるようにし、curlで確認する。

$ curl -X POST -F [email protected] -F text="大切なCSVです"  http://127.0.0.1:5000/api/upload

レスポンスをJSONにする

Nuxt.jsのaxiosで扱うためレスポンスをJSONにする。
JSON_AS_ASCIIを設定して、日本語が文字化けしないようにする。

app.config['JSON_AS_ASCII'] = False

戻り値はjsonify(オブジェクト)としてJSONで返せるようにする。

エラーの場合はabort(400, {'message': 'ファイルは必須です'})を呼び出し、
@app.errorhandler(400)でエラーをハンドリングする。

app.py

import os
from flask import Flask, request, jsonify, abort
from werkzeug.utils import secure_filename

UPLOAD_FOLDER = './uploads'

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['JSON_AS_ASCII'] = False


@app.route("/api/upload", methods=["POST"])
def upload():
    print(request.form['text'])
    if 'file' not in request.files:
        return abort(400, {'message': 'ファイルは必須です'})
    fileStorageObj = request.files['file']
    filename = secure_filename(fileStorageObj.filename)
    fileStorageObj.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    return jsonify({'message': 'アップロード成功'})


@app.errorhandler(400)
def custom400(error):
    return jsonify({'message': error.description['message']})

if __name__ == "__main__":
    app.run(debug=True)

ファイル、テキストを指定した場合はアップロード成功と返ってくる。

$ curl -X POST -F [email protected] -F text="大切なCSVです" http://127.0.0.1:5000/api/upload
{
  "message": "アップロード成功"
}

また、ファイルをあえて指定しない場合はファイルは必須ですとエラーハンドリング通り返ってくる。

$ curl -X POST -F text="大切なCSVです" http://127.0.0.1:5000/api/upload
{
  "message": "ファイルは必須です"
}

ここまででFlaskアプリケーションの実装は終わり。

Nuxt.jsでCSVファイルをmultipart/form-dataによりアップロード(POST)する

つぎはNuxt.jsの実装を進めていく。

npx create-nuxt-app プロジェクト名でプロジェクトを作成する。
Axiosをインストールし、modeをSingle Page Appにする。他の設定項目はデフォルトのままにした。

$ npx create-nuxt-app ui
? Choose features to install Axios
? Choose rendering mode Single Page App

nuxt.config.jsでaxiosのオプションproxyをtrueとし、proxyでapiにアクセスがきたらFlaskに渡すよう設定する。

nuxt.config.js

  axios: {
    proxy: true
  },
  proxy: {
    '/api/': 'http://127.0.0.1:5000/',
  },

npm run devで起動し、proxyの設定を確認する。

$ npm run dev
...略
Listening on: http://localhost:3000/

Nuxt.jsは3000番ポートで起動するので、http://localhost:3000/api/uploadに向けてcurlでPOSTする。
今まで通りレスポンスが返ってきている。

$ curl -l -X POST -F [email protected]  -F text="大切なCSVです"  http://localhost:3000/api/upload
{
  "message": "アップロード成功"
}

あとはコンポーネントを作れば良い。
template部分は、テキストはv-modelで入力をうけつける。
ファイルはtype="file"としたうえで、@changeイベントでファイルが選択されたときのハンドリングをする。 event.target.files[0]からファイルを取得し、dataに保持しておく。
アップロードするボタンが押されたら、multipart/form-dataでPOSTするためにnew FormData()に対してtext、fileをappendする。
this.$axios.post(URL, formData, options)でPOSTする。
第一引数にURLを指定し、第二引数にformDataを指定する。第三引数のoptionsでHTTPヘッダーにmultipart/form-dataを指定する。
index.vue

画面からテキストを入力し、画像を選択して「アップロードする」するボタンを押すとuplodasディレクトリにファイルがアップロードされ、ブラウザのコンソールにメッセージが表示される。

info アップロード成功

また、画像を選択しなかった場合、400エラーとなり、エラーメッセージが取得できる。

POST http://localhost:3000/api/upload 400 (BAD REQUEST)
info ファイルは必須です

参考

https://flask.palletsprojects.com/en/1.1.x/patterns/fileuploads/?highlight=upload
http://tm-webtools.com/Tools/TestData
https://stackoverflow.com/questions/21294889/how-to-get-access-to-error-message-from-abort-command-when-using-custom-error-ha
https://werkzeug.palletsprojects.com/en/0.15.x/datastructures/#werkzeug.datastructures.ImmutableMultiDict
https://werkzeug.palletsprojects.com/en/0.15.x/datastructures/#werkzeug.datastructures.FileStorage

Graphene + FlaskでGraphQLサーバを作り、QueryとMutationを試す

2019-06-20T22:44:28+09:00

PythonでGraphQLサーバーを構築する。
GraphQLサーバの構築にはPythonのGraphQLライブラリであるGrapheneを使う。

GraphQLとは

GraphQLは、RESTに代わるAPIの仕様だ。
APIは、クライアントがサーバーからデータを取得する方法を定義する。

GraphQLクライアントはGraphQLクエリ言語(GraphQL query language)によりデータを絞り込み、GraphQLサーバから必要なデータを取得する。
GraphQLサーバは、固定のデータ構造を返す複数のエンドポイントではなく、単一のエンドポイントのみを公開し、クライアントが要求したデータを返す。GraphQLスキーマ言語(GraphQL schema language)によりデータの追加や変更、型を定義する。PythonやJavaScriptなど様々な言語で実装されたライブラリのいずれかを使い実装する。この記事ではPythonを使う。

GraphQLサーバの実装で必要なこと

GraphQLサーバを作成するためには、次の2つを実装する必要がある。

スキーマを定義する
各フィールドのリゾルバ関数を実装する

スキーマを定義する

GraphQLスキーマ言語にしたがってスキーマを定義する。
スキーマにはQueryタイプ、Mutatinタイプ、あるいは両方をルートに定義する。
QueryタイプはGraphQLサーバからデータを取得する場合に定義する。
MutatinタイプはGraphQLサーバに対してデータを更新する場合に定義する。
意味のあるまとまったデータ(ユーザー、とかブログ)に名前がつけたい場合は、データタイプを定義する。
なお、Subscriptionタイプというものもあるが、これを実装したい場合はgraphql-wsという別のライブラリで実装することになる。Subscriptionタイプはこの記事では紹介しない。

スキーマの最も単純な具体例は次のような定義だ。
ルートにQueryタイプを定義している。定義されたタイプ内の項目helloはフィールドと呼ばれる。フィールドには型を指定できる。StringはUTF8の文字を意味する定義済みの型だ。

type Query {
  hello: String
}

各フィールドのリゾルバ関数を実装する

リゾルバ関数(resolver function)は、1つのフィールドにつき1つ用意する必要のある、データを取得するための関数だ。
GraphQLサーバはクエリを受け取ると、クエリに指定されているフィールドのすべての関数を呼び出す。その結果をクエリに記述された形式にまとめてGraphQLクライアントに返す。

AriadneとGraphene

PythonにはGraphQLサーバを実装するためのライブラリとして、AriadneとGrapheneという2つが用意されている。
AriadneはスキーマファーストでGraphQLサーバーを作成するのに対して、GrapheneはコードファーストでGraphQLサーバーを作成する。

スキーマファーストとは、先ほど見たようなスキーマをまずは定義することでGraphQLサーバを実装していく。

from ariadne import gql

type_defs = gql("""
    type Query {
        hello: String
    }
""")

一方で、コードファーストとはtype Query { ...}のような記述をせず、その代わりにスキーマの定義をclass Queryのようにコードで記述していく。

from graphene import ObjectType, String

class Query(ObjectType):
    hello = String()

この記事ではGraphQLの公式サイトからリンクされているGrapheneを使いコードファーストで実装していく。

GrapheneでGraphQLサーバを実装する

それでは、実際にGrapheneを使ってGraphQLサーバを実装していく。
名前を与えたら、「こんにちは {名前}さん」と返すようにする。

grapheneのインストール

まずはPython3.7.3で仮想環境を作成する。

$ touch Pipfile
$ pipenv --python 3.7.3
$ pipenv shell

grapheneをインストールする。

$ pipenv install graphene==2.1.6

Queryの実装

コードは次のようになる。

hello.py

from graphene import ObjectType, String, Schema

class Query(ObjectType):
    hello = String(name=String(default_value="名無しさん"))

    def resolve_hello(self, info, name):
        return f'こんにちは {name}さん'


schema = Schema(query=Query)

ObjectTypeを継承したクラスを作成する。(Queryてクラス名に縛りはなく、何でもよい)
このクラスには、フィールドとそのフィールドのリゾルバ関数を実装する。
このクラスの属性はフィールドをあらわし、型を表すクラスを代入することで型を定義する。
型を表すクラスとしてInt、Float、String、Boolean、IDのようなスカラー型やEnum、Listなどが用意されている。
resolve_クラスの属性名はリゾルバ関数をあらわす。
リゾルバ関数の引数の説明はこちら。
https://docs.graphene-python.org/en/latest/types/objecttypes/#resolvers

つまり、helloはフィールドでString型であり、resolve_helloはhelloフィールドのリゾルバ関数である。
作成したObjectTypeを継承したクラスはSchemaクラスにquery=の形で渡す。これでルートにQueryタイプを定義したことになる。

さて、定義したスキーマに対してクエリを実行したい。
schema.execute()でクエリを実行できる。

hello.py

query_string = '{ hello }'
result = schema.execute(query_string)
print(result.data['hello'])

query_string_with_argument = '{ hello (name: "なんしー") }'
result = schema.execute(query_string_with_argument)
print(result.data['hello'])

実行するとクエリで問い合わせた結果が取得できる。

$ python hello.py
こんにちは 名無しさんさん
こんにちは なんしーさん

GraphQL APIをウェブアプリケーション(Flask)で提供する

GraphQL APIをサーバーで完結させるのではなく、ブラウザから呼び出せるようにする。
FlaskとFlask-GraphQLというGraphQLと連携するライブラリをインストールする。

$ pipenv install Flask==1.0.3
$ pipenv install Flask-GraphQL==2.0.0

Flaskのadd_url_ruleメソッドで/graphqlにアクセスするとGraph GraphQLからデータを取得できるようにする。

app.py

from flask import Flask
from flask_graphql import GraphQLView
from hello import schema

app = Flask(__name__)
app.debug = True

app.add_url_rule(
    '/graphql',
    view_func=GraphQLView.as_view(
        'graphql',
        schema=schema,
        graphiql=True  # GraphiQLを表示
    )
)

if __name__ == '__main__':
    app.run()

python app.pyでサーバーを立ち上げる。

$ python app.py
...
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

http://127.0.0.1:5000/graphqlを開くとGraphQLをGUIで操作できるGraphiQLが表示される。
左の窓に{ hello }と入力して、実行ボタンを押すと、右側の窓に結果が返ってくる！

hello (name: "なんしー")と引数付きで実行すると、それに対応した値が返ってくる。

Mutationの実装

Queryの確認ができたので、次はMutationを実装する。
ユーザーの名前、年齢を渡したら、ID、変更された名前、変更された年齢が返ってくるようにする。
graphene.Mutationを継承したクラスを作成する。
このクラスの属性が戻り値になる。
Argumentsクラスの属性は引数になる。
そして、mutateメソッドでgraphene.Mutationを継承したクラスのインスタンスを返す。
本来mutateメソッドの中でDBへの永続化などの処理を書く。

from graphene import ObjectType, String, Schema, Mutation, ID, Int

class CreatePerson(Mutation):
    # created_id、created_name、created_ageが戻り値
    created_id = ID()
    created_name = String()
    created_age = Int()

    # name, ageが引数
    class Arguments:
        name = String()
        age  = Int()

    # mutateメソッドの引数はself,infoの次に引数が並ぶ
    def mutate(self, info, name, age):
        # ここで永続化する

        # Mutationを継承したクラスをインスタンス化して返す
        return CreatePerson(
            created_id=1,
            created_name=f'{name}さん',
            created_age=age + 10,
        )

class MyMutation(ObjectType):
    create_person = CreatePerson.Field()

schema = Schema(query=Query, mutation=MyMutation)

次のように問い合わせると、

mutation {
  createPerson(name:"加藤", age: 15) {
    createdId
    createdAge
    createdName
  }
}

mutateメソッドで変更を加えた通り、年齢が加算され、名前にさんがついて返ってくる。

{
  "data": {
    "createPerson": {
      "createdId": "1",
      "createdAge": 25,
      "createdName": "加藤さん"
    }
  }
}

参考
https://graphql.org/
https://www.howtographql.com/
https://employment.en-japan.com/engineerhub/entry/2018/12/26/103000
https://github.com/graphql-python/graphene/tree/master/examples
https://github.com/howtographql/graphql-python/blob/master/hackernews/links/schema.py