原文: Split console, pretty-print minified JS and more – Firefox Developer Tools Episode 28 on December 17, 2013 by Jeff Griffiths and Robert Nyman [Editor]

休暇までに間に合わせて、Firefox 開発ツールチームは休暇中のプロジェクトでハックを楽しむための、すばらしい新たなサプライズを用意しました!  かなり長いリストですので、さっそく見ていきましょう。

アプリマネージャ

アプリマネージャの開発は Devtools チームおよび Firefox 28 で優先的に進められており、多くの小さな修正や改善に加えて、モバイル開発を支援する主要な新機能を 2 つ追加しました。これら 2 つの機能は、付加機能としてのマニフェストエディタと組み込みツールボックスで構成されます。

開発者はマニフェストエディタで、自身のアプリのマニフェストを直接編集できます。このエディタを使用して、アプリの manifest.webapp のフィールドを追加・編集・削除およびディスクへの保存が可能です。この機能によりユーザはアプリケーションのデバッグ中や改良中にツールから離れることがなくなるため、開発者に統合されたエクスペリエンスをもたらします。

アプリマネージャのさらなる新機能が、組み込みツールボックスです。アプリをデバッグするとき (シミュレータと実機上の両方) にアプリマネージャ内で、アプリのアイコンで容易に識別できる縦の ’タブ’ で分けられたツールボックスが起動します:

Web コンソール

Web コンソールでもっとも大きな変更点は、‘スプリットコンソール’ と呼んでいる機能です。Web コンソールを他のツールから呼び出すことが可能になりました。スプリットコンソールモードは簡単に使えます。何らかの他のツールで作業を行っていてコンソールにアクセスする必要があるときは、以下のスクリーンキャストでご覧いただけるように、単に Escape キーを押下するかスプリットコンソールのトグルボタンをクリックしてください:

しかし、コンソールの改良点はこれだけではありません。スプリットコンソールに加えて、私たちは以下の変更も施しました:

• CSS の警告をデフォルトで無効にしました。CSS の警告は、ページを読み込む際にコンソールへ数百ものメッセージを追加することがしばしばあります。
• コンソールが、現在デバッガが存在するスコープ向けのオートコンプリート提案を提供するようになりました。
• メッセージのタイムスタンプの有効/無効を切り替え可能になりました (デフォルトは無効です)。
• console API に、console.exception() と console.assert() を追加しました。
• コンソール用の Dark テーマを追加しました。

デバッガ

デバッガで私たちは、開発者が求めていた主要な機能を 2 つ追加しました。まずは、ミニファイされた JS ファイルの整形表示機能です:

この機能は、JavaScript をミニファイする場合やリモートサイトから提供されたミニファイ済みのライブラリでステップ実行を行う必要がある場合に特に役立ちます。よりよく整形されたファイルを得るには、ミニフィケーションボタン (上図) をクリックしてください。

デバッガに追加したもうひとつの機能が、デバッグ中の変数の値の調査です。どの変数でも、変数名の上にマウスポインタを載せるかクリックすることで、現在の値を表示するポップアップが現れます:

ポップアップでは上図のように真偽値のようなシンプルな型だけでなく、オブジェクトや DOM ノードの調査も可能です:

インスペクタ

Firefox 27 でインスペクタにさまざまなツールチップを追加したことに続いて、さらにいくつかの追加機能を搭載しました:

• ルールビューでカラーピッカーのツールチップ
• Dark テーマおよび Light テーマにより適応するように、ツールチップのスタイルを更新
• フィードバックを基に、ツールチップの表示のタイムアウトを調整

以下は、カラーピッカーのツールチップをどのように表示するかを示すスクリーンショットです:

まとめ

これは膨大なリストになりますが、特に伝えておきたい変更点が 2 つあります:

• ネットワークモニタに Clear ボタンがつきました。これは、Web API を大量に使用するアプリを作成する開発者が特に使用するでしょう。
  
• アドオンやプラットフォームのハックを行う方向けの特典として、ブラウザデバッガの機能拡張と、ブラウザツールボックスへの名称変更を行いました。ツールボックスを起動すると、デバッガだけでなくコンソール、インスペクタ、スタイルエディタ、プロファイラ、ネットワークモニタ、スクラッチパッドといったツールを完備しています:
  

原文：Introducing the Whiteboard Drum – WebRTC and Web Audio API magic on November 14, 2013 at 12:18 am, by Tatsuya Shinyagaito and Robert Nyman [Editor]

ブラウザの機能は急速に拡大し、単に文書を “ブラウズ” するだけのものではなくなってきています。そして最近、Web Audio APIによって、ついにWebブラウザでオーディオ処理ができるようになりました。それは本格的な音楽アプリケーションを構築できるほどパワフルなものです。

そしてそれだけではなく、他のAPIと組み合わせて使用すると、また非常に面白い応用が可能になります。その１つに、ローカルPCのマイク/カメラデバイスからオーディオやビデオ信号を取り込む事ができるgetUserMedia()があります。Whiteboard Drum (GitHub上のソース)は、Web Audio APIとgetUserMedia()を使った面白い音楽アプリケーションの一例です。

私は10月に東京で開催されたWeb Music ハッカソンでWhiteboard Drum (GitHub上のソース) を紹介しました。このハッカソンは Web Audio API と Web MIDI APIをテーマにしたエキサイティングなイベントです。色々な機器がブラウザと強調動作する事で、現実世界への新しいインターフェースを作り出す事ができます。

私はこれはWebベースの音楽アプリケーション、特にWeb Audio API とその他のAPIの組み合わせに対する新しい可能性を示唆するものだと考えています。以下では、Whiteboard Drum がどうやって動作しているのか、コードを交えながら説明して行きたいと思います。

概要

まずは、ハッカソンでの写真をご覧ください：

そして、デモビデオはこちらにあります：

