注目すべきWebサービス

■Greasemonkey

  • Greasemonkey: サイト毎に動作するスクリプトを記述できる

Userscripts.org

■Stylish

  • Stylish: サイト毎に自分の気に入ったCSSを使える

userstyles.org

  • userstyles.org: Stylish用のCSSを集積している
  • mixiのページデザインが3段組に変更された際に，その直後に2段組に変更するStyleが公開された
  • Search results for 'mixi'

■AutoPagerize

  • AutoPagerize: 「次のページ」を自動的にページにつぎたして表示してくれる
  • 「次」のリンクを一々押す必要がないため，スクロールするだけで次から次へと情報を見ていくことができる
  • AutoPagerize Wiki: 次ページを検出するためにWebサイト毎のメタデータ(SITEINFO)が必要であり，バックエンドとしてのWikiに保持している
  • SITEINFOではXPathによってメタデータを保持しており，記述力が高いため様々な指定方法が使える
  • SITEINFO数のグラフ化: 2007/01/13に公開後，4月ごろまで定常状態が続くが，5月ごろからうなぎのぼりに登っていき，2007/05/28には85サイト分のメタデータが保持されている
  • AutoPagerizeプレゼン資料: 2007/9/14には，193サイトに対応が拡大
  • Edit AutoPagerize: 2007/11/05現在のデータによれば，257サイトである
  • autopagerize: 更新情報

■AutoPagerize IDE

  • AutoPagerize IDE: SITEINFOを作るのを支援してくれるbookmarklet
  • SITEINFOではpageElement, insertBefore, nextLink, urlの4つの情報を指定する必要があるが，先頭の3つはXPathで示されるため，XPath記述方法を修得する必要がある
  • AutoPagerize IDEをbookmarkletから起動し，指定したい場所にマウスカーソルをのせると背景がオレンジになり，クリックするとXPathが表示される
  • 指定したい3個所を順に指定すると，SITEINFOが出来上がる
  • 実際には複雑なHTMLの場合は，人力で手直しする必要がある場合がある

■Pagerization

  • Pagerization: AutoPagerizeと同様な仕組み
  • XPathではなく，JavaScriptの関数としてSITEINFOを持つという違いがある
  • XPathでは表現できない，動的な構造を持ったWebサイトにも対応可能である
  • AutoPagerizeのXPathによるSITEINFOも使うため，上位互換として働く
  • http://userjs.oh.land.to/pagerization/siteinfo.v5.txt
  • JavaScriptの関数の集合としてSITEINFOを持つ．現在は2つのサイトに対応している．
  • スクリプトは静的に安全性を確認できないため，自動更新させることはできない
  • http://userjs.oh.land.to/pagerization/language.v3.txt
  • インタフェースの翻訳情報も，同様な仕組みで保持している

■AutoPager

■LDRize

  • 任意のサイトをLDRのような操作性にする

■LDRize + minibuffer

  • LDRizeと共同で動き，Webページにshellのような仕組みを導入する
  • マウスによる選択範囲内からURLを抜き出し，statusesを含むURLだけ抜き出し，それらをタブで開くといった処理がコマンドラインで可能

■YHC

  • YHC: 長文テキストをブラウザ上で読みやすく表示する
  • 一般にブログの長文エントリは人に読んでもらえない．ブラウザ上で，大きな文字で少しづつ表示することによって，人が読んでもらえるような見た目で表示することができるのではないかという仮説にもとづいたブラウザ動作環境を更新するGreasemonkeyスクリプト．
  • YHCデモビデオ: 例として捨松定吉というテキストをYHCで表示している
    • 2007/11/05現在，脆弱性の問題により公開停止中

操作

  • Greasemonkeyメニューから[YHC]を選んでスタートさせる
  • 対象となる部分をマウスで指定する
キー 機能
Esc 終了
↓ or S 再生開始/停止
→ or J or Space 次のスライド，再生中はスピードアップ
← or K 前のスライド，再生中はスピードダウン
G ジャンプ
Home 先頭のスライド
End 最後のスライド

