Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
学生マーケティング会議企画 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,235 views

Published on

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

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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>

×