はじめに

先日、自社用に開発した営業支援システム「FreeSFA」を、オープンソースとして公開しました。
営業支援システム(SFA : Sales Force Automation)とは営業職の生産性を上げ、効率化を目指すシステムのことです。
オープンソースのSFAやCRM(顧客管理システム)はFreeSFAのほかにもいくつか存在しますが、PythonとDjangoで書かれたものは珍しいのではないかと思います。

ランディングページ
https://free-sfa.netlify.app/

ソースコード
https://github.com/sikkimtemi/FreeSFA

開発経緯
https://qiita.com/sikkim/items/365cb1211a3b8ca7b410

FreeSFAは外回りを行う営業メンバーのためにつくりました。弊社の営業職にヒアリングした結果をもとに、様々な営業活動の中でも特に訪問と架電を効率化することを目標にして設計しています。

この記事ではHerokuとGCPを使ってFreeSFAの動作環境を構築する手順を説明します。
手順にしたがって作業すれば、下記のデモサイトと同様のWEBアプリを自分専用に構築することができます。

デモサイト
https://free-sfa-demo.herokuapp.com/

HerokuとGCPには無料枠があるので、規模によっては無料で営業支援システムを運用することも可能です。

なお、この記事の内容やFreeSFAの使用により問題が起こったとしても、保証はいたしませんので、予めご了承ください。

前提

FreeSFAはPython3とDjango2.0で開発されています。
これらの知識がなくてもFreeSFAを動かすことは可能ですが、カスタマイズをしたい場合はプログラミングする必要があります。
今のところ弊社ではFreeSFAのカスタマイズやサポートは行っておりません。

準備するもの

Herokuアカウント
Googleアカウント
適当なメールアカウント
Gitを実行できる環境
Heroku CLI
Google Cloud Platformアカウント（要クレジットカード）

上から3つまでは必須です。
Googleアカウントとメールアカウントの取得方法は省略します。
メールはGmailでも問題ありません。

FreeSFAを動かすだけならGitの実行環境とHeroku CLIは不要です。
カスタマイズをしたい場合やプログラミングの勉強をしたい場合は準備してください。

Google Cloud Platform（GCP）のアカウントはソーシャルログインと地図の表示、および住所から緯度経度を取得するのに利用します。GCPのアカウントがなくても一応FreeSFAを動かすことは可能ですが、「近くの顧客を探す」という目玉機能が利用できなくなるので、ぜひGCPのアカウントもご用意ください。

Herokuアカウントの準備

HerokuはPaaS（Platform as a Service)の一種で、様々なWebアプリケーションを比較的簡単にクラウド上で動かすことができます。
無料枠が充実しているので、小規模なアプリケーションなら無料で運用することも可能です。
アカウントがない場合は以下のURLにアクセスして新規登録してください。

以前はクレジットカードの登録が必要でしたが、現在はクレジットカードなしでもアカウントを作れるようです。

アカウントを作成してログインすると下図のような画面になるはずです。

ここまでできたら、以下の選択肢の中からご自分にあったものを選んでください。

カスタマイズしなくていいので、とにかくFreeSFAを急いで動かしたい。
時間をかけてソースコードのカスタマイズやプログラミングの勉強をしたい。

急いで動かしたい場合は途中をスキップして「Herokuボタンによるデプロイ」まで進んでください。
カスタマイズや勉強をしたい場合は、このまま「Gitを実行できる環境の準備」へ進んでください。

Gitを実行できる環境の準備

Windowsの場合は下記のリンクから「Git for Windows」か「Sourcetree」をダウンロードしてインストールしてください。
gitコマンドが使えれば別の方法でも構いません。

Git for Windows https://gitforwindows.org/
Sourcetree https://ja.atlassian.com/software/sourcetree

Macの場合はHomebrewで入れるのがおすすめです。
下記の記事を参考にしてみてください。
Mac版のSourcetreeでもOKです。

Linuxは最初からgitコマンドが使えるはずです。
もし入っていなかったらapt-getやyumでインストールしてください。

コマンドラインやターミナルで下記のように入力し、バージョンが表示されていればOKです。
バージョンが少々違っても問題ありません。

$ git --version
git version 2.17.2 (Apple Git-113)

Heroku CLIの準備

下記のURLを参考にしてHeroku CLIをインストールしてください。

コマンドプロンプトやターミナルから下記のように入力して、バージョンが表示されていればOKです。
バージョンが少々違っても問題ありません。

$ heroku --version
heroku/7.18.3 darwin-x64 node-v10.12.0

FreeSFAをHerokuへデプロイする

GitHubからソースコードを取得

作業用のフォルダを準備して、コマンドプロンプトやターミナルを開き、cdコマンドで作業用のフォルダへ移動してください。
作業用フォルダに入ったら、以下のコマンドを入力してください。

