Help us understand the problem. What is going on with this article?

Django×PinaxでWebサービス入門③|PyCharmをセットアップ

More than 1 year has passed since last update.

この記事の内容

前回はMacでローカル開発環境のセットアップとWebアプリケーションの構築を行いました。
VPSにデプロイしてインターネット公開する前に、MacにPyCharmというIDE(統合開発環境)をインストールして、今後の開発をスムーズに行えるようにします。

PyCharmはチェコのJetBrains社が作ったPython用の統合開発環境(IDE)です。

統合開発環境(IDE)とは

プログラミングは特定の構文に従って文字列を書いていきファイルを作り、複数のファイルを組み合わせることでアプリケーションとして動作するようになります。
基本的に文字を書いていくだけなので、極論テキストファイルを使ってファイルを編集していくだけでもプログラミングは可能です。しかしアプリケーションが大きくなればなるほど、作業効率が低下しやすく、しかし重要になってきます。
統合開発環境(IDE)はこのプログラミングの生産性を向上させるためのいろいろな機能が搭載されたツールです。
具体的には、
  • コードの自動補完
  • エラーチェック
  • デバッグ
  • ファイル・コードの検索

といったことができます。

今回の対象は、全体像で見てみるとこの緑色で囲った部分です。

Overall Structure_02.png

PyCharm Professional Editionのダウンロード

PyCharmには有料のProfessional Edition、無料のCommunity Editionがあります。
Professional EditionにはDjango、DB、SQLの対応などがされているため、今回はこのProfessional Editionを利用します。
料金は年間1万円弱ですが、最初の30日間はフリートライアル期間となっています。

PyCharm: Python IDE for Professional Developers by JetBrains

JetBrains社のサイトからアプリケーションをダウンロードします。

最初にPyChamrを立ち上げるときはいくつか設定用のダイアログが出てきます。設定は後からでも行えるので、今回は一旦基本的にデフォルトの設定のまま進めます。

まず、PyCharmの設定をインポートするかと聞かれます。初めてPyCharmを利用する場合は関係無いので、Do not import settingsを選択します。

スクリーンショット 2018-06-05 8.35.24.png

PyCharmを購入するか、30日間のフリートライアルを行うかの選択用のダイアログが出てくるのでEvaluate for free for 30 daysを、続いてライセンス規約への合意のためのダイアログが出てきます。

キーマップスキーマの選択用ダイアログが出てきます。ここも初めてPyCharmを使うので、I've never used PyCharm を選択。

UIテーマの選択用のダイアログです。個人的に背景が白いほうが好みなので、Lightを選択しました。

コマンドでファイルやプロジェクトを起動できるようにするためのスクリプトを作成できます。
ここも何もせずに次へ進みます。

PyCharmのプラグインをダウンロードするか聞かれます。何もダウンロードせずに進みます。

これでPyCharmの設定は終了です。この次に前回の記事で作成したWebアプリケーション用のプロジェクトを作成し、PyCharmを実行できるようにしていきます。

Webアプリケーションを読み込む

先程までの初期設定が終わると、下記のような画面が表示されます。ここでCreate New Projectを選択して、プロジェクトを作成します。

続いて表示されるダイアログで、作成するプロジェクトの詳細を選択していきます。
まず、今回はDjangoでWebアプリケーションを作っているため、左側の一覧からDjangoを選択します。

Location: に前回の記事で作成したTODOアプリのディレクトリを指定します。

Project Interpreter: に、同様に前回作成したVirtualenvのPython3を指定します。前回の記事でsourceコマンドでVirtualenvを起動し、その中でTODOアプリを実行しましたが、これと同じことがPyCharm経由でも行えるようにするためです。
Project InterpreterにはNew environmentExisting interpreterがあります。今回はtodo_envという仮想環境をすでに作成済みなので、それを呼び出します。Existing interpreterを選択するとInterpreterが選択できるようになります。todo_envはまだここに表示されないので、右側にある『...』と書かれたボタンからtodo_envをInterpreterとして登録します。

