FirefoxOSで学ぶJavaScript作法

関西Firefox OS勉強会 4th GIG

FirefoxOSで学ぶ
JavaScript作法
ｒｏｂｏ
1

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

御挨拶
FirefoxOS 勉強会も４回目を向かえ、おかげさまで、
FirefoxOS API を使った実験用の簡単なアプリ作成が
できるようになりました。
新しい入門書籍も購入して勉強しましたです。 (^_^)

2


御挨拶
私ごとですが、FirefoxOSアプリを開発の前に、
標準インストール・アプリ(ソース)を調べて
本当の FirefoxOS アプリの中身を見てみましたが…
と、その前に

3


自己紹介

名前　　　　robo（兼高理恵）

●

お仕事　　　Ｊａｖａ技術者

●

　　　　　　　設計から実装まで
好きなもの　　モバイル端末

●

4


シミュレータ標準アプリのハックについて
既に御存知のかたも多いと思いますが、
FirefoxOS シミュレータ標準アプリのハック
(ソース取得)について説明します。
Firefox ブラウザのアドレスバーに
about:support と入力して
アプリケーション基本情報の表にある
プロファイルフォルダの行の
「ディレクトリを開く」ボタンをクリックすると、
　Firefox ブラウザの設定ディレクトリが開きます。
HTML5でつくるFirefox OS アプリケーション開発入門参照：プリインアプリをいじってみよう
発行：秀和システム著者：管理工学研究所 HTML5技術研究WG
さわってみよう Firefox OS in 大阪参照：起動画面のカスタマイズ
http://www.slideshare.net/honmamasashi1/firefox-os-customize14
5



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

6



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

7