見ていただければわかるように、Whiteboard Drum はホワイトボード上に描かれたマトリックス・パターンに従ってリズムを演奏します。ホワイトボードには何も仕掛けはなく、Webカメラが向けられているだけです。このデモではマグネットを使っていますが、マーカーペンでパターンを書き込んでも構いません。マトリックスのそれぞれの行が、シンバル、ハイハット、スネアドラム、バスドラムというそれぞれの楽器の表していて、それぞれのカラムは時間のステップをを表しています。この実装では、シーケンスは8ステップになっています。色が青いマス目は通常の音、赤い部分はアクセントが付いた音になります。

処理のフローは次の通りです：

1. ホワイトボードの画像がWebカメラでキャプチャーされます
2. マトリックス・パターンが解析されます
3. このパターンがドラム音のジェネレータに送られ、リズムが再生されます

ブラウザの最新の技術を使用してはいますが、それぞれの処理はそれほど難しいものではありません。幾つかのキーポイントを以下に説明します。

getUserMedia()によるイメージ・キャプチャー

getUserMedia() はWebカメラ/マイクからビデオ/オーディオを取り込む機能です。これはWebRTCの一部であり、機能としてはかなり新しいものです。Webカメラからのイメージの取り込みではユーザーの許可を得る事が必要になりますので、注意が必要です。単にWebカメラの画像をスクリーン上に出すだけならば非常に簡単にできますが、画像の生のピクセルデータに対して JavaScript で処理を行いたい場合、canvas および createImageData()関数が必要になります。

このアプリケーションでは、ピクセル毎の処理が後で必要になるため、取り込む画像の解像度を400 x 200pxに落としています。これはつまり、リズムパターンの各マス目が50 x 50pxになる事を意味しています。

注：最近のラップトップ/ノートブックPCは大抵Webカメラを内蔵しているのですが、Whiteboard Drumでは、カメラは正確にホワイトボード上のパターンを捉える必要がありますので、外部のカメラを準備した方が良いでしょう。なお、複数のデバイス/カメラが接続されている場合の入力選択の手段は今のところ標準化されていません。Firefox では接続時の許可ダイアログで、またGoogle Chromeの場合はセットアップ画面の”コンテンツ設定”のオプションで選択が可能です。

Webカメラのビデオを取得する

この部分はスクリーンに表示せずに処理したいので、まず、videoを非表示にしています：

<video id="video" style="display:none"></video>

そして、ビデオを取り込みます：

video = document.getElementById("video");
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia;
navigator.getUserMedia({"video":true},
    function(stream) {
        video.src= window.URL.createObjectURL(stream);
        video.play();
    },
    function(err) {
        alert("Camera Error");
    });

キャプチャーおよびピクセルの取得

canvasも非表示にします：

<canvas id="capture" width=400 height=200 style="display:none"></canvas>

そしてビデオデータをcanvas上にキャプチャーします：

function Capture() {
    ctxcapture.drawImage(video,0,0,400,200);
    imgdatcapture=ctxcapture.getImageData(0,0,400,200);
}

このWebカメラからの映像は周期的にcanvas上に描画されます。

画像の解析

次に400×200ピクセルの値をgetImageData()で取得し、解析フェーズでは、400 x 200 の画像から 1マスを50 x 50 pxとして、8 x 4 のマトリックス・パターンを作り出します。入力となるデータはimgdatcapture.data配列にRGBAで1ピクセル当たり4要素の形式で入っています。

var pixarray = imgdatcapture.data;
var step;
for(var x = 0; x < 8; ++x) {
    var px = x * 50;
    if(invert)
        step=7-x;
    else
        step=x;
    for(var y = 0; y < 4; ++y) {
        var py = y * 50;
        var lum = 0;
        var red = 0;
        for(var dx = 0; dx < 50; ++dx) {
            for(var dy = 0; dy < 50; ++dy) {
                var offset = ((py + dy) * 400 + px + dx)*4;
                lum += pixarray[offset] * 3 + pixarray[offset+1] * 6 + pixarray[offset+2];
                red += (pixarray[offset]-pixarray[offset+2]);
            }
        }
        if(lum < lumthresh) {
            if(red > redthresh)
                rhythmpat[step][y]=2;
            else
                rhythmpat[step][y]=1;
        }
        else
            rhythmpat[step][y]=0;
    }
}

これは単純に各マス目毎のループについて、ピクセル毎のループを回しているだけです。この実装では、「明度」と、「赤さ」について解析しています。もしマス目が「暗い」場合はそのマス目はアクティブになります。またマス目が「赤い」場合はアクセントが付きます。

「明度」の計算は単純化したマトリックスで R * 3 + G * 6 + B としていて、ピクセル値の10倍になります。つまり、各ピクセルについての計算値は0～2550の範囲です。また「赤さ」については R – B としていますがこれは赤か青かを判定するだけで良いために使用している実験的な値です。結果はrhythmpat配列に保存され、マス目に何もなければ0、青ならば1、赤ならば2となります。

Web Audio APIによる音の生成

Web Audio API は非常に新しい機能で、まだ全てのブラウザでサポートされている訳ではありません。Google Chrome / Safari / Webkit ベースの Opera / Firefox (25以上)でこのAPIがサポートされています。注: Firefox 25 は10月の終わりにリリースされた最新版です。

その他のブラウザ用としては、Flashにフォールバックするポリフィルの開発もしていますので、WAAPISim (GitHub) を参照ください。これにより Web Audio APIのほとんどの機能を Internet Explorerなどの非対応ブラウザ上で使えるようになります。

Web Audio API は大規模な仕様のものですが、このアプリケーションでは音の生成のために、それぞれの楽器に対応したそれぞれの音をロードし、正確な時間にそれをトリガーするというだけという Web Audio API のごく簡単な使い方をしています。最初にベンダープリフィックスに配慮しつつ、オーディオコンテキストの作成を行います。プリフィックスは現在、webkit かプリフィックス無しになります。

audioctx = new (window.AudioContext||window.webkitAudioContext)();

次にXMLHttpRequestを使って音をバッファにロードします。このケースでは、それぞれの楽器に対応した個別の音(bd.wav / sd.wav / hh.wav / cy.wav)がbuffers配列にロードされます。

var buffers = [];
var req = new XMLHttpRequest();
var loadidx = 0;
var files = [
    "samples/bd.wav",
    "samples/sd.wav",
    "samples/hh.wav",
    "samples/cy.wav"
];
function LoadBuffers() {
    req.open("GET", files[loadidx], true);
    req.responseType = "arraybuffer";
    req.onload = function() {
        if(req.response) {
            audioctx.decodeAudioData(req.response,function(b){
                buffers[loadidx]=b;
                if(++loadidx < files.length)
                    LoadBuffers();
            },function(){});
        }
    };
    req.send();
}

Web Audio API はノードを接続したルーティンググラフによって音を作り出します。Whiteboard Drumでは、AudioBufferSourceNodeとGainNodeによる単純なグラフを使用しています。AudioBufferSourceNodeはAudioBufferを再生し、(通常の「青」の場合)、直接destination(出力)に信号を流し、また(アクセント付の「赤」の場合)はGainNodeを通じてdestinationに接続されます。AudioBufferSourceNodeは一度だけしか使えませんので、トリガー毎に新しく作成されます。

アクセント付の音の出力ポイントとして、次のように GainNode を準備しています。

gain=audioctx.createGain();
    gain.gain.value=2;
    gain.connect(audioctx.destination);

そして、トリガーする関数は次のようになっています：

function Trigger(instrument,accent,when) {
    var src=audioctx.createBufferSource();
    src.buffer=buffers[instrument];
    if(accent)
        src.connect(gain);
    else
        src.connect(audioctx.destination);
    src.start(when);
}

さて、後必要な事は、リズムパターンに従ってを正確なタイミングで再生するだけです。このトリガーのタイミングを作り出すのは、setInterval() タイマーを使うのが簡単ですが、これはあまり推奨できません。CPUの負荷によってタイミングは簡単に乱されてしまいます。

正確なタイミングを維持するためには、Web Audio API が持っている時間の管理機構を使用します。それはつまり、上述のTrigger()関数における、whenパラメータの計算によります。

// console.log(nexttick-audioctx.currentTime);
while(nexttick - audioctx.currentTime < 0.3) {
    var p = rhythmpat[step];
    for(var i = 0; i < 4; ++i)
        Trigger(i, p, nexttick);
    if(++step >= 8)
        step = 0;
    nexttick += deltatick;
}

Whiteboard Drum では、このコードがコアの部分になります。nexttick は、次のステップの正確な時刻(秒)、audioctx.currentTime は正確な現在時刻(これも秒)となります。つまり、このルーチンは今後の300ミリ秒を先読みしています(nextticktime – currenttime < 0.3 の間、あらかじめトリガーしてしまいます)。
コメントされている console.log の行は、タイムマージンを出力します。このルーチンが周期的に呼ばれている間、この値がマイナスになるとタイミングが間に合っていない事を示します。

より詳しい解説については、A Tale of Two Clocks – Scheduling Web Audio with Precision に有用な文書があります。

UIについて

DAWやVSTプラグインなどの音楽制作ソフトウェアでは、特にUIが重要となっています。Webアプリケーションの場合はこれと同じにしなくてはならないと言う訳ではありませんが、似たようなやり方を取るのも良い方法です。これに適した、非常に便利なwebaudio-controls WebComponentライブラリがあり、ツマミやスライダーをHTMLタグ1つで定義する事ができます。

注： webaudio-controls は Polymer.js を使用していますが、まだ時として安定性に問題がある事があり、特に複雑なAPIと併用する際には稀に予想外の挙動を起こす場合があります。

今後の展開

これは既に面白いアプリケーションではありますが、まだ改善の余地があります。明らかにカメラの位置の調整をどうするかは問題です。解析フェーズで(何らかのマーカーを使って)位置の自動調整をしたり、適応型の色検出を行うなどもっとスマートなやり方も可能です。音の生成もまだ改善可能で、楽器を増やしたり、ステップを増やしたり、エフェクトを掛ける事もできます。

挑戦してみませんか?

Whiteboard Drum は http://www.g200kg.com/whiteboarddrum/ で、ソースコードは GitHub で公開しています。

是非触ってみてどんなリズムが作れるか試してみてください!

原文: Reintroducing the Firefox Developer Tools, part 2: the Scratchpad and the Style Editor on September 24, 2013 by Jason Weathersby, Will Bamberg and Robert Nyman [Editor]

本記事は Firefox 内蔵の開発ツールとその機能や現状に注目する、全 5 編のパート 2 です。現在できること、進歩、そして目指していることのすべてをお見せすることが目的です。

本シリーズの第 1 回では、Web コンソールと JavaScript デバッガについて説明しました。これら 2 つのツールは強力であり、また Web アプリケーションの調査や変更機能を提供しますが、アプリの構築やデバッグを行う際の開発者のエクスペリエンスをさらに高める、付加的ツールを利用できます。本記事では、スクラッチパッドとスタイルエディタを手短に紹介します。

初回の記事と同様に、機能のいくつかを説明する簡単なスクリーンキャストとと合わせて各ツールを紹介します。

スタイルエディタ

スタイルエディタは主に、現行アプリのコンテキスト内にあるスタイルシートの編集、デバッグ、新規作成を行うために使用します。スタイルエディタで施した変更点は、読み込み済みのページへ自動的に反映されます。カスケーディングスタイルシート (CSS) について詳しくない場合は、MDN の CSS ドキュメントを見るようにしてください。

スタイルエディタでは、エディタを使用して施した変更内容を保存できます。さらに、既存のスタイルシートをインポートして現行ページに適用したり、特定のスタイルシートを個別に無効化したりすることも可能です。またスタイルエディタは、調査中の要素向けのスタイルシートへ開発者がすばやくアクセスできるツールである、インスペクタと連携しています。以下のスクリーンキャストで、スタイルエディタの機能を紹介します。

スタイルエディタのより詳細な情報については、MDN のドキュメントをご覧ください。

スクラッチパッド

スクラッチパッドには多くの用途がありますが、要するに JavaScript のライブエディタおよびプロトタイピングのツールです。開発者はスクラッチパッドを使用して、現行ページ内のオブジェクト、変数、スクリプトにアクセスできます。さらに表示中のページのスコープで、エディタ内に完成した関数を記述してテストを実施できます。そして、これらの変更内容は現行アプリケーションに付加および保存できます。

外部の JavaScript ファイルを読み込んでテストを行うこともできます。単純にコードを実行する、コードを実行して返されたオブジェクトを調査する、コードを実行してその結果をスクラッチパッド内にコメントとして出力するといった、いくつかの実行方法を開発者は使用できます。以下のスクリーンキャストで、スクラッチパッドの機能をいくつか説明します。スクラッチパッドはスクリプトを、ページで読み込まれたスクリプトと同じコンテキストで実行することに注意してください。スクリーンキャストの例では、この機能を示すために jQuery ライブラリとカスタムスクリプトをいくつか使用しています。

スクラッチパッドのより詳細な情報については、MDN のドキュメントをご覧ください。

JavaScript についてあまり詳しくない場合は、言語や技術について学ぶための資料の包括的な一覧を載せた MDN のドキュメントを確認するようにしてください。

もっと知る

これらのスクリーンキャストでは、ツールの主要な機能について簡単に紹介しています。すべての開発ツールの詳しい情報は、MDN のツール関連ドキュメントで確認してください。

次回予告

次回の記事では、レスポンシブデザインビューや App Manager によるリモートデバッグといった、モバイルデザインの機能に注目します。今後の記事で詳しい説明を見たい機能についての提案は、コメント欄への投稿でお寄せください。

原文: Reintroducing the Firefox Developer Tools, part 1: the Web Console and the JavaScript Debugger on September 24, 2013 by Jason Weathersby, Will Bamberg and Robert Nyman [Editor]

本記事は Firefox 内蔵の開発ツールとその機能や現状に注目する、全 5 編のパート 1 です。現在できること、進歩、そして目指していることのすべてをお見せすることが目的です。

Firefox 4 で Web コンソールが登場しましたが、これは Firefox に内蔵された最初の新開発ツールです。それ以降、私たちは開発ツールにさらなる能力を追加しており、それらは現在幅広い役割を果たすとともに、デスクトップ版 Firefox、Firefox OS、Android 版 Firefox で Web アプリケーションのデバッグや分析に使用できるようになりました。

この記事は、Firefox 4 以降に開発ツールを得てきた様子を見ていくシリーズの第 1 回です。各ツールを簡単なスクリーンキャストで紹介して、その後に開発ツールのほとんどを知る助けになるであろう特定のワークフローパターンを説明する、2 つのスクリーンキャストで総括します。これらは、モバイル開発や CSS ベースのアプリケーションの変更およびデバッグなどといったシナリオを含みます。

第 1 回では、最新の Web コンソールと JavaScript デバッガを紹介します。

Web コンソール

Web コンソールは主に、現在読み込まれている Web ページに関する情報を表示するために使用します。その情報には HTML、CSS、JavaScript、セキュリティの警告やエラーがあります。さらにコンソールはネットワーク要求を表示して、それらが成功したか失敗したかを示します。警告やエラーを検出したときに、Web コンソールは問題を引き起こしたコードの行へのリンクも提供します。Web コンソールはたいてい、正常に動作しない Web アプリケーションのデバッグで最初に立ち寄るところです。

Web コンソールでは、ページのコンテキストで JavaScript を実行することも可能です。これは、ページで定義したオブジェクトの調査、ページのスコープ内で関数を実行、CSS セレクタを使用した特定の要素へのアクセスが可能ということです。以下のスクリーンキャストで、Web コンソールの機能の概要を説明します。

Screencast: Web Console

詳しくは、MDN の Web コンソールのドキュメントをご覧ください。

JavaScript デバッガ

JavaScript デバッガは、Web アプリケーションで使用している JavaScript のデバッグやリファインに使用します。デバッガはデスクトップ版 Firefox だけでなく、Firefox OS や Android 版 Firefox で実行しているコードのデバッグにも使用できます。これはウォッチ式、スコープ変数、ブレークポイント、条件式、ステップ実行、ステップオーバー、終端まで実行といった機能を提供する、フル機能のデバッガです。さらに、デバッガがアプリケーションの実行を停止しているときに、実行中の変数の値を変更できます。

以下のスクリーンキャストで、JavaScript デバッガの機能をいくつか説明します。

Screencast: JavaScript Debugger

JavaScript デバッガについて詳しくは、MDN のデバッガのドキュメントをご覧ください。

もっと知る

これらのスクリーンキャストでは、ツールの主要な機能について簡単に紹介しています。すべての開発ツールの詳しい情報は、MDN のツール関連ドキュメントで確認してください。

次回予告

本シリーズの次回は、スタイルエディタとスクラッチパッドについて掘り下げる予定です。詳しい説明を見たい機能についてのフィードバックは、コメント投稿でお寄せください。

原文: New Features in the Firefox Developer Tools: Episode 26 on September 26, 2013 by Paul Rouget and Robert Nyman [Editor]

Firefox 26 が Aurora リリースチャンネルに進展して、開発ツールの新機能について報告するときがきました。ここでは、もっともエキサイティングな機能をいくつか紹介します。

