だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【Anaconda+Django】 PythonでWebアプリを開発してみる。【環境構築が実は一番ハードル高い?】


最近仕事で使っているExcelの管理シートたちが増えてきて複雑になったので、Webアプリでまとめて管理できたらなーなんて軽い感じでアプリ開発の勉強を始めました。今回はその開発に入る前の環境構築の手順をまとめます。

前提条件

開発では言語にPython(パイソン)、webアプリのフレームワークDjango(ジャンゴ)パッケージインストーラーにAnaconda(アナコンダ)統合開発環境にPyCharm(パイチャーム)を使用します。今回アプリの開発で使用するPCのスペックは、OSがWindows10、システムのプロセッサがIntel(R) Core(TM) i5-7300U CPU @ 2.60GHz 2.70 GHz、RAMが8.00 GB、システムの種類が64 ビット オペレーティング システム、x64 ベース プロセッサとなっています。※それぞれの用語や、意味はいろんなサイトで説明があるので割愛します。

1.AnacondaによるPythonのインストール

まずは、Pythonをインストールします。PythonだけであればPythonインストーラーをそのまま入手しますが、後々パッケージやライブラリをCUIからぱちぱちインストールするのが大変なので、そんなことも代わりにやってくれる便利なGUIのパッケージ管理ツールAnacondaを使用します。AnacondaをインストールすればPythonもついてきます。

① Anacondaのインストール

(1) インストーラーのダウンロード

下記サイトからAnacondaをインストールします。
www.anaconda.com

スクロールして下にいくとWindows用のダウンロードボタンがあるので、ダウンロードを押下します。現時点ではAnacondaが5.2、Pythonが3.6のものをダウンロードしました。
f:id:makimakimakino:20180617213820p:plain:w500

(2) Anacondaのインストール

ダウンロードしたインストーラーをダブルクリックして起動します。特に必要がなければそのままインストールして問題ないと思います。
f:id:makimakimakino:20180617214348p:plain:w500

「Setup」画面では[Next]ボタン、
「License Agreement」画面では[I Agree]ボタン、
「Select Installation Type」画面では[Next]ボタン、
「Choose Install Location」では[Next]ボタン
(※デフォルトではC:\Users\xxxxxxxxxx\AppData\Local\Continuum\anaconda3)、
「Advanced Installation Options」では[Install]ボタンを押下します。
インストールが完了したら[Finish]ボタンを押下します。アプリケーション(Windowsボタンを押下して)検索にてAnaconda Navigatorと入力して下記が表示されればインストールが完了しています。次は実際にAnaconda Navigatorを押下してAnaconda Navigatorを立ち上げてみましょう。
f:id:makimakimakino:20180617215450p:plain:w500

2.Django用の仮想環境の作成

さあ、Pythonを使ってアプリケーションを作るぞ!と思ったら1からくみ上げていくのは大変です。何年かかるのでしょうか。そんな時はほかの人が作ってくれた、Webアプリ用のフレームワーク(ライブラリパッケージ)を使うことで開発時間を短縮できます。先人の知恵は偉大です。ありがたく使わせていただきます。だって楽したいじゃん。ということでPythonのWebアプリケーションのフレームワークはいくつかあります。例えばFlask、Bottle、Djangoは有名です。それぞれ良さがあるのですが、今回はDjangoを使います。管理画面やユーザーログイン画面の自動生成、セキュリティ的にもデフォルトで信頼度が高いらしいので。

Django用の仮想環境の作成

Anaconda Navigatorが立ち上がると下記のようにNavigatorが立ち上がります。
f:id:makimakimakino:20180617220545p:plain:w500

[Environments]を押下すると仮想環境の一覧が表示されます。
f:id:makimakimakino:20180617220911p:plain:w500

[Create]を押下すると仮想環境の作成画面が立ち上がります。"django"と入力して[Create]ボタンを押下すると仮想環境が作成されます。
f:id:makimakimakino:20180617221041p:plain:w500

なぜ仮想環境が必要?

開発環境を作るとソフトウェアやパッケージとPCとの結合を疎にすることができます。どういうことかというと、例えば、一つのPCにPython2系とPython3系をまとめて入れてしまうと、あるコードを書いたときに2系のパッケージを参照するのか3系のパッケージを参照するのかなど、作っていて混乱してしまいます。自分は3系を作っていたと思っていても実行環境は2系だったのでいちいち設定をいじって切り替えなければいけないなどが発生します。最悪片方をアンインストールして。。。なんてこともしていた記憶があります。それを仮想環境を作って片方は2系、片方は3系と設定さえしておけば、環境を選択するだけで環境同士依存することなく使うことができます。ようは使う側が意識しなくてもよくなります。使わなくなった環境があれば環境ごと削除することもできて、他の環境にはなんの影響もありません。

  

Djangoのインストール

仮想環境が出来上がったら一覧に戻って新しくできたdjangoを押下します。
f:id:makimakimakino:20180617223531p:plain:w500

パッケージのロードが始まり、インストールされているパッケージが右側にリスト表示されます。
f:id:makimakimakino:20180617223646p:plain:w500

