milkcocoaを使って、誕生日サイトを作った話 #JavaScript

さて、初めてのQiitaへの記事投稿 && アドベントカレンダーも初体験です笑

まずは自己紹介。

HAL大阪1回生満18歳の河野純也 @konojunyaと申します。
株式会社Farconnection( farconnection.jp )でWeb developer & エバンジェリストという肩書きで、フロントエンドの勉強をしています。
コミュニティでは、ファーコネクションが運営するTechLogics techlogics.link、京都にあるデルタクロス京都 deltacross.netに所属しています。

さて、軽い自己紹介も終わり早速内容なんですが、僕が今回書くのは、題名の通り

『milkcocoaを使って、誕生日サイトを作った話』です。

まず作ったものはこちら。
もう、12日目なのでmlikcocoaの説明は流す程度にしようと思います。

Milkcocoaとは？

Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。

公式ページ milkcocoa

誕生日サイト

milkcocoaとは何かを軽くさらったところで早速、誕生日サイトの詳しい説明をしたいと思います。
まず第一に、jsの知識が乏しくコード設計が間違っているもの、スマートではないものがあると思いますが、ご了承ください。

1. 誕生日サイトの説明
2. 詳しいコードの説明
3. まとめ

で、話を進めたいと思います。

1. 誕生日サイトの説明

このサイト[saya's Birthday Page]は、11/15に彼女が誕生日だったので、何か自分らしい方法で祝うことはできないだろうか。と考え、誕生日の特設サイトを作ろうと思ったのが始まりでした。　　
しかし、静的なページじゃ面白くない。と思いNode.js(meteor)を使って今の機能を実装しようと考えました。
webの勉強を始めて半年、Node.js(meteor)は僕にはまだ早いようでjavascript自体まともに書けないのに、サーバサイドなんて絶対無理！ではないですが誕生日まであと2日で1から勉強して作り上げるなんて...と思い、github.ioにアップしたかったのも考えて、mlikcocoaにしました。

2. 詳しいコードの説明
では詳しい説明をしていきます。

ではます、post部分から

post.js

// アプリのIDは、milkcocoaでプロジェクトを作った時に発行されます
var mlkcca = MilkCocoa('アプリのID'); //MilkCocoaを使うぞ〜〜

// データストアと言うオブジェクトの保管場所を定義します
// データストアの名前は自分で決めることができます。
var ds = mlkcca.dataStore('test'); // testっていうデータストア使うで〜

// pushを使うことで、データの送信＆保存をすることができます。
ds.push({title : 'hoge', content : 'huga'});

// 上のコードを送ると
{
 id: [String], //id 自動で生成されます
 timestamp: [Number], //timestamp 自動で生成されます
 value: {
   title: 'hoge', //オブジェクトでプロパティtitleに値'hoge'が送信＆保存されています
   content: 'huga'
 }
}

// 僕のサイトの場合、背景色とクラスをランダムで突っ込んでいるので
var ani = ["hoge","hoge1"]; // animationが書かれたクラスの配列
var bgc = ["white","black"]; //background-colorとして使う色の配列

var aniNum = Math.floor(Math.random()*2); // Mathのrandomを使ってランダムな添字を用意
var bgcNum = Math.floor(Math.random()*2); // floorを使って小数点以下を切り捨てます
ds.push({
 title: "hoge",
 content: "huga",
 ani: ani[aniNum],
 bgc: bgc[bgcNum]
});

pushで上記のデータをデータストアに送ります。
では、view部分を見ていきましょう。

view.js

// 下記のコードで保存されたデータを参照します
ds.stream().size(500).sort("asc").next(function(err,datas){
  datas.forEach(function(data){
    renderMessage(data);
  });
});
// on()関数を使って、監視をします。下記のコードの場合"push"を監視しています。
// "push"でデータストアにデータが来た場合、コールバック関数を呼びます。
// 下記の場合　コールバック関数の中のrenderMessage関数を呼びます。
ds.on("push",function(e){
 renderMessage(e);
});

//renderMessage関数を作りましょう
function renderMessage(data){
  post_content = document.createElement("div"); // divエレメントを作っちゃうぜ
  post_content.className = data.value.postani; // 取得したものにaniプロパティをつけちゃう
  post_content.style.background = data.value.bgc; // 取得したものにbgcプロパティをつけちゃう
  post_content.innerHTML = "<p>"+data.value.title+"</p>"+"<small>By "+data.value.content+"</small>"; // titleとcontentをhtmlに組み込むノリ
  document.getElementById("post_space").appendChild(post_content); // post_spaceに今作ったのもを小要素としてつけるノリ
}

これでviewのページに送られてきたものをhtmlでいい感じに出してくれます！

3. まとめ

ソース自体汚いですが、彼女も大喜びだったので良かったです( ^^)/~~~
今、Raspberry PI2でのIoTをmlikcocoa使ってやる（もしくはnode）予定なので、作れたら第２号の記事も出したいと思います！( ^^)/~~