$ git clone https://github.com/sikkimtemi/FreeSFA.git
$ cd FreeSFA

中身はこんな構造になっています。
とりあえず動かすだけならあまり気にする必要はありません。

FreeSFA
├── IISE
├── register
│   ├── migrations
│   ├── static
│   │   └── register
│   │       ├── css
│   │       ├── img
│   │       ├── js
│   │       └── vendors
│   │           ├── @coreui
│   │           │   ├── coreui
│   │           │   │   └── js
│   │           │   ├── coreui-plugin-chartjs-custom-tooltips
│   │           │   │   └── js
│   │           │   └── icons
│   │           │       ├── css
│   │           │       └── fonts
│   │           ├── bootstrap
│   │           │   └── js
│   │           ├── chart.js
│   │           │   └── js
│   │           ├── flag-icon-css
│   │           │   ├── css
│   │           │   └── flags
│   │           │       ├── 1x1
│   │           │       └── 4x3
│   │           ├── font-awesome
│   │           │   ├── css
│   │           │   └── fonts
│   │           ├── jquery
│   │           │   └── js
│   │           ├── pace-progress
│   │           │   ├── css
│   │           │   └── js
│   │           ├── perfect-scrollbar
│   │           │   └── js
│   │           ├── popper.js
│   │           │   └── js
│   │           └── simple-line-icons
│   │               ├── css
│   │               └── fonts
│   └── templates
│       └── register
│           └── mail_template
│               ├── create
│               ├── invite
│               ├── join_workspace
│               └── reset
├── sfa
│   ├── migrations
│   ├── static
│   │   └── sfa
│   │       ├── css
│   │       ├── csv
│   │       ├── img
│   │       └── js
│   ├── templates
│   │   └── sfa
│   ├── templatetags
│   └── tests
└── socials
    └── migrations

Heroku CLIでHerokuにログイン

以下のコマンドを入力し、Herokuのアカウント（メールアドレス）とパスワードを用いてログインしてください。

$ heroku login

Herokuアプリの作成

アプリケーション名を適当に決めてから、以下のコマンドを入力してください。
このコマンドはFreeSFAフォルダの中で実行する必要があるので注意してください。

$ heroku create アプリケーション名

Herokuのダッシュボードを開くとHerokuアプリができていることを確認できます。
アプリケーション名はheroku createコマンドで入力した名前になっているはずです。

環境変数の設定

作ったばかりのアプリケーションはまだ空っぽの状態です。
ここにFreeSFAのソースをアップロードして、動くようにする必要があります。
ただし事前にいくつかの値を環境変数に設定しておく必要があります。

環境変数	説明
SECRET_KEY	Django内部で使用する秘密鍵です。十分長い値を設定しましょう。WEB上でキーを生成してくれるサービスもあります。 https://djecrety.ir/
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY	Googleのソーシャル認証で用います。取得方法は後述します。
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET	Googleのソーシャル認証で用います。取得方法は後述します。
GOOGLE_RECAPTCHA_SITE_KEY	「私はロボットではありません」を表示して、アカウント追加を制限するためのキーです。取得方法は後述します。
GOOGLE_RECAPTCHA_SECRET_KEY	「私はロボットではありません」を表示して、アカウント追加を制限するための秘密鍵です。取得方法は後述します。
EMAIL_HOST	メール(SMTP)サーバーのホスト名を設定します。 Gmailを使う場合はsmtp.gmail.comを設定してください。
EMAIL_PORT	メールサーバーのポート番号を設定します。通常は25か465です。Gmailを使う場合は465を設定してください。
EMAIL_HOST_USER	メールサーバーのユーザーIDを設定します。
EMAIL_HOST_PASSWORD	メールサーバーのパスワードを設定します。
EMAIL_USE_SSL	メールサーバーでSSLを使用するかどうかを設定します。TrueもしくはFalseを入力してください。Gmailを使う場合はTrueを設定してください。

メールサーバーにGmailを利用する場合は、下記URLを参考に「安全性の低いアプリからのアカウントへのアクセスを許可」も実施しておいてください。

環境変数はheroku config:addコマンドで設定することができます。
例えばSECRET_KEYに94*dg1^h)qdl$h#dyd4&-4v5x6()5(4c(#bi+7$p=cnry2)ul+という値を設定したい場合は次のように入力します。

$ heroku config:add SECRET_KEY="94*dg1^h)qdl$h#dyd4&-4v5x6()5(4c(#bi+7$p=cnry2)ul+"

SECRET_KEYは文字通り秘密にする必要があるので、この例をそのままコピペで実行しないようご注意ください。
下記のように秘密鍵をWEB上で生成してくれるサービスも存在します。

上の表にある環境変数はすべて設定してください。
Google関連の値の取得方法は後述しますので、とりあえず空文字「""」を設定しておいてください。