ドロップダウンをAllにして、検索ボックスにdjangoと入力します。
f:id:makimakimakino:20180617223852p:plain:w500

確か、デフォルトでdjangoがインストールされていたと思いますが、無ければ検索して出てきたdjangoチェックボックスを選択して、右下に表示されるinstallを押下してインストールしてください。これでアプリを作るためのパッケージの準備は完了です。

※もし、djangoが検索しても出てこない場合はCUIで直接インストールします。
仮想環境一覧リストでdjangoの▶ボタンを押下して、Open Terminalを押下します。
f:id:makimakimakino:20180617225008p:plain:w500   
   
仮想環境をアクティベーションしたCMDが立ち上がるのでそのまま

$pip install django

と入力します。しばらく待ってSuccessfulとなればインストールが完了です。

再びインストールパッケージを確認して(ドロップダウンをAllにして、検索ボックスにdjangoと入力します。)
djangoがインストール済みになっているか確認します。
f:id:makimakimakino:20180617232420p:plain:w500

3.開発環境のインストール

さて、それでは早速開発していきましょう!まずはCMDから。。。となると、開発が大変です。なぜならこのまま開発するとメモ帳を開いて開発することになるからです。できなくはないのですが、(私はしばらくそうやっていました。。。)、タイプミス指摘や入力補完などがないため、生産性が著しく悪いので便利になるように統合開発環境を使います。こちらもいくつかあるのですが、PyCharmを使用します。

① PyCharmのインストール

(1) インストーラーのダウンロード

下記サイトからPyCharmをインストールします。
www.jetbrains.com

スクロールして下にいくとダウンロードボタンがあるので、ダウンロードを押下します。
f:id:makimakimakino:20180617232308p:plain:w500
   
さらにPCのOSと有償版(Professional)か無償版(Community)かを選択する画面へ移動するので、WindowsのCommunityを選択します。
ダウンロードが始まります。
  

(2) PyCharmのインストール

ダウンロードしたインストーラーをダブルクリックして起動します。
特に必要がなければそのままインストールして問題ないと思います。
f:id:makimakimakino:20180617233640p:plain:w500
  
「Setup」画面では[Next]ボタン、「Choose Install Location」では[Next]ボタン、「Installation Options」では[Next]ボタン、「Choose Start Menu Folder」では[Install]ボタンを押下します。インストールが完了したら[Finish]ボタンを押下します。
アプリケーション(Windowsボタンを押下して)検索にてpycharmと入力して下記が表示されればインストールが完了しています。
次は実際にJetBrains PyCharmを押下してPyCharmを立ち上げてみましょう。
f:id:makimakimakino:20180617233602p:plain:w500

(3) PyCharmの日本語化

makimakimakino.hatenablog.com

(4) PyCharmの設定(この辺りは後ほど書きます)

4.サンプルアプリケーションを作ってみる

① プロジェクトとアプリケーションの作成

新規プロジェクトを作成します。
ファイル>新規プロジェクトを押下します。
f:id:makimakimakino:20180617234444p:plain:w500

新規プロジェクトウィンドウが立ち上がるので、左側でDjangoを選択し、ロケーションにプロジェクト名を入力し、(今回はprojectとしました。)既存インタープリターにAnaconda3のPython.exeが選択されていることを確認します。
f:id:makimakimakino:20180617234835p:plain:w500
  
アプリケーション名にアプリケーション名を入力し、(今回はapplicationとしました。)「作成」を押下します。
f:id:makimakimakino:20180617235438p:plain:w500
  
プロジェクトを開く画面でプロジェクトの開き方を選択し、OKを押下します。(今回は新規ウィンドウで開くを選択しました。)
f:id:makimakimakino:20180617235343p:plain:w500

新規プロジェクトが立ち上がれば成功です。
f:id:makimakimakino:20180617235652p:plain:w500

試しに実行してみましょう。
[▶]ボタンかShift+F10を押下してみましょう。
f:id:makimakimakino:20180617235840p:plain:w500

エディタ画面下の実行ウィンドウに

Starting development server at http://127.0.0.1:8020/
Quit the server with CTRL-BREAK.

と表示されればOKです。
f:id:makimakimakino:20180618000117p:plain:w500
  
ブラウザで上記で表示されるURL(今回はhttp://127.0.0.1:8020/でした。)にアクセスしてみて下記のような画面が表示されれば成功です。
(プログラム言語でいうところのHello Word!のようなものです。)
f:id:makimakimakino:20180618000004p:plain:w500

まとめ

以上が、PythonでWebアプリを開発するための準備になります。言語のPythonアプリ開発フレームワークであるDjangoをインストールするためにAnacondaをインストールし、開発を効率化するためにPyCharmをインストールしそれぞれ設定をして、実際のアプリケーションのサンプルを起動しました。結構なボリューム感ですが、だいぶ楽に作れるようになりました。ほぼGUIのみで開発ができるようになるとは。。。今後は実際にアプリケーションを作るところから始めていきたいと思います。そのためにはDjangoのアプリケーションのモデルであるMTVモデルの概念の理解と、それぞれの作成方法。簡単なアプリケーションを作っていきたいと思います。