Habiticaのローカル開発環境構築から起動まで＠Ubuntu in VirtualBox

Habitica(https://habitica.com) を開発したい．

Habiticaとは？

あなたの生活をロールプレイングゲームのように変えるオープンソースの習慣構築プログラム
(「Habitica Wiki 日本」より)

VirtualBoxを使う（どうしてもという場合は使わなくて良い）

本体のダウンロード

公式サイトDownload VirtualBox　から，
**[VirtualBox 5.2.2 platform packages]の[OS X hosts]**を，ダウンロード＆インストール．
そのあとに，
**[VirtualBox 5.2.2 Oracle VM VirtualBox Extension Pack ]の[All supported platforms]**も，ダウンロード＆インストール．

isoファイルのダウンロード

ひとまずUbuntu16.04 (LTS）にしておく．Download Ubuntu Desktop
ダウンロードしたら，USBメモリに移して使うと後々楽．

仮想環境立ち上げ＆スペック

メモリ2GB（推奨は4GB？（swapが4Gあると良いらしいので）），ストレージ20GB（10だとギリギリかも）．
入ったら，

sudo apt-get update
sudo apt-get upgrade

• 本体ディスプレイ一番上部のVirtualBoxメニューから**[Devices]を選び，一番下の[Insert Guest Additions CD Image...]をクリック．画面になんか出るから[Run]**．

• またも**[Devices]を選び，[Shared Clipboard]**（便利である）の中の双方向を選択．

reboot

ローカル開発環境の用意の手順

ほぼほぼ公式に書いてある通りにやれば良い（これが楽々読めるなら，その通りやるのを推奨します）
　Setting up Habitica Locally

Gitを使えるようにする

1.5 Getting Started - Installing Git

sudo apt-get install git

Git cloneする

1. Gitアカウントを作る．Githubで良い．
2. https://github.com/HabitRPG/habitica からForkしてくる
   ※ここは本家大元からではなく，ローカル管理者が自前でcloneしてきたリポジトリにするのが良いかも．
3. ForkしたものをCloneする

cd ~
git clone https://github.com/YourUsername/habitica.git　（YourUsernameは自分のリモートリポジトリ名を入れる．）

1. push先のリモートリポジトリと繋げる

cd habitica
git remote add upstream https://github.com/HabitRPG/habitica.git
git remote -v　（どこに繋いだか確認できる）

出力はこんな感じで表示されてれば良い．

  origin   https://github.com/YourUsername/habitica.git (fetch)
  origin   https://github.com/YourUsername/habitica.git (push)
  upstream https://github.com/HabitRPG/habitica.git (fetch)
  upstream https://github.com/HabitRPG/habitica.git (push)

設定ファイルを用意する

ここをいじってログイン情報とかを入れられる？

cp config.json.example config.json

作ったファイルは使わなくても動くには動く．

Node npm のバージョンを仕様に合わせる

要求されるのは，Node : 6以上，npm : 5以上．
不測の事態のこともあるし，一般的にNode系のバージョンは管理するべきだと思うので，
nvm（Node Version Manager - Simple bash script to manage multiple active node.js versions）を入れておく．

1. nvmのインストール

sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

※ここでターミナルを開き直す．

1. インストールできてるか確認

cd ~/habitica　（一応）
command -v nvm

「nvm」が返って来ればOK．

1. Nodeの最新版をインストール

nvm install node
（これだけだと最新版が入る．安定版ではない．）

1. インストールしたバージョンを確認

node --version
npm --version

要件を満たしてるか確認．

ここまでがプラットフォーム関係なしにやること

MongoDBを入れる

mongoDBの公式（Install MongoDB Community Edition on Ubuntu）の通りにやれば良い．

1. インストール（ただし，Linuxが[Ubuntu, 16.04] の場合に限る）

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
sudo apt-get update
sudo apt-get install -y mongodb-org

1. 起動

sudo service mongod start
cat /var/log/mongodb/mongod.log （確認：[where <port> is the port configured in /etc/mongod.conf, 27017 by default.]が見当たればOK）
sudo service mongod stop
sudo service mongod restart

他にnpmで必要なものを入れる

npm install -g gulp mocha
npm install

Habiticaの起動

起動コマンド

cd ~/habitica （基本的には今までもここでコマンド操作している）
npm run client:dev

少し時間がかかる．「webpack: Compiled successfully.」が表示されるまでしばらく待つ．

このターミナルは走らせたまま，新しくターミナルウインドウを開いて，（※注意：この時，mongoDBが起動している必要がある．）

cd ~/habitica
npm start

Habiticaが動いているか確認

ブラウザ（firefoxで良い）を開いて， http://localhost:8080 にアクセスして動いているか確認する．

終わり！お疲れ様でした．

※コマンドまとめ（次回起動時にすればいいこと）

cd ~/habitica
sudo service mongod start
npm run client:dev

(ターミナルウインドウを新たに1つ開いてから)

cd ~/habitica
npm start

データを初期化したい場合

• あるべきボタンが押せない（もしくはない）

• ログインボタンがない

• ローカルストレージのデータを消去したい

そんな時は， http://localhost:8080/static/clear-browser-data にアクセスして，
そこにあるボタンを押す．データが消去されるので，ページをリロードする．

いじるべきソースコードがどこにあるか？

cd ~/habitica/website

とりあえずは，

cd ~/habitica/website/client

をいじると変化がわかりやすいと思う．

Gitのクライアントソフトは？

Linuxでは「Sourcetree」は対応されてない．なので，

• 素直にCUI（コマンドライン）を使う
• GitKraken(https://www.gitkraken.com) を使う．