Tag/JavaScript
JSFL書いてみたメモ
Flashで作業してると、 同じ作業を何度となく繰り返す場面に出くわすんですが、 どうにかして回避したいなぁ。って思ってたところで JSFL ってものに遭遇。 どうやらJavaScriptで書けるFlashの機能拡張らしい。
で、色々調べながら書いてみたのがコレ。 berian や iaocc が以前に話題にしてた、 ライブラリの画像をグラフィックスでラップして、 さらにムービークリップにしてくれるJSFL。完全に 車輪 ですよ!!
/**
* ConvertToSymbol.jsfl
**/
(function ()
{
// ファイルが開かれてないとココでおしまい
if (!fl || !fl.getDocumentDOM()) return alert("ドキュメントオブジェクトが見つかりません。");
var DOC = fl.getDocumentDOM();
var LIB = DOC.library;
LIB.items.filter(function (element)
{
// Bitmapなライブラリ以外はココではじく
return element.itemType == 'bitmap' ? true : false;
})
.filter(function (element)
{
var newName = element.name.split(".")[0] + "_g";
// 既に定義されていれば除く
if (LIB.itemExists(newName)) return false;
// Graphicsを生成
LIB.addNewItem("graphic", newName);
// BitmapをGraphicsでラップする
LIB.editItem(newName);
LIB.addItemToDocument({x:0, y:0}, element.name);
// ポジションの補正
var rect = DOC.getSelectionRect();
DOC.setSelectionBounds({
left: 0,
top: 0,
right: rect.right - rect.left,
bottom: rect.bottom - rect.top
});
DOC.exitEditMode();
return true;
})
.filter(function (element)
{
var name = element.name.split(".")[0];
var gName = name + "_g";
var mcName = name + "_mc";
// 既に定義されていれば除く
if (LIB.itemExists(mcName)) return;
// MovieClipを生成
LIB.addNewItem("movie clip", mcName);
// GraphicsをMovieClipでラップする
LIB.editItem(mcName);
LIB.addItemToDocument({x:0, y:0}, gName);
// ポジションの補正
var rect = DOC.getSelectionRect();
DOC.setSelectionBounds({
left: 0,
top: 0,
right: rect.right - rect.left,
bottom: rect.bottom - rect.top
});
DOC.exitEditMode();
return true;
});
})();
// vim: filetype=javascript fenc=utf-8 bomb
とりあえず良い感じに出来た(と思う)。
Flashでの作業中に、メンドクサイって3回思ったら JSFL 作るようにしよう ![]()
- Posted at:
- 2008/04/25 00:49:17
- 4 Comments
- 0 TrackBacks
- Tags:
- Flash
- JavaScript
- Trackback:
- http://humming.via-kitchen.com/2008/04/25/jsfl-memo/trackback/
jQuery野良プラグイン
jQuery野良プラグイン なんてのを Google Code で作ったよ。
なんか作ったら、どんどこ追加していく予定。 大きいのはメインストリートで開発が進んでると思うので、 ココでは小粒なのを作っていけたら良いと思う。
とりあえず、WindowsのノートPCが手に入ったら、
SWFObject と SWFMacMouseWheel の jQuery バージョンは作りたいと思っとります!
が、それもいつになるんだか ![]()
abde な人や t- 氏に煽られると、
色々と良いものが出来てくるかも知れないね ![]()
- Posted at:
- 2008/04/10 00:36:38
- 0 Comments
- 1 TrackBack
- Tags:
- JavaScript
- jQuery
- Trackback:
- http://humming.via-kitchen.com/2008/04/10/jquery-nora-plugins/trackback/
SWFMacMouseWheelがバグってるメモ
t-matsuda 氏と AS3.0 MouseWheel on Mac OS X を触る必要があったんだけども、 なぜかwindowsでエラー吐くので調べてみたよ。
エラー内容を見てみると、 どうやら SWFMacMouseWheel に registerObject ってメソッドが無いらしい。 それはさすがにアリエナイだろ。って思ってソースを見てみたら、 swfmacmousewheel_src.js の20行目あたりに、ものっすごいのが書いてあった!
var swfmacmousewheel = function()
{
if( !swfobject ) return null;
var u = navigator.userAgent.toLowerCase();
var p = navigator.platform.toLowerCase();
var mac = p ? /mac/.test(p) : /mac/.test(u);
// この1行がアリエナイ。
if( !mac ) return null;
// 処理がつづく...
// Macだとここが実行される。
return {
/*
Public API
*/
registerObject: function(objectIdStr)
{
regObjArr[regObjArr.length] = objectIdStr;
}
};
}();
この実装はどうなんだ? そりゃ registerObject なんてメソッド無いだろうよ。 windowだと swfmacmousewheel の中身がnullになるよ!
このあと、なんだかんだ修正しまくったんだけども、 とりあえずのやっつけなのであれば、
if ( !mac ) return null;
のところを、
if ( !mac ) return {
registerObject: function () {}
};
って変えてあげればエラーは消えるよ。
本当にやっつけだけども。
他にも色々と問題があったりなかったりなので、
デフォルトのまま使うのであれば、注意したほうが良いかもね ![]()
- Posted at:
- 2008/04/01 14:31:09
- 0 Comments
- 1 TrackBack
- Tags:
- Flash
- JavaScript
- Mac
- Trackback:
- http://humming.via-kitchen.com/2008/04/01/swfmacmousewheel-bug-memo/trackback/
jQueryでaタグをサムネイルにするプラグイン書いたよ。
abdeluxe な方にお願いされて、またまた調子に乗りました。
今回はaタグをサムネイルにする jQuery の野良プラグイン書いたよ ![]()
こんな感じにするとaタグがサムネイル画像になる。(実際はもうちょっとメンドクサイ)
// コレがデフォルト
$('a').asThumbnail();
サイズもちゃんと指定出来るよ。当たり前だけども。
// 引数でオプションを指定
$('a').asThumbnail({
width: 100,
height: 100
});
で、どうやって画像のパスを指定するかと言うと、 ぶっちゃけaタグの href 属性を正規表現で抜いてきて、 それを CSS で背景に指定してあげるだけ。 使い勝手が良いんだか悪いんだか分からんですが、 とりあえずソースを晒しておきます。
/**
* show element(s) as thumbnail
*
* @author Takanobu Izukawa
* @version 0.0.1
*/
jQuery.fn.extend({
/**
* asThumbnail
*
* @param options Object that contains some parameter.
* width: specified element width.
* default value is 170px.
* height: specified element height.
* default value is 170px.
* pattern: specified retrievable regex pattern.
* default value is `abdeluxe` custom.
* replacement: specified replace format.
* default value is `abdeluxe` custom.
* @return jQuery.
*/
asThumbnail: function (options)
{
// fix options.
options = options || {};
// declared default options.
var defaultOptions = {
'width': 170,
'height': 170,
'pattern': /^.*\/(\d+)\.html$/,
'replacement': '/blog/entryimg/$1.jpg'
};
// merge options.
options = jQuery.extend({}, defaultOptions, options);
// execute effect to each element(s).
return this.filter('a')
.each(function()
{
// retrieve image url.
var imageURL = this.href.replace(options.pattern,
options.replacement);
// attach new css.
jQuery(this).css({
'display': 'block',
'width': options.width + 'px', // should be width method instead?
'height': options.height + 'px', // should be height method instead?
'background-image': 'url(' + imageURL + ')',
'background-repeat': 'no-repeat',
'background-position': '50% 50%'
}).empty();
}).end();
}
});
たぶん、画像の position とかは指定出来た方が良いんだろうなぁ。
まぁ、そこらへんは勢いで作ったのでご愛嬌 ![]()
ツッコミ大歓迎でございます!
- Posted at:
- 2008/03/19 03:02:49
- 2 Comments
- 2 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2008/03/19/make-anchor2thumbnail-plugin-on-jquery/trackback/
monologista用AutoPagerizeのSITEINFO書いたよ。
monologista を Greasemonkey の AutoPagerize に対応させて欲しい! って話が出てたんで、頼まれてもないのにやってみたよ。
で、結論出来た。
けど、どこで晒せば良いのか分からなかったので、 とりあえずココで晒しておくよ。
url: http://monologista.jp/.*?,
nextLink: id("contents")/p[@class="pagination"]/a[last()],
pageElement: id("contents")/div,
insertBefore: id("contents")/p[@class="pagination"],
exampleUrl: http://monologista.jp/?page=nsIObserver
一応、 AutoPagerize (swdyh) にある書き方に沿って書いたから、 jsにベタで貼る時はシングルクォートが要るよ。
慣れてないと、このスクロール感がキモいなぁ ![]()
- Posted at:
- 2008/03/17 01:54:39
- 0 Comments
- 1 TrackBack
- Trackback:
- http://humming.via-kitchen.com/2008/03/17/wrote-autopagerize-siteinfo-of-monologista/trackback/
jquery.hotkeys.jsを試してみたよ。
jQuery のプラグイン jquery.hotkeys.js を試してみたよ。
ダウンロードは js-hotkeys - Google Code から。 落としてきたものを展開するんだけれども、 カレントディレクトリに散乱してしまうのでディレクトリを掘った方が良いと思う。
展開した中に入っている jquery.hotkeys.js がそれ。 一緒に入ってる jQuery は 1.1.4なものの、 1.2.1もサポートされているみたいなので気にせず1.2.1で動かす。 サンプル的な動きは Live Demo を見るのが良いと思う。
インターフェイスはこうなってるらしい。
// イベント設定。
$.hotkeys.add(KEY, OPTIONS, CALLBACK);
// イベント削除。
$.hotkey.remove(KEY, OPTIONS);
引数の中で、 OPTIONS はオプションで、 特に指定が無ければ省略出来るよ。 なので、一番簡単な使い方はこんな感じになる。
// "j"のkeydown(デフォルト)にイベントリスナーを設定。
$.hotkeys.add('j', function ()
{
alert('hit.');
});
// "j"のkeydown(デフォルト)のイベントリスナーを削除。
$.hotkeys.remove('j');
オプションは以下のようなものがある。
| キー | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| type | String | keydown | 補足するイベント |
| propagate | Boolean | false | イベントの伝達を制御 |
| disableInInput | Boolean | false | inputやtextareaのフォーカス時の処理を制御 |
| target | element/String | html | callbackのthisを指定 |
| checkParent | Boolean | true | OperaとSafariのバグ依存回避用? |
オプション指定する場合こんな感じ。
// "Ctrl+a"のkeyupにイベントリスナーを設定。
$.hotkeys.add('Ctrl+a',
{
target : 'div.select',
type : 'keyup'
}, function()
{
// クラスhigeをトグル。
$(this).toggleClass('hige');
});
// "Ctrl+a"のイベントリスナーを削除。
$.hotkeys.remove('Ctrl+a', {target: 'div.select'});
このオプションの中でも良く使うと思うのが、 type はまぁ良しとして、 disableInInput だと思う。 これ、物凄く便利っす。 こいつを true にしておくだけで、 input や textarea にフォーカスしてる時は処理をスルーしてくれる。 今回はフォームとは全く関係ない処理を書いてたので、 本当に助かった。
何となくですが、今回書いたものを晒してみたり。 jとkでh1〜h6を行ったり来たりするだけ。
(function ()
{
// hotkeysのオプションを定義。
var options = {
'type': 'keydown',
'disableInInput': true
}
// ポジションホルダー
var positions = [0];
// それぞれのヘッダの位置を取ってくる。
$('h1, h2, h3, h4, h5, h6').each(function ()
{
positions.push(this.offsetTop + 15);
});
// ソート。
positions.sort(function (a, b)
{
return a > b ? 1 : -1;
});
// 現在の位置を取得する関数を定義。
var getOffset = function ()
{
if ($.browser.msie)
return document.body.scrollTop || document.documentElement.scrollTop;
else
return window.pageYOffset;
}
// "j"にイベントリスナーを登録。
$.hotkeys.add('j', options, function ()
{
var offset = getOffset();
for (var i = 0; i < positions.length; i++)
{
if (offset < positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
// "k"にイベントリスナーを登録。
$.hotkeys.add('k', options, function ()
{
var offset = getOffset();
for (var i = positions.length; i >= 0; --i)
{
if (offset > positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
})();//END: lambda.
- Posted at:
- 2008/01/07 23:34:25
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2008/01/07/tried-using-js-hotkeys/trackback/
jQuery.ajaxメモ
久々に jQuery のソースを眺めたので自分用メモ。
jQuery.post とか jQuery.get を使うと、 エラーが発生した時(404とか)に全く何も起きない。 で、そこらへんをちゃんとしたい時は jQuery.ajax を使ってね。って事みたい。
Ajaxのステータス( jQuery の)がsuccess以外だと、 jQuery.handleError を呼び出すようになっていて、 そのなかでエラーハンドラがセットされていればコールする仕組みになってる。
// jquery.js@2342あたり。
// Make sure that the request was successful or notmodified
if ( status == "success" ) {
// もろもろな処理。
} else
// エラーハンドラをコール。
jQuery.handleError(s, xml, status);
handleError はこんな感じ。
// jquery.js@2424あたり。
handleError: function( s, xml, status, e ) {
// エラーハンドラがセットされていればコール。
if ( s.error ) s.error( xml, status, e );
// globalな設定ならajaxErrorをコール。
if ( s.global )
jQuery.event.trigger( "ajaxError", [xml, s, e] );
},
エラーをちゃんと処理したい時とかは、 こんな感じで設定してやると良いみたい。
$('a').click(function ()
{
var successCallback = function (response)
{
// やりたい処理を書く。
};
var errorCallback = function (xml, status, e)
{
// エラーハンドリングを書く。
// xml == XMLHttpRequestだよ。
};
// リクエストを投げる。
$.ajax({
'type': "POST",
'url': this.href,
'data': {'hoge': 'fuga', 'hige': 'moja'},
'success': successCallback,
'error': errorCallback
});
// 画面繊維をキャンセル。
return false;
});
jQuery.ajax は設定がたくさんあってメンドクサそうに見えるものの、 ちゃんとデフォルトが設定されているので、 必要な部分だけ上書きしてやれば良いので簡単。 しかも、デフォルトが気に入らなければ jQuery.ajaxSetup を使って デフォルトを上書きすることも出来るので、 簡単に自分用の設定に出来るよ。
- Posted at:
- 2007/12/08 22:30:28
- 4 Comments
- 1 TrackBack
- Tags:
- JavaScript
- jQuery
- Trackback:
- http://humming.via-kitchen.com/2007/12/08/jquery-ajax-memo/trackback/
JavaScript-XPathを触ってみたよ。
個人的に XPath がトレンドってのもあって、 JavaScript-XPath を使ってみたよ。
amachang さんの こちらのエントリー で jQuery のバインディングが公開された事を知って、 XPath for jQuery も使ってちょくちょく触ってみたけど、 全く意識する事無く使えて物凄くいい感じ。
ダウンロードはココからしてきたっす。
- JavaScript-XPath
- JavaScript-XPath - CodeRepos::Share - Trac
- XPath for jQuery
- JavaScript-XPath/bindings/jQuery - CodeRepos::Share - Trac
まだまだ大した XPath を書けないので、 キョーレツなテストとかは出来ないけど、 個人的には end() が併用出来るのがめちゃくちゃ嬉しい。 end() って jQuery の重要な機能の1つなので、 これが併用出来るかどうか?でかなり印象が変わってくる(と思う)。
これから常用プラグインとして使っていきそうな勢いなので、 気付いた事とかフィードバックしていけたら良いなぁ。 まずは lxml と JavaScript-XPath で XPath と仲良くならなくちゃね。
- Posted at:
- 2007/11/20 01:53:56
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- XPath
- Trackback:
- http://humming.via-kitchen.com/2007/11/20/tried-using-javascript-xpath/trackback/
stripe野良プラグインを修正
946 な方から色々指摘を受けて修正しました。
- CSSの指定からクラス名の指定にした。
- tableの場合の修正。
/**
* stripe.js
*/
jQuery.fn.extend({
stripe : function (o)
{
o = o || {};
var even = o.even || 'even';
var odd = o.odd || 'odd';
return this.each(function ()
{
switch (this.nodeName.toLowerCase())
{
case 'ul':
case 'ol':
jQuery(this).children('li:even')
.addClass(even)
.end().children('li:odd')
.addclass(odd);
break;
case 'table':
jQuery(this).children('tbody')
.children('tr:even')
.addClass(even)
.end().children('tr:odd')
.addClass(odd);
break;
default:
break;
}//END: switch.
});//END: each.
}//END: stripe.
});//END: jQuery.fn.extend.
しょせんは野良な訳ですがw
って思ってたら 946 な人の こんなエントリー が。 なんだ、プラグインじゃなくて良かったのか。
- Posted at:
- 2007/09/25 20:29:54
- 2 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2007/09/25/modified-jquery-stripe-nora-plugin/trackback/
jQueryで複数のボタンから1つのスクリプトへPOSTする
WEBプログラマー+WEBデザイナーなZARU日記 さんの コチラのエントリー より。
「 jQuery を使ってAjaxで複数のボタンから1つのスクリプトへPOSTする。」ってのを、 自分なりにちょっとやってみたよ。(X)HTMLの構成に左右されますが、こんな感じでいかがでしょう?
まずはHTMLはこんな感じのを用意。ちょっとやりやすく変えてます。
<div>
<input type="text" name="textarea1" id="textarrea1" />
<input type="hidden" name="id1" id="id1" />
<input type="button" value="post" />
</div>
<div>
<input type="text" name="textarea2" id="textarrea2" />
<input type="hidden" name="id2" id="id2" />
<input type="button" value="post" />
</div>
<div>
<input type="text" name="textarea3" id="textarrea3" />
<input type="hidden" name="id3" id="id3" />
<input type="button" value="post" />
</div>
で、 jQuery ではこんな感じ。
<script type="text/javascript">
//<![CDATA[
$(function ()
{
// divの中にあるtype="button"なinputにイベントを設定。
$('div input:button').click(function ()
{
// ボタンの親要素(div)をjQueryでラップ。
var $$ = $(this).parent('div');
// 必要な値を持ってくる。
var options = {
'textdata' : $$.children('input:text').val(),
'id' : $$.children('input:hidden').val()
}
// スクリプトへPOST。
$.post('post.php', options, function (data)
{
// 後処理とかする。
});
});
});
//]]>
</script>
とりあえずコレで動く(ハズ)。 けど、なんか汚いし手数が多い気がする。 divで括った意味もそんなに無くなってるしなぁ。
なので、divをformに変更してみる。
<form action="post.php" method="post">
<input type="text" name="textarea1" id="textarrea1" />
<input type="hidden" name="id1" id="id1" />
<input type="submit" value="post" />
</form>
<form action="post.php" method="post">
<input type="text" name="textarea2" id="textarrea2" />
<input type="hidden" name="id2" id="id2" />
<input type="submit" value="post" />
</form>
<form action="post.php" method="post">
<input type="text" name="textarea3" id="textarrea3" />
<input type="hidden" name="id3" id="id3" />
<input type="submit" value="post" />
</form>
これだと jQuery ではこんな感じ。
<script type="text/javascript">
//<![CDATA[
$(function ()
{
$('form').submit(function ()
{
// サブミットされたformを軸にする。
$.post(this.action,
$('input:text, input:hidden', this).serialize(),
function (data)
{
// 後処理。
});
// 実際のsubmit処理をキャンセル。
return false;
});
});
//]]>
</script>
かなりすっきりした気がする。 実際は他との衝突を避ける為に、もうちょっと手を加えなくちゃダメだろうけど。
WEBプログラマー+WEBデザイナーなZARU日記 さんの趣旨とかけ離れてしまっていたらすいません。
- Posted at:
- 2007/09/24 16:43:54
- 2 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- Trackback:
- http://humming.via-kitchen.com/2007/09/24/post-from-plural-to-one-script-on-jquery/trackback/