宇都宮ウエブ制作所 » DreamWeaver http://utweb.jp/blog 宇都宮さんっていう、夫婦でやってるウエブサイト制作請負の大阪下町家内製手工業業務日誌 Thu, 02 Feb 2012 14:35:15 +0000 http://wordpress.org/?v=2.8.6 ja hourly 1 zen-codingにswfobjectなど微妙によく使うものを追加する http://utweb.jp/blog/archives/671 http://utweb.jp/blog/archives/671#comments Sat, 13 Mar 2010 05:42:07 +0000 正宗 http://utweb.jp/blog/?p=671 (div#header>h1+ul.globalNavigation>li.navi$*6>a)+(div#content>div#main+div#sub)+(di [...]]]> 楽しいですね！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を！ハラショー！

]]> http://utweb.jp/blog/archives/671/feed 0 DreamWeaverテンプレート機能のオプション領域などでグローバルナビゲーションを便利にする http://utweb.jp/blog/archives/585 http://utweb.jp/blog/archives/585#comments Mon, 25 Jan 2010 17:13:14 +0000 正宗 http://utweb.jp/blog/?p=585 年末進行のせいにして年賀状も書いてない男。正宗です。さっきやっと寒中見舞いが刷り上がりました。

DreamWeaverのテンプレート機能。便利ですよね。うまくつかうとライブラリ機能と組み合わせる事によって大規模なサイト制作におけるケアレスミスを大幅に減らすことが出来ます。
今回はそのテンプレート機能でグローバルメニューをどう作ろうか考えたので、現時点で見つけた一番スマートではないかと思えるやり方を紹介したいと思います。

まずは僕が一生懸命作ったDreamWeaverのテンプレートを見て下さい。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- TemplateBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- TemplateEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- TemplateBeginEditable name="head" -->
  10.  
  11. <!-- TemplateEndEditable -->
  12. </head>
  13. <body>
  14. <div id="page" class="top">
  15. <div id="header">
  16. <h1><a href="/">マサムネット</a></h1>
  17. <ul id="globalNavigation">
  18. <li><a href="/profile/">プロフィール</a></li>
  19. <li><a href="/gallery/">ギャラリー</a></li>
  20. <li><a href="/contact/">お問い合わせ</a></li>
  21. <li><a href="/link/">リンク</a></li>
  22. </ul>
  23. </div>
  24. <div id="contents" class="top">
  25. <!-- TemplateBeginEditable name="maincontents" -->
  26. ここにコンテンツが入ります。
  27. <!-- TemplateEndEditable -->
  28. </div>
  29. <div id="footer">
  30. コピーライト
  31. </div>
  32. </div>
  33.  
  34. </body>
  35. </html>

こうしたテンプレートを作っておく場合、例えば「/profile/」以下のファイルには全部

 
<li class="self"><a href="/profile/">プロフィール</a></li>
 

こんな感じで他のリストとは違ったクラス名を付けたくなるかもしれません。

また、/profile/index.htmlページは、メニューからプロフィールのリンクを押しても自身のページに飛ぶだけなのでアンカーを付けたくない、などといったようにページによってメニューが細かく変化する場合が出てきます。

グローバルメニューは編集可能領域にしてしまうとか、それだとテンプレート機能の便利さがスポイルされてしまうのでライブラリと組み合わせて運用するとか、いろいろ試してみたんですがどれも一長一短あって困っていましたが、面白いものを見つけました。

それが「編集可能オプション領域」と「オプション領域」です。
それぞれテンプレート編集画面から「挿入」→「テンプレートオブジェクト」から挿入できます。
普段よく使う「編集可能領域」と一緒の場所にあるので、これは何なのか不思議に思った方も多いと思います。
ところがこれ、実際に使ってみようと思っても、変な画面が出るだけでナニが何やらわけがわからないんですよね。

じつはこれ、JavaScriptの書式でテンプレートを動的に変化させることができるものみたいなんです。

編集可能オプション領域

