FirefoxOSで学ぶJavaScript作法

1 JavaScriptＦｉｒｅｆｏｘＯＳで学ぶ作法

関西Firefox OS 勉強会 4th GIG

FirefoxOSで学ぶJavaScript作法

ｒｏｂｏ


御挨拶

FirefoxOS 勉強会も４回目を向かえ、おかげさまで、

FirefoxOS API を使った実験用の簡単なアプリ作成が

できるようになりました。

新しい入門書籍も購入して勉強しましたです。 (^_^)


御挨拶

私ごとですが、FirefoxOSアプリを開発の前に、

標準インストール・アプリ(ソース)を調べて

本当の FirefoxOS アプリの中身を見てみましたが…

と、その前に


自己紹介

●名前　　　　robo（兼高理恵）

●お仕事　　　Ｊａｖａ技術者　　　　　　　設計から実装まで

●好きなもの　　モバイル端末


シミュレータ標準アプリのハックについて

既に御存知のかたも多いと思いますが、FirefoxOS シミュレータ標準アプリのハック(ソース取得)について説明します。

Firefox ブラウザのアドレスバーにabout:support と入力してアプリケーション基本情報の表にあるプロファイルフォルダの行の

「ディレクトリを開く」ボタンをクリックすると、　Firefox ブラウザの設定ディレクトリが開きます。

HTML5でつくるFirefox OS アプリケーション開発入門参照：プリインアプリをいじってみよう発行：秀和システム著者：管理工学研究所 HTML5技術研究WG

さわってみよう Firefox OS in 大阪参照：起動画面のカスタマイズhttp://www.slideshare.net/honmamasashi1/firefox-os-customize14

http://www.slideshare.net/honmamasashi1/firefox-os-customize14



about:supportと入力するとトラブルシューティング情報の画面が開きます。



Firefox ブラウザの設定ディレクトリが開きます


パッケージ型アプリのソースを見る

　プリインアプリの配置先は、以下の場所になっています。

