シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で

jslint-multi-widget - Google Code 複数ファイルの構文チェックも楽々！JavaScript開発に便利な「JSLint Multi Widget」。 フォルダをこのツールにドラッグすれば、フォルダ内にあるJSファイルを全て構文チェックしてくれ、次のように色分け表示してくれます。 ファイルをクリックすれば、エラーの詳細が表示されます。 JavaScriptファイルは、必要に応じて読み込ませたり、複数になることも多いですが、構文チェックが一括で出来るのは嬉しいですね。 Yahoo! ウィジェットベースで動作するみたい。 関連エントリ IEでのJavaScriptデバッグを可能にする「CompanionJS」 JavaScriptデバッグツール集 Chromeでも使えるJavaScriptデバッガ「XBug」

12 Standard Screen Patterns サイトのレイアウト時に役立ちそうなレイアウトパターン集「12 Standard Screen Patterns」 次のような感じで、状況に応じた適切なレイアウトパターンのサンプルイメージと、実装例サイトを紹介しています。 例えば、その１の、Master/Detail というパターンであれば、左、あるいは上部にナビゲーションを置いて、右あるいは下にコンテンツを表示するパターンです。 具体例でいけば、iTunesやWindowsのエクスプローラーが同じようなＵＩですね、というサンプル例が多数紹介されています。 他にも12のパターンが紹介されていて、ＵＩに迷った時はこれを参考にすると糸口が見つかりそうな気がします。 関連エントリ HTMLで雑誌のような美しい段組みレイアウトを軽く実現できるjQueryプラグイン 複雑なCSSレイアウトもサク

57 Free Image Gallery, Slideshow And Lightbox Solutions | 1stwebdesigner - Love In Design 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集が公開されていました。 3Dを使った物や、ＵＩ的に面白い物が色々あって、ちょっとしたサプライズを持った画像ギャラリーなんかを作るのに活用できそう。 3D Curve Wall スムーズかつ立体的に動作する感じで次世代を感じさせる Spiral Carrousel XML 使いにくいけど立体的で面白い動作をします Polaroid Gallery 机の上に置いた写真をマウスで移動できる面白いＵＩ TiltViewer マウスの動きによってギャラリーが傾くという面白いＵＩ。デザインや動きが秀逸。 Galleriffic Sl

DojoCampus Blog Archive Dojo Zoomer? 選択範囲をドラッグ＆拡大して写真の部分的な拡大ができるJSウィジェット「Dojo Zoomer」 次の図で、左に表示されている画像の選択範囲を指定すると右に拡大されるというもの。 デモ なかなか面白いですね。部分的にここをもうちょっと見たいというようなＵＩのニーズに応えてくれそうです。 関連エントリ とても大きい画像を地図アプリ風にドラッグ＆ドロップして見る 虫眼鏡を使って画像をズームする感じのUIライブラリ「TJPzoom」

JavaScript IME for 日本語 は、ブラウザだけで日本語を入力できる Web サービスです。 この手のものでは、Ajax IME が有名ですが、選択肢が増えるというのはありがたいですね。

FlashをHTMLに貼るライブラリ swfobject 2 を使う

EMBED タグ、OBJECT タグの中にパラメータ（アトリビュート）オプションをつけ加えることによって、Flashの動きや質にHTMLから変化を与えることができます。 使用例 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=8,0,0,0" width="300" height="400" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="sample.swf" /> <param name="qu

Flashの変な仕様シリーズ第2弾。 「WindowsIEのFlash Playerの再生速度が遅いのは、wmodeを設定すると回避できるけど」という有名なやつを取り上げます。 このことについてはいろんなブログやらなんやらで解説されていますが、以下の記事がわかりやすくまとめられています。 3ping.org - FLASHのFPSを正常に ↑の記事が書かれたのは4年前。その間にIEは6から7になり、FlashもCS3までバージョンアップしましたが、この仕様は未だに直っていません。 CS3で作ってみた参考Flash（フレームレート50で作成） 「wmode」はFlashの背景を透過させるかどうか設定するパラメータです。値は「opaque（不透明表示）」と「transparent（透明表示）」の二つがありますが、どっちを設定しても、WindowsIEの再生スピードを正常にすることができます。な

