原文: WebTelephony API and WebSMS API – Part of WebAPI (on March 1, 2012 by Robert Nyman)

以前、Mozilla’s Boot to Gecko – The Web is the Platform と Gaia, Mozilla’s user interface for Boot to Gecko で議論され明らかになったように、Web はとてもパワフルなプラットフォームになりつつあります！ そこで、私たちの WebAPI イニシアチブから、WebTelephony と WebSMS の 2 つのエキサイティングな API を紹介したいと思います。

WebTelephony

基本的な電話機能へのアクセスは、単純に navigator.mozTelephony を通して行うだけです。このオブジェクトへの参照を取得すれば、電話をかけたり受けたりできるようになります。以下は簡単なコード例です:

// Telephony オブジェクト
var tel = navigator.mozTelephony;

// 電話がミュートになっていないか確認 (read/write プロパティ)
console.log(tel.muted);

// スピーカが有効か確認 (read/write プロパティ)
console.log(tel.speakerEnabled);

// 電話をかける
var call = tel.dial("123456789");

// 通話のためのイベント
call.onstatechange = function (event) {
    /*
        状態に使われる値:
        "dialing", "ringing", "busy", "connecting", "connected", 
        "disconnecting", "disconnected", "incoming"
    */
    console.log(event.state);
};

// 上記のイベントに対応する関数
call.onconnected = function () {
    // 通話が接続された
};

call.ondisconnected = function () {
    // 通話が切断された
};

// 呼び出しを受ける
tel.onincoming = function (event) {
    var incomingCall = event.call;

    // 呼び出し回数
    console.log(incomingCall.number);

    // 呼び出しへの応答
    incomingCall.answer();
};

// 通話を切断する
call.hangUp();


// 呼び出しを繰り返し、状態の変更に応じた動作を行う
tel.oncallschanged = function (event) {
    tel.calls.forEach(function (call) {
        // Log the state of each call
        console.log(call.state); 
    });
};

Telephony は、Gaia の dialer と ホーム画面から利用可能です。

WebSMS

携帯電話のもう一つの中心的な機能は、SMS メッセージの送受信です。以下のコードでどのように行うかを示します:

// SMS オブジェクト
var sms = navigator.mozSMS;

// メッセージ送信
sms.send("123456789", "Hello world!");

// メッセージ受信
sms.onrecieved = function (event) {
    // メッセージを読む
    console.log(event.message);
};

ハックと貢献

これらの API とその内部の動作の探求に興味がある方は、Mozilla の Boot to Gecko のユーザインターフェース (Gaia) を調べることをお勧めします。Gaia に含まれる dialer.js ファイルと sms.js ファイルを調べてください。

また、Web 技術のスキルをスマートフォンの開発やカスタマイズのために役立てたい方は、遠慮せずに Gaia の開発に協力してください！

原文: Using the Battery API – Part of WebAPI (on February 7, 2012 by Robert Nyman)

端末やコンピュータでバッテリー残量を検出することで、現在の状態をユーザに知らせる助けになります。Mozilla の WebAPI には、この機能を提供する Battery API があります。

バッテリーへのアクセス

はじめに、battery オブジェクトにアクセスしましょう:

var battery = navigator.mozBattery;

プロパティ

端末のバッテリーの充電レベルを検出するために、いくつかのプロパティが提供されています:

Battery level

現在のバッテリー残量を確認します。0 から 1 の間の値を返します。

Battery charging

端末またはコンピュータが充電中かどうかを表す真偽値を返します。

Battery chargingTime

バッテリーの充電が完了するまでの残り時間を秒単位で返します。充電中である時に使用可能です。

Battery dischargingTime

バッテリーが空になるまでの残り時間を秒単位で返します。充電中でない時に使用可能です。

// バッテリー残量をパーセントで取得します
var batteryLevel = battery.level * 100 + "%";
// 端末が充電中かどうかを調べます
var chargingStatus = battery.charging;
// 充電完了までの時間です
var batteryCharged = battery.chargingTime;
// バッテリーが空になるまでの時間です
var batteryDischarged = battery.dischargingTime;


イベント

バッテリーの状態変更を検出する 4 つのイベントが使用可能です:

levelchange

バッテリー残量が変化したことを検出します。

chargingchange

充電中にプラグが外された、またはプラグが挿され充電開始したことを検出します。

chargingtimechange

端末の充電時間が変化したことを検出します (充電中の時)。

dischargingtimechange

端末のバッテリーが空になるまでの時間が変化したことを検出します (充電中でない時)。

<code>battery.addEventLister("levelchange", function () {
    // 端末のバッテリー残量が変化した時のコード
}, false);

