jump to navigation

[ブックマーク] JavaScriptネタ 11月 3, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

随時更新

JavaScriptのオブジェクト、コンストラクタ、プロトタイプ、スコープ等
JSで超ド派手なアニメが作れる「UIZE Framework」入門
[JS]CSSスプライトにアニメーション効果を加えるスクリプト -AutoSprites
「吹き出し」をツールチップとして実装するjsいろいろ
1つのリンクで複数サイトにリンクできる便利JavaScriptライブラリ「Pluralink」
ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル
アナログ風にアニメーションする時計実装チュートリアル
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ
ここが大変だよJavaScriptフレームワーク入門
Google、Gmailを作っているJavaScriptライブラリを公開
オンラインで綺麗にJavaScriptのコードを整形できる「Online javascript beautifier」
JS制作に欠かせない3つのツール
CSSとJavaScriptを組み合わせたアニメーションライブラリ「emile」
クールなアニメーションで画像を切り替えるスライドショー実装JS「Floom」
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」
画像スライダー・郵便番号検索・バリデーション

■jQuery
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
jQuery UI Droppableに疑似的にdropする
IE6対応!jQueryで透過PNGのロールオーバーを作る
jQueryだけでXMLをパースするプラグイン『jParse』
現地案内の説明ページ等で重宝しそうなインタラクティブなマップ作成用jQueryプラグイン
jQuery逆引きリファレンス
順序付きリストの昇降を逆にするスクリプト
画像にキャプションやツールチップを自動で設定するスクリプト -Captions
jQueryで制御する文字エフェクト集「20+ Easy to Use jQuery Text Effects and Animations 」
jQueryでテキストにエフェクトをかけたりアニメーションさせたりするプラグイン集
Webデベロッパーのためのフォトギャラリー作成スクリプト
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」
jQueryカレンダーコンポーネント8つ
jQueryによるLightbox風モーダルウィンドウの作り方
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」
フレッシュで便利なjQueryプラグイン5

■その他
JavaScriptアプリケーションサーバ「Persevere 1.0」リリース
JavaScript でリアルタイム 3DCG を実現する WebGL の使い方
Node.js – Google V8 ベースの Javascript 用イベント駆動 I/O

広告

ブウラザのレンダリングエンジンについて 10月 7, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

とあるサイトで今まで表示動いていたものが動かなくなっていたことが判明。
やっていることは、
javascriptでwindow.onloadイベント発生時に、swf生成用のObjectを取得して、
setVariable()メソッドでFlashに変数と値を渡しているのですが、
どうもFireFox3.5のときだけ動かないのです。

setVariable()実行時にFlash側の変数が見つけられないことが原因らしく。

FireFoxのバージョンを3.0や2.0にダウングレードしてみたり、
Flashが絡んでいることからFlashPlayerを10から9にダウングレードしてみたり、
やってみたところ、正常に動くことが確認されました。

対応策として、jsのonload直後のObject取得及び、setVariable()メソッドの実行のタイミングを遅らせることで、正常動作が確認できました。

以上のことより、FireFox3.5+FlashPlayer10の組み合わせによる問題?
FireFox3.5は前バージョンより、HTMLレンダリングのスピードが若干ダウンしている?
と勝手に納得してしまいましたが、

ここで、疑問が。
onload直後のDOM操作について、ブラウザ毎に搭載されているレンダリングエンジンの仕組みについて、調べてみました。

HTMLレンダリングエンジン

HTMLレンダリングエンジンとは、HTMLをはじめとしたウェブページ記述用言語で書かれたデータを実際に画面に表示するための計算をするプログラムです。

[主要ブラウザのレンダリングエンジン]
Trident (Internet Explorer)
Gecko (Firefox, Camino, SeaMonkey他)
WebKit (Safari, Google Chrome,シイラ, OmniWeb他)
Presto (Opera)

あ、SafariもGoogle Chromeも同じレンダリングエンジンを使っているから、Google Chromeでページを閲覧しても、UA(ユーザーエージェント)に「Safari」が含まれるのかな?

ちなみに、よく聞くWebKit(ウェブキット)(個人的にだけど)は
アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称です。

先日、GoogleがIEでChromeのレンダリングエンジンを利用可能にするプラグイン「Google Chrome Frame」を公開しました。

Chrome開発者らによるThe Chromium Blogによると、最近のJavaScript実行環境のパフォーマンス向上やHTML5などの最新技術によってWebアプリケーションはデスクトップアプリケーションを置き換えるまでに進化しているが、いっぽうでIEは最新技術をサポートしていないため、開発者はIE向けの対応に追われている、と述べている。Google Chrome Frameを利用することで、IEでもこれらの最新技術を利用できるようになり、Web開発者がIEへの対応に苦しめられることもなくなる、ということらしいです。

ちょい書きかけなので、時間ある時に追記。

JavaScript Debug Toolkit [jsdt] 9月 23, 2009

