Yamasuke 日記

Yamasukeの日記です。コンピュータソフトウェアに関する記事を投稿します。明日から試してみたくなるような+1の記事を心がけます。

CHIRIMENについて

CHIRIMEN

2015 年の Advent Calendar の記事です。

www.adventar.org

何を書こうかいろいろと迷ったのですが、最近ちょこちょこと活動している CHIRIMEN について書こうと思います。

と、その前に、つい先日、 Mozilla さんからちょっとした発表があり、何かとざわざわ?しております。

blog.mozilla.org

とは言え、開発は中止してないですし、

Mozilla としては

We will explore and prototype new use cases in the world of connected devices as an open source project with a clear focus on the user benefit and experience.

という具合で、 connected な device の新しい使い方について注力してくとのことです(意訳)。

connected な device って何かはよくわかりませんが、そのうち色々と出てくると思います。

そんな前置きで始まるのですが、実は日本のコミュニティ( Mozilla Factory )として、 Firefox OS を活用したconnected な device ? を実は独自に開発中( 2015年 12月現在 )な状況だったりします。

それがタイトルにあります CHIRIMEN ( ちりめん ) です。

CHIRIMEN って?

CHIRIMEN ってなんなんでしょうか。

MozOpenHard

Web サイトの言葉を借りると、

Make Real Things with Browser Technologies CHIRIMEN Board is designed for Web developers to MAKE Real things that are connected to the Web via Browser technologies.

Easy Way to Make FirefoxOS 2.0 (or later) is installed, and CHIRIMEN simply extends GPIO/I2C WebAPIs to control devices. Web developers maintain own ordinary development style.

ブラウザのテクノロジーを利用して Real Things を Make できる (表現が正しいかわかりませんが)組み込み向けのボードになります。 よくわからない書き方していますが、要は HTML / CSS / JS から ボードに繋いだ GPIO(など) を操作出来るってことですね。

MDN (Mozilla Developer Network) にもページがあります。 https://developer.mozilla.org/ja/Firefox_OS/Board_guide/CHIRIMEN

A Community called "MozOpenHard Prject" of Mozilla Factory is developing a powerful B2G(Firefox OS) based developer board and WebAPIs for hardware(I2C and GPIO) control. The environment which contain both hardware and sotfware is called CHIRIMEN. It is under development and is not yet ready for purchase for now.

今の状況

まだ Web サイトやMDNの記載も少なく、 " under development" といった記載もあることから、開発中な状況がうかがえます。

色々な場所で議論がされていますが、主な場所としては Facebook 上となりますが、

https://www.facebook.com/groups/mozopenhard/ ここで全体の話が主にされ、

このslackでボードの開発に関するリアルタイムな会話がなされています。 Slack

ボード上のソフトウェアの話などもこのslackで会話されており、以下のリンクから join できます。

MozOpenHard Slack invitation form

他にも最近だと、新しい FB のグループが作成されています。

https://www.facebook.com/groups/154111731613195/

趣旨は

WoT デバイスをより簡単に作るための導入ツールキットの実現を目指すグループです。 ウェブデベロッパーはもちろん、初心者や大学、専門学校などの教育用途としても活用できないものかと考えています。 今、考えているものとしては、ハードウェアの制御を部分を極力隠して、なるべく現在のウェブページの DOM 操作部分だけを意識して開発でき> るものです。例としては、CSS でハードウェアを制御するなどです。 また、ツールキットなので、どんなセンサーやアクチュエータをサポートできれば嬉しいかなど、是非議論できればと思います。

とのことで、 赤塚さんが先導し動かれています。

https://www.facebook.com/groups/154111731613195/

Facebook ということで若干ハードルはありますが、興味のある方はぜひとも参加してみてください。

今のCHIRIMENの開発状況ですが、OS 面 と ソフトウェア(アプリ面)、ハード面でそれぞれ開発が進んでいます。 まず OS ですが、 もともと FxOS v2.2 で動いていましたが、最新バージョンとなる v2.5 向けのポーティングが現在進行中です。

github.com

アプリ面では、先のFBのページにもありましたが、 ハードウェアを簡単に操作できるように議論をしつつ、 GPIO や I2C を利用するための Web API の仕様についても議論が進められています。

他にもハード面では新しいエクステンション? の追加のための検討も進んでいます。 あまりハードに明るくないのでよくわからない点もあるのですが、 Arduinoや Tessel などのモジュールを活用できるように色々と議論が進んでいます。

https://github.com/MozOpenHard/CHIRIMEN/issues

色々とおもしろことが進んでおり、いまはまだ開発中ですが、来年には Mozilla が考える Connected な device の一つ(中心)として、 CHIRIMEN が利用されていく日も遠くないかもしれません。

何が困っているの?

困っていることがたくさんあるみたいです。

OS 面での対応、ソフトウェア面での対応、ハード面での対応はもちろんですが、周辺のドキュメントも足りませんし、前にすすめるための色々な議論も必要です。

また、実際に使ってみてのバグ出しも足りませんし、全体的に足りるために色々なことが足りてない状況です。

色々な人がたくさん集まれば、みなさんでより前に進めて、より良く、より使いやすく、より議論を活発にできると思いますので、ぜひとも CHIRIMEN のコミュニティに参加をお願いします。

最後は少し尻切れトンボになりましたが、ひきつづき Advento Calendar をお楽しみください。

www.adventar.org

www.adventar.org

SoundJSでの音制御

再生制御

SoundJSで簡単な再生制御を試してみた。

ループ再生

単純に再生する場合はcreatejs.Sound.play()で再生できる。 これに引数を与えてやることでループ再生が可能。"loop:-1"を指定するとループ再生が可能となる。 また、他にも再生開始位置の指定、音量の設定などあり。

function playSoundLoad(event) {
    // 再生対象のサウンドファイルをidで指定
    soundInstance = createjs.Sound.play(event.item.id, {loop:-1});
    displayStatus.innerHTML = "Playing source: " + event.item.src;
}

一時停止

一時停止pause(), 再開resume() ロードしたサウンドファイルのインスタンス( soundeInstance )配下に存在。 soundeInsstace.pause(), soundInstance.resume() でOK。

  function pause() {
    soundInstance.pause();
    audioStatus = 'pause';
    audioControl.value = "play";
  };

  function play() {
    soundInstance.resume();
    audioStatus = 'playing';
    audioControl.value = "pause";
  };

  function handleEvent(aEvent) {
    var type = aEvent.type;
    switch (type) {
      case 'click':
        if (audioStatus === 'playing') {
          pause();
        } else if (audioStatus === 'pause') {
          play();
        }
        break;
    }
  };

audioControlとかはこんな感じで定義

  var audioControl;
  var audioStatus;

  audioControl = document.getElementById("audioControl");
  audioControl.value = "Loading";
  audioStatus = "Loading";

できたー

f:id:namaranran:20150318162330j:plain f:id:namaranran:20150318162331j:plain

SoundJSのAPI

前回に引き続き SoundJSについて調べてみる。

SoundJSのAPIについて

http://createjs.com/Docs/SoundJS/modules/SoundJS.html

Soundクラスをメインとして使用。 このクラスでは、

  • Pluginの使用
  • サウンドファイルの登録
  • サウンドの再生、作成
    (作成?エフェクトをかけられるということ?)
  • マスタボリュームの変更、ミュート、停止などのサウンド制御

が実行可能。

サウンド制御 * サウンドの一時停止、再開、シーク、停止 * 音量制御、ミュート、パン( スピーカーの左右どちらにずらすかということの模様 )

Soundクラスの使用例

 createjs.Sound.alternateExtensions = ["mp3"];
 createjs.Sound.on("fileload", this.loadHandler, this);
 createjs.Sound.registerSound("path/to/mySound.ogg", "sound");
 function loadHandler(event) {
     // This is fired for each sound that is registered.
     var instance = createjs.Sound.play("sound");  // play using id.  Could also use full sourcepath or event.src.
     instance.on("complete", this.handleComplete, this);
     instance.volume = 0.5;
 }

使用するブラウザがサポートする機能にあわせて自動的に、プラグイン(WebAudio, HTMLAudoiElemet, Flash)を切り替えてくれる。開発者は意識せずに使用可能。

WebAudioのようにフィルタかけたりとか、複数音声のフェードは出来るのか。。。? http://www.html5rocks.com/ja/tutorials/webaudio/intro/

API一覧

Soundクラス

http://createjs.com/Docs/SoundJS/classes/Sound.html

