HTTPでMilkcocoaが使えるHerokuサーバーを気軽に立ち上げられるHeroku Buttonを作りました Posted: 2015-10-14 / Tags: Heroku はじめまして。ワンフットシーバスという屋号でフリーランスのフロントエンドエンジニアとして活動している、田中正吾です。 先日、MilkcocoaをHeroku NodeJSで動かすメモという記事を書きまして、こちらをより使いやすくしたHeroku Buttonを作ったので、寄稿させていただきました。 Heroku Buttonとは Herokuは、デプロイしたいプロジェクトをローカルで用意しコマンドを実行して以下のようにデプロイします。 Heroku Buttonはさらに一歩踏み込んで、この流れをWebブラウザから離れることなく、以下の図のようにGitHubなどで公開しているHerokuウェブアプリのプロジェ

Heroku NodeJSでMilkcocoaとlittleBits(cloudBit API)を連携するメモです。 MilkcocoaをHeroku NodeJSで動かすメモで味をしめたので、私のブログではおなじみのcloudBit APIとも連携してみます。 やりたいこと 前回のソース　MilkcocoaをHeroku NodeJSで動かすメモに、cloudBit APIのsubscribe（購読）機能を加える littleBitsのsubscribeが流れてきたら「ボタンを押したらHeroku経由でMilkcocoaに押された時のデータ」を記録する cloudBit APIのsubscribe（購読）機能を加える 以前の記事、 cloudBitのAPIをHeroku NodeJSからアクセスするメモ （cloudBitから受信開始 subscribe 編） | 1ft-seabass

Milkcocoaを使ったインタラクティブサイト「DARTS MAP」の技術解説 Posted: 2015-08-26 / Tags: GoogleMaps_API はじめまして。株式会社カヤックでフロントエンドエンジニアを務めております、田島真悟と申します。 Milkcocoaは約1年前から、プライベートでの制作や仕事でのモック作りなどを中心に、よく使わせていただいています。 今回はその中から、MilkcocoaとGoogleMaps APIを組み合わせて作った、DARTS MAPというWebサイトの紹介と、その技術的な解説について書こうと思います。 DARTS MAPとは、どんなサイトか？ DARTS MAPには、下記のURLからアクセスすることができます。 スマートフォンとパソコンがあるだけで世界中を飛び回る体験ができるコンテンツです。 手元に2台ともある方は是非体験してみてください

MilkcocoaをHeroku NodeJSで動かすメモです。 Milkcocoaとは Milkcocoa | リアルタイムアプリ・IoTやるならMilkcocoa Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。 とあるように、リアルタイム通信と、特にデータまわりをしっかりサポートしてくれるサービスです。最近、MQTTクライアントをサポートしたということもあり、注目しています。 もちろん、HerokuでCloudMQTTを立ち上げ、PostgresSQLなどでデータ保存も整えても出来なくはないで

MQTTクライアントを使うことで、C言語など様々な言語でMilkcocoaを利用できるようになりました Posted: 2015-08-19 / Tags: MQTT C言語 先日、Milkcocoaを「MQTTベース」にアップデートしました。MQTTベースとはどういうことかというと、MQTTが使える環境であればどこからでもMilkcocoaを利用することが出来るようになったということです。 ※Swiftでは、TLS通信を使うと接続できないので注意して下さい。 「Paho」というMQTTクライアントのオープンソースプロジェクトには以下の言語が用意されているので、少なくともこれらの言語では使えるようになるということです。 C言語 Java Android Python C/C++ MQTT Embedded clients .Net and WinRT Go言語 Milkcocoaで利用する

