HouseTect, JavaScript Blog

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起動時に表示される画像を変更する

Googleのロゴがニュートンになってた。そしてリンゴが落ちてきた

Mon, 04 Jan 2010 18:01:18 +0900

普段Googleトップをあんまり活用していないのでわからなかったですが、わっきーさんに教えてもらいました。んで、コード見てたらロゴのimgタグのonloadにリンゴを落とすJavaScriptが書かれててちょっと面白かった。 imgのonload使うときって、あとから読み込んだ画像のwidth・heightを取得するときに使ったりするんですが、こうゆうトリッキーな使い方は面白いですね。ざっくりですが、コードを抜き出してみたのが以下。

サンプルコード

1個分からないのが、アニメーションのclearIntervalをgoogle.reinにpushしているんですが、これをいったいどこで実行しているんだろう。。。 Googleトップのコードを一通りおってみたんですが、実行してそうな箇所がない。 1つだけあやしい箇所があったんですが、9zPpGAOKyhU.jsの中の以下の部分。（だいぶ端折ってます） iにはpushという文字が入っているだけで、pushされた分をループしているわけではない。。。仕方ないので、以下のグリモンでテスト。タイミングがもしかしたら微妙かもしれないが、リンゴが落ちたあとにclearIntervalされるはずだからonloadでもOKでしょう！

google.rein実行された？グリモン

じっ、実行されない。。。

Firebugのprofileで調査

リンゴが落ちたあとにprofileを開始して、適当なタイミングで止めてみたのが以下の画像。「undefine()」の部分が、該当のアニメーション処理。中身を見ると、とアニメーションのクロージャが入っているので、間違いないでしょう！ profileEndのタイミングをずらせばもっと回数の部分が増えていきます。結局、よくわからなかったんですが、実行してないでしょ？w いや〜分からんな〜〜〜。

グーグルのロゴデザインやってる人に
乱歩のやつは最高だったと伝えておいてください

喜ぶと思います。彼はdoodle 作るのにたくさんの資料や本を読んだり、頭があつあつになるくらい考えてますから。
でも手塚治虫先生の時や藤子先生の時など漫画がたくさんおいてあるので遊んでるみたいです。
via: グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

[via] グーグルで働いてるけど何か質問ある？ - ブラブラブラウジング

Viva 2010!! Happy New Year JavaScripters

Fri, 01 Jan 2010 01:45:01 +0900

明けましておめでとうございます。昨年はいろんなJavaScripterの方の記事を参考にさせていただき、またJavaScriptが一段と発展した年でした。今年もオモロい記事や作品がいっぱい世に出てくるんでしょうね。さてぼちぼちJavaScriptを書き始めますかっ！！とりあえず今制作しているものも早く完成させてリリースしていきたいとおもいます。では本年もよろしくお願いいたします。 I Love JavaScript!!

VMware fusion内のWindowsからMacにSSHでログインする方法

Mon, 14 Dec 2009 02:20:32 +0900

Macの「システム環境設定→共有」にて以下の設定をするだけ、 IPアドレスが表示されるので、あとはWindows上からSSHクライアントでログインすればOK。 Windowsの有名どこなSSHクライアントはTeraTermかPoderosaかな。まぁWindowsからSSHでログインしても特に意味はないんですがねｗ

XCodeでWebkitをデバッグする方法

Mon, 30 Nov 2009 19:17:40 +0900

JavaScriptのDomメソッドがどうやって動いているのか、普段あんまり意識しないですが、気になりだすと調べたくなるものです。 WebkitはSafariやGoogle Chromeに採用されているレンダリングエンジンで、高速でありアニメーションも非常になめらかです。そんなWebkitをいつでも追えるように、デバッグ環境を作っておくと便利かも？と手順をメモしておきます。「JavaScripterの参考になればうれしいです。」

XCodeのインストール

XCodeのインストールは、インストールディスクの中にあるOptional Installsフォルダに入っていますので、そちらからインストール可能です。もしインストールディスクがない場合は、Apple Developer Connection - Mac Dev Centerよりダウンロードが可能です。ただし、AppleDeveloperConnectionへのログインが必要になります。 [via] The WebKit Open Source Project - Installing Developer Tools

Webkitのソースコードをダウンロードする

ターミナルを起動して、まずはダウンロード先のフォルダを作成します。

cd ~ mkdir webkit cd webkit

次に以下を入力するとSVNからダウンロードが開始されます。

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

僕は30分以上かかったので、ランチに行くときに実行しておくとよいかもしれません。また1度目はターミナルが途中で落ちてしまったので、あまり他の作業は行わずソースのダウンロードに専念させてあげたほうがよいかもしれません。ソースコードのダウンロードが終わりましたら、以下を実行してください。どうやらこれをしないとビルドがうまくいかないようです。

WebKit/WebKitTools/Scripts/update-webkit

[via] The WebKit Open Source Project - Getting the Code

Webkitをビルドする

さっそくビルドを開始します。以下を実行すると、ターミナルが膨大に流れ始めます。

WebKit/WebKitTools/Scripts/set-webkit-configuration --debug WebKit/WebKitTools/Scripts/build-webkit --debug

ビルドもだいたい30分くらいかかるので、夕飯を食べにいきましょう！成功すると以下のようにコンソールに表示されます。

Touch /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework cd /Users/hoge/_/code/webkit/WebKit/WebKit /usr/bin/touch -c /Users/hoge/_/code/webkit/WebKit/WebKitBuild/Debug/WebKit.framework ** BUILD SUCCEEDED ** =========================================================== WebKit is now built (32m:39s). To run Safari with this newly-built code, use the "WebKit/WebKitTools/Scripts/run-safari" script. ===========================================================

[via] The WebKit Open Source Project - Building WebKit

Webkitを起動する

WebKit/WebKitTools/Scripts/run-safari --debug

これで今回ビルドした内容でSafariが起動すると思います。これでテストは完了です。

XCodeを使ってWebkitをデバッグしてみる

ではでは、いよいよWebkitをデバッグしてみます。今回はdocument.getElementByIdをデバッグしてみようと思いますので、WebCoreあたりを除いてみます。まずはダウンロードしたWebkitのWebCoreディレクトリをFinderで表示します。僕の場合は以下のようなパスにダウンロードしました。

/Users/hoge/_/code/webkit/WebKit/WebCore

ここにXCodeのプロジェクトファイル「WebCore.xcodeproj」があると思いますので、実行してみましょう。起動するとWebCoreプロジェクトが左のペインに表示されます。ここのWebCoreの部分で右クリックして、「情報を見る」を選択します。するとWebCoreの情報が表示されるので、のように、「カスタムの保存場所」を指定します。これは実際にビルドされた内容が存在するパスを指定していることになります。次にアタッチ先となる実行可能ファイルを作成します。「グループとファイル」ペインの真ん中あたりに「実行可能ファイル」という項目があるので、ここを右クリックし「追加」→「新規カスタム実行可能ファイル」を選択します。以下のようにSafari.appまでのパスを設定します。これによりデバッグ時にSafariを使う設定が完了しました。

Webkitにアタッチさせる

いよいよデバッグです。 XCodeのメニューにある「実行」から「進行（デバッグ）」を選択し、デバッグモードで起動します。この作業は少し時間がかかるので、Safariが起動するまで気長に待ちましょう！ここでどんな作業が行われているかをコンソールから確認することができます。以下のボタンをクリックしてコンソールを立ち上げてみましょう。このように何かしらの作業が進行していると思います。 Safariが起動したら、ブレークポイントを貼ってみましょう。（ここが今回の穴場です！）

document.getElementByIdにブレークポイントを貼る

左側のペインのWebCoreのdomの下にDocument.cppというファイルがあるので、これをクリック。すると右側のペインにソースコードが表示されるので、「Cmd + F」でgetElementByIdを検索してみます。（シンボルを選択するプルダウンからもメソッドを表示することができますが、今回は検索機能を使ってみます。）すると以下のようなコードにたどり着くと思います。そうです。これがdocument.getElementByIdの実体です。普段使いに使いまくってるメソッドを見れるのはうれしいですね〜。では簡単なHTMLファイルを作ってデバッグしてみましょう！デバッグを貼るポイントはとりあえず、以下のifのところにしてみましょう。すると以下のようにブルーのしおりのようなものが表示されるので、これがブレークポイントになります。これで先ほどのHTMLファイルをSafariで開いてみますが、まだアラートは表示されません。 document.getElementByIdにブレークポイントを貼っているので、アラートが表示される前にデバッガがWebkitの実行を待ち状態にしています。

デバッガを使ってみる

ここで便利なのがデバッガです。デバッガは以下のようにボタンになっているのでクリックすれば起動されます HTMLファイルを開くとブレークポイントのところでストップします。あとはステップオーバーしたり、ステップインしたりして遊んでみてください。変数の監視でelementIdを見ることは出来るのですが、UChar *を16進で表示しているので本当にgetElementByIdで渡した文字列が入っているのかが確認できません。バイナリから判断することはできるのですが、デバッガウィンドウに直接文字列が表示してほしいところです。値を他の形式で表示してもうまくいかないので、ここは後で調査します。

Windowsでのデバッグについて

今回はMacのXCodeを使ってWebkitをデバッグしてみましたが、もちろんWindowsのほうでもデバッグは可能です。手順は以下のリンクに詳細が載っていますが、Mac版とくらべてややこしそうです。 VisualStudioをインストールして、さらにパッチなども当てなくてはいけないので、サクッと試したい場合はMac版のほうが簡単そうです。 WebKitビルドガイド（ドザー用） - 最速チュパカブラ研究会

まとめ

document.getElementByIdを追ってみましたが、何度か実行しているとあることに気がついてきます。 elementIdより該当のidを持つエレメントを探しにいくんですが、m_elementsById.get()を実行してすでにモジュール変数にエレメントがある場合は検索処理をスキップします。つまりサイトを開いて、Cmd + Rを押すとすでにm_elementsByIdにエレメントが入っているので、高速に動くみたいですね。こうゆう情報は実際に追ってみないとなかなか分からないものです。ソースコードも膨大ですが、XCodeでのビルドも結構時間がかかりますが、今後面白い内容が発見できたらブログにアップしていこうと思います。 ■参考リンク・[Tips] Xcodeでプログラム実行と同時にコンソールウィンドウを表示させる方法 - Ni chicha, ni limona -平均から抜けられない僕- ・Mac OSX Build and Run! Xcodeの入手方法

TumblrからランダムにURLを取得してTwitterにPostするbotを作ってみた

Mon, 30 Nov 2009 09:06:18 +0900

自分のTumblrからランダムに1時間毎にTwitterにPostするbotを作ったので、そのやりかたのメモメモ。

Tumblrから取得してTwitterにPostする手順

Tumblrから取得するのは普通にAPIを見ながらやってみた。 API | Tumblr ここで困ったのが、http://hoge.tumblr.com/randomという感じでURLの最後にrandomというのを付けるとランダム記事に飛べるという機能があるんですが、これ相当のAPIがなかったこと。なので1度、TumblrAPIからtotal数を取得して、その値からランダム値を生成してランダムな記事のURLを再度TumblrAPIから取得しています。 Tumblrから1つの記事を取得するには以下のようなURLを指定すればよい。 typeでphotoを指定して写真を取りにいってます。

http://hoge.tumblr.com/api/read?start=0&num=1&type=photo

最近さくらインターネットを借りたので、せっかくなのでRubyで書いてみた。ちなみにTwitterにPostするときは、定番そうなtwitter (0.7.0)を使っています。

RandomTumble - ソースコード

require "rubygems"
require "net/http"
require "rexml/document"
require 'twitter'

class RandomTumble
  attr_accessor :id, :tumblelog, :posts, :url

def initialize(id)
    @@uri = id + '.tumblr.com'
    @id = id
  end

def random_post_twitter(id, pass)
    random()
    post_twitter(id, pass)
  end

def random
    Net::HTTP.start(@@uri, 80) {|http|
      request_tumblr(http, 0, 1, "photo")

rand_page = rand(@posts.attributes["total"].to_i - 1)

request_tumblr(http, rand_page, 1, "photo")
      @posts.each {|post|
        @url = post.attributes["url"]
      }
    }
  end

def request_tumblr(http, start, num, type)
    req = getReq()
    req.set_form_data(getData(start, num, type))
    res = http.request(req)
    doc = nil
    if res.kind_of?(Net::HTTPSuccess)
      doc = REXML::Document.new(res.body)
    else
      raise ResponseError.new(res)
    end

if doc
      @tumblelog = REXML::XPath.first(doc, "//tumblelog")
      @posts = REXML::XPath.first(doc, "//posts")
    end
  end

def post_twitter(id, pass)
    httpauth = Twitter::HTTPAuth.new(id, pass)
    twit = Twitter::Base.new(httpauth)
    twit.update(makeMessage())
  end

def getReq
    return Net::HTTP::Post.new("/api/read")
  end

def getData(start, num, type)
    return {
      "start" => start,
      "num" => num,
      "type" => type
    }
  end

def makeMessage
    return @url
  end
end

■ダウンロード gist: 245238 - GitHub

使い方

RandomTumbleをnewするときにTumblrのidを渡して、random_post_twitterにTwitterのidとpasswordを渡します。これでTumblrからランダムに1件抽出して、TwitterにPostされます。ねっ！、簡単でしょ？

cronを設定する

さくらのコントロールパネルで、以下を設定する。・実行コマンド試行錯誤の結果このようになりました。

cd /home/User/code/ruby/; /usr/User/bin/ruby /home/User/code/ruby/twitter_bot.rb

[via] Orvalで行こう！: さくらインターネット cron設定でRubyを動かす・環境変数の設定 RUBYLIB - /home/User/lib GEM_HOME - /home/User/lib/ruby/gem これしとかないとrubygemsがありませんとエラーになってしまうので、忘れないように。 [via] さくらサーバのCronでRubyを動かす時のメモ - まめ畑・日時の設定月 - * 日 - * 時 - */1 分 - 0 曜日すべてにチェック初めのうちはテストとして5分ごとにして、動作確認しました。

作ったもの

tbacker (tback_bot) on Twitter 現時点で6500枚からランダムに選んでいますw 好きな人は好きになるはずっ！ ■参考リンク・Net::HTTP - Rubyリファレンスマニュアル・twitter 0.7.0

jQuery Plugin - 僕のmakeClass

Thu, 26 Nov 2009 17:38:03 +0900

結構前にJohn Resig氏がJohn Resig - Simple "Class" Instantiationでnewしてもしなくてもよいclassを作るmakeClassというメソッドをブログに載せていました。ここ最近はprototype.jsを使わずにJavaScriptをコーディングする機会が増えてきたので、Class.create()の変わりになるこのmakeClassを重宝しています。んで、これを自分が使いやすいように、改良して使っているのでそれを紹介してみます。

makeClass - before

なかなかトリッキーで面白いコードですね〜。このnewしてもしなくても良いという部分がオモロい！ newせずに関数が呼び出された場合は、elseのほうに入って自分自身をnewしてからもう一度同じ関数を呼んでいます。

makeClass - after

では自分用にカスタマイズしたほうです。対して変わってはいないんですが、まずprototype.js - 1.6のClass.create()では、引数にprototypeに追加してほしいObjectを渡すことができましたので、それと同じようにmakeClassにもpropという引数を追加。それをreturnするfunctionのprototypeに詰めとく。次にmakeClassをjQueryのPluginにしてしまう。これでグローバル名前空間を汚さずに済みます。あとbeforeのほうの以下の部分ですが、この書き方だとクラスをnewする際に引数を渡さないとargsがundefinedになってしまい、そのcalleeを見に行くのでエラーになってしまいます。なので、ちょっと回りくどいですが、三項演算子でargsがあるかどうかで処理を分岐しています。

使ってみる

initメソッドはあればインスタンス生成時に実行され、なければ実行されません。結構すっきりした感じで書けたと思います。 jQuery Pluginの制作で、要素ごとに何か情報を持たせようとした場合は、prototypeを使うので、そういった場面でmakeClassが役立ちます。