　[プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp

パッケージ型アプリの場合は、

ソース一式のzipファイルがフォルダごとに保管されています。

Clock アプリのソースをハックしたい場合は、

clock.gaiamobile.org フォルダをデスクトップ等にコピーして、

中にある application.zip を展開すれば見ることができます。


パッケージ型アプリのソースを見る

Clock アプリのソースをハックしたい場合は、clock.gaiamobile.org フォルダをデスクトップ等に

コピーして、中にある application.zip を展開すれば見ることができます。

アプリの配置先は、 [プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp です。

../../../../../extensions/r2d2b2b/@mozira.org


ソースが見れても JavaScript … 判りませんｏｒｚ

勇んでソースの中身を見るも...JavaScript で何をしているのかさっぱり判りませんでした。

疑問点

オブジェクトリテラルの形式で、クラスを模しているのは判るけど、

コロン':' のない get 関数って何？とか、importキーワードで何してるの？

return で入れ子の関数やオブジェクトを返すのは

…何故とか

という訳で、今時の JavaScript 作法について勉強しました。

本格的な Webアプリ開発者の皆様には、退屈と思いますが、JavaScript に不慣れな Android 開発者の苦闘に、

お付き合いください。



JavaScript の予備知識

JavaScript: The Good parts JavaScript: The Good parts 「良いパーツ」によるベストプラクティス「良いパーツ」によるベストプラクティスからの引用

1.2 JavaScript を解析するJavaScriptはクラスのないオブジェクトシステムを採用しており、オブジェクトは別のオブジェクトから直接そのプロパティを継承する。

クラス型のプログラミング言語を学んできたプログラマにはなじみのないものだ。クラス型のデザインパターンを直接JavaScriptに適用しようとすると、きっと不満が残るものになるだろう。

Java/Android開発者にとって、重い言葉です。


私の考えるJavaScriptの不安点

JavaScriptの言語仕様では、パッケージが使えない、クラスが存在しない。

言語仕様(標準機能)としてのアクセススコープ制限(private/public)がない。

ブロックスコープが無く、関数スコープしかない。インターフェースが使えない。(処理の抽象化が講じれない)

...でもフォクすけ君のために頑張ってみます。

参考先オブジェクト指向 JavaScript 入門

https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

JavaScript: The Good Parts 「良いパーツ」によるベストプラクティスオライリー・ジャパン Douglas Crockford 著、水野貴明訳

https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript


JavaScript の特殊性について知るために、

　まずは、落とし穴について学んでみます。


「肩慣らし」JavaScript の for ループの罠

「「for for 内でイベントリスナとか登録するときに内でイベントリスナとか登録するときに　やっちゃいがちな間違い　やっちゃいがちな間違い. . とその対処法を３つほどとその対処法を３つほど..」」よりhttp://tmlife.net/programming/javascript/javascript-for-eventlistener-bug-closer.html

<html> <head> <title>ループ内の同一名称属性扱いテスト</title> </head> <body> 　　<button>Button 1</button> 　　<button>Button 2</button> 　　<button>Button 3</button> </body> <script> var buttons = document.getElementsByTagName("button"); for (var i=0,len=buttons.length; i<len; ++i) { var button = buttons[i]; button.onclick = function() { alert(button.innerHTML); }; } </script> </html>

問題点

ページ表示すると、Button1 や Button2 を押しても

Button3 と表示されます。

http://tmlife.net/programming/javascript/javascript-for-eventlistener-bug-closer.html



問題原因

1.JavaScriptでは、プロパティを所属スコープ内の名前で区別し参照します。

2.新規作成プロパティは、所属スコープ内に作成されます。

3.forブロックには、独自のスコープがなく作成されません。

4.無名関数には、個別の関数スコープが作成されます。

5.無名関数どうしは、内部的に同一名として扱われませんが、

同一スコープ内の同一名称プロパティは、新規作成であっても、

同一先を参照します。

6.ループ処理内で、同一名プロパティにループごとの設定を行なうと、

作成プロパティ名が同一なので、ループ処理すると設定内容が

上書きされてしまいます。



キーポイントキーポイント

forループ内の無名関数では、

個別の関数スコープが作られ、個別のプロパティを格納するが、

forループ内の button オブジェクトは、

ループごとに新規作成したつもりでも、

同一スコープの同一名なので同一ポインタ先の実態を参照する。

このため buttons[0], buttons[1], buttons[2] が参照する

button の内容は、最終生成された Button3 の内容になり、

問題が発生した。



クロージャを使った回避対処var buttons = document.getElementsByTagName("button");for (var i=0,len=buttons.length; i<len; ++i) { var button = buttons[i]; //← 宣言時 button ① // 定義時のスコープはforと同じに属する

// ボタンにイベントリスナを登録 button.onclick = (function(button) { //← 無名関数１内 button ② // スコープは無名関数１に属する // ④定義時には、ループ毎のの値がコピーされる return function() { alert(button.innerHTML); //← 無名関数２内 button ③ // スコープは無名関数２に属し、ループ毎に生成される // 定義時の内容は、無名関数１から参照することになる // onclick時には、無名関数２に引数が無いこともあり、 // 定義時の値(forで指定された値のコピー)が引き継がれる

　 }; })(button); //← ループ内 button ④ // 定義時のスコープはforと同じに属する}

（感想）何で for 文が、ここまで複雑になるの...


JavaScript は、

一筋縄でいかず、侮りがたし...と心した所で、

Firefox OSのアプリやシミュレータの

ソースを見て思いました疑問点や、

JavaScript への不安点の克服を

今時の作法から学んでみます


疑問と不安点の（独自）解決編

ここからは、

今時の JavaScript の作法に追いつくよう、

私が学んでみた結果をまとめてみました。

Webアプリに詳しいみなさま　　

いたらぬ点につきましては、　

御指導をお願いいたします。　


スクラッチパッド・ウィンドウについて