まずは「編集可能オプション領域」の説明から。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- TemplateBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- TemplateEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- TemplateBeginEditable name="head" -->
  10.  
  11. <!-- TemplateEndEditable -->
  12.  
  13. <!-- TemplateParam name="profile_class" type="text" value="menu" -->
  14. <!-- TemplateParam name="gallery_class" type="text" value="menu" -->
  15. <!-- TemplateParam name="contact_class" type="text" value="menu" -->
  16. <!-- TemplateParam name="link_class" type="text" value="menu" -->
  17. </head>
  18. <body>
  19. <div id="page" class="top">
  20. <div id="header">
  21. <h1><a href="/">マサムネット</a></h1>
  22. <ul id="globalNavigation">
  23. <li class="@@(profile_class)@@"><a href="/profile/">プロフィール</a></li>
  24. <li class="@@(gallery_class)@@"><a href="/gallery/">ギャラリー</a></li>
  25. <li class="@@(contact_class)@@"><a href="/contact/">お問い合わせ</a></li>
  26. <li class="@@(link_class)@@"><a href="/link/">リンク</a></li>
  27. </ul>
  28. </div>
  29. <div id="contents" class="top">
  30. <!-- TemplateBeginEditable name="maincontents" -->
  31. ここにコンテンツが入ります。
  32. <!-- TemplateEndEditable -->
  33. </div>
  34. <div id="footer">
  35. コピーライト
  36. </div>
  37. </div>
  38.  
  39. </body>
  40. </html>

ややこしい記述が増えてきたので順番に見て行きます。
先ずは１３行目〜１６行目

 
<!-- TemplateParam name="profile_class" type="text" value="menu" -->
<!-- TemplateParam name="gallery_class" type="text" value="menu" -->
<!-- TemplateParam name="contact_class" type="text" value="menu" -->
<!-- TemplateParam name="link_class" type="text" value="menu" -->
 

これはDreamWeaverのテンプレート用の記述方式で、例えば１３行目はprofile_classという変数の中に"menu"という値がセットすることを意味します。１４行目、１５行目、１６行目も全く同じで、それぞれgallery_class、contact_class、link_classという変数に"menu"という値をセットしています。
そんな変数なんて変なものセットしてどこで使うんだYO!!と思いたいところですが、次に２４行目〜２７行目を見てみます。

 
<li class="@@(profile_class)@@"><a href="/profile/">プロフィール</a></li>
<li class="@@(gallery_class)@@"><a href="/gallery/">ギャラリー</a></li>
<li class="@@(contact_class)@@"><a href="/contact/">お問い合わせ</a></li>
<li class="@@(link_class)@@"><a href="/link/">リンク</a></li>
 

「class="@@(profile_class)@@"」なんていうオットロシイ文字が出てきましたが、落ち着いてみるとこれ、ただのli タグに追加されたクラス属性です。

class="何々”の中がちょっと変わった書き方になってるので複雑に見えますが、
@@(　　　)@@の中はさっき１３行目〜１６行目で設定した変数が入っています。
先ほどセットした変数をここで実際につかっている、というイメージですね。

テンプレートをこのようにしておくと、このテンプレートからページを作った時に

 
<li class="menu"><a href="/profile/">プロフィール</a></li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

こんな感じで作成してくれる、っていうのが「編集可能オプション領域」になります。

ここから当初の目的である「どうやってページごとの特定のメニューだけクラス名を変えるのか？」を実際に試してみます。

テンプレート機能を使おうという記事なので、ここまで読んでる方はその前段階である、DreamWeaverのサイト定義はもう済ませてあると前提で進めて行きます。
サイト定義がよくわからない場合は「DreamWeaver サイト定義」などの語句でヘルプやWEB上の情報を検索してみて下さい。

ファイルの新規作成で「test.html」などのHTMLファイルを作成して開いておいて、メニューの「修正」→「テンプレート」→「テンプレートをページに適用」でHTMLファイルをテンプレートと関連づけます。
テンプレートをページに適用

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <!-- InstanceBeginEditable name="doctitle" -->
  6. <title>マサムネット</title>
  7. <!-- InstanceEndEditable -->
  8. <link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
  9. <!-- InstanceBeginEditable name="head" -->
  10.  
  11. <!-- InstanceEndEditable -->
  12.  
  13. <!-- InstanceParam name="profile_class" type="text" value="menu" -->
  14. <!-- InstanceParam name="gallery_class" type="text" value="menu" -->
  15. <!-- InstanceParam name="contact_class" type="text" value="menu" -->
  16. <!-- InstanceParam name="link_class" type="text" value="menu" -->
  17. </head>
  18. <body>
  19. <div id="page" class="top">
  20. <div id="header">
  21. <h1><a href="/">マサムネット</a></h1>
  22. <ul id="globalNavigation">
  23. <li class="menu"><a href="/profile/">プロフィール</a></li>
  24. <li class="menu"><a href="/gallery/">ギャラリー</a></li>
  25. <li class="menu"><a href="/contact/">お問い合わせ</a></li>
  26. <li class="menu"><a href="/link/">リンク</a></li>
  27. </ul>
  28. </div>
  29. <div id="contents" class="top">
  30. <!-- InstanceBeginEditable name="maincontents" -->
  31. ここにコンテンツが入ります。
  32. <!-- InstanceEndEditable -->
  33. </div>
  34. <div id="footer">
  35. コピーライト
  36. </div>
  37. </div>
  38.  
  39. </body>
  40. <!-- InstanceEnd --></html>