var Cylon = require('cylon'); var Milkcocoa = require('milkcocoa'); var milkcocoa = new Milkcocoa('dogi9jz8c16.mlkcca.com'); var ds = milkcocoa.dataStore('dots'); var hue; Cylon.robot({ connections: { hue: { adaptor: 'hue', host: '192.168.2.2', username: 'newdeveloper' } }, devices: { bulb: { driver: 'hue-light', lightId: 1 } }, work: function(my) { my.bulb.turnOn(); //点灯 hue = my; //hue変数に操作メソッド諸

Ruby on RailsのWebサービスを開発していて、ちょっとリアルタイムなチャットサポートを追加したいと思ったことはないでしょうか？ Googleで「Ruby on Rails リアルタイム」と検索すると（2015年7月現在）、以下のような記事がトップにヒットします。 Ruby on Railsとrubymotionでリアルタイムweb構築 - Qiita websocket-railsを使ってRailsでリアルタイムチャットを実装する方法 - インターファーム開発部ブログ 少し面倒くさそうに見える上、保存も行うとなるとまた設計が必要になってきます。 そこで今回は、Ruby on Railsで開発されている既存のアカウントシステムを利用して、Milkcocoaを使ったリアルタイムな機能を簡単に導入する方法を説明します。 どういう設計になるか 実際にどういう設計になるのか説明します。

表題のとおりです． github.com github.com github.com この3人を中心に落し物共有サービスを作ってました． 期間はゆるりと週末開発で1ヶ月くらいです． 作った． LMP -落し物をシェアし合えるサービス- 正式名称は「Searching Lost Property with Milk」です，ちょっと長いですね． (いまXSS対策してないから各位いじめないで) なにこれ 落し物を共有し合えるサービスです． こんな特徴を持ったサービスです． 落し物を共有する． 落し物情報を検索する． ユーザの落し物登録に応じて階級がアップする． (一番下はまだ未実装です．) まだβ版なので，データのストアが出来て，ストアしたデータを閲覧出来るくらいですが． テストデータとかも普通に残っているので，本運用する場合はデータ整理してちゃんと運用しないといけませんね． どんな風に作ったの

ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） Posted: 2015-07-04 / Tags: heatmap.js Webでいうところのヒートマップツールとは、Webサイトを改善するために、クリックした場所やどこまでスクロールしたかなどを、度合いによって色を変えて視覚的にわかりやすく表示してくれるものです。 PtEngineやクリックテールといったサービスを聞いたことがある方もいるのではないでしょうか。 今回は、そういったサービスを使うことなく、heatmap.jsとMilkcocoaを使って、無料でヒートマップツールを自作してしまおうといった記事になります。とても簡単なので、初心者の方も是非試して頂きたいです。 こちらが、このブログのトップページのクリック箇所のヒートマップ表示になります ヒートマップを表示する

超小型マイコンボード「Intel Edison」のセットアップ 〜 Milkcocoaと連携させる手順を初心者向けに解説します。 Posted: 2015-07-02 / Modified: 2015-11-08 / Tags: Edison Node.js 超小型マイコンボード「Intel Edison」のセットアップ 〜 Milkcocoaと連携させる手順を初心者向けに解説します。 Tessel、RaspberryPiとMilkcocoa連携をしてきましたが、今回は、 「Intel Edison」 とMilkcocoaを連携させてみようと思います。Macの方向けになります。 Edisonについて EdisonはIntelが開発したマイコンボードです。LinuxOSが搭載されているので超小型のパソコンという認識でもいいかもしれません。 Intel Edison Kit for Ardui

D3.jsを使ってセンサーで取得した1日ごとの玄関の光量の総和をグラフ化する Posted: 2015-06-29 / Tags: D3.js Raspberry_Pi 「Raspberry Piで取得したセンサーデータをリアルタイムに可視化する」のシリーズに引き続き、可視化の話です。 上記のシリーズでは、Milkcocoaを使ってリアルタイムな情報を表示することにフォーカスをして話しました。 ただ、照度データ（その場所がどれくらい明るいか）はリアルタイムに通知することには価値があるとしても、リアルタイムにグラフで見ることにはあまり価値があるとは言えません。 なので、今回は、溜まったデータを1日ごとに比べて、どの日が特に使われているかをわかるようにしてみます。 デモはこちら ソースの全体は以下からご覧下さい（2回目以降の読み込みを高速化するためにローカルストレージを使って色々やっています）

Some of our readers may recall that we introduced the Milkcocoa platform developed by Fukuoka-based startup Technical Rockstars. It enables automation of managing servers through single-line script tag insertion into the HTML source, which means support for front-end engineers in managing the back-end environment from its front-end side. So the platform is an ideal solution for startups or system

今回のソリューション：【Milkcocoa/ミルクココア】 〜バックエンドの開発を効率するBaaS「Milkcocoa」の使い方〜 「LIGブログ」でお馴染みの株式会社LIGの「浦川チーム」は、プロモーションサイトや、インタラクティブコンテンツを制作する部隊だ。チームとして目指しているのは、全員が個々に得意分野を持ち、多様性を実現するということ。例えばチームメンバーの1人菅原 のびすけさんさんは、リアルタイム通信を得意分野のひとつとし、そのサービス開発を効率化するバックエンド提供サービスBaaS（Backend as a Service）「Milkcocoa（ミルクココア）」のエバンジェリストを務める。 昨年12月25日に行われた「SANTA CLOSE TO YOU」のイベントでもMilkcocoaを活用したことで、限られた時間の中でイベントを成功に導くことができたそうだ。今回は浦川チー

前々回、前回に引き続き、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する方法を紹介していきます。 弊社オフィスの玄関の明るさをリアルタイムで表示しているデモはこちらです 今回は以下の流れで、保存されたセンサーデータのリアルタイムなグラフの描画について説明していきます。 D3.jsで折れ線グラフを表示する際に必要な知識 Milkcocoaのデータストアからデータを取り出して、入出力の範囲を指定する グラフを描画する リアルタイムアニメーション D3.jsで折れ線グラフを表示する際に必要な知識 D3.jsの基礎知識については以下で学習すると良いかと思います。 D3.js入門 (全17回) - プログラミングならドットインストール D3 入門 | スコット・マレイ | alignedleft 面倒な人は、最低でも以下を頭に入れて

G's ACADEMYとは、今年4月にデジハリハリウッドが「世界を変えるGEEKを養成する」という理念のもとに始めた、エンジニアの養成学校です。 この記事によると、入学試験には、IQを測定する「IQ審査」と発想力を試す「IDEA審査」が行われたようです。それだけ頭のキレる方々が集まっているということですね。 そんなG's ACADEMYさんのカリキュラムの中でMilkcocoaを使って頂けるということで、見学に行ってきました。 Milkcocoaを使ったチャットアプリ作成課題の発表 お邪魔した回はちょうど、Milkcocoaを使ったチャットアプリの発表が行われる会でした。 1番目の方 Milkcocoaを使ったチャットをLINEっぽい見た目に仕上げてらっしゃいました。 音声認識も追加する予定とのことで、マイクボタンが設置されていました（こういう、「実装はしていないけどするつもりがあるよ！」

Raspberry Piで取得したセンサーデータをリアルタイムに可視化する（センサー編） Posted: 2015-06-11 / Modified: 2015-06-17 / Tags: Raspberry_Pi Node.js 前回に引き続き、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する方法を紹介していきます。 弊社オフィスの玄関の明るさをリアルタイムで表示しているデモはこちらです 今回は以下の流れで、センサーデータの取得と保存について説明していきます。 回路を組む シリアル通信の準備 ADコンバーターからデータを取得 データの確認と保存 なお、センサーは以下のキットのものを使用します。同じように開発したい場合はご購入ください。 ハック ラズベリーパイ Raspberry Pi 電子工作入門キット。 回路を組む こ

Web開発者でも簡単に扱えるマイコンボードTesselでMilkcocoaを使う（遠隔Lチカ編） Posted: 2015-06-10 / Tags: Tessel JavaScriptで使えるマイコンボード（巷ではJS Boardと言われているみたいです）であるTesselは、Web開発者でも簡単に扱えるということで注目されています。 Rasberry Pi等ではつまずきがちなセンサーも、Tesselではパズルのように装着するだけで良いので初心者でも簡単に扱えます。 Tesselは1万円弱と少し高いですが、Raspberry Piはインストールに必要な機材、ブレッドボードやジャンパワイヤー、無線LAN子機等々を買う必要があることを考えると、結果的にTesselが安くなる気がしています。 そこで今回は、MilkcocoaをTesselで使う方法を以下の手順で紹介します。 Tesselの導入

Raspberry Piで取得したセンサーデータをリアルタイムに可視化する（導入編） Posted: 2015-06-08 / Modified: 2015-12-09 / Tags: Raspberry_Pi Node.js Raspberry Piを買ったは良いもののLチカで止まってる、なんて人は少なくないんじゃないでしょうか？ センサーデータがうまく取得できなかったり、通信の部分がよくわからなかったり、色々な理由があるかと思います。 そこで今回は、Raspberry Piでセンサーデータを取得して、Milkcocoaを使ってリアルタイムにブラウザ上にグラフ化する過程を、導入部分からひとつひとつ説明したいと思います。 こちらでデモを見ることが出来ます 今回は導入編ということで、以下の流れで説明してきます。 Raspberry Piのインストール Raspberry Piを持ち運べるよう

はじめに 本特集では主にMilkcocoaを通して、BaaS（Backend as a Service）の使い方を体験していただきました。今回はまとめとして、国内外のBaaSについて紹介を行い、BaaSを利用した開発が今後どのようになっていくか、そもそもバックエンドとは何なのかを考えたいと思います。 そもそもBaaSとは？ そもそもBaaSとはバックエンドの機能をAPI化したものです。バックエンドの機能とは、データの保存、Pub/Sub型通信、認証、検索などです。開発者がバックエンドを意識せずに開発ができるということで、たとえばフロントエンドのエンジニアだけでとか、デバイスのエンジニアだけでサービス全体の開発が可能になります。 図1　そもそもBaaSとは 国内外のBackend as a Service 国内外のBaaSについてまとめてみたいと思います。iPhoneやAndroidのネイテ