Firefox 学生マーケティングチーム・開発チームでは、大学生へのFirefoxの普及を目的として、”Firefox学生向けアドオンパック”を企画・開発しています。このプレゼンテーションではアドオンパックのコンセプト・機能・実装についてお話ししています。

1. 学生マーケティング会議企画 Powered by Mozilla 学生マーケティング Firefox 学生向けアドオンパック × × × × ×

2. スピーカー紹介 佐藤文毅 上智大学法学部法律学科４年 会議メンバーで数少ない文系 パソコンに関する知識が無いため、会議の内容についていけないこともしばしば

3. スピーカー紹介 守山晃生 元学生 ( 社会人 1 年目 ) 昨年 11 月の Firefox Developer Conference 2009 の発表後から参加 http: //mozilla .jp/events/2009/fxdevcon/ 開発チーム id: cou929

4. 学生向けアドオンパックのコンセプト

5. Firefox を学生に広めるために頑張っています Mozilla Japan で行われる学生向けのプロモーションやイベントのアイデア出しをするミーティングをしています メンバーは全員学生 ミーティングは、お菓子を食べながら結構軽い感じでやってたりｗ 学生マーケィング会議って ??

6. IE よりも 玄人 向け；； アドオン ？ Personas ？ なにそれ？ 理系 大学生も 意外と知りません・・・

7. 実は… 使うと IE には戻れなくなる 友達に使ってもらうと意外と好反応！！ 自分好みにカスタマイズできちゃう !

8. もっと Firefox を広めるために･･･ 学生が欲しい機能を盛り込んだ アドオンパック を作ろう！！

9. 学生にとって便利な機能満載に 初心者でも使いやすい Firefox を使ったことがない人でも使える インターネット＝ IE と思っている人でも ( 以下略 ) PC をあまり触らないひとでも なんでこんな機能がついてるの？ -> へぇー Firefox っていうんだ！ を目指して きっかけづくり 学生向けの Firefox を作ろう !

10. どんな機能があったらいい ?

11. 全部実装すると… こんなのだったり

12. ごちゃごちゃしてわかりづらい 初心者にはとっつきにくすぎる？ 怖い、意味分かんない いろんな機能があっても使わない てか、使えない 「直感的に使えるもの」 に絞ることでライトユーザー向けにしようよ！ まずは興味を持ってもらう。 はじめの一歩に！ 全部実装すると…

13. アドオンパックの中身 ① Personas ② Undo Closed Tab Button ③ ステータスバーに Yahoo! の天気予報を ④ Linkification ⑤ オススメアドオン紹介 ⑥ フォクすけの Firefox サポート ⑦ 論文検索オプション ⑧ 次電 + ( つぎでんぷらす ) 既存のアドオン オリジナル アドオン

14. ① 初心者でも使いやすいか ② 学生のニーズに合っているか ③ 直感的に便利、もしくは斬新だと思ってもらえるか （いままで使っていたブラウザより良いと思えることが大事） 既存のアドオンの選択基準

15. 学生向けアドオンパックの使い方 https://dev.mozilla.jp/campus/

16. インストール 初回起動ページ Personas の選択

17. 収録アドオン 既存のアドオン 4 つ オリジナルアドオン 4 つ

18. 既存のアドオン Personas plus https: //addons . mozilla .org/en-US/firefox/addon/10900 Undo Closed Tab Button https: //addons . mozilla .org/en-US/firefox/addon/3082 ステータスバーに Yahoo! 天気予報を https: //addons . mozilla .org/en-US/firefox/addon/77194 Linkification https: //addons . mozilla .org/en-US/firefox/addon/190

19. Personas plus 簡単に見た目を変更

20. Undo Closed Tab Button 閉じたタブを復元 初心者は重宝

21. ステータスバーに Yahoo! 天気予報を ステータスバーに天気予報を表示

22. Linkification URL をかしこくリンクに変換

23. オリジナルアドオン オススメアドオン紹介 フォクすけの Firefox サポート 論文検索オプション 次電 + ( つぎでんぷらす ) https://dev.mozilla.jp/campus/what/

24. オススメアドオン紹介 今見ているサイトをさらに使いやすくしてくれるアドオンをサイト別に紹介

25. オススメアドオン紹介 初心者ユーザのアドオンに関する興味を高め , Firefox のカスタマイズに挑戦してもらう

26. フォクすけの Firefox サポート Firefox 初心者のためのヘルプ機能 Google で Firefox に関する質問を検索 ポップアップを表示 サポートサイトへ誘導 http://support. mozilla . com/ja/

27. 論文検索オプション Google scholar へのリンクを Google の検索結果上部に挿入 理系学生向け

