2005-05-31
もんたメソッドなプレゼン作成ツール
今回は2分で作った。
手抜きですが何。まあいいや。とりあえず晒しとこう。
http://la.ma.la/misc/js/monta.html
降板するという話もあるので、どうなるんでしょうか、名前。
----
もんたメソッドとは
http://www.bricklife.com/weblog/000626.html
----
追記
piroたんが何か作ってるという噂。
手抜きですが何。まあいいや。とりあえず晒しとこう。
http://la.ma.la/misc/js/monta.html
降板するという話もあるので、どうなるんでしょうか、名前。
----
もんたメソッドとは
http://www.bricklife.com/weblog/000626.html
----
追記
piroたんが何か作ってるという噂。
2005-05-24
Ajaxを使わずに、はてなキーワードをインクリメンタルサーチ
Ajaxを使ったはてなキーワードインクリメンタルサーチというのをとくひろさんが作ってたので、対抗してAjaxを使わないはてなキーワードインクリメンタルサーチというのを作ってみました。
http://la.ma.la/misc/hatena/
CPUが遅いマシンだとブラクラなので注意。推奨2GHzぐらい。1GHzでもそこそこ快適。IE、Firefox、Opera8で動きます。safariでは動きません。最初にgzip圧縮済みキーワードリスト1.3MBを受信するので回線が遅いと利用開始までに時間がかかります。また、メモリをたくさん食います。
ドキュメントを書くのが面倒くさいので気が向いたら詳しい解説を書きます。
以下簡単な説明。
----
下準備
1.キーワードリストを取ってくる
2.kakasiで振り仮名をつける
3.文字コードをUTF8に変換、gzip圧縮して保存
JavaScriptの処理
1.キーワードのリストをXMLHttpRequestを使って受信(初回のみ)
2.ローマ字からmigemo風の曖昧検索用の正規表現文字列を作成する
3.受信したキーワードのリストから検索、euc-jpのURLエンコードして画面に書き出し
サーバー側でふりがな処理、クライアント側でローマ字かな変換と処理を分散することで、完全ではありませんがmigemo風の曖昧検索を実現しています。
それから、JavaScriptでgrepをやらせるのに、今までは配列をループさせてString.search()で検索していたのですが、このキーワード検索は巨大な文字列からRegExp.exec()で検索しています。マッチする箇所が見つかったら、左右の改行位置で行を切り出し、検索開始位置をずらして次のマッチ箇所を探します。とまあ、結構面倒くさいことをやっています。
今までは1000件程度ならJavaScriptで検索をやらせた方がいい、と考えていたのですが、この方式であれば、1万件ぐらいまでは余裕です。さすがに10万件はどうかと思いますが、1万件ぐらいなら余裕です。強調しておきます、1万件ぐらいまでは余裕です。この場合は件数というよりも「1MBぐらい」といったほうが正確かも。
問題は、必ず最初に1.3MBをダウンロードしないといけない点で、300KBずつに分割なんかも考えたのですが、面倒くさいのでやめました。イントラネット内だとか、ローカルに保存して使うなどの場合は全然問題無いのですが、逆にそういう回線が速くてサーバーを自由にいじれる環境ならそれこそAjaxを使っておけという話になるので存在意義が微妙です。
まあ、pure JavaScriptでも10万件から検索することができるよ!と、選択肢を一つ増やしてみた感じです。
実際は、何が速いとか遅いとかよりも、上下カーソルで選択してエンターで開けるようにしてみたりとか、そういう細かいところのUIのチューニングの方がよっぽど重要で、Googleが頑張ってるのもまさにそのあたり。バックエンドがどうなってようとも、ユーザーにとってはどうでも良いのではないかと思います。
http://la.ma.la/misc/hatena/
CPUが遅いマシンだとブラクラなので注意。推奨2GHzぐらい。1GHzでもそこそこ快適。IE、Firefox、Opera8で動きます。safariでは動きません。最初にgzip圧縮済みキーワードリスト1.3MBを受信するので回線が遅いと利用開始までに時間がかかります。また、メモリをたくさん食います。
ドキュメントを書くのが面倒くさいので気が向いたら詳しい解説を書きます。
以下簡単な説明。
----
下準備
1.キーワードリストを取ってくる
2.kakasiで振り仮名をつける
3.文字コードをUTF8に変換、gzip圧縮して保存
JavaScriptの処理
1.キーワードのリストをXMLHttpRequestを使って受信(初回のみ)
2.ローマ字からmigemo風の曖昧検索用の正規表現文字列を作成する
3.受信したキーワードのリストから検索、euc-jpのURLエンコードして画面に書き出し
サーバー側でふりがな処理、クライアント側でローマ字かな変換と処理を分散することで、完全ではありませんがmigemo風の曖昧検索を実現しています。
それから、JavaScriptでgrepをやらせるのに、今までは配列をループさせてString.search()で検索していたのですが、このキーワード検索は巨大な文字列からRegExp.exec()で検索しています。マッチする箇所が見つかったら、左右の改行位置で行を切り出し、検索開始位置をずらして次のマッチ箇所を探します。とまあ、結構面倒くさいことをやっています。
今までは1000件程度ならJavaScriptで検索をやらせた方がいい、と考えていたのですが、この方式であれば、1万件ぐらいまでは余裕です。さすがに10万件はどうかと思いますが、1万件ぐらいなら余裕です。強調しておきます、1万件ぐらいまでは余裕です。この場合は件数というよりも「1MBぐらい」といったほうが正確かも。
問題は、必ず最初に1.3MBをダウンロードしないといけない点で、300KBずつに分割なんかも考えたのですが、面倒くさいのでやめました。イントラネット内だとか、ローカルに保存して使うなどの場合は全然問題無いのですが、逆にそういう回線が速くてサーバーを自由にいじれる環境ならそれこそAjaxを使っておけという話になるので存在意義が微妙です。
まあ、pure JavaScriptでも10万件から検索することができるよ!と、選択肢を一つ増やしてみた感じです。
実際は、何が速いとか遅いとかよりも、上下カーソルで選択してエンターで開けるようにしてみたりとか、そういう細かいところのUIのチューニングの方がよっぽど重要で、Googleが頑張ってるのもまさにそのあたり。バックエンドがどうなってようとも、ユーザーにとってはどうでも良いのではないかと思います。
2005-05-23
イヤなハックを考えてみた
WEB+DB PRESS用にAjax記事を書いていたのですが、無茶を言って断りました。かなり迷惑かけまくってると思います、本当にすいません。理由は主に自分の文章力の無さからです。もう無理です、疲れました、限界です。南の島へ行ったりプールで泳いだりしたいです。あー遊ぶ金が欲しい。
で、代わりといってはなんですが、暇になったのでこんなものを作ってみました。
イヤなBlosxomフレーバー(IE限定)
参考資料と解説、あと音声読み上げエンジンをインストールすると声が出ます。
もっとカワイイ感じにしたかったのですが、無理がありました。
というわけで、「こんなHackなら、しないほうがマシだ」に応募してみます。他にも適当に15個ぐらいメールで送っておきました。大賞のBlogHacks一年分をブックオフに売って焼肉でも食べに行きたいと思います。
で、代わりといってはなんですが、暇になったのでこんなものを作ってみました。
イヤなBlosxomフレーバー(IE限定)
参考資料と解説、あと音声読み上げエンジンをインストールすると声が出ます。
もっとカワイイ感じにしたかったのですが、無理がありました。
というわけで、「こんなHackなら、しないほうがマシだ」に応募してみます。他にも適当に15個ぐらいメールで送っておきました。大賞のBlogHacks一年分をブックオフに売って焼肉でも食べに行きたいと思います。
2005-05-08
JavaScriptでBloglinesWebServiceを使う
なんか原稿書いたりで忙しくてBlog書いてて〆切に間に合わなかったらマズいなヤバいなとか思いつつも、原稿書くのが忙しくてBlog更新できませんとかいうのは責任転嫁っぽくて失礼な気がするので適当に(10分ぐらいで)書いたスクリプトをアップする。
JavaScriptとXMLHTTPで作ったシンプルなBloglinesWebServiceのクライアント、動作はIE系ブラウザ+ローカルhtmlファイル限定です。
http://la.ma.la/misc/js/bws.html
まずBloglinesのアカウントを持っていない人には何の役にも立ちません。アカウントを取るべきです。
それから対象をファイルに保存して、エディタで開いてユーザー名とパスワードを自分のに設定してSleipnirとかで開いてください。
素のIEだと、XPSP2から警告バーが出るようになってて鬱陶しいです。IEコンポーネントブラウザだと出てきません。
雛形なのでスタイルシートもデザインもなにもありません。面白い機能もありません。
ネタ元はこれ、そのまんまJavaScriptへの移植です。
http://hail2u.net/blog/rss/bws_bloglines_sidebar.html
新着チェックのAPIもあるので、新着があったら自動でバックグラウンドで取得してHTMLに出力するなんてのも割と簡単に作れると思います。XMLは不正な文字列が含まれているとエラーが出て使えませんでした。速度的には全然問題ないのでresponseText+正規表現パースの方が速かったりするのかもしれません。
IEはローカルファイルからインターネットゾーンのリソースを取得できるので、こういうツールが割と簡単に作れます。IE限定かっていうとそういうわけでもなく、同一ドメイン上に設置すればクロスブラウザで動かせるはずです。まあ要するにAPIとかRSS出力さえ用意しておけばブックマークレットとかUserJavaScriptとか使って勝手にインターフェース丸ごとすげ替えAjax化とかそういうことが出来るので便利だと思う。
IEとFirefoxではPUTメソッドとかも使えるようなのでAtomAPI叩いたりとかWebDAVクライアントとかもやれないことはなさそうだと思う。
JavaScriptとXMLHTTPで作ったシンプルなBloglinesWebServiceのクライアント、動作はIE系ブラウザ+ローカルhtmlファイル限定です。
http://la.ma.la/misc/js/bws.html
まずBloglinesのアカウントを持っていない人には何の役にも立ちません。アカウントを取るべきです。
それから対象をファイルに保存して、エディタで開いてユーザー名とパスワードを自分のに設定してSleipnirとかで開いてください。
素のIEだと、XPSP2から警告バーが出るようになってて鬱陶しいです。IEコンポーネントブラウザだと出てきません。
雛形なのでスタイルシートもデザインもなにもありません。面白い機能もありません。
ネタ元はこれ、そのまんまJavaScriptへの移植です。
http://hail2u.net/blog/rss/bws_bloglines_sidebar.html
新着チェックのAPIもあるので、新着があったら自動でバックグラウンドで取得してHTMLに出力するなんてのも割と簡単に作れると思います。XMLは不正な文字列が含まれているとエラーが出て使えませんでした。速度的には全然問題ないのでresponseText+正規表現パースの方が速かったりするのかもしれません。
IEはローカルファイルからインターネットゾーンのリソースを取得できるので、こういうツールが割と簡単に作れます。IE限定かっていうとそういうわけでもなく、同一ドメイン上に設置すればクロスブラウザで動かせるはずです。まあ要するにAPIとかRSS出力さえ用意しておけばブックマークレットとかUserJavaScriptとか使って勝手にインターフェース丸ごとすげ替えAjax化とかそういうことが出来るので便利だと思う。
IEとFirefoxではPUTメソッドとかも使えるようなのでAtomAPI叩いたりとかWebDAVクライアントとかもやれないことはなさそうだと思う。