Posted by hyhy in 技術情報.
Tags: , ,
comments closed

うーん秀逸。
流石はgooglecode

jsdt

Google Chrome JavaScriptデバッガ完全マニュアル

JavaScriptの実行順序 8月 9, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

HTMLは基本的に上から順次ロードされていくわけなんだけど、そのタイミングについてまとめ。

1)上から順次実行→(DOMロード完了)
2)jQueryのfunction実行
3)bodyタグ内 onload実行
4)window.onload

2)~4)はあればのお話。

JavaScriptのURIエンコード 7月 26, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

decodeURIComponent – URLデコード
encodeURIComponent – URLエンコード

escape()は、古いメソッドで、ブラウザにより実装が異なるため使わない方が安全。残りの、encodeURI()とencodeURIComponent()は、ECMAScriptの仕様に従ったメソッド

この2つのメソッドは、ページのcharset(Shift_JIS,EUC,UTF-8,,,)が何であっても、UTF-8としてエンコードする。

JavaScript文字列のエスケープ 7月 24, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

これが一番使える

参考サイト

HTMLエンコードサイト

UNICODEエンコーディング

HTMLユニコード(10進数⇔16進数)

■エスケープシーケンスについて
¥a ベル文字(アラート)
¥b 1文字分戻る
¥f ページ送り(クリア)
¥n 改行、復帰
¥r 同じ行の先頭に戻る
¥t 水平タブ
¥v 垂直タブ
¥¥ ¥を表示
¥? ?を表示
¥’ シングルクォーテーション(‘)を表示
¥” ダブルクォーテーション(“)を表示
¥n ヌル
¥N 8進定数(Nは8進数の定数)
¥xN 16進定数(Nは16進数の定数)

Class属性をJavaScriptで動的に切り替える 7月 22, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

setElementClassById

参考サイト

とりメモ

JSONP クロスドメイン対応 7月 16, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

AjaxもしくはFlashでWebAPIを呼び出す際に、クロスドメイン間の通信は基本許可されておらず、僕の場合はサーバにPHPでプロキシプラグラムを用意することで対応しています。
※Ajaxで利用するXMLHttpRequestメソッドはドメインの異なるURLにアクセスができません。
※Flashであれば、アクセスされる側のサーバにcrossdomain.xmlというポリシーファイルを設置し、アクセス許可を設定すれば可能です。

もうひとつの手法として、JavaScriptから外部サイトのWebAPIを呼び出すことができるJSONPという手法についてまとめます。
※実際使ったことがないので、自分の為のまとめです。。。

JSONPとは、JavaScriptの外部ファイル読み込み(scriptタグのsrc属性指定によるもの)を利用して、ドメインの異なる外部サイトのデータを読み込む手法のことを言います。

当然ですが、JSONPを利用するためには、呼び出される側のWebAPIがJSONP形式に対応している必要があります。

参考サイト

JavaScriptによる環境判別について 7月 8, 2009

Posted by hyhy in 技術情報.
Tags:
comments closed

クロスブラウザ対応サイトを作るためには避けては通れないところ。
OSを判別し
ブラウザを判別し
FlashPlayerのバージョンを判別し
各種プラグインがインストールされているか判別し
と、判別しなくてはいけない情報はいろいろあります。

FlashPlayerであれば、googlecodeにて公開されているswfobjectを使うか、FlashCS4からパブリッシュ時に出力される判別コードが無難。

ブラウザを判別するための楽チンなjsライブラリを発見した。

参考サイト

jQueryと他のライブラリを同時に使用する方法 7月 7, 2009

Posted by hyhy in 技術情報.
Tags: ,
comments closed

他のライブラリと同時に使用するには、jQuery による $ 関数の上書きを元に戻す jQuery.noConflict() メソッドを実行します。実行後、jQuery を使用する場合は、$ 関数 の代わりに jQuery を使用するか、別のショートカットを割り当てます。

また、無名関数の引数に jQuery を渡し、仮引数に $ を使用すれば「(function($) { … })(jQuery);」、そのコードブロック内で jQuery の $ 関数を使用することが可能です。(そのコードブロック内では、他のライブラリの $ 関数は使用できなくなります。)

例1)prototype.js と同時に使用する場合(javascriptコード)
——————————————————————
// jQueryの $ 参照を無効にします。
jQuery.noConflict();
// jQuery を $j に割り当てる場合
var $j = jQuery;

// jQuery を使用する場合は $ の代わりに jQuery を使用します。
jQuery(function() {
jQuery(“div > p”).slideUp(“slow”);
//$j(“div > p”).slideUp(“slow”);
});

// $ は Prototype を使用します。
$(“myId”).addClassName(“myClass”);
——————————————————————
※prototype.jsとjQueryを同時に使う場合、prototype.jsを先に読み込むようにする必要があります。

参考サイト
参考サイト2