HTTPでMilkcocoaが使えるHerokuサーバーを気軽に立ち上げられるHeroku Buttonを作りました

Posted: / Tags: Heroku



はじめまして。ワンフットシーバスという屋号でフリーランスのフロントエンドエンジニアとして活動している、田中正吾です。

先日、MilkcocoaをHeroku NodeJSで動かすメモという記事を書きまして、こちらをより使いやすくしたHeroku Buttonを作ったので、寄稿させていただきました。

Heroku Buttonとは

Herokuは、デプロイしたいプロジェクトをローカルで用意しコマンドを実行して以下のようにデプロイします。

image_20151005_112115_3.png

Heroku Buttonはさらに一歩踏み込んで、この流れをWebブラウザから離れることなく、以下の図のようにGitHubなどで公開しているHerokuウェブアプリのプロジェクトを、ボタン一つで使えるようにする機能のことです。より気軽に行えますね。

image_20151005_112125_4.png

今回のWebアプリケーションの仕組み

今回のWebアプリケーションはMilkcocoa Node.js SDKを利用してサーバーでMilkcocoaとやり取りするアプリです。

以下の図のように、

image_20151005_112251_8.png

  • トップページで「Hello Milkcocoa!」と表示する機能
  • /pushというURLを叩くとデータストアに記録する機能
  • そのデータストアに記録するイベントを捉えてconsole.logで表示する機能

を備えています。

今回の前提と作業の流れ

さて、今回の前提と手順です。

前提

  • Herokuに登録済みでアカウントがあること

作業の流れ

  1. 今回使うMilkcocoaのアプリのapp_idを控えておく
  2. GitHubで公開されているHeroku Button設置サイトに行く
  3. Heroku Buttonを押す
  4. 手順に沿って進む
  5. デプロイ開始
  6. うまく動いているか確認
  7. /pushにアクセスすると今回のMilkcocoaのデータストアにpushする
  8. 今回のMilkcocoaデータストアに保存されたかを確認

では作業を始めてみましょう

実際に作業を始めていきましょう。

今回使うMilkcocoaのapp_idを控えておく

Milkcocoaの管理画面へ行き、

image_20150929_151914_46.png

今回使うMilkcocoaのアプリを決めて、app_idを控えておきます。

image_20150929_152022_48.png

hoge-hoge-dummyというアプリ名で作成しました。hogehogeapp_idになるので控えておきます(こちらのapp_idは架空のものです)。

GitHubで公開されているHeroku Button設置サイトに行く

では、Heroku Buttonを動作させましょう。

以下のアドレスにアクセスします。

image_20150929_143723_19.png

サイトが表示されたら下部のREADME.mdのところにある

image_20150929_143741_20.png

Deploy to Herokuと書いてあるボタンを押します。

これですね。image_20150929_143805_21.png(↑こちらのボタンは動きません)

Herokuのサイトに飛びます

Herokuのサイトに飛びます。以下のようにログインが聞かれた場合は

image_20150929_143814_22.png

Log Inボタンでログインしましょう。

image_20150929_143818_23.png

するとHerokuの管理画面にアクセスし、アプリの設定画面が表示されます。

image_20150929_143901_24.png

手順に沿って進みます

Herokuで使うアプリ名を決めます。

image_20150929_144047_27.png

設定値(Config Variables)でMilkcocoaのapp_idを指定します。

続いてスクロールし、設定値(Config Variables)の項目に行きます。Config Variablesはアプリ側に読み込むことができる

image_20150929_144239_30.png

  • MIKLCOCOA_APP_ID
    • 今回使うMilkCocoaのapp_id
  • MIKLCOCOA_DATASTOERE_ID
    • 今回記録先に使うデータストアの名前
    • デフォルトはheroku_sample

となっているので、MIKLCOCOA_APP_IDは、冒頭で決めた今回使うMilkCocoaのapp_idを入力し、MIKLCOCOA_DATASTOERE_IDはお好みの名前にしておきます。もちろん、デフォルトのheroku_sampleでも構いません。

image_20150929_144156_28.png

今回は、今回記録先に使うデータストアの名前はheroku_sampleで進めます。

なお、Config Variablesはソース内で以下のように呼び出すことが出来ます。

