Advent Calendar 2014 に関し、4本の記事を投稿しました（HTML5、WebRTC）

昨年、初めて Advent Calendar に記事を投稿しましたが、今年は4本の記事を投稿してみました。 

投稿した記事４つ

2014年12月22日時点で追記が必要なものがありますが、記事のリストは下記のとおりです。

　■１） HTML5 - 超音波通信やろうとして音の可視化（可聴域の特定周波数の判別など）をやった話【前編】 - Qiita

　■２） HTML5 - ロボティックボールを遠隔から制御する（カメラで表情認識した結果を Websocketで送受信） - Qiita

　■３） WebRTC - Android端末をプレゼン用途でWebカメラ的に使おうとした話【設計編】 - Qiita 

　■４） WebRTC - 有線接続したAndroid端末をWebカメラ的に使う（ブラウザ上での映像表示） - Qiita

投稿をした Advent Calendar

・HTML5 Advent Calendar 2014 - Qiita

・WebRTC Advent Calendar 2014 - Qiita

Hack for Town in Aizu というハッカソンに参加してきました

2014/2/15 と 16 の 2日間、会津若松で開催されたハッカソン「 Hack for Town in Aizu 」に参加した話です。

前回の記事 はハッカソン参加にあたっての技術系の話でしたが、今回の記事は参加の記録・レポート的なものになります。

これが人生で 3回目のハッカソン参加で、人生 2回目のハッカソンは前の週に石巻で開催されたものだったのですが、2週連続で大雪に大歓迎されることとなりました。

そして、2回とも雪の中、日本列島を北上。

Hack for Town in Aizu とは？

まずは、簡単にイベントについての説明を。

 このイベントは、最先端技術を用いて町角や商店街に設置された最先端ハードウェアをハックする、というステキなハッカソンです。

会津若松市の中心にある神明通りに iBeacon互換のモジュールや環境センサーが設置され、それらを利用して行う開発は「スマートフォンアプリ、Webサービス、ハードウェアなど」を対象としたものでした。

そして、ハッカソンだけでなく「会津若松の名物のソースかつ丼」や、「蕎麦名人による手打ち蕎麦」が振る舞われる、1粒で2度美味しいイベント。

それらも楽しみにしていたのですが（むしろこれが目的のメイン！？）、ソースかつ丼は食べそこなってしまうことに。
”ぜんぶ雪のせいだ。”

現地入りまで 〜 埼玉の自宅をでてから24時間

当初、移動は夜行バスを予定していたのですが、イベント前日の金曜日は雪の影響で交通機関のダイヤが乱れていました。

深夜になると移動できないかもしれない、ということで急遽、新幹線での移動＋郡山宿泊に切り替え、郡山へ。新幹線の遅れがあったものの無事に郡山まではたどり着けました。しかし、翌日が大変なことに・・・。

ハッカソン初日は、郡山から移動に利用しようとしたバスや電車が運転見合わせとなり、ひとまず郡山駅内のカフェに入り、遠隔で参加することとなりました。

会場から Youtubeで映像配信をしていただけたので、それを視聴しつつ 前回の記事 に書いたような情報を見ながら準備をスタート。

このとき、iOSアプリ開発も iBeaconを扱うアプリも開発経験なし。iOSの開発者登録やサンプルの iOSデバイスの実機インストールはやっていたり、iBeacon に関する情報収集は行っていたのですが・・・。

ひとまず、Node.jsベースのライブラリを使ってアプリで開発を進める方針としました。そして、開発用に使っていた Mac では OS が Marvericks ではないため、そのライブラリが利用できないことが分かり、iOSアプリ開発に切り替えることに。

念のため持ってきていた下記の本が大活躍。

会場ではチームビルディングが行われ、開発がスタートしていました。 

自分はイベント主催者からサンプルとして提供されていたソースコードをビルドしてみたり、それに手を加えてみたりしつつ、会場側とはFacebookなどで連絡を定期的に行い、交通機関の回復を待ちました。

その後、その日はバス・電車ともに終日運休が決まり、公共交通機関での移動ができなくなったため、会津若松から郡山まで車で迎えに来ていただけることとなりました。

この日の昼のソースかつ丼は食べそこなってしまったものの、車で移動させてもらえたおかげで夜の懇親会には参加でき、美味しい料理をいただくことができました。

