Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FirefoxOSで学ぶJavaScript作法

関西Firefox OS勉強会 4th GIG で発表したスライドです。
聴講者の皆様には、発表時のスライドが未完成のため途中からスピーチのみとなってしまい、御迷惑をおかけしましたことをお詫びいたします。

  • Be the first to comment

FirefoxOSで学ぶJavaScript作法

  1. 1. 関西Firefox OS勉強会 4th GIG FirefoxOSで学ぶ JavaScript作法 robo 1 FirefoxOSで学ぶ JavaScript作法
  2. 2. 御挨拶 FirefoxOS 勉強会も4回目を向かえ、おかげさまで、 FirefoxOS API を使った実験用の簡単なアプリ作成が できるようになりました。 新しい入門書籍も購入して勉強しましたです。 (^_^) 2 FirefoxOSで学ぶ JavaScript作法
  3. 3. 御挨拶 私ごとですが、FirefoxOSアプリを開発の前に、 標準インストール・アプリ(ソース)を調べて 本当の FirefoxOS アプリの中身を見てみましたが… と、その前に 3 FirefoxOSで学ぶ JavaScript作法
  4. 4. 自己紹介 名前    robo(兼高理恵) ● お仕事   Java 技術者 ●        設計から実装まで 好きなもの  モバイル端末 ● 4 FirefoxOSで学ぶ JavaScript作法
  5. 5. シミュレータ標準アプリのハックについて 既に御存知のかたも多いと思いますが、 FirefoxOS シミュレータ標準アプリのハック (ソース取得)について説明します。 Firefox ブラウザのアドレスバーに about:support と入力して アプリケーション基本情報の表にある プロファイルフォルダの行の 「ディレクトリを開く」ボタンをクリックすると、  Firefox ブラウザの設定ディレクトリが開きます。 HTML5でつくるFirefox OS アプリケーション開発入門 参照:プリインアプリをいじってみよう 発行:秀和システム 著者:管理工学研究所 HTML5技術研究WG さわってみよう Firefox OS in 大阪 参照:起動画面のカスタマイズ http://www.slideshare.net/honmamasashi1/firefox-os-customize14 5 FirefoxOSで学ぶ JavaScript作法
  6. 6. シミュレータ標準アプリのハックについて about:support と入力すると トラブルシューティング情報の 画面が開きます。 6 FirefoxOSで学ぶ JavaScript作法
  7. 7. シミュレータ標準アプリのハックについて Firefox ブラウザの設定ディレクトリが開きます 7 FirefoxOSで学ぶ JavaScript作法
  8. 8. パッケージ型アプリのソースを見る  プリインアプリの配置先は、以下の場所になっています。  [プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp パッケージ型アプリの場合は、 ソース一式のzipファイルがフォルダごとに保管されています。 Clock アプリのソースをハックしたい場合は、 clock.gaiamobile.org フォルダをデスクトップ等にコピーして、 中にある application.zip を展開すれば見ることができます。 8 FirefoxOSで学ぶ JavaScript作法
  9. 9. パッケージ型アプリのソースを見る アプリの配置先は、 [プロファイルフォルダ]/extensions/r2d2b2b/@mozira.org/profile/webapp です。 Clock アプリのソースをハックしたい場合は、 clock.gaiamobile.org フォルダをデスクトップ等に コピーして、中にある application.zip を 展開すれば見ることができます。 9 FirefoxOSで学ぶ JavaScript作法
  10. 10. ソースが見れても JavaScript …判りません orz 勇んでソースの中身を見るも... JavaScript で何をしているのか さっぱり判りませんでした。 疑問点 オブジェクトリテラルの形式で、 クラスを模しているのは判るけど、 コロン':'のない get 関数って何?とか、 importキーワードで何してるの? return で入れ子の関数や オブジェクトを返すのは 何故とか… という訳で、今時の JavaScript 作法について勉強しました。 本格的な Webアプリ開発者の皆様には、退屈と思いますが、 JavaScript に不慣れな Android 開発者の苦闘に、 お付き合いください。 10 FirefoxOSで学ぶ JavaScript作法
  11. 11. 11 FirefoxOSで学ぶ JavaScript作法
  12. 12. JavaScript の予備知識 JavaScript: The Good parts 「良いパーツ」によるベストプラクティス からの引用 1.2 JavaScript を解析する JavaScriptはクラスのないオブジェクトシステムを採用しており、 オブジェクトは別のオブジェクトから直接そのプロパティを継承する。 クラス型のプログラミング言語を学んできたプログラマにはなじみのないものだ。 クラス型のデザインパターンを直接JavaScriptに適用しようとすると、 きっと不満が残るものになるだろう。 Java/Android開発者にとって、重い言葉です。 12 FirefoxOSで学ぶ JavaScript作法
  13. 13. 私の考える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 FirefoxOSで学ぶ JavaScript作法
  14. 14. JavaScript の特殊性について知るために、  まずは、落とし穴について学んでみます。 14 FirefoxOSで学ぶ JavaScript作法
  15. 15. 「肩慣らし」JavaScriptの for ループの罠 「for 内でイベントリスナとか登録するときに  やっちゃいがちな間違い. とその対処法を3つほど.」より 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> 15 FirefoxOSで学ぶ JavaScript作法 問題点 ページ表示すると、 Button1 や Button2 を押しても Button3 と表示されます。
  16. 16. 「肩慣らし」JavaScriptの for ループの罠 問題原因 1.JavaScriptでは、プロパティを所属スコープ内の名前で区別し参照します。 2.新規作成プロパティは、所属スコープ内に作成されます。 3.forブロックには、独自のスコープがなく作成されません。 4.無名関数には、個別の関数スコープが作成されます。 5.無名関数どうしは、内部的に同一名として扱われませんが、 同一スコープ内の同一名称プロパティは、新規作成であっても、 同一先を参照します。 6.ループ処理内で、同一名プロパティにループごとの設定を行なうと、 作成プロパティ名が同一なので、ループ処理すると設定内容が 上書きされてしまいます。 16 FirefoxOSで学ぶ JavaScript作法
  17. 17. 「肩慣らし」JavaScriptの for ループの罠 キーポイント forループ内の 無名関数 では、 個別の関数スコープが作られ、個別のプロパティを格納するが、 forループ内の button オブジェクトは、 ループごとに新規作成したつもりでも、 同一スコープの同一名なので同一ポインタ先の実態を参照する。 このため buttons[0], buttons[1], buttons[2] が参照する button の内容は、最終生成された Button3 の内容になり、 問題が発生した。 17 FirefoxOSで学ぶ JavaScript作法
  18. 18. 「肩慣らし」JavaScriptの for ループの罠 クロージャを使った回避対処 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) { //←無名関数1内 button ② // スコープは無名関数1に属する // 定義時には、ループ毎の④の値がコピーされる return function() { alert(button.innerHTML); //←無名関数2内 button ③ // スコープは無名関数2に属し、ループ毎に生成される // 定義時の内容は、無名関数1から参照することになる // onclick時には、無名関数2に引数が無いこともあり、 // 定義時の値(forで指定された値のコピー)が引き継がれる   }; })(button); //←ループ内 button ④ // 定義時のスコープはforと同じに属する } (感想)何で 18 for 文が、ここまで複雑になるの... FirefoxOSで学ぶ JavaScript作法
  19. 19. JavaScript は、 一筋縄でいかず、侮りがたし ...と心した所で、 Firefox OSのアプリやシミュレータの ソースを見て思いました疑問点や、 JavaScript への不安点の克服を 今時の作法から学んでみます 19 FirefoxOSで学ぶ JavaScript作法
  20. 20. 疑問と不安点の(独自)解決編 ここからは、 今時の JavaScript の作法に追いつくよう、 私が学んでみた結果をまとめてみました。 Webアプリに詳しいみなさま   いたらぬ点につきましては、  御指導をお願いいたします。  20 FirefoxOSで学ぶ JavaScript作法
  21. 21. スクラッチパッド・ウィンドウについて 以降のサンプルは、Firefoxブラウザで実行できます。 Firefox で、JavaScriptを直接実行するには、 Shift + F4 で、スクラッチパッド・ウィンドウを開きます。 スクラッチパッドは、直接 JavaScript が記述でき、 メニューから実行することができるウィンドウです。 ツール > Web開発 > Webコンソール で コンソールを開けば、console.log(”message”) などを使って ログ出力することもできます。 21 FirefoxOSで学ぶ JavaScript作法
  22. 22. スクラッチパッド・ウィンドウ スクラッチパッド・ウィンドウは、 Shift + F4 で開きます。 スクラッチパッドから、 Webコンソールへの ログ出力も行えます。 22 FirefoxOSで学ぶ JavaScript作法
  23. 23. JavaScriptにおける暗黙(暗黒)の常識 ● 比較演算は、自動型変換を行わない === や !== を使う 想定外の判定となる暗黙の型変換を避けるため、 暗黙の型変換を行う == や != は、使わない。 ● null は、オブジェクトである。 XXX がnull か否かを判断するには、XXX === null を利用する。 typeof XXX だと object を返すので使わない。 ● オブジェクトは、プロトタイプチェーン付きの連想配列である。 参考先 JavaScript: The Good Parts 「良いパーツ」によるベストプラクティス オライリー・ジャパン Douglas Crockford 著、水野貴明 訳 付録A ひどいパーツ 付録B 悪いパーツより 23 FirefoxOSで学ぶ JavaScript作法
  24. 24. オブジェクトリテラル中の get 宣言 について プロパティの getter となる関数を指定する演算子でした。 getter に引数なし、setter に引数1個に規定した「同名」の 関数を定義することで、関数を値プロパティのように扱え るようにする演算子だそうです。 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 FirefoxOSで学ぶ JavaScript作法
  25. 25. オブジェクトリテラル中の get 宣言 について var sample = { 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値を読み出す ようにしています。 FirefoxOSで学ぶ JavaScript作法
  26. 26. import キーワードでしていたこと Importキーワードは、 Components.utils.import として使われていました。 このコンポーネントは、同じ内容(複製元)を重複定義しないよう、 異なる場所から同じコードをインポート/読み込みした時に、 それぞれのモジュールのコードを一度だけ、分自身のスコープの中で 評価するそうです。 Firefoxのコンポーネント だったのですね。 26 FirefoxOSで学ぶ JavaScript作法
  27. 27. 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 FirefoxOSで学ぶ JavaScript作法
  28. 28. 情報隠蔽 (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 へのメソッド設定が無いので、    メソッド(メンバ関数)は、リンクでなく全て複製されます。 FirefoxOSで学ぶ JavaScript作法
  29. 29. 情報隠蔽 (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 FirefoxOSで学ぶ JavaScript作法
  30. 30. (補足) 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 FirefoxOSで学ぶ JavaScript作法
  31. 31. スコープについての 私的まとめ 31 FirefoxOSで学ぶ JavaScript作法
  32. 32. JavaScriptにおける関数スコープについて キーポイント ● JavaScript では、関数ごとにスコープ・オブジェクト(スコープ/名前空間)が適用される。 このため入れ子関数の子関数には、子関数用の名前空間(スコープ)が適用される。 ● 子関数中で解決できない名前は、親関数(オブジェクト)から探して利用することになる。 この仕組みは、JavaScriptプログラムにおいて、クロージャと呼ばれる概念で重用されている 【注意】this付きでないプロパティ名の場合のみ、親関数スコープまで検索します。  this付きのプロパティ名のスコープは、this が親スコープを表わすよう限定されます。 ● 注意事項として、親関数内でも見つからないとグローバルのスコープも検索されます。 親関数内でも見つからなかった場合、this 付きでないプロパティ名は、 グローバルのスコープまで検索します。 ● 親関数内でもグローバル・スコープでも見つからなかった場合は、 this 付きのプロパティ名は、undefined に、 this 付きでないプロパティ名は、プロパティ名 not found エラーになります。 32 FirefoxOSで学ぶ JavaScript作法
  33. 33. 【補足】オブジェクトリテラルでの兄弟参照 オブジェクトリテラルを使った オブジェクト定義では、 this が重要  関数内では、関数スコープが適用されるので、  オブジェクトリテラルでのオブジェクト定義では、  同じ親の兄弟プロパティ(値や関数)であっても、  this を付けないとアクセスできません。 this を付けることで、自己関数の親スコープが基準となります。   ただし子以下の入れ子関数の場合は、   兄弟でないためthisをつけてもアクセスできません。 33 FirefoxOSで学ぶ JavaScript作法
  34. 34. (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 FirefoxOSで学ぶ JavaScript作法
  35. 35. (1-A)プロパティ名valが、親関数外の プロパティ(objectのプロパティ)の場合 (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 エラー になる。 35 FirefoxOSで学ぶ JavaScript作法
  36. 36. (1-A)プロパティ名valが、親関数外の プロパティ(objectのプロパティ)の場合 (1-A)の例では、sampleオブジェクトのプロパティ名 val は、 子関数で解決できない上に、親関数内にも存在しないので、 グローバル・スコープを検索すると同名のプロパティ名が 存在したため、グローバル・スコープの val が参照された。 36 FirefoxOSで学ぶ JavaScript作法
  37. 37. (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 FirefoxOSで学ぶ JavaScript作法
  38. 38. (2-A)プロパティ名valが、 親関数内のプロパティの場合 (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 になる。 38 FirefoxOSで学ぶ JavaScript作法
  39. 39. (2-A)プロパティ名valが、 親関数内のプロパティの場合 (2-A)の例では、sampleオブジェクトのプロパティ名 val は、 親関数内に存在するので、子関数以下で解決できない場合でも、 親関数への検索でプロパティ名が解決できるため、 親/子/孫関数の全てで object とされた。 39 FirefoxOSで学ぶ JavaScript作法
  40. 40. JavaScriptにおけるオブジェクト・スコープ キーポイント ● ● ● ● 40 JavaScript では、オブジェクトごとに スコープ・オブジェクト(スコープ/名前空間)が適用される。 子オブジェクトで解決できない名前は、 親オブジェクトから解決されない(自動探索されない)。 子オブジェクトで解決できない名前は、undefinedとなる。 オブジェクト・スコープ内での this は、親スコープを表さないようである。 オブジェクト・スコープ内での this は、定義時のトップスコープを表すようです。 (var obj = { in1Val:"1", in2 : { in2Val: this.in1Val } }; ← in2Valは、undefined) (var in1V="g1"; var obj = { in1V:"1", in2 : { in2V: this.in1V } }; ← in2Vは、g1 obj 右辺のトップ・オブジェクト{}の定義時スコープは、グローバルなので、 子オブジェクトも前記に従属するため in2Vの this はグローバルを表す) 任意のオブジェクト・スコープ内のプロパティは、 アクセス元のスコープを起点とした、オブジェクト連鎖名でアクセスする。 (var obj = { in2 : { in2V: "2" } }; ← グローバル・スコープを起点とすると                           in2Vは、obj.in2.in2V)     FirefoxOSで学ぶ JavaScript作法
  41. 41. (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 FirefoxOSで学ぶ JavaScript作法 定義内容1 global.in2A! global.in2A!
  42. 42. (3-A)オブジェクト・スコープ(入れ子)の場合 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 FirefoxOSで学ぶ JavaScript作法 定義内容2
  43. 43. (3-A)オブジェクト・スコープ(入れ子)の場合 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 FirefoxOSで学ぶ JavaScript作法 //in1A! //in2A! //in1A! //in2A! //in1A2! //in2A2! //in1A2! //in2A2! 定義内容確認
  44. 44. that 表現は、使われない? 【補足】 JavaScript 本でよく紹介される 入れ子関数中で this を保管する that 表現については、 標準アプリのギャラリー、カレンダー、クロックとシ ミュレータ(r2d2b2g)をgrepした限りですが、 Mojillaさんでは、that を使用されていないようでした。 (thisは、もちろん多用されていました)  44 FirefoxOSで学ぶ JavaScript作法
  45. 45. 45 FirefoxOSで学ぶ JavaScript作法
  46. 46. むすび JavaScriptは、あくまで実装者が自己規約を設定して、 実装上の工夫でオブジェクト指向プログラムを 行っているのが現状と思います。 高階関数やクロージャの概念が扱えますが、       モンキーパッチにより全体を破綻させることもできます。   とても言語全体を見渡せた訳ではありませんが、   JavaScriptは、現代のアセンブラなのだと思いました。  どのような原理により動作しているのかを理解すれば、 アセンブラのように強力な作用を与えることができるからです。 46 FirefoxOSで学ぶ JavaScript作法
  47. 47. ご清聴 ありがとうございました。 47 FirefoxOSで学ぶ JavaScript作法
  48. 48. 【おまけ】端末サイズを変更したシミュレータ タブレットのような大きな画面でも アプリの挙動が確認できたらいいなと思い、 サイズを変更したシミュレーターも起動してみました。 注意 アドオンの 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 FirefoxOSで学ぶ JavaScript作法
  49. 49. 【おまけ】端末サイズを変更したシミュレータ 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 FirefoxOSで学ぶ JavaScript作法
  50. 50. 【おまけ】端末サイズを変更したシミュレータ B2G デスクトップクライアントDL先 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 FirefoxOSで学ぶ JavaScript作法
  51. 51. 【おまけ】端末サイズを変更したシミュレータ B2G デスクトップクライアント・インストールと 起動 インストールは、ダウンロード・ファイルを展開するだけです。 起動するには、コンソールで展開先のディレクトリに移動し、 以下のコマンドで b2g-bin を実行してください。 $ cd 展開先ディレクトリ [Enter] $ ./b2g-bin -profile gaia/profile --screen=1024x600@240 [Enter] --screen が、画面サイズ指定のオプションです。 例の内容は、幅1024pix、高600pix、画面密度240dpiとしています。 画面サイズを直接設定するだけでなく、特定の端末の大きさに合わせることもできます。 詳しくは、「Mozilla Firefox OS B2G デスクトップクライアントを使用する」の コマンドラインオプションを参照ください。 51 FirefoxOSで学ぶ JavaScript作法
  52. 52. 【おまけ】端末サイズを変更したシミュレータ 画面は、大きくなりましたが、 レイアウトが問題ですね。 注意:画面にはホームボタンがないので、PCキーボードの HOME キーを利用します。 Linux → Home:homeKey, Power:EndKey, Volume:PageUpDown Mac → Home:fn+left arrow, Power:fn + right arrow, Volume:fn + pdown arrows 52 FirefoxOSで学ぶ JavaScript作法
  53. 53. 【おまけ】シミュレータの端末サイズを変更する B2G デスクトップクライアントに アプリをインストールする 開発中のパッケージ型アプリをインストールするには、 シミュレータのインストール・アプリケーションが 配置されているフォルダ .../extensions/r2d2b2g@mozilla.org/profile/webapps から、   任意のアプリのフォルダを   B2G デスクトップクライアントの   インストール・アプリケーション配置先フォルダ   .../b2g/gaia/profile/webapps にコピーします。 53 FirefoxOSで学ぶ JavaScript作法
  54. 54. 【おまけ】シミュレータの端末サイズを変更する B2G デスクトップクライアントに アプリをインストールする 更に、シミュレータ側の .../extensions/r2d2b2g@mozilla.org/profile/webapps/webapps.json の 当該アプリの項目を  B2G デスクトップクライアント側の .../b2g/gaia/profile/webapps/webapps.json に追加します。 【注意】インストール用のページを作成する等     他にもっと良い方法があると思います 54 FirefoxOSで学ぶ JavaScript作法

×