インスペクタ: 疑似要素のサポート

追加のノードを使用せずに要素のデザインで柔軟性を得るために、CSS 疑似要素 (例えば `:before/:after{content:””}`) がよく使用されます。インスペクタで、疑似要素に適用している規則を見ることが可能になりました。

デバッガ: キャッチされない例外でブレーク

デバッガは、キャッチされない例外で一時停止できるようになりました。これにより、予期せぬエラーのデバッグが容易になります。また開発者が try/catch ブロックで処理した大量の例外についてステップオーバーを実施しなくてもよいようになります。

Web コンソール: テキスト選択の改善

Web コンソールでは、テキスト選択が困難でした。このバグを修正するには、コンソールの出力エリアのコード全体を書き直すことが必要でした。これによりログのコピー/ペーストがとてもシンプルになりました。またまもなく登場する、改良されたコンソール出力機能の基礎になります。

全体的な UI の改良

開発ツールすべての UI でズームインやズームアウトが可能になりました。より大きなフォントが好みですか? それなら Ctrl + を押下してください。それとも小さいフォントですか? それなら Ctrl - を押下してください。(Mac OS X では Cmd です)

インスペクタの DOM ビューも改良しました。選択状態がわかりやすくなり、またノードの展開が容易になり、さらにとても長い属性を切り詰めるようになりました。

キーボードショートカットを改良しました: キーボードによるツールの制御が容易になりました。新たに多くのキーボードショートカットを作成して、他のブラウザと互換性があるようにしました。開発ツールで使用できるキーボードショートカットのすべてを、MDN に掲載しています。

さらなるおまけとして、URL プレビュー (リンク上にマウスポインタを載せたときにポップアップするバー) をツールボックスの上に移しました。Web コンソールの入力欄や他のツールに重なることはありません。

レスポンシブデザインビュー

レスポンシブデザインビューの改良点は 3 つあります:

• タッチイベントのシミュレーション (マウスイベントをタッチイベントに変換します)
• すばやくスクリーンショットを取得
• 精密なリサイズ。精密にリサイズするには、Ctrl を押しながらマウスを動かしてください。

ビデオ: Firefox – Responsive Design View – update

これらの新機能はいつ使えますか?

これらすべての機能などは、Firefox Aurora リリースチャンネルで使用できます。12 週後には、これらの新機能が Firefox の安定版に展開されます。

開発ツールに関するフィードバックがありますか? Twitter の @FirefoxDevTools または irc.mozilla.org の #devtools で知らせてください。

原文: “Web Audio API comes to Firefox” on July 9, 2013 by Ehsan Akhgari and Robert Nyman [Editor]

私たちは Web Audio API を Firefox に実装する作業をしばらくの間続けており、現在 Firefox Nightly および Firefox Aurora で API の基礎的なサポートを実現しました。Web Audio は音楽アプリケーション、ゲーム、さらには高度なオーディオ処理が必要なあらゆるアプリケーションを作成するために使用できる、いくつものすばらしい機能を提供します。

機能

機能の例を以下に挙げます:

• オーディオ再生中に正確なタイミングでイベントを発生させるためのスケジューリング。
• エコーやノイズキャンセリングなどの効果を作成するためのさまざまなオーディオフィルタ。
• 電子音楽を制作するための音声合成。
• ゲームで音源が景色の中を動くようなエフェクトをシミュレートする、3D ポジショナルサウンド。
• 外部入力 (WebRTC call やデバイスに接続したギターなど) から得た音声や、WebRTC call で他者に伝送する音声に効果を適用するための、WebRTC 向け統合機能。
• サウンドビジュアライザなどを作成するための、音声データの分析。

コードのサンプル

Web Audio で構築できることの、シンプルな例を以下に挙げます。あなたはゲームに取り組んでおり、プレイヤーがゲームの canvas をクリックするとすぐに銃を撃つ音を再生したいとしましょう。ネットワークの遅延やオーディオデコーダの遅延などに影響されないことを目的として、ゲームを読み込むプロセスの一部としてバッファへの音声をプリロードするため、あるいはクリックイベントを受けたときへ正確にスケジューリングするために Web Audio を使用できます。

より整ったサウンド効果を作成するため、マウスボタンを押している間はサウンドをさらにループする、またマウスボタンを押すのをやめたときにフェードアウト効果を与えることができます。以下のコード例で、これらを行う方法を示します:

// ネットワーク経由で音声ファイルを読み込む
var decodedBuffer;
var ctx = new AudioContext();
var xhr = new XMLHttpRequest();
xhr.open("GET", "gunshot.ogg", true);
xhr.responseType = "arraybuffer";
xhr.send();
xhr.onload = function() {
  // この時点で、xhr.response はエンコードされた gunshot.ogg のデータを持っています。
  // よって、まずは AudioBuffer へデコードを行いましょう。
  ctx.decodeAudioData(xhr.response, function onDecodeSuccess(buffer) {
    decodedBuffer = buffer;
  }, function onDecodeFailure() { alert('decode error!'); });
};

// ゲーム canvas の mousedown/mouseup ハンドラのセットアップ
canvas.addEventListener("mousedown", function onMouseDown() {
  var src = ctx.createBufferSource();
  src.buffer = decodedBuffer;                                      // デコード済みバッファを再生
  src.loop = true;                                                 // マウスが押されている間はループ再生
  var gain = ctx.createGain();                                     // マウスを離したときにフェードアウト効果を適用するため gain ノードを生成
  src.connect(gain);
  gain.connect(ctx.destination);
  canvas.src = src;                                                // 後で使用するため、ノードへの参照を保存
  canvas.gain = gain;
  src.start(0);                                                    // 直ちに再生を開始
}, false);
canvas.addEventListener("mouseup", function onMouseUp() {
  var src = canvas.src, gain = canvas.gain;
  src.stop(ctx.currentTime + 0.2);                                 // 200ms 後に再生を停止するよう設定
  gain.gain.setValueAtTime(1.0, ctx.currentTime);
  gain.gain.linearRampToValueAtTime(0.001, ctx.currentTime + 0.2); // 200ms 間フェードアウトを行うよう設定
}, false);

最初の WebAudio 実装と WebKit

Web Audio API は webkitAudioContext 接頭辞を使用して、Google Chrome で最初に実装されました。私たちは W3C の Audio Working Group で議論を行って、API の初期バージョンにあったいくつかの問題を修正しようとしました。一部では、この修正により webkitAudioContext をターゲットとしたコードに対する上位互換性を失わなければなりませんでした。

そのようなアプリケーションを標準 API に移行する方法のガイドがあります。また、API の変更点を自動的に処理する webkitAudioContext monkeypatch もあります。これは webkitAudioContext をターゲットにしたコードのいくつかを標準 API で動作させるのを支援できます。

Firefox の実装

Firefox では、標準 API を実装しました。あなたが Web 開発者で、Web で高度なオーディオアプリケーションを作成することに興味があるのでしたら、標準化のプロセスで API に対して施された、上位互換性がない変更点すべての意義を知るために、Porting webkitAudioContext code to standards based AudioContext を確認するととても役に立つでしょう。

現在私たちは Web Audio のサポートを、リリースを遅れさせる予期せぬ事態が発生しない限りデスクトップ版および Android 版の Firefox 24 でリリースしたいと望んでいますが、API のほとんどの部分を Nightly および Aurora ですぐに使用できます。

MediaStreamAudioSourceNode、MediaElementAudioSourceNode、OscillatorNode、PannerNode の HRTF パンといった、欠けているパーツがまだあります。私たちは今後数週間の間に Nightly および Firefox Aurora で、残る API のパーツのサポートを追加していく予定です。

原文: “New Features of Firefox Developer Tools: Episode 25” on August 13, 2013 by Nick Fitzgerald and Chris Heilmann

Firefox 25 が Aurora リリースチャンネルに進展して、開発ツールの新機能について報告するときがきました。

以下は、もっともエキサイティングないくつかの新機能の概要です。また全容を把握するには、解決した bugzilla チケットすべての一覧をご覧ください。

デバッガでライブラリのブラックボックス化

現代の Web 開発では jQuery、Ember、Angular などのライブラリがよく使用され、また “当然動作する” と問題なく仮定できる時間の 99% を占めます。私たちは、これらライブラリの内部実装について気にしません: それらをブラックボックスのように扱います。しかし自身のコードへたどり着くためにスタックフレームでステップ実行を行うときは、デバッグセッション中でライブラリの抽象概念が漏れ出てきます。この問題を軽減するため、ブラックボックス化を導入しました: デバッガに対して、選択したソースの詳細を無視するように指示できます。

ソースのブラックボックス化は、ソース一覧で名称の隣にある小さな目玉印を無効化することにより、ひとつずつ指定できます:

あるいは、Shift+F2 を押下して開発ツールバーを開いて、dbg blackbox コマンドを使用することにより多くのソースを一度にブラックボックス化できます:

ソースをブラックボックス化すると以下のようになります:

• すべてのブレークポイントが無効になります。
• “例外発生で停止” が有効であるときは、ブラックボックス化したソース内で例外が発生しても、デバッガは停止しません。その代わりに、スタックがブラックボックス化されていないソース (存在すれば) のフレームに戻るまで待ちます。
• ステップ実行を行うとき、デバッガはブラックボックス化したソースをスキップします。

実際の動作を見る、あるいはより詳しく学ぶために、YouTube でブラックボックス化のスクリーンキャストをご覧ください。

ネットワークモニタで要求の再実行や編集

ネットワーク要求を再送する前にヘッダを編集することにより、ネットワーク要求のデバッグが可能になりました。既存の要求を右クリックして、コンテキストメニューの項目 “Resend” を選択します:

要求をもう一度送る前に HTTP メソッド、URL、ヘッダ、要求ボディを変更できます:

インスペクタで CSS のオートコンプリート

CSS プロパティや値のオートコンプリートが可能になったため、インスペクタでの CSS 記入がとても簡単になりました。

さらに、インラインの style 属性でもオートコンプリートが動作します:

余談: この機能は、Girish Sharma と Mina Almasry の貢献により実装されました。あなた自身の手であなたのツールを手に入れたい場合は、開発ツールに関わる方法の wiki ページをご覧ください。

現在停止中のフレームで JS 実行

私たちが繰り返し受けていた要望のひとつが、グローバルスコープではなく現在デバッガで停止しているフレームのスコープ内で、Web コンソールから JS の実行を可能にというものです。これが可能になりました。カレントフレームでの JS 実行に Web コンソールを使用することにより、アプリのデバッグがとても容易になるでしょう。

訂正: Web コンソールは、実際は Firefox 23 からカレントフレームでの実行が可能であり、Firefox 25 ではスクラッチパッドでもカレントフレームでの実行が可能になるでしょう。

プロファイラでプロファイルデータのインポートとエクスポート

共有プロジェクトをハックしていて、友人のひとりが所有するいくつかのコードでパフォーマンスの悪化を発見したと考えていますか? 遅さの再現手順をつけて github に issue を追加するだけでなく、それがどれだけ遅いのかやどこで発生するかを正確に示す、コードのプロファイルをエクスポートして添付しましょう。友人がその問題を再現およびデバッグしようとするとき、あなたに感謝するでしょう。プロファイリング開始ボタンの隣にある “import” ボタンをクリックしてディスクからプロファイルの読み込みが、また既存のプロファイル上の “save” をクリックするとプロファイルのエクスポートができます。

これらの新機能はいつ使えますか?

これらすべての機能などは、Aurora リリースチャンネルで使用できます。12 週後には、これらの新機能が Firefox の安定版に展開されます。

開発ツールに関するフィードバックがありますか? Twitter の @FirefoxDevTools または irc.mozilla.org の #devtools で知らせてください。

原文: “Firefox OS Simulator 4.0 released” on July 11, 2013 by Angelina Fabbro

私たちが Firefox OS Simulator のバージョン 4.0 を一般向けにリリースしたことで、Firefox OS の開発者にとってすばらしい日になりました。特に、今回のリリースは Marketplace でアプリによって収益を得たい開発者にとって恩恵になります。

4.0 の新機能

改良された Dashboard を概観するスクリーンショット

新たな Connect ボタン

特定のアプリに接続する開発者ツールボックスを開くために、新たに ‘Connect’ ボタンを各アプリに配置しています。これにより、あなたのアプリに特有の情報を見つけるためにコンソール内のメッセージを検索したり、デバッガでスクリプトを絞り込んだりする必要がなくなります。

課金アプリのレシートのテスト

各アプリのダッシュボードに、レシートのタイプを選択するためのドロップダウンメニューがあります。選択すると Simulator アドオンがテストレシートを Marketplace のレシートサービスからダウンロードして、そのレシートを使用してアプリを再インストールします。これにより、あなたが必要とするであろうさまざまな種類のレシート (valid、invalid、refunded) について、レシートの検証をテストすることができます。

新設の Connect ボタン、Refresh ボタン、レシートのドロップダウンメニュー

リモート CSS スタイリング

Nightly または Aurora ビルドの Firefox を使用してアプリに接続している場合は、スタイルエディタツールでアプリのスタイルシートを編集できます。変更点は即座に適用されます。

まったくかわいらしさがない赤色の背景になるよう、Firefox OS Boilerplate アプリのライブ編集を行う

シミュレーションされたタッチイベント

Gaia のタッチイベントのシミュレーションが、マウスを使用した Simulator との対話において実際のタッチイベントを生成するような方式で統合されました。これにより、タッチによる対話を想定するコア Gaia アプリで発生する無数の問題が解決します。また、タッチイベントに依存するサードパーティーのアプリを、マウスイベントにフォールバックする必要なしにテストすることも可能です。

隠し機能: Shift-Ctrl/Cmd-R

アプリを更新するためにキーボードショートカット Ctrl-R (Mac では Cmd-R) を使用する際に Shift キーも押下すると、Simulator はアプリを更新するときに AppCache、localStorage、sessionStorage、IndexedDB といった持続的なデータをクリアします。

Simulator のウォークスルーを確認しましょう

さらに詳しく知りたいのですか? Simulator の細部に深く踏み込むために、Simulator Walkthrough をご覧ください。また、MDN のドキュメントがこちらにあります。

Simulator のダウンロードとインストール

アドオンの Web サイトで、Simulator のインストールや更新を実施できます。

バグ? フィードバック?

一般的なフィードバックはコメント欄に記入してください。私たちが見ています! バグを発見した場合は、こちらに報告していただければ幸いです。

原文：“WebRTC comes to Firefox” on June 25, 2013 by Maire Reavy and Robert Nyman [Editor]

4月にも Mozilla Hacks で取り上げましたが、Firefox 22 から WebRTC がデフォルトで使えるようになります。これまでもすでに getUserMedia (gUM) が Firefox 20 から使えていましたが、P2P でのデータ共有や映像/音声通話を可能にする PeerConnection と DataChannel は、Firefox 22 の新機能になります。

WebRTC は Web に初めて、リアルタイム通信を持ち込みました。私たちはこの新しい技術が開発者のもとに渡ることに、とても興奮しています。私たちは、WebRTC で可能になることをまだ表面的にしか知らないと考えています。また、真の可能性は、開発者やアーリーアダプターの手に渡すことで彼ら自身が知ることだとも考えています。

既知の課題や制約

この最初のリリースにおいては、いくつかの課題や制約が残されています。

• 一対一の通話が十分に行えることに注力していました。カンファレンスコールなどを阻害するようなことはしていませんが、デバイスの能力によっては、映像での通話で通信が鈍くなる可能性があります。複数人での通話については将来のリリースで改善します。私たちのロードマップでは、将来のリリースで複数人通話・カンファレンスコールの完全サポートおよびエクスペリエンスの向上を掲げています。
• 通話しているあなた、もしくは通話先の相手の音声が、あなたのコンピューターのスピーカーから流れている際、エコーが聞こえる可能性があります。エコーキャンセラについては対応中ですが、現時点でエコーが聞こえる場合には、ヘッドホンを使ってください。
• いくつかのシステムでは、映像に対し音声が遅れる可能性があります。原因は特定済みで、短期間での解決に向けて動いているところです。
• とくに制限の大きな NAT もしくはファイヤーウォール越しに接続している場合、接続に問題が出る可能性があります。Firefox 23 ではメディアリレー（TURN）のサポートが追加されますので、この状況は改善するでしょう。

いますぐ WebRTC を試すには

Firefox の WebRTC サポートを試してみたい場合は、WebRTC での通話をサポートしている次のサイトをご利用ください。

• talky.io (元 conversat.io)
• codassium.com
• tokbox.com
• freshtilledsoil.com
• apprtc.appspot.com

注: これらのサイトの多くでは、3人以上の通話をサポートしています。一対一（2人）の通話は開発者・アーリーアダプターにとっては十分に動作していると考えていますが、先述のとおり現在のリリースでは、3人以上での通話においては動作の品質にバラつきがでる可能性があります。

自分のサイトで使いたい方は、WebRTC ビデオチャットを自分の Web サイトに埋め込む方法もご覧ください。

DataChannel のテスト

今回のリリースから、DataChannel も試せます。仕様に準拠した DataChannel の実装をリリースしたのは Firefox が業界で初めてになります。DataChannel を利用したサイトやプロジェクトも、すでにいくつか登場しています。

