Xiong Zhang: Fusion: Opportunistic Web Prototyping with UI Mashups
https://www.youtube.com/watch?v=x2FYkAivXaQ
https://gyazo.com/682965f6161ab510b1d2c28b34b5259c
タイトル
ソース
Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology
ページ
951-962
年
2018
ISBN
978-1-4503-5948-1
著者
概要
Modern web development is rife with complexity at all layers, ranging from needing to configure backend services to grappling with frontend frameworks and dependencies. To lower these development barriers, we introduce a technique that enables people to prototype opportunistically by borrowing pieces of desired functionality from across the web without needing any access to their underlying codebases, build environments, or server backends. We implemented this technique in a browser extension called Fusion, which lets users create web UI mashups by extracting components from existing unmodified webpages and hooking them together using transclusion and JavaScript glue code. We demonstrate the generality and versatility of Fusion via a case study where we used it to create seven UI mashups in domains such as programming tools, data science, web design, and collaborative work. Our mashups include replicating portions of prior HCI systems (Blueprint for in-situ code search and DS.js for in-browser data science), extending the p5.js IDE for Processing with real-time collaborative editing, and integrating Python Tutor code visualizations into static tutorials. These UI mashups each took less than 15 lines of JavaScript glue code to create with Fusion.
内容
既存のWebサービスから必要なとこだけ切り出してきてマッシュアップする
例: LaTexの数式をレンダリングできるアプリの数式レンダリング部分だけを別のアプリ(shareLaTeX)で使う
shareLaTeXは部分レンダリングできない
全部普通にLaTexすることはできるけど
アプリの挙動だけを別のところで利用する
実装
2000行ぐらいのChrome拡張機能JS
Step1: 既存のWebアプリの中の、自分が必要なDOM要素を選択
要らないところはinvisibleにするなど
Step2: DOM要素を選択して利用するJSコードを作成
入力部分のDOMをhoverで捜す(Click) またはキー入力して当該DOMをさがす
Step3: 結果DOM「ホスト」にiframeで埋め込む
ポップアップ/インライン/サイドバー
Step4: 作ったWidgetをシェア
CORSは無視!
無視するオプションがブラウザにある!
ヤバイsatake.icon*3
コメント
増井俊之.icon
opportunistic = 日和見の
なんちゃってマッシュアップ !?
おもしろいsatake.icon