宇都宮ウエブ制作所 » 覚書

zen-codingにswfobjectなど微妙によく使うものを追加する

正宗 — Sat, 13 Mar 2010 05:42:07 +0000

楽しいですね！zen-coding。

html:4t>(div#header>h1+ul.globalNavigation>li.navi$*6>a)+(div#content>div#main+div#sub)+(div#footer>ul.globalNavigation>li.navi$*6>a)

こんなんが一行で書けてしまうので、ついつい仕事の本分を忘れて「いかにzen-codingで済ますか」ばかり興味が行っちゃって、大量にある面倒臭いコーディングもパズルを解くかのように楽しみながら作業できちゃいます。

せっかくなのでコーディングしてたら絶対出てくる他のいろいろと面倒なコードもzen-codingにまかせられないか、その方法を探って参りました。

今や説明の必要もないくらい、Flashを埋め込む際に定番となったSWFObject。
よく使うんだけど書き方を微妙に覚えて無くて、毎回どっかのサイトや過去の案件からコピペしてきてファイル名やサイズなんかを書き直してる、って方も多いと思います。
せっかくzen-codingを使うのだから、

swfobject

と書けば一発でSWFObjectの記述を書き出すようにしたらいいですね！

参考にしたのはこちらのページ
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法
もはや説明の必要もないくらいリンク先のページで非常にわかりやすく丁寧に解説されているので、これに習ってzen-codingにswdobjectの記述を追加するようカスタマイズしていきましょう。

zen_setting.jsを探す

僕の場合はWindowsVistaのDreamWeaverにzen-codingをインストールしましたので
C:\Users\＜Windowsのユーザー名＞\AppData\Roaming\Adobe\Dreamweaver CS4\ja_JP\Configuration\Commands\ZenCoding
ここにzen_setting.jsはありました。
Macだと
/Users/＜Macのユーザー名＞/Library/Application Support/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCodingです。
環境によって違うと思いますのでまずはzen_setting.jsを見つけて下さい。

書き足す

ファイル名を見てわかるように、中身はjavascriptになっています。
javascriptになじみのある方は、もうこの時点で書き足す方法もわかったのではないでしょうか。
このファイルの中身はzen_settingsというオブジェクトの固まりが書かれてあります。
javascriptが苦手な方はこの時点で頭が痛いかも知れませんが、最後にコピペだけでカスタマイズできるようにしておきましたんで、もう少しおつきあい下さいね。

ほいで、このzen_settingsというオブジェクトの固まりをざーっと読んでいくと、どうやらその中にはsccとかhtmlっていうこれまた固まりがあって、さらにその中がsnippetsとかabbreviationsとかいう名前の固まりが入っている、みたいな形になっています。
ちなみにzen_setting.jsの3行目を読むと、このコードを書いた人の名前はセルゲイさんのようです。ハラショー！セルゲイ！！

なので、このzen_setting.jsの最後の最後にこういう形で追加してやればいいです。
最後の最後というのは、700何十行目かに

};

で終わってると思うんですが、その後に改行とかして新しく追加していけばいいってことです。

zen_settings.html.snippets.swfobject =	'\n' +
					'\n';

僕が参考にしたリンク先では、最終的にmy_zen_setting.jsという独自ファイルで管理する前提のためファイルの途中の行に書き足していっていましたが、どっちが良い悪いというわけでもないですが僕の場合はzen_setting.jsファイルを直接触る前提のため、後から書き足していったところがわかりやすいので最後に書き足す方法をとりました。つまりもともとあったコードの中間には一切手を加えず、とにかく追加していくやり方ですね。

これでHTMLファイル上で

swfobject

と書いて最後尾でCtrl+,（コントロール＋カンマ）すればSWFObjectのややこしい記述が一発でずらずらと出てきます！WOOO！！

せっかくなので他にも追加してみる

GoogleAnalyticsのコードなんかも追加してみましょう。

zen_settings.html.snippets.googleanalytics = 	'\n' +
						'\n';

CSSのclearfixのコードなんかも
いまどき ? いまさら ? clear fix のコード
こちらを参考に書いてみました。

zen_settings.css.snippets.clearfix =	".clearfix { /zoom : 1; }\n" +
					".clearfix:after { content: ''; display: block; clear: both; }\n"

書き方のコツがわかったら、ほかにもどんどんと自分好みのzen-codingができそうです。

コードをまとめてみた

今回紹介した3つの追加項目をまとめときました。

/**
 *	added 2010/03/13
 *	http://utweb.jp/
 *	Masamune Utsunomiya
 **/
zen_settings.html.snippets.swfobject =	'\n' +
					'\n';
zen_settings.html.snippets.googleanalytics = 	'\n' +
						'\n';
zen_settings.css.snippets.clearfix =	".clearfix { /zoom : 1; }\n" +
					".clearfix:after { content: ''; display: block; clear: both; }\n"

ようはいままでの記事ぜんぶすっ飛ばして読んでない人も、このコードをまるごとコピーしてzen_setting.jsの最後に貼り付けておけばいいって事です！

みなさんも「こんなのもスニペットにしてみたよ」ってのがあれば是非おしえてくださいませ。
では良いzen-codingを！ハラショー！

ActionScriptイベントリスナの外にある変数を使いたい

正宗 — Thu, 11 Feb 2010 02:55:10 +0000