このとき、前日に自宅をでてから、ちょうど24時間後。

美味しい料理を堪能して、この日は就寝。

ハッカソン 2日目 〜 無事に現地で開発

前日は会場入りできず単独での開発をしてましたが、そのとき Facebook経由で会場側から「同じ iOS開発のビギナーで構成されたチームがある」という情報をもらっていて、懇親会のときにそのチームに合流させてもらえる話となりました。

チーム名は「チームiOSビギナーズ」。

プロジェクトの内容は「目が見えない方が安心して街や建物内を歩く事ができるよう、iBeaconを利用した危険な場所の通知システムの開発」でした。

初日の開発を進める中、チームでは Androidアプリを開発する流れになっていたようなのですが、当初の予定通り iOSアプリも作ろう！ということになり、自分は iOSアプリ担当に。

この日の昼は楽しみにしていた蕎麦で、それがなんと食べ放題！

このハッカソンで、チームで開発したのは Androidアプリと iOSアプリで「iBeaconモジュールとの距離によって、距離に応じた合成音声によるアナウンスが流れる」というものと、サーバ側で「iBeaconモジュールごとに、固有のアナウンスを紐付けるためのAPI」。

そして、各チームのプレゼンと最終審査に望みました。
プレゼンや審査結果の発表など、イベントの様子は「 こちらのYouTubeの再生リスト 」からご覧いただけます。

合流させていただいた チームiOSビギナーズ は、将来性・実現の可能性を評価いただき「Hack for Japan賞」をいただくことができました。途中参加で受け入れていただいたチームの皆さまに感謝です！

ちなみに、賞品はメンバー全員に Hack For Japan  特製ケース の Raspberry Pi 。 

美味しい料理を食べることができ、また、iOSアプリ開発や iBeaconを扱うノウハウも得られ、参加して貴重な経験ができたイベントでした！！

帰り道のハック

さて、イベント終了後、会津若松からの電車が運休になっていたりして、どのような手段で帰るかの検討が行われました。

また、帰り道も車で移動させていただけることになり、新潟経由で帰ることに。行きも帰りも、大変助かりました。

新潟駅に到着し、ご一緒させていただいた方々と美味しいごはんを食べて、無事にイベントを終えられました。

県内ニュースの記事

イベントについて「 ソフト開発腕競う 若松で大会 | 県内ニュース | 福島民報 」という記事が掲載されました。

「Hack for Japan賞」の賞品：特製ケース付 Raspberry Pi

「チームiOSビギナーズ」でいただいた「Hack for Japan賞」の賞品、Hack For Japan  特製ケース の Raspberry Pi は後日受領しました。

iBeaconのアプリやライブラリ、その他の関連情報をハッカソン用に記録〜その１

はじめに

会津で開催されるハッカソン「 Hack for Town in Aizu 」に参加するにあたり、ハッカソンで使われる iBeacon に関して、自分用に情報をまとめた記事です。

＃ ハッカソンへの参加中に書いているため、補足はあまりないです。もしかしたら、後日追記するかも。

⇒（2014/2/23）少し情報を追加しました。

iBeaconのニュースや便利アプリ・ライブラリの情報は追いかけていたのですが、実際に自分が試すにあたり利用した情報を抜粋して記事にしてみようと思います。

便利そうなアプリ

iOS用アプリのリスト

信号の発信／受信ができるアプリです。
とりあえず、iOS端末2台とアプリがあれば、ビーコンモジュールからの信号発信（「ペリフェラル」側）と、その信号の端末での受信（「セントラル」側）が試せます。

1. Estimote Virtual Beacon （無料アプリ）

2. Beacon Toolkit  （有料アプリ）

3. BLExplr （有料アプリ）

4. Locate for iBeacon （無料アプリ）

 上記アプリについて、試してみたアプリ１と２について少し補足します。

１は、「Estimote Beacon」という iBeaconモジュールに対し信号を受信する機能のサンプルなどが搭載アプリです。

このアプリをインストールした iOSデバイスを iBeaconモジュールとして動作させる機能もあるため、このアプリをインストールした iOSデバイスが2台あれば、iBeacon の発信・受信をとりあえず試してみることも可能です。
なお、発信・受信に使われる UUID は Estimote Beacon のUUIDとなります（変更不可のようです）。