IE6でセキュリティ情報ダイアログがでるパターン

Wed, 25 Nov 2009 13:19:06 +0900

IE6の対応はまだまだ必要な時代ではありますが、httpsでアクセスする際にセキュリティ情報のダイアログが表示されてしまうパターンを忘れないようにメモしときます。他にもありましたら、コメント欄で教えていただけたらと思います。（※画像はIETesterでのセキュリティ情報ダイアログ）

iframeにsrc属性がない場合

SSLで開いている画面にiframeタグがあり、そのsrc属性に何も指定されていない場合にIEがセキュリティ保護されているか判断できないために、発生するようです。これは例えば、lightbox風のJavaScriptを作っているときに、IEでselectboxが前面に来てしまう問題を回避するために、iframeをoverlayレイヤーとして使用するときに発生します。 jQueryライブラリのthickboxでこの問題が発生していました。 ■解決策のようにダミーなhtmlを表示するようにすれば回避できます。 [via] [PRB] FRAME/IFRAME を含むページを SSL により参照するとセキュリティ警告メッセージが発生する

httpsな画面でhttpなリクエスト

SSLで開いている画面にhttpでアクセスしている箇所が存在するとセキュリティダイアログが表示されてしまう。たとえば下記のように画像ファイルをhttp経由で取得場合とかだ。

iframeにsrc属性がないと、URLがabout:blankとなり、
about:とhttps:でのスキーマ違いにより、
セキュリティ警告が出るようだ。
via: SSLなページを開くときにセキュリティ情報というダイアログが出る

■解決策外部サーバーに直接取りにいかずに、手元のサーバーにアップしてとしてアクセスすればhttpsで取得しにいくのでダイアログは表示されなくなる。 ■問題点このようにこちら側でhttpからhttpsのリクエストに変更できる場合は問題がないが、外部サービスのscriptを読み込んでいる場合はちょっと難しい。プロキシを作成して、サーバーサイドでscriptを読み込み、str.replaceAll("http", "https")のように書き換える必要がある。外部サービスにhttps用のscirptが用意されているのが一番良いが、そうでない場合はダイアログが表示されてしまいますね。

jQuery.animateのcompleteでremoveするとダイアログが出る場合がある

たとえば以下のサンプルのように、divタグにcssでbackground画像を指定して、クリック時にanimateしcompleteで要素を削除するなどの場合で SSL環境だとダイアログが出てしまう場合がある。というか今の時点だと100%出る。（IE7では出ない） background、backgroundImageのどちらでも再現するので、画像を指定した場合にcomplete直後だと何かブラウザ側の処理が残っていて、その前にremoveしちゃうから出るのかな？ ■解決策とりあえずsetTimeoutで処理を後回しにすればダイアログは表示されなくなる。かなり特殊なパターンなので、トレースが難しいがlightBox風のものを作っている人なら遭遇したことがあるかもしれない。 ■追記 IE6のセキュリティダイアログは非表示にすることもできるよう。 Internet Explorer のクロスドメインセキュリティのダイアログボックスが表示されないようにする - Greg Collins ここを参考にIE6側に設定をすればいいみたいですね。

JavaScript - 右クリックを判定する（Operaもいけた）

Thu, 19 Nov 2009 17:36:17 +0900

以下ようにOperaとIEで判断が必要ですが、jQueryを使っているならOperaだけの判断でOK。ただし、Opera の右クリックイベント検出 - Higé au laitにも記載されていますが、Opera側の設定をしてやる必要があります。つまりデフォルトの状態だと右クリックをハンドルすることはできない。この画像のように、チェックを入れてあげると右クリック時のmousedownをハンドルできるようになる。また

まだ問題がある。コンテキストメニューを表示させないで処理を実行することができない。 preventDefault() でも駄目。
via: Opera の右クリックイベント検出 - Higé au lait

というふうに書かれていたんですが、Opera10ではpreventDefaultを実行しなくともコンテキストメニューが表示されなかった。バージョン10からそうなったのかな？