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

https://addons.mozilla.org/en-US/firefox/addon/10900




















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 休日 ) を入力


検索画面見つからない場合は入力を促す画面を表示

編集画面へ


検索結果


検索結果入力済みのデータも編集可能


編集画面


1. ラベルを選択電車の種別など


2. 時刻を選択数字をクリック


3. ニックネーム , コメントを入力し確定

API

時刻表のデータを取得 http://opentimetable.

jp/dev/api/getTimetable.php パラメータ

r: 路線名 p: 駅名 b: 方面 t: 曜日

JSON

http://opentimetable.jp/dev/api/getTimetable.php






API

時刻表の 4要素 ( 路線名 , 駅名 , 方面 , 曜日 ) を取得 http://opentimetable.

jp/api/getTimetables.php JSON

http://opentimetable.jp/api/getTimetables.php






拡張機能の実装

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

jsのコードをモジュール化拡張からインポートして使う

特徴コードの再利用が可能一度読み込んだモジュールをキャッシュ

2回目以降のロードではキャッシュされたモジュールが返されるパフォーマンス的にも有利

シングルトンのオブジェクトのように使える

モジュールの定義 - JS Modules

my_modules.jsm EXPORTED_SYMBOLS

エクスポートするオブジェクトを入れる

注意点 window, document などの一般的な環境ならば存在するオブジェクトがない

XMLHttpRequest オブジェクトなどもグローバルに存在しない

etc.

https://developer.mozilla.org/ja/Using_JavaScript_code_modules

https://developer.mozilla.org/




モジュールの利用 - 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

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

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

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



Memorization

getter をメモ化 Performance/Addons/BestPractices

https://wiki.mozilla.org/Performance/Addons/BestPractices#Memoization

初回に呼ばれた時にはじめて作られる起動時での処理を回避遅延初期化

以降はキャッシュされたオブジェクトが返る

Agenda



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


Array.reduce() (1.8) 配列の ( 左から右へ ) 2 つの値に対して同時に関数を適用し , 単一の値にする

syntax

callback関数

例配列内の要素の総和

https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Objects/Array/reduce


Array.map() (1.6) 配列の要素それぞれに対して関数を適用し , 新たな配列を返す

syntax

例各要素の平方根

https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array/map


式クロージャ (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


String.trim() (1.8.1) 文字列の両端の空白を削除 trim(), trimLeft(), trimRight()

https://developer.mozilla.org/Ja/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

Agenda



ロケーションバーの変化の検出

ロケーションバーの URLの変化を検出したい進む・戻るボタンタブ切り替えページのロード

Progress Listener を使う https://developer.mozilla.org/ja/

Code_snippets/Progress_Listeners


nsIWebProgressListener インタフェースを実装


作成した Progress Listener を browser か tabbrowser 要素に追加

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

Agenda



インストール済みアドオンの取得

現在のプロファイルにインストール済みの拡張を取得したい

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] まで !!

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

Technology