パッケージ型アプリのソースを見る
　プリインアプリの配置先は、以下の場所になっています。
　[プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp

パッケージ型アプリの場合は、
ソース一式のzipファイルがフォルダごとに保管されています。
Clock アプリのソースをハックしたい場合は、
clock.gaiamobile.org フォルダをデスクトップ等にコピーして、
中にある application.zip を展開すれば見ることができます。

8


パッケージ型アプリのソースを見る
アプリの配置先は、
[プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp です。

Clock アプリのソースをハックしたい場合は、
clock.gaiamobile.org フォルダをデスクトップ等に
コピーして、中にある application.zip を
展開すれば見ることができます。
9


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

疑問点
オブジェクトリテラルの形式で、
クラスを模しているのは判るけど、
コロン':'のない get 関数って何？とか、
importキーワードで何してるの？
return で入れ子の関数や
オブジェクトを返すのは
何故とか…
という訳で、今時の JavaScript 作法について勉強しました。
本格的な Webアプリ開発者の皆様には、退屈と思いますが、
JavaScript に不慣れな Android 開発者の苦闘に、
お付き合いください。
10


11


JavaScript の予備知識

JavaScript: The Good parts
「良いパーツ」によるベストプラクティスからの引用
1.2 JavaScript を解析する
JavaScriptはクラスのないオブジェクトシステムを採用しており、
オブジェクトは別のオブジェクトから直接そのプロパティを継承する。
クラス型のプログラミング言語を学んできたプログラマにはなじみのないものだ。
クラス型のデザインパターンを直接JavaScriptに適用しようとすると、
きっと不満が残るものになるだろう。

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

12


私の考えるJavaScriptの不安点
JavaScriptの言語仕様では、
パッケージが使えない、クラスが存在しない。
言語仕様(標準機能)としてのアクセススコープ制限
(private/public)がない。
ブロックスコープが無く、関数スコープしかない。
インターフェースが使えない。(処理の抽象化が講じれない)
...でもフォクすけ君のために頑張ってみます。
参考先
オブジェクト指向 JavaScript 入門
https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
JavaScript: The Good Parts 「良いパーツ」によるベストプラクティス
オライリー・ジャパン Douglas Crockford 著、水野貴明訳
13


JavaScript の特殊性について知るために、
　まずは、落とし穴について学んでみます。

14


「肩慣らし」JavaScriptの for ループの罠
「for 内でイベントリスナとか登録するときに
　やっちゃいがちな間違い. とその対処法を３つほど.」より

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

<head>
<title>ループ内の同一名称属性扱いテスト</title>
</head>
<body>
　　<button>Button 1</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>
15


問題点
ページ表示すると、
Button1 や Button2 を押しても
Button3 と表示されます。

問題原因
1.JavaScriptでは、プロパティを所属スコープ内の名前で区別し参照します。
2.新規作成プロパティは、所属スコープ内に作成されます。
3.forブロックには、独自のスコープがなく作成されません。
4.無名関数には、個別の関数スコープが作成されます。
5.無名関数どうしは、内部的に同一名として扱われませんが、
同一スコープ内の同一名称プロパティは、新規作成であっても、
同一先を参照します。
6.ループ処理内で、同一名プロパティにループごとの設定を行なうと、
作成プロパティ名が同一なので、ループ処理すると設定内容が
上書きされてしまいます。

16


キーポイント
forループ内の無名関数では、
個別の関数スコープが作られ、個別のプロパティを格納するが、
forループ内の button オブジェクトは、
ループごとに新規作成したつもりでも、
同一スコープの同一名なので同一ポインタ先の実態を参照する。
このため buttons[0], buttons[1], buttons[2] が参照する
button の内容は、最終生成された Button3 の内容になり、
問題が発生した。

17


クロージャを使った回避対処
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と同じに属する
}

（感想）何で
18

for 文が、ここまで複雑になるの...


JavaScript は、
一筋縄でいかず、侮りがたし
...と心した所で、
Firefox OSのアプリやシミュレータの
ソースを見て思いました疑問点や、
JavaScript への不安点の克服を
今時の作法から学んでみます

19


疑問と不安点の（独自）解決編
ここからは、
今時の JavaScript の作法に追いつくよう、
私が学んでみた結果をまとめてみました。

Webアプリに詳しいみなさま　　
いたらぬ点につきましては、　
御指導をお願いいたします。　
20


スクラッチパッド・ウィンドウについて
以降のサンプルは、Firefoxブラウザで実行できます。
Firefox で、JavaScriptを直接実行するには、
Shift + F4 で、スクラッチパッド・ウィンドウを開きます。
スクラッチパッドは、直接 JavaScript が記述でき、
メニューから実行することができるウィンドウです。

ツール > Web開発 > Webコンソールで
コンソールを開けば、console.log(”message”) などを使って
ログ出力することもできます。

21


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

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

22


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

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

●

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

●

オブジェクトは、プロトタイプチェーン付きの連想配列である。
参考先
JavaScript: The Good Parts 「良いパーツ」によるベストプラクティス
オライリー・ジャパン Douglas Crockford 著、水野貴明訳
付録A ひどいパーツ　付録B 悪いパーツより

23


オブジェクトリテラル中の get 宣言について
プロパティの getter となる関数を指定する演算子でした。
getter に引数なし、setter に引数１個に規定した「同名」の
関数を定義することで、関数を値プロパティのように扱え
るようにする演算子だそうです。
Objectが持っている
演算子だった...不勉強

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


オブジェクトリテラル中の 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表示

25

左のサンプルでは、
プロパティx値が存在する
ように振る舞わせるために、
get でvalX内容を取得する
関数を定義して、
xプロパティ値読み出し時に、
自動的にvalX値を読み出す
ようにしています。


import キーワードでしていたこと
Importキーワードは、
Components.utils.import として使われていました。
このコンポーネントは、同じ内容(複製元)を重複定義しないよう、
異なる場所から同じコードをインポート/読み込みした時に、
それぞれのモジュールのコードを一度だけ、分自身のスコープの中で
評価するそうです。

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

26


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.import
https://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
27


情報隠蔽（public/privateプロパティ）
情報隠蔽の仕組み
1.関数ごとに関数スコープ
　(スコープオブジェクト)が
　生成され、関数のメンバは
　親子関数外のスコープから
　隔離される。
2.関数実行時には、return文で
　任意のオブジェクトを返却
　できる → 外部に公開できる
以上から、関数実行において
外部に公開したいオブジェクト
のみを返却する事で、
アクセス制御が実現できます。
スコープオブジェクト：
　スコープ用の連想配列

28

//new 実行でインスタンス生成(複製)が可能なオブジェクト
var　AccessControl = (function(){
//非公開プロパティ
var _private = {
x : 0,
};
//公開プロパティ
var _public = {
getX : function(){ return _private.x; },
setX : function(x){ _private.x = x; },
};
//_publicプロパティ名のみ外部に公開
return _public;
});
（注意）new AccessControl() で、インスタンスのように
　　　個別のオブジェクトが取得されます。
　　　ただし、prototype へのメソッド設定が無いので、
　　　メソッド（メンバ関数）は、リンクでなく全て複製されます。

情報隠蔽（public/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=function
a.x=undefined
b.x=undefined
a.getX()=1
b.getX()=0
end

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

（補足）

一般的には、JavaScript オブジェクトのprivateプロパティ名や　
メソッド名の先頭に、"_" を付けて見分け易くするそうです。
参照先
JavaScript Object Management
XUL > XUL School Tutorial > JavaScript Object Management
https://developer.mozilla.org/ja/docs/XUL/School_tutorial/JavaScript_Object_Management
29


（補足） 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 guide
https://developer.mozilla.org/ja/docs/JavaScript_style_guide
コーディング規約(JavaScript style guide)についての記載です。
30


スコープについての
私的まとめ

31


JavaScriptにおける関数スコープについて
キーポイント
●

JavaScript では、関数ごとにスコープ・オブジェクト(スコープ/名前空間)が適用される。
このため入れ子関数の子関数には、子関数用の名前空間(スコープ)が適用される。

●

子関数中で解決できない名前は、親関数(オブジェクト)から探して利用することになる。
この仕組みは、JavaScriptプログラムにおいて、クロージャと呼ばれる概念で重用されている
【注意】this付きでないプロパティ名の場合のみ、親関数スコープまで検索します。
　this付きのプロパティ名のスコープは、this が親スコープを表わすよう限定されます。

●

注意事項として、親関数内でも見つからないとグローバルのスコープも検索されます。
親関数内でも見つからなかった場合、this 付きでないプロパティ名は、
グローバルのスコープまで検索します。

●

親関数内でもグローバル・スコープでも見つからなかった場合は、
this 付きのプロパティ名は、undefined に、
this 付きでないプロパティ名は、プロパティ名 not found エラーになります。

32


【補足】オブジェクトリテラルでの兄弟参照
オブジェクトリテラルを使った
オブジェクト定義では、
this が重要
　関数内では、関数スコープが適用されるので、
　オブジェクトリテラルでのオブジェクト定義では、
　同じ親の兄弟プロパティ(値や関数)であっても、
　this を付けないとアクセスできません。
this を付けることで、自己関数の親スコープが基準となります。

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


(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();

34


(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 など、
　　 this.val でなく valとした場合は、
　　 in1Func in2Func in3Func で val が not defined エラーになる。

35


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

36


(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();

37


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

38


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

39


JavaScriptにおけるオブジェクト・スコープ
キーポイント
●

●

●

●

40

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!
in2H : in1A,
in2I : in2A,
//global.in1A!
}
}
};

41


定義内容１

global.in2A!
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!
}
}
};