以降のサンプルは、Firefoxブラウザで実行できます。

Firefox で、JavaScriptを直接実行するには、

Shift + F4 で、スクラッチパッド・ウィンドウを開きます。

スクラッチパッドは、直接 JavaScript が記述でき、

メニューから実行することができるウィンドウです。

ツール > Web開発 > Webコンソールで

コンソールを開けば、console.log(”message”) などを使って

ログ出力することもできます。


スクラッチパッド・ウィンドウ

スクラッチパッドから、Ｗｅｂコンソールへのログ出力も行えます。

スクラッチパッド・ウィンドウは、Shift + F4 で開きます。


JavaScriptにおける暗黙（暗黒）の常識

● 比較演算は、自動型変換を行わない === や !== を使う

想定外の判定となる暗黙の型変換を避けるため、暗黙の型変換を行う == や != は、使わない。

● null は、オブジェクトである。XXX がnull か否かを判断するには、XXX === null を利用する。typeof XXX だと object を返すので使わない。

● オブジェクトは、プロトタイプチェーン付きの連想配列である。

参考先JavaScript: The Good Parts 「良いパーツ」によるベストプラクティス

オライリー・ジャパン Douglas Crockford 著、水野貴明訳付録A ひどいパーツ　付録B 悪いパーツより


オブジェクトリテラル中の get 宣言について

プロパティの getter となる関数を指定する演算子でした。

getter に引数なし、setter に引数１個に規定した「同名」の関数を定義することで、関数を値プロパティのように扱えるようにする演算子だそうです。

参照先Web technology for developers > JavaScript > JavaScript リファレンス > 演算子https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

Web technology for developers > JavaScript > JavaScript Reference > Operators > gethttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/get

Web technology for developers > JavaScript > JavaScript Reference > Operators > sethttps://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/set

Objectが持っている演算子だった...不勉強

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/get

https://developer.mozilla.org/ja/docs/JavaScript/Reference/Operators/set


オブジェクトリテラル中の get 宣言について

var sａmple = { valX : 1, get x(){ return this.valX; }, set x(val){ this.valX = val; }};alert(sample.x); // 1表示sumple.x=2;alert(sample.x); // 2表示

左のサンプルでは、プロパティx値が存在するように振る舞わせるために、

get でvalX内容を取得する関数を定義して、xプロパティ値読み出し時に、自動的にvalX値を読み出すようにしています。


import キーワードでしていたこと

Importキーワードは、

Components.utils.import として使われていました。

このコンポーネントは、同じ内容(複製元)を重複定義しないよう、

異なる場所から同じコードをインポート/読み込みした時に、

それぞれのモジュールのコードを一度だけ、分自身のスコープの中で評価するそうです。

Firefoxのコンポーネントだったのですね。


import キーワードでしていたこと

Components.utils.import

使用例:var scope1 = {}, scope2 = {};Components.utils.import("resource://gre/modules/JSON.jsm", scope1);Components.utils.import("resource://gre/modules/JSON.jsm", scope2);assert(scope2.XPCOMUtils === scope1.XPCOMUtils);...true を返します。

拡張子 JSM のファイルは、JavaScript コードモジュール (JSM) とよばれる Components.utils.import用ファイル形式だそうです。（内容は、JavaScriptファイル）

参照先Components.utils.importhttps://developer.mozilla.org/ja/docs/Components.utils.import

XUL > XUL School Tutorial > JavaScript Object Managemen （JavaScriptコードモジュール）https://developer.mozilla.org/ja/docs/XUL/School_tutorial/JavaScript_Object_Management

https://developer.mozilla.org/ja/docs/Components.utils.import

https://developer.mozilla.org/ja/docs/XUL/School_tutorial/JavaScript_Object_Management


情報隠蔽（public/privateプロパティ）