２も、iBeaconモジュールの信号受信も、モジュールとして動作させる信号発信も行えるものです。

発信側となった場合の UUID はこのアプリ用の固定のものが設定されています（変更不可のようです）。信号受信を行う際の UUID は、このアプリ独自の UUID と、Estimote Beacon のUUID が設定されていますが、受信のための UUID は利用者が任意のものを追加することができます。

JavascriptでiBeacon関連の処理を行う

Node.js ＋ ライブラリ

これについては、下記の記事を直接見ていただくのが良いかと思い、リンクを貼っておきます。
「 bleacon 」というライブラリを使っているようです。
※注意： Mac で利用する場合、OS のバージョンが Mavericks でないと NG のようです。

• Node.js - たった6行!最も簡単にiBeaconの電波を「発信」する方法 - Qiita

• たった5行!最も簡単にiBeaconの電波を「受信」する方法 - Qiita

Android で iBeacon

Android で iBeacon アプリを開発する場合、Bluetooth Low Energy（Bluetooth 4.0、BLE などと書かれたりもします）の API を利用する形になります。

Web検索や GitHub で「Android iBeacon」というキーワードで検索すると、例えば下記のような参考情報や実装サンプルを見つけられます。

• iOS - AndroidでiBeacon信号を受信してみよう - Qiita

• RadiusNetworks/android-ibeacon-service · GitHub

その他

イベント関連の資料

「 Hack for Town in Aizu 」で公開された資料＠ slideshare もリンクを置いておきます。

下記の１は「iBeaconとは？」という話や、「Appcessory 」について書かれた資料です。下記の２は「Hack for Town in Aizuについて」書かれたもので、イベントに関する情報がいろいろ書かれた資料です。

1. Ibeacon hack4aizu

2. Hack fortowninaizu

イベントに参加して

イベント参加の記録・レポート的な記事を書きました。

⇒ Hack for Town in Aizu というハッカソンに参加してきました

Kinect等のセンサーをJavascriptで扱う（調べてみた 〜 その１）

KinectやXtion、CarmineといったセンサーをJavascriptで扱えないかと思い、それを実現するための方法をいくつか調べてみました。
WebSocketでセンサー情報を送信するアプリケーションを自前で作れば実現はできますが、まずはライブラリなど既にあるものを調べるところからやってみました。

Kinect SDK のサンプル

Kinect SDK 1.8 からブラウザでKinectを扱える、HTML5で扱える、という情報がでていたので、その情報を見てみました。

どうやら「Kinect for Windows Developer Toolkit v1.8.0」の「Samples: C#」の中にある「Webserver Basics-WPF」がそれに該当するようです。
サンプルを動かすと、ブラウザ上に表示された写真と自分自身のカメラ映像（背景は除去されたもの）が合成されるというものを見ることができます。

サンプルを動かすまでは「SDK・Toolkitの導入 ⇒ Toolkitアプリ上でのサンプルのダウンロード ⇒ サンプル実行」 と、Kinect と Windows 8 のマシンを持っていれば割と簡単な手順で進めることができます。 

関連情報

このサンプルを試す際の制限があるようです。

「msdn.microsoft.com」の What's New を見ると下記のような記載があり、Windows 8 や 8.1 で試す必要があるとのことです。

The Webserver components and sample require .NET 4.5 (Visual Studio 2012) and Windows 8 (or later) for web socket functionality.
The Kinect for Windows SDK JavaScript APIs support Internet Explorer 10 and later, Mozilla Firefox, and Google Chrome.

 その他、英語の情報ばかりしかないようですが、関連するページのリンクを記載しておきます。

• WebServerBasics-WPF C# Sample

• Web Applications

• Kinect for Windows JavaScript Reference （Core Components 、UI Components ）

OpenNIの公式ページで紹介されているNode.js用ラッパー「NuiMotion」

KInectやXtion、Carmineといったセンサーを扱うアプリケーションをマルチプラットフォームで開発できる「OpenNI」の公式ページで紹介されているNode.js用のラッパー「NuiMotion」というものがあります。

下記のWikiの説明を見ると「Node Package Manager (NPM)」を利用して導入できるようです。ただし、OpenNI/NiTE を事前に導入しておく必要があります。

またしても英語の情報ばかりしかなさそうですが、関連するリンクをまとめておきます。

