firefox 学生向けアドオンパック

学生マーケティング会議企画

Powered by Mozilla 学生マーケティング

Firefox 学生向けアドオンパック

×× × × ×

スピーカー紹介

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

スピーカー紹介

守山晃生 元学生 ( 社会人 1年目 ) 昨年 11月の Firefox

Developer Conference 2009 の発表後から参加 http://mozilla.jp/events/

2009/fxdevcon/ 開発チーム id: cou929

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

Firefox　　　を学生に広めるために頑張っています

Mozilla Japanで行われる学生向けのプロモーションやイベントのアイデア出しをするミーティングをしています

メンバーは全員学生 ミーティングは、お菓子を食べながら結構軽い感じでやってたりｗ

学生マーケィング会議って ??

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… お問い合わせは campusreps@mozilla-japan.org まで !!