• BananaBread game プロジェクト。私たちの WebRTC Data Channels for Great Multiplayer post という記事にて、BananaBread がどう DataChannel を使っているかを紹介しています。
• TowTruck プロジェクト
• Sharefest – DataChannel を使いファイルを転送します
• PeerCDN – DataChannel を使った、ブラウザベースの P2P CDN です

最新状況のテストには Firefox Nightly を

開発者の方には、Firefox Nightly の利用をおすすめします。Firefox Nightly には最新・そしてすばらしいコードと、機能の向上がもたらされているからです。また、私たちは現在の機能を向上させるほか、開発者、利用者からのフィードバックと WebRTC 標準の進行に応じて新しい機能を追加していくからです。

急速な発展を！

今後何ヶ月間の間に、PeerConnection や DataChannel を使った新しい WebRTC サイトがぐんぐん立ち上がることを期待しています。Mozilla Hacks でも、Firefox および WebRTC の進捗について、引き続き取り上げいく予定です。

原文: Building A Paid App For Firefox OS

Firefox OS の Firefox Marketplace をぱっと見たところでは Apple Store や Google Play と大差なく見えるかもしれないが、重要な違いがあります: あなたを Mozilla にロックインしたり、Firefox OS 端末にロックインしたりすることはありません。レシート プロトコルによって、どのオープン Web デバイスでも動作する Web  アプリを販売できるようになります。Mozilla 以外の マーケット もレシートフォーマットを実装することで Firefox OS のアプリ販売に参加でき、ユーザは何処のストアで課金したアプリを使ってもその違いに気づくことはありません。

他のデバイスが レシート プロトコルを実装すれば、理論的には 一度買えば何処でも使える ようになります。もちろんこれは、鶏か卵かの問題であり、Mozilla は卵となって、分散的なレシートコンセプトを実証し、プロトコルの改善を続けます。Mozilla はレシートが正しく機能し、課金アプリができるかぎりポータブルで「Web らしい」ものとなるよう他のベンダーと協力していきます。

開発者のみなさんへ

自分のアプリのレシートを検証 する責任は各アプリにあります。Firefox OS でアプリを販売しようとしている開発者は、この投稿を読めばレシート検証の実装をするにあたって幸先の良いスタートが切れるでしょう。仕様に準拠した Web ランタイムやマーケットプレイスを実装しようと考えている方にも役立つかと思います。

navigator.mozApps JavaScript API でアプリケーションのデバイスレシートにアクセスできます。レシートを検証する最も簡単な方法は、receiptverifier.js などのクライアントサイドライブラリを読み込み、レシートに埋め込まれたホスト型の検証サービス URL を使うことです。receiptverifer のドキュメントに詳細が書かれていますが、アプリの起動時に次の JavaScript を呼び出すだけでとても簡単です:

mozmarket.receipts.Prompter({
  storeURL: "https://marketplace.firefox.com/app/your-app",
  supportHTML: '<a href="mailto:you@yourapp.com">email you@yourapp.com</a>',
  verify: true
});

じゃじゃーん！これは高水準なショートカット検証であり、レシートが確認できないか無効である場合にはアプリ内に問い合わせ画面が表示されます。verifier のドキュメントには低水準の検証方法も書かれています。

より完備な例としては、テストに使用しているアプリ Private Yacht のコードをチェックアウトしてください。このアプリでは receiptverifier.js ライブラリでクライアントサイドの確認をどのように行っているかだけでなく、サーバサイドの確認を Node.js を使ってどのように行っているかご覧頂けます。他にも Python ライブラリ (更に Django 用ライブラリ) を用意しており、サーバ側でのレシート確認にお使いいただけます。仕組みはどうなっているのか？各レシートは JSON Web Tokens のマッシュアップです。プロパティにはレシートの確認に使える検証サービスがホストされているリンクも含まれます。レシートをオフラインで検証することも可能ですが、定期的な鍵の同期が必要になりますし、オフライン検証では今のところ払い戻しや再発行などが上手く扱えません。デフォルトでは、レシートはアプリの manifest に記載の installs_allowed_from パラメータのストア URL のいずれかにのみ許可されています。開発者としてあなたは各マーケットプレイスと明示的に支払いの関係を作り、アプリを売ったと主張できるサイトを制限できます。誰がアプリのレシートを提供できるかというホワイトリストとして機能します。クライアントサイド JavaScript はゆるい性質があるので、サーバサイド (つまり、アプリのサーバで) でレシートを検証することでよりしっかりと制御できるようになります。

Firefox Marketplace の課金アプリはまだ完全に有効になっていませんが、間もなくです。今のうちにレシート確認をアプリに統合していただければ、アプリの登録フローが課金をサポートする時に備えられます。

詐欺防止

だれもが Web でアプリを販売できるようにすることは、Mozilla の Opwn Web アプリのビジョンにおいてきわめて重大です。しかしながら、(DRM なしで) アプリを完全に保護しながらレシートを分散化させることは困難なことです。現時点ではユーザが課金アプリにアクセスできるように自身のクライアントに対して行える、DNS プロキシなどの攻撃がありますが、少し例を挙げれば、CSP, CORS や HSTS といったもので緩和できます。今日の iOS や Android の課金アプリの状況も 大差はありません。マーケットプレイスのホワイトリストをより効果的に出来るよう現在すすめられている取り組みもありますし、Mozilla ではより多くの開発者とより多くのストアが参加するようシステムを改善していくつもりです。署名付きの パッケージ型アプリ へと切り替えればもう一つの資産保護レイヤーを提供できますが、これは権限の問題を解決するために設計されたものです。

例によって、問題があればバグを報告してください！アプリプラットフォームのバグであれば Core (component: DOM: Apps) あるいは Marketplace (component: Payments/Refunds) へと報告してください。