battery.addEventListener("chargingchange", function () {
    // 端末の充電が開始された、または充電が解除された時のコード
}, false);


battery.addEventListener("chargingtimechange", function () {
    // 端末の充電時間が変化した時のコード
}, false);

battery.addEventListener("dischargingtimechange", function () {
    // 端末のバッテリーが空になるまでの時間が変化した時のコード
}, false);</code>

端末のサポート

Battery API は、次の OS のFirefox Beta でサポートされています:

• Android (Firefox Aurora) (訳注: 記事執筆時の Aurora)
• Windows
• Linux (UPower がインストールされたディストリビューション。最近のものは同梱)

今のところ、Mac OS X 上の実装作業は行われていません。スキルのある方の 貢献を歓迎します！

デモとコード

基本的な Battery API のデモ とソースコードを用意しました。ソースコードは、GitHub 上の Battery API リポジトリ にあります。

ご使用の端末で期待した結果が得られないときは、原因を究明するために バグを報告 してください。この機能は実験段階にあるため、製品で使用する準備はまだできていません。

原文: Using the Vibration API – Part of WebAPI (on January 26, 2012 by Robert Nyman)

Mozillas WebAPI 活動の一部として、Vibration API をすべての端末でサポートするための作業をしています。

Vibration API は、ゲームやアプリなどで端末を振動させることにより、ユーザに通知できるようにすることを意図しています。この API は、ネイティブのバイブレータにアクセスし、振動させる時間の長さを伝えます。

コード例

これを行う方法はとても単純です。この例では、引数に振動させる長さを与え、ミリ秒単位で指定します:

navigator.mozVibrate(1000);

振動をコントロールする他の方法には、振動と静止を切り替えて振動パターンを指定する方法があります。リストの奇数位置 (1 番目と 3 番目) では振動時間、偶数位置 (2 番目と 4 番目)では静止時間を指定します:

navigator.mozVibrate([200, 100, 200, 100]);

振動を停止したいときは、mozVibrate メソッドの引数に 0 または空のパターンを渡して呼び出すだけです:

navigator.mozVibrate(0);
navigator.mozVibrate([]);

試してみよう！

今すぐ試してみたい方は、Firefox 11 になる予定の Firefox Aurora で実験することができます。現在は、バイブレーションをサポートしている端末 (ほとんどの Android 版の Firefox) でのみ動作します。

注記: Android 端末でバイブレートのフィードバックをオンに設定した場合、バイブレーションがキャンセルされる可能性があります。

デモ

コードを理解するために必要な小さなデモを用意しました。このコードを試した感想を教えてください。

編集: 私たちは、実装の名前を一時的に Vibrator API にしていましたが、これは悪い印象を与えていたため、Vibration API に変更しました。この API の詳細は、W3C Vibration API draft にもあります。

原文: More details about the WebAPI effort (on August 29, 2011 by Jonas Sicking)

私たちが望んだとおり、新たにアナウンスした WebAPI 活動 (和訳) には、興味深いものが数多くあります。そのため、私たちが行いたいことと、私たちの目の前にある課題について、より詳しく説明しなければならないでしょう。

目標

この活動の目標は、Web の可能性を広げる API を作成することです。私たちは、Web にいくつかの能力が欠けているというだけで、人々にプロプライエタリなプラットフォームを開発する道を選んでほしくないのです。

主な活動は、少なくとも初期には、端末に接続されたハードウェアへのアクセスを可能にし、データを端末に格納したり利用可能にすることです。ハードウェアに対しても、人々が Web プラットフォームを使えるフルレンジのハードウェアを作りたいと考えています。カメラなどの共通のハードウェアから、滅多に使われない USB 駆動の Nerf キャノンまで。また、Bluetooth や NFC などの通信ハードウェアも利用可能にしたいと考えています。

端末に格納されるデータについて、もっともよく議論されるデータは、連絡先とカレンダーです。これは、データの読み込みと書き込みの両方の機能が含まれます。私たちは、Web プラットフォームが格納された連絡先の列挙とそれらの詳細の読み込みの両方をできるようにし、連絡先の追加と削除もできるようにしたいと考えています。つまり、Web プラットフォームが Web ページを作成できるようにしたり、Web アプリでユーザが連絡先リストを管理できるようにしたいのです。同じことが、カレンダーのイベントや、端末に格納された他の形式のデータについても言えます。

セキュリティとプライバシー

このような種類の API がまだ Web プラットフォーム向けに開発されていないのは、これらがセキュリティとプライバシーに影響することが大きな理由の一つです。はっきり言って、あらゆる単独の Web ページに対して自分の連絡先リストやカレンダーをいじれるようにしたくはありません。また、USB デバイスの接続時にコマンドを発行できるようにすると、すべての人のコンピュータがすぐにゾンビ化される結果をもたらすでしょう。

