2006-07-30

Flashを使ってIMEをオフにする

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

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

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

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

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

2006-07-29

萌ディタで保存と同時にSafariをリロードするデモ

リアルタイム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なんだけど、何かいい方法あるだろうか。

del.icio.usにはてなブックマーク件数をくっつけるGreasemonkeyスクリプト画像バージョン

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

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

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

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

2006-07-28

del.icio.usにはてなブックマーク件数をくっつけるGreasemonkeyスクリプト

はてなブックマークの件数をまとめて取得する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

2006-07-25

ニンテンドーDSブラウザを試してみた

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

2006-07-18

IE7でlivedoor Reader使うと記事を読み込んだときにスクロールバーが正しく描画されない問題なんだけどbeta3でも直ってなかったのでMicrosoft Beta Clientとかいうのでバグレポートを送ってみた

頑張って再現パターンを作ってみた。
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%になります。正直これが直ってくれないと死活問題なんだけど…!

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

2006-07-17

萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ

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);
}


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

2006-07-14

Firefox2.0 Beta1の雑感

フィードの表示画面でパースエラーとか出るので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

2006-07-12

IKEAストアのユーザビリティを改善するGreasemonkeyスクリプト

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



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

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

導入前


導入後


どうぞご利用くだちい。

IEの遠隔操作用ライブラリmechanize.js

先日のShibuya.js Techtalk#2では開発手法の話とかは(前回話したので)あまりしなかったのですが、そういう話を知りたいという人も多いようなので適当に公開していこうと思います。

http://la.ma.la/misc/js/mechanize/

WWW::Mechanizeと似たインターフェースでIEを遠隔操作するライブラリです。htaから呼び出してテスト用のツールを作ったりします。wshからも使えると思います。
機能的には最低限のものしか実装してません。ファイルのアップロードとかはJS側からいじれなかったと思うので多分無理です。

この手のツールではseleniumというのが有名なのですが、多機能すぎて使い方が良くわからないので自作しました。単純な動作確認や連投に使ったりします。

これを使ってアレをナニしたりしているのですがとてもここには書けません。

2006-07-05

Ajaxについて、あとファイラーを作ってみた

JavaScriptとXMLHTTPを組み合わせた動的ロード技術全般に、
なにやらAjaxなる名前がついたらしい。
http://antipop.zapto.org/docs/translations/ajax.html

概論のみではあるけれど、とてもわかりやすく、そして
今までウェブデザイナが何もしてこなかったということが良くわかる。
ここに来てようやく、JavaScriptは評価を高めつつある。
JavaScriptはJavaよりも優れていると、ポールグレアムも言っていることだし。

----
世間がBlogだのRSSだのと騒いでいる間、
JavaScriptばかりいじっていた頭のおかしい人間がここにいるわけで。
iTunes程度のインターフェースであればJavaScriptで作成できます。
http://la.ma.la/filer/

IE、Firefox、Operaで動作確認。CPUが遅いと動作きついかもしれません。検索は完全ローカル、タグの更新が画面遷移なしに動きますがXMLHTTPは使ってません。隠しIFRAMEです。
1GHz程度あれば、ストレスなく動くとは思います。
とりあえず検索が試せるようにダミーのファイルを置いてあります。
ソースは古臭い書き方で参考になりません。ほとんど力技。
説明書なんかはここに。
http://ma.la/mirrorman/wiki.cgi/%e3%83%95%e3%82%a1%e3%82%a4%e3%83%a9%e3%83%bc

デスクトップサーチとか大掛かりなものでなくても、
Ctrl+Fで出てくる検索がこんな感じなら便利なんじゃないかと思う。

検索→選択→タグ付けの流れはブックマークとか、
BlogやWikiのサイトナビゲーション、何にでも使えるような気がする。
一段落ついたら、ちゃんとリファクタリングする予定。

----
Ajax関係のリンク
http://piro.sakura.ne.jp/latest/2005/02.html#d23

「クライアントが貧弱でもサーバが強力なら、連携を密に取りさえすれば何だってできる」

クライアントとサーバー、そのバランスは自由に変えられる。どの処理をどちらにやらせるのかの判別は非常に重要なことになると思う。
GoogleMapsは今まで高価なアプリケーションサーバーにやらせていた「地図の合成」という作業をクライアント側に持ってきた。
アクセス数が増えても地図画像の断片を置くデータサーバーを増設するだけでいいし、今後、P2Pなんかを使ったスマートなキャッシング機構が普及すれば、それすらも不要になるだろう。

頻繁に通信を行うことになっても、うまくやれば通信量もサーバーの負担も減らすことが出来る。

----
俺が今までやってきたことや、これから考えてるのは、Ajaxとはまた少しばかり手法が違うような気がする。
サーバーは本当に単純なデータの受け渡ししか行わず、
むしろ逆にクライアントがデータを検索してサーバーに検索結果を送る、という
JavaScriptで分散コンピューティング的なことを、かなり真面目に考えている。
とりあえずWikiのオートリンクのキャッシュ作りなんかで、実際に使うことになりそうだ。

2006-07-03

Shibuya.js #2 でしゃべってきました

前回に続き、shibuya.jsでしゃべってきました。

プレゼン資料はこちら。諸事情により少しフォントが小さめです。
http://ma.la/files/shibuya.js/techtalk2.html

JavaScriptが無効でも閲覧できるように画像に変換しておきました。

いくつか補足
- APIは最初から全部できてるわけじゃなく、必要に応じて拡張していく感じ
- 最初はダミーのJSONを読み込ませたりする
- プログラマはクライアント側一人、サーバー側一人、の計二人
- UIを作るのは分業できない気がする。
- 「とりあえず動く」状態ものは10日ぐらいで出来た。3月の頭ぐらい。
- プロトタイプを発展させてって、そのまま本番用になった。
- APIは今のところPlaggerで使ってる例もあるけど(Plagger以外で使ってる例ないけど)、人間向けのサーバーにアクセスが来るのは良くないので、そのうち公式な形でやる予定。

トリガーのデモ。
イベントを一度にたくさんの要素の割り当てるのと同等のことが出来る。マシンが遅いとかなり差が出る。
http://la.ma.la/misc/js/trigger/demo1.html
http://la.ma.la/misc/js/trigger/demo2.html

使いどころが難しいけど強力。onclickとonmousedownとか、特定のイベントしか監視できないのが難点。

そんな感じです。