ボタンを押すと、Add Python interpreterというダイアログが表示されます。ここでも右側に『...』と書かれたボタンを押します。
Macのディレクトリから前回作成したtodo_envを探し、その中のpythonを選択します。場所はPycharmProjects/todo/todo_env/bin/pythonとなっているはずです。

『OK』をクリックするともとのダイアログに戻り、『Create』ボタンを押します。

すると、選択されたディレクトリはすでに存在しています、プロジェクトをこの存在するソースをもとに作成しますか?と聞かれるので、『Yes』を選択して進みます。

TODOアプリのプロジェクトが開きます。この状態でもPyCharm上でボタンひとつでpython manage.py runserverコマンドを実行し、アプリケーションを起動することができます。しかしこれだとnpmを使って行っていたsassをcssにコンパイルするという部分にまだ対応できていないため、その設定をいれてあげます。

Run > Edit Configurations からアプリケーション実行用の設定ダイアログを開きます。

スクリーンショット 2018-06-10 9.55.13.png

ここで、TODOアプリが実行可能になっているのを確認してみましょう。左の一覧から Django server > todo を選択すると、アプリケーション実行用の設定が入っていることがわかります。

それでは、npmの設定も行っていきます。左上の『+』ボタンからnpmを選択します。

するとnpm実行用の設定を作成することができます。ここでは

  • Name: todo
  • Scripts: watch

とします。watchというスクリプトは、scssファイルに変更があるとcssを自動でコンパイルするように見張っておく、というものです。これをつねに動かしておくことで、PyCharm上でのフロントの対応が楽になります。

最後に『OK』を押して設定を終了します。

PyCharmからアプリケーションを実行する

最後に、PyCharmからアプリケーションを実行できるか試してみます。

そのためにアプリケーション側の設定を一部変更したいので、左側のプロジェクトのナビゲーションからtodo/todo/settings.pyというファイルを選択します。

スクリーンショット 2018-06-10 10.33.48.png

このファイルはアプリケーションの設定を司るファイルで、

  • データベースの接続設定
  • 静的ファイルのパスの設定
  • インストールしているアプリケーションの設定
  • ログの設定

などなどがここで定義されます。

この中に、どのホストからの接続を許可するかを制御するALLOWED_HOSTSという設定があります。
Pinaxは初期状態だと、localhostからの接続のみ許可するので、これを全てのホストからの接続を許可してあげます。

todo/todo/settings.py
ALLOWED_HOSTS = [
    "*",
]

ついでにタイムゾーンと言語も変更しておきます。

todo/todo/settings.py
TIME_ZONE = "Asia/Tokyo"

LANGUAGE_CODE = "ja"

それでは、PyCharmの右上にある緑色の三角ボタンを押してアプリケーションを実行します。
ボタンを押すと、PyCharmのコンソールに下記のように表示されます。

Console
/Users/user/PycharmProjects/todo/todo_env/bin/python /Users/user/PycharmProjects/todo/todo/manage.py runserver 8000
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2018 - 11:42:05
Django version 2.0.6, using settings 'todo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

http://127.0.0.1:8000/に接続すると、前回の記事同様Pinaxの初期状態の画面が表示されます。
これでPyCharmを使ってガリガリ開発していく準備が整いました。

次回

次回は前回作ったアプリケーションを外部のVPSサーバーにデプロイするところまで進めていきます。

Django×PinaxでWebサービス入門④|VPSサーバーにデプロイ

mtitg
データサイエンスの企業でWebエンジニアやってます
datamix
データサイエンスに関わる最適なサービスを継続的に提供することで、企業・地域・社会に属するひとりひとりが、客観的に意思決定する力を高め、自由に、そして平等に活躍できる世界を実現します。
https://datamix.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした