次世代Webプラットフォーム論(8) Webとエンドユーザープログラミング 2016/12/26

Webとエンドユーザプログラミング

エンドユーザプログラミング

一般のユーザが、特殊な知識無しでプログラミングを行なう

エンドユーザプログラミングの実例

ビデオ予約

目覚まし時計

炊飯器

エンドユーザプログラミングの必要性

カスタマイズ要求

個人によって要望は違う

ルーチンワークの自動化

同じことを何度もやりたくない

特殊機能の実装

カスタマイズの例

「テーマ」の変更

キーボードショートカット設定

個人専用検索

IME設定

操作の自動化

登録/検索操作の自動化

マッシュアップ

店を検索しては現在地からの距離を求める

ぐるなび + GoogleMaps

エンドユーザプログラミングシステムの技法

抽象的思考を排除する

具体的な操作/見栄えを利用

ビジュアルプログラミング

例示プログラミング

エンドユーザープログラミングの例

表計算ソフト

Automator

表計算ソフト

宣言的 / 具体的

https://gyazo.com/71b2223522831b4701c7117ac509529d.png

Automator

Macintoshのエンドユーザプログラミング環境

ビジュアルプログラミング風味

http://i.gyazo.com/0a7f3224bcc395fc919f84a3ef4b36e2.png

例示プログラミング

例を与えるとシステムが規則を推論

帰納的推論

いくつかの例から普遍的法則を導く

一般化 / 知識形成

単純な例示プログラミング

Dynamic Macro

Stagecast

Emacs上での操作の再実行

操作履歴から繰返しパタンを抽出

あらゆる繰返し操作に対して有効

マクロ登録が不要

https://gyazo.com/49d793cc04ab1946e640c2366c6aac48.gif

Demo: Dynamic Macro

ブラウザ上のDynamic Macro

Firefoxの拡張機能

Dynamic Macroの動作

2回続けて全く同じ操作列が実行された後で繰り返し実行キーが入力されるとその1回分を繰り返す

そのようなパタンが複数存在するときは最長の繰り返しパタンを選択

Dynamic Macroの動作 (Cont'd)

直前の操作列と全く同じ操作列が以前の操作列中に存在するとき、それらの間の処理を実行する

もう一度繰り返し実行キーが押されると繰り返しパタンを実行する

Firefox拡張「KeySnail」を利用

JavaScriptで記述

Eager (Cypher)

http://gyazo.com/6137905efa632ac7386ffdc7647a9891.png

Eager

HyperCard上の繰り返し操作から次の操作を予測

システムは常にユーザ操作を監視

次の操作を先取りしてユーザに提示

提示された操作と同じ操作をユーザが実行した場合は推論の肯定とみなす

推論を無視して操作を続けた場合は否定とみなす

正しい予測を行なっているとユーザが確信した場合は残りを自動実行可能

Video: Eager

KidSIM (Cypher)

http://gyazo.com/e3811d24bde71596f7aedef782f60d90.png

KidSIM

例示によるアニメーション生成システム

処理前後の状態の絵の組で規則を表現

Graphical Rewrite Rule (GRR) の草分け

パタンにマッチする規則があればそれに従って盤面が変化

KidSIMの商品化

http://i.gyazo.com/ac046dc993ee300f647599f3ba9e988f.png

Video: Stagecast

https://www.youtube.com/watch?v=Wq9uC58hF20

子供用のプログラミング

GRRを利用

http://gyazo.com/66a451fefd3be1832a7418b017065fd9.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への登録

ショートカットサービスへの登録

POP辞書

デモ: WebページからScrapboxページ作成

ブラウザ拡張機能

ブラウザの挙動を根本的に変えられる

解説

拡張機能の例

廃れるページ

https://gyazo.com/a70dbe003536789cf3cd96bcb06043ab.png

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

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://i.gyazo.com/fc4471a1378102c027ed7de43fac4e16.png

LindaによるWebプログラミング

Webサーバ上でデータ共有/同期

様々なWeb情報と実世界デバイスが通信

Linda

タプル(データ組)をタプル空間(共有空間)でやりとりする

4種類のプリミティブで同期とデータ交換を実現

Linda

http://masui.org/5c79a78e3de1dcec20999cedfc5ddfad.png

LindaによるWeb上の通信

"say", "hello" というタプル

"door", "open" というタプル

Lindaを使うプログラミング

その他

エンドユーザプログラミングは流行りつつある?

例示プログラミング vs. エンドユーザプログラミング

「予測/例示インタフェースシステムには、

終了条件や条件分岐を示すことができない

操作が間違いを多く含んでいる場合に困る

推論エラーを修正できない

推論に高いコストがかる

といった欠点がある」

展望

ブラウザ上のプログラミング

機能は徐々に増えている

今のところニッチ

拡張機能はおすすめ

サーバ上のプログラミング

マッシュアップに有望