42


定義内容２

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); //undefined
console.log("sample.in1.in2.in2C="+sample.in1.in2.in2C); //undefined
console.log("sample.in1.in2.in2D="+sample.in1.in2.in2D); //undefined
console.log("sample.in1.in2.in2E="+sample.in1.in2.in2E); //undefined
*/
console.log("sample.in1.in2.in2F="+sample.in1.in2.in2F); //global.in1A
console.log("sample.in1.in2.in2G="+sample.in1.in2.in2G); //global.in2A
console.log("sample.in1.in2.in2H="+sample.in1.in2.in2H); //global.in1A
console.log("sample.in1.in2.in2I="+sample.in1.in2.in2I); //global.in2A
console.log("sample2.in1.in1A="+sample2.in1.in1A);
console.log("sample2.in1.in2.in2A="+sample2.in1.in2.in2A);
console.log("this.sample2.in1.in1A="+this.sample2.in1.in1A);
console.log("this.sample2.in1.in2.in2A="+this.sample2.in1.in2.in2A);
console.log("sample2.in1.in2.in2B="+sample2.in1.in2.in2B);
console.log("sample2.in1.in2.in2C="+sample2.in1.in2.in2C);
console.log("sample2.in1.in2.in2D="+sample2.in1.in2.in2D);
console.log("sample2.in1.in2.in2E="+sample2.in1.in2.in2E);