そのため、これらの API を開発するときは、常にそれぞれに見合ったセキュリティモデルを開発しなければなりません。例えば、現在 Geolocation 機能で行っているように、単純にユーザに使用許可を求めるのも良いでしょう。他に、セキュリティに影響する恐れがあるところやユーザに危険性を説明するのが難しいところでは、より良い解決策を用意しなければなりません。

どのようなセキュリティモデルを構築すべきか、私たちにはまだ分かりませんが、API を数百万人のユーザに提供する前に、信頼できるセキュリティの解決策を持つ計画があることを、特に強調しておきたいと思います。

Robert O’Callahan が Web アプリケーションの許可設定 についての本当にすばらしい記事を投稿しています。

標準

Mozilla は常に Web 標準への力強いコミットをしています。この姿勢が変わることはありません！ 私たちが開発している API はすべて、ブラウザと端末の両方に対して標準化と実装を行うという目標を持って開発されています。

しかし、標準を良い標準にすることは重要です。これは実験を伴います。Web にとって新たな領域やセキュリティに敏感な領域においては特にそうです。

標準化機構は、研究をするのに良い場所ではありません。これは、先に標準化機構の外で実験と研究を行いたい理由です。しかし、常にオープンであり、常にフィードバックを求めています。また、API 名に接頭辞を付けて、これらが実験的であり、標準化されたら変更する (接頭辞を削除する) ことを明らかにしています。

私たちの考えがより良く理解され、良い API が作られたら、仕様の提案書を作成し、W3C の Device API グループや WAC および WHATWG などのワーキンググループに提出する予定です。

私たちはこのプロセスを通して、他のブラウザベンダや Web 開発者など、他の興味のある団体と接触をします。これは、通常の研究の一環であり、API を良い API にするための活動です。

Mozilla は、常にオープン Web を保つ、良いスチュワードであり続けます。私たちは、Mozilla 独自の Web プラットフォームを作成することに興味はありません。私たちは、オープン Web プラットフォームを前進させることに興味があるのです。

高レベル vs. 低レベル

API 設計でよく問題になることの一つに、高レベルの API と低レベルの API のどちらを作るべきかということがあります。例えば、低レベルの USB API なのかカメラ向けの高レベルの API なのか？

これは、どちらにも長所と短所があります。高レベルの場合は、私たちが、より開発者に親切な API を作れることを意味します。また、ページが予期しない USB コマンドを発行しないようにできるため、より良いセキュリティモデルを提供することもできます。また、ユーザの許可なしにプライバシーに敏感でないアクセスも提供できます。しかし、高レベルの API は、開発者が、私たちがサポートを追加した種類のデバイスにしかアクセスできないことを意味します。そのため、Nerf キャノンの API を追加するまで、開発者にデバイスを操作する手段はありません。

一方で、低レベルの USB API を開示することは、それらの足りない API を私たちが追加する必要が無く、接続された任意の USB デバイスを Web ページが操作できることを意味します。しかしながら、この場合は、開発者が手作業で USB プロトコルの詳細とデバイスごとの違いを調べる必要があります。

私たちが計画しているアプローチ方法は、ユーザにとって最善の、高レベルと低レベルの両方の API を作成し、API を使用する適切な動機を人々に与えることです。しかし、最も重要な点は、低レベル API を早く提供して Mozilla が革新のための致命的な通り道にないことを確かにすることです。時が経てば、理に適った高レベルの API を追加できます。

参加するには

Mozilla において、すべての計画はオープンに行われます。事実、私たちはあなたの助けによって成功することができるのです！ 議論を継続するために、すべてのコミュニケーションを新しい mozilla.dev.webapi 議論フォーラムを使って行います。これは、メールやニュース部ループ、 Web ベースの Google グループ UI を通して参加できることを意味します。

メーリングリストの購読: https://lists.mozilla.org/listinfo/dev-webapi

他の手段: http://www.mozilla.org/about/forums/#dev-webapi

私たちは、irc.mozilla.org サイト上の #webapi IRC チャンネルも利用しています。

進捗状況は Wiki ページで確認できます: https://wiki.mozilla.org/WebAPI

Web プラットフォームの次のステージを構築するため、あなたのご参加をお待ちしております！

開発者募集中

編註: 言及するのを忘れていました。私たちは、WebAPI API チームで働くフルタイムのエンジニアも募集しています。募集要項を確認して申し込んでください。

原文: Introducing WebAPI (on August 23, 2011 by Robert Nyman)