Tweener系のライブラリとして、Tweensyってのがリリースされた！？という記事を見つけて読んでるときに、同じ作者の人が作ってるSWF Profilerってのも見つけた。 （Tweensyにも同梱されてるみたい。) SWF Profilerは以下の画像のようにリアルタイムで簡易的なグラフとテキストにより メモリ消費量などを表示してくれるみたいです。 そして、右クリックのコンテキストメニューででProfiler部分を出したり消したり出来るみたい。 これはさっそく次の案件から使ってみようと思った。 Flash作るときにメモリをtraceで確認しながらやってる人にはおすすめ！ んで、Tweensyだけど Tweensyには3つのバージョン！？タイプ！？があるみたいで、 Tweensy Zero 一番Light Tweensy Zero SoundTransformsやColorTr

Tweensy Tweensyというトゥイーンライブラリが早いらしいです。　 以下の比較デモを見ると、オブジェクト数が1000個を超えた位で速度差明らかになってきて、4000個ではTweenMaxが平均12fpsに対してTweensyは平均30fpsを維持しています。 特に、FlashPlayerの動作が遅いと言われるMacOSXで見ても、デモの最大数である5000個で28fpsを維持し続けるのは驚愕です。 Tweensy&TweenMax比較 基本的な使い方はTweenerやTweenMaxと同じような形式です。 import com.flashdynamix.motion.Tweensy; Tweensy.to(myInstance, {x:500}); Tweensy.from(myInstance, {x:500}); Tweensy.fromTo(myInstance, {x:

ボク的に第3次くらいのProgressionブームが来てるので少しチュートリアル等々の記事をまとめました。 16が多いのか少ないのか分かりませんが、3つの制作スタイル合わせて16です。 実際、用語ピンポイントでググったりすればもっと多くのエントリに出会えます。 また 公式ブログ でも Progression関連のエントリのまとめを隔週くらいでやる というステキカテゴリもありますね。あと、バージョンが古いものに関して書かれたエントリも勉強になったりすることもありますよ。 概要や大枠を掴んでしまったらいいのですが、初めのうちは意味が分からない。（ボクがそうだっただけ） それよりもちょっと前、まだどうしようか悩んでる人の背中をそっと押す、そんなエントリのまとめです。 そしてそのあとはガンガン突っ走っちゃって、そしてボクに教えてくださいｗ ＜コンポーネントスタイル＞ [チュートリアル] P

ラーメンサラダの会に来ていただいた皆様ありがとうございました。 楽しいひとときを過ごさせてもらいました。 また次回のお越しをお待ちしております。 また、先日kmxsさんのブログに於いて フルFlashサイトをProgressionで作り始める時にまず読むべき16の記事 というすばらしいエントリがあがりました。 このブログも紹介いただいております。ありがたいことです。 さて、今回はProgressionに同梱されているnium先生パッケージ内クラスの紹介です。 Util系のクラスはflabakaさんが最近ものすごい勢いでブログにエントリされておりますが、私はフルフラッシュサイトの際に便利なDocumentEventの紹介をしたいと思います。 実のところ、幅、高さが100%になるflashのサイトを作った事がなかったのですが、この前初めてそういった案件を手がけた際、Progressionを用い

どうやら近頃、ポストTweenerとして期待を集めているTweensy。 参考記事 Tweensy トゥイーンライブラリが面白そう（trick7） Tweensyが早いらしい（storage.goodmix） TweensyとSWF Profiler（Relishable Blog） Tweensy Originalを使って、イージングパラメータテスト & コード生成できるようなものを手始めに作っておいた。 パラメータ変化させて『tween開始』を押すと、実行。 次のようなソースが生成されます。 Tweensy.fromTo(testObj,{x:15,y:15}, {x:350, y:250},2,Back.easeIn,0); パラメータは順番に、次のようになります。 Tweenさせるインスタンス、 Tween開始位置、 Tween終了位置、 Tween所要時間（秒）、