どうもこんにちは、ちゃちゃまる（@chachmaru）です。 これまで数回にわたり、Intel Edisonという小さなコンピューターを使って開発をおこなってきました。LEDのライトの色で天気がわかるツールを作り、玄関から外の様子がわかるようにしたり、Intel Edisonとセンサーを組み合わせて温度計を作成したりしました。 今回の記事では、その温度計で計測された温度のデータを、10分ごとにMilkcocoaというサーバーを経由して、Freeboardというグラフ作成サービスでグラフ化してみたいと思います。これなら、家からでもその温度を測っている場所の温度を確認できるようになります。 Intel Edisonとは Intelが開発しているマイコンボード。Wi-FiモジュールやBluetoothモジュールを最初から搭載している。Intel Edisonの公式サイトはこちら 使うサービス セ

Webページへのコード貼り付け ※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactform.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。 milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。 <form milkform> <input type="text" name="e-mail"> <input t

最近、Raspberry PiにSORACOMを認識させてみる | IoTニュース：IoT NEWS、こちらの記事を拝見しまして、SORACOM Airを、Raspberry PiとFS01BU(FUJISOFT)でつなぐことが出来ました。 さっそく、SORACOM AirをつないだRaspberry PiとlittleBitsの光センサーモジュール＋Arduinoモジュールと連携して照度を記録しつつ、Milkcocoa freeboardと連携できたので、その使い心地をレポートしたいと思います。 今回のやりたいこと 今回のやりたいことは「光センサーで照度を計測しMilkcocoaに記録しつつMilkcocoa freeboardで見れるようにする」です。 littleBitsで光センサーモジュールとArduinoモジュールで照度を計測し、その照度データをRaspberry Pi上でNod

作ったもの 今見ているページを、ページのタイトル、URL、メモとともにバックエンド(Milkcocoa)へ送信するブックマークレットを作りました。 なにが面白いかというと、バックエンドを持つブックマークレットが簡単に作れるということなんです。 動機 会社と家で別のGoogleアカウントを使っていて、会社で見てるページを家のほうでブックマークに入れたいということがよくありました。しかし共有する手段がなく困った。 そのときブックマークレットの作り方を見かけて、これとMilkcocoa組み合わられるかな？と思い作りました。 「でもそういうサービスとかEvernoteとかTwitterに残しておけばよくね？？」とか言われそうですが、そんなの関係ないんです。Milkcocoaで作りたかったんです。 Milkcocoaの面白さ ブックマークレットでなにか永続的に記録する仕組みをつくるには、これまではJ

リンク connpass 登壇者女子限定 Milkcocoa Girls ! Milkcocoa Meetup vol5 (2015/12/04 19:00〜) ## Milkcocoa とは? リアルタイム通信が簡単に行えるバックエンド機能を提供してくれるサービスです。 様々なプラットフォームに対応していて、WebだけではなくIoTデバイスにも対応しています。 初心者向けなので触ったことがない人でも簡単に使えますよ！ https://mlkcca.com/ ## Milkcocoa Meetup vol5 登壇者は女子限定 初心者向けということで、全くMilkcocoaを使ったことが無い女性エンジニアたちに触ってもらいどこまで出来るかという実験的な意味も込めてい

はじめまして、Technical Rockstarsの平間と申します。 最近、技適を取得した「ESP8266」という格安Wi-Fiモジュールが、電子工作界隈（IoT界隈？）で話題になっています。このモジュールのおかげで安価でIoTが始められるようになり、より国内IoTが加速すると期待できます。 ESP8266でHTTPを使う（IFTTTに投げて通知等）記事は既にちらほらあるので、今回はこちらのライブラリを使ってESP8266でMQTTを使う（リアルタイム制御等）方法を説明します。 ※先日、MilkcocoaでArduinoやESP8266用のSDKを公開しました。こちらの記事に具体的な使用方法が書いてあるので、是非こちらもご覧下さい。 Milkcocoaとは Milkcocoaとは、IoTデバイス・スマートフォン・PC間で簡単にリアルタイムなデータのやり取りができるようになるプラットフォー

はじめまして、Technical Rockstarsの平間と申します。 役職はフロントエンドエンジニアやデザイナーと言っていますが、IoTに関わるようになってからはC言語を書いたりと割と何でもやっています。 さて、JavaScriptで使えるマイコンボード（巷ではJS Boardと言われているみたいです）であるTesselは、Web開発者でも簡単に扱えるということで注目されています。 Rasberry Piなどではつまずきがちなセンサーも、Tesselではパズルのように装着するだけで良いので初心者でも簡単に扱えます。 Tesselは1万円弱と少し高いですが、Raspberry Piはインストールに必要な機材、ブレッドボードやジャンパワイヤー、無線LAN子機などなどを買う必要があることを考えると、結果的にTesselが安くなる気がしています。 そこで今回は、MilkcocoaをTesselで

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

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を使ったリアルタイムな機能を簡単に導入する方法を説明します。 どういう設計になるか 実際にどういう設計になるのか説明します。

