はてなブックマーク

ハンダ付け不要！初心者でもできる、30分おきにセンサーの値をWeb上に保存する仕組みを安定して動かす（回路編） Posted: 2016-03-02 / Modified: 2016-03-03 / Tags: ESP8266 先日、スイッチサイエンスで「ESP-WROOM-02 Arduino互換ボード」が発売されました。 格安で使えるWiFiモジュールとして話題になったESP8266（ESP-WROOM-02）ですが、電子工作初心者から見ると「ハンダ付けが必要」で手を出すにもちょっと勇気がいる状況でした。 しかし今回の互換ボードのおかげで、ハンダ付けが不要になって初心者でも手を出しやすくなりました。 また、ESP8266（ESP-WROOM-02）はArduino IDEで開発可能なので、ほとんどArduinoと同じ感覚で使うことが出来ます（スイッチサイエンスの記事で、Arduino

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

IFTTT+LEDで簡単IoT！ESP8266で特定のハッシュタグのツイートがあったらLEDを光らせる Posted: 2015-12-21 / Tags: Twitter IFTTT Heroku ESP8266 Node-RED enebular いざIoTを始めてみたもののLチカで終わってしまった、という人も少なくないかと思います。 「Lチカが出来たところで...」とお思いかもしれませんが、LチカだけでもそのLチカに意味を持たせれば、案外実用的が作れます。 そこで今回は、Twitterで特定のハッシュタグでツイートがあったときに光るものを作成しました。 実はこれは、私個人が、#mlkccaというハッシュタグのツイートがあったら、メール等で通知をするまでもないけど気軽に知らせて欲しいなという願望から作ったものです。 必要なもの 以下、ハード側で必要なものです。高くても3,000円くらい

最近、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

ESP8266やArduinoでMilkcocoaを使う方法(Milkcocoa Arduino SDK) Posted: 2015-10-23 / Modified: 2015-12-20 / Tags: Arduino ESP8266 今まで、本ブログではRaspberry Pi（記事）やTessel（記事）等、JavaScriptで扱えるデバイスで、Milkcocoaを使ってデータのやり取りや保存をする方法を書いてきました。 ただ、ハード側の開発に着目したときに、それらのデバイスはArduino等の組み込み言語を扱うマイコンに比べて難易度が高いように思います。そのためか「ArduinoのSDK作って欲しい」といった声も多く頂いていました。 実は今までも、MQTTクライアントを使えばArduinoやESP8266でMilkcocoaを利用することはできましたが、使いにくい点が多々ありま

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

WiFiが使えない場所でもIoT！3G通信モジュール「3GPI」を使って、Raspberry Piの温度データをMilkcocoaに送信してみた Posted: 2015-10-13 / Tags: Raspberry_Pi こんにちは！部谷です。メカトラックス株式会社さんに3GPIをお借りしたので、使ってみました！ 3GPIはその名の通り、Raspberry Pi用の3Gモジュールです。最近ソラコムさんのSIMで3GPIを使うブログをよく見かけます。 本製品は、Raspberry Piにスタック可能な 3G 通信モジュール搭載基板です。 設定済みOSをインストールしたmicroSDカードが付属しているため、対応SIMを使用すれば即座にインターネットに接続可能です。 通信不調時の自動リセット機能や再接続機能も備えており、C言語以外にスクリプト言語も利用できるため、組み込み開発に不慣れな方で

MQTTの仕様であるClient IDを使って、Milkcocoaで簡単にIoTデバイスのアクセス制御が出来るようになりました。 今までも、セキュリティアップデートの記事に書いてあるように、デバイス上で認証をすることでアクセス制御は出来るのですが、単純に特定のデバイスからのアクセスを制御する目的にしては少々面倒です。 そこで今回は、もう少しシンプルにアクセス制御をする方法について説明します。 ※追記(10/09)：こちらの方法は、開発時や小規模な事例でのみ使用下さい。また、同レベルのアクセス制御はデータストアに難解な文字列を含ませる方法でも可能です。詳しくは以下をご覧下さい。 Milkcocoaでの簡易アクセス制御について アクセス制御の概要 アクセス制御の方法の概要は以下です。とてもシンプルですね。 デバイスのコードに任意の予測しにくい文字列を入れる セキュリティルールでその文字列を使っ

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で利用する

Electronは、デスクトップアプリケーションをJavaScriptで作成できてしまうGithub社が開発しているツールです。（Atom(原子)の次はElectron(電子)、なんだかかっこいいですね） Atomはもちろん、Slackや、先日無料化されたPixateといった有名アプリにも使われているとのことで、安心して使えそうです。 そこで今回は、Electronで作ったアプリにMilkcocoaを導入する方法を簡単に説明します。 こちらがGithubのリポジトリです 実際に作ったアプリのダウンロードリンクは以下になります。 Mac: darwin_macosx.zip Win(32bit): win32_windows_32bit.zip Win(64bit): win32_windows_64bit.zip Electronをインストールする Electronをグローバルにインストー

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

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

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

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 面倒な人は、最低でも以下を頭に入れて

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

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

リアルタイムなToDoアプリをMilkcocoaとJavaScriptで作る（認証編） Posted: 2015-06-05 / Modified: 2015-06-11 / Tags: JavaScript JSON_Web_Token Auth0 前回に引き続き、ToDoアプリを作成します。前回までのソースコード一式は以下です。 以下の流れで行っていますが、今回は3.と4.を実装します。 データを保存しないToDoアプリを作る（前回） Milkcocoaでデータを保存＆リアルタイムに編集する（前回） 認証機能利用の準備をする（今回） 自分だけしか編集できないようにする（今回） チームにしか編集できないようにする（次回） 認証機能利用の準備をする 認証機能にはAuth0というサービスを利用します。 認証機能を利用する前に、Milkcocoa・Auth0（認証サービス）・ソーシャルログイン

静的サイト（ファイル）のホスティングサービス、3つの目的別に7つ紹介 Posted: 2015-05-28 / Modified: 2015-12-09 / Tags: html hosting 最近、静的ファイルをホスティングする機会が増えているように感じます。 フロントエンドで完結するシングルページや、Jekyll等の静的サイトジェネレータで作成するサイトが多くなってきたからかなと思います。 また、BaaS(Backend as a Service)が出てきて、フロントエンドコーディングだけでWebアプリケーションが作れるようになったことから、さらに需要が高まるんじゃないかと考えています。 そこで今回は、以下の3つの目的別に静的ファイルホスティングサービスの紹介をします。 見た目・動作の確認をしたい 個人的なものを継続的に公開したい ちゃんと運用したい 見た目・動作の確認をしたい We