日本Cloud Foundryグループ ブログ

オープンソースのPaaSソフトウェア CloudFoundry の技術情報やイベント告知などを掲載します

2015-06-16

MindMup を Cloud Foundry で動かす

「Cloud Foundry 百日行」第9回目です。
今日のアプリは，MindMup です。

基本情報

MindMup は，mind map を書くためのツールです。 README では，「最も生産的な mind-mapping 環境を作ることが目標」と書かれています。

記事の概要は以下の通りです。

  1. ソースコードの取得
  2. デプロイ
  3. 動作確認に際して解決した問題
  4. 動作確認

ソースコードの取得

まずはいつも通りソースコードの取得から。GitHub から git でソースコードを clone してきます。

$ git clone https://github.com/mindmup/mindmup.git

mindmup ディレクトリーに移動します。

$ cd mindmup/

デプロイ

このアプリは Heroku 上での動作を想定して作られているため，同じ buildpack という仕組みを利用する Cloud Foundry 上でも，極めて簡単にデプロイできました。

$ cf push mindmup

Creating app mindmup in org nota-ja / space 100 as nota-ja...
......
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: mindmup.10.244.0.34.xip.io
last uploaded: Mon Jun 15 09:43:54 +0000 2015
stack: lucid64

     state     since                    cpu    memory          disk      details
#0   running   2015-06-15 06:44:33 PM   0.0%   49.1M of 256M   0 of 1G

動作確認に際して解決した問題

アプリの push まではすんなりいったのですが，動作確認を始ようとした際に2つの問題に遭遇したので，その解決方法について述べます。

最初の問題: Google Analytics アカウント

このアプリは，production モードで実行される時には，Google Analytics のアカウントが必須です。アカウントをお持ちの方は，環境変数 GOOGLE_ANALYTICS_ACCOUNT に ID をセット してください。設定方法は，

$ cf set-env mindmup GOOGLE_ANALYTICS_ACCOUNT ＜Google Analytics の ID＞

です。設定を有効にするために，restage が必要になります。

$ cf restage mindmup

しかし，今回の動作確認では Google Analytics のアカウントを使わずに本アプリを動作させる方法として，環境変数 RACK_ENV を production 以外の値に設定する方法をとりました。同じく設定後に restage が必要です。

$ cf set-env mindmup RACK_ENV development
$ cf restage mindmup

2番目の問題: JavaScript ライブラリーの読み込み失敗

以前はこれで問題なく動作したのですが，今回記事を書くにあたって再検証したところ，さらに別の問題 〜 特定の JavaScript ライブラリーの読み込みに失敗する 〜 に遭遇しました。

原因を調べた結果，このコミット 以降にこの問題が発生していることがわかりました。そこで web.rb の static_ts の値をこのコミットが入る前の値に戻す修正を 現時点のmaster に対して行ったところ，なんとか正常に操作できるようになりました。

以下はそのコード差分です。コミット自体は， こちら にあります。

diff --git a/web.rb b/web.rb
index 27faf22..9267821 100644
--- a/web.rb
+++ b/web.rb
@@ -20,7 +20,7 @@ def cache_last_news
   end
 end
 configure do
-  static_ts = '20150316155124'
+  static_ts = '20140912202404'
   public_host = ENV['PUBLIC_HOST'] || 'http://static.mindmup.net'
   set :earliest_supported_ios_version, (ENV["EARLIEST_IOS_VERSION"] && ENV["EARLIEST_IOS_VERSION"].to_f) || 1
   set :static_host, "#{public_host}/#{static_ts}"

これが正しい対処方法ではなさそうな気もしますが，今回は時間の都合上このままで進めます。

動作確認

これで動く状態になったので，動作確認していきます。
なお私の環境では本アプリは (通常動作確認に使っている) Safari では正常に動作しなかったので，今回の動作確認は全て Chrome で行いました。

初期画面

ブラウザーからアクセスすると，最初は以下のような画面が出ます。

新規 mind map

【Create a new map】 → 【Public online map to share with the world】を選択します(他のオプションは別途サービスのアカウントやサブスクリプションが必要です)。

Mind map の描画

右手のツール・ペインを利用して，mind map を描きます。

日本語もOKです。

Mind map のエクスポート/インポート

描いた mind map をローカルファイルにエクスポート/インポートすることもできました。

【エクスポート】

【インポート】

Google Drive のアカウントをお持ちの方は，それを使えばもっと簡単に保存/取り出しができると思います。

以上で一通りの動作確認は終わりです。

今回使用したソフトウェア

投稿者
ラベル: