HouseTect, JavaScript Blog

space - HTML5 & CSS3 DEMO

Sat, 13 Mar 2010 15:35:51 +0900

画像やFlashはいっさい使わずに何か中心に向かってアニメーションするものを作りたいと思って制作してみました。今回もjsDeferrd.jsを使用。 cho45's jsdeferred at master - GitHub 中心に向かって行くということで、何かが中心にないと面白くありません。なので、疑似的な太陽をCSS3で作り、そこにHTML5のcanvasが向かって行くという感じになりました。

サンプルコード - CSS3

実はまだこのgradientというCSSプロパティが良くわかっていなくて、Firefoxで出来るけど、Safariでどうやるのかな〜という部分を検証中です。 -moz-radial-gradientというプロパティを使って太陽を描いているんですが、これをWebkitでどう指定するのかが分からない！なので、mozとwebkitでは別々の背景にしています。またbodyタグに-moz-radial-gradientを指定するとなぜかうまく円が描かれなかったです。 divを画面のheight、widthに広げてそこにスタイルを当てるようにして回避しました。あとHTML5のvideoタグも使って音楽を出しています。使っている曲は、HoldenのA Break in The Clouds - Main Mixです。（怒られたら使用するのやめますw）宇宙っぽさが演出できる名曲です。 Firefoxで見ていただくのが一番いいです。 Chrome、Safariの場合は円ではなくグラデーションになってます。以下からどうぞ。 space - HTML5 & CSS3 DEMO

プログラムコード

・gist: 331165 - GitHub

squareDeferred

Sat, 13 Mar 2010 15:21:25 +0900

なんとなく思い立って、jsDeferred.jsでアニメーションのループがしてみたいってなったので作ってみた。この手のアニメーションを考えるときは、どちらかというと間違ったコードが面白さを生み出す。つまり、不意に間違って2回ループしたら面白いや、ストーリーの組み直しなどで型にハマらない動きができたりする。ここ最近は拙作のaddCommand - jQuery Pluginでアニメーションを書いていたんですが、jsDeferredも便利ですね〜。処理の割り込みや、setTimeoutで待たせるときに使ったりしてましたが、アニメーションでも十分に使いやすい。 cho45's jsdeferred at master - GitHub

サンプルコード - jsDeferred.js

ストーリーのループは以下のようにfunctionのcalleeを最後のnextで呼ぶようにしてあげてます。これで疑似無限ループの完成。あとjQuery1.4以降の機能でeasingをCSSプロパティ毎に指定できるので、それで少し気持ち悪い動きをくわえてみたりしてます。 Firefoxでも頑張って動いてくれますが、ChromeかSafariのほうが軽快に動作します。以下からどうぞ。 squareDeferred

プログラムコード

・gist: 331150 - GitHub

flickrダラ見サイト - flickrer作ってみた

Mon, 08 Mar 2010 04:33:49 +0900

自分がflickrをダラ見することが多いので、それっぽい感じのサイトを自分用に作ってみた。特に難しいことはしてなくて、

$.jOpening
$.flickr
$.fn.jCurtain

という3つのプラグインを作って制作してます。あと、miyagawaさんのmiyagawa's jquery-fitimage at master - GitHubを使って拡大画像の調整をしています。実は単にカーテンのようなスライドを作ってみたくて、何か面白いことできないかな〜と思っていたらflickrでやったらいいかもと思って試しに作ったのがこのサイトになります。初めのオープニング部分では、左右からラインが伸びてくるのですが、この当たりはFlashを意識して作っています。今後もうちょい機能増やして、ダラ見しやすくする予定。 autoでスライドしていくとか。対応ブラウザは以下（試したのが以下w）

IE7
Safari4
Firefox3.6
Chrome5

もしよかったら使ってみてくださいな。 flickrer - flickrダラ見サイト追記：

@hisasann マウスオーバーで画像を読むまでに間が空くのがもったいないので裏で呼んでおいたほうがいいんじゃないかと。
via: Twitter / edvakf

との意見をいただいたので、拡大画像部分の画像を先読みするように修正しました。

TextMateにZen-Codingを導入して遊んでみる

Mon, 01 Mar 2010 12:36:54 +0900

つい最近cipher @ Ustream.TV - こもりですさんがZen-Codingのやり方をustで流していたのが新しいですが、TextMateを使うと簡単にZen-Codingが楽しめるのでその導入方法をまとめときます。（ほぼ自分用ｗ） Zen-CodingとはHTMLやCSSのコーディング作業を快適に、そして高速におこなうための追加機能のようです。なので、Editorに追加でプラグインを入れてZenなCoding環境を構築する必要がありそうですね。では一応TextMateの日本語化の部分から解説します。

TextMateを日本語化

TextMateはデフォルトではマルチバイトに対応していません。なので、プラグインを入れて日本語を打てるようにする必要があります。以下のリンクに詳しくまとめてありますので、参考にしてみてください。 Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた

TextMateにZen-Codingを導入する

ではZen-Codingを行うためのプラグインを導入してみましょう！まずは以下のサイトからzipファイルをダウンロードし解凍しときます。

TextMate.Zen.CSS.1.3.1.zip
TextMate.Zen.HTML.1.3.1.zip

zen-coding - Project Hosting on Google Code

Zen.Coding-TextMate.v0.6.zip

Downloads - zen-coding - Project Hosting on Google Code そして以下のディレクトリに3つのtmbundleファイルを配置します。

/Users/hoge/Library/Application Support/TextMate/Bundles

これでZen-Codingのプラグインの導入はおわりです。

Zen-Codingしてみる

まずはTextMateを起動します。そしてHTMLを入力するので、Option + Command + hを押します。これでZenなHTMLモードになります。ためしに「html:4t」と入力してみます。すると。。。とHTML 4.01 Transitionalで展開されます。また、「html:5」と入力すると。。。とHTML5モードで展開されます。実は今までも、メニューから「File -> New From Templete -> HTML」と選択していけば同じようなテンプレートを呼び出せたんですが、毎回新しいhtmlを作成するときにメニューに行くのは面倒でした。なので、Zen-Codingでhtmlの雛形を一気に生成できることは、htmlコーダーやJavaScripterの人に大きな恩恵をもたらすと思います。さらに適当なhtmlを入力してみます。 div#ならid指定、div.ならclass指定の要素が展開されます。なかでもやっぱりうれしいのが、table+やdl+でしょう。いちいちtableタグを作ってその中にtr作ってとやっていた作業が1パツで展開されます。グルーピング系のhtmlタグはBlogの記事を書くときにも使うので、非常に楽になるのではないでしょうか。ちなみに僕はBlogの記事をすべてTextMateで作成しています。 blockquoteと入力してタブを押せばタグが展開されたり、もう便利なのです！

動画でZen-Codingを体感してみる。

こもりさんのブログgaspanik weblogに動画があり非常に参考になりますので、ここに掲載させていただきます。 [via] TextMate+Zen-Codingで超速コーディング？ | gaspanik weblog Zen-Codingでできるあんなことこんなこと | gaspanik weblog

TextMateのcolorについて

全然関係ないんですが、僕のTextMateのtheme colorはMonokai » Blog Archive » Textmate color themeを使っています。 JavaScriptとか結構かっこよく色分けしてくれるので、ずうっとこれ使ってます。他の色にしたいなら Themes / UserSubmittedThemes browse -- TextMate Wiki がオススメです、すごい量のtheme colorがあるので、自分色を探してみるのもよいかもしれません。 ■関連リンク・TextMateのGetBundleがうまくいかないときの対処方法 at HouseTect, JavaScript Blog ・よく使うTextMateショートカット at HouseTect, JavaScript Blog

Macで半角カタカナを入力する方法

Sat, 27 Feb 2010 22:47:08 +0900

入力できないというのは知っていたんですが、半角カタカナを有効にする設定がどこにあるのか分からなかったので、メモメモ。

システム環境設定を開く

まずはシステム環境設定を開き、言語環境をクリックします。

半角カタカナを有効にする

入力メニューのタブをクリックして、あとはことえりの設定のところで、半角カタカナにチェックを付けるだけ。

半角カタカナを入力するとき

適当に日本語で文字を打ってから、「Ctrl + ;」で半角カタカナに変換できます。僕はあんまり半角カタカナを使わないんですが、システムのテストで必要になるかもしれません。 [via] macで半角カナ: たなごころ

Macに複数MySQLをインストールする方法

Tue, 23 Feb 2010 16:59:43 +0900

MacPortsでインストールする方法MacPortsでMySQLをインストール -- BONNOH FRACTION 13や、pkgでインストールする方法素晴らしき哉、人生！: Mac OS 10.5にMySQLインストールを見てみたんですが、どうもこれらの方法では複数のMySQLを同居させるのがむずかしそうだったので、ソースからコンパイルして入れてみた。そしてうまく複数のMySQLが動いたので、そのときのメモメモ。。。

ソースをダウンロードする

以下のリンクからtar.gzをダウンロードします。今回僕はmysql-5.0.33をインストールしましたので、適宜自分のバージョンに置き換えて読んでいただけたらと思います。 MySQL :: Download MySQL Community Server そして適当なディレクトリに解凍する。

tar zxvf mysql-5.0.33.tar.gz

Macだと基本的にmysql-5.0.33.tar.gzをダブルクリックすれば解凍ソフトが起動するので、ターミナルでなくてもOKだと思います。今回は/usr/local/srcディレクトリに解凍しました。そしてディレクトリに潜る。

cd mysql-5.0.33

コンパイルする

まずはconfigureを実行します。このときのコンパイルオプションは結構重要で、とりあえず以下の感じに落ち着きました。 --with-mysqld-user=hogeのところは、Macにユーザ権限でmysqlをソースから（あと、DBD::mysqlも） - Born Neetを参考にして、今ログインしているユーザーを記述してみました。 --prefix=/usr/local/mysql3306は複数のMySQLを/usr/local/に同居させるので、mysqlの後に僕はport番号をサフィックスとして付与しています。

./configure --with-charset=utf8 --with-mysqld-user=hoge --with-unix-socket-path=/usr/local/mysql3306/var/mysql.sock --prefix=/usr/local/mysql3306 --with-blackhole-storage-engine --with-federated-storage-engine

configureがうまくいけば、あとはmakeで終わり。

make make install

データベースを初期化する

/usr/local/mysql3306/bin/mysql_install_db --user=hoge

もしここで「unknown option '--skip-federated'」のようなエラーが出てしまう場合は、以下のファイルの

/etc/my.cnf

この部分をコメントアウトしてください。

#skip-federated

[via] mysql 5.1のmysql_install_dbがこける - うまい棒blog 初期化が終わるとデータディレクトリのvarが作成されます。

/usr/local/mysql3306/var/

そして今回の重要なポイントですが、MySQLを別ポートで複数起動するので、このmy.cnfが1つだとうまくいきません。 my.cnfにportを指定する箇所があるので、別々のMySQLは別々のmy.cnfを見に行って欲しいわけです。なので、今回は

cp /etc/my.cnf /usr/local/mysql3306/var

を実行してmy.cnfをデータディレクトリにコピーしました。これで順番的に自分自身のmy.cnfを見に行くようになります。また、mysql.sockというMySQLが起動したときに作成されるファイルも別々にしたいので、これもデータディレクトリに作ってねっ！と記述しています。一般的には/tmp/mysql.sockに作成されるようです。

[client] default-character-set=utf8 #password = your_password port = 3306 socket = /usr/local/mysql3306/var/mysql.sock # Here follows entries for some specific programs # The MySQL server [mysqld] default-character-set = utf8 skip-character-set-client-handshake character-set-server = utf8 collation-server = utf8_general_ci init-connect = SET NAMES utf8 port = 3306 socket = /usr/local/mysql3306/var/mysql.sock skip-locking key_buffer = 16M max_allowed_packet = 1M table_cache = 64 sort_buffer_size = 512K net_buffer_length = 8K read_buffer_size = 256K read_rnd_buffer_size = 512K myisam_sort_buffer_size = 8M

MySQLを起動する

起動コマンドは以下のとおり。

cd /usr/local/mysql3306/bin ./mysqld_safe &

これでバックグラウンドでMySQLが起動します。ちょっと教えてもらった操作をメモ。もし以下のように&を付けずに起動した場合、

./mysqld_safe

Ctrl + zで一旦プロセスを落として、

bg

と叩くと

./mysqld_safe &

をしたときと同じ動作になるみたい。最後に、プロセスが立ち上がっているかを以下で確認する。

ps ax | grep mysql

MySQLを停止する

以下で止まる。

./mysqladmin shutdown --socket=/usr/local/mysql3306/var/mysql.sock

まとめ

これで、もうひとつmysqlを作りたい場合は、「コンパイルする」の部分から--prefixを変えて実行すればよい。結構手順としては面倒だが、プロジェクトが複数のMySQLを必要としている場合に、この手順が参考になれば幸いです。 ■関連リンク・MySQL :: MySQL 5.1 リファレンスマニュアル :: 2.5 Mac OS X に MySQL をインストールする・「Can't connect to local MySQL server through socket」エラーについて・MySQL :: MySQL 4.1 リファレンスマニュアル :: 4.8.3 mysqld_multi（複数の MySQL サーバを管理するプログラム）・MySQL / Mac OS X ・Macにユーザ権限でmysqlをソースから（あと、DBD::mysqlも） - Born Neet ・MySQL :: MySQL 4.1 リファレンスマニュアル :: 2.4.1 mysql_install_db の実行に関する問題・1台のサーバに複数のMySQLをインストールしてみた。 | RwJ ・MySQL :: MySQL 5.1 リファレンスマニュアル :: 2.9.2 典型的な configure オプション・MySQL :: MySQL 4.1 リファレンスマニュアル :: A.4.5 MySQL ソケットファイル /tmp/mysql.sock の保護または変更方法

MacにImageMagickをインストールする方法

Tue, 23 Feb 2010 16:50:28 +0900

いろいろググッた結果、MacPortsからインストールするのが速そう。ということでまずはMacPortsのインストールから解説します。すでに入っているかたは、読み飛ばしてください。

MacPortsをインストールする

まずは、Xcode ToolsをMacに付属しているインストールディスクからインストールします。終わったら、http://svn.macosforge.org/repository/macports/downloads/からバージョンを選んでダウンロードする。僕のローカルにはすでに、MacPorts-1.7.1が入っていたので、このバージョンでも問題ないと思います。次に環境変数にパスを追加しときます。

cd vim .bash_profile export PATH=/opt/local/bin:/opt/local/sbin/:$PATH export MANPATH=/opt/local/man:$MANPATH

一応リフレッシュしとく。

source .bash_profile

あとはMacPortsをアップデートしておわり。

$ sudo port -d selfupdate $ sudo port -d sync

[via] MacPortsでステキなUNIXツールをインストール - はこべにっき#

ImageMagickをインストールする

ここまで来るとあとは楽チンで、

$ sudo port install ImageMagick

これで終わり！いろんなものを一緒にインストールするので、だいたい30分くらいはかかるかも。すでに、MacPortsでインストールされているものを確認するなら、

$ port installed

と叩けば、ゾロゾロと表示されます。 [via] [を] Mac に ImageMagick を入れた ■関連リンク・新しいMacbook Proにインストールしたものメモ・MacPortsのコマンド逆引き一覧 -- ディノオープンラボラトリ

Wordpressの画像アップロードを激的に便利にする方法

Mon, 15 Feb 2010 19:24:06 +0900

以下のJavaScriptファイルに

wp-admin/js/media-upload.js

send_to_editorという関数があるので、その中の以下の部分を書き換えるとアップロード後や投稿に挿入後に再び画像アップロードのレイヤーが表示される。これで、

複数ファイルをアップロード
名前を変更する
変更を保存する
ひとつずつ画像を投稿に挿入する

という手順ができるので、激的に作業が速くなる。 Wordpressを使っているとどうしても画像のアップロードのところの面倒くささがあって、記事を書くのが少しおっくうになるが、これで少しでもブログを書くのが楽しくなれば幸いです。 ■関連リンク WordPress › フォーラム » 画像の「投稿に挿入」の効率化

TextMateのGetBundleがうまくいかないときの対処方法

Fri, 05 Feb 2010 16:01:16 +0900

TextMateを使っていると基本的にはデフォルトのBundleでことが足りるんですが、jQueryBundle入れたり、MootoolsBundle入れたりと何かしらBundleを自分でインストールする機会があります。このときにBundleを簡単にインストールできるGetBundleを使えば、簡単にインストールできるんですが、不調なのかアップデートが必要なのかうまくいかない場合があり、こんなときはBundleのsvnリポジトリから自分でインストールしちゃうと早いです。

Bundlesから選んでインストールする方法

以下のリンクから欲しいバンドルリンクをクリックします。 http://svn.textmate.org/trunk/Bundles/ そのときのURLをコピーして、以下のように直接TextMateのBundlesディレクトリにチェックアウトする。僕は自分のUserの下にTextMateのBundlesを入れているのでこんな感じ。システム全体で共通に使っている人は/Libraryから始めるみたい。 Bundlesは死ぬほど便利なので、入れまくって使いまくりましょう！！

Apple iPadが欲しくなる映像

Thu, 04 Feb 2010 12:51:51 +0900

始め、いろんな方のエントリーを読んで僕は買わないかな〜と思っていましたが、どうにもこうにも徐々に買いたい欲が湧いてきてしまった。そもそも家でもMac、職場でもMacを使って作業をしていて、ケイタイはiPhoneだしともうMac漬けなので、iPadも欲しくなってしまう。まずは以下のApple iPadのビデオからどうぞ。毎回思いますが、この作り手たちの声は卑怯！ｗ Apple iPad こちらは実際にiPadに触った人たちのビデオ。ますます欲しくなります。。 Apple iPad: iLounge.com's Complete Interface Walkthrough (720p HD) Apple iPad: Hands On iPad first impressions いやはや後すこし待ちますかっ！アップル - iPad - ウェブ、メール、写真を体験する最高の方法。

JavaScript変態複雑化文法最速マスター

Wed, 03 Feb 2010 16:20:40 +0900

Java変態文法最速マスター - プログラマーの脳みそをリスペクト。 JavaScript変態文法最速マスター - 葉っぱ日記をリスペクト。特に技法的なことではないんですが、functionをいろんなところで絡めてわかりにくくするポイントをいくつか紹介。

if文にfunctionを絡めてみる

単純なifなはずなのに、条件式に即時実行のfunctionを絡めることによってよりわかりにくくできます。さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。

for文にfunctionを絡めてみる

そもそもfor文の回りにfunctionを絡めてわかりにくくし、for文の条件式にもfunctionを絡めます。さらにクロージャをreturnして()で実行し、より複雑にする技法もとりいれてます。「ちなみにここでやっていることは引数の[1, 2, 3]という配列を受け取って、新しい配列にコピーしてreturnしているだけです。」

出力結果

[1, 2, 3]

Objectに上記やり方を絡めてみる

aというプロパティはただaを返せば終わりなはずなのに、わざわざfunctionでネストしてわかりにくくしています。 bというプロパティは上記if文複雑化とfor文複雑化を応用して、解読が困難な状態を実現しています。

出力結果

[1, 2, 3]

複雑化で気を付ける点

iをインクリメントする部分の複雑化でという部分がありますが、ここでこのように引数で渡してはいけません。外側のスコープにいるiではなく、このfunctionの関数スコープ内のiをインクリメントすることになるので無限ループになります。これ以外にもcurry化をうまく使いまくって、複雑にすることができますが、だいたい上記のことが応用できれば特に問題はありません。 ※注意 function絡めは節度と必要度合いを見て実装しましょうね！

エラトステネスの篩 - JavaScript版

Fri, 29 Jan 2010 11:25:38 +0900

エラトステネスの篩 - Wikipedia こんな感じなのかな。。

サンプルコード

出力結果

[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]

勉強になりました！

JavaScriptライブラリを使っていてIEで余計なリクエストが発生してしまうケース

Wed, 27 Jan 2010 12:57:01 +0900

ここ最近フロントエンドのパフォーマンスチェックでHttpWatchを使っているんですが、これはかなり調子がいい！特にインストールするとIEとFirefoxに追加され、Firebugのように画面の下のほうに表示されるので違和感なく使えます。んで、このソフトを使ってサイトのパフォーマンスチェックをしていたら、IEの場合だけ「ERROR_INTERNET_INVALID_URL」というRequestの結果が返ってきて、これってなんだろうと調べてみたら、jQuery・prototype.js・YUIを使っている場合に IEでDomContentLoaded（DCL）判定するときに発生しているようです。これでだいたい3〜6ミリ秒のオーバヘッドがあるよう。ほんのちょびっとですがねｗ

jQueryの場合（ver1.2.1）

bindReady関数の中にIEだったらという分岐があり、その中でsrc=//:なscriptタグをdocument.writeしているのが原因。このscriptがdocument.writeされたタイミングでsrc属性のURLをGETする際に、よくわからんURLじゃ〜と言っているんでしょうね。 jQueryがこの判定方法を使っているのはおそらく1.2.1以前だと思うので、1.2.6や1.3.X、または1.4を使っている場合は問題ありません。ちなみに1.4のDCLの判定は以下のようになっています。 onreadystatechangeとonload、あとは今までにもあったdoScrollで判定しているようです。

prototype.jsの場合（1.6）

このprototype.jsを使っている場合が、今回のERROR_INTERNET_INVALID_URLなRequestを送信してしまうパターンになります。実際のコードは以下のとおり。 deferで遅延評価させて、readyStateがcompleteになったらfireしています。この方法個人的に面白くて好きなんですが、無駄なRequestが発生してしまうのが難点ですね。 ■関連記事 Prototypejsのdom:loadedを検証（IEの場合）

YUIの場合

ERROR_INTERNET_INVALID_URL & HttpWatch - HttpWatch BlogにはYUIでも起こると書かれていましたが、YUI2・YUI3の両方でscriptをdeferさせる方法はなかったので大丈夫でしょう。もっと古い時代に書かれていたと思われます。以下YUI3のDomContentLoaded判定。ほとんどjQueryと同じです。

まとめ

今回のERROR_INTERNET_INVALID_URLが発生してしまう可能性があるのは以下、

jQueryは1.2.1以前を使っている場合
prototype.js1.6以前を使っている場合
YUI2よりも前のものを使っている場合

の3点かな。他のライブラリも含めたらもっとあるでしょうが、とりあえず調べたのはこんだけ。 Firefoxとかだとこの現象は発生しないので、なかなか発見しずらいものではありますが、たまたま発見したのでログとして残しました。 HttpWatch以外に僕が使っているパフォーマンスチェックツールは、 YSlow :: Add-ons for Firefox page-speed - Project Hosting on Google Code あと、 Diagnose and Prevent AJAX Performance Issues - dynaTrace AJAX Edition これIEだけなんですが、CLASS指定の個数とかID指定の個数とかわかるので、どこで遅くなっているかがわかりやすいです。ではでは。 ■関連リンク・ERROR_INTERNET_INVALID_URL & HttpWatch - HttpWatch Blog

JavaScript遅延ロード - jLazyLoader

Thu, 07 Jan 2010 13:35:21 +0900

Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック - TechTalkManiacsを読んでて、こんな方法があるのか〜と関心した。 scriptタグの中をコメントアウトにしているので、初めのJavaScriptが解析されるときは無視されて、あとでevalさせるという面白い方法。

ソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8" id="lazy1">
	/*
	// Make sure you strip out (or replace) comment blocks in your JavaScript first.
	window.lazy = function() {
		alert("lazy!!");
	}
	*/
	</script>
	<script type="text/javascript" charset="utf-8" id="lazy2">
	/*
	lazy();
	*/
	</script>
	<script type="text/javascript" charset="utf-8">
	// jLazyLoader
	// 後からJavaScriptをロードするためのjQueryPlugin
	(function($) {
		$.jLazyLoader = function() {}
		$.jLazyLoader.load = function(selector) {
			load(selector);
		}

function load(selector) {
		    eval(stripOutCommentBlock($(selector).html()));
		}

// [via] http://d.hatena.ne.jp/kagigotonet/20091221/1261355472
		function stripOutCommentBlock(code) {
		    return code.replace(/^[\s\xA0]+\/\*|\*\/[\s\xA0]+$/g, "")
		}
	})(jQuery);

// DCL
	$(function() {
		$("#lazyLoader").click(function() {
			$.jLazyLoader.load("#lazy1");
			$.jLazyLoader.load("#lazy2");
		});
	});
	</script>
</head>
<body>

</body>
</html>

ダウンロード

gist: 270994 - GitHub コメントアウトにしちゃっているので可読性は低いですが、このテクニックはいつか使って速度の検証をしてみたいところ。 ■関連リンク・Google Code Blog: Gmail for Mobile HTML5 Series: Reducing Startup Latency

eclipseの起動画面を変えて楽しむ方法

Tue, 05 Jan 2010 15:11:52 +0900

eclipseたんスプラッシュ画像 - 虎塚を見て、普段使うeclipseの起動画面で遊びたいという欲求が生まれた。だいたい15秒から30秒くらいしか表示されないeclipseの起動画面ですが、何か自分オリジナルで面白い画像にすると幸せになるかもしれませんね。以下オリジナルな起動画面いろいろ。

eclipse3.2

eclipse3.4 - GANYMEDE

eclipse3.5 - GALILEO

そして、虎塚さんが作った画像が以下。

eclipseたん

eclipseの起動画面を変更する方法

「eclipse/plugins/org.eclipse.platform_X.X.XXX」というディレクトリの中に、splash.bmpファイルがあるので、これを自分の好きな、或いはアレンジした画像に置き換えてあげるだけ。これで次回の起動のときに表示されます。かなり簡単ですね。さぁて、画像作ろう。。。 ■関連リンク・世話焼き系IDE：eclipseたん - 虎塚・Eclipse起動時に表示される画像を変更する