環境変数はHerokuのページからでも設定することができます。

Reveal Config Varsをクリックすると画面が下図のように変わり、環境変数の追加・編集・削除ができるようになります。

Herokuへデプロイする

環境変数を設定したらいったんデプロイしてみましょう。
デプロイは以下のコマンドで行います。

$ git push heroku master

いろいろとログが出力されますが、最後が以下のような感じで終わっていればOKです。
通常は１分以内に終わるはずです。

remote: -----> Compressing...
remote:        Done: 73.6M
remote: -----> Launching...
remote:        Released v18
remote:        https://free-sfa-demo.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/free-sfa-demo.git
 * [new branch]      master -> master

マイグレート

デプロイは終わりましたが、まだデータベースの準備ができていません。
データベースを使えるようにする作業をマイグレートといいます。
以下のコマンドを実行してください。

$ heroku run python manage.py migrate

エラーが出ていなければOKです。

Herokuボタンによるデプロイ

実はここまでの作業は下のHerokuボタンを押すだけでできます。

ボタンを押すと下図のような画面が表示されます。
アプリ名を入力して「Deploy app」をクリックすると自動でマイグレートまで実施されます。完了するまで数分かかります。
環境変数も自動で作られますが、SECRET_KEY以外の値はすべてダミーの値になっているので、正しい値に設定し直す必要があります。
「環境変数の設定」に示した表と、後述する取得方法を参考にして、ダミーの値を置き換えてください。

管理用アカウントの登録

FreeSFAはDjangoというフレームワークを使って作られていますが、Djangoには標準で管理機能が用意されています。
この管理機能を使うためのアカウントをまず登録します。
Heroku CLIをインストールしている場合は以下のコマンドを実行し、画面の指示に従ってメールアドレスとパスワードを登録してください。

$ heroku run python manage.py createsuperuser

Heroku CLIをインストールしていない場合はHerokuのダッシュボードで右上の「more」をクリックし「Run console」を選択してください。

下図のようなコンソールが開くので、python manage.py createsuperuserと入力して「Run」をクリックしてください。

動作確認

ここまでできたら以下のコマンドを実行してみてください。
Heroku CLIをインストールしていない場合はHerokuダッシュボード右上の「Open app」ボタンを押してください。

$ heroku open

問題なく実行できていれば自動的にブラウザが起動し、下図のような画面が表示されるはずです。
もしエラーになったらここまでの手順でどこか間違えているはずですので、再度確認してみましょう。

先ほど登録した管理用アカウントでログインしてみてください。

「管理サイト」をクリックするとDjangoの管理サイトが表示されます。

FreeSFAの運用で管理サイトを使うことはあまりありませんが、間違って消してしまった顧客情報を復活させたい場合やレコードの物理削除をしたい場合などは役に立つかもしれません。

Google Cloud Platformアカウントの準備

Google Cloud Platform(GCP)はGoogleが提供するクラウドコンピューティングのサービス群の総称です。
GCPは有料サービスのため、アカウントを取得するにはクレジットカードの登録が必要です。
GCPのアカウントを取得するには下記のURLにアクセスし、Googleアカウントでログインします。

下図のような画面が表示されたら利用規約に同意して「承諾」をクリックします。

次の画面の上部に以下のように表示されたら「ACTIVATE」をクリックしてください。

すると次のような画面になるので、必要事項を入力して進んでください。

ステップ2で住所とクレジットカードを登録すればGCPアカウントの準備は完了です。

環境変数に設定する値の取得方法

reCAPTCHA

「私はロボットではありません」をチェックさせるアレです。最近バージョン3が出てチェックすら不要になりましたが、FreeSFAはまだ対応していないのでバージョン2のAPIキーを取得してください。

reCAPTCHAはGoogleアカウントがあれば無料で取得することができます。
以下のURLにアクセスし、右上の「My reCAPTCHA」ボタンをクリックしてください。

下図のような登録画面が表示されたら必要事項を入力して登録してください。
Domainsには自分のHerokuアプリのドメインを入力しましょう。

登録すると次の画面でSite keyとSecret keyが表示されます。それぞれコピーしてHerokuの環境変数に設定してください。

正常に設定できるとFreeSFAのユーザー登録画面にreCAPTCHAが表示され、新規登録できるようになります。

Googleアカウントでログインを可能にする

下記URLからGoogle Cloud Platformにアクセスし、「プロジェクトの選択」から新規プロジェクトを作成してください。
すでにプロジェクトがある方はそちらを利用してもOKです。

プロジェクトを作成もしくは選択したら、APIとサービスのダッシュボードをクリックしてください。

APIとサービスのダッシュボードを開いたら、「APIとサービスの有効化」をクリックしてください。

