ね 簡 単 でしょ? すぐできる 拡 張 機 能 レシピ 2009.11.08 株 式 会 社 マピオン
アジェンダ MapionでのFireFoxへの 取 り 組 み 拡 張 機 能 FireMapion 簡 単! 拡 張 機 能 レシピ 今 後 予 定 するFireMapion 追 加 機 能
自 己 紹 介
山 岸 靖 典 (やまぎしやすのり) 技 術 開 発 部 部 長 開 発 運 用 の 統 括 マピオンの 歴 史 13 年 の 中 では 所 属 の 長 い7 年 目 だ
中 村 浩 士 (なかむらこうじ) マピオン 技 術 開 発 部 エンジニア JavaScript, ActionScriptをメインにマピオン で 画 面 系 アプリやってます FireMapion 開 発 &メンテナー
Mapion
株 式 会 社 マピオン 事 業 内 容 地 図 情 報 サービスを 提 供 コンシューマ 向 けサービス マピオン 1 割 マピオンモバイル 4 割 ケータイ 国 盗 り 合 戦 0.5 割 法 人 向 け 地 図 関 連 ASPサービ ス 4.5 割 地 図 店 舗 検 索 乗 り 換 え 検 索 ルート 検 索 ラボ priceless マピオン マピオンモバイ ル ケータイ 国 盗 り 合 戦 ASP
Mapion 日 本 最 大 級 のインターネッ ト 地 図 情 報 検 索 サイト ユニークユーザー 900 万 人 / 月 ページビュー 6000 万 PV/ 月
Mapion 2009 年 4 月 22 日 リニューアル 新 しい 地 図 ユーザの 声 を 反 映 して 作 った グッドデザインな 地 図 新 しい 位 置 情 報 検 索 住 所 全 国 3000 万 件 郵 便 番 号 駅 電 話 帳 スポットあ わせて1000 万 件 を 横 断 検 索 オープンソースの 検 索 エンジン Solrで 高 速 検 索
Mapion Labs
Mapion Labs マピオン 開 発 チーム によるブログを2009 年 6 月 30 日 にオープン 日 々の 技 術 トピックや ラボプロダクトのリリー スなどやってます http://labs.mapion.co.jp で 公 開 中
Mapion Labs Loves Firefox これまでにFirefox 限 定 の 機 能 やプロダクトを いくつかリリースしました 位 置 情 報 通 知 機 能 Firefoxの 位 置 情 報 通 知 機 能 (geolocation API)を 利 用 ユーザーが 実 際 にいる 位 置 の 地 図 を 即 時 に 表 示 する 機 能 を 実 装
Mapion Labs Loves Firefox MozSearch Firefoxの 検 索 プラグインを 実 装 検 索 窓 から 直 接 マピオンの 地 図 検 索 を 呼 び 出 せます FireMapion Firefox 拡 張 機 能 Webページ 中 の 住 所 っぽい 文 字 列 に 対 して マピオンへのリンクを 生 成
拡 張 機 能 FireMapion
FireMapion 開 発 の 経 緯 新 しいマピオンを 多 くの 人 に 使 ってほしい! PV 増 やしたい! WEBページ 中 の 住 所 や 郵 便 番 号 から 直 接 マ ピオンにリンクできたらいいなあ~ 手 軽 に 実 装 して 世 に 出 したいなあ FireFox 拡 張 機 能 でつくって ラボでリリース
FireMapion 機 能 (1/3) 選 択 文 字 列 でマピオン 検 索 Webページ 中 の 検 索 したい 文 字 列 を 選 択 し コンテキスト メニューから 検 索 実 行
FireMapion 機 能 (2/3) 住 所 っぽい 文 字 列 を 自 動 置 換 HTMLドキュメント 内 の 住 所 っぽい 文 字 列 電 話 番 号 っぽい 文 字 列 郵 便 番 号 っぽい 文 字 列 をマピオンへのリンクに 自 動 置 換 変 換 は 内 部 で 保 持 している 正 規 表 現 にてパターン 抽 出 をおこなっている
FireMapion 機 能 (3/3) 置 換 文 字 列 のカスタマイズ ユーザー 定 義 という 形 で 自 動 置 換 のパターンを 追 加 することが 可 能
FireMapionデモ
FireMapionリリースノート 2009.06.30 FireMapion 1.0.0 リリース マピオン 検 索 機 能 住 所 っぽい 文 字 列 の 自 動 置 換 ユーザー 定 義 パターン 2009.07.08 FireMapion 1.0.2 リリース 自 動 置 換 電 話 番 号 に 対 応 自 動 更 新 に 対 応 2009.07.30 FireMapion 1.0.3 リリース 各 種 不 具 合 の 修 正 2009.08.03 Mozilla 公 式 アドオンに 登 録 https://addons.mozilla.jp/firefox/details/12558 2009.08.25 FireMapion 1.0.5 リリース MozSearch 追 加 2009.11.04 FireMapion 1.0.6 リリース 自 動 置 換 の 改 善 ユーザー 定 義 パターンの 改 善 内 部 モジュールの 再 構 築
FireMapion 仕 様 (1/7) メニュー 項 目 ツールメニューから 以 下 実 行 可 能 選 択 文 字 列 をマピオン 検 索 リンク 表 示 / 非 表 示 切 り 替 え ユーザー 定 義 パターンウィンドウのオープン
FireMapion 仕 様 (2/7) コンテキストメニュー 通 常 検 索 特 定 ジャンル 検 索 サブメニューから 選 択 可 能 郵 便 番 号 検 索 住 所 検 索 お 店 施 設 検 索 駅 路 線 検 索
FireMapion 仕 様 (3/7) 検 索 パターンによりクエリーを 切 り 替 えている 通 常 検 索 http://www.mapion.co.jp/s/q=キーワード/ 郵 便 番 号 検 索 http://www.mapion.co.jp/s/q=キーワード/t=zip/ 住 所 検 索 http://www.mapion.co.jp/s/q=キーワード/t=address/ お 店 施 設 検 索 http://www.mapion.co.jp/s/q=キーワード/t=spot/ 駅 路 線 検 索 http://www.mapion.co.jp/s/q=キーワード/t=station/
FireMapion 仕 様 (4/7) ショートカットキー ツールメニューの 項 目 がそれぞれ 実 行 可 能 選 択 文 字 列 をマピオン 検 索 ショートカットキー+Shift+S リンク 表 示 / 非 表 示 切 り 替 え ショートカットキー+Shift+M ユーザー 定 義 パターンウィンドウのオープン ショートカットキー+Shift+U ショートカットキーはWindowsではCtrlキー MacOSXではCommandキー
FireMapion 仕 様 (5/7) ステータスバー クリックで 自 動 置 換 リンクの 表 示 / 非 表 示 切 替 え マウスオーバーにより 自 動 置 換 の 結 果 が 表 示 自 動 リンク 非 表 示 時 自 動 リンク 表 示 時
FireMapion 仕 様 (6/7) ユーザー 定 義 パターンウィンドウ ユーザー 定 義 パターンの 確 認 登 録 削 除 を 行 なうウィンドウ パターンはテキストファイル 形 式 でローカル 保 存
FireMapion 仕 様 (7/7) 住 所 っぽい 文 字 列 の 置 換 以 下 手 順 で 処 理 を 行 なっている 現 在 開 いているタブのHTMLドキュメント 取 得 HTMLドキュメント 内 の 特 定 HTML 要 素 (divやpなど) のみをXPathを 利 用 して 抽 出 抽 出 した 要 素 内 のHTML 文 字 列 を 正 規 表 現 チェック 住 所 パターンにマッチする 文 字 列 をDOM 操 作 で aタグ 要 素 と 置 換 する 特 定 要 素 のみを 処 理 対 象 とする 理 由 処 理 効 率 元 々リンクであるaタグを 上 書 かないように
FireMapionまとめ 特 別 な 開 発 テクニックを 駆 使 している 拡 張 ではない リファレンスサイトにある 基 本 的 な 実 装 で 構 築 メニュー コンテキスト ステータスバーへのUI 追 加 ショートカットキーの 実 装 ウィンドウ 新 規 タブの 表 示 HTMLドキュメントのアクセス XML/DOM 操 作 ファイルI/O マピオンサイトとの 連 携 がメインテーマ Webサービス 連 携 型 拡 張 機 能!
簡 単! 拡 張 機 能 レシピ
拡 張 機 能 を 作 ってみよう! シンプルなWebサービス 連 携 型 拡 張 機 能 は 簡 単 に 作 成 できる FireMapionを 例 に 拡 張 を3 分 で 作 成 します コンテキストメニューから 選 択 した 文 字 列 で マピオン 検 索 を 行 なう 単 機 能 な 拡 張
用 意 するツール Firefox テキストエディタ zip 圧 縮 ツール OSデフォルトでもOK WindowsXP Exproler 右 クリックからの 圧 縮 MacOSX Finderメニューからの 圧 縮
作 成 するファイル 拡 張 名 は myextension 最 低 限 の 構 成 任 意 のディレクトリ install.rdf overlay.xul chrome.manifest サンプルソース http://labs.mapion.co.jp/experimental/ffc/
install.rdfの 内 容 <?xml version="1.0" encoding="shift_jis"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:version>1.0.0</em:version> <em:id>myextension@mapion.co.jp</em:id> <em:type>2</em:type> <em:iconurl></em:iconurl> <em:name>myextension</em:name> <em:description>sample of extension.</em:description> <em:targetapplication> <!-- Firefox --> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>3.0</em:minversion> <em:maxversion>3.5.*</em:maxversion> </Description> </em:targetapplication> </Description> </RDF>
overlay.xulの 内 容 <?xml version="1.0" encoding="shift_jis"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript"><![cdata[ function oncommandfunction(event){ // 選 択 文 字 列 の 取 得 var text = document.commanddispatcher.focusedwindow.getselection(); // URLの 構 築 var url = "http://www.mapion.co.jp/s/q="+encodeuri(text)+"/"; // 新 規 タブをURLで 開 き 選 択 状 態 とする gbrowser.selectedtab=gbrowser.addtab(url); }; ]]></script> <popup id="contentareacontextmenu"> <menuitem id="mycontextmenuitem" label=" 選 択 文 字 列 でマピオン 検 索 " oncommand="oncommandfunction(event)"/> </popup> </overlay>
chrome.manifestの 内 容 content myextension./ overlay chrome://browser/content/browser.xul chrome://myextension/content/overlay.xul
XPIファイル( 拡 張 インストーラ)の 作 成 XPIファイルはinstall.rdf, chrome.manifest, その 他 リソースをzip 圧 縮 したファイル そのままの 構 成 でzip 圧 縮 し 作 成 したファイルの 拡 張 をzip xpiに 変 更 すればOK myextension.xpi(zip xpi) install.rdf overlay.xul chrome.manifest
拡 張 のインストール XPIファイルをFirefoxへドラッグ&ドロップ!
拡 張 レシピ - まとめ 拡 張 を 作 成 すること 自 体 はむずかしくない! 最 小 でファイルを3つ 作 ればOK 特 別 なソフトや 開 発 環 境 は 必 須 ではない 既 存 Webサービスをうまく 利 用 すれば 便 利 な 拡 張 機 能 を 簡 単 に 作 れるのでは? 組 み 合 わせのアイデア 次 第 で 便 利 な 拡 張 機 能 に 機 能 を 呼 び 出 す= 自 分 でコードを 書 かなくても 機 能 的 な 拡 張 が 作 れる URL 仕 様 さえ 分 かれば 拡 張 は 作 成 可 能
今 後 予 定 するFireMapion 追 加 機 能 (1/2) 自 動 置 換 リンクで 地 図 プレビュー マウスオーバーでプレビュー 表 示 するとステキ? 画 面 はハメコミ 合 成 です
今 後 予 定 するFireMapion 追 加 機 能 (2/2) 自 動 置 換 の 精 度 UP マピオン13 年 の 歴 史 で 培 った 住 所 ノウハウを 取 り 入 れ 住 所 の 置 換 精 度 をUP! その 他 Mapion Labsに 寄 せられたユーザーの 意 見 を 随 時 取 り 入 れ より 使 いやすい 拡 張 機 能 に! ご 意 見 ご 要 望 待 ってます! http://labs.mapion.co.jp/
Web 企 業 がFirefox 拡 張 を 開 発 する 利 点 (1/2) 自 社 サービスをより 使 ってもらえる ユーザーが 導 入 しやすいブラウザ 拡 張 なので 導 線 が 増 える サイトが 身 近 になる ユーザの 反 響 が 寄 せられやすい 自 社 サービスの 使 い 勝 手 がよくなる ショートカットキーなどブラウザ 拡 張 ならではの 使 いやすさが 向 上 サイトの 質 が 上 がる
Web 企 業 がFirefox 拡 張 を 開 発 する 利 点 (2/2) アピールできる ラボブログへ 投 稿 したリリース 記 事 にはてぶ25 件! Firefoxユーザー=リテラシーの 高 いユーザーや ギークな 層 にリーチできることはアピール 度 が 高 い 実 装 は 簡 単 一 般 的 なWebアプリケーション 開 発 と 比 較 すれば ターゲットブラウザが 単 一 であるのは 開 発 しやすい XUL, JavaScript, CSSによる 開 発 は HTMLによる 一 般 的 なWeb 開 発 技 術 と 似 ており 開 発 しやすい
マピオンはFirefoxを 応 援 します!
IE6 no more!
ありがとうございました