概要
Python+Flask+Electron+AdminLTEで管理画面を構築する。しかも秒速で構築できる・・・はずです（汗）
CMS構築などのスタートアップにご利用いただければ、まず間違いなく爆速開発の先駆けとなることでしょう。
さて、構築に掛かる前に軽く説明しておきます。まず、バックエンドはPython、フロントエンドはElectron（HTML・CSS・javascript）。バックエンドとフロントエンドを結びつけるルーティングにFlaskという小規模開発で用いられる簡易的なフレームワークを使用します。
フロントエンドでは、Electronの中にAdminLTEというあらかじめ良い具合に仕上がった管理画面風のデザインを埋め込みます。このAdminLTEはBootstrapでUIが構成されているため、決まり事さえ守ればそれなりのデザインに仕上がってしまうとても重宝する代物なのです。
Electronはクロスプラットフォーム（MacOS・Windows・Linux）で動作するデスクトップアプリを、Web（Chromium + Node.js）技術を用いて開発できるGUIアプリケーション開発フレームワークです。
完成イメージ
完成後は、上の画像のような表示が出るはずです。
自分が作ったわけでもないのに、なぜか「わいが作ったったw」感に溢れかえると思います（笑）！
導入開始
ここから順を追ってコマンドを叩いて行くだけで、先ほどご覧になった管理画面風のところまで完成まで突っ走れますので、任意に名前を変えるところだけにご自身で管理しやすいよう注意を払ってください。
仮想開発環境を構築
いつものおまじない＆儀式だと思って、サクッと仕上げてみてください。
下記のリンクを参照し、仮想開発環境構築までのところまで進んだら、またこちらへ戻ってきて先へ進めてみてください。
【簡単Python】venvでサクッと仮想環境を用意してみる【Mac開発環境構築】
仮想環境を起動させる
上記のリンク先の下記コマンドの部分まで進みましたら、こちらの記事に合流し下へ進みます。
$ source fdz/bin/activateこのままこの記事では「fdz」というディレクトリ名を使用しますが、任意で名前を付けた方は、その名前を踏襲してお使いください。
下記のようにカレントディレクトリを先程の任意で付けた名前に持ってきます。
$ (fdz) cd fdzリモートリポジトリからローカルへ持ってくる
今回の記事のために、私がこっそりとgithubのリモートリポジトリへ仕込んでおきましたので、まずはAdminLTEをローカルへ召喚します！通常のcloneだと外側のディレクトリも一緒に含まれてしまいますが、下記のコマンドならば中身だけを取得できます。
最後の行の「master」はブランチに合わせてください。
$ (fdz) git init
$ (fdz) git remote add origin https://github.com/Global-Hack/Python-Flask-Electron-AdminLTE.git
$ (fdz) git fetch --all --prune
$ (fdz) git pull origin master
Electronを入れる
$ (fdz) npm install electronPythonフレームワークのFlaskを入れる
$ (fdz) pip install Flask初期化
ソース管理に必要なpackage.jsonが既にあるとは思いますが一応おまじない。
$ (fdz) npm init -yrequestのインストール
HTTP通信に必要なモジュールをインストールします。
$ (fdz) npm install --save request$ (fdz) npm install --save request-promisepython-shellのインストール
Node.jsでjavascritpからPython、Pythonからjacascriptのリクエスト＆レスポンスを実現させるモジュールです。
$ (fdz) npm install --save python-shellPython+Flask+Electron+AdminLTEの動作確認
いよいよ完成です！下記のコマンドで最初の方で見せた完成画像のような表示が出ていれば大丈夫です！
$ (fdz) electron .
あとがき
あとはあなたの望んだ形に、少しずつ近づけていければ私としても幸いです。たとえ失敗したとしても、ここまでの流れをサクッと仕上げられるあなたならば大した苦労でもないでしょう。
失敗を恐れず、思う存分暴れまわって下さい！
Be the first to comment