Mozilla は、WebAPI を導入して基本的な HTML5 に対応した携帯を 3 から 6 か月以内に提供したいと考えています。

現在の状況

今日の状況は、オープン Web とネイティブ API の間に明確な区別があり、どのように構築されなければならないかも区別されています。多くの開発者が気付いているように、私たちには、Web ブラウザやオペレーティングシステム、端末にまたがって、特定の端末やベンダだけに依存しない一貫した API が必要です。私たちは、Web を次のステップへ進める手段を必要としています。

WebAPI とは何か？

WebAPI は、Mozilla による活動であり、オペレーティングシステムに依らずに、すべての Web ブラウザで動作する一貫した API 提供して、ブラウザや端末の間の溝を埋めます。仕様のドラフトと実装のプロトタイプを用意し、標準化のためにそれらを W3C に提出する予定です。ここでは、セキュリティはとても重要な要因です。これは、既存のセキュリティ基準 (Geolocation 機能のように、ユーザに許可を求めるなど) を混ぜ合わせたものになるか、セキュリティを確保する新しい代替機能になるでしょう。

直近のタイムフレームでは、次の API を構築しようとしています:

• ダイヤル: Telephony と Messaging API, Contacts API
• アドレス帳: Contacts API
• SMS: Telephony と Messaging API, Contacts API
• 時計
• カメラ: Camera API, Filesystem API
• ギャラリー: Filesystem API (FileReader と FileWriter を結合したものになるでしょう)
• 電卓
• 設定: Device Status API, Settings API
• ゲーム: Accelerometer API, Mouse Lock API
• 地図: Geolocation API, Contacts API

協力するには

すばらしい意見を持つ数多くの有能な人々がいることを私たちは知っています。ぜひ、次のページやサイトを通して協力してください:

• WebAPI プロジェクトページ の情報を追う。
• WebAPI メーリングリスト に参加する。
• IRC: irc.mozilla.org の #webapi ルーム。
• bug 67392 のバグから始め、助けが必要な依存関係にあるバグを見つける。

開発者の雇用

私たちは、Web API のために働く、数名のフルタイムのエンジニアを雇用します。募集要項を読んで応募してください。

原文: Firefox Beta 15 supports the new Opus audio format (on July 19, 2012 by derf)

Firefox 15 (現在 Beta チャンネル) は、Opus オーディオ形式 をサポートします。これは、Opus のリファレンス実装 です。

これは何ですか？

Opus は、完全にフリーなオーディオ形式であり、最近、IETF により、RFC の標準トラックとしての発行が認可されました。Opus ファイルは、現在の Firefox Beta で再生できます。

Opus には次の利点があります:

• MP3、Ogg、AAC 形式よりも 高い圧縮率
• 音楽とスピーチ の両方に向いている
• 動的に調整可能な ビットレート、オーディオ帯域幅、コーディング遅延
• インタラクティブな録音と予め録音されたアプリケーションの両方 をサポート

なぜ関心を持つべきなのか？

はじめに、Opus は自由なソフトウェア であり、誰でも自由に、どのような目的にも使えます。さらに、これは IETF 標準でもあります。固定小数点の実装 (モバイル端末向け) を含め、エンコーダとデコーダの両方がフリーです。これらはお遊びのデモではありません。私たちが作れる最高のものであり、本格的に使えるもの です。

私たちは、Opus が Web オーディオのための信じられないような全く新しい形式であると考えています。私たちは、共通の <audio> 形式の 行き詰まりを打破する ため、他のブラウザが Opus をサポートするように積極的に働きかけています。

このコーデックは、IETF Internet Wideband Audio Codec ワーキンググループ と Mozilla、Microsoft、Xiph.Org、Broadcom、Octasic、その他のメンバー同士のコラボレーションです。

このコーデックは、高品質でインタラクティブな音声 (VoIP、電話会議など) のために 設計され、近く公開の WebRTC 標準 で使用されます。Opus は、ライブストリーミングと静的なファイルの再生に対しても 優位性を持っています。事実、これは、インタラクティブと非インタラクティブなアプリケーションの両方に適合する最初のオーディオコーデックです。

Opus は、基本的に、既存のすべての非可逆オーディオコーデックと競合するそれらの得意な部分に対して 同等かそれ以上 の品質を持っています:

一般的なオーディオコーデック (高レーテンシー、高品質)

• MP3
• AAC (すべてのフレーバー)
• Vorbis

スピーチコーデック (低レーテンシー、低品質)

• G.729
• AMR-NB
• AMR-WB (G.722.2)
• Speex
• iSAC
• iLBC
• G.722.1 (すべての派生)
• G.719

さらに、これらのコーデックのうち、Opus がサポートしている様々な用途にすべて対応しているものは まだありません。