var MILKCOCOA_APP_ID = "";
var MILKCOCOA_DATASTORE_ID = "";
if( process.env.PORT ) {
    // Heroku上では環境変数から読み込む(インストール時に設定)
    MILKCOCOA_APP_ID = process.env.MILKCOCOA_APP_ID;
    MILKCOCOA_DATASTORE_ID = process.env.MILKCOCOA_DATASTORE_ID;

デプロイ開始

それでは、Deploy for Freeボタンを押してデプロイを開始します。

image_20150929_153534_49.png

ひとしきり、進行していき、以下の内容が出たら成功です。

image_20150929_153624_52.png

うまく動いているか確認

image_20150929_153634_53.pngボタンを押してうまく動いているか確認します。

image_20150929_144329_31.png

うまく、Hello Milkcocoaが出れば、成功です。

Milkcocoaの連携を確認

まず、/pushを叩いて今回のMilkcocoaのデータストアにpushします。

image_20150929_144346_33.png

[push datastore] の文字が表示されたらうまく行っています。

管理画面へ行き、今回のMilkcocoaデータストアに保存されたかを確認します。

image_20150929_144446_34.png

うまく保存されていました!

image_20150929_144520_35.png

/pushではtext値を「送信テスト」以外に自由に送ることもできます

/pushだけでアクセスするとtext値は「送信テスト」ですが、/push?text=sampleのように自由に文言を送ることもできます。

ためしに、以下のように「オリジナル文言」という日本語を送ってみましょう。

image_20151012_222015_4.png

すると、

image_20151012_222055_5.png

とログが送られます!

この機能を利用すれば、シンプルな方法ながら、何かのサービスやデバイスとMilkcocoaをつなげる、中継サーバーとして使うこともできます。要は、HTTPでMilkcocoaに保存ができるということですね。

HTTPしか使えないデバイス(FlashAir等)もあるので、かなり有用なものになるのではないでしょうか。

使い方は以上になります。

ソースコードの内容(ここから先はコードの内容を理解したい方のみお読み下さい)

この後は、ローカルに今回のHeroku WebアプリのGitをクローンして、ソースコードの内容を触れていきましょう。

image_20151005_112251_8.png

今回のソース

index.js
// JSONファイルの読み込み(ローカル用)/////////////////////////////////
var fs = require('fs');
var setting = {};
var MILKCOCOA_APP_ID = "";
var MILKCOCOA_DATASTORE_ID = "";
if( process.env.PORT ) {
    // Heroku上では環境変数から読み込む(インストール時に設定)
    MILKCOCOA_APP_ID = process.env.MILKCOCOA_APP_ID;
    MILKCOCOA_DATASTORE_ID = process.env.MILKCOCOA_DATASTORE_ID;
} else {
    // .envフォルダはあらかじめ .gitignore 対象にしておく。
    setting = JSON.parse(fs.readFileSync('.env/setting.json', 'utf8'));
    //
    MILKCOCOA_APP_ID = setting.MILKCOCOA_APP_ID;
    MILKCOCOA_DATASTORE_ID = setting.MILKCOCOA_DATASTORE_ID;
}

console.log("MILKCOCOA_APP_ID:" + MILKCOCOA_APP_ID);
console.log("MILKCOCOA_DATASTORE_ID:" + MILKCOCOA_DATASTORE_ID);

// milkcocoa /////////////////////////////////
var MilkCocoa = require("./node_modules/milkcocoa/index.js");
var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com");
// dataStore作成 デフォルトのデータストアIDは heroku_sample にしています。
var sampleDataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE_ID);
// データがpushされたときのイベント通知
sampleDataStore.on("push", function(datum) {
    // 内部のログ
    console.log('[push complete]');
    console.log(datum);
});
//////////////////////////////////////////////

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.get('/', function(request, response) {
    response.send('Hello Milkcocoa!');
});

app.get('/push', function(request, response) {
    response.send('[push datastore]');
    // 内部のログ
    console.log('[push datastore : ' + MILKCOCOA_DATASTORE_ID + ']');
    console.log(request.query);
    var sendValue = "送信テスト";  // text値のデフォルトは「送信テスト」
    if(request.query.text){
        sendValue = request.query.text;  // text値が存在する場合、採用する。
    }
    sampleDataStore.push({ text : sendValue , host : request.headers.host });
});

app.listen(app.get('port'), function() {
    console.log('Node app is running on port', app.get('port'));
});

設定値の読み込み

Heroku上での設定値の読み込みは以下のようにしています。