■Strobo

  • Tumblr - Strobo: あるWebページの画像を一度にダウンロードし，フラッシュのように高速に切り替えながら表示する
  • http://jp.youtube.com/watch?v=8IPi4tZjN78 YouTube - Tumblr - Strobo(07/09/10)
  • Tumblr - Strobo(07/09/10)のデモビデオ
  • 画像を中心としたWebページの場合，そのページにある画像を一度に全部見てみたい場合がある
  • システムが自動的に画像を全部ダウンロードし，それを全画面で高速に切り替えながら表示してくれる
  • 大きな画面で短時間で切り替わることによって，短時間で多数の写真を一通り見ることができる
  • 写真の場合は，解像度が高ければ表示時間が一瞬でも内容を確認できるという持論をベースに作られている

操作方法

  • 任意の(user).tumblr.comページにいき，右下のGreasemonkeyメニュー→ユーザスクリプトコマンド→Strobo - Startを選ぶ
キー 機能
Esc 終了
↓ 開始／停止
→ 次へ，スピードアップ
← 戻る，スピードダウン
↑ or Enter 開く

■Share on Tumblr

  • Share On Tumblr: Webページ上の要素を右メニューから選択するだけでTumblrにポストできる
  • Tumblrではエントリーのポスト用にBookmarkletが用意されているが，例えば写真が多数はられているWebページなどの場合に非常に使い勝手が悪い
  • Share on TumblerではあたかもブラウザにTumblrポスト機能が統合したかのような利便性がある
  • 画像を投稿したい場合，画像の上で右クリックしてメニューからShare on Tumblrを選ぶだけで，その画像を投稿できる

■Mosaic

  • Tombloo 0.0.2、Mosaic: 手元にためた画像を再度見直すための仕組み
  • Tombloo - Mosaicデモビデオ
  • 画像をサムネイルの一覧として表示して，そこから画像を選んで表示できる
  • 画像のdownload元の情報も保持しており，元のWebページにさかのぼって表示できる

■Tombloo

■Audible

  • Audible(元ページ): Webページの動作状況を音で表現する
  • 一つのWebページ表示の背後では，CSSや画像など，様々な情報をダウンロードしている
  • それらのダウンロード状況を，リズムマシンの音として表現している

■CoScripter

■はてなスター

  • はてなスター: 自分が気にいったエントリーに星をつけられる仕組み
  • はてなダイアリーなどでは最初から対応しているが，Hatena Star Everywhere Greasemonkeyを使うと，任意のWeb上のエントリーに星をつけられるようになる
  • 裏側にSiteConfigWikiがあり，サイト毎の対応情報を保持している
  • メタデータはCSSセレクタで記述する．XPathよりも記述力が劣るが，より一般的であるため，使える人が多い．

■jquery2

  • jquery2: John ResigによるjQueryをベースとしたDSL(Domain Specific Language)で，jQueryをYAMLのような文法で記述できる
 <script src="http://jquery.com/src/latest/"></script>
 <script src="parse.js"></script>
 <script type="text/jquery">
   pre:
     css 'background' '#212121'
     css 'color' '#0F0'
     css 'padding' '10px'
     css 'font-size' '14px'
   body:
     prepend '<h1>jquery<sup>2</sup></h1>'
   input:first: click compile
   input:last: click run
 </script>
  • このように，<script type="text/jquery">というスクリプトタグを導入し，この中にYAMLのような文法でjQueryに相当するコマンドを記述する
  • 内部的にこの記述を読み込み，parseし，その場でjQueryのコードに書き換え，実行している
  • jQueryそのものを直接使うよりも，ずっとよみやすい記述を実現できる
  • つまりこれは，同様な仕組みで任意のスクリプト言語(DSL)をJavaScriptを基盤として構築可能であるということである

■Processing.js

  • Sneak Peek October 11th, 2007: Processing互換のプログラミング環境をJavaScriptで構築したもの
  • つまり，任意のWebブラウザ上で実行できる
  • 表示はCanvasを用いている．IEではGoogleによるVMLを使った互換環境を使える．
  • 上記のjquery2と同様な仕組みを用い，DSLとしてProcessingと同じ文法を実現でしている
Last modified: 2009-10-08

eto.com/d

Menu

more...

powered by qwikWeb