最速インターフェース研究会

エディタの保存と同時にブラウザを自動でリロードさせると開発がはかどって素晴らしいよ、みたいな話をしてたら軽く派生したわけなんですが

自動リロードで開発をアジャイルにするたった一つの方法！ < 31 < July < 2006 < nulog, NULL::something : out of the headphone
http://lowreal.net/logs/2006/07/31/1

hail2u.net - Weblog - CSSファイルを保存すると同時にブラウザをリロード
http://hail2u.net/blog/webdesign/save-css-file-and-reload-browser.html

WSHやRubyからキー操作を送るって方法だと、操作対象のウィンドウをアクティブにしないとキー操作を受け付けてくれなかったりして(もっといい方法あるのかも知れないけど)、一瞬だけどエディタからフォーカスが外れて気持ち悪かったりする。

AutoHotkey使うとバックグラウンドのウィンドウにもキー操作を送ることが可能で、こんな感じのスクリプトを書いて実行すると黙ってFirefoxをリロードすることができる。
http://la.ma.la/misc/ahktool/reload_firefox.ahk

中身はこれだけ。

#NoTrayIcon
SetTitleMatchMode, 2
WinGet, FF,, Mozilla Firefox
ControlSend,, {F5}, ahk_id %FF%

AHKの素晴らしいのは、書いたスクリプトを単体起動可能なexeファイルにコンパイルできること。AHKスクリプトのコンパイルは超簡単で、右クリックしてCompile Scriptを選ぶだけ。これだけでランタイム不要のexeファイルができあがります。189KBとサイズも軽量。ウィルスとか心配な人はAutoHotkeyをインストールして自分でコンパイルすると良いと思います。
http://la.ma.la/misc/ahktool/reload_firefox.exe

後はエディタの保存時にreload_firefox.exeが起動されるようにすればいい。萌ディタだったらこんな感じでsrcfile.javascript.txtなんかに記述する。

f.onSave = function(){
    var wsh = new ActiveXObject("WScript.Shell");
    wsh.Run("c:\\ahktool\\reload_firefox.exe", 0);
}

SleipnirもAPIを使わないでこれと同じ要領でいける。Operaは何故かうまくいかなかった。

参考：AutoHotkeyを流行らせるページ
http://lukewarm.s101.xrea.com/

IE系のブラウザはwindow.openで開いたページに対してはリファラを送りません。
例えばlivedoor readerのP+OとかVとかで開いた記事についてはリファラが残りません。なので、アクセス元の統計なんかには気持ち少なめに出るんじゃないかと思います。マウスを使ってるユーザーの分はカウントされますが、IE系のブラウザでショートカットキーで操作しているユーザーの分はカウントされません。

内輪なページからのリファラ隠しにwindow.openを使ってたりしたこともあるのですが、他のブラウザだと普通に送るので使えません。

まあだからどうしたという話ではあるのですが。
IE7でも送らないみたいです。

Operaのアドレス帳ってエクスポートしてもOperaでしかインポートできないような気がしたので作ってみた。
テンプレートいじればCSVとかにも変換できると思います。
http://la.ma.la/misc/js/adr2vcard.html

こういうファイルの形式変換みたいなウェブサービスやったら流行るんじゃないかと思ったけどメールアドレス収集みたいなことができるからやりたくないと思った。

だからJavaScriptで作るわけだけど。

半熟だった。
http://pics.livedoor.com/u/mala__/1341329

ページ訪問者数の男女比を調べるサービス
http://adlab.microsoft.com/DPUI/DPUI.aspx

なんてのがあって、少し前にあれこれURL入れて遊んだりしてたんだけど、結果にリンクが張れないのが難点で、これはPOSTメソッドでフォーム送信しているからなんだけれど実際のところGETでも動いたりする。
なのでFirebugでごにょごにょやったり、Web Developer Extensionでフォームのメソッド変える機能があるのでGETにすればリンクを張れるようになるんだけど汎用的にブックマークレットにしてみた。

フォームをGETに

Web プログラマの方にアンケートです。現在仕事で使っている言語と、一番好きな言語を教えてください
http://q.hatena.ne.jp/1155781580

という質問があったので、さくっとGreasemonkeyでビジュアライズするスクリプトを書いてみた。
http://la.ma.la/misc/userjs/hateqvisualcell.user.js

横軸に好きな言語で集計

python好きの人はpythonで仕事してるみたいです。

横軸に仕事で使ってる言語で集計


