学生マーケティング会議企画 Powered by Mozilla  学生マーケティング Firefox  学生向けアドオンパック × × × × ×
スピーカー紹介 <ul><li>佐藤文毅 </li></ul><ul><li>上智大学法学部法律学科4年 </li></ul><ul><li>会議メンバーで数少ない文系 </li></ul><ul><li>パソコンに関する知識が無いため、会議の...
スピーカー紹介 <ul><li>守山晃生 </li></ul><ul><li>元学生  ( 社会人 1 年目 ) </li></ul><ul><li>昨年 11 月の  Firefox Developer Conference 2009  の発...
学生向けアドオンパックのコンセプト
<ul><li>Firefox    を学生に広めるために頑張っています </li></ul><ul><li>Mozilla Japan で行われる学生向けのプロモーションやイベントのアイデア出しをするミーティングをしています </li></u...
IE よりも 玄人 向け;;  アドオン ? Personas ? なにそれ? 理系 大学生も 意外と知りません・・・
実は…  使うと IE には戻れなくなる 友達に使ってもらうと意外と好反応!! 自分好みにカスタマイズできちゃう !
もっと Firefox を広めるために・・・ <ul><li>学生が欲しい機能を盛り込んだ </li></ul><ul><li>アドオンパック </li></ul><ul><li>を作ろう!! </li></ul>
<ul><li>学生にとって便利な機能満載に </li></ul><ul><li>初心者でも使いやすい </li></ul><ul><ul><li>Firefox  を使ったことがない人でも使える </li></ul></ul><ul><ul>...
どんな機能があったらいい ?
全部実装すると… こんなのだったり
<ul><li>ごちゃごちゃしてわかりづらい </li></ul><ul><li>初心者にはとっつきにくすぎる? </li></ul><ul><ul><li>怖い、意味分かんない </li></ul></ul><ul><li>いろんな機能があっ...
アドオンパックの中身 ①  Personas ②  Undo Closed Tab Button ③  ステータスバーに  Yahoo!  の天気予報を ④  Linkification ⑤  オススメアドオン紹介 ⑥  フォクすけの  Fir...
<ul><li>① 初心者でも使いやすいか </li></ul><ul><li>② 学生のニーズに合っているか </li></ul><ul><li>③ 直感的に便利、もしくは斬新だと思ってもらえるか </li></ul><ul><li> (いま...
学生向けアドオンパックの使い方 https://dev.mozilla.jp/campus/
インストール <ul><li>初回起動ページ </li></ul><ul><li>Personas の選択 </li></ul>
収録アドオン <ul><li>既存のアドオン 4 つ </li></ul><ul><li>オリジナルアドオン 4 つ </li></ul>
既存のアドオン <ul><li>Personas plus </li></ul><ul><ul><li>https: //addons . mozilla .org/en-US/firefox/addon/10900 </li></ul></u...
Personas plus <ul><li>簡単に見た目を変更 </li></ul>
Undo Closed Tab Button <ul><li>閉じたタブを復元 </li></ul><ul><li>初心者は重宝 </li></ul>
ステータスバーに Yahoo! 天気予報を <ul><li>ステータスバーに天気予報を表示 </li></ul>
Linkification <ul><li>URL をかしこくリンクに変換 </li></ul>
オリジナルアドオン <ul><li>オススメアドオン紹介 </li></ul><ul><li>フォクすけの  Firefox  サポート </li></ul><ul><li>論文検索オプション </li></ul><ul><li>次電 + ( ...
オススメアドオン紹介 <ul><li>今見ているサイトをさらに使いやすくしてくれるアドオンをサイト別に紹介 </li></ul>
オススメアドオン紹介 <ul><li>初心者ユーザのアドオンに関する興味を高め , Firefox  のカスタマイズに挑戦してもらう </li></ul>
フォクすけの  Firefox  サポート <ul><li>Firefox  初心者のためのヘルプ機能 </li></ul><ul><li>Google  で  Firefox  に関する質問を検索 </li></ul><ul><li>ポップア...
論文検索オプション <ul><li>Google scholar  へのリンクを  Google  の検索結果上部に挿入 </li></ul><ul><li>理系学生向け </li></ul>
次電 + ( つぎでんぷらす ) <ul><li>よく利用する学校等の最寄駅やバス停の発着時刻を“ OpenTimetable.jp” というサイトに登録 </li></ul><ul><li>ブラウザの右下に「今出たら、何分の電車やバスに乗れる...
OpenTimetable.jp みんなで作る時刻表
OpenTimetable.jp <ul><li>次電 +  旧バージョン </li></ul><ul><ul><li>駅探 , google transit  のデータ使用を想定 </li></ul></ul><ul><li>ライセンスの問題...
OpenTimetable.jp <ul><li>みんなで作る時刻表 </li></ul><ul><li>ユーザが時刻表のデータを入力 </li></ul><ul><li>http://opentimetable.jp/ </li></ul>
OpenTimetable.jp <ul><li>ライセンスの問題をクリア </li></ul><ul><li>オープンソースという考え方の啓蒙 </li></ul><ul><li>特徴 </li></ul><ul><ul><li>通常の乗換案...
OpenTimetable.jp  の使い方 <ul><li>検索画面 </li></ul><ul><ul><li>路線名 ,  駅名 ,  方面 ,  曜日 ( 平日  or  休日 )  を入力  </li></ul></ul>
OpenTimetable.jp  の使い方 <ul><li>検索画面 </li></ul><ul><ul><li>見つからない場合は入力を促す画面を表示 </li></ul></ul>編集画面へ
OpenTimetable.jp  の使い方 <ul><li>検索結果 </li></ul>
OpenTimetable.jp  の使い方 <ul><li>検索結果 </li></ul><ul><ul><li>入力済みのデータも編集可能 </li></ul></ul>
OpenTimetable.jp  の使い方 <ul><li>編集画面 </li></ul>
OpenTimetable.jp  の使い方 <ul><li>1.  ラベルを選択 </li></ul><ul><ul><ul><li>電車の種別など </li></ul></ul></ul>
OpenTimetable.jp  の使い方 <ul><li>2.  時刻を選択 </li></ul><ul><ul><li>数字をクリック </li></ul></ul>
OpenTimetable.jp  の使い方 <ul><li>3.  ニックネーム ,  コメントを入力し確定 </li></ul>
API <ul><li>時刻表のデータを取得 </li></ul><ul><ul><li>http: //opentimetable . jp/dev/api/getTimetable . php </li></ul></ul><ul><ul>...
API <ul><li>時刻表の 4 要素 ( 路線名 ,  駅名 ,  方面 ,  曜日 ) を取得 </li></ul><ul><ul><li>http: //opentimetable . jp/api/getTimetables . p...
拡張機能の実装
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
ブロックスコープ <ul><li>名前空間を汚染したくない </li></ul><ul><li>ブロックスコープを実現する </li></ul>
素直な方法  ( ブロックスコープではない ) <ul><li>1 つのオブジェクトの中で全部済ませる </li></ul><ul><li>シンプルで簡単 </li></ul><ul><li>_ などの命名規則が必要 </li></ul><ul...
let  によるブロックスコープ <ul><li>シンプルで簡単 </li></ul><ul><li>Firefox2 以降に限定 </li></ul><ul><li>遅延初期化はプロパティにアクセスさせる必要 </li></ul>
クロージャを用いた方法 <ul><li>this が必要ない </li></ul><ul><ul><li>グローバルなつもりで使えるので ,  コールバック関数内でも使いやすい </li></ul></ul><ul><li>よく利用されており ...
クロージャを用いた方法 2 <ul><li>new  コンストラクタを用いる </li></ul><ul><li>特徴は先ほどと同様 </li></ul>
with を用いた方法 <ul><li>ブレークポイント設置可能 </li></ul><ul><li>anonymous object  内での変数・関数の定義では this を気にする必要がある </li></ul><ul><ul><li>定...
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
JS Modules <ul><li>js のコードをモジュール化 </li></ul><ul><li>拡張からインポートして使う </li></ul><ul><li>特徴 </li></ul><ul><ul><li>コードの再利用が可能 </...
モジュールの定義  - JS Modules <ul><li>my_modules.jsm </li></ul><ul><li>EXPORTED_SYMBOLS </li></ul><ul><ul><li>エクスポートするオブジェクトを入れる ...
モジュールの利用  - JS Modules <ul><li>Components.utils.import() </li></ul><ul><ul><li>第一引数 :  モジュールの URL </li></ul></ul><ul><ul><...
他の方法との比較  - JS Modules <ul><li>Performance/Addons/BestPractices </li></ul><ul><ul><ul><ul><li>https: //wiki . mozilla . or...
他の方法との比較  - JS Modules <ul><li>XUL 中の  <script>  で読み込む </li></ul><ul><ul><li>ウィンドウを開くのが遅くなる </li></ul></ul><ul><ul><li>各ウィ...
JavaScript code modules - MDC <ul><li>バンドルされている </li></ul><ul><ul><li>ctypes.jsm </li></ul></ul><ul><ul><li>PluralForm.jsm...
Labs/JS Modules <ul><li>Mozilla Labs  製 </li></ul><ul><ul><li>JSON.js </li></ul></ul><ul><ul><li>Observers.js </li></ul></...
Preferences.js <ul><li>Preferences  を楽に使う </li></ul><ul><ul><li>https: //wiki . mozilla . org/Labs/JS_Modules #Preferences...
Preferences.js <ul><li>set() </li></ul><ul><li>reset() </li></ul><ul><li>get() </li></ul>
StringBundle.js <ul><li>StringBundle を楽に使う </li></ul><ul><ul><li>https: //wiki . mozilla . org/Labs/JS_Modules # StringBun...
StringBundle.js <ul><li>getAll() </li></ul>
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
Memorization <ul><li>getter  をメモ化 </li></ul><ul><ul><li>Performance/Addons/BestPractices </li></ul></ul><ul><ul><ul><li>ht...
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
JavaScript 1.8, 1.8.1  での記法 <ul><li>JavaScript 1.8  : Firefox 3 (Gecko 1.9) </li></ul><ul><ul><li>Array.reduce() </li></ul...
JavaScript 1.8, 1.8.1  での記法 <ul><li>Array.reduce()  (1.8) </li></ul><ul><ul><li>配列の ( 左から右へ ) 2  つの値に対して同時に関数を適用し ,  単一の値に...
JavaScript 1.8, 1.8.1  での記法 <ul><li>Array.map()  (1.6) </li></ul><ul><ul><li>配列の要素それぞれに対して関数を適用し ,  新たな配列を返す </li></ul></u...
JavaScript 1.8, 1.8.1  での記法 <ul><li>式クロージャ  (Expression closures, 1.8) </li></ul><ul><ul><li>単純な関数の簡略表現 </li></ul></ul><ul...
JavaScript 1.8, 1.8.1  での記法 <ul><li>String.trim()  (1.8.1) </li></ul><ul><ul><li>文字列の両端の空白を削除 </li></ul></ul><ul><ul><li>t...
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
ロケーションバーの変化の検出 <ul><li>ロケーションバーの URL の変化を検出したい </li></ul><ul><ul><li>進む・戻るボタン </li></ul></ul><ul><ul><li>タブ切り替え </li></ul>...
ロケーションバーの変化の検出 <ul><li>nsIWebProgressListener  インタフェースを実装 </li></ul>
ロケーションバーの変化の検出 <ul><li>作成した  Progress Listener  を  browser  か  tabbrowser  要素に追加 </li></ul>
ロケーションバーの変化の検出 <ul><li>unload  時 ( あるいはもっと速く ) に removeProgressListener  を呼ぶ </li></ul>
Agenda <ul><li>ブロックスコープ </li></ul><ul><li>JS Modules </li></ul><ul><li>Memorization </li></ul><ul><li>JavaScript 1.8, 1.8....
インストール済みアドオンの取得 <ul><li>現在のプロファイルにインストール済みの拡張を取得したい </li></ul><ul><li>nsIExtensionManager  を使う </li></ul><ul><ul><li>http:...
インストール済みアドオンの取得 <ul><li>nsIExtensionManager </li></ul><ul><ul><li>アドオンのインストールや管理の機能を提供 </li></ul></ul><ul><li>getItemList(...
今後の予定 <ul><li>リリース </li></ul><ul><ul><li>今月中 </li></ul></ul><ul><li>各大学にインストールしてもらえるよう交渉 </li></ul><ul><li>PR 活動 </li></ul...
参加者大募集 !! <ul><li>一緒に企画・開発に携わってくださる学生の方を募集中です </li></ul><ul><ul><li>サイトごとのオススメアドオンをオススメしてくれる人 </li></ul></ul><ul><ul><li>O...
Upcoming SlideShare
Loading in …5
×

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

3,066 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,066
On SlideShare
0
From Embeds
0
Number of Embeds
147
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • まずはじめに、学生マーケティング会議って?? [Enter] Firefox のマーケティング活動を行っている組織 Mozilla Japan で 行われる学生向けのプロモーションやイベントのアイデア出しをするミーティングのことです。 [Enter] ミーティングは、お菓子を食べながら [Enter] こんな感じで結構軽い感じでやってます。 [Enter] 3 学生マーケティング
  • [Enter] 学生から見た Firefox って?? [Enter] [Enter] ・ IE よりも玄人(くろうと)向けというイメージがかなり強かったり [Enter] ・理系大学生の中でも Firefox の知名度は意外と低めだったり [Enter] ・アドオン? Personas ?何それ?って感じの人がすごく多いのが現状です。 ちなみにアドオンとは Firefox を自分の好みに合わせてカスタマイズすることのできる機能のことです。 また、 Personas とは Firefox の見た目を簡単に変えることのできるアドオンのことです。 Personas を使うことで Firefox を自分好みに可愛く、おしゃれにすることもできます。 [Enter] 4 学生マーケティング
  • [Enter] 僕らの考える Firefox 像とは [Enter] [Enter] ・友達に無理やり使ってもらうと結構、好反応だったり [Enter] ・使ってみると IE には戻れなくなるというぐらい Firefox に 病みつきになったというような意見をもらったので [Enter] このようにどんどん使ってもらって知名度の向上を目指していきたいと考えています。 [Enter] 5 学生マーケティング
  • ではここからは石川が具体的な内容を説明させていただきます。 いろいろな案が出たんですけど、僕たちは大学生ということで、 Firefox のキャンパスエディションを作ろうということになりました。 初心者でも使いやすいエディションを作り、なんでこんな機能が付いているの? へー Firefox っていうんだ!っていう状態を目指します。 8
  • 頑張って考えましたw 9
  • 全部実装すると、こんな感じになりますね。 またはこんな感じとか 10
  • まぁ、もちろん、実装すると初心者的には意味がわからないどころか「怖い」って思ってしまう。つまり、使わないどころか使えないということにいとも簡単に陥ってしまいます。 なので、直感的に使えるものに絞り、はじめの一歩に僕らがなろうというコンセプトにしました。 11
  • これからは、キャンパスエディションを作りながら広めます。 これにより より多くの人に Firefox の良さを理解してもらい、より多くの人に Firefox を使ってもらう! 13
  • データは mozilla.jp のサーバに json を置いている .
  • よく利用する学校等の最寄駅やバス停の発着時刻を“ OpenTimetable.jp” というサイトに登録しておくと、ブラウザの右下に「今出たら、何分の電車やバスに乗れるかが、常に表示されます。
  • 南北線 後楽園 赤羽岩淵 平日 七尾線 良川 金沢 平日
  • ブロックスコープをしたい ブロックの中だけで変数を使いたい
  • javascript の場合、 new で呼び出された際の関数が参照する this スコープは、 new された関数に閉じられる
  • つかいまわし
  • 第二引数をなくしてもいいかも 省略するとグローバル 入れるとそのオブジェクトのプロパティに定義される Chrome.manifest 標準じゃないやつのときだけ
  • Window を開くのが遅くなる 各ウィンドウごとに処理する必要がないならばやめるべき ( ウィンドウを読み込むごとに読み込まれる ) JSXPCOM を書くとでかくなるよね モジュールでかく方がシンプルではやい
  • Ctypes.jsm JavaScript コードから C 互換な外部ライブラリ関数の呼び出しを可能にします。
  • 普通に書くとどうなるかと比較 型 Xpcom 型 Fuel 型なし メソッドが少ない Preference.js もっと便利 LIB.Preferences.get(“foo”);
  • 比較 xul
  • すべての string を {key: foo, value: bar} という array で返す
  • 遅延初期化 起動時に重い処理をやらせたくない 例を XPCOM 読んでるやつにする Utils.jsm
  • Javascript 1.6 -&gt; firefox 1.5 map に thisObject パラメータが与えられると、 callback の呼び出しのたびにそのオブジェクトが this として使用されます。 thisObject が与えられないか null だと、 callback に結び付けられたグローバルオブジェクトが代わりに使用されます。 callback は、要素の値、要素のインデックス、走査されている Array オブジェクトという 3 つの引数をともなって呼び出されます。
  • Callback で使っているところの例 a1, a2 は array
  • Recommend.processNewUrl(aUri) aUri がキャッシュしてた値と変わっていたら動くようにする
  • 順番を上へ
  • Xpcom は自分で delete Window 閉じたときにはごみをとるために remove する必要がある
  • Firefox 学生向けアドオンパック

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

    ×