8. Webとユーザプログラミング
エンドユーザプログラミング
一般のユーザが、特殊な知識無しでプログラミングを行なう
エンドユーザプログラミングの実例
ビデオ予約
目覚まし時計
炊飯器
エンドユーザプログラミングの必要性
カスタマイズ要求
個人によって要望は違う
ルーチンワークの自動化
同じことを何度もやりたくない
特殊機能の実装
カスタマイズの例
「テーマ」の変更
キーボードショートカット設定
個人専用検索
IME設定
操作の自動化
登録/検索操作の自動化
マッシュアップ
店を検索しては現在地からの距離を求める
ぐるなび + GoogleMaps
エンドユーザプログラミングシステムの技法
抽象的思考を排除する
具体的な操作/見栄えを利用
ビジュアルプログラミング
例示プログラミング
エンドユーザープログラミングの例
表計算ソフト
Automator
表計算ソフト
宣言的 / 具体的
https://gyazo.com/71b2223522831b4701c7117ac509529d.png
Automator
Macintoshのエンドユーザプログラミング環境
ビジュアルプログラミング風味
http://masui.org.s3.amazonaws.com/0/a/0a7f3224bcc395fc919f84a3ef4b36e2.png
例示プログラミング
例を与えるとシステムが規則を推論
帰納的推論
いくつかの例から普遍的法則を導く
一般化 / 知識形成
単純な例示プログラミング
Dynamic Macro
FlashFill
Stagecast
Emacs上での操作の再実行
操作履歴から繰返しパタンを抽出
あらゆる繰返し操作に対して有効
マクロ登録が不要
https://gyazo.com/49d793cc04ab1946e640c2366c6aac48.gif
Demo: Dynamic Macro
Dynamic Macroの動作
2回続けて全く同じ操作列が実行された後で繰り返し実行キーが入力されるとその1回分を繰り返す
abcabc + REP → abcabcabc
そのようなパタンが複数存在するときは最長の繰り返しパタンを選択
abbabb + REP → abbabbabb
Dynamic Macroの動作 (Cont'd)
直前の操作列と全く同じ操作列が以前の操作列中に存在するとき、それらの間の処理を実行する
abcdeab + REP → abcdeabcde
もう一度繰り返し実行キーが押されると繰り返しパタンを実行する
REP → abcdeabcdeabcde
ブラウザ上のDynamic Macro
Firefoxの拡張機能
Firefox拡張「KeySnail」を利用
JavaScriptで記述
Excellの予測インタフェース
https://www.youtube.com/watch?v=TBgoGqyv_0E
https://www.youtube.com/watch?v=YPG8PAQQ894
最初の4文字、とかいうときとどう区別するのか
Eager (Cypher)
http://gyazo.com/6137905efa632ac7386ffdc7647a9891.png
Eager
HyperCard上の繰り返し操作から次の操作を予測
システムは常にユーザ操作を監視
次の操作を先取りしてユーザに提示
提示された操作と同じ操作をユーザが実行した場合は推論の肯定とみなす
推論を無視して操作を続けた場合は否定とみなす
正しい予測を行なっているとユーザが確信した場合は残りを自動実行可能
Video: Eager
https://www.youtube.com/watch?v=X6ZL4BXOfbk
KidSIM (Cypher)
http://gyazo.com/e3811d24bde71596f7aedef782f60d90.png
KidSIM
例示によるアニメーション生成システム
処理前後の状態の絵の組で規則を表現
Graphical Rewrite Rule (GRR) の草分け
パタンにマッチする規則があればそれに従って盤面が変化
KidSIMの商品化
http://masui.org.s3.amazonaws.com/a/c/ac046dc993ee300f647599f3ba9e988f.png
Video: Stagecast
https://www.youtube.com/watch?v=Wq9uC58hF20
http://www.stagecast.com/movies/HowToMovie.html http://masui.org/ac046dc993ee300f647599f3ba9e988f.png
Stagecast
https://www.youtube.com/watch?v=51H1OnACvy8
原田
子供用のプログラミング
GRRを利用
https://gyazo.com/66a451fefd3be1832a7418b017065fd9.png
https://www.youtube.com/watch?v=0N8cpLHZ41I
http://www.youtube.com/watch?v=l6EcDeBnbXY https://gyazo.com/7d74e1f79cd032afa0dafb1254835c49.png
Video: Viscuit
https://www.youtube.com/watch?v=kxeaeCajuFc
http://www.youtube.com/watch?v=0N8cpLHZ41I
Web上のユーザプログラミング
ブラウザ上のJavaScriptプログラミング
ブックマークレット
ブラウザ拡張機能
Greasemonkey
Chickenfoot
ブラウザ上の例示プログラミング
iMacros
CoScripter
サーバ上のプログラミング
Yahoo! Pipes
ブックマークレット
JavaScriptプログラムをブックマークに登録
必要なときユーザが呼び出す
ブックマークレットの例
本棚.orgへの登録
Scrapboxページへの登録
ショートカットサービスへの登録
POP辞書
デモ: WebページからScrapboxページ作成
ブラウザ拡張機能
ブラウザの挙動を根本的に変えられる
解説
拡張機能の例
音声自動再生
廃れるページ
https://gyazo.com/654b895d2b76e41ae591e08f9c7fc9da
https://gyazo.com/82a4e817b5d32789f382fd72381b11b8.png
https://gyazo.com/b3284c8799e2c68b2272dc67ae1c39bc.png
音声自動再生
拡張機能の昔のイメージ
作成が大変
ブラウザ依存
拡張機能作成方法 (昔の状況)
Chrome
JS + CSS + HTML
Firefox
XUL + XPCOM
Addon-SDKで開発
Safari
JS + CSS + HTML
APIはChromeとかなり異なる
拡張機能作成方法 (最近の状況)
異なるブラウザで同じ拡張機能が使えるようになる
Chrome
JS + CSS + HTML
Firefox
XUL + XPCOM ← 廃止方向
Chrome互換
Safari
JS + CSS + HTML
Greasemonkey
Firefoxの拡張機能
ページの読み込み直後にJavaScriptを実行
Greasemonkeyの例
はてなブックマーク表示
なぞなぞ認証
JavaScriptプログラミング
ほぼ何でもできるのが魅力
かなりのプログラミング知識が必要
エンドユーザプログラミング
MITで開発
JavaScriptを拡張した言語でFirefoxを操作
HTMLを意識しないプログラミングが可能
JavaScriptプログラミングの敷居を下げる
開発者の主張
PC環境にはExcelのような優れたエンドユーザプログラミング環境があるのに、ブラウザ上には存在しない
JavaScriptを使うにはHTMLの中身をよく知る必要がある
ページの見栄えをベースにプログラミングしたい
JavaScriptで扱う対象
http://gyazo.com/875f5c57f5918afadead901f4e257155.png
Chickenfootで扱う対象
http://gyazo.com/6471c331aa6672042664913f5cba60ab.png
Chickenfootプログラミングの例
不動産サイトで家を捜し、自宅からの距離をGoogleMapsで調べる
ダンキンドーナツやマクドナルドに近いことを確認
デモ: Chickenfoot
(Firefox3でしか動かない)
insert(after('Chickenfoot'),"!!!")
Web上での例示プログラミング
iMacros
CoScript
Sikuli
ブラウザ上のユーザ操作の記録と再生
JavaScriptを書くわけではないので操作の再生しかできない
ビデオ: iMacros
http://www.youtube.com/watch?v=OHedT2hRL4Y
デモ: iMacros
IBM Researchで開発
Eager, StagecastのAllen Cyper氏
Firefox上の記録と再生
記録したスクリプトを柔軟に編集可能
ビデオ: CoScripter
https://www.youtube.com/watch?v=lKIex_XAxWw
http://www.youtube.com/watch?v=TyQPwPgbRZQ
ビットマップパタンマッチであらゆるGUI操作を実行
ビデオ: Sikuli
http://www.youtube.com/watch?v=FxDOlhysFcM
OpenCV利用
Rubyなども利用可能
https://www.youtube.com/watch?v=VdCOg1bCmGo
https://www.youtube.com/watch?v=I-UYoezac4Q
https://www.youtube.com/watch?v=vuqfDdPlI88
Web上の例示プログラミングの現状
研究はあるのに流行っていない
インストールも利用も面倒
手間に見合うかどうかは微妙
Dynamic Macroぐらい楽に使えるものが望まれる
Yahoo! Pipes
サーバ上でマッシュアッププログラミング
ビジュアルプログラミングを利用
http://masui.org.s3.amazonaws.com/f/c/fc4471a1378102c027ed7de43fac4e16.png
2015年に終了
https://gyazo.com/1e8c353d405d290f283468902daa1af9
LindaによるWebプログラミング
Webサーバ上でデータ共有/同期
様々なWeb情報と実世界デバイスが通信
Linda
タプル(データ組)をタプル空間(共有空間)でやりとりする
4種類のプリミティブで同期とデータ交換を実現
out -- タプルをタプル空間に書き出す。
in -- タプルをタプル空間から読む。タプルは消去する。
rd -- タプルをタプル空間から読む。タプルは消去しない。
eval -- プロセスを生成する。
Linda
http://masui.org.s3.amazonaws.com/5/c/5c79a78e3de1dcec20999cedfc5ddfad.png
LindaによるWeb上の通信
"say", "hello" というタプル
"door", "open" というタプル
Lindaを使うプログラミング
その他
エンドユーザプログラミングは流行りつつある?
例示プログラミング vs. エンドユーザプログラミング
「予測/例示インタフェースシステムには、
終了条件や条件分岐を示すことができない
操作が間違いを多く含んでいる場合に困る
推論エラーを修正できない
推論に高いコストがかる
といった欠点がある」
展望
ブラウザ上のプログラミング
機能は徐々に増えている
今のところニッチ
拡張機能はおすすめ
サーバ上のプログラミング
マッシュアップに有望