28. 次電 + ( つぎでんぷらす ) よく利用する学校等の最寄駅やバス停の発着時刻を“ OpenTimetable.jp” というサイトに登録 ブラウザの右下に「今出たら、何分の電車やバスに乗れるかが常に表示される 作業に熱中しすぎて電車やバスに 乗り遅れることもなくなります ! OpenTimetable.jp について詳しくは後述

29. OpenTimetable.jp みんなで作る時刻表

30. OpenTimetable.jp 次電 + 旧バージョン 駅探 , google transit のデータ使用を想定 ライセンスの問題で使用できないことが判明 既存の路線探索システムを使うと , その情報を利用する際にライセンスに引っかかってしまう

31. OpenTimetable.jp みんなで作る時刻表 ユーザが時刻表のデータを入力 http://opentimetable.jp/

32. OpenTimetable.jp ライセンスの問題をクリア オープンソースという考え方の啓蒙 特徴 通常の乗換案内サービスで対応できない情報もあつかうことが可能 大学内のバス路線 開発者向け API を提供 誰でも時刻表データを利用可能 (CC BY-SA)

33. OpenTimetable.jp の使い方 検索画面 路線名 , 駅名 , 方面 , 曜日 ( 平日 or 休日 ) を入力

34. OpenTimetable.jp の使い方 検索画面 見つからない場合は入力を促す画面を表示 編集画面へ

35. OpenTimetable.jp の使い方 検索結果

36. OpenTimetable.jp の使い方 検索結果 入力済みのデータも編集可能

37. OpenTimetable.jp の使い方 編集画面

38. OpenTimetable.jp の使い方 1. ラベルを選択 電車の種別など

39. OpenTimetable.jp の使い方 2. 時刻を選択 数字をクリック

40. OpenTimetable.jp の使い方 3. ニックネーム , コメントを入力し確定

41. API 時刻表のデータを取得 http: //opentimetable . jp/dev/api/getTimetable . php パラメータ r: 路線名 p: 駅名 b: 方面 t: 曜日 JSON

42. API 時刻表の 4 要素 ( 路線名 , 駅名 , 方面 , 曜日 ) を取得 http: //opentimetable . jp/api/getTimetables . php JSON

43. 拡張機能の実装

44. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

45. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

46. ブロックスコープ 名前空間を汚染したくない ブロックスコープを実現する

47. 素直な方法 ( ブロックスコープではない ) 1 つのオブジェクトの中で全部済ませる シンプルで簡単 _ などの命名規則が必要 アクセス時に this. または myExtension. が必要 setTimeout() などのコールバックの中で this が切り替わってしまい不便

48. let によるブロックスコープ シンプルで簡単 Firefox2 以降に限定 遅延初期化はプロパティにアクセスさせる必要

49. クロージャを用いた方法 this が必要ない グローバルなつもりで使えるので , コールバック関数内でも使いやすい よく利用されており , 書きやすい・読みやすい 全体が 1 つの関数になるため , デバッグの際に各メソッドに対してブレークポイントを設定できない

50. クロージャを用いた方法 2 new コンストラクタを用いる 特徴は先ほどと同様

51. with を用いた方法 ブレークポイント設置可能 anonymous object 内での変数・関数の定義では this を気にする必要がある 定義が複雑化すると , this の扱いが面倒

52. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

53. JS Modules js のコードをモジュール化 拡張からインポートして使う 特徴 コードの再利用が可能 一度読み込んだモジュールをキャッシュ 2 回目以降のロードではキャッシュされたモジュールが返される パフォーマンス的にも有利 シングルトンのオブジェクトのように使える

54. モジュールの定義 - JS Modules my_modules.jsm EXPORTED_SYMBOLS エクスポートするオブジェクトを入れる 注意点 window, document などの一般的な環境ならば存在するオブジェクトがない XMLHttpRequest オブジェクトなどもグローバルに存在しない etc. https://developer. mozilla . org /ja/Using_JavaScript_code_modules

55. モジュールの利用 - JS Modules Components.utils.import() 第一引数 : モジュールの URL スキーマは resource か file 標準モジュールでない場合は chrome.manifest で指定 第二引数 : インポートしたオブジェクトを展開したいスコープ ( オブジェクト ) 省略するとグローバル https://developer.mozilla.org /ja/Using_JavaScript_code_modules

56. 他の方法との比較 - JS Modules Performance/Addons/BestPractices https: //wiki . mozilla . org/Performance/Addons/BestPractices

