LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-06

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

Habiticaとは?

Hrpg_banner_wiki.png

あなたの生活をロールプレイングゲームのように変えるオープンソースの習慣構築プログラム
(「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 にアクセスして動いているか確認する.
スクリーンショット 2017-11-29 22.18.38.png

終わり!お疲れ様でした.

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

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」は対応されてない.なので,

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1