• 【OpenNIでの紹介ページ】NuiMotion | OpenNI

• 【概要説明など】NuiMotion for Node.js | Sweatin' to the Web

• 【ソースコードなど】bengfarrell/nuimotion · GitHub

• 【導入方法などが記載されたWiki】Home · bengfarrell/nuimotion Wiki · GitHub

• 【導入方法（Wiki）】Installation · bengfarrell/nuimotion Wiki · GitHub

DEPTHJS

MIT Media Lab により提供されている「DEPTHJS」というものもあります。

今のところ、ブラウザのプラグインを FireBreath というものを使って自前でビルドする必要があるようです。その際、前述の「NuiMotion」と同様に、OpenNI/NiTE が必要です（※ これらを導入してないと、プラグインのビルドでエラーがでました）。

導入手順が書かれたページを探したのですが、ソースが提供されているGitHubのページ以外では下記が英語ではありますが、手順は一番見やすかったように思いました。

　Getting started with DepthJS - Andrew Deniszczyc

導入ではまったところ

MacでDEPTHJSを試しにビルドなどしてみたのですが、エラーではまったところがあったので記載しておきます。

導入手順の中で、Xcodeを利用したビルドを行うところがあるのですが、そこでファイルコピーに関するエラーがでます（2014/1/4 時点）。解決法は下記のページに記載があったのですが、必要な情報だけ抜粋すると下記になります。

DEPTHJS のファイル一式で「firebreath-plugin」というフォルダ内にある「PluginConfig.cmake」の「set(FBSTRING_PluginFileName "np${PLUGIN_NAME}.dll")」という行を「set(FBSTRING_PluginFileName "${PLUGIN_NAME}.dll")」と修正する（文字列の中の np という部分を削除する）。

　Failed to build plugin on OSX · Issue #49 · doug/depthjs · GitHub

Macで自分が試した導入手順は、おおまかには下記のとおりです。

1. OpenNIの「OpenNI SDK history | OpenNI」というページから、OpenNI と NiTE の 1.X 系のファイルをダウンロードし、任意の場所に解凍
2. OpenNI と NiTE のそれぞれについて、解凍したフォルダ内にある「install.sh」を sudo コマンドを使って実行
3. GitHub の DEPTHJS のファイル一式をダウンロードし、任意の場所に解凍
4. 上記の「firebreath-plugin/PluginConfig.cmake」の修正を行う
5. 「FireBreath」のファイルをダウンロードし、任意の場所に解凍
6. ターミナルを開き、DEPTHJS の中の「firebreath-plugin」フォルダへ移動
7. 手順７ にいるフォルダ内から、ターミナル上で FireBreath のフォルダ内にある「prepmac.sh」を利用しビルドを実行（コマンドは $（FireBreathのパス）/prepmac.sh . build/ ）
8. 「build」フォルダ内に生成された「FireBreath.xcodeproj」をXcodeで開き、プロジェクト一式をビルド
9. DEPTHJS の中の「chrome-extension/plugin/」というフォルダ内に「DepthJSPlugin.plugin」というファイルが生成されているので、これを「/Library/Internet Plug-Ins/」にコピー（sudo コマンドを利用）
10. Chromeの拡張機能（プラグイン）のリストを表示し、そこでディベロッパーモードを有効にした状態で表示される「パッケージ化されていない拡張機能を読み込む」を選択。その際の読み込み先対象フォルダとして DEPTHJS の中の「chrome-extension」フォルダを選択し、DEPTHJSを拡張機能として読み込む
11. DEPTHJS の中の「developer-api」フォルダの中にある「BasicDemo.html」を実行してみて動作を確認する

自分はMacのChromeでプラグインが動作するところまでは確認できましたが、Kinectを認識させてブラウザ上にセンサーデータを読み込ませるところはできていないです。

そこはまだ調査中・・・。

その他

調査をしていてでてきた情報をリストにしておきます。やはり、日本語の情報をほとんど見つけられず・・・。詳細は調査中です。

ZigJS

• Zigfu - Kinect Development in HTML, Unity3D and Flash

• Tutorials、Browser Plugin、JavaScript

KinectJS

• 人体モーションキャプチャのキネクトからウェブアプリを操作できるようにする「KinectJS」 :: dotHTML5