おおむね仕事で使ってる言語が好きみたいですが、JavaScript使いはPHPが好きみたいです。
使ってる言語の方は複数回答なので、PHPプログラマがついでにJavaScriptを書かされてるんじゃないかと予想。

沖縄ではPHPしか使われてないとか、C#使いはC#が好き(一名)とか、母数が少ないのでよくわかりません。

Flashのフォーム以外でもFlashを使って制御できるみたい。Opera以外動いた。

サンプル
http://la.ma.la/misc/ime_off/

元ネタ
http://d.hatena.ne.jp/brazil/20060730/1154189478

同様のものはググればすぐに見つかるのですが、あくまでFlashのサンプルに過ぎず、使えない感じでした。

FlashProxyは「Flashに何かをやらせるためのツールキット」という感じではなく、
JavaScriptのオブジェクトにFlashのメソッドをくっつけられるといった印象。
特定の目的に特化しておらずシンプルで美しい。MTASCで作られてるのもいい感じです。

リアルタイムCSS編集の第二弾。やってることあまり変わらないけど。

VNCでSleipnirと同時に表示してキャプチャしてみた。
http://la.ma.la/misc/demo/realtime_cssedit2.htm

Apple scriptを使ってSafariをリロードすることができるのでWEBrickでSafariをリロードするだけのhttpサーバーを立てておいて、ファイル保存時に萌ディタから叩くようにしてみた。前回はSleipnirを使っていたけど、これでSafariでも同時に確認できるようになった。Safariリロードするためだけにサーバー立てるのはどうなのかとかdRubyとか使うのがいいのかも知れませんが、よく知らないので。httpだったら他のエディタからでもやりやすいんじゃないかと。

萌ディタ側

function XMLHttpRequest(){
    return new ActiveXObject("Microsoft.XMLHTTP");
}
function reload_safari(){
    var req = new XMLHttpRequest;
    req.open("GET", "http://MacのIPアドレス:3811/?"+(new Date-0), true);
    req.send(null);
}
// reload_safari()をf.onSaveに追加。

Mac側

#!/usr/bin/ruby
require 'webrick'
config = {
    :BindAddress => '0.0.0.0',
    :Port => 3811,
#   :Logger => WEBrick::Log.new("log",0),
#   :AccessLog =>  WEBrick::Log.new("log",0),
}
s = WEBrick::HTTPServer.new(config)
Signal.trap('INT') do
    s.shutdown
end
reload_safari = Proc.new{
    io = open '|osascript', "w"
    p io
io.puts <<END;
    tell application "Safari"
    do JavaScript "location.reload(true)" in document 1
    end tell
END
    io.close
}
s.mount_proc("/", reload_safari)
s.start

あとはFirefoxとOperaなんだけど、何かいい方法あるだろうか。

以前作ったのですが、なんか画像APIの方が負荷が低いとかいう噂を聞いたので画像で表示するやつを作ってみました。

http://la.ma.la/misc/userjs/dxh_img.user.js

どうぞ(livedoorクリップを)ご利用ください。

----
2006-07-29 / 1.0.1
flickrのサムネイル出てる場合にエラーが出るので直した。

はてなブックマークの件数をまとめて取得するAPIができた、ということで
http://d.hatena.ne.jp/naoya/20051212/1134375086

Bloglinesにはてなブックマーク件数をくっつけるGreasemonkeyスクリプトの
http://d.hatena.ne.jp/m4i/20051213/1134425307

改造して作ってみました。
http://la.ma.la/misc/userjs/dxh.user.js

Firefox1.5とGreasemonkey0.6.4で動作確認してます。E4Xを使っているので1.0系では動きません。
変更点はXPathをちょっといじったぐらいです。かなり簡単に作れます。
なんかループが多かったのでレスポンスを連想配列に入れるようにしました。

後、これ系の作る時にはXPath検索バーが便利です。
http://tokyoenvious.xrea.jp/b/javascript/xpath_finder.html

とりあえず公開、後で何か書くかも。萌ディタ強制終了して文章消えた。

----
1.0.1
typesterさんの要望によりURL個別ページにも表示するようにしてみた。こういうの。
http://del.icio.us/url/1ab69d1ff092ab4ed57297fadde9da19

----
2006-03-11 / 1.0.2
del.icio.usのデザイン変更に伴う修正。

2006-07-28
画像API使ったバージョンを作った。
http://la.ma.la/blog/diary_200607281316.htm

livedoor Reader
無理でした。(ブラウザ古いって出る)

このブログの検索
無理でした。

Google Suggest
無理でした。

ブックマークレット javascript:alert(XMLHttpRequest)
無反応でした。