43


//in1A!
//in2A!
//in1A!
//in2A!

//in1A2!
//in2A2!
//in1A2!
//in2A2!

定義内容確認

that 表現は、使われない？
【補足】
JavaScript 本でよく紹介される
入れ子関数中で this を保管する that 表現については、
標準アプリのギャラリー、カレンダー、クロックとシ
ミュレータ(r2d2b2g)をgrepした限りですが、
Mojillaさんでは、that を使用されていないようでした。
（thisは、もちろん多用されていました）　

44


45


むすび
JavaScriptは、あくまで実装者が自己規約を設定して、
実装上の工夫でオブジェクト指向プログラムを
行っているのが現状と思います。
高階関数やクロージャの概念が扱えますが、　　　　　　
モンキーパッチにより全体を破綻させることもできます。

　　とても言語全体を見渡せた訳ではありませんが、
　　JavaScriptは、現代のアセンブラなのだと思いました。
　どのような原理により動作しているのかを理解すれば、
アセンブラのように強力な作用を与えることができるからです。

46


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

47


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

注意
アドオンの FirefoxOS シミュレータでなく、
Mozilla Firefox OS B2G デスクトップクライアントを使用します
参照先
Firefox Developer Tools 開発ツール Firefox OS Simulator
https://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator
Firefox OS Simulator の画面サイズを変える
http://y-anz-m.blogspot.jp/2013/03/firefox-os-simulator.html
(私の環境では、実用的な画面サイズ変更ができませんでした…)

48


B2G デスクトップクライアントについて
Mozilla Firefox OS B2G デスクトップクライアントは、
ナイトリービルドされた最新のバイナリが
提供されています。
ですので、自分でコンパイルする必要はありません。

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

49


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-central

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

50


B2G デスクトップクライアント・インストールと起動
インストールは、ダウンロード・ファイルを展開するだけです。
起動するには、コンソールで展開先のディレクトリに移動し、
以下のコマンドで b2g-bin を実行してください。
$ cd 展開先ディレクトリ [Enter]
$ ./b2g-bin -profile gaia/profile --screen=1024x600@240 [Enter]
--screen が、画面サイズ指定のオプションです。
例の内容は、幅1024pix、高600pix、画面密度240dpiとしています。
画面サイズを直接設定するだけでなく、特定の端末の大きさに合わせることもできます。
詳しくは、「Mozilla Firefox OS B2G デスクトップクライアントを使用する」の
コマンドラインオプションを参照ください。

51



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

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


【おまけ】シミュレータの端末サイズを変更する
B2G デスクトップクライアントに
アプリをインストールする
開発中のパッケージ型アプリをインストールするには、
シミュレータのインストール・アプリケーションが
配置されているフォルダ
.../extensions/r2d2b2g@mozilla.org/profile/webapps から、
　　任意のアプリのフォルダを
　　B2G デスクトップクライアントの
　　インストール・アプリケーション配置先フォルダ
　　.../b2g/gaia/profile/webapps にコピーします。

53


【おまけ】シミュレータの端末サイズを変更する
B2G デスクトップクライアントに
アプリをインストールする
更に、シミュレータ側の
.../extensions/r2d2b2g@mozilla.org/profile/webapps/webapps.json の

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

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


FirefoxOSで学ぶJavaScript作法

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Destacado

Destacado (20)

Más de cch-robo

Más de cch-robo (17)

FirefoxOSで学ぶJavaScript作法