var MILKCOCOA_APP_ID = "";
var MILKCOCOA_DATASTORE_ID = "";
if( process.env.PORT ) {
    // Heroku上では環境変数から読み込む(インストール時に設定)
    MILKCOCOA_APP_ID = process.env.MILKCOCOA_APP_ID;
    MILKCOCOA_DATASTORE_ID = process.env.MILKCOCOA_DATASTORE_ID;

で、設定値を読み込むことができます。

そして、Milkcocoaへの接続を確立し、通信に使うMilkCocoaオブジェクトのインスタンスを取得します。

// milkcocoa /////////////////////////////////
var MilkCocoa = require("./node_modules/milkcocoa/index.js");
var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com");

トップページで「Hello Milkcocoa!」と表示する機能

ExpressサーバーでHello Milkcocoa!を表示しています。

app.get('/', function(request, response) {
    response.send('Hello Milkcocoa!');
});

Milkcocoaとのやりとり

  • /pushというURLを叩くとデータストアに記録する機能
  • そのデータストアに記録するイベントを捉えてconsole.logで表示する機能

データストア周りは、まずこのように書いて準備します。

// dataStore作成 デフォルトのデータストアIDは heroku_sample にしています。
var sampleDataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE_ID);

/pushというURLにアクセスしたときデータストアに記録する機能は、このように書いています。

app.get('/push', function(request, response) {
    response.send('[push datastore]');
    // 内部のログ
    console.log('[push datastore : ' + MILKCOCOA_DATASTORE_ID + ']');
    console.log(request.query);
    var sendValue = "送信テスト";  // text値のデフォルトは「送信テスト」
    if(request.query.text){
        sendValue = request.query.text;  // text値が存在する場合、採用する。
    }
    sampleDataStore.push({ text : sendValue , host : request.headers.host });
});

データストアに記録するイベントを捉えてconsole.logで表示する機能は、このように書いています。

// データがpushされたときのイベント通知
sampleDataStore.on("push", function(datum) {
    // 内部のログ
    console.log('[push complete]');
    console.log(datum);
});
//////////////////////////////////////////////

なお、console.logの内容は、heroku logs --tailでHerokuサーバー上のログがリアルタイムで確認できます。

ローカル開発用の設定値

Herokuの設定値(Config Variables)は、このようにインストール時に漏れなくユーザーに設定してもらえるので便利ですが、ローカルでは設定値が使えないので開発するときに、やりにくいです。

そのため、今回のソースにはローカル開発用の設定値も設定できる仕組みも用意しています。

このコードの部分です。前の行でprocess.env.PORTの有無でローカルかHeroku上かを判断して、ローカルの場合に動作します。

// .envフォルダはあらかじめ .gitignore 対象にしておく。
setting = JSON.parse(fs.readFileSync('.env/setting.json', 'utf8'));
//
MILKCOCOA_APP_ID = setting.MILKCOCOA_APP_ID;
MILKCOCOA_DATASTORE_ID = setting.MILKCOCOA_DATASTORE_ID;

.env/setting.jsonをJSONファイルとして読み込み、設定値として使う仕組みです。

.env/setting.json

.env/setting.json
{
  "MILKCOCOA_APP_ID":"hogehoge",
  "MILKCOCOA_DATASTORE_ID":"heroku_sample"
}

と記述しておくとHerokuの設定値(Config Variables)と同じ値が設定できるので、ローカルで開発する際は使ってみてください。

なお、

// .envフォルダはあらかじめ .gitignore 対象にしておく。

とありますが、.env.gitignore 対象にしてあります。

.gitignore
node_modules
*.iml
.idea
.memo
.env
.task

おわりに

以上です。ここまで、HTTPでMilkcocoaが使えるHerokuサーバーを気軽に立ち上げられるHeroku Buttonについて説明させていただきました。

いろいろなデバイスをインターネットと連携するとき、MQTTやSocketと連携する小さなWebアプリケーションを作るケースが増えてきていますが、Webアプリケーションの開発と公開を簡単に行えるHerokuと、MQTTやSocketできる機能を持つMilkcocoaは相性が良いです。

そして、連携したならばデータの保存や活用をしたくなります。その場合、Herokuでデータ周りをやるとなるとDBやS3を用意したりする一手間がありますが、Milkcocoaはデータストアも受け持ってくれるのでデータ周りも素早く試すことができます。

よろしければ、今回のHeroku Buttonを使ってMilkcocoaを体感してみてください。