API一覧
addEventListener createInstance dispatchEvent
getCapabilities getCapability getMute
getVolume hasEventListener initializeDefaultPlugins
isReady loadComplete off
on play registerManifest|registerPlugins
registerSound registerSounds removeAllEventListeners
removeAllSounds removeEventListener removeSound
removeSounds setMute setVolume
stop toString willTrigger

基本的な操作が含まれている。

これだけみると、フィルタとかはかけられなさそう。 基本的な機能をラッピングして、ブラウザ差分(動作させるブラウザがサポートしているサウンド制御機能)を意識せずに使えますっというのが、メリットぽい。

WebFitlerのプラグインにはフィルタとか含まれるのか?

プラグインの使い方。registerPluginsを使用。

createjs.FlashAudioPlugin.swfPath = "../src/soundjs/flashaudio/";
createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashAudioPlugin]);

雰囲気的にプラグインを読み込むことで拡張が可能な感じ。

WebAudio Plugin

http://createjs.com/Docs/SoundJS/classes/WebAudioPlugin.html

API一覧
create getVolume isPreloadComplete
isPreloadStarted isSupported playEmptySound
preload register removeAllSounds
removeSound setMute setVolume

WebAudio的な機能はなし。 あくまでも再生制御がメインの模様。

サポートしている音声ファイル形式

※SoundJSでは拡張子で、ブラウザではコーデックについて言及されていて、混在しているのでわかりづらい。。。

https://github.com/CreateJS/SoundJS/blob/master/src/soundjs/Sound.js#L333

実装によると

s.SUPPORTED_EXTENSIONS = ["mp3", "ogg", "mpeg", "wav", "m4a", "mp4", "aiff", "wma", "mid"];

mp3, ogg, mpeg, wav, m4a, mp4, aiff, wma, mid らしい。 恐らくファイルの拡張子

一方、< audio >タグで再生できるのは mp3, ogg, wav, aac, WebM, ogg plus, WebM plus こちらは拡張子ではなくエンコード形式。

ライブラリ側とブラウザ側で対応がちぐはぐな感じとなっている。 ※とは言え、ブラウザでサポートしていないものが再生出来るのか?まさかライブラリ側でソフトウェアデコードしてる??

mp3, oggを使っておけば安心か。。。

引き続きサンプルコードを見てみる。

SoundJSのメモ

SoundJSの使用メモ

f:id:namaranran:20150309172509p:plain

FxOS上で音を再生するには < audio >タグを使う。サウンド系に特化したライブラリを調べてみたところSoundJSというものがあることがわかった。

他にも色々とありそうだが、SoundJSはCreateJSと呼ばれるライブラリ郡の一部で、他にも画面描画を行うEaselJS, TweenJS,ファイルのプリロードが可能なPreloadJSがある。

マルチプラットフォーム、MITライセンス、商用でも無償で利用可なので、使用するには自由度が高い。

ライブラリ バージョン
EaselJS 0.8.0
TweenJS 0.6.0
SoundJS 0.6.0
PreloadJS 0.6.0

http://code.createjs.com/

バージョンが1.0.0版未満。他のライブラリも含めた一般的な感覚からすると、正式版(1.0.0版)までに変更が発生しそう。。。

鳴音サンプル

鳴らすだけの単純なサンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
    <script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
    <script>
      var soundID = "Thunder";
      function loadSound () {
        createjs.Sound.registerSound("assets/Thunder.ogg", soundID);
      }
      function playSound () {
        createjs.Sound.play(soundID);
      }
    </script>
  </head>
  <h1> SoundJS Test </h1>
  <body onload="loadSound();">
    <button onclick="playSound();" class="playSound">Play Sound</button>
  </body>
</html>

f:id:namaranran:20150309171740p:plain

※FxOSではCSPの関係で、privilegedの権限ならhtml内に直接scriptは書けない。動作させるならばWeb権限の必要あり。

PreloadJSと共に使うことで、実行環境を特に意識せずに単純に記載することができるので、使いやすそう。

音声ファイル含めて下記にアップ済み。

https://github.com/namaranran/soundjs_sandbox/tree/master/soundjs_sample

※音声ファイルはsoundJSのチュートリアルから拝借したやつを使用。

チュートリアル

http://createjs.com/Learn

CreateJSメモ

チラシの裏的なメモ

雑多です。。。

CreateJSでできること