//new 実行でインスタンス生成(複製)が可能なオブジェクトvar　AccessControl = (function(){ // 非公開プロパティ var _private = { x : 0, }; //公開プロパティ var _public = { getX : function(){ return _private.x; }, setX : function(x){ _private.x = x; }, }; //_publicプロパティ名のみ外部に公開 return _public;});

情報隠蔽の仕組み

1.関数ごとに関数スコープ　(スコープオブジェクト)が　生成され、関数のメンバは　親子関数外のスコープから　隔離される。

2.関数実行時には、return文で　任意のオブジェクトを返却

→ 　できる外部に公開できる

以上から、関数実行において外部に公開したいオブジェクトのみを返却する事で、アクセス制御が実現できます。

スコープオブジェクト：　スコープ用の連想配列

（注意）new AccessControl() で、インスタンスのように　　　個別のオブジェクトが取得されます。　　　ただし、prototype へのメソッド設定が無いので、　　　メソッド（メンバ関数）は、リンクでなく全て複製されます。


情報隠蔽（public/privateプロパティ）

（補足）一般的には、JavaScript オブジェクトのprivateプロパティ名や　メソッド名の先頭に、"_" を付けて見分け易くするそうです。

//情報隠蔽サンプルの挙動確認console.log("Access="+typeof AccessControl);var a = new AccessControl();var b = new AccessControl();a.setX(1);console.log("a.x="+a.x);console.log("b.x="+b.x);console.log("a.getX()="+a.getX());console.log("b.getX()="+b.getX());console.log("end");

//結果出力Access=functiona.x=undefinedb.x=undefineda.getX()=1b.getX()=0end

参照先JavaScript Object ManagementXUL > XUL School Tutorial > JavaScript Object Managementhttps://developer.mozilla.org/ja/docs/XUL/School_tutorial/JavaScript_Object_Management

Privateなプロパティが隠蔽されました。

https://developer.mozilla.org/ja/docs/XUL/School_tutorial/JavaScript_Object_Management


（補足） strict 指定について

標準アプリとシミュレータ(r2d2b2g)をgrepした限りですが、Mojillaさんは strict 指定を利用されていました。

sctrict （厳格）指定は、問題となる記述法を排除するためや、JavaScript エンジンによる最適化処理を改善するため、および、将来の ECMAScript で定義される予定の構文を禁止するために、JavaScript の挙動に制限を付けるそうです。

【注意】strict モードは、アプリ内の全てのスクリプト・コード　　　　に対して適用されるので、外部ソースのJavaScriptや　　　　　ライブラリも影響を受けるそうです。参照先MDN Web technology for developers JavaScript Strict モードhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

MDN JavaScript style guidehttps://developer.mozilla.org/ja/docs/JavaScript_style_guideコーディング規約(JavaScript style guide)についての記載です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode

https://developer.mozilla.org/ja/docs/JavaScript_style_guide


スコープについての

私的まとめ


JavaScriptにおける関数スコープについて

キーポイント● JavaScript では、関数ごとにスコープ・オブジェクト(スコープ/名前空間)が適用される。

このため入れ子関数の子関数には、子関数用の名前空間(スコープ)が適用される。

● 子関数中で解決できない名前は、親関数(オブジェクト)から探して利用することになる。

この仕組みは、JavaScriptプログラムにおいて、クロージャと呼ばれる概念で重用されている

【注意】this付きでないプロパティ名の場合のみ、親関数スコープまで検索します。

　this付きのプロパティ名のスコープは、this が親スコープを表わすよう限定されます。

● 注意事項として、親関数内でも見つからないとグローバルのスコープも検索されます。

親関数内でも見つからなかった場合、this 付きでないプロパティ名は、

グローバルのスコープまで検索します。

● 親関数内でもグローバル・スコープでも見つからなかった場合は、

this 付きのプロパティ名は、undefined に、

this 付きでないプロパティ名は、プロパティ名 not found エラーになります。


【補足】オブジェクトリテラルでの兄弟参照

オブジェクトリテラルを使ったオブジェクト定義では、

this が重要

