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