http://www.adobe.com/jp/devnet/edge/articles/createjs_for_asdeveloper01.html

  • HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート。複数JavaScriptライブラリで構成されている
  • 以下で構成
    • EaselJS
      描画・アニメーションなどの基本的な事を実施可能。中心的なライブラリ。
    • TweenJS
      名前そのままで、トゥイーンアニメーションの設定が可能なライブラリ。Flashだと、GUIで設定できていたけど、JSでどうやって設定するのか・・・
    • SoundJS
      動作環境を意識せずに簡単に音の再生・停止などの操作が出来るぽい。
    • PreloadJS
      音楽・画像ファイルの読み込み用ヘルパクラス。
  • 開発しているのはFlashの中の人
    だからFlashと同じ用語・機能があるのか??
    • FlashからToolkitを利用してCreateJSでを使ったHTML/JS/CSSのコードを吐き出すことが出来るらしい
  • MITライセンス
    自由に使って良くて、コード公開しなくていいけど、品質保証しないよ
  • ライブラリは単体から動作が可能
  • EaselJSがVersion.0.8.0でほかは0.6.0。まだ正式版じゃない雰囲気。
  • WebGL対応しているのかヌルヌル動く。
    ただし、描画系においてはFrefox OSで動かないサンプルもあるが・・・
  • Firefox OSでSoundsJS, PreloadJSは両方共OK。

デモ

Fx0で動作を見てみると、グラフィック系のデモの中には小気味良く滑らかに動くものが複数ある。

公式 http://createjs.com/Demos/TweenJS/Tween_Circles

ICSという会社 http://www.ics-web.jp/demos/130215_createjs_blurs/

メモ

  • 環境音再生アプリを作りたい、SoundsJSで実現可能か
  • エフェクトもかけたい

カスタムビルドしたFirefox OSシミュレータの使い方 (その2)

f:id:namaranran:20141219224639j:plain

カスタムビルドの方法

MDNやFirefox OSのドキュメントをみんなで翻訳! Advent Calendar 2014の12/17向けの記事です。

シミュレータ記事その2です( その4位まで行きそうな。。。)。

はじめに

こんにちは、Yamasukeです。

前回の記事でシミュレータのカスタムビルドのMDNの翻訳+紹介をしました。 その後、記載内容通りに実際にビルドしてみたのですが、ビルドが失敗してうまく動作しませんでした。 いろいろやって、MLではなししてみたりして解決し、MDNの元記事も正しい内容に更新+日本語版も更新したので、その結果踏まえて記事におこしました。

翻訳したページはこちら。 https://developer.mozilla.org/ja/Firefox_OS/Running_custom_builds_in_the_App_Manager

MDNにちょいちょいあるのですが、書いてあることがやっぱり正しいとは限らないので、実際に試してダメなら、コードみて頑張るかMozillaのMLなりIRCで問い合わせをしてみるのがベストかなーと思います。

今回は、ビルドの正しい方法と、実際に記事が間違ってたりした場合にどこに問い合わせるのかのトラブルシューティングを紹介したいと思います。

ビルドの正しい方法

MDNのここを参考にして下さい。

元の英語で記載された手順ががシンプルだったので、そのままですが、細かな手順を以下に端折りつつ記載します。 ※ビルド環境構築が必要なので、gitが使える前提で要点のみ記載しています。

  1. gaiaをcloneしてくる
  2. オプション:cloneしたgaiaで自分が作りたいbranchのversionのものをチェックアウトする
  3. mozilla-centralをcloneしてくる(mercurialなので、gitで取得したい人はこちらのGithub)
  4. オプション:gaiaと同様に作成したbranchにあわせる。gaiaとversionはあわせておいてください。
  5. 3で取得したmozilla-centralのディレクトリ直下にmozconfig( もしくは .mozconfig )というファイルを作成し以下を記載。
ac_add_options --enable-application=b2g
export FXOS_SIMULATOR=1
export GAIADIR=/path/to/gaia/dir   # 1で取得したgaiaのディレクトリまでのパス
  1. 以下を実行

    $ ./mach build && ./mach package

これで配下の"obj-xxxx環境によって異なるxxxx/dist"にアドオンが生成されます。

MDNに間違い?と思われる事を発見した際の対応

手順通りやっても動かないなどがあった場合、メーリングリストIRCで問い合わせると親切な人から返事が返ってきたりします。

