マイクロソフト、「Visual Studio」向けjQueryを提供へ:ニュース - CNET Japan
MSとNokiaが「jQuery」を公式プラットフォームに採用へ | エンタープライズ | マイコミジャーナル
Microsoft は、ASP.NET AJAX に jQuery を統合して標準ライブラリとして提供するとのこと。
インテリセンスにも対応して、数週間以内に提供予定だそうです。
しかも、Microsoft のテストやバグフィックスなどのを jQueryオープンソースプロジェクトに提供する模様。
これは意外な方向に動いてますね。
jQuery ユーザにとってはいいことずくめかも。
あと、jQuery は jQuery MITライセンスで提供されるようです。
ASP.NET AJAX もコントロール部分はオープンソースライセンスで提供されてますね。
このライセンス関係が日本企業がどのように反応するか興味深いところです。
| コメント (0) | トラックバック (0)
Firebug Lite via Ajaxian
現在のWeb開発では、Firefox のアドオンである Firebug を使用することが多くなっていると思います。
ですが、他のブラウザでは Firebug の ログ出力機能である console.log() がエラーになってしまうため、他のブラウザでも console.log() を使用できるようにする Firebug Lite という JavaScript ライブラリがあります。
この Firebug Lite のバージョンが 1.2 になり、なんとDOMインスペクタをサポートするようになりました。これはとても便利ですね。
以下のような簡単なHTMLを複数のブラウザで表示するとどのようになるか調べてみました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firebug Lite 1.2 Test</title>
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>
<script>
console.log("console.log() のテストです。");var obj = new Object();
obj.field1 = "field1";
obj.field2 = "field2";
obj.date = new Date();
console.log(obj);
</script>
</head>
<body>
<h1>Firebug Lite 1.2 Test
</h1>
<p>Firebug Lite 1.2 からは、DOMインスペクタがサポートされました。</p>
<p>これで、Firefox, IE, Opera, Safari でも console.log と DOMインスペクタが簡単に利用できるようになりました。</p>
</body>
</html>
■Firefox
Firefox では Firebug を使用すればよいのですが、Firefox でも Firebug Lite は問題なく動作しました。Firefox のバージョンは 3.0 になります。
DOMインスペクタ。
■Internet Explorer
Internet Explorer 7 も問題なさそうです。
DOMインスペクタ。
■Opera
Opera 9.5 でも問題なさそうです。
DOMインスペクタ。
■Safari
Windows版Safari 3 でも問題なさそうです。
DOMインスペクタ。
■JavaScriptコンソール
Firefox/Opera/Safari では、複数行書けるJavaScriptコンソールがついていました。IEでも１行のみの実行は可能です。
| コメント (0) | トラックバック (0)
modules.js via Ajaxian
modules.js は、外部の JavaScript ファイルを動的に読み込めるライブラリとのこと。
ライセンスはMITライセンスになっています。
modules.js も興味深いのですが、それよりも Ajaxian の記事で既存ライブラリと modules.js の比較があり、結構JavaScript動的読み込みライブラリがあったのに驚きました。
こんな感じです。
JavaScriptの規模が大きいサイトを構築する際は、JavaScript の動的読み込みは必須になると思われるので、こういうライブラリは覚えておきたいですね。
■関連エントリー
| コメント (0) | トラックバック (0)
jstree - Google Code via Ajaxian
jsTree は jQuery ベースのツリーコンポーネントです。
デモを触ってみましたが、なかなかいい感じです。
ツリーの縮小・展開表示はもちろん、ツリーのノードをドラッグ＆ドロップで移動できたり、ノードの名称を変更できたりします。
ツリーコンポーネントのいい選択肢になりそうですね。
なお、ライセンスはMITライセンスになっています。
| コメント (0) | トラックバック (0)
Taffy DB : A JavaScript database for your browser
久しぶりに心惹かれるライブラリが登場しました。
「Taffy DB」はJavaScriptデータベースライブラリで、JSON形式でデータ管理するとのこと。
しかも、下記にあるようにライブラリのサイズが10KB未満の上、動作が早く、更新やソートもできるようです。
# Under 10K!
# Simple, JavaScript Centric Syntax
# Fast
# Easy to include in any web application
# Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
# CRUD Interface (Create, Read, Update, Delete)
# Sorting
# Looping
# Advanced Queries
まだ試してはいないのですが、これは覚えておいて将来活用したいライブラリですね。
なお、ライセンスはBSD Licenseになっています。
■参考サイト
| コメント (0) | トラックバック (1)
HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」を公開した。 - こせきの技術日記 via オレンジニュースさん
MozillaのJavaScriptドキュメントとECMA Scriptの言語仕様が、CHMのHTMLヘルプ形式で公開されています。
含まれているドキュメントは以下の通りです。
HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」を公開した。 - こせきの技術日記
- Core JavaScript 1.5 リファレンス
- Core JavaScript 1.5 ガイド
- Gecko DOM リファレンス
- Core JavaScript 1.5 Reference (en)
- Core JavaScript 1.5 Guide (en)
- Gecko DOM Reference (en)
- ECMAScript Language Specification - 3rd edition
これはすばらしい！
普段は以下のサイトを便利に使わせていただいていますが、ネットワークの調子が悪いと参照できないこともあるのでとても助かります。
| コメント (0) | トラックバック (0)
CodeZine：.NET Framework 3.5にも完全対応、AJAX Control Toolkit最新版リリース（ASP.NET）
.NET Framework 3.5対応のAJAX Control Toolkitがリリースされたとのこと。
というか、今まで対応していなかったことに気がついていませんでした。
.NET Framework2.0/Visual Studio 2005用と、.NET Framework3.5/Visual Studio 2008用があるんですね。
ダウンロードは以下より可能です。
AJAX Control Toolkit - Release: 20229
http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121
| コメント (0) | トラックバック (0)
JavaScriptでSLを走らせる「SL.JS」を作りました ::: creazy photograph
SL.JSは、ブラウザの中をSLが右から左に走り抜ける、ユニークなJavaScriptライブラリです。
ブックマークレットからも実行可能です。
こういうセンスっていいですね。
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
Cross Domain XHR W3C proposal(Ajaxian)
JavaScriptで非同期通信をするには、XML HTTP Requestを使用しますが、セキュリティの関係上、表示されたページと同じドメイン以外のサーバとは通信できません。
それでは不便なので、最近はJSONPという手法でクロスドメイン通信を実現する方法が現れてきました。
ですが、W3CにJavaScriptでクロスドメイン通信を行うための仕様が提案されたようです。
記事を見る限り、セキュリティにも配慮されているようなので、ちょっと期待したいですね。
クロスドメインを実現する実装は、次の２つのどちらかになるようです。
■HTTPヘッダーで指定
Access-Control: allow <*.example.org> exclude <*.public.example.org>
■XMLプロセッサーへの指示
cross_domain.xmlは不要とのこと。<?access-control allow="allow.example.org" deny="deny.example.org"?>
| コメント (0) | トラックバック (0)
HTML崩壊 meltdown.js(KAZUMiX memo)
上記サイトで公開されている１行JavaScriptを、ブラウザのアドレスバーに入力すると、本当にWebサイトが崩壊してしまってびっくり。
これは一見の価値があるかと。
| コメント (0) | トラックバック (0)
Dojo 1.0 Released: The Granddaddy is Born(Ajaxian)
高機能なAjaxライブラリとして有名な「Dojo」の正式版が、ついにリリースされたようです。
Dojoは高機能だけれど正式版ではなかったために採用を見送っていたケースもあると思うので、Dojoがこれから普及するかも？
そういえば、Apple Store が Dojoを正式採用したなんてニュースもありましたね。
さて、Ajaxライブラリのシェアは変わるでしょうか。
Dojo
http://www.dojotoolkit.org/
| コメント (0) | トラックバック (0)
HTML5.JPのJavaScriptグラフライブラリがすばらしいです。
表示できる項目数は１０個に限定されているものの、JavaScriptでこれだけキレイなグラフを表示できて、日本語も問題ないというのは非常にいいです。使い方も簡単ですし。
ライセンスは Apache License, Version 2.0 になっています。
(2007.10.29追記)
このライブラリのグラフ描画は、Canvasを使用しています。IEにはCanvasがないので、ExplorerCanvasが同梱されています。
あと、はてブコメントにて、テキストを大きくするとレイアウトが崩れるとの情報をいただきました。id:vantguardeさん、情報ありがとうございます。
■棒グラフ（垂直）
棒グラフ（垂直）(HTML5.JP)
↓FireFox2.0で表示
↓IE7で表示 － IEだとグラデーションが消える模様
↓Opera9.23で表示
■折れ線グラフ
折線グラフ(HTML5.JP)
↓FireFox2.0で表示
↓IE7で表示
↓Opera9.23で表示
■円グラフ
円グラフ(HTML5.JP)
↓FireFox2.0で表示
↓IE7で表示
↓Opera9.23で表示
■レーダーチャート
レーダーチャート(HTML5.JP)
↓FireFox2.0で表示
↓IE7で表示
↓Opera9.23で表示
| コメント (0) | トラックバック (0)
Record mouse movement using Javascript and AJAX(puRe aka Marcel Oelke)
via GIGAZINE via オレンジニュース
マウスの軌跡を再現するJavaScriptのデモが、なかなかいい感じです。
実装としては、マウスの軌跡をJavaScriptで検知してサーバに送り、PHPのセッションに情報を保存しているようです。
また、JavaScriptのライブラリとしては、prototype.js と script.aculo.us を使用しているようですね。
元記事では、アイトラッキングの代わりに使えるとありましたが、確かにその可能性はあるかも。
| コメント (0) | トラックバック (0)
IEの気持ち(最速チュパカブラ研究会)
IEで window.document へのアクセスに時間がかかるのは、VB/VBScript/JSCriptからCOMのメソッドは直接呼び出せず、IDispatch::Invoke を経由するためオーバーヘッドが発生するようです。
C++でプログラムを書いたこともありますが、COMには手を付けたことがないので、こういうことを説明できる方は素直にスゴイと思います。
| コメント (0) | トラックバック (0)
一行で IE の JavaScript を高速化する方法(IT戦記)
amachangさんのところで、たった一行でIEのJavaScriptを高速化する方法が紹介されていましたが、これがすごいです。
/*@cc_on _d=document;eval('var document=_d')@*/
たったこれだけなのに、本当にdocumentへのアクセスが高速化されます。
私の環境では、IE5.01～IE7の全てで効果がありました。
こんな方法を発見するとは、amachangさんは本当にすごいですね。
| コメント (0) | トラックバック (0)
PhotoShop-like JavaScript Color Picker via Ajaxian
PhotoShop-like JavaScript Color Picker は、prototype.jsをベースにしたPhotoShopライクなJavaScriptカラーピッカーです。
サンプルを触ってみましたがいい感じです。
ライセンスも、MITライセンスのようですし使いやすいですね。
| コメント (0) | トラックバック (0)
Dojo on the iPhone conference slides(SitePen Blog) via Ajaxian
上記サイトにて、 iPhoneでDojoを扱うための資料が公開されています。
英語の資料なのですが、参考になることが書いてありました。
iPhoneって、Ajaxが使用できるんですね。知りませんでした。。。
しかも、サンプルアプリケーションにCometを使用したチャットまでありました。
結構、iPhoneのポテンシャルは高いかも？
| コメント (0) | トラックバック (0)
非同期処理をシーケンシャルに扱うために(snippets from shinichitomita’s journal)
Ajaxアプリケーションでは、ユーザの操作をロックしないように非同期でリクエストをサーバに投げることがあると思いますが、処理が複数ある場合は整合性を取るのに悩みます。
上記記事では、JavaScriptの非同期処理をシーケンシャルに扱う方法をライブラリ化して公開しています。
ライセンスは特に明記されてないですが、参考になるのではないでしょうか。
| コメント (0) | トラックバック (0)
How to build a cross-browser history management system via Ajaxian
Microsoftの中の人が、ASP.NETでブラウザの履歴管理について検証した内容が詳しく解説されています（英語ですが＞＜）。
各ブラウザごとにどのような不具合があるのか、そしてその対処方法までまとめられていました。
で、機能比較表もあり、とっても役立ちそうです。
まあ、元記事が長文で、ざっとしか目を通していないのですが、何かの時に使えそうです。
みかログさんのところの、「jQuery history プラグイン」はこういうのを使って作成しているんですね。
いやぁ、すごい。
■関連エントリー
| コメント (0) | トラックバック (0)
Asynchronous File Upload - YUI's Approach(Code Central) via Ajaxian
XMLHttpRequestはファイルアップロードをサポートしていないのですが、YUIのConnection Managerはiframeを使用して通信を行うので、これを活用すれば非同期ファイルアップロードができるとのこと。
実装方法はサイトで詳しく解説されていますが、こちらのデモで複数の画像をページ遷移することなしにファイルアップロードすることを確認できます。
うーん。これはすごい。
| コメント (0) | トラックバック (0)
「YUI Compressor 2.0」がリリース - JavaScriptとCSSの両方を圧縮(マイコミジャーナル)
先日お伝えした、安全かつ高圧縮率なJavaScript圧縮ツールである「YUI Compressor」のバージョン２がリリースされ、CSS圧縮にも対応したようです。
これは、ますますいいかも。
↓ダウンロードはこちらから
YUI Compressor Version 2.0 Now Available(Julien Lecomte’s Blog)
http://www.julienlecomte.net/blog/2007/08/27/yui-compressor-version-20-now-available/
■関連エントリー
| コメント (0) | トラックバック (0)
Fixing GC issues on IE 6: New IE download(Ajaxian)
IE7では、ガベージコレクション(GC)の問題は解消されているようですが、IE6でもGCの問題を解消するアップデートが提供されたとのこと。
Windows Updateでは提供されていないようなので、IE6ユーザにAjaxアプリケーションを使ってもらいたい場合に適用するとよさそうですね。
(2007.08.19追記)
2007/06/26時点で、下記のようなエントリーがあがっていますね。既にIE6は直ってる？また別の問題？
| コメント (0) | トラックバック (0)
Introducing the YUI Compressor(Julien Lecomte’s Blog) via Ajaxian
YUI Compressorは、今までとは違うJavaScript圧縮ツールとのこと。
私のヘタレな英語力によると、JSMinは安全だけれどもオプションがイマイチで、the Dojo compressorは、圧縮率は高いが安全ではないそうです。
そして、YUI Compressorは、JSMinと同じくらい安全で、the Dojo compressorよりも高い圧縮率を出せるようです。
Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression)
『Introducing the YUI Compressor(Julien Lecomte’s Blog)』より
動作には、Java1.4以降が必要とのこと。
早速、prototype.jsで試してみました。
コマンドラインより、以下のように実行します。
java -jar yuicompressor-1.0.jar prototype.js
そうすると、prototype.jsと同じディレクトリにprototype-min.jsというファイルが作成されました。
prototype.jsの圧縮前は54KBで、圧縮後は33KBになったので、約39%の圧縮になります。
動作確認まではできていませんが、これはなかなかいいかも。
| コメント (0) | トラックバック (0)
YSlowは、FireFoxの"FireBug"に対する拡張ツールで、Yahoo!の「Rules for High Performance Web Sites」にしたがってサイトを分析し、パフォーマンス向上策を教えてくれる超すぐれもののツールです。
分析結果は、下図のようにされますが、「1. Make fewer HTTP requests」と表示されている改善項目をクリックすれば、Yahoo!の解説ページに飛ぶこともできます。
うーん。これは、すばらしく便利！
■関連エントリー
| コメント (0) | トラックバック (0)
オープンソースのAjax Webデスクトップ「eyeOS 1.0」正式リリース(ITpro)
オープンソースWebOSの「eyeOS」が正式リリースしたとのこと。
ライセンスはGPLライセンスです。
eyeOS公式サイトでは、ユーザ登録をすると、eyeOSを体験することもできます。
オープンソースのWebOSも、ここまできたかという感じですね。
eyeOS公式サイト
http://eyeos.org/
EyeOS(SourceForge.net)
http://sourceforge.net/projects/eyeos/
| コメント (0) | トラックバック (0)
SilverlightやXAMLのプレビュー機能も追加した「Spket IDE 1.5.9」リリース（Eclipse, プラグイン）(CodeZine)
eclipseベースのJavaScript IDEである「Spket IDE 」が、SilverlightのJavaScriptコードアシスト機能と、XAMLのビューアを備えたようです。
機能の名称は、「XAML Editor」です。
画面のスナップショットは、こちらから参照できます。
うーん。これはすごい。
Spket IDE
http://www.spket.com/
■関連エントリー
| コメント (0) | トラックバック (0)
ものスゴく便利なグリッド表示用ブックマークレット登場(Web担当者Forum)
上記サイトで、ブラウザ上でグリッド表示ができる、ものスゴく便利なブックマークレットが公開されています。
実際に実行した状態は下図の通りなのですが、このグリッドはドラッグ＆ドロップで位置を変更できるだけではなく、グリッド色も変更できます。 画面デザインによっては、見にくい色もあるでしょうから、これはうれしい機能ですね。
また、コントロールパネル用のウィンドウが画面内に表示されていますが、この中の矢印ボタンを使うと、1px単位でグリッドの位置調整もできます。
これは、非常に便利！
| コメント (0) | トラックバック (0)
Flashのパーマリンク問題をSWFAddressで解決(Unknown Quality)
「SWFAddress」を使用すると、Flashでパーマリンクを実現することができるとのこと。
Flashは使う機会がないですが、こんな方法があるんですね。
忘れないようにしないと。
なお、ライセンスはMITライセンスです。
SWFAddress(Asual)
http://www.asual.com/swfaddress/
| コメント (0) | トラックバック (0)
Simple Tree-based JSON Editor(Ajaxian)
Ajaxianで、JSONの内容をツリー表示して簡単に編集できる「JSON Editor」というオンラインツールが紹介されています。
編集したいJSONを貼り付けて「build tree」ボタンを押すと、画面左にJSONがツリー表示されます。
編集したい項目をクリックすると、テキストエリアにその値が表示されるので、編集後「save」ボタンを押します。saveしないで他の項目に移ると、編集内容が失われるのでご注意を。
これは、なかなか便利！
javascript json editor
http://braincast.nl/samples/jsoneditor/
| コメント (0) | トラックバック (0)
XUL Explorer (Mark Finkle’s Weblog)
XUL Explorer は、XUL開発用の軽量IDEです。
画面左に表示されているコントロール一覧から、ペタペタとスニペットをコード一覧に貼り付けることができ、また、画面のプレビュー機能や、XULの文法チェック機能もあります。
私自身は、XULの開発をしたことはないですが、結構便利そうだなと思いました。
■コード編集画面
■プレビュー画面１
■プレビュー画面２
| コメント (0) | トラックバック (0)
先日、こちらのブログでJavaScritpでDBを操作可能な「JSDB」をご紹介しましたが（こちら）、dara-jさんのところで、ものすごい勢いでJSDBの検証記事を書かれています。
かなり参考になると思いますので、ご紹介です。
いやあ、すごいですね。
| コメント (2) | トラックバック (0)
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開(CodeZine)
ようやくという感じですが、Internet Explorer Developer Toolbarの正式版がリリースされました。
Internet Explorer Developer Toolbarは、IE上で表示されているサイトの詳細な情報を簡単に参照したり、一部加工したりすることができるWeb開発者向けのIEアドインです。
機能の一覧は、CodeZineの記事を参照していただくとして、便利だなと思う機能をご紹介します。
まず、IEの画面右上に表示される矢印のアイコンをクリックして起動します(画面はIE7)。
なんといっても、便利なのはDOMインスペクタ機能です。
要素をマウスでクリックするだけで、要素の詳細な情報を取得したり、要素の属性加工できます（下図参照）。
また、選択した要素のスタイルシート付きのソースも表示できます。
ソースの折りたたみ機能もいい感じ。
スタイルシートを加工することもできます。
地味ですが、Web開発時にうれしいのがブラウザのキャッシュクリア機能です。
私的に結構うれしかったのが、表示しているサイトのCookie情報を表示する機能ですね。Cookieのクリア機能もあります。
こんな感じで、とても便利なInternet Explorer Developer Toolbarですが、FireBugのようなソースの編集機能やJavaScriptのデバッグ機能は付いていません。
デバッグについては、Firebug Liteを使うとか、下記で説明されているMicrosoft Script Editorを使うのがいいかなと思います。
でもまあ、IEの開発も随分とやりやすくなりましたね。
↓ダウンロードはこちら
Internet Explorer Developer Toolbar
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en
| コメント (0) | トラックバック (0)
１つのファイルにJavaScriptとCSSをまとめて記述する方法(phpspot開発日誌)
phpspot開発日誌にて、JavaScriptとCSSを１つのファイルに記述する方法が紹介されています。
Webアプリのパフォーマンス向上のテクニックの一つに、HTTPのコネクションの数を減らすというものがありますが、そういった用途で活躍しそうですね。
↓情報元
Combine CSS with JS and make it into a single download!(My experiments with .Net )
http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx
| コメント (0) | トラックバック (0)
Private Members in JavaScript
[翻訳]JavaScriptにおけるプライベートメンバ(COLLECTION & COPY)
上記の記事に刺激を受けて、prototype.jsでプライベートメソッドを持つクラスを作る方法を考えてみました。
JavaScriptのクロージャを利用してますが、具体的には次のようになります。
1: //Animalクラス作成
2: var Animal = Class.create(); 3: 4: //Animalクラスフィールド設定
5: Animal.MALE = 0; 6: Animal.FEMALE = 1;7: Animal.SEXTYPE = ['Male','Female'];
8: 9: //Animalクラス設定
10: Animal.prototype = { 11: initialize : function(_sex) {12: this.define(_sex);
13: }, 14: 15: define : function(_sex) {16: //プライベートフィールド
17: var sex = _sex; 18: 19: //プライベートメソッド
20: var _getSex = function() {21: return sex;
22: } 23: 24: //Privileged(特権)メソッド
25: this.getSex = function (){
26: return Animal.SEXTYPE[_getSex()];
27: } 28: } 29: }
ポイントの１つ目は、Animal#defineメソッド内のローカル変数として、sexを定義していることです(17行目)。メソッド内のローカル変数ですので、当然外部からは呼び出せず、プライベートフィールドとして扱うことができます。
次のポイントは、Animal#defineメソッド内で、_getSexというメソッドを記述していることです(20行目)。_getSexメソッドは、プライベートメソッドとして動作します。また、_getSexメソッドでは、Animal#defineメソッド内のローカル変数にアクセスすることができます。不思議な感じですが、この辺がJavaScriptのクロージャという機能になります。
最後のポイントは、Animal#getSexメソッドです(25行目)。Animal#getSexメソッドは、Animal#defineメソッド内の関数ですが、thisオブジェクトに関数を追加しています。そのため、Animal#defineメソッド内のプライベートフィールド・プライベートメソッドにアクセス可能な上に、外部から呼び出し可能なパブリックメソッドになります。この特殊なメソッドを、元記事では「Privileged(特権)メソッド」と呼んでいます。
このAnimalクラスを実行すると、次のようになります。
1: var animal = new Animal(Animal.MALE);
2: //alert(animal.sex); // undefined
3: //alert(animal._getSex()); // Error
4: alert(animal.getSex()); // Maleプライベートフィールドにも、プライベートメソッドにもアクセスできず、Privileged(特権)メソッドは問題なく実行できています。
これだけではおもしろくないので、継承についても考えてみました。
1: //Personクラス生成
2: var Person = Class.create();
3: 4: //Animalクラスフィールドコピー
5: copyMembers(Person, Animal); 6: 7: //Personクラス設定
8: Person.prototype = {9: initialize : function(_name, _sex) {
10: this.define(_name, _sex);
11: }, 12: 13: define : function(_name, _sex) {
14: 15: //Animalクラスのdefineメソッドを実行
16: var func = eval(Animal.prototype.define);
17: func.apply(this, [_sex]);
18: 19: //プライベートフィールド
20: var name = _name;
21: 22: //プライベートメソッド
23: var _getName = function(){
24: return name;
25: } 26: 27: //Privileged(特権)メソッド
28: this.getName = function() {
29: return _getName();
30: } 31: } 32: } 33: 34: //クラスメンバをコピー
35: function copyMembers(_target, _from) {
36: var exclude_methods
= ['prototype','bind','bindAsEventListener'];
37: 38: for (var member in _from) {
39: var key = member.toString();
40: if (exclude_methods.indexOf(key) == -1) {
41: _target[key] = _from[key]; 42: } 43: } 44: }
ポイントの１つ目は、5行目でcopyMembers関数を実行しているところです。
通常のオブジェクト指向では、インスタンスフィールドやインスタンスメソッドだけではなく、クラスフィールドやクラスメソッドも継承します。しかし、prototype.jsでは、prototypeしかコピーしないため、インスタンスフィールドとインスタンスメソッドしか継承できません。
これにはどうも違和感があったので、このcopyMembers関数を使用して、AnimalクラスのクラスフィールドとクラスメソッドをPersonクラスに継承できるようにしています。
次のポイントは、prototype.jsを使っているのに、Object.extendを使用した継承を行っていない点でしょうか。
最後のポイントは、16～17行目です。この２行でAnimal#defineメソッドを実行して、Animalクラスで実装している内容を、Personクラスでも実装します。これは、Animalクラスの実装を、Animal#defineメソッドに集約させているために可能になります。このため、Object.extendを使用しなくても継承を行なうことができています。
Personクラスを実行すると、以下のようになります。
1: var taro = new Person('Taro',Person.MALE);
2: //alert(taro.name); // undefined
3: //alert(taro._getName()); // Error
4: alert(taro.getName()); // Taro
5: alert(taro.getSex()); // Male
6: 7: var ellen = new Person('Ellen',Person.FEMALE);
8: //alert(ellen.name); // undefined
9: //alert(ellen._getName()); // Error
10: alert(ellen.getName()); // Ellen
11: alert(ellen.getSex()); // Female
1行目では、Person.MALEを使用できているので、Animalクラスからのクラスフィールドの継承がうまくいっていることが分かります。
また、5行目では、Animalクラスのメソッド実行がうまくいっているので、スーパークラスのメソッド実行も問題なくできています。
JavaScriptでカプセル化はできないと思っていましたが、やりようによっては結構できるものですね。
なお、この記事のコードは、IE7, FireFox2.0, Opera9.01で動作確認を行っています。
| コメント (0) | トラックバック (1)
それJS「JSDB」(MOONGIFT)
JSDBは、JavaScriptから直接DBに接続できるライブラリですが、扱えるDBも豊富です。
JSDB can treat any DBF/xBase, ASCII, Oracle, Sybase, DB/2, Postgres, MySql, Access, or Microsoft SQL Server table equivalently
しかも、DBだけでなく、メールなども扱える模様。
you can communicate with Lotus Notes, Exchange (MAPI), and SMTP/POP3 mail systems interchangably with a single set of function calls.
リファレンスを見てみると、他にも多くの機能があるようです。
こんなライブラリ（とうかフレームワーク？）を、ライセンス条項に従っていれば無償で利用できるのですから、ありがたいですね。
動作環境は、MOONGIFTによると次のようになっています。
JavaScriptエンジンは2007年04月時点でJavaScript 1.6相当のようだ。これはFirefox 1.5に相当する。動作はWindowsのみならずLinuxもサポートされており、ただただ圧倒されてしまう。
まさに、「それJSで」の時代になってきましたね。
JSDB: JavaScript for databases
http://www.jsdb.org/index.html
| コメント (0) | トラックバック (0)
JSMPは、JavaScript製のメディアプレーヤーです。
特にライブラリとして提供されているわけではないですが、これはすごい！
satoru_usuiさんの日記によると、jpeg画像を高速に切り替えることで動画にしているようです。
おもしろいアプローチですね。
| コメント (0) | トラックバック (0)
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
上記サイトで、JavaScriptのパフォーマンス向上のためのTipsが紹介されています。
内容は、Opera.Devの"Efficient JavaScript"の日本語訳とのこと。
JavaScriptのパフォーマンス向上のヒントにどうぞ。
・参考サイト
| コメント (0) | トラックバック (0)
Compress Your JavaScript (Code and Coffee)
Compress Your JavaScriptは、オンラインでJavaScriptの圧縮ができるツールです。
圧縮レベルは、Low, Medium, Highの３つのレベルから選択でき、圧縮率や圧縮前後のサイズも表示されます。
最近、オンラインでJavaScriptを圧縮できるツールが増えていますが、オンライン上のツールはいつなくなるか分からないので、選択肢が増えるのはありがたいですね。
| コメント (0) | トラックバック (0)
Ajax MGraphは、prototype.jsベースのJavaScriptグラフ表示ライブラリです。
表示できるグラフは縦棒グラフだけですが、これがなかなかキレイ。
こんな感じです。
実際に自分でも試してみましたが、ソースをちょっと加工しないとうまく動かせませんでした。
折角なので、使い方も書いておきます。
ソースはPHPのプログラムの結果をデータとして使いますが、ここではJSONを使うように修正します。
まずは、graphM.prototype.jsの45行目をJSONのファイルを読み込むように変更します。
new Ajax.Request('number_generator.json', {
そして、graphM.prototype.jsの60～64行目の内容を日本語用に書き換えます。
$('ag-dump').innerHTML+=g.returnHTML;
$('ag-head').update('グラフのバーの上にマウスを乗せると値が表示されます。');
$('ag-max').update('最大値: '+g.max);
$('ag-min').update('最小値: '+g.min);
$('ag-avg').update('平均値: '+g.avg);
読み込みデータは、number_generator.jsonというファイル名で、次のようにJSON形式で作成します。
{
"num":[591,372,900,144,376,18,671,163,323,480,136,322],
"xTitle":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"msg":"Success"
}
それからHTMLを次のように作成します。
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="agGraph.css" />
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='graphM.prototype.js'></script>
<script type='text/javascript'>
function init() {
agGraphDivID='resultDiv';
agGraphShowNote='yes'; // yes,or no
agGraphNoteTitle='2006年度売上実績';
agGraphNoteText='6月の売上が極端に落ち込んでいます。';
}
</script>
</head>
<body onload="init()">
<input type="button" value="Generate Graph" id="startButton" onclick="draw();" />
<div id="resultDiv"/>
</body>
</html>
実行結果です。
グラフにマウスを乗せると、グラフの色が変わり値が表示されます。
ちょっと使うのに工夫がいりますが、画面もキレイだしなかなか使えそうなライブラリですね。
なお、ライセンスはMITライセンスとのことです。
| コメント (0) | トラックバック (0)
lightWindowは、prototype.jsとscript.aculo.usをベースにしたLightBox風のWindow表示ライブラリです。
lightWindowのすごいところは、LightBoxのようにイメージギャラリーを表示できるだけでなく、Movie,Flash,PDFなどのコンテンツも表示できるところです。
外部にあるサイトやイメージも表示できるようです。
ライセンスも、MITライセンスですし、これはなかなか便利なライブラリですね。
・PDFを表示（IE7)
・イメージギャラリー
| コメント (0) | トラックバック (0)
Key and Character Codes vs. Event Types
先日、ブラウザのキーコードを簡単に調べられるツールということで、Javascript keyCode checker tool をご紹介しましたが、これはkeydownイベント時のキーコードしか取得できませんでした。
しかし、このKey and Character Codes vs. Event Typesは、keydown,keypress,keyupイベント時のキーコードを調べられるだけでなく、Shift,Ctrl,Altキーが押されたかどうかも分かります。
このツールをそのまま使っても便利ですし、内容を解析して自分のアプリケーションに組み込むのもいいですね。
| コメント (0) | トラックバック (0)
秀丸でJavaScriptのアウトライン解析する定義ファイル(てっく煮ブログ)
上記ブログで、秀丸でJavaScriptのアウトライン解析する定義ファイルが公開されています。
prototype.jsをで使用するために作成されたようですが、これはとても便利！
実際の画面のスナップショットを見ると分かりやすいと思います。
・prototype.jsを表示
・jQueryを表示
・JKL.ParseXMLを表示
プログラムの書き方によって、表示が変わるようですね。
なお、上記画面では、秀丸にこちらのJavaScript用の定義ファイルを設定してあります。
普段のテキストエディタはEmEditorを使用していますが、JavaScript用に秀丸を使うのもありかな、と思いました。
| コメント (0) | トラックバック (0)
ベクター、Web API情報サイト「Mashupedia」オープン(@IT)
ベクターが、Web API情報サイトの「Mashupedia」をオープンしたとのこと。
国内外にある約５００種類のWeb APIを全て紹介するという意気込みです。
RSS配信もされていますので、RSSリーダーに登録するのもいいですね。
というか、しました。(^_^;
Mashupedia
http://www.mashupedia.jp/
| コメント (0) | トラックバック (0)
Cheat Sheets for the YUI Utilities (Yahoo! User Interface Blog)
YUI Library のチートシートが、上記ブログにて公開されています。
PDF形式で、その数２０枚。
これは便利ですね。
| コメント (0) | トラックバック (0)
[JavaScript][css]ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。(Enjoy*Study)
大分前(2006/08)のエントリーですが、ブラウザのスクロールバーで隠れている領域を含めたサイズを取得する方法が紹介されています。
こんな感じ。
IE6, FireFox1.5, Opera9で動作するようです。
コメント欄を見ると、Safariでも互換モードの指定方法で動作しているようですね。
こんな便利な方法があったとは。。。
| コメント (0) | トラックバック (0)
crossdomain.js(QrONE)
crossdomain.jsは、Flashと連携することで、クロスドメインのXMLHttpRequestを行うことのできるJavaScriptライブラリです。
しかも、戻ってきたXMLをJSONにパーズしてくれるのがいいですね。
クロスドメインのXMLHttpRequestを行う方法としては、他にもJSONPがありますが、セキュリティ上問題があるとも言われているようですので、こういったライブラリを使用するのもいいかもしれませんね。
ただ、ライセンスについては明記されていないので、仕事でご使用の際にはお気をつけください。
| コメント (0) | トラックバック (0)
Update Firebug to 1.0.3(Ajaxian)
FireBugがバージョンアップしました。
上記の記事ではver1.0.3ですが、最新版をインストールするとver1.0.4になります。
現時点(2007/4/6)では、FireFoxのアドオンから更新しても反映されませんが、FireBugのサイトからは直接インストールできます。
以前のバージョンのFireBugには、しゃれにならないセキュリティホールがありますので、FireBugを使用している方は早めのバージョンアップをお勧めします。
| コメント (0) | トラックバック (0)
Spket IDEは、なかなかユニークで高機能なJavaScriptエディタです。
どの辺がユニークかというと、JavaScript, XMLのエディタとしてだけでなく、下記の機能も持っているからです（各機能のスナップショット付きの説明画面にリンクしてあります）。
コード補完機能もありますし、コードスニペット機能もあり、JavaScriptの階層表示にも対応しています。
エディタは、eclipseプラグインとして動作させることもできますし、スタンドアロンのアプリとしても動作させることができます。
個人的には、AptanaとSpket IDEの両方をeclipseのプラグインとして入れておいて、用途に合わせて使い分けるのがいいかなと思います。
| コメント (0) | トラックバック (1)
Javascript keyCode checker tool
上記サイトで、ブラウザのキーコードを簡単に調べることができます。
自分でJavaScriptを書いてもいいのですが、手早く調べたいときにどうぞ。
キーコードチェックに使用しているJavaScriptも公開されているので、自分用のツールに組み込んでもいいかもしれませんね。
| コメント (0) | トラックバック (0)
jQuery history pluginは、Ajaxアプリケーションで戻るボタンを押したときに、操作前の状態に戻すことができるjQueryのプラグインです。
この動作は、イベント発生時に履歴にURLを追加しておいて、戻るボタンが押されたときは、ブラウザのキャッシュを利用して操作前の状態に戻すという感じでしょうか？
操作中にブラウザのキャッシュがクリアされたらどうなるんだろう？
そう思ってサイトを確認してみたら、キャッシュをクリアしてから戻るボタンを押してもうまく表示されていました。
うーん。URLに画面の状態を持っておくとうまくいくのだろうか。。。
ちょっと動作原理が分かりませんが、なかなかおもしろそうなライブラリですね。
なお、ライセンスはMITライセンスとのことです。
(2007.04.04追記)
製作者のみかログさんのブログで疑問についてのご回答がありました。
動作原理は、location.hashを使うか、iframeのopen/closeを使うかブラウザによって切り替えているそうです。なるほど～。
あと使い方としては、URLの#以降に画面の状態を持たせておいて、アプリ側で状態を復元するそうです。
丁寧なご回答ありがとうございました。m(_ _)m
| コメント (0) | トラックバック (1)
上記の記事で、IEを超シンプルに判定する方法が紹介されていました。
var isMSIE = /*@cc_on!@*/false;
たったこれだけです。
IEの条件付コンパイルを利用しているようですが、IE5.01, IE5.5, IE6.0, IE7.0, FireFox2.0, Opera9.1.0 で問題なく動作しました。
うーむ。すばらしい。
| コメント (0) | トラックバック (0)
How to Dynamically load JavaScript Source files to a webpage
外部のJavaScriptファイルを動的に読み込むTipsが、上記サイトで紹介されています。
といっても、<script>要素を動的に生成して、<head>要素に追加しているだけですが。。。
JSONPでも同様のことをしていた気がしますが、備忘録メモです。
//Create a 'script' element
var scrptE = document.createElement("script");// Set it's 'type' attribute
scrptE.setAttribute("type", "text/javascript");// Set it's 'language' attribute
scrptE.setAttribute("language", "JavaScript");// Set it's 'src' attribute
scrptE.setAttribute("src", "myjsfile.js");// Now add this new element to the head tag
document.getElementsByTagName("head")[0].appendChild(scrptE);
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
dean.edwards.name/IE7/overview/
IE7は、IE5～IE6でIE7と同じようにCSSを動作させるJavaScriptライブラリの模様。
IE7は22KBと軽量で、ライセンスはLGPLです。
ちと、バージョンが0.9(alpha)と微妙ですが、何かの時に使えるかもということで、メモがてらご紹介です。
↓ダウンロードはこちらから
IE7(SourceForge.net)
https://sourceforge.net/project/showfiles.php?group_id=109983&package_id=119707
| コメント (0) | トラックバック (0)
SafariのJavaScriptデバッガ「Drosera」を使ってみる。(たたみラボ)
上記の記事で、SafariのJavaScriptデバッガの「Drosera」について、詳しく解説されています。
SafariにJavaScriptのデバッガがあったんですねぇ。
初めて知りました。
Drosera
http://trac.webkit.org/projects/webkit/wiki/Drosera
| コメント (0) | トラックバック (0)
Webアプリケーション開発者向け Firefox拡張機能 33+1選(MYCOMジャーナル)
Webアプリの開発で使えるFireFox拡張のまとめ＆解説記事が、MYCOMジャーナルに掲載されています。
その数、なんと３４個。
頑張りましたねぇ。。。
聞いたことのない拡張もあり、なかなか参考になります。
今度、しっかり読もう（笑）。
あ、記事の目次はこちらです。
| コメント (0) | トラックバック (0)
google-code-prettifyは、Googleが提供するコードをハイライト表示してくれるJavaScriptライブラリです。
サンプルはこちらから見ることができます。
READMEを見ると、使い方も簡単そう。
まず、ライブラリの読み込み。
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
onLoad時に実行。
<body onload="prettyPrint()">
ハイライト表示したいコードは、こんな感じで記述。
<pre class="prettyprint">
/*---------------------------
google-code-prettifyサンプル
------------------------------*/
for (var i == 0; i < 10; i++) {
alert(i);
}
</pre>
こんな風に表示されました(IE7)。
色合いは、prettify.cssを編集することで変更可能です。
なんかいい感じ！
なお、ライセンスは、Apache License 2.0です。
ダウンロードはこちらから。
http://google-code-prettify.googlecode.com/svn/trunk/src/
| コメント (0) | トラックバック (1)
上記サイトで、ブラウザがWeb標準にどのくらい対応しているかの詳細な情報が公開されています。
対象となるWeb標準は、HTML, CSS, DOM, ECMAScriptです。
英語の情報ですが、表の中にY/Nがあるだけなので、基本的な部分は問題なく参照できると思います。
うーん。すばらすぃ。
| コメント (0) | トラックバック (0)
JavaScriptから利用できる顔検出API「facekit」(王様の箱庭 :: 日記)
上記エントリーで、顔の動きでGoogle Mapsを操作するデモが公開されてます。
facekitという顔検出APIを利用しているようですが、こりゃすごい。
必見です。
Facekit.net
http://facekit.net/
| コメント (0) | トラックバック (0)
ウェブ閲覧者を攻撃者の手先に変えるツール--研究者が発表へ(CNET Japan)
JavaScriptによる脆弱性検出ソフトを、セキュリティ研究者が開発したとのこと。
Jiktoはウェブアプリケーション用の脆弱性検出ソフトである。Hoffman氏によると、公開されているウェブサイトを密かに巡回して脆弱性を探し、第三者に結果を送信するという。同氏は、攻撃者がJiktoを自分のウェブサイトに設置したり、クロスサイトスクリプティングと呼ばれる一般的なウェブセキュリティホールを悪用して信用のあるサイトに埋め込んだりできると述べた。
しかも。。。
今週後半、ワシントンD.C.で開催されるハッカーイベントShmooConでこのツールを公開する予定である。
ちょっとちょっと。
そんな物騒なものを、物騒なところで公開しないでくださいな。。。
しかし、ブラウザのセキュリティをどうするのか、今後の大きな課題ですね。
| コメント (0) | トラックバック (0)
Google Maps Lightboxは、Google MapsをLightbox風に表示するサイトです。
mootoolsをベースに作成されているようですね。
こんな使い方もできるというアイデアメモ。
| コメント (0) | トラックバック (0)
サロゲートペアをJavaScriptで検出する方法(Web系雑記)
上記エントリーで、JavaScriptでサロゲートペアを検出するサンプルフォームが公開されています。
結構シンプルなコードなのですが、Windows Vistaからサロゲートペアを入力したところ、ちゃんと検出できました。
Webアプリケーションでサロゲートペアをどう扱うか悩んでいたところなので、この情報はとてもありがたいです。
感謝！
| コメント (0) | トラックバック (0)
Smoothbox : Thickbox for mootools
Smoothboxは、mootoolsをベースとした画像プレビューのJavaScriptライブラリです。
jQueryをベースにしたThickBoxをmootoolsに移植したようですね。
画面はこんな感じです。
こんな使い方もできます。
ライセンスはMITライセンスです。
あと、mootoolsをダウンロードするときは、全ての機能にチェックを入れてからダウンロードした方が無難です。デフォルトでダウンロードするとうまく動きませんでした。
| コメント (0) | トラックバック (0)
jQuery Flash Pluginは、Flashを動的にページに追加できるjQueryプラグインです。
使い方は簡単そう。
$('#hello').flash({
src: 'hello.swf',
width: 320,
height: 240
});
しかも、Flashをチェックして、Express InstallとやらでFlashのインストールもできる模様。
$('#hello').flash(
{ src: 'hello.swf' },
{ expressInstall: true }
);,
これは便利！
なお、jQuery Flash Pluginは、jQuery1.0.3以上で動作し、ライセンスはMITライセンスとGPLライセンスのデュアルライセンスになってます。
* Copyright (c) 2006 Luke Lutman (http://www.lukelutman.com)
* Dual licensed under the MIT and GPL licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/gpl-license.php
| コメント (0) | トラックバック (0)
Adobeから、AjaxやFlashなどのWeb技術をオフラインでも実行できる環境の「Apollo」のアルファ版が公開されたようです。
Apolloのよさ気なところは、馴染みのあるWeb技術を使ってローカルアプリを作れるだけでなく、一度作れば、Windows, Mac, Linux上で動作する点ですね。
しかし、ネットの住人の方々の注目度の高さには驚きました。(^_^;
既にダウンロードして試した上に、ブログで記事を書いている方々がたくさんいます。
個人ブログの記事とニュースサイトへのリンクを載せておきます。
・個人ブログ
・ニュースサイト
・ドキュメント
(2007.03.21追記)
まだアルファ版なのに、Apolloの注目度は本当にすごいですね。
| コメント (0) | トラックバック (1)
超リッチJavaScriptコンポーネント集「Ext」がprototype.jsに対応(phpspot開発日誌)
キレイなインターフェースと豊富な部品があるJavaScriptライブラリのExtが、更にパワーアップしてるようです（以前はyui-ext）。
ベースとなるライブラリが、今まではYahoo! UI Libraryだけだったものが、下記のようにjQueryとPrototype+Scriptaculousを選択可能になってます。
ベースになるライブラリがYahoo! UI Libraryでなかったために、Extを使えなかった方に朗報ですね。
そして、いつの間にかテーマが使用できるようになってました。
しかも、デフォルトがAero。
Aeroがテーマだと、ちゃんとWindowが半透明になってます。
芸が細かい。
で、よく見てみると、部品が以前よりかなり増えているようですね。
なかなかいい感じなのに、ComboBoxesコントロールがあります。
IE6だと、select要素がCSSのz-indexを無視するため、要素の重ね合わせがうまくいかず、かなり苦労しました。結局は、部品を自作したんですが。。。
そのコンボボックスが、選択のみとテキスト編集可能の両方の機能を持って公開されているのは、なかなかいい感じです。
ライセンスはLGPLのようです。
The JavaScript code distributed with Ext is licensed under an LGPL open source
license version 2.1.
英語に問題がない場合には、ExtがJavaScriptの部品として有力候補になりますね。
Ext Documentation Center
http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/
| コメント (0) | トラックバック (0)
JavaScript Developer Toolsは、１つのWebサービスで、JavaScriptの文法チェック、圧縮・難読化、コード整形ができてしまう優れものサービスです。
これは便利ですね。
| コメント (0) | トラックバック (0)
Firefox2.0.0.2へのバージョンアップがASP.NET AJAXに影響する(ひよっこプログラミング)
ASP.NETフォーラムからの情報のようですが、FireFox2.0.0.2で、DOMの挙動が変わったためにASP.NET AJAXで挙動が怪しくなるようです。
Basically the dynamically loaded scripts seem to now execute asynchronously, which causes them to fire after the inline scripts, whereas previously they’d fire as soon as they were added to the DOM.
ASP.NET AJAXで、FireFoxをサポート対象にしている方はご注意を。
しかし、FireFox2.0.0.2で、そんな変更が入っていたんですねぇ。。。
| コメント (0) | トラックバック (0)
jsjuicerは、C++で記述されたコマンドラインから実行できるJavaScript圧縮ツールです。
オプションも豊富です。
usage: jsjuicer [-sdmoch] [comment] [output file] [input file]...
-s Strip comments.
-d Strip debug code starting with ";;".
-m Safely remove unneeded whitespace and control characters.
-o Obfuscate symbols starting with "$".
-c Inject comment.
-h Just print this usage and exit.If no output file is specified then output is written to standard out.
If no input files are specified then input is read from to standard in.
Using -m implies -s
Defaults to outputting the input files unmodified.
a.jsというファイルを圧縮するしてc.jsに出力する際に、コメントやスペースをとった上で、新しくコメントを先頭につけるには、以下のように記述します。
jsjuicer_1_0.exe -smc "日本語のコメントもＯＫ" c.js a.js
Web Editionも公開されているので、用途によって使い分けるとよさそうですね。
Web Editionは、コメントに日本語を入れると微妙ですが。。。
| コメント (0) | トラックバック (0)
Fixed positioning(doxdesk)
IEのCSSでは、下記の指定をした際にバグがあるようですね。
fixed.jsは、Windows上のIE5以降でこのバグを解消してくれ、他のブラウザには影響がないとのことです。
いつか役に立つ日も来るかなメモ。
| コメント (0) | トラックバック (0)
Javascriptフレームワーク比較チャート(phpspot開発日誌)
phpspot開発日誌にて、PrototypeやDojoなどのメジャーなJavaScriptライブラリの機能別の比較チャートが紹介されています。
便利そうですね。
| コメント (0) | トラックバック (0)
Detecting IE7+ in JavaScript(Ajaxian)
IE6とIE7を簡単に見分けるTipsが、Ajaxianで紹介されてました。
if (typeof document.body.style.maxHeight != "undefined") {
// IE 7, mozilla, safari, opera 9
} else {
// IE6, older browsers
}
簡単すぎ？
(2007.3.8追記)
IE4.01, IE5.01, IE5.5, IE6.0, IE7, FireFox2.0.0.2, Opera9.10で動作確認したところ、正しく動作しました。これなら使えるかな？
| コメント (0) | トラックバック (0)
tipzoom.jp2.0は、JavaScriptで画像のズームができちゃうナイスなライブラリです。
画像を見たほうが理解が早いと思います（デモより）。
・最初の画像
・画像にマウスオーバーしたときの画像
・[↑]キーでズームインしたときの画像
tipzoom.jp2.0では、カーソルキーで以下の操作ができます。
いやぁ、JavaScriptだけでここまでやるとは。。。
これはすごいですね。
尚、ライセンス形式は明記されていませんが、クレジットを残しておけば自由に使用できそうです。作者のサイト(http://valid.tjp.hu/zoom2)にリンクバックすれば、なおいいと思います。
Of course. But if you are a cool guy, then you will surely link this page (http://valid.tjp.hu/zoom2). If you change or expand the code, please don't cut out the original credits. I'm asking for credit as I've been working on this thing for quite some time. (Not to mention the fame factor :)
| コメント (0) | トラックバック (0)
Ajaxでデバッグしよう(@IT)
Ajaxというか、XMLHttpRequestを利用して、ブラウザの処理ログをサーバ側に出力するTipsが@ITで紹介されています。
今まで考えていませんでしたが、確かにこういうアプローチもありですね。
サンプルプログラム(JavaScript,Perl)も公開されていますし、実際のWeb開発プロジェクトで参考になりそうです。
(2007.03.07追記)
サンプルコードについて、下記のブログで厳しいつっこみが入ってます。
勝手に添削 - Ajaxでデバッグしよう - ＠IT(404 Blog Not Found)
http://blog.livedoor.jp/dankogai/archives/50780781.html
さすがというべき？
| コメント (0) | トラックバック (0)
HTML Slidyのプレゼン資料 色々まとめ(とあるWEBクリエイターのblog)
上記記事で、ブラウザ上でプレゼンができる「HTML Slidy」と、ネット上にあるサンプルが紹介されています。
IT戦記のamachangさんが、ブラウザで参照できるプレゼン資料をよく作られていますが、それと同じようなことができるライブラリが公開されていたんですね。
これは便利！
HTML Slidy
http://www.w3.org/Talks/Tools/Slidy/
| コメント (0) | トラックバック (0)
jQuery BlockUI Plugin は、ページや要素をブロックするjQueryのプラグインです。
ページ全体をブロックする「Page Blocking」、要素をブロックする「Element Blocking」、モーダルダイアログを表示する「Modal Dialogs」があります。
これは便利ですね。
なお、ライセンスはMITとGPLのデュアルライセンスとのこと（ソースより）。
・Page Blocking
・Element Blocking
・Modal Dialogs
| コメント (0) | トラックバック (0)
Open Source JSON Tag Library Released(Ajaxian)
JSON Tag Libraryは、JSPで指定の書式に従って記述すれば、JSONに変換してくれるタグライブラリです。
バージョンは0.2と低いようですが、こんな便利なものがあるんですね。
・JSP
<%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json" %>
<json:data>
<json:property name="aString" value="foo"/>
<json:property name="anotherString">
Foo
</json:property>
<json:property name="bool1" value="${true}"/>
<json:property name="numeric1" value="${1+2}"/>
<json:object name="anObject">
<json:property name="fee" value="fi"/>
<json:property name="fo" value="fum"/>
</json:object>
<json:array name="anArray" items="${daysOfWeek}"/>
</json:data>
{
"aString": "foo",
"anotherString": "Foo",
"bool1": true,
"numeric1": 3,
"anObject": {
"fee": "fi",
"fo": "fum"
},
"anArray": ["Mon","Tue","Wed","Thur","Fri","Sat","Sun"]
}
JSON Tag Library
http://json-taglib.sourceforge.net/
| コメント (0) | トラックバック (0)
MacOSXのダイアログ表示アニメーションをJavaScriptで再現 （ModalBox）(youmos)
ModalBoxは、MacOSX風のWindowライブラリとのこと。
prototype.js と script.aculo.usをベースにしているようですが、10KBととても軽量でWindowが上から降りてきて表示されるというユニークな表示方法です。
ここら辺がMacOSX風ということ？
あと、ESCキーでWindowが閉じることができるのは、いいですね。
ライセンスはMITライセンスです。
ModalBox
http://okonet.ru/projects/modalbox/
ModalBox Project(Google Code)
http://code.google.com/p/modalbox/
| コメント (0) | トラックバック (0)
PQuery - PHP and JQuery(NGCoders)
PQueryは、PHPからjQueryを簡単に使うためのPHPライブラリです。
具体的な機能は、デモをご覧ください。
バージョンは、0.1と低いですが、PHPユーザには結構便利かもしれませんね。
ライセンスは、MITライセンスかGPLライセンスかのどちらかを自由に選べるようです。
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
| コメント (0) | トラックバック (0)
| コメント (2) | トラックバック (1)
| コメント (0) | トラックバック (0)
// Get a browser-specific DOM Document object
var oDomDoc = Sarissa.getDomDocument();
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
<a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a>そして、DYNAMIC DRIVEで公開されているコードは、個人利用でも商用利用でも可なのがいいですね。ただ、再配布については制限があるので、詳しくは"Terms of Use"をご確認ください。
| コメント (0) | トラックバック (0)
%s - Stringしかも、今まで知らなかった出力形式もたくさん載ってます。
%d, %i - Integer (numeric formatting is not yet supported)
%f - Floating point number (numeric formatting is not yet supported)
%o - Object hyperlink
console.log(object[, object, ...])◇Command Line API
console.debug(object[, object, ...])
console.info(object[, object, ...])
console.warn(object[, object, ...])
console.error(object[, object, ...])
console.assert(expression[, object, ...])
console.dir(object)
console.dirxml(node)
console.trace()
console.group(object[, object, ...])
console.groupEnd()
console.time(name)
console.timeEnd(name)
console.profile([title])
console.profileEnd()
console.count([title])
$(id)
$$(selector)
$x(xpath)
dir(object)
dirxml(node)
cd(window)
clear()
inspect(object[, tabName])
keys(object)
values(object)
debug(fn)
undebug(fn)
monitor(fn)
unmonitor(fn)
monitorEvents(object[, types])
unmonitorEvents(object[, types])
profile([title])
profileEnd()
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
This application makes modifications to files, if not configured properly it could result in loss or destruction of work. It would be best to make a backup copy of make sure your files are checked into to a source control system before using. I would really hate for this application to result in any swearing or tears.
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (2) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
Math.floor(Math.random()*3+1)逆に、以下のような記述では、正しくランダムな自然数を取得できないとのこと（詳細は記事を参照）。
× Math.round(Math.random*2+1)ですので、１からmaxまでのランダムな自然数を正しく取得するには、以下のように記述すればよいそうです。
× Math.ceil(Math.random()*3)
Math.floor(Math.random()*max+1)うーん。奥が深いですね。。。
| コメント (0) | トラックバック (0)
Terms of use
-You may freely use any script found on JavaScript Kit on BOTH personal & commercial webpages.
-You may NOT, however, redistribute our scripts, by putting them on another script archive or CD ROM, for example
| コメント (0) | トラックバック (0)
IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+
| コメント (0) | トラックバック (0)
| コメント (2) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
--- ここから ---このプログラムはFlashを操作可能なオープンソースを使用しています。
clipbrd.copyText("hogehoge");
--- ここまで ---
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
License:
Copyright 2006 James Newton-King
http://www.newtonsoft.com
This work is licensed under the Creative Commons Attribution 2.5 License
http://creativecommons.org/licenses/by/2.5/
You are free:
* to copy, distribute, display, and perform the work
* to make derivative works
* to make commercial use of the work
Under the following conditions:
* You must attribute the work in the manner specified by the author or licensor:
- If you find this component useful a link to http://www.newtonsoft.com would be appreciated.
* For any reuse or distribution, you must make clear to others the license terms of this work.
* Any of these conditions can be waived if you get permission from the copyright holder.
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
| コメント (0) | トラックバック (0)
Conditional Compilation of JScript/ JavaScript in IE
IEの条件付コンパイルの解説記事(英語)です。
あまり見かけないのでメモ。
ちなみに、IEの条件付コンパイルというのは、IE独自のコメントの付け方で、ブラウザによって処理を切り替えることができるもの（私の理解では）。
下記スクリプトは元記事のものです。
ちょっと見づらくなってしまいましたが、このコードだと、全てのIEで３行目が実行されます。IE５以上だと5行目と６行目が実行されます。IE５以上ではないブラウザでは、８行目が実行されます。
IEの条件付コンパイルは、覚えておくと便利そうですね。
| コメント (2) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (1)
Some have already begun looking into establishing standards that could be implemented into future browsers, such as JSONRequest and ContextAgnosticXMLHttpRequest.
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
Operaは普段使っていないので、あまり情報を集めていませんでしたが、Web開発をするための環境が大分そろっているようですね。
Opera9 で快適 HTML 編集！(WebOS Goodies)
Opera9のHTMLソースビューは、ダイレクトにHTMLの編集ができるとのこと。
Opera の Web Developer Toolbar を試す(WebOS Goodies)
Operaの開発用ツールバーで、豊富な機能があるようです。
Opera が純正の開発者ツールをリリース(WebOS Goodies)
DOM ConsoleやCSS Editorがあります。
役に立つ情報に感謝です。
Opera web browser
http://www.opera.com/
Web Developer Toolbar & Menu for Opera
http://operawiki.info/WebDevToolbar
Opera developer tools
http://dev.opera.com/articles/view/opera-developer-tools/
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
Is it BSD like YUI itself? I'm looking to prototype some stuff for SugarCRM (the company I work for) where we heavily use YUI.
Yep, it's all BSD.http://www.yui-ext.com/forum/viewtopic.php?t=174&sid=5498fbdc47cf716a2a51d2ecb9255fca
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
TDD and Javascript with JsMock(Ajaxian)
JavaScriptでMockオブジェクトを扱える「JsMock」というライブラリが、Ajaxianで紹介されています。
JavaScriptでインターフェースを扱って、Mockオブジェクトを使えるようにするなんて。。。
世の中にはツワモノがいるものですね。。。
JsMock
http://jsmock.sourceforge.net/
JsUnit
http://blogs.pathf.com/agileajax/2006/06/jsunit_agile_aj.html
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
JS Builder(Jack Slocum's Blog)
JavaScriptの複数ファイルを、まとめてGUIで圧縮できるツールがありました。
しかも、ヘッダーにコメントを付けられるので、ライセンスの記入も簡単。
こういうのを探していたんですよね。
尚、動作には.NET Framework2.0が必要です。
・スクリーンショット
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
全てのブラウザで有効ではないですが、window.onbeforeunloadイベントを使用することで、ブラウザの戻るボタンをある程度制御することが可能です。
コードはこんな感じ(prototype.jsを使ってます)。
メッセージは以下のように表示されます(IE7)。
動作確認したのは、以下のブラウザです。
尚、以下のサイトを参考にさせていただきました。感謝。
[JavaScript]ページ遷移前に確認をする、onbeforeunload(COLLECTION & COPY)
| コメント (0) | トラックバック (0)
| コメント (0) | トラックバック (0)
|
