次世代 greasemonkey tsukikage system の開発
DESCRIPTION
次世代 Greasemonkey Tsukikage system の開発. 電気通信大学 人間コミュニケーション学専攻 中山心太. 自己紹介. 中山ところてん 電気通信大学 人間コミュニケーション学専攻 修士1年 現在求職中 研究分野 情報セキュリティ(とか) プログラマーじゃなくて SE コーディングは嫌い 設計は大好き. こんなことがしたかった. Web の内容を自然言語処理 自然言語処理結果からフィッシング判定 形態素解析( Mecab ) Yahoo! 検索 API ( HTTP ) Google 検索 API ( SOAP ) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/1.jpg)
次世代 GreasemonkeyTsukikage system の開発
電気通信大学人間コミュニケーション学専攻
中山心太
![Page 2: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/2.jpg)
自己紹介 中山ところてん
電気通信大学 人間コミュニケーション学専攻 修士1年 現在求職中
研究分野 情報セキュリティ(とか)
プログラマーじゃなくて SE コーディングは嫌い 設計は大好き
![Page 3: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/3.jpg)
こんなことがしたかった Web の内容を自然言語処理 自然言語処理結果からフィッシング判定
形態素解析( Mecab ) Yahoo! 検索 API ( HTTP ) Google 検索 API ( SOAP )
既存のソフトウェアで簡単にブラウザに組み込んだ形で実装できるか?
![Page 4: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/4.jpg)
既存ソフトウェア Greasemonkey
Firefox 拡張機能 (Opera にも同様機能あり )
任意のウェブページに JavaScript を実行
Proxomitron ローカル Proxy 通過時に正規表現でデータ加
工 正規表現で、 JavaScript 付加可能
![Page 5: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/5.jpg)
駄目っぽい JavaScript の限界(文字列処理)
正規表現と DOM 制御 構造は制御できるが、内容の書き換え不能
たとえばこんなことが出来ない 漢字にルビを振る 文章中に企業名が出てきたら
脇に株価チャートを表示 すべてのページではてなキーワード
![Page 6: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/6.jpg)
そのほかの駄目なところ JavaScript の限界 ( ローカルリソースアク
セス ) ファイルアクセス マルチスレッド クロスドメイン(グリモンならできる) DLL アクセス 外部デバイスの利用 iPod,PSP データベースアクセス
![Page 7: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/7.jpg)
Tsukikage system
無いなら作ってしまえ 自然言語処理機能を搭載した、
HTML 書き換えミドルウェア
必要用件① ブラウザと通信して HTML 書き換え② HTML を処理するインタプリタエンジン③ ネイティブコードライブラリのコール機能④ 自然言語処理エンジン
![Page 8: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/8.jpg)
ブラウザと通信して HTML 書き換え 通信方法
IE プラグイン Firefox 拡張機能 Proxy
書き換え方法 JavaScript ブラウザの内部表現に手を入れる
![Page 9: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/9.jpg)
案1 Proxy 方式 ローカル Proxy サーバ
HTML 通過時にデータを加工 スクリプトが走るようになった Proxomitron
問題点 Proxy 通過時に重い処理を行うことと、
レイテンシーが増大してしまう。 動的コンテンツに対応できない
![Page 10: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/10.jpg)
案1 Proxy 方式
![Page 11: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/11.jpg)
案 2 IE ツールバー ATL ?何それ。
最後の書籍が出たのが 99 年 過去の遺産 ( 負の遺産 )
テストコードをたたいてみた。 ATL の癖が強すぎ C# でいけるっぽい?
開発効率が悪すぎるので破棄
![Page 12: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/12.jpg)
案 2 IE ツールバー
![Page 13: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/13.jpg)
案 3 Firefox 拡張機能 拡張機能からネイティブコード
いくら調べても見つけられなかった。
そもそも俺は ユーザーだ
Firefox の開発者向けリファレンス全然和訳されてねぇ……
![Page 14: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/14.jpg)
案 3 Firefox 拡張機能
私のTOEI
Cスコアは
350です。
ですが英語論文が
読めないわけでは
ないので、ご心配な
く
![Page 15: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/15.jpg)
案 3 Firefox 拡張機能
![Page 16: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/16.jpg)
案 4 Greasemonkey+CGI鯖 Localhost に任意の CGI鯖が立っていれ
ば、GM_httpRequest で通信できる
CGI鯖が任意コードを実行すればいよい。
実験してうまくいくことは確認 でも、本末転倒なので破棄
![Page 17: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/17.jpg)
案 4 Greasemonkey+CGI鯖
![Page 18: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/18.jpg)
案 5 Firefox の拡張機能+ CGI鯖 Greasemonkey じゃなくて、自作拡張機
能に Greasemonkey から作り直すことに……
全力で車輪の再発明
だから俺は Operaユーザーなんだって。
![Page 19: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/19.jpg)
案 5 Firefox の拡張機能+ CGI鯖
![Page 20: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/20.jpg)
問題は何か複数のブラウザへの対応 ストレスなく使えるレイテンシー
Proxy 単体なら両方満たしている。 通過時に大規模に書き換えると、
処理時間でレイテンシーが低下する。
Proxy の通過時にデータ書き換えではなく、通過後に書き換えればいいのでは?
![Page 21: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/21.jpg)
案 6 Proxy+ローカル CGI鯖
HTML が Proxy 通過時に JavaScript を付加
xmlHttpRequest はクロスドメイン不能同じドメインの架空アドレスならいける
架空アドレスへのアクセスをフックして、CGI鯖にリクエストを転送すればよい
CGI はメモリを保持できない毎回ファイルに保存しなければならない
![Page 22: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/22.jpg)
案 6 Proxy+ローカル CGI鯖
![Page 23: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/23.jpg)
案 7 Proxy+仮想 CGI鯖 Proxy の中に CGI鯖を持ってしまえばい
い。
Proxy本体がワーキングメモリを保持して、
仮想 CGI にワーキングメモリを渡せばよい
案 7 を採用
![Page 24: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/24.jpg)
案 7 Proxy+仮想 CGI鯖
![Page 25: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/25.jpg)
システムのレイヤー構造•HTML
• JavaScript
•Python• ネイティブコード• ローカル、リモー
トリソース
![Page 26: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/26.jpg)
Python 実装の Proxy TinyHTTPProxy.py
MIT ライセンスの Proxy OKI OSS の中の人に感謝
HTTP のリクエスト、レスポンスを解析 任意の JavaScript を付加できるように特定のアドレスへの通信をフック
![Page 27: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/27.jpg)
JavaScirpt の付加 Greasemonkey の JS はメタデータを持っ
ている// ==UserScript==// @name ユーザースクリプトの名称// @namespace 開発者の URL// @description プログラムの説明// @include どの URL で実行するか// @exclude どの URL で実行しないか// ==/UserScript==
上位互換のために、この構文を踏襲 @charset 文字コードを設定 @library Prototype.js などをインクルード
![Page 28: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/28.jpg)
架空アドレス通信のフック元 http://hoge.co.jp/index.html後 http://hoge.co.jp/index.html
??Tsukikage&pythonscript¶m
ブラウザからは同一ドメインのアクセス Proxy がこれをフックして、仮想 CGI 中
のpythonscritp を param で実行する。
![Page 29: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/29.jpg)
仮想 CGI サーバ Python のスクリプトをプラグイン方式で実
行
グローバルストレージは Proxy が引数で与える
スクリプト中から、 C++ の DLL リンク Mecab もこの方式で利用 Boost::python でライブラリ作成
![Page 30: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/30.jpg)
レイテンシー計測 Firefox+Firebug で計測 IPA のトップページ
100ms以下はエラー?•直通 233ms•串有 387ms
•遅延は 150ms程度
![Page 31: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/31.jpg)
御託並べてもしょうがないのでデモ
1. 自然言語処理による特徴語抽出
2. Greasemonkey スクリプトの上位互換
3. ハードウェアアクセス
![Page 32: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/32.jpg)
Greasemonkey と比較したアドバンテージ
xmlHttpRequest が使えるブラウザで動作 Prototype.js などのライブラリが利用可能
ライブラリでブラウザ互換性を吸収 Python 、 C++ の高い拡張性を利用可能 コアが Python なので OS に依存しない第四世代携帯電話、 Wii などから利用可能 Greasemonkey のスクリプトの上位互換
![Page 33: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/33.jpg)
Greasemonkey に及ばない点 GM は Firefox の特権モードで動いている
JavaScript から Firefox のコアに触ることが出来る
Firefox依存の機能を使ったスクリプトは、Tsukikage で動作させることが出来ない ライブラリで吸収させてほしい
バグのあるプラグインがあると、セキュリティホールになる
![Page 34: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/34.jpg)
未踏の作業中に気づいたこと Web とローカルは切り離されている
セキュリティの都合 ウェブ OS
マッシュアップ ウェブとウェブの融合
Web とローカルのマッシュアップだ
![Page 35: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/35.jpg)
ウェブとローカルのマッシュアップ ニコニコ動画の動画をローカルに落とす
もう散々やられている落とすと同時にエンコードして iPodへGO
専用ソフトなら出来る
Tsukikage ならブラウザ上から出来る! ブラウザに何も導入することなく
![Page 36: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/36.jpg)
開発が終わっていない箇所 ネイティブコードライブラリコール
Boost:: Python の実験 自然言語処理エンジン
Mecab の利用は実装済み (形態素解析) Cabocha は未実験 ( 構文木解析 )
インストーラー作成 PascalScript と格闘中
UI, デモアプリケーション
![Page 37: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/37.jpg)
おしまい Greasemonkey の上位互換を Proxy で作った
Web を簡単に自然言語処理するミドルウェア(?)が開発できた。
ブラウザに手を入れることなく、Greasemonkey以上の拡張性を得ることができた
八月の予定未実装箇所の実装、インストーラー
サンプルアプリケーション
![Page 38: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/38.jpg)
利用した言語 Tsukikage本体
Python プラグイン
HTML+CSS Python JavaScript C++
インストーラー inno setup Pascal スクリプト
バイト、趣味 EXCEL+VBA 、 HSP
![Page 39: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/39.jpg)
ソースコード量 メインソースコード、コメント込み 362 行 14,370byte 8/1 現在
今回の未踏の中で一番コード量が少ない 自分が何もやってないわけじゃなくて、
それくらい Python が強力なんです
![Page 40: 次世代 Greasemonkey Tsukikage system の開発](https://reader035.vdocuments.pub/reader035/viewer/2022081421/5681309d550346895d968a08/html5/thumbnails/40.jpg)
開発スケジュール 二月 卒論 三月 リサーチと、息抜き 四月 案 2 IE ツールバー 五月 案 3,4,5 Firefox関連 六月 案 6,7 Proxy関連の実装 論文執筆 七月 ブラッシュアップ 論文発表 八月 UI 作成 ←今ここ
本格的にコーディング始めたのは六月から。