アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2009年10月

2009年10月23日

jQueryベースのyuga.jsをちょっとだけカスタマイズ。(大文字の拡張子でもthickboxが動くように。)

成功者になるための必読ブログとは?

yuga.jsネタ再び。

最近はJSをグリグリ書いてどうこうする...なんてことをしなくても、Ajaxのライブラリを使ってちょこちょこってすればいろんなことができちゃうのですごく便利。

prototypeやjQueryをベースに、いろいろなすごい人たちが「どんなもんじゃいっ!」という感じで素敵なプラグイン(っていうのか?)を作ってくれてるので、ノンプログラマーな僕としてもすっごく助かります。w

んで、ページするするや、タブ機能、画像のギャラリーなど、サイトに組み込むだけでイケてる機能が追加できちゃうというのですごく便利に使わせてもらってるJSに、日本人のkyosukeさんが開発した「yuga.js」があります。
(以前にもエントリーで紹介済み。)

ほんとに設定もラクちんで、なんせリファレンスのサイトも日本語(当たり前かw)で解説があるので、とにかく簡単、便利、使いやすい!...とカラリオのCM並みに重宝しています。
(詳しくはサイトサイトでチェックっ!)

んが...。

大文字はNG?

yuga.jsには、画像に直リンクすることでthickbox.jsを起動して画像をページ遷移することなくオリジナルの画像を表示する...というイカした機能があるんだけど、そこでちょっとした問題が。

デジカメとかで写真を撮ると、画像の拡張子が大文字(例:JPG)になってることがあるけど、そういう画像に直リンクすると、thickboxが効かずに画像そのものをブラウザで開いてしまう。

thickboxは、通常aタグに「class="thickbox"」をつけるとギャラリー表示できるというもので、yugaを使わずに、普通にクラスを指定して実験してみると、大文字の拡張子でもthickboxが起動した。

じゃあ、選択肢は二つ。

1、yuga.jsを使わないで、jQueryとthickboxを使って、クラスを指定すりゃいいじゃん!ってことなんだけど...いちいちクラス名を付けるってのがめんどくさい。
(CMSとかに組み込んだりして、サラっと使いたい。)

2、画像は全て小文字の拡張子に直してアップロードする。
⇒さらにめんどくさい!っつか、一般のユーザーはそんなこと(yuga.jsを使ってるかどうか)を知りもしないだろうから...っつか、そもそも関係ないから、「拡張子は小文字でよろぴく」なんて言うのは現実的じゃない。

...っつーことは、うーん。
プログラムとかちょー苦手なのに、yuga.jsのほうをいじらなきゃいかんということなんだけど...あっさり解決。

大文字の拡張子の場合の処理を追加する。

表題で「カスタマイズ」とか偉そうに書いてますが、要は書かれているコードをコピーしてちょっと直しただけです。(汗)

yuga.jsの160行付近にある下記の部分を、

tb_init('a[href$=".jpg"]:not(.thickbox, a[href*="?"]), a[href$=".gif"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".png"][href!="?"]:not(.thickbox, a[href*="?"])');

以下のように修正。

tb_init('a[href$=".jpg"]:not(.thickbox, a[href*="?"]), a[href$=".gif"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".png"][href!="?"]:not(.thickbox, a[href*="?"]),a[href$=".JPG"]:not(.thickbox, a[href*="?"]), a[href$=".GIF"][href!="?"]:not(.thickbox, a[href*="?"]), a[href$=".PNG"][href!="?"]:not(.thickbox, a[href*="?"])');

んで、あとは今までどおり、画像を直リンクで指定すれば、ちゃんとthickboxが動くようになりました。

めでたしめでたし。

 

投稿者 kuro : 01:20 | 固定リンク | コメント (0) | トラックバック(0) | ID:393

ページトップ△

2009年10月21日

「ビットマップとしてキャッシュ」する。(cacheAsBitmap)

成功者になるための必読ブログとは?

フラッシュアニメーションが…遅い。

フラッシュのいいところは、基本ベクターデータなので、ファイルサイズが小さくて、動作が軽いということ。

んが。

それは描画されるオブジェクトのアニメーションの量とかによって変わるみたい。

たとえば、複雑なベクターデータを含むオブジェクトを50個とか100個とか…それ以上を動かそうとすると、とたんに動きが悪くなる。

っつか、尋常じゃないくらい動きが遅くなるので、実用に耐えられない。
(特に、フルスクリーンモードで顕著に影響が出る模様。)

魔法のおまじない。cacheAsBitMap

そこで、一度描画したものをビットマップとしてメモリにキャッシュして動かすと…あら不思議。サクサクとうごくじゃありませんか!w
※実際の処理速度(fps)はマシンのスペックに依存します。

例:
_mc.cacheAsBitmap = true;

読んで字のごとく「ビットマップとしてキャッシュ」でっす!

参考:
http://casualplay.net/blog/2005/11/_cacheasbitmap_1.html


んじゃ、何でもかんでも「ビットマップとしてキャッシュ」すりゃいいのかっつーとそうでもなくて、xとかyとかが変化する…つまり移動させるアニメーションには効果的だけど、拡大とかアルファを変化させるようなアニメーションだと、逆に遅くなるみたい。


参考サイトがAS2だったので、AS3で実験する場合はこちら↓。
※ライブラリにあるMCに、リンケージでクラス名「croudMc」を指定。
ステージ上にはキャッシュONOFF用のボタン「_btn」とFPS表示用の「fps_txt」を配置。

var croudArray:Array = new Array();

var sWidth:uint = stage.stageWidth;
var sHeight:uint = stage.stageHeight;
var maxNum:uint = 200;

for(var i:uint=0; i<maxNum; i++) {
var croud_mc:croudMc = new croudMc();
croudArray[i] = croud_mc;
croudArray[i].x = sWidth*Math.random();
croudArray[i].y = sHeight*Math.random();
var scaleNum = 1.5*Math.random()+0.5;
croudArray[i].scaleX = croudArray[i].scaleY = scaleNum;
croudArray[i].speed = 20*Math.random()-10;
stage.addChild(croudArray[i]);
croudArray[i].addEventListener(Event.ENTER_FRAME,mcMove);
}

stage.addChild(_btn);
_btn.addEventListener(MouseEvent.CLICK,switchCache);

function mcMove(evt:Event):void {
var targetMc = evt.target as MovieClip;
if(evt.target.speed >= 0) {
if(targetMc.x >= 550) {
targetMc.x = -targetMc.width;
}
} else {
if(targetMc.x <-targetMc.width) {
targetMc.x = sWidth;
}
}
targetMc.x += targetMc.speed;
}

function switchCache(evt:MouseEvent):void {
for (var i:uint = 0; i < maxNum; i++) {
croudArray[i].cacheAsBitmap = !croudArray[i].cacheAsBitmap;
}
}

var countNum:uint = 0;
var oldTimer:uint = getTimer();

stage.addChild(fps_txt);
stage.addEventListener(Event.ENTER_FRAME ,countFps);

function countFps(evt:Event) {
countNum += 1;
if (getTimer()-oldTimer >= 1000) {
fps_txt.text = String(countNum) + "fps";
oldTimer = getTimer();
countNum = 0;
}
}

サンプルはこちら

(うげぇーきもちわりぃw)

ってことで、一応備忘録のためにメモ。

 

投稿者 kuro : 12:44 | 固定リンク | コメント (0) | トラックバック(0) | ID:392

ページトップ△