さて、初めての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. 誕生日サイトの説明
このサイト[saya's Birthday Page]は、11/15に彼女が誕生日だったので、何か自分らしい方法で祝うことはできないだろうか。と考え、誕生日の特設サイトを作ろうと思ったのが始まりでした。
しかし、静的なページじゃ面白くない。と思いNode.js(meteor)を使って今の機能を実装しようと考えました。
webの勉強を始めて半年、Node.js(meteor)は僕にはまだ早いようでjavascript自体まともに書けないのに、サーバサイドなんて絶対無理!ではないですが誕生日まであと2日で1から勉強して作り上げるなんて...と思い、github.ioにアップしたかったのも考えて、mlikcocoaにしました。
2. 詳しいコードの説明
では詳しい説明をしていきます。
ではます、post部分から
// アプリの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部分を見ていきましょう。
// 下記のコードで保存されたデータを参照します
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)予定なので、作れたら第2号の記事も出したいと思います!( ^^)/~~