zen-codingにswfobjectなど微妙によく使うものを追加する
2010 年 3 月 13 日 by 正宗楽しいですね！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 = '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>\n' + '<script type="text/javascript">\n' + '(function(){\n' + ' var swfDirectory = "./swf/";\n' + ' var swfFileName = "index.swf";\n' + ' var targetId = "flashcontent";\n' + ' var width = "600";\n' + ' var height = "400";\n' + ' var version = "9.0.0";\n' + ' var flashvars = {};\n' + ' flashvars.varsDirectory = "/";\n' + ' var params = {};\n' + ' params.menu = "false";\n' + ' params.quality = "best";\n' + ' params.scale = "noscale";//showAll\n' + ' params.salign = "tl";\n' + ' //params.wmode = "opaque";//transparent\n' + ' params.swliveconnect = "true";\n' + ' params.allowfullscreen = "true";\n' + ' params.allowscriptaccess = "always";\n' + ' params.allownetworking = "all";\n' + ' var attributes = {};\n' + ' attributes.id = "swfID";\n' + ' attributes.name = "swfID";\n' + ' attributes.align = "middle";\n' + ' swfobject.embedSWF(swfDirectory+swfFileName, targetId, width, height, version, swfDirectory+"expressInstall.swf", flashvars, params, attributes);\n' + '})();\n' + '</script>\n';
僕が参考にしたリンク先では、最終的にmy_zen_setting.jsという独自ファイルで管理する前提のためファイルの途中の行に書き足していっていましたが、どっちが良い悪いというわけでもないですが僕の場合はzen_setting.jsファイルを直接触る前提のため、後から書き足していったところがわかりやすいので最後に書き足す方法をとりました。つまりもともとあったコードの中間には一切手を加えず、とにかく追加していくやり方ですね。
これでHTMLファイル上で
swfobject
と書いて最後尾でCtrl+,（コントロール＋カンマ）すればSWFObjectのややこしい記述が一発でずらずらと出てきます！WOOO！！
せっかくなので他にも追加してみる
GoogleAnalyticsのコードなんかも追加してみましょう。
zen_settings.html.snippets.googleanalytics = '<script type="text/javascript">\n' + 'var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");\n' + 'document.write(unescape("%3Cscript src=\'" + gaJsHost + "google-analytics.com/ga.js\' type=\'text/javascript\'%3E%3C/script%3E"));\n' + '</script>\n' + '<script type="text/javascript">\n' + 'try{\n' + 'var pageTracker = _gat._getTracker("UA-|xxxxxx-x");\n' + 'pageTracker._trackPageview();\n' + '} catch(err) {}\n' + '</script>\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 = '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>\n' + '<script type="text/javascript">\n' + '(function(){\n' + ' var swfDirectory = "./swf/";\n' + ' var swfFileName = "index.swf";\n' + ' var targetId = "flashcontent";\n' + ' var width = "600";\n' + ' var height = "400";\n' + ' var version = "9.0.0";\n' + ' var flashvars = {};\n' + ' flashvars.varsDirectory = "/";\n' + ' var params = {};\n' + ' params.menu = "false";\n' + ' params.quality = "best";\n' + ' params.scale = "noscale";//showAll\n' + ' params.salign = "tl";\n' + ' //params.wmode = "opaque";//transparent\n' + ' params.swliveconnect = "true";\n' + ' params.allowfullscreen = "true";\n' + ' params.allowscriptaccess = "always";\n' + ' params.allownetworking = "all";\n' + ' var attributes = {};\n' + ' attributes.id = "swfID";\n' + ' attributes.name = "swfID";\n' + ' attributes.align = "middle";\n' + ' swfobject.embedSWF(swfDirectory+swfFileName, targetId, width, height, version, swfDirectory+"expressInstall.swf", flashvars, params, attributes);\n' + '})();\n' + '</script>\n'; zen_settings.html.snippets.googleanalytics = '<script type="text/javascript">\n' + 'var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");\n' + 'document.write(unescape("%3Cscript src=\'" + gaJsHost + "google-analytics.com/ga.js\' type=\'text/javascript\'%3E%3C/script%3E"));\n' + '</script>\n' + '<script type="text/javascript">\n' + 'try{\n' + 'var pageTracker = _gat._getTracker("UA-|xxxxxx-x");\n' + 'pageTracker._trackPageview();\n' + '} catch(err) {}\n' + '</script>\n'; zen_settings.css.snippets.clearfix = ".clearfix { /zoom : 1; }\n" + ".clearfix:after { content: ''; display: block; clear: both; }\n"
ようはいままでの記事ぜんぶすっ飛ばして読んでない人も、このコードをまるごとコピーしてzen_setting.jsの最後に貼り付けておけばいいって事です！
みなさんも「こんなのもスニペットにしてみたよ」ってのがあれば是非おしえてくださいませ。
では良いzen-codingを！ハラショー！
タグ: DreamWeaver, swf, swfobject, Tips, zen-coding, まとめ, 便利, 覚書