firefox 学生向けアドオンパック
DESCRIPTION
Firefox 学生マーケティングチーム・開発チームでは、大学生へのFirefoxの普及を目的として、”Firefox学生向けアドオンパック”を企画・開発しています。このプレゼンテーションではアドオンパックのコンセプト・機能・実装についてお話ししています。TRANSCRIPT
![Page 1: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/1.jpg)
学生マーケティング会議企画
Powered by Mozilla 学生マーケティング
Firefox 学生向けアドオンパック
×× × × ×
![Page 2: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/2.jpg)
スピーカー紹介
佐藤文毅 上智大学法学部法律学科4年 会議メンバーで数少ない文系 パソコンに関する知識が無いため、会議の内容についていけないこともしばしば
![Page 3: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/3.jpg)
スピーカー紹介
守山晃生 元学生 ( 社会人 1年目 ) 昨年 11月の Firefox
Developer Conference 2009 の発表後から参加 http://mozilla.jp/events/
2009/fxdevcon/ 開発チーム id: cou929
![Page 4: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/4.jpg)
学生向けアドオンパックのコンセプト
![Page 5: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/5.jpg)
Firefox を学生に広めるために頑張っています
Mozilla Japanで行われる学生向けのプロモーションやイベントのアイデア出しをするミーティングをしています
メンバーは全員学生 ミーティングは、お菓子を食べながら結構軽い感じでやってたりw
学生マーケィング会議って ??
![Page 6: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/6.jpg)
IEよりも玄人向け;; アドオン?
Personas?なにそれ?
理系大学生も意外と知りません・・・
![Page 7: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/7.jpg)
実は… 使うと IEには戻れなくな
る
友達に使ってもらうと意外と好反応!!
自分好みにカスタマイズできちゃう !
![Page 8: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/8.jpg)
学生が欲しい機能を盛り込んだ
アドオンパック を作ろう!!
もっともっと FirefoxFirefoxを広めるためにを広めるために・・・・・・
![Page 9: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/9.jpg)
学生にとって便利な機能満載に 初心者でも使いやすい
Firefox を使ったことがない人でも使える インターネット= IE と思っている人でも
( 以下略 ) PC をあまり触らないひとでも
なんでこんな機能がついてるの?→へぇー Firefoxっていうんだ!を目指してきっかけづくり
学生向けの Firefox を作ろう !
![Page 10: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/10.jpg)
どんな機能があったらいい ?
![Page 11: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/11.jpg)
こんなのだったり
全部実装すると…
![Page 12: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/12.jpg)
ごちゃごちゃしてわかりづらい 初心者にはとっつきにくすぎる?
怖い、意味分かんない いろんな機能があっても使わない
てか、使えない
「直感的に使えるもの」に絞ることでライトユーザー向けにしようよ! まずは興味を持ってもらう。 はじめの一歩に!
全部実装すると…
![Page 13: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/13.jpg)
アドオンパックの中身
① Personas② Undo Closed Tab Button ③ ステータスバーに Yahoo! の天気予報を
④ Linkification
⑤ オススメアドオン紹介 ⑥ フォクすけの Firefox サポート ⑦ 論文検索オプション ⑧ 次電+ (つぎでんぷらす )
既存のアド
既存のアド
オンオン
オリジナル
オリジナル
アド
アド
オンオン
![Page 14: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/14.jpg)
①初心者でも使いやすいか②学生のニーズに合っているか③直感的に便利、もしくは斬新だと思ってもらえるか (いままで使っていたブラウザより良いと思えることが大事)
既存のアドオンの選択基準
![Page 15: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/15.jpg)
学生向けアドオンパックの使い方https://dev.mozilla.jp/campus/
![Page 16: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/16.jpg)
インストール
初回起動ページ Personasの選択
![Page 17: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/17.jpg)
収録アドオン
既存のアドオン 4つ オリジナルアドオン 4つ
![Page 18: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/18.jpg)
既存のアドオン
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
![Page 19: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/19.jpg)
Personas plus
簡単に見た目を変更
![Page 20: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/20.jpg)
Undo Closed Tab Button
閉じたタブを復元 初心者は重宝
![Page 21: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/21.jpg)
ステータスバーに Yahoo!天気予報を
ステータスバーに天気予報を表示
![Page 22: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/22.jpg)
Linkification
URLをかしこくリンクに 変換
![Page 23: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/23.jpg)
オリジナルアドオン
オススメアドオン紹介 フォクすけの Firefox サポート 論文検索オプション 次電+ (つぎでんぷらす )
https://dev.mozilla.jp/campus/what/
![Page 24: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/24.jpg)
オススメアドオン紹介
今見ているサイトをさらに使いやすくしてくれるアドオンをサイト別に紹介
![Page 25: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/25.jpg)
オススメアドオン紹介
初心者ユーザのアドオンに関する興味を高め , Firefox のカスタマイズに挑戦してもらう
![Page 26: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/26.jpg)
フォクすけの Firefox サポート
Firefox 初心者のためのヘルプ機能 Google で Firefox に関する質問を検索 ポップアップを表示 サポートサイトへ誘導
http://support.mozilla.com/ja/
![Page 27: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/27.jpg)
論文検索オプション
Google scholar へのリンクを Google の検索結果上部に挿入
理系学生向け
![Page 28: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/28.jpg)
次電+ (つぎでんぷらす )
よく利用する学校等の最寄駅やバス停の発着時刻を“OpenTimetable.jp”というサイトに登録
ブラウザの右下に「今出たら、何分の電車やバスに乗れるかが常に表示される 作業に熱中しすぎて電車やバスに 乗り遅れることもなくなります !
OpenTimetable.jp について詳しくは後述
![Page 29: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/29.jpg)
OpenTimetable.jpみんなで作る時刻表
![Page 30: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/30.jpg)
OpenTimetable.jp
次電+ 旧バージョン 駅探 , google transit のデータ使用を想定
ライセンスの問題で使用できないことが判明 既存の 路線探索システムを使うと , その情報を利用する際にライセンスに引っかかってしまう
![Page 31: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/31.jpg)
OpenTimetable.jp
みんなで作る時刻表 ユーザが時刻表のデータを入力 http://opentimetable.jp/
![Page 32: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/32.jpg)
OpenTimetable.jp
ライセンスの問題をクリア オープンソースという考え方の啓蒙
特徴 通常の乗換案内サービスで対応できない情報もあつかうことが可能
大学内のバス路線
開発者向け APIを提供 誰でも時刻表データを利用可能 (CC BY-SA)
![Page 33: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/33.jpg)
OpenTimetable.jp の使い方
検索画面 路線名 , 駅名 , 方面 , 曜日 ( 平日 or 休日 ) を入力
![Page 34: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/34.jpg)
OpenTimetable.jp の使い方
検索画面 見つからない場合は入力を促す画面を表示
編集画面へ
![Page 35: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/35.jpg)
OpenTimetable.jp の使い方
検索結果
![Page 36: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/36.jpg)
OpenTimetable.jp の使い方
検索結果 入力済みのデータも編集可能
![Page 37: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/37.jpg)
OpenTimetable.jp の使い方
編集画面
![Page 38: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/38.jpg)
OpenTimetable.jp の使い方
1. ラベルを選択 電車の種別など
![Page 39: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/39.jpg)
OpenTimetable.jp の使い方
2. 時刻を選択 数字をクリック
![Page 40: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/40.jpg)
OpenTimetable.jp の使い方
3. ニックネーム , コメントを入力し確定
![Page 41: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/41.jpg)
API
時刻表のデータを取得 http://opentimetable.
jp/dev/api/getTimetable.php パラメータ
r: 路線名 p: 駅名 b: 方面 t: 曜日
JSON
![Page 42: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/42.jpg)
API
時刻表の 4要素 ( 路線名 , 駅名 , 方面 , 曜日 ) を取得 http://opentimetable.
jp/api/getTimetables.php JSON
![Page 43: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/43.jpg)
拡張機能の実装
![Page 44: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/44.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 45: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/45.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 46: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/46.jpg)
ブロックスコープ
名前空間を汚染したくない ブロックスコープを実現する
![Page 47: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/47.jpg)
素直な方法 ( ブロックスコープではない )
1つのオブジェクトの中で全部済ませる シンプルで 簡単 _などの命名規則が必要 アクセス時に this. または myExtension. が必要
setTimeout()などのコールバックの中で thisが切り替わってしまい不便
![Page 48: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/48.jpg)
let によるブロックスコープ
シンプルで 簡単 Firefox2以降に限定 遅延初期化はプロパティにアクセスさせる必要
![Page 49: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/49.jpg)
クロージャを用いた方法
thisが必要ない グローバルなつもりで使えるので , コールバック関数内でも使いやすい
よく利用されており , 書きやすい・読みやすい 全体が 1つの関数になるため , デバッグの際に各メソッドに対してブレークポイントを設定できない
![Page 50: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/50.jpg)
クロージャを用いた方法 2
new コンストラクタを用いる 特徴は先ほどと同様
![Page 51: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/51.jpg)
withを用いた方法
ブレークポイント設置可能 anonymous object 内での変数・関数の定義では thisを気にする必要がある 定義が複雑化すると , thisの扱いが面倒
![Page 52: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/52.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 53: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/53.jpg)
JS Modules
jsのコードをモジュール化 拡張からインポートして使う
特徴 コードの再利用が可能 一度読み込んだモジュールを キャッシュ
2回目以降のロードではキャッシュされたモジュールが 返される パフォーマンス的にも有利
シングルトンのオブジ ェクトのように使える
![Page 54: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/54.jpg)
モジュールの 定義 - JS Modules
my_modules.jsm EXPORTED_SYMBOLS
エクスポートするオブジェクトを入れる
注意点 window, document などの一般的な環境ならば存在するオブジェクトがない
XMLHttpRequest オブジェクトなどもグローバルに存 在しない
etc.
https://developer.mozilla.org/ja/Using_JavaScript_code_modules
![Page 55: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/55.jpg)
モジュールの利 用 - JS Modules
Components.utils.import() 第一引数 : モジュールの URL
スキーマは resource か file 標準モジュールでない 場合は chrome.manifest で指定
第二引数 : インポートしたオブジェクトを展開したいスコープ ( オブジェクト )
省略するとグローバル
https://developer.mozilla.org/ja/Using_JavaScript_code_modules
![Page 56: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/56.jpg)
他の方法との比較 - JS Modules
Performance/Addons/BestPractices https://wiki.mozilla.
org/Performance/Addons/BestPractices
![Page 57: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/57.jpg)
他の方法との比較 - JS Modules
XUL中の <script> で読み込む ウィンドウを開くのが遅くなる 各ウィンドウ毎に別の処理する必要がある場合のみ使う
ウィンドウを読み込むごとにモジュールも 読み込まれる
XPCOM JS Modules の方がシンプルで 早い
mozIJSSubScriptLoader 読み込みをキャッシュせず , 毎回ロードする
![Page 58: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/58.jpg)
JavaScript code modules - MDC
バンドルされている ctypes.jsm PluralForm.jsm XPCOMUtils.jsm etc.
https://developer.mozilla.org/En/JavaScript_modules
![Page 59: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/59.jpg)
Labs/JS Modules
Mozilla Labs 製 JSON.js Observers.js Prefereneces.js StringBundle.js Etc.
https://wiki.mozilla.org/Labs/JS_Modules
![Page 60: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/60.jpg)
Preferences.js
Preferences を楽に使う https://wiki.mozilla.org/Labs/JS_Modules#Preferences
従来
https://developer.mozilla.org/ja/Code_snippets/Preferences
![Page 61: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/61.jpg)
Preferences.js
set()
reset()
get()
![Page 62: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/62.jpg)
StringBundle.js
StringBundleを楽に使う https://wiki.mozilla.org/Labs/JS_Modules#StringBundle
コンストラクタ
get()
![Page 63: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/63.jpg)
StringBundle.js
getAll()
![Page 64: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/64.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 65: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/65.jpg)
Memorization
getter をメモ化 Performance/Addons/BestPractices
https://wiki.mozilla.org/Performance/Addons/BestPractices#Memoization
初回に呼ばれた時にはじめて作られる 起動時での処理を回避 遅延初期化
以降はキャッシュされたオブジェクトが返る
![Page 66: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/66.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 67: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/67.jpg)
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.1https://developer.mozilla.org/ja/New_in_JavaScript_1.8https://developer.mozilla.org/ja/New_in_JavaScript_1.7
![Page 68: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/68.jpg)
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
![Page 69: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/69.jpg)
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
![Page 70: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/70.jpg)
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
![Page 71: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/71.jpg)
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
![Page 72: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/72.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 73: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/73.jpg)
ロケーションバーの変化の検出
ロケーションバーの URLの変化を検出したい 進む・戻るボタン タブ切り替え ページのロード
Progress Listener を使う https://developer.mozilla.org/ja/
Code_snippets/Progress_Listeners
![Page 74: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/74.jpg)
ロケーションバーの変化の検出
nsIWebProgressListener インタフェースを実装
![Page 75: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/75.jpg)
ロケーションバーの変化の検出
作成した Progress Listener を browser か tabbrowser 要素に追加
![Page 76: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/76.jpg)
ロケーションバーの変化の検出 unload 時 (あるいはもっと速く )に removeProgressListener を呼ぶ
![Page 77: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/77.jpg)
Agenda
ブロックスコープ JS Modules Memorization JavaScript 1.8, 1.8.1 での記法 ロケーションバーの変化の検出 (Progress
Listeners) インストール済アドオンの取得
![Page 78: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/78.jpg)
インストール済みアドオンの取得
現在のプロファイルにインストール 済みの拡張を取得したい
nsIExtensionManager を使う http://mxr.mozilla.org/mozilla-central/
source/toolkit/mozapps/extensions/nsIExtensionManager.idl
![Page 79: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/79.jpg)
インストール済みアドオンの取得
nsIExtensionManager アドオンのインストールや 管理の機能を提供
getItemList(2, {}) アドオンの一覧を取得 引数はアドオンの種類 (拡張機能なので 2) 返り値は nsIUpdateItems
http://www.oxymoronical.com/experiments/apidocs/interface/nsIUpdateItem
![Page 80: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/80.jpg)
今後の予定
リリース 今月中
各大学にインストールしてもらえるよう 交渉 PR活動
ソーシャルメディア イベント開催 etc.
次期バージョンの開発 大学個別のカスタマイズなど
![Page 81: Firefox 学生向けアドオンパック](https://reader030.vdocuments.mx/reader030/viewer/2022020712/5491e8ebb47959b9538b47da/html5/thumbnails/81.jpg)
参加者大募集 !!
一緒に企画・開発に携わってくださる学生の方を募集中です サイトごとのオススメアドオンをオススメしてくれる人
OpenTimetable.jp への時刻登録 ( いたずらはやめてね )
ドキュメント , 開発 , etc… お問い合わせは [email protected] まで !!