　関数内では、関数スコープが適用されるので、　オブジェクトリテラルでのオブジェクト定義では、　同じ親の兄弟プロパティ(値や関数)であっても、　this を付けないとアクセスできません。

this を付けることで、自己関数の親スコープが基準となります。

　　ただし子以下の入れ子関数の場合は、　　兄弟でないためthisをつけてもアクセスできません。


(1-A)プロパティ名valが、親関数外のプロパティ(objectのプロパティ)の場合

val = "global"; var object = { val : "object", inner1Func : function(){ alert("in1Func="+this.val);　//(1-A)常にobject var inner2Func = function (){ alert("in2Func="+this.val); //(1-A)常にglobal var inner3Func = function(){ alert("in3Func="+this.val); //(1-A)常にglobal } inner3Func(); } inner2Func(); } }; obj.inner1Func();



(1-A)常に in1Func=object in2Func=global in3Func=global と表示される。

(1-B)ちなみにグローバルスコープのプロパティ名を val のままで、

　　 this.val を val とした場合は、

　　 in1Func in2Func in3Func が global になる。

(1-C)ちなみにグローバルスコープのプロパティ名を globalVal など、

　　 object のプロパティ名と重ならないようにして、

　　 this.val とした場合は、

　　 in2Func in3Func が undefined になる。

(1-D)さらにグローバルスコープのプロパティ名を globalVal など、

　　 object のプロパティ名と重ならないようにして、

　　 this.val でなく valとした場合は、

　　 in1Func in2Func in3Func で val が not defined エラーになる。



(1-A)の例では、sampleオブジェクトのプロパティ名 val は、子関数で解決できない上に、親関数内にも存在しないので、グローバル・スコープを検索すると同名のプロパティ名が存在したため、グローバル・スコープの val が参照された。


(2-A)プロパティ名valが、親関数内のプロパティの場合

val = "global"; var object = { inner1Func : function(){ var val = "object"; alert("in1Func="+val);　//(2-A)常にobject var inner2Func = function (){ alert("in2Func="+val); //(2-A)常にobject var inner3Func = function(){ alert("in3Func="+val); //(2-A)常にobject } inner3Func(); } inner2Func(); } }; obj.inner1Func();



(2-A)常に in1Func=object in2Func=object in3Func=object と　　表示される。(2-B)ちなみにグローバルスコープのプロパティ名が　　 val のままで、　　 val を this.val にした場合は、　　 in1Func が undefined in2Func in3Func が global になる。(2-C)さらにグローバルスコープのプロパティ名を　　 globalVal など、　　 object のプロパティ名と重ならないようにして、　　 this.val とした場合は、　　 in1Func in2Func in3Func が undefined になる。



(2-A)の例では、sampleオブジェクトのプロパティ名 val は、親関数内に存在するので、子関数以下で解決できない場合でも、親関数への検索でプロパティ名が解決できるため、親/子/孫関数の全てで object とされた。


JavaScriptにおけるオブジェクト・スコープ

キーポイント● JavaScript では、オブジェクトごとにスコープ・オブジェクト(スコープ/名前空間)が適用される。

● 子オブジェクトで解決できない名前は、親オブジェクトから解決されない(自動探索されない)。子オブジェクトで解決できない名前は、undefinedとなる。

● オブジェクト・スコープ内での this は、親スコープを表さないようである。オブジェクト・スコープ内での this は、定義時のトップスコープを表すようです。(var obj = { in1Val:"１", in2 : { in2Val: this.in1Val } }; ← in2Valは、undefined)(var in1V="g1"; var obj = { in1V:"１", in2 : { in2V: this.in1V } }; ← in2Vは、g1 obj 右辺のトップ・オブジェクト{}の定義時スコープは、グローバルなので、子オブジェクトも前記に従属するため in2Vの this はグローバルを表す)

● 任意のオブジェクト・スコープ内のプロパティは、アクセス元のスコープを起点とした、オブジェクト連鎖名でアクセスする。(var obj = { in2 : { in2V: "2" } }; ← グローバル・スコープを起点とすると　　　　　　　　　　　　　　　　　　　　　　　　　　in2Vは、obj.in2.in2V)　　　


(3-A)オブジェクト・スコープ（入れ子）の場合

var in1A="global.in1A!";var in2A="global.in2A!";var sample = { in1 : { in1A : "in1A!", in2 : { in2A : "in2A!", /* this.sample undefined エラーとなる ( プロパティ名 sample は、オブジェクト・スコープ定義後(評価後)に代入されるため、オブジェクト定義時には存在しないので undefined となる) in2B : sample.in1.in1A, in2C : sample.in1.in2.in2A, in2D : this.sample.in1.in1A, in2E : this.sample.in1.in2.in2A, */ in2F : this.in1A, in2G : this.in2A, //global.in1A! global.in2A! in2H : in1A, in2I : in2A, //global.in1A! global.in2A! } }};

定義内容１



var sample2 = { in1 : { in1A : "in1A2!", in2 : { in2A : "in2A2!", 　 /* プロパティ名 sample は、前オブジェクト・スコープ定義後(評価後)に代入されて、当該オブジェクト定義時には存在するので参照可能 */ in2B : sample.in1.in1A, //in1A! in2C : sample.in1.in2.in2A, //in2A! in2D : this.sample.in1.in1A, //in1A! in2E : this.sample.in1.in2.in2A, //in2A! } }};

定義内容２



console.log("sample.in1.in1A="+sample.in1.in1A); //in1A!console.log("sample.in1.in2.in2A="+sample.in1.in2.in2A); //in2A!console.log("this.sample.in1.in1A="+this.sample.in1.in1A); //in1A!console.log("this.sample.in1.in2.in2A="+this.sample.in1.in2.in2A); //in2A!/* 定義時に undefined エラーとされるため、未定義となるので除外console.log("sample.in1.in2.in2B="+sample.in1.in2.in2B); //undefinedconsole.log("sample.in1.in2.in2C="+sample.in1.in2.in2C); //undefinedconsole.log("sample.in1.in2.in2D="+sample.in1.in2.in2D); //undefinedconsole.log("sample.in1.in2.in2E="+sample.in1.in2.in2E); //undefined*/console.log("sample.in1.in2.in2F="+sample.in1.in2.in2F); //global.in1Aconsole.log("sample.in1.in2.in2G="+sample.in1.in2.in2G); //global.in2Aconsole.log("sample.in1.in2.in2H="+sample.in1.in2.in2H); //global.in1Aconsole.log("sample.in1.in2.in2I="+sample.in1.in2.in2I); //global.in2A

console.log("sample2.in1.in1A="+sample2.in1.in1A); //in1A2!console.log("sample2.in1.in2.in2A="+sample2.in1.in2.in2A); //in2A2!console.log("this.sample2.in1.in1A="+this.sample2.in1.in1A); //in1A2!console.log("this.sample2.in1.in2.in2A="+this.sample2.in1.in2.in2A); //in2A2!

console.log("sample2.in1.in2.in2B="+sample2.in1.in2.in2B); //in1A!console.log("sample2.in1.in2.in2C="+sample2.in1.in2.in2C); //in2A!console.log("sample2.in1.in2.in2D="+sample2.in1.in2.in2D); //in1A!console.log("sample2.in1.in2.in2E="+sample2.in1.in2.in2E); //in2A!

定義内容確認


that 表現は、使われない？

【補足】

JavaScript 本でよく紹介される

入れ子関数中で this を保管する that 表現については、

標準アプリのギャラリー、カレンダー、クロックとシミュレータ(r2d2b2g)をgrepした限りですが、

Mojillaさんでは、that を使用されていないようでした。

（thisは、もちろん多用されていました）　



むすび

JavaScriptは、あくまで実装者が自己規約を設定して、実装上の工夫でオブジェクト指向プログラムを

行っているのが現状と思います。

高階関数やクロージャの概念が扱えますが、　　　　　　モンキーパッチにより全体を破綻させることもできます。

　　とても言語全体を見渡せた訳ではありませんが、　　JavaScriptは、現代のアセンブラなのだと思いました。

　どのような原理により動作しているのかを理解すれば、アセンブラのように強力な作用を与えることができるからです。


ご清聴

ありがとうございました。


【おまけ】端末サイズを変更したシミュレータ

タブレットのような大きな画面でもアプリの挙動が確認できたらいいなと思い、サイズを変更したシミュレーターも起動してみました。

注意アドオンの FirefoxOS シミュレータでなく、Mozilla Firefox OS B2G デスクトップクライアントを使用します

参照先Firefox Developer Tools 開発ツール Firefox OS Simulatorhttps://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator

Firefox OS Simulator の画面サイズを変えるhttp://y-anz-m.blogspot.jp/2013/03/firefox-os-simulator.html( …私の環境では、実用的な画面サイズ変更ができませんでした )

https://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator

http://y-anz-m.blogspot.jp/2013/03/firefox-os-simulator.html



B2G デスクトップクライアントについて

Mozilla Firefox OS B2G デスクトップクライアントは、ナイトリービルドされた最新のバイナリが

提供されています。

ですので、自分でコンパイルする必要はありません。

参照先Mozilla Firefox OS B2G デスクトップクライアントを使用するhttps://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client

https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client



B2G デスクトップクライアントＤＬ先

Mozilla Firefox OS B2G デスクトップクライアントは、以下の ftp サーバで公開されています。

【注意】私の環境では、　　　　Central(2013/09/28)だとロック画面から進めなかったので、　　　　別ページの安定版(b2g-18.0.multi.linux-i686-localizer.tar.bz2)を　　　　利用しました。

参照先Central：Index of /pub/mozilla.org/b2g/nightly/latest-mozilla-centralhttp://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/

安定版：Index of /pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/

http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/

http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-b2g18/



B2G デスクトップクライアント・インストールと起動

インストールは、ダウンロード・ファイルを展開するだけです。起動するには、コンソールで展開先のディレクトリに移動し、以下のコマンドで b2g-bin を実行してください。

$ cd 展開先ディレクトリ [Enter]$ ./b2g-bin -profile gaia/profile --screen=1024x600@240 [Enter]

--screen が、画面サイズ指定のオプションです。例の内容は、幅1024pix、高600pix、画面密度240dpiとしています。画面サイズを直接設定するだけでなく、特定の端末の大きさに合わせることもできます。詳しくは、「Mozilla Firefox OS B2G デスクトップクライアントを使用する」のコマンドラインオプションを参照ください。



注意：画面にはホームボタンがないので、PC キーボードの HOME キーを利用します。Linux → Home:homeKey, Power:EndKey, Volume:PageUpDownMac → Home:fn+left arrow, Power:fn + right arrow, Volume:fn + pdown arrows

画面は、大きくなりましたが、レイアウトが問題ですね。


【おまけ】シミュレータの端末サイズを変更する

B2G デスクトップクライアントにアプリをインストールする

開発中のパッケージ型アプリをインストールするには、シミュレータのインストール・アプリケーションが配置されているフォルダ.../extensions/[email protected]/profile/webapps から、

　　任意のアプリのフォルダを　　B2G デスクトップクライアントの　　インストール・アプリケーション配置先フォルダ　　.../b2g/gaia/profile/webapps にコピーします。


【おまけ】シミュレータの端末サイズを変更する

B2G デスクトップクライアントにアプリをインストールする

更に、シミュレータ側の .../extensions/[email protected]/profile/webapps/webapps.json の

当該アプリの項目を　

B2G デスクトップクライアント側の .../b2g/gaia/profile/webapps/webapps.json に追加します。

【注意】インストール用のページを作成する等　　　　他にもっと良い方法があると思います

Documents

FirefoxOSで学ぶJavaScript作法