検索欄に「google+」と入力して「Google+ API」を選択してください。
GoogleのソーシャルログインはGoogle+で行います。（もうすぐ廃止されるサービスなのに大丈夫なんでしょうか？）

Google+ APIを選択したら「有効にする」をクリックしてください。

続いて「認証情報の作成」をクリックしてください。

「プロジェクトへの認証情報の追加」で下記のように入力し、「必要な認証情報」をクリックしてください。

適当な名前を入力したら「OAuthクライアントIDを作成」をクリックしてください。

「次へ」をクリックしてください。

「完了」をクリックしてください。

認証情報の名前をクリックしてください。

クライアントIDとクライアントシークレットが表示されます。それぞれコピーして、Herokuの環境変数SOCIAL_AUTH_GOOGLE_OAUTH2_KEYとSOCIAL_AUTH_GOOGLE_OAUTH2_SECRETに設定してください。

[OAuth同意画面」を選択してください。

下の方に承認済みドメインを登録する欄があるので、Herokuアプリのドメインを設定してください。

認証情報に戻って、下図を参考にして「承認済みのリダイレクトURI」にHerokuアプリのURL + /social/complete/google-oauth2を入力し、保存をクリックしてください。

ここまで正しく設定できていれば、FreeSFAのログイン画面で「Googleアカウントで登録」と「Googleアカウントでログイン」ができるようになるはずです。

住所から緯度経度を取得できるようにする

APIとサービスのダッシュボードで「ライブラリ」をクリックしてください。

検索欄に「geocode」と入力し、「Geocoding API」を選択してください。

APIを有効にしてください。

APIとサービスの認証情報で「認証情報を作成」をクリックし「APIキー」を選択してください。

キーの制限は下図を参考にしてください。
「アプリケーションの制限」はなし、APIの制限は「Geocoding API」のみです。

Geocoding APIは「HTTPリファラー」で制限することができません。
IPアドレスで制限することは可能ですが、HerokuはIPアドレスを固定できないため、やむを得ず制限なしで運用しています。良い方法をご存知の方がいらっしゃいましたらコメント欄で教えてください。

GeocodingのAPIキーはHerokuの環境変数ではなく、ワークスペースごとに作られるDB上に格納されます。
ワークスペースのオーナー権限でログインして、右上のアカウント名をクリックし、「環境設定」をクリックしてください。
APIキーの設定・確認はワークスペースのオーナーしかできないようにしています。

環境設定の該当箇所にAPIキーを設定して保存すると、住所から緯度経度を取得できるようになります。

顧客情報を新規作成し、緯度経度を入力せずに住所と必須項目を入力して保存してみてください。
緯度経度が自動的に入力されていればAPIは正しく設定されています。

地図を動的に表示できるようにする

APIとサービスのダッシュボードで「ライブラリ」をクリックしてください。

検索欄に「maps」と入力し、「Maps Embed API」と「Maps Javascript API」をそれぞれ有効にしてください。

「認証情報を作成」からAPIキーを新規作成し、キーの制限でAPIの制限とアプリケーションの制限を行ってください。
APIの制限は「Maps Embed API」と「Maps JavaScript API」を設定してください。
FreeSFAの設定画面では「Google Maps JavaScript API用のキー」と表現していますが、実際にはひとつのキーに2つのAPIが含まれているのでご注意ください。

アプリケーションの制限にはHTTPリファラーを選択し、自分のHerokuアプリのURLを設定してください。
これでこのAPIキーは自分のHerokuアプリから呼び出された場合しか使えなくなります。

「Maps Embed API」は顧客情報詳細画面で使用しています。

「Maps Javascript API」は「訪問予定と実績」画面など、複数の顧客を地図上にプロットする画面で使用しています。

Google Maps APIの料金について

Google Maps APIの利用料は従量課金制ですが、月に200ドル分までは無料で利用できます。

詳しくは下記URLを参照してください。
https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja

弊社では今のところ無料で運用できています。

デモサイト

上でも書きましたが、以上の手順をすべて実施したデモサイトを作成しました。

デモサイトを試す場合は新規ユーザー登録からお願いします。
デモサイトのデータは毎朝4時にリセットされます。

おまけ

Herokuの自動スリープ回避

FreeプランのHerokuは30分間アクセスがないと自動でスリープしてしまいます。
いったんスリープすると、次にアクセスしたときはインスタンスの起動から始めるのでとても時間がかかってしまいます。
そこで自動スリープを回避する方法がいろいろ考案されています。
弊社の本番環境とデモサイトは下記の記事を参考にして自動スリープを回避しています。

データベースのバックアップとリストア

Herokuのデータベースはherokuコマンドでバックアップとリストアすることができます。
弊社では下記の記事を参考にして運用しています。

オープンソースの営業支援システム「FreeSFA」をHeroku上で動かす手順