ブックマークレット javascript:location.href="http://www.google.com/"
無反応でした。

about:opera
不正なアドレスです。

JavaScriptは動くけどXMLHttpRequestが使えません。Ajax対応とか言ってたのはどいつだ。

電源を切るとcookieが消えてしまうのでログインスクリプトでも組んでブックマークレットに入れておこうかと思ったのだけれど肝心のブックマークレットすら使えず。まあ騙されて買ったお前らははてなRSSでも使ってなさいってこった。

ニンテンドーDSブラウザー
ニンテンドーDSブラウザー(lite専用)

----
7/25追記

ブックマークレットは末尾にセミコロン付けたら動いた。
http://web.sfc.keio.ac.jp/~t03792sh/archives/2006/07/dsbookmarklet.html

改めて検証
javascript:alert(XMLHttpRequest); → 無反応
javascript:alert(typeof XMLHttpRequest); → undefined

頑張って再現パターンを作ってみた。
http://la.ma.la/misc/ie7scrollbug.html
http://la.ma.la/misc/ie7scrollbug2.html

こんな感じになる
http://la.ma.la/misc/demo/ie7bug.htm

- 標準準拠モードで
- 親要素にposition:relativeを含む
- overflow:scrollな要素

でレンダリングがおかしくなってCPU使用率が100%になります。正直これが直ってくれないと死活問題なんだけど…！

まあ、直らなかったら直らなかったで何とかするつもりではあるんだけど、ブラウザに応じて分岐とかは出来ればやらないで済ませたいんで何とかしていただきたいなあと思うしだいです。

Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。
http://la.ma.la/misc/demo/realtime_cssedit.htm

エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。
仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。

プロキシサーバーはPerlで書かれた同等のものがここにあります。
http://www.ornithopter.jp/archives/2006/05/perl_perl.html

自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。
http://la.ma.la/misc/src/proxy.zip

送信ヘッダからリファラを消すようにしたり、設定ファイルをYAMLにしたり、設定を定期リロードするようにしてサーバー再起動を不要にしたりしてます。
あとは、TemplateToolkitのsyntaxをRubyで置換する処理を書いています。

例えば

[% loadJS(['file1','file2']) %]

みたいな記述をプロキシ側で

<script type="text/javascript" charset="UTF-8" src="/js/file1.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/file2.js"></script>

というように置換してくれます。これも外部ファイルをmodule_evalで評価して再起動せずに変更が反映されるようにしてます。
まあなんか多分色々間違ってるので、誰か添削してくれるとありがたいです。

萌ディタのファイル保存と同時にSleipnirをリロードさせるのはこんなのをsrcfile.javascript.txtに書くとできます。

f.onSave = function(){
    var pnir   = new ActiveXObject("Sleipnir.API");
    var tabid  = pnir.GetDocumentID(pnir.ActiveIndex);
    var window = pnir.GetWindowObject(tabid);
    window.location.reload(true);
}

萌ディタ使ってる人はいないだろうけど、開発用のローカルプロキシ立てるのはオススメです。

フィードの表示画面でパースエラーとか出るのでchrome/browser.jarを適当なアーカイバで開いて
browser/feeds/subscribe.xhtmlの

<h1>&error.title;</h1>
<p>&error.message;</p>

になっているところを

<h1>&amp;error.title;</h1>
<p>&amp;error.message;</p>

に書き換えて保存したらとりあえず直った。

フィードリーダーにlivedoor Readerとか追加する方法はここらへんに書いてある。
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5194

あとlivedoor knowledgeがさりげなくOpenSearch Auto-Discoveryに対応してたりするよ。
http://knowledge.livedoor.com/

フィードリーダーの選択とかに関しては色々と思うところあるのであとで何か書くかも。

----
追記
フィードの表示でエラーになるのとかは日本語パックの開発バージョンを入れれば直るそうです。
http://firehacks.org/blog/posts/46

IKEAのユーザビリティがひどいです。



選択項目が一つしかないならプルダウンメニューを使うべきではありません。
不適切なプルダウンメニューの使い方はユーザーに過度な期待を抱かせる危険があります。
「ひょっとしてうちの近くにもイケアがあるのか？」
いいえ、実際にはFunabashiしかありません。ユーザーは失望し二度とサイトを訪れなくなるでしょう。

そんな苦痛を和らげるべくGreasemonkeyスクリプトを書いてみました。
http://la.ma.la/misc/userjs/ikea_auto_funabashi.user.js

導入前


導入後


どうぞご利用くだちい。