超小型マイコンボード「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

Raspberry Piの照度センサーを使って玄関の光がついたらSlack経由でApple Watchに通知する Posted: 2015-06-19 / Tags: Raspberry_Pi Node.js Apple_Watch Slack 「Raspberry Piで取得したセンサーデータをリアルタイムに可視化する」のシリーズの番外編です。 上記のシリーズでは、照度センサーのデータを取得してリアルタイムにグラフ表示する方法を説明しました。 弊社オフィスの玄関の明るさをリアルタイムで表示しているグラフはこちらです でも、せっかくセンサーデータを取得しているので、何か変化が起こったら知らせて欲しいですよね。 なので今回は、電気がついたらSlack経由でApple Watchに通知してみます（iPhoneに通知するのと何も変わりはないんですが）。 Node.jsからSlackに投稿する前の

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

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の導入

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

mBaaSの「今」がわかる！ぶっちゃけ仮想パネルディスカッション！ 白石 俊平（HTML5 Experts.jp編集長） BaaS / mBaaSという言葉をご存知でしょうか。この単語は「Backend as a Service」の略（mBaaSは、さらにモバイルアプリに特化したもの）で、サーバサイド（バックエンド）のコードをほとんど書かなくてもアプリを開発できるようにするサービスです。2013年にFacebookが買収したParseが特に有名です（以下、「mBaaS」で用語を統一します）。 mBaaSは主にモバイルアプリの開発に利用され、Webエンジニアにとっては少し馴染みの薄い技術ではあるのですが、これからのアプリケーションアーキテクチャを考える上では外せないトピックだと考え、有識者の方々にお集まりいただき、「仮想パネルディスカッション」を実施しました。mBaaSを作っている人と使って

昨秋、福岡出身のスタートアップ Technical Rockstars の手がける Milkcocoa という API を取り上げた。フロントエンドを構成する HTML の中にスクリプトタグを1行追加するだけで、サーバ環境などバックエンドの制御を自動化できるプラットフォームだ。フロントエンドを作るだけで一杯一杯、バックエンドを切り盛りするリソースなんて割けない、というスタートアップや SI には重宝するしくみと言える。 Technical Rockstars は今日、Milkcocoa のバージョンアップを行い、3つの機能追加を実施したと発表した。JSON Web Token (JWT) 対応、MQTT （MQ Telemetry Transport）プロトコルの対応、Node.js SDK の正式対応だ。 JSON Web Token の対応により、Auth0 や AuthRocket

MilkcocoaでBaaSを体験！～バックエンドの仕組みと使い方～ 第5回圧倒的にリアルタイム通信が楽しくなる！　Milkcocoaをサーバーサイドで使ってみよう！　～Milkcocoa Node.js SDKとTwitter APIでツイートのリアルタイム取得＆保存を試す～ はじめに 前回はMilkcocoa Node.js SDKの使い所などを紹介して、実際に使用の導入部分に触れました。今回はTwitter APIにNode.jsからアクセスし、Milkcocoa Node.js SDKを用いてリアルタイム描画＆保存をしてみたいと思います。 Twitter APIの利用準備 Twitter APIの使い方を説明します。ちなみに、2015年3月時点でのやり方になります。Twitter APIや開発者画面はある程度の期間が経つと更新されるので画面が同じではない場合がありますが、適宜読み取

MilkcocoaでBaaSを体験！～バックエンドの仕組みと使い方～ 第4回圧倒的にリアルタイム通信が楽しくなる！　Milkcocoaをサーバーサイドで使ってみよう！　～Milkcocoa Node.js SDKの紹介～ 前回まででMilkcocoaの概要から簡単な使い方、発展的な使い方を紹介しました。前回まではフロントエンド開発としてのJavaScriptを使ってブラウザで動作するWebアプリケーションを実装してきました。 今回はMilkcocoaのNode.js向けSDKを用いて、サーバサイドでMilkcocoaを使っていきたいと思います。 図1　MilkcocoaとNode.ja Milkcocoa Node.js SDK まだ開発版ですが、MilkcocoaはNode.jsのSDKも公開されています。Milkcocoa Node.js SDKは通常のJavaScript SDKと同