リスニングテストでは、次の結果が示されています:

• 64 kbps では、Opus は HE-AAC と Vorbis よりも 高音質 です。
• 64 kbps の Opus ファイルは、96 kbps の MP3 ファイルと 同等の音質 です。

これらは、多くの帯域が節約でき、さらに柔軟性があることを示しています。

Opus は、次のストリームができます:

• 6 kbps 程度の低いビットレートで 狭帯域のスピーチ
• チャンネルあたり 256 kbps のビットレートで 全帯域の音楽

これらよりも高いビットレートでは、可逆圧縮に近い (perceptually lossless) 音質です。また、ネットワークの利用可能な帯域に依存しますが、これら 2 つの極端なビットレートの間で動的にスケール します。

Opus は、スピーチの圧縮に長けています。全帯域のモノラルのスピーチでも 同じテスト結果 (スライドの 19 ページ参照) が出ており、32 kbps の Opus が 原音に最も近い ことを示しています。オーディオブックとポッドキャスト については、完全に勝っています。

Opus は、短いファイル (ゲームのサウンドや効果音など) と スタートアップレーテンシー にも優れています。なぜなら、Vorbis と異なり、各ファイルの出力時に数キロバイトのコードブックを必要としないからです。これにより、中間ストリームに加わるクライアントに送信するための外部データをサーバが保持しなくなるため、ストリーミングしやすくなる という利点もあります。Opus は、オンザフライで構築される、小さく一般的なヘッダを代わりに送信します。

Web ページ内で使用するには？

Opus は、他のオーディオ形式のように、<audio> 要素で使用できます。

コード例:

 <audio src="ehren-paper_lights-64.opus" controls>

このコードを Web ページ内に記述すると、次のような埋め込みのプレーヤーが表示されます:

 
(再生するには Firefox 15 以降が必要)

ファイルのエンコーディング

今のところ、Opus ファイルを作成する最も良い方法は、opusenc ツールを使うことです。次のサイトから Mac および Windows 用のバイナリとソースコードがダウンロードできます:

http://www.opus-codec.org/downloads/

Firefox 15 が Opus をネイティブにサポートする最初のブラウザなので、gstreamer や libavcodec、foobar2000、他のメディアプレーヤーにも再生機能が追加されるでしょう。

ストリーミング

ライブストリーミングのアプリケーションは、Opus の柔軟性により、優れた利点を得られます。音声や音楽、その他のサウンドに最適化するため、低い帯域幅や高品質のものが欲しいとしても、先に決めておく必要はありません。ストリーミングサーバは、ネットワークの状況が変わっても、プレーヤーへのストリームを中断せずに、エンコーディングに適応 できます。

予めエンコードされたファイルは、通常の Web サーバからストリーム できます。人気の Icecast ストリーミングメディアサーバ は、シングルのオンザフライで生成されたライブ Opus ストリームを数千人の接続された聴取者に中継できます。Opus は、Icecast の現在の開発版 (2.4 beta) でサポートされています。

他の情報

より詳しい情報は、opus-codec.org サイトを訪れるか、irc.freenode.net の #opus チャンネルに参加してください。

原文: Using window.matchMedia to do media queries in JavaScript (on June 5, 2012 by Robert Nyman)

Web サイトを構築する人々にとって、レスポンシブ Web デザイン で、可能な限り多くのユーザがコンテンツを利用できるようにすることが自然なアプローチになってきました。これには CSS メディアクエリ が使われますが、JavaScript でも同じことができます。

window.matchMedia の紹介

JavaScript でメディアクエリを利用するには、window.matchMedia を使います。基本的には CSS で行うのと同じことを、JavaScript コールで行います:

var widthQuery = window.matchMedia("(min-width: 600px)");

このクエリは、MediaQueryList オブジェクトを返します。このオブジェクト上では、次のことができます:

matches

クエリがマッチするかどうかの真偽値。

media

シリアライズされたメディアクエリのリスト。

addListener

イベントリスナをメディアクエリに追加する。値のポーリングなどよりも優先される。

removeListener

イベントリスナをメディアクエリから削除する。

メディアクエリがマッチするかどうか簡単に調べるには、matches プロパティを使います:

var widthMatch = window.matchMedia("(min-height: 500px)").matches;

リスナを追加するのはとても簡単です:

function getOrientationValue (mediaQueryList) {
    console.log(mediaQueryList.matches);
}
 
portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
portraitOrientationCheck.addListener(getOrientationValue);

デモとソースコード

window.matchMedia のデモ で、いくつかのクエリの動作を確かめられます。ウィンドウをサイズ変更して値がどのように変わるか見てみてください。