まずメーリングリストですが、こちらにMozillaのML一覧があります。
ご覧のとおり、大量にあって探すのが大変なのですが、Firefox OSの場合は、dev-b2gかdev-gaiaに問い合わせをすれば大体誰かが答えてくれます。
dev-b2gはGecko含めた全般向けのMLで、dev-gaiaは名前の通りgaia部分についてがメインに流れています。
もちろん英語で出さなければいけませんが、直接開発者とやりとりが行えますので何かおかしな点があればメールを出してみることをおすすめします。

次に、IRCがあり、Mozillaの開発者の方々はこれでやりとりをしており、一般の人からの質問もこれで問い合わせが出来ます。 https://wiki.mozilla.org/IRC

IRCは時差の関係もあるので、アメリカ西海岸との時差を考慮して聞いてみてください。 ※質問しても誰も答えてくれないとかよくありますので。。。

まとめ

アドベントカレンダーに便乗して翻訳記事2本目を上げました。
Firefox OSオープンソースの為、有志の人たちと一緒につくっており、周辺の記事( MDN,Mozilla Wiki )も間違いなどがあったりします。
単純に使うだけではなくて、使ってみておかしい場合に問い合わせをして、
おかしな点を改善するためにまずはメールで聞いてみたりしてみてはいかがでしょうか。

調べたり、MDNの記事を翻訳したり、書いたりする以外にも、
機能そのもののバグを報告するとか、MDNの記事の誤りらしきものをメールで聞いてみるとかするだけでも、世界のどこかの誰かが幸せになれます。

ご質問等ございましたら、本記事かTwitter にてお気軽にお声がけください。

それではまたー。

カスタムビルドしたFirefox OSシミュレータの使い方 (その1)

カスタムビルドのススメ

MDNやFirefox OSのドキュメントをみんなで翻訳! Advent Calendar 2014の12/11向けの記事です。

続きをこちらに書きました。

はじめに

こんにちは、Yamasukeです。

みなさん、ビルドしてますか?
端末に焼いたり、Emulator( QEMU )で起動したりしてますでしょうか?

ビルドした端末や、Emulatorを他の人に使ってもらったりするのにめんどくさいですよね。
特にデザイナさんとか、企画側の方々に使ってもらう際に環境を作るのに少し手間がかかります。

みなさんご存知の通りFirefox ブラウザには Firefox OS のシミュレータ(↑で記載しているEmulatorとは別です)を起動することができて、Firefox のブラウザをインストールするだけで使えるので非常に簡単で便利です。

特に少し使ってみたい方々にはうってつけな便利さがあります。
※全然関係ありませんが、うってつけって語源は何なんでしょうね・・・

Mozillaさんから各バージョンのシミュレータが提供されておりますが、先日 オムロンさんから公開された iwnn は含まれていませんし、言語設定では日本語はありません・・・

f:id:namaranran:20141209232227p:plain

最新のシミュレータでは簡単にカスタマイズしたシミュレータを配布出来るようになっています。
今回はMDNのカスタマイズビルドする方法のページを訳しましたので、どうぞ見てみてください。

https://developer.mozilla.org/ja/Firefox_OS/Running_custom_builds_in_the_App_Manager

※上記訳した後に、実際に試してみました。Gaiaはうまく設定できるのですが、Geckoのバイナリ指定は↑の元々の英語のドキュメントでは記載が不足している模様です。どこをどのように設定するのか言葉足らず・・・
 調べてみて、わかり次第元の文章も修正しておきます(´・ω・`)

おわりに

読んでいただいてありがとうございます。
今回は短い記事になりましたが、上記のMDNのページに従うことで簡単にカスタムビルドされたシミュレータが配布することができます。

これから、暇な開発者たち先人の開発者たちがきっとおもしろおかしなシミュレータを配布してくれるはずです。
デザイナさん、企画やさんなど「いちいちビルドするのもなぁ」とか、「配布されてるシミュレータは英語のしかないし・・・」など思ってらっしゃった方々も気軽に色々なビルドを動かすことができるようになる(はず?)

次回以降、カスタムビルドしたシミュレータ環境の配布や、カスタム方法の紹介などの記事を書きたいと思います。

ご質問等ございましたら、本記事かTwitter にてお気軽にお声がけください。

それではまたー。