× 
で運営中です。
こんにちは、fuyutsuki(@Fuyutsuki)です。
FuyutsukiPythonを使って、おしゃれなGUIアプリを作りたいと思ったことはありませんか？
>> こちらの記事で解説しているように、Python標準で搭載されている「Tkinter」でもGUIアプリを作ることは可能ですが、見た目にこだわることは難しいです。
そのため、今回はブラウザベースで実装するPythonライブラリEelを紹介します。
FuyutsukiMITライセンスなので、ライセンス上扱いやすいこともEelを選択した大きな理由の一つです。
Pythonの仮想環境構築・フォルダ構成
Python仮想環境構築
まずは、こちらの記事で以前解説したように、vertualenvでPythonの仮想環境を構築します。VS CodeでPythonスクリプタの選択までしておきましょう。
今回は下記のようなバッチファイルを作成します。
@echo off
rem スクリプトが置かれている場所をカレントディレクトリにする。
cd /d %~dp0
rem 念のためvirtualenvのインストールとpipのアップグレードを行う。
pip install virtualenv
python -m pip install --upgrade pip
rem venvの環境を構築する。
python -m venv venv
call ./venv/Scripts/activate
python -m pip install --upgrade pip
rem 各パッケージをインストール
pip install eel
pip install pyinstaller
pip install pytest
pip install pytest-watch
pauseフォルダ構成
ここまでで、フォルダはこのようになっているかと思います。(pip install pytestは、ソフトのテストを行うためのライブラリであり、記述しなくても構いません)
上記フォルダに、webフォルダを新規作成し、webフォルダの中にEel.htmlファイルを作成します。
コードを記述してHello Worldを表示させてみる
やはりまずはHello Worldを表示させるところからでしょう。
Hello Worldを表示させて、Eelが起動することを確認→Step2_実際に簡単なソフト開発という流れです。
Eel.htmlファイルにコードを記述する
結論ですが、Eel.htmlファイルには下記のようにコードを記述してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Title</title>
</head>
<body>
Hello, World!
</body>
</html>先頭の<!DOCTYPE html>は、HEML5でのDOCTYPE宣言の書き方です。省略すると、レイアウトが崩れる恐れがあるため、必ず記述するようにしましょう。
また、<meta charset=”UTF-8″>は、文字化けを防ぐため記述しています。
Eel.pyファイルにコードを記述する
.pyファイルは以下のように編集します。
import eel
def main():
eel.init("web")
eel.start("Eel.html", size=(600, 300), port=65535)
if __name__ == "__main__":
main()port番号は、既にPCが使用しているポート番号とかぶらないように0-65535の間で設定します。
ここでは、65535としています。
VS Codeで実行しよう
VS Codeから実行して、以下のようにHello Worldが表示されれば完成です。
まとめ
PythonライブラリEelで”Hello World”を表示させるまでの過程を紹介しました。
楽しみにお待ちください。
また、プログラミングを学習したいと思っている方はこちらの記事で紹介しているように、買い切り型のオンライン動画学習サービスUdemyがおすすめです。講師の方々のレベルがとても高いことが特長です。
独学でプログラミング学習をするなら、まずおすすめしたいのがUdemyです。オンライン動画買い切り形式で、実務レベルのスキルを習得できます。定期的に80~90%OFFセールが実施されていますよ。
＼ セール中は80~90%OFFで購入可能／
30日間返金保証
最後まで読んでいただきありがとうございました。ではまた、次の記事で！
コメント