このデモの完全な JavaScript コードは、GitHub にも置いてあります:

(function () {
    var matchMediaSupported = document.querySelector("#matchmedia-supported"),
        width600 = document.querySelector("#width-600"),
        height500 = document.querySelector("#height-500"),
        portraitOrientation = document.querySelector("#portrait-orientation"),
        width600Check,
        height500Check,
        portraitOrientationCheck;
 
    if (window.matchMedia) {
        matchMediaSupported.innerHTML = "supported";
 
        // Establishing media check
        width600Check = window.matchMedia("(min-width: 600px)"),
        height500Check = window.matchMedia("(min-height: 500px)"),
        portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
 
        // Add listeners for detecting changes
        width600Check.addListener(setWidthValue);
        height500Check.addListener(setHeightValue);
        portraitOrientationCheck.addListener(setOrientationValue);
    }
 
    function setWidthValue (mediaQueryList) {
        width600.innerHTML = mediaQueryList.media;
    }
 
    function setHeightValue (mediaQueryList) {
        height500.innerHTML = mediaQueryList.matches;
    }
 
    function setOrientationValue (mediaQueryList) {
        portraitOrientation.innerHTML = mediaQueryList.matches;
    }
 
    // Setting initial values at load
    function setValues () {
        width600.innerHTML = width600Check.matches;
        height500.innerHTML = height500Check.matches;
        portraitOrientation.innerHTML = portraitOrientationCheck.matches;
    }
 
    window.addEventListener("DOMContentLoaded", setValues, false);
})();

Web ブラウザのサポート

この記事の執筆時点で、window.matchMedia は次のブラウザに実装されています:

• Firefox 6 以降。
• Google Chrome 9 以降。
• Safari 5.1+。注記: addListener はサポートしていません。
• モバイル版 Firefox
• Android 版の Google Chrome ベータ。注記: addListener はサポートしていません。
• iOS 版の Safari 5。注記: addListener はサポートしていません。
• Android ストックブラウザ。注記: addListener はサポートしていません。

Internet Explorer 10 でのサポートも計画されています。

古い、サポートしていない Web ブラウザでは、matchMedia() polyfill を試してみてください。ただし、addListener はサポートしていません。

原文: getUserMedia is ready to roll! (on July 13, 2012 by Anant Narayanan)

今年の 4 月に、私たちは WebRTC 活動 についての記事 (和訳) を投稿しましたが、今日はエキサイティングな最新情報をお届けします。getUserMedia が mozilla-central にコミットされました！ この API は、Firefox の最新の Nightly バージョンで使えるようになったので、最終的にリリースビルドでも使えるようになります。

getUserMedia は、Web ページが動画や音声の入力を取得できるようにする DOM API です。つまり、Web カメラやマイクからの入力したデータを Web ページが扱えるようになります。私たちは、これが Web ページとアプリケーションの全く新たな可能性の扉を開くことを望んでいます。この DOM API は、WebRTC プロジェクト のコンポーネントの一つです。このコンポーネントには、動画ストリームや音声ストリーム、任意のデータの交換を可能にするピアツーピア通信チャンネルのための API も含まれています。

PeerConnection API のほうはまだ実装途中ですが、getUserMedia は、Firefox が WebRTC を完全にサポートするための歩みにおけるすばらしい最初のステップです！ 私たちは、 DOM API を通じて Web カメラからの最初の画像を Web ページ上に表示 してから長い道のりを歩んできました。(これより前に Jetpack が音声録音をサポート していたことには言及していません。)

私たちは、W3C で開発された「Media Capture and Streams」標準のプレフィックス付きのバージョンを実装しました。仕様の機能はまだすべて実装されていませんが、最も注意すべき点は、私たちは Constraints API (呼び出し元が、様々なパラメータを基に特定の形式の音声と動画を要求できるようにする API) をサポートしないということです。

また、Mozilla 固有の拡張仕様も API に実装しました。mozGetUserMedia の最初の引数が受け入れる辞書データに、{picture: true} プロパティだけでなく、{video: true} や {audio: true} も追加しています。picture API は、video ストリームをセットアップせずに一枚の写真をユーザのカメラから取得する専用の機構に興味があるか確かめるための実験的な API です。これは、例えばプロファイルの写真をアップロードするページや写真共有アプリケーションなどで役立つでしょう。

難しいことは抜きにして、簡単なコード例から始めましょう！ その前に、この機能にはまだ、ユーザのカメラやマイクのアクセス確認を出す許可モデルや UI がありません。about:config ページで media.navigator.enabled という名前の設定を作成し、値を true にセットしておいてください。この API のリリースは開発者向けのものなので、合意の取れた許可モデルや UI を実装した後に、デフォルトで有効にする予定です。

