日本Cloud Foundryグループブログ: NicoNico SPEENYAを Cloud Foundry で動かす

「Cloud Foundry 百日行」第96日目は、NicoNico SPEENYA です。
本アプリケーションはChromeの拡張機能を使って、プレゼンテーション中に参加者のリアクションをプレゼン画面に反映させる非常にユニークなアプリです。

基本情報

ソースコード
https://github.com/chimerast/niconico-speenya
参考ページ
NicoNico SPEENYA – プレゼンテーションの上をニコニコ動画風コメントが流れる！ MOONGIFT

手順の概要は以下の通りです。

1) ソースコードの取得
2) Chromeエクステンションの準備
3) アプリの起動
4) 動作確認

1. ソースコードの取得

$ git clone https://github.com/chimerast/niconico-speenya
$ cd niconico-speenya/
$ ls
extension  LICENSE  make-package.sh  package.json  public  README.md  screenshot.png  server.js

2. Chromeエクステンションの準備

2.1. 作成

事前にChrome用のエクステンションの準備を行います。
まずはjsファイルを編集し、Cloud Foundry上でこの後にpushするアプリのURLを設定します。

$ vi extension/scripts/content-script.js

$ vi extension/scripts/content-script.js
$ git diff
diff --git a/extension/scripts/content-script.js b/extension/scripts/content-script.js
index 730bbef..f00775f 100644
--- a/extension/scripts/content-script.js
+++ b/extension/scripts/content-script.js
@@ -1,6 +1,6 @@
 var speenya = (function() {
   // change to your server url
-  var SERVER_URL = 'http://localhost:2525';
+  var SERVER_URL = 'http://nico.192.168.15.91.xip.io';
   var APP_ID = chrome.runtime.id;
   var APP_VERSION = chrome.runtime.getManifest().version;

Chromeエクステンションをパッケージ化するスクリプトを実行します。
※実行すると最初にNo such file of directoryが出ますが、初回は出るような作りになっています。

$ ./make-package.sh
rm: cannot remove ‘../dist/extension.zip’: No such file or directory
  adding: icons/ (stored 0%)
  adding: icons/icon128.png (deflated 0%)
  adding: icons/icon19.png (stored 0%)
  adding: icons/icon38.png (stored 0%)
  adding: icons/icon128_chromestore.png (deflated 4%)
  adding: icons/icon48.png (deflated 0%)
  adding: icons/icon38_disabled.png (stored 0%)
  adding: icons/icon16.png (deflated 3%)
  adding: icons/icon19_disabled.png (stored 0%)
  adding: icons/convert.sh (deflated 56%)
  adding: images/ (stored 0%)
  adding: images/thumb.png (deflated 2%)
  adding: images/newspicks.png (deflated 1%)
  adding: images/logo.png (deflated 0%)
  adding: images/Facebook_like_thumb.png (deflated 5%)
  adding: images/speenya.png (deflated 0%)
  adding: manifest.json (deflated 53%)
  adding: scripts/ (stored 0%)
  adding: scripts/content-script.js (deflated 67%)
  adding: scripts/background.js (deflated 65%)
  adding: scripts/socket.io-1.3.0.js (deflated 74%)

2.2. インストール

発表者側のChromeでextention.zipを解凍します。

Chromeの設定から『拡張機能』を選択、『デベロッパーモード』にチェックを付けます。

『パッケージ化されていない拡張機能を読み込む』をクリックします。

extention.zipを解凍して出来たフォルダを選択し”OK”をクリック

3. アプリの起動

$ cf push nico -d 192.168.15.91.xip.io -c 'npm start'
:
App started
 
 
OK
 
App nico was started using this command `npm start`
 
Showing health and status for app nico in org morika-t / space morika-t as morika-t...
OK
 
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: nico.192.168.15.91.xip.io
last uploaded: Thu Nov 5 06:50:58 UTC 2015
stack: cflinuxfs2
buildpack: Node.js
 
     state     since                    cpu    memory          disk      details
#0   running   2015-11-05 03:51:47 PM   0.0%   70.2M of 256M   0 of 1G

成功しました。

4. 動作確認

手順	プレゼン実施者側	参加者側
1	例として、以前に私が発表した資料のURLを開いてみます。 http://www.slideshare.net/morika-t/go-cfcloudfoundryrindoku1420131025
2		参加者側はpushしたアプリのURLにアクセスします
3		Commentに”Cloud Foundry!!!!!!!!” と入力し”Enter”キーを入力します
4	画面に”Cloud Foundry!!!!!!!!”が表示されます
5		今度は”Show Send Image Textbox”をクリックします
6		今回は百日行第78日目で紹介しましたEtherDrawで描かれた名画の画像URLを挿入してみます URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Z4_FWqsJgVDaOjsL8vqwh1OUgvmNqYGTNjtJ1WVs5nMPt2klFSL0xxEjbDLLU_pxUz62fCJR9SLa3T_lSLfe_4vL9dbEFvhodHuRDO8E-_IbJkpZyKYOmrNpqwn5aDqCRUu5yk1Swng/s1600/etherdraw-07-before-restart.png
7	スライド上に画が浮かび上がってきます