jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
Processing のトンネルを AS3 で書いてみた - てっく煮ブログ
as昨日に続き、Processing 本体に付属しているサンプルで面白かった Tunnel を ActionScript 3 に移植してみました。完成品はこちら。重めなのでクリックすると始まりますよ。仕組みぐるぐる吸い込まれるように見えますが、「トンネルの中をまっすぐ進むアニメーション」と「絵全体の平行移動」を組み合わせです。平行移動は単にずらすだけなので、「トンネルの中を進むアニメーション」について説明していきましょう。トンネルの壁面は red_smoke.jpg という上下左右がつながったテクスチャ画像を貼り付けてます。そこで気になるのが、テクスチャを貼り付けるときの計算式。実はこのような式で計算しています。まずは depth。lx,y が中心からの距離、ratio が定数（ここでは32）です。つまり、中心からの距離に応じて、縦方向の座標が決まります。続いて angle。こちらは、中心
AS で別ドメインの画像を読み込むときの注意点 - てっく煮ブログ
asActionScript を使って 外部ドメインの画像を読み込むときの注意点を調べてみた。AS3 で調べたけど、AS2 でもセキュリティの機構自体は同じ（だと思う）。読み込み方Loader クラスを使えば外部ドメインの画像をロードできる。 var loader:Loader = new Loader(); var req:URLRequest = new URLRequest("http://www.example.com/sample.gif"); loader.load(req); addChild(loader); 画像形式は PNG、GIF、JPEG のみ。BMP はダメ。アニメーション GIF の場合は１フレーム目しか描画されない。読み込み完了したことを知るためには、contentLoaderInfo プロパティの complete イベントを監視すればよい。ファイルが存在し
フォント情報を元に歪めて描画：ユメのカタチ - てっく煮ブログ
as埋め込みフォントの情報を swfassist で取得するから先へ進んで、フォントのベクタ情報を加工して遊んでみよう。(追記) 手元の Firefox だと「bytes が読み取れない」と例外が出る。ブラウザや Player のバージョンによっては動かない！？ bytes は Flash Player 9.0.115.0 以降にしかないので、それ以前のバージョンでは動かない…ということだ。swfassist には描画の仕方を定義する FlashGraphics クラスがある。これを拡張して、FuzzyFlashGraphics というクラスを作成してみた。与えられた座標から、ずらして描画するためのクラスだ。さっそく例。ランダムにずらしつつ、ずらす幅を時間ごとに変化させてみた。FlashGraphics オブジェクトのコールバック関数 f で歪め方を定義する。そこそこ汎用的に遊べるんじゃな
埋め込みフォントの情報を swfassist で取得する - てっく煮ブログ
as先日の Shibuya.js のあとに、BeInteractive! の yossy さんが「swfassist を使ってくれる人が少なくて悲しい」みたいなことを言ってたので、埋め込みフォントのベクタ情報を swfassist を使って取得してみた。SWF のバイト情報は loaderInfo.bytes に入っている。そこで、フォントを埋め込んだ SWF を swfassist に食わしてやると、フォントのベクタ情報が取れる。このベクタ情報を元に ShapeOutlineDrawer を使って描画してる。(追記) ただし、loaderInfo.bytes は Flash Player 9.0.115 以降にしか含まれていないので、それ以前のバージョンだとエラーになる。ShapeOutlineDrawer には graphics.lineStyle(1,0x000000); という行が
AS3 で埋め込みフォントを使うテクニック - てっく煮ブログ
as埋め込みフォントを使う場合のちょっとしたTipsを３つ紹介しておく。1. 何も考えずにフォントを埋め込む方法フォントを埋め込むには、Embed メタタグを利用する。 package { import flash.display.Sprite; import flash.text.TextField; public class EmbedFontTest extends Sprite { [Embed(source='アニトＭ-教漢.TTF', fontName='anito')] private var font:Class; public function EmbedFontTest(){ stage.align = "TL"; stage.scaleMode = "noScale"; var textField:TextField = new TextField(); textFi
E4X の変数展開 深追い (1) - てっく煮ブログ
javascript, asE4X の変数展開が E4Xで変数展開、テンプレート - 素人がプログラミングを勉強するブログ で取り上げられていた。 var foo=123; <>変数fooは{foo}です。.toString(); // "変数fooは123です。" ほー。仕様書ではE4XのリテラルXMLでの式評価 - 0x廃棄階層 - 統治局 によると、仕様書には次のようなコードがあるらしい。 var tagname = "name"; var attributename = "id"; var attributevalue = 5; var content = "Fred"; var x = {tagname} {attributename}={attributevalue}>{content}{tagname}>; // Fred タグ名にも属性名にも属性の値にもタグの中身にも使える
addEventListener のハンドラに trace - てっく煮ブログ
asちょっと便利だと思った Tips。そっか。イベントの発生内容見るのって直に trace 渡して問題ないんだ。 addEventListener( Event.COMPLETE, trace ); わざわざ匿名関数作ってた。 Twitter / taka:nium: そっか。イベントの発生内容見るのって直に trace ...確かにこれは楽だ。trace は引数をいくつでも取れるから、こういう技が使えるのか！例えば、 stage.addEventListener("click", trace); とすると [MouseEvent type="click" bubbles=true cancelable=false eventPhase=1 localX=74.4 localY=16.45 stageX=74.4 stageY=16.45 relatedObject=null ctrlKe
ActionScript 的超絶技巧発表会に参加してきました - てっく煮ブログ
asTwitter 経由で企画された「ActionScript 的超絶技巧発表会」に参加してきました。日帰りで東京まで行ってきましたが、往復交通費以上に得るものは多かったです。参加条件が「発表する」だったため、ほんとにレベルが高かったです。かなりの自信作を持っていったつもりだったのに色あせてしまいました。ひとまず、勉強会まとめエントリとして投下しておきます。半分感想。HTML/JavaScript から SWF をいじる話(FlashBug) by muraken さんJavaScript 経由で MovieClip を作成したり、パラメータをいじったり、中の情報を覗いたりする。AS2。→関連エントリ作りこんでいけば、Flash 版デバッグ環境としても便利なものになりそう。Flash デバッグ環境って、あんまりいいのないですしね。クロスブラウザな Canvas として公開すればかなりヒット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