57. 他の方法との比較 - JS Modules XUL 中の <script> で読み込む ウィンドウを開くのが遅くなる 各ウィンドウ毎に別の処理する必要がある場合のみ使う ウィンドウを読み込むごとにモジュールも読み込まれる XPCOM JS Modules の方がシンプルで早い mozIJSSubScriptLoader 読み込みをキャッシュせず , 毎回ロードする

58. JavaScript code modules - MDC バンドルされている ctypes.jsm PluralForm.jsm XPCOMUtils.jsm etc. https://developer.mozilla.org/En/JavaScript_modules

59. Labs/JS Modules Mozilla Labs 製 JSON.js Observers.js Prefereneces.js StringBundle.js Etc. https://wiki.mozilla.org/Labs/JS_Modules

60. Preferences.js Preferences を楽に使う https: //wiki . mozilla . org/Labs/JS_Modules #Preferences 従来 https://developer.mozilla.org/ja/Code_snippets/Preferences

61. Preferences.js set() reset() get()

62. StringBundle.js StringBundle を楽に使う https: //wiki . mozilla . org/Labs/JS_Modules # StringBundle コンストラクタ get()

63. StringBundle.js getAll()

64. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

65. Memorization getter をメモ化 Performance/Addons/BestPractices https: //wiki . mozilla . org/Performance/Addons/BestPractices # Memoization 初回に呼ばれた時 にはじめて作られる 起動時での処理を回避 遅延初期化 以降はキャッシュされたオブジェクトが返る

66. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

67. JavaScript 1.8, 1.8.1 での記法 JavaScript 1.8 : Firefox 3 (Gecko 1.9) Array.reduce() 式クロージャ JavaScript 1.8.1 : Firefox 3.5 (Gecko 1.9.1) String.trim() 参考 https://developer.mozilla.org/ja/New_in_JavaScript_1.8.1 https://developer.mozilla.org/ja/New_in_JavaScript_1.8 https://developer.mozilla.org/ja/New_in_JavaScript_1.7

68. JavaScript 1.8, 1.8.1 での記法 Array.reduce() (1.8) 配列の ( 左から右へ ) 2 つの値に対して同時に関数を適用し , 単一の値にする syntax callback 関数 例 配列内の要素の総和 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Objects/Array/reduce

69. JavaScript 1.8, 1.8.1 での記法 Array.map() (1.6) 配列の要素それぞれに対して関数を適用し , 新たな配列を返す syntax 例 各要素の平方根 https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/map

70. JavaScript 1.8, 1.8.1 での記法 式クロージャ (Expression closures, 1.8) 単純な関数の簡略表現 コールバック関数を書くときなどに便利 https://developer.mozilla.org/ja/New_in_JavaScript_1.8#.e5.bc.8f.e3.82.af.e3.83.ad.e3.83.bc.e3.82.b8.e3.83.a3

71. JavaScript 1.8, 1.8.1 での記法 String.trim() (1.8.1) 文字列の両端の空白を削除 trim(), trimLeft(), trimRight() https://developer.mozilla.org/Ja/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

72. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

73. ロケーションバーの変化の検出 ロケーションバーの URL の変化を検出したい 進む・戻るボタン タブ切り替え ページのロード Progress Listener を使う https://developer. mozilla . org/ja/Code_snippets/Progress_Listeners

74. ロケーションバーの変化の検出 nsIWebProgressListener インタフェースを実装

75. ロケーションバーの変化の検出 作成した Progress Listener を browser か tabbrowser 要素に追加

76. ロケーションバーの変化の検出 unload 時 ( あるいはもっと速く ) に removeProgressListener を呼ぶ

77. Agenda ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress Listeners) インストール済アドオンの取得

78. インストール済みアドオンの取得 現在のプロファイルにインストール済みの拡張を取得したい nsIExtensionManager を使う http: //mxr . mozilla .org/mozilla-central/source/toolkit/mozapps/extensions/nsIExtensionManager. idl

79. インストール済みアドオンの取得 nsIExtensionManager アドオンのインストールや管理の機能を提供 getItemList(2, {}) アドオンの一覧を取得 引数はアドオンの種類 ( 拡張機能なので 2) 返り値は nsIUpdateItems http://www. oxymoronical . com/experiments/apidocs/interface/nsIUpdateItem

80. 今後の予定 リリース 今月中 各大学にインストールしてもらえるよう交渉 PR 活動 ソーシャルメディア イベント開催 etc. 次期バージョンの開発 大学個別のカスタマイズなど

81. 参加者大募集 !! 一緒に企画・開発に携わってくださる学生の方を募集中です サイトごとのオススメアドオンをオススメしてくれる人 OpenTimetable.jp への時刻登録 ( いたずらはやめてね ) ドキュメント , 開発 , etc… お問い合わせは [email_address] まで !!