test.htmlはこんな感じになると思います。

ここでメニューから「修正」→「テンプレートプロパティ」を選択します。
テンプレートプロパティをえらぶ！

さきほど苦労してテンプレートで作った変数がずらっと並んでいると思うので、そこからうまく「profile_class」という変数を見つけて、中身の「menu」を「self」と書き換えて下さい。
きみはうまくみつけられるか！？

お見事！グローバルナビゲーション部分のリストが次のように変わったかと思います。

 
<li class="self"><a href="/profile/">プロフィール</a></li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

オプション領域

次に「オプション領域」を試してみたいと思います。
これは何かと言うと、テンプレートの中に、オプションとして「付けるか付けないか」をページごとに決められる部分を作る機能です。

（一個前にやったtest.htmlではなく）先ほどのテンプレートに戻って、テンプレート変数を増やしてみます。

<!-- TemplateParam name="profile_class" type="text" value="menu" -->
<!-- TemplateParam name="gallery_class" type="text" value="menu" -->
<!-- TemplateParam name="contact_class" type="text" value="menu" -->
<!-- TemplateParam name="link_class" type="text" value="menu" -->
 
<!-- TemplateParam name="profile_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="gallery_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="contact_anchor" type="boolean" value="true" -->
<!-- TemplateParam name="link_anchor" type="boolean" value="true" -->

追加しているのは下４行目です。上４行と比べて、今度は
type="boolean"
となっています。

プログラムに慣れた方で勘の良い方はこれで理解したかと思いますが、「オプション領域」と「編集可能オプション領域」の違いは、変数がbooleanかそうでないかの違いだけです。

なので先ほどの「編集可能オプション領域」と同じように、こんども変数のセットを行ったら、次はその変数を実際に使う部分を作っていきます。

 
<li class="@@(profile_class)@@">@@( (profile_anchor) ? '<a href="/profile/">プロフィール</a>' : 'プロフィール' )@@</li>
<li class="@@(gallery_class)@@">@@( (gallery_anchor) ? '<a href="/gallery/">ギャラリー</a>' : 'ギャラリー' )@@</li>
<li class="@@(contact_class)@@">@@( (contact_anchor) ? '<a href="/contact/">お問い合わせ</a>' : 'お問い合わせ' )@@</li>
<li class="@@(link_class)@@">@@( (link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク' )@@</li>
 

なにやら@@ばっかりで複雑になったようですが、落ち着いて下さい。

実は@@(　　　)@@この中にはJavaScriptが書けるんです。
なので例えば

@@( (link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク' )@@

こんなのも@@(　　　)@@の中だけに注目してみると

(link_anchor) ? '<a href="/link/">リンク</a>' : 'リンク'

こうなります。

こうしてみると、オプション領域の中はただの二項演算子（if 〜 elseのかっこいいやつ）で書けるということになります。

テンプレートを編集したら、test.htmlに戻ってみましょう。
さっき作った変数profile_ancher
さっき作ったばかりの変数「profile_anchor」を選択して下の「profile_anchorを表示」のチェックを外して下さい。

 
<li class="self">プロフィール</li>
<li class="menu"><a href="/gallery/">ギャラリー</a></li>
<li class="menu"><a href="/contact/">お問い合わせ</a></li>
<li class="menu"><a href="/link/">リンク</a></li>
 

こんな感じで、プロフィールだけアンカーが無いリストになったと思います。

まとめ

実は@@(　　　)@@とかJavascriptなんてものを使わなくても、最初からテンプレート編集画面で「挿入」→「テンプレートオブジェクト」から「編集可能オプション領域」や「オプション領域」を選ぶと、何かUIが現れて設定できるのですが、そっちを覚えるよりは僕はJavascriptのほうが馴染みがあるのでこっちの方法を紹介しました。
とにかくテンプレート機能が見違えるくらい柔軟かつ強力になる機能には間違いないので、興味がある方でJavascriptよりはUIからの設定に自信のある方はそちらを試してみても良いと思います！

]]> http://utweb.jp/blog/archives/585/feed 0