すいません。wonferfl本まだ買っていません。今すぐ読みたい！正宗です。
今回は僕がいつも忘れてしまうことを備忘録がわりに書いておきます。

まずはやりたいことは次のようなこと。

package {
    import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
    public class FlashTest extends Sprite {
        public function FlashTest() {
            var tf:TextField = new TextField;
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.text = "ここに数字が表示されます。";
			addChild(tf);
			//直径
			var radius:Number = 10.0;
			//横の間隔
			var marginWidth:Number = 5.0;
			//縦の間隔
			var marginHeight:Number = 15.0;
			//ボタンの数
			var l:int = 5;
			for (var i:int = 0; i < l; i++)
			{
				var sp:Sprite = createCircle(radius);
				sp.buttonMode = true;
				sp.x = ((sp.width + marginWidth) * i) + radius;
				sp.y = tf.height + marginHeight;
				addChild(sp);
				//このコードではどのボタンを押してもテキストフィールドには5が表示される
				sp.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
						tf.text = "このボタンナンバーは　" + i + "です。";
				});
			}
			//なぜならfor文を抜けたこの時点での変数iの中には5が入っているから。
			//（ボタンが押されてイベントリスナーが処理を始めるのは、時間的にみて
			//　このコードよりももっと後なので、その時の変数iを探しにいってしまう）
        }
		private function createCircle(radius:Number = 10.0, color:uint = 0xFF0000):Sprite {
			var sp:Sprite = new Sprite();
			var g:Graphics = sp.graphics;
			g.beginFill(color);
			g.drawCircle(0, 0, radius);
			g.endFill();
			return sp;
		}
    }
}

実験結果はこう。

イベントリスナの外にある変数を匿名関数で使いたい - wonderfl build flash online

どのボタンを押しても５と表示されてしまいます。
僕が出してる解決方法は次の二通り。場合によって使い分けてます。

方法その1：イベントリスナに引数を渡してやる

方法その1：イベントリスナに引数を渡してやる - wonderfl build flash online

// forked from hacker_ij9oiq_p's flash on 2010-2-11
package {
    import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
    public class FlashTest extends Sprite {
		private var _tf:TextField;
        public function FlashTest() {
            _tf = new TextField;
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.text = "ここに数字が表示されます。";
			addChild(_tf);
			//直径
			var radius:Number = 10.0;
			//横の間隔
			var marginWidth:Number = 5.0;
			//縦の間隔
			var marginHeight:Number = 15.0;
			//ボタンの数
			var l:int = 5;
			for (var i:int = 0; i < l; i++)
			{
				var sp:Sprite = createCircle(radius);
				sp.buttonMode = true;
				sp.x = ((sp.width + marginWidth) * i) + radius;
				sp.y = _tf.height + marginHeight;
				addChild(sp);
				//方法その1
				//イベントリスナーに引数を渡してしまう
				sp.addEventListener(MouseEvent.CLICK, onClickHandler(i));
				//ふつうはこれでいいんだけど、メソッドを増やしたくない夜もある…
			}
        }
 
		private function onClickHandler(idNumber:int):Function {
				return function(e:MouseEvent):void {
					_tf.text = "このボタンナンバーは　" + idNumber + "です。";
				}
		}
 
		private function createCircle(radius:Number = 10.0, color:uint = 0xFF0000):Sprite {
			var sp:Sprite = new Sprite();
			var g:Graphics = sp.graphics;
			g.beginFill(color);
			g.drawCircle(0, 0, radius);
			g.endFill();
			return sp;
		}
    }
}

方法その2：クロージャーに閉じ込めてしまう

方法その2：クロージャーに閉じ込めてしまう - wonderfl build flash online

// forked from hacker_ij9oiq_p's flash on 2010-2-11
package {
    import flash.display.Sprite;
	import flash.display.Graphics;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
    public class FlashTest extends Sprite {
        public function FlashTest() {
            var tf:TextField = new TextField;
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.text = "ここに数字が表示されます。";
			addChild(tf);
			//直径
			var radius:Number = 10.0;
			//横の間隔
			var marginWidth:Number = 5.0;
			//縦の間隔
			var marginHeight:Number = 15.0;
			//ボタンの数
			var l:int = 5;
			for (var i:int = 0; i < l; i++)
			{
				var sp:Sprite = createCircle(radius);
				sp.buttonMode = true;
				sp.x = ((sp.width + marginWidth) * i) + radius;
				sp.y = tf.height + marginHeight;
				addChild(sp);
				//方法その2
				//クロージャーに閉じ込めてしまう
				(function():void {
					var idNumber:int = i;
					sp.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
							tf.text = "このボタンナンバーは　" + idNumber + "です。";
					});
				})();
			}
			/*
			 * 参照ってややこしいですね。
			 * なぜこう動くのか、僕もきちんと説明できる自信がない…
			 */
        }
		private function createCircle(radius:Number = 10.0, color:uint = 0xFF0000):Sprite {
			var sp:Sprite = new Sprite();
			var g:Graphics = sp.graphics;
			g.beginFill(color);
			g.drawCircle(0, 0, radius);
			g.endFill();
			return sp;
		}
    }
}

いや～便利便利。
僕もまだまだ勉強中の身ですので、他にもこういうやり方もあるよ！って方法あれば是非是非教えて下さい！