先日の エントリー で書いたようにPythonのWebフレームワークであるFlaskに入門したので、Flaskを使ってボキャビル用のWebアプリ Vocabull (server) を作って公開しました。括弧付きで (server) とあるのは、以前にもボキャビル用のスクリプト 旧Vocabull を作っていてそのWebアプリ版のつもりで開発を始めたためです。だいぶ規模が大きくなり、ほとんど別物になりましたが。。。

クイックスタートはWebアプリの操作説明です。お試し版を pythonanywhere.comで公開 しました。

注意: Vocabullはまだ開発途中なので、たまにデータベースの互換性が無くなります。ブックや練習状況のデータが消えても困らないように定期的にバックアップするようにしてください。Vocabullにログインできなくなったら、改めてアカウント作成、ログイン後にバックアップデータからリストアしてください。

strident	shrill, harsh, rough	[in more ******** tones]
lassitude	weariness, fatigue
deleterious	bad, harmful	[a *********** effect on health]

pythonanywhereで使う分には必要ありません。自分でサーバーを立ててみたい方に。

• Python 3.10以降をセットアップする
• githubのレポジトリをクローンしてくる

git clone git@github.com:achiwa912/vbs.git

• (推奨)仮想環境を作る

cd vbs
python -m venv ve
source ./ve/bin/activate

• 前提ライブラリをインストールする

pip install -r requirements.txt

• 環境変数を設定する

export FLASK_APP=vbs.py

• データベース作成などの初期設定をする

flask initial-setup

• webサーバーをインストールして動かす

pip install gunicorn
gunicorn --bind 0.0.0.0:5000 vbs:app

• WebブラウザーからサーバーURLのポート5000にアクセスする。例えば、

http://192.168.0.103:5000

残念なことに Heroku が有料化してしまったので、ちまたで評判の良さそうな Pythonanywhere を使ってみました。開発者としてクラウド(Paas)を使うのは初めてですが、(ドキュメントもろくに読まず)適当に試行錯誤していたらデプロイできてしまいました。やったこと。

• https://www.pythonanywhere.com/pricing/ から Create a Beginner account をクリックし、アカウント登録する
• Console をクリックするとbashが使えるので、githubのレポジトリをクローンしてくる

git clone git@github.com:achiwa912/vbs.git

• virtual environmentを作成する

cd vbs
mkvirtualenv ve

• veは ~/.virtualenv に作られます。気が付かずにve/activateせずにpip installしてしまった。。。
• 前提ライブラリを入れる

pip install -r requirements.txt

• メニューから Web をクリックし、Flaskアプリを作成する
• Web > Virtualenvセクション に /home/achiwa912/.virtualenvs/ve を指定する
• Codeセクション > /var/www/achiwa912_pythonanywhere_com_wsgi.py をクリックし、2行(l10, 16)修正する

project_home = 'home/achiwa912/vbs'
from vbs import app as application

• Reloadセクションの Reload achiwa912.pythonanywhere.com をクリックする
• SecurityセクションのForce HTTPSをenableにする

トラブったらLog filesセクションの achiwa912.pythonanywhere.com.error.log をクリックすると、どこが悪かったのかがわかります。

なお、後から考えてみれば当たり前ですが、pythonanywhereはオーディオデバイスをサポートしていないので、mp3等の音声ファイルを再生することができません。 Pronounce word の機能を入れ込むのに、html5のaudioタグを使ってストリーミングしてやる必要がありました。

ローカルのテスト環境では動いていても、クラウドにデプロイすると動かなくなることが意外とあって、勉強になります。

私はボキャビル用に Quizlet を使っていたのですが、あまり外出先で使わなくなったので無料版に切り替えたところ、制限がきつくなって使い勝手に不満を感じていました。そこで、Flaskの勉強を兼ねて無料で使えるアプリを自作してみました。

(ほぼ)初めてのWebアプリにしては、なかなか良く出来たと自己満足しています。使っていただけるとうれしいです。