• KinectJS - HTML5 goes motion

いろいろ

• Kinect and HTML5 using WebSockets and Canvas | Vangos Pterneas 、

  LightBuzz/Kinect-HTML5 · GitHub

• Accessing the kinect in javascript through websockets - Wouter Verweirder

• A depthcam? A webkinect? Introducing a new kind of webcam at George MacKerron: code blog

 最後に

この続きとして、
実際にブラウザ上でセンサー情報を取得して、Javascriptで利用できた、
という内容が次の記事で書ければ、と思ってます。

ブラウザで音を扱う： Web Audio API（※2013/12/29・30 追記あり）

この記事は HTML5 Advent Calendar 2013 - Adventar の8日目の記事になります。

はじめに

先日、 HTML5 Conference 2013 に参加してきました。

面白く勉強になる話がたくさんあったのですが、その中で、今まで気になりつつも手をだしてなかったオーディオ周りの話をとりあげてみようと思います。

まず、参考にさせていただく資料は先日のカンファレンスで発表のあった Web Audio API に関する下記のものです。

　Practical Web Audio API Programming

ステップ１： とりあえず動作させる環境を用意する（Firefoxのスクラッチパッドを利用）

「ちょっと試してみたいな」というだけなのに html や Javascript のファイルを準備して、というのが面倒なので「気軽に試す方法はないか」と思い（そしてご覧いただいている皆さまがすぐに試せるように）、これまた先日のカンファレンスで見かけたネタを使おうと思います。

そのネタを見たのはこちらの 真面目なアニメーション (html5j 2013, Web Animations) というセッションのデモでした。

さて、使うのはFirefoxに標準で付属しているScratchpad（スクラッチパッド）です。

使い方は以下の記事などをご覧いただくのが分かりやすいかと思います。

とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 - YATのBLOG

以後、このスクラッチパッドにソースコードを貼り付けて、実行してみます。

ステップ２： シンプルな音を少しの時間だしてみる

では実際に 資料の26ページ目 を参照しつつソースコードを書いてみます。

下記のソースコードをスクラッチパッドに貼り付けて実行してみました（※注： 少しの間、音がでます！）。

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす（矩形波、デフォルトの周波 ...

参照した資料との相違点があり、具体的には下記が異なります。

•  1行目： Mac用 Firefox 25 で動作させるために、ベンダープレフィックスを削除して webkitAudioContext → AudioContext としました（ 資料の44ページに記載されている話です ）。
• 9行目： 元のソースコードは音を鳴らし続ける処理であったため、少ししてから音を停止させるための処理を1行追加しました。

上記を試してみると、わずかな時間、音が鳴りました。

※2013/12/29 追記

タイプ指定を文字で行う必要があるようで、3行目を「osc.type = 1;」としていたのを「osc.type = square;」と修正しました（これ以降のソースコードも同様です）。

ステップ３： 音の高さを変えてみる

次に音の高さを変えてみます。先ほどのソースコードに周波数を変更する行（下記の4行目）を加えてみました。

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす（矩形波、周波数 500H ...

先ほどより、音の高さが低くなりました。

ステップ４： 複数の音を連続でだしてみる

異なる高さの3つの音を連続でだしてみます。

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす（矩形波、3つの音を連続で ...

ステップ５： メロディを奏でてみる

最後に上記で試したことをもとに、自分が指定したメロディを演奏するものを作ってみます。

Mac用 Firefox 25.0.1 のスクラッチパッドで音を鳴らす （矩形波、メロディを奏でる）

最後に

初めて Web Audio API に実際に触れてみて、やってみたいことがさらに色々でてきました。

まだ、音源となるファイルを使った処理や、マイク入力を利用したものなど、面白そうなものが試せてないので、少しずつ試していきたいと思います。

※ 2013/12/29 追記

その後、Webの情報を見ていて「start/stopを大量にセットしておくのは良くない」という話があったため、一定数（サンプルでは4つ）の予約を一定時間ごとに繰り返す、という処理に変更してみました。

これがベストなのかは不明ですが・・・。

Mac用 Firefox 26、Chrome 31 で音を鳴らす （メロディを奏でる〜修正版）

修正版は、スクラッチパッド上で動かすためのコードではなく、FirefoxとChromeで動作するHTMLファイルにしてみました。