この API の音声、動画、写真機能をテストできる デモページ もあります。ぜひ、このデモを試した感想を教えてください！ あなたの使用例に合うかどうかに関わらず、特に Web 開発者コミュニティからの API についてのフィードバックに興味があります。この記事のコメント欄か dev-media のメーリングリスト、またはニュースグループにコメントをください。

このプロジェクトへの参加も歓迎します。プロジェクトの Wiki ページ には、私たちの進行中の活動についての多くの情報があります。手始めに、メーリングリストに質問やコメント、提案を投稿するとよいでしょう。私たちは、IRC の #media チャンネル にもいます。気軽に雑談でもしましょう。

ハッピーハッキング！

原文: WebRTC efforts underway at Mozilla! (on April 3, 2012 by Anant Narayanan)

先週、パリで開催された IETF 83 に Mozilla から少人数のチームが参加しました。私たちはそこで、WebRTC がサポートされた特別なビルドの Firefox を使い、BrowserID で認証された 2 つの集会の間で、簡単なビデオコールの初期のデモを披露しました。WebRTC が Firefox に統合されてまだ間もないですが、動作するものをお見せできて、とても興奮しました！

Mozilla Labs では、ブラウザに ソーシャル機能を統合 する実験を行っています。これと WebRTC を結びつけ、BrowserID (現在は Persona と呼ばれています) でサインインした 2 人のユーザの間でビデオコールを確立するのは良いアイデアだと思いませんか。SocialAPI アドオン をインストールすれば、ソーシャルサービスプロバイダからの Web コンテンツがサイドバーに描画されます。私たちの デモのソーシャルサービス では、Persona でサインインしている人々の「友だちリスト」を表示します。

ユーザがビデオチャットを開始すると表示されるビデオチャットのページは、現在 W3C で標準化されている getUserMedia と PeerConnection の API をシミュレートするためのカスタム API です。リモートとローカルのビデオの描画は両方とも <canvas> が使用されますが、これらは <video> 内に描画することも可能です。私たちは、標準 API の実装をとてもすばやく行っています。作業の進捗状況は、追跡バグ のリストを追ってください。

このデモを IETF イベントまでに準備するため、多くの人たちが夜遅くまで作業してくれました。Eric Rescorla 氏、Michael Hanson 氏、Suhas Nandakumar 氏、Enda Mannion 氏、Ethan Hugg 氏、Spacegoo の方々、Randell Jesup 氏ら、そして Mozilla のメディアチーム全体の働きに特に感謝を申し上げます。

現在の開発は、mozilla-central のブランチ上で行われ、alder と呼ばれています。WebRTC を Firefox にもたらす今後数ヶ月の作業はエキサイティングなものになるでしょう。作業は数多くあります。WebRTC の実装に興味があり協力したいという方は、ぜひご連絡ください。私たちの製品の顔で WebRTC プロジェクトリーダーの Maire Reavy が喜んで協力する方法を見つけてくれるでしょう。プロジェクトメンバーの多くは、IRC の#media チャンネルにいます。また、メーリングリスト でも意見交換をしています。

スクリーンキャストの字幕:

Hi, I’m Anant from Mozilla Labs and I’m here at IETF where we are demonstrating a simple video call between two BrowserID-authenticated parties, using the new WebRTC APIs that we are working on.
こんにちは、私は Mozilla Labs のエージェントです。私はここ IETF にいます。2 つの BrowserID 認証された集まりの間で、私たちが開発中の新しい WebRTC API を使用した簡単なビデオコールのデモをします。

This is a special build of Firefox with WebRTC support, and also has the experimental SocialAPI add-on from Mozilla Labs installed. On the right hand side you can see web content served by demosocialservice.org, to which I will sign with BrowserID. Once I’m signed in, I can see all my online friends on the sidebar. I see my friend Enda is currently online, and so I’m going to click the video chat button to initiate a call.
これは、WebRTC をサポートした特別なビルドの Firefox で、Mozilla Labs の実験的な SocialAPI アドオンがインストールしてあります。右側には demosocialservice.org から配信された Web コンテンツが見えます。BrowserID でサインインします。サインインすると、オンラインの友人がサイドバーに表示されます。私の友人の Enda が現在オンラインなので、ビデオチャットボタンをクリックして呼び出してみましょう。

