search
LoginSignup
12

More than 5 years have passed since last update.

posted at

updated at

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

さて、初めての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とは何かを軽くさらったところで早速、誕生日サイトの詳しい説明をしたいと思います。
まず第一に、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)予定なので、作れたら第2号の記事も出したいと思います!( ^
^)/~~

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
12