Here, I see a very early prototype of a video call window served up by our demo social service. Now, I can click the Start Call button to let Enda know that I want to speak with him. Once he accepts the call, a video stream is established between the two parties as you can see. So, that was a video call built entirely using JavaScript and HTML!
私たちのデモソーシャルサービスによる初期プロトタイプのビデオコールウィンドウが表示されました。Start Call ボタンをクリックすると、Enda に私が話をしたいことが伝わります。彼が呼び出しを受け入れると、ご覧のように 2 つの集まりの間でビデオストリームが確立されます。このビデオコールは、全体が JavaScript と HTML だけで構成されています！

You can check out the source code for this demo, as well as learn how to contribute to the ongoing WebRTC efforts at Mozilla in this blog post. Thanks for watching!
このデモのソースコードを見てください。また、Mozilla で進行中の WebRTC 活動に協力する方法も学んでください。ご覧いただきありがとうございました！

7/28、29 日に行われた Mozilla Hackathon 2012 の成果発表の翻訳グループ編です。この記事では、ドキュメント翻訳や製品 L10N を行っていた人の成果を発表します。順番は順不同です。

※8/4 深夜に MDN が新システムに移行したのを受けて、MDN へのページへのリンクを書き換えました。

yyss さん

MDN 技術ドキュメントの翻訳。

• JavaScript Reference – Fucnction object
  • toString
  • name
  • constructor
  • caller
• JavaScript Reference – Object object
  • create
  • defineProperty
  • defineProperties
  • getOwnPropertyDescriptor
  • keys
  • getOwnPropertyNames
  • preventExtensions

ethertank さん

MDN 技術ドキュメントの翻訳。

• CSS リファレンス
  • background-repeat
• HTML 要素リファレンス
  • label 要素
  • li 要素
  • button 要素
  • bdo 要素
  • sup 要素
  • optgroup 要素

ko さん

Mozilla 公式プロジェクトブログ記事の翻訳。

• about:mozilla ニュースレター
  • カメラ好きのみなさんへ、サンフランシスコの街中に猫印の投光照明？などなど
  • 新しいセキュリティ機能、Gaia を簡単に使いこなそう、などなど…
• Future Releases ブログ
  • Firefox をソーシャルに

mar さん

製品 L10N 作業。

• B2G-gaia の L10N。
  • 初期リポジトリの翻訳完了。
  • github のリソースを途中まで翻訳。
• SeaMonkey 15.0 (beta) の L10N を更新。

knagato さん

Fennec Beta の L10N。

• http://hg.mozilla.org/releases/l10n/mozilla-beta/ja/rev/68dd1b7fd44f
• http://hg.mozilla.org/releases/l10n/mozilla-beta/ja/rev/4892b428e2cc

dskmori さん

SUMO 記事の翻訳。

• ロケーションバーの自動補完
• 拡張機能とテーマのトラブルシューティング
• Firefox がクラッシュする
• ブックマークの使い方
• ロケーションバーで検索する
• 設定のリセット
• Facebook 利用時の問題
• 他の人と共用のコンピュータで Firefox を使うには
• Firefox で音が再生できない
• Web サイトが正しく表示されない
• 全画面表示を利用するには
• モバイル版 Firefox の動作が遅い

池田さん

Mozilla 開発者のブログ記事の翻訳。
pdf.js：PDF を HTML5 と JavaScript で表示する

濱崎さん

Mozilla Hacks ブログ記事の翻訳。

• FoxIE – Microsoft と共に作ったウェブ標準についての訓練ビデオシリーズ
• Hack the News: オープンニュースフェローシップへの応募

野田さん

Mozilla Verbaitam での Web サイト翻訳。

• BrowserID
• Mozillians

Mozilla Privacy ブログ記事の翻訳。

• Web でますます支持されていく Do Not Track
• Do Not Track をメールでも

富田さん

Mitchell Baker のブログ記事の翻訳。
July 27th から July 5th まで訳しているが、まだラフドラフトなので、後ほど投稿。

potappo

MDN の新システムに関する調査やまとめ。

• まとめは 翻訳フォーラムに投稿。
• MDN の本サイトが本来は編集不可能になっているはずなのに、日本語版などBrowserIDでログインできない言語では編集可能であるバグを報告

MDN 技術ドキュメントの翻訳。

• Firefox 各バージョンの開発者向け情報
  • Firefox 14 for developers
  • Firefox 15 for developers
  • Firefox 16 for developers
• DOM リファレンス
  • DOMExcepiton
  • DOMError

MDN テンプレートで上手くコンバートされなかった部分の修正。

• Template:ReleaseChannelInfoForJa
• Template:TranslationInProgress

ハッカソン会場という特別な場で集中して作業できただけでなく、普段はオンラインでしか交流がない人にオフラインで会えたり、初心者の人はわからないところを詳しい人に訊けたりと、大変意義深いイベントだったと思います。参加者のみなさん、お疲れ様でした！