1. 指カーソル
   ロールオーバー時のデザインの上に乗せると、説明しやすい。
   

   指カーソル

2. ちっこい矢印
   自分の気に入った大きさ＆角度のものをイン。サブ扱いのメニュー（例：プライバシーポリシーなど）に使用。
   

   ちっこい矢印

3. 細ライン
   タテを区切る罫線のほか、hr的な使用することも。ハイライトをつけて凹みっぽくみせてます。これを描くのと、ライブラリから探してドラッグ＆ドロップするのとどちらが早いかというと、すごく微妙なライン・・・。汎用性が欲しいこのパーツについては後述！
   
   

   細ライン

4. マルCマーク
   みんなの必須パーツ、著作権を表わすマルCマークです。個人的に(c)とするのがなんとなく好きじゃないので、円とCのアンチエイリアス具合が気に入った物をイン。
   

   マルCマーク

5. ダミーです
   アタリで入れてる画像やバナーの上に乗せてます。デザインの邪魔せずさりげなく主張してほしい一品。
   

   ダミーです

6. FLVPlayback
   flashで動画を見せたいページに。うちでは「FLVPlayback使いますよー」ということが多いので、共有ライブラリに入れちゃってます。9スライス＆グレースケールにすると、汎用性もばっちり（後述）
   

   FLVPlayback

ささっと作るつもりがエッジやアンチエイリアス具合にこだわり始めると、時間とられちゃうんですよね。
地味だけど、これらを毎回作ってた時間をトータルで考えるときっと恐ろしいことに・・・！

共有ライブラリのありがた〜いメリットというと、
たとえば汎用性がほしい「細ライン」なんかでも、基本になるベースを共有ライブラリに入れとくと、カンバスに取り込んだ時点でドキュメントライブラリにコピーされるので、気にせず好きにいじりまくれちゃいます。
「FLVPlayback」は9スライスにすることで横幅自由に、グレースケールで保存することで彩色しやすくしています。

他にも、音量アイコンや虫眼鏡カーソルなど、
自分のお気に入りのよく使うアイテムを、共有ライブラリに入れとくとスマートかもです。

追記：今後加筆していくかも。

机の上も絶賛散乱中、典型的ダメなデザイナーの宇都宮頼子です。
今回から始まった【ダメデザイナー救済！】は、基本ズボラな私が、いつかみんなに「こいつデキる・・・！」と言わせたい、そんな思いを胸にコツコツ溜まってきた小技をご紹介していくコーナーです。

twitterのタイムラインで流れてくる「ココとココの頭位置が微妙に違うのは意図的！？」「この端数は何だ？？」などなど、コーダー＆プログラマさん達の深夜のつぶやきは耳が痛い、耳が痛いよぅ。

今回はFireworksのシンボルをつかって、コーダー＆プログラマさんもニッコリ間違いなしのステキな素材作りを学びましょう！

●汎用性の高いブロックを作る

よく使うサイズのブロックを作ります。重ねても使えるので最低限でOK

こんな感じで汎用性の高そうなサイズのシンボルを作っておきます。（※以降ブロックと呼びます）ここでは5px,10px,20px,30pxと作ってみました。これらは共有ライブラリで保存しておくといつでも取り出せて便利！

※ワンポイントアドバイス： 矩形、線、テキストは保存の前にビットマップに変換しておきましょう。ベクターデータのままで回転させるとサイズが狂ってしまうようです。

基礎編は以上！さて実践編です。

●伸縮自在のパーツをつくる

中身によってタテヨコサイズが変わってしまうような素材の場合でも、9スライスとブロックを使って、paddingが再現できます。

9スライス内の四隅にブロックを配置します

まず枠オブジェクトをシンボル化させる際に、9スライスも有効にしておきます。
9スライスのガイド設定で四隅箇所にブロックを配置しましょう。この四隅だといくら伸縮してもブロックも崩れません。

伸縮させてもpaddingが可視化できて便利！

中身によって縦横が変わっても、ホラpaddingも崩れない！

●見出しをつくる

見出しの左脇と下辺にブロックを使用してみました

さっき作ったブロックを使って見出しシンボルを作ってみます。ブロックのよいところは、スナップで吸着してくれるところ。 配置もらくちんです。（※ブロックは目玉マークをオフにしてもスナップだけは効いてくれるところもシビれます。）

こんな感じでリストや区切り線などパーツをどんどん作っていきます。
「このルールにはまらない場合はどうすればいいの？ここだけは100pxの余白にしたいの。」 そういうときは別名でそういうパーツをつくっちゃえばいいだけのことです。
何度も登場するパーツであればシンボルの中にブロックを入れるといいですし、ロゴのような単体パーツだったら直接ブロックを配置してもOK。
そうこうやるとこんな感じでできあがり！

oh!デザインしてたら指示書も一緒にできちゃった・・・！

この方法のステキなところは

• 素材ファイルが兼指示書になる！
• ブロックというシンボルを作っておく事でスナップが効いて配置もラクラク！
• ルールを整理しながらデザインするので自然とcssコーディングを意識したデザインに！

これで「＃デザイナーあるある」つぶやきも、他人事のように笑える日も近いはず。是非おためしあれー。

そうでなくても個人事業やフリーランス、中小企業でWEBサイト制作のお仕事をされている場合、データ管理はどうするのがベストなのかいろいろと考えさせられますね。

そこで今までのやりかたと失敗点を踏まえて、WEBサイト制作においてのデータ管理の方法を探っていきたいと思います。
究極の目標は「家が突然爆発しても仕事が続けられる」です。

ちなみに最初に念のためお断りしておきますと、この記事では長々とDropboxとjungleDiskとAmazonS3のサービスについて書かれてありますが、それぞれのサービスの説明は全然しておりません。あくまでそれぞれ3つのサービスを連携させたらこういうふうになるよ、という類の記事ですんで、個々のサービスについては今一度検索して調べてみることをおすすめします。
それぞれ有料サービスが存在しますし、特にDropboxとjungleDiskはただサインインしただけじゃなくて専用のクライアントソフトをインストールしないと全然便利に使えないものなので、その使い方については別途調べておく事をお勧めします。

WEBサイト制作においてのデータ管理の課題

とにかくいろんなタイプのデータが混在する

ただのHTMLサイトを作るだけでもHTMLファイルや各種画像ファイル、画像の元素材ファイルや指示書などファイルの種類と数は相当数になります。
さらにプログラマブルなサイトを求められる場合、ライブラリやその階層構造（多くの場合HTMLの公開フォルダとは別でプログラムを作るのでHTMLだけの時と比べると階層構造がややこしくなる）、プログラムやデータの設計書なども必要になってきます。
Flashも必要となるとさらに加えて音声データや映像データ、さらにその元素材など扱うデータは多岐にわたります。
種類も量も大量のファイルを扱う必要が出てきます。

自前管理ではRaid5と世代バックアップは必須だった

絶対壊れたらだめなときに壊れるのがHDDです。CM連動型WEB広告など、アップ直前に限ってHDDが故障したなんて事故が理由にならないくらい、たとえHDDが壊れてもファイルがすぐに取り出せる状態でないといけないので、ネットワークディスクをRaid5で組むのは必須でした。
これでデータの保存領域は堅牢になりましたが、間違った操作に対してまだ非常に弱いです。たとえばそのネットワークディスクの中のファイルを間違って全部消してしまったとか。
そこでRaid5＋定期的な世代バックアップを必要としていました。

ネットワークディスクは遅い

ネットワークディスクをいくら完璧にしたとしても、ローカルディスクの速度には勝てないので、やはり大量のファイルをスピーディーに扱えないのは困りものです。いくら定期的バックアップとってたとしても、間違えて削除したときとかもすぐに戻せないし。
そうすると作業のたびにネットワークディスクからローカルに一旦コピーしておいて、ローカルで作業して終わったらまたネットワークディスクに置く、という手間が必要になりました。
大事なそこのところを手作業に頼るというジレンマで、実際事故も多かったです。
ただでさえどこのが最新状態なのかがわかりにくくなっているのに、共同作業なんかのときは最悪で、ファイルの一部が最新のものが混在してたりと、誰もがコントロールできない状態に陥りました。
たった一文字の修正が細かく刻まれてきた場合なんかは、「ネットからローカルにコピーして 修正したものをまたネットにあげる」の繰り返しで、やればやるほどミスも多くなるしかといって直接ネットをいじったりしたらそれはそれでどれが最新版かわからなくなる元兇だったりで、ルールを厳格にしてもゆるくしても必ず何かしらの事故の要因を作ってしまうので悩みの種でした。

基本的にはDropboxがほぼすべての悩みを解決

見つけた、Dropboxちゃんのいいところ

今更説明の必要もないDropboxですが、これを導入するだけで基本的にはほぼすべての悩みが解決しました。

• 基本はローカルなので速度とか関係ない
  • Dropboxのフォルダがローカルに出来るので、このフォルダの中で作業すればいいだけなので普段全くストレスなく仕事が出来ます。
• 対象がDropboxフォルダだけなのが逆にいい
  • Dropboxのほかにも、もっと高機能なsugarsyncというサービスもありましたが、sugarsyncが同期できるフォルダを選べるのに対してDropboxは同期できるフォルダは一つだけです。もともと作業用フォルダは一つにまとめておくタイプだったので、このDropboxの制約が逆に好みに合っていました。同期できるフォルダがいろいろ散らかっていると、そっちの管理にも手を取られてしまいます。
• 勝手にオンラインに同期してくれる
  • 基本はローカルで作業しているだけですが、裏で僕の知らないうちにオンラインに同期してくれています。PC2台持ってても、どっちで作業してもきちんとファイルが同期している。これはすごい。
• 自動で世代バックアップをとってくれる
  • PC2台も持ってない人でも、この世代バックアップだけでもDropbox使う理由があります。ファイルを間違えて消してしまったとき、もうちょっと前のバージョンに戻したいとき、修正に修正を重ねたデザインをあっさり「やっぱ前のに戻して」と言われたとき、Dropboxが自動でオンラインに同期する際に世代ごとにバックアップもしてくれているので、いつでもファイルを元に戻せます。もう納品直前にファイル消失して気絶することもなくなります！
• 共同作業もばっちり
  • どのフォルダを誰と共有するかも細かく決められるので、共同作業時もオンラインストレージやネットワークドライブを介する必要がありません。

こんなに便利なDropbox、基本的にこれさえあればたとえ今突然PCが爆発しても、新しいPCにDropboxを入れさえすれば何事もなかったかのように作業を続けることが出来ます。
もしまだDropboxのアカウントが無い方いましたら、次のリンクからアカウント登録を行いますと通常2GBまで無料なのに対して20MB増えて2.25GBの状態で始められることが出来ますのでよかったらどうぞ！（僕のアカウントからの紹介になるので、僕も250MB増えます）

Dropboxのアカウントを作る

英語のサイトですが、説明に従ってアカウントを作って、専用のアプリをダウンロードしてインストールすればすぐに使い始めることが出来ます。

Dropboxだけでは解決できないところ

Dropboxに限ったことではないのですが、この手の自動ストレージサービスで問題なのは容量が少ないことでした。
無料アカウントでも2GB、年間$99.00払って50GB、年間$199.00払えば100GB まで拡張できるのですが全然足りなくなります。
結局、Dropboxに入れておくファイルを選ぶ必要があるのですが、選ばなかったファイルに限ってPCが爆発した直後に即時対応の修正を求められるかもしれません。冗談みたいですが、必要なときに限って必要なファイルがないのはよくある事です。

AmazonS3と併用で解決！

時期尚早？

いきなりですが、今AmazonS3でアカウント作るのはちょっとまずいかもしれないです。
というのも今AmazonS3でアカウント作るとUSにあるサーバーを使うことになるかと思うんですが、もしかしたらそろそろ東京にもサーバーが作られるんじゃないかという噂を聞いたんですよ。
ネットワークといえどサーバーとの物理的な距離は回線の速度に影響しますんで、もしかしたら出来るかもしれない東京サーバーまでアカウント作成は待った方がいいかもしれないです。
僕は今作りましたが。
今すぐにでもアカウント作るぞ！っていう我に続く猛者がいましたらリンク張っておきますんでどうぞ。

http://aws.amazon.com/s3/

こちらも簡単な英語ですが、僕がはまったのは郵便番号を7桁で書いたらエラーになったので、3桁に減らしたらいけました。

そもそもAmazonS3とはなんぞや？ということですが、ものすごく簡単に説明しますとAmazonが自分ところで使ってるサーバーを有料で貸してくれるので、これがまたえっらいスペックいいのにえっらい安くて済むんでみんな喜んでるサービスなんです。
AmazonEC2っていう、すっごい速いサーバーを、使った時間だけ貸してくれるサービスがありましてですね、これがまたすごくて、仮想化っていうんですけどアクセスがあったときだけ（仮想的に）サーバーの電源を入れて、計算が終わると（仮想的に）サーバーの電源を消すみたいなことを自動的にやってくれるサービスなんですね。電源を落としちゃうとデータは保存されないので、その保存用に作られたサービスがAmazonS3ということになっております。
電源入れてた時間だけお金払う貸しファミコンがEC2で、なんでも入れられる便利な貸しカセットがあって、その要領に対してお金払うのがS3ってイメージですかね。

jungleDiskでAmazonS3をネットワークドライブ化

AmazonS3を契約しただけではそんなに便利にデータを扱えないですがjungleDiskというサービスを使うことによってAmazonS3のサーバーをネットワークドライブとして扱うことが出来るようになります。
jungleDisk自体も有料サービスで、僕もどのプランでやればいいのかかなり迷ったんですが共同作業用にゆくゆくはサブアカウントを増やしたくなるかもしれないので、僕はとりあえずBusiness Classの月$4のプランで初めてみることにしました。個人でアカウントとって管理する分にはPersonalの月$3のプランでもいいかもしれませんね。

https://www.jungledisk.com/

とりあえずDropboxとjungleDisk+AmazonS3でルールを作っておく

Dropboxはローカルでの作業を全自動でクラウド化してくれるサービス。でも最大容量が少ない。
jungleDiskはクラウドの先にあるものをローカルで扱ってるように見せかけてくれるサービス。容量無限大。でもローカルに見えるその先は実はネットワークの向こうなので速度遅い。

このふたつの特徴をうまいこと使い分けて、次のように管理するようにしました。

• 現在進行中の案件はDropbox上で
  • 更新が頻繁にある状態。なのでスピードが求められる。
    世代間バックアップも必須
• 案件が閉じたらjungleDiskでAmazonS3に保管
  • またいつ使うかはわからないけど、作ったものは大事に保管。
    普段はあまり触ることのないファイルなのでネットワーク越しである程度遅くても大丈夫。それよりはどんどん貯めるので容量がたっぷり欲しい。

これでお互いのいいところを補いながらも、家が爆発しても手元にPCと回線さえあれば、爆発直後からでもどんな案件の対応も出来る環境が手に入りました。

おまけ

少し冗長かな？とも思うんですが、jungleDiskの月$4のプランだとAmazonS3とは別に10GBの容量を借りることが出来たので、試しにここにDropboxをSyncさせてみました。
まあほんと意味のない冗長性だと思いますが。

まとめ

クラウドクラウドって言うのは、なんか流行に乗っかってて嫌なんですけど、昔から出来るだけネットワーク上に作業環境をおいてしまって特定のPCや環境に依存されにくいというのは目指してきたんですが、僕みたいに個人事業主だとネットワーク環境も自分でメンテナンスしないといけないので、手段が目的化してしまうと逆効果なわけですね。

実際、僕の一番の仕事は制作作業なわけでして、その制作作業を助けるためのネットワーク構築のはずが、ネットワークに障害が起こると自分でメンテしないといけないので、それはそれで非常にリスクを増やすだけでした。

VPNサーバーやNAS、自動バックアップサーバーや世代管理サーバーなんかも自分で構築しちゃうと非常に安価にできるわけですが、これらのうちのどれかひとつでも落ちてしまうとただでさえ仕事どころではなくなるのに、ネットワークのメンテナンスもしないといけなくなる。そうするとこのサーバーはいったいどこまで信頼できるのかの見極めもしないといけないし、それによって依存度をかえないともいけなくなる。確実なファイル管理のための手段であったはずのサーバーが、堅実なネットワーク運用を目的としないと何も出来なくなるんです。

そういう意味では、小規模制作集団にとってのデータクラウド化は非常に有意義なんじゃないかと思います。Dropboxの2GB上限のプランだけでも無料ですし、かなりおすすめできますが、僕はもう少し踏み込んでクラウドでデータを運用してみようかと思います。

僕のデータ管理についての考え方を長々と書いた割には、結局は「DropboxとjungleDiskの併用まじおすすめ」しか中身のない記事ですが、僕も常日頃からデータ管理に頭を悩ませている毎日ですので、少しでもどなたかの運用のヒントになれば幸いです。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>マサムネット</title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
<!-- TemplateBeginEditable name="head" -->
 
<!-- TemplateEndEditable -->
</head>
<body>
<div id="page" class="top">
<div id="header">
<h1><a href="/">マサムネット</a></h1>
<ul id="globalNavigation">
<li><a href="/profile/">プロフィール</a></li>
<li><a href="/gallery/">ギャラリー</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/link/">リンク</a></li>
</ul>
</div>
<div id="contents" class="top">
<!-- TemplateBeginEditable name="maincontents" -->
ここにコンテンツが入ります。
<!-- TemplateEndEditable -->
</div>
<div id="footer">
コピーライト
</div>
</div>
 
</body>
</html>

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

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

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

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

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

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

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

編集可能オプション領域

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>マサムネット</title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
<!-- TemplateBeginEditable name="head" -->
 
<!-- TemplateEndEditable -->
 
<!-- 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" -->
</head>
<body>
<div id="page" class="top">
<div id="header">
<h1><a href="/">マサムネット</a></h1>
<ul id="globalNavigation">
<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>
</ul>
</div>
<div id="contents" class="top">
<!-- TemplateBeginEditable name="maincontents" -->
ここにコンテンツが入ります。
<!-- TemplateEndEditable -->
</div>
<div id="footer">
コピーライト
</div>
</div>
 
</body>
</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ファイルをテンプレートと関連づけます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>マサムネット</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" media="all" href="/css/import.css" />
<!-- InstanceBeginEditable name="head" -->
 
<!-- InstanceEndEditable -->
 
<!-- InstanceParam name="profile_class" type="text" value="menu" -->
<!-- InstanceParam name="gallery_class" type="text" value="menu" -->
<!-- InstanceParam name="contact_class" type="text" value="menu" -->
<!-- InstanceParam name="link_class" type="text" value="menu" -->
</head>
<body>
<div id="page" class="top">
<div id="header">
<h1><a href="/">マサムネット</a></h1>
<ul id="globalNavigation">
<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>
</ul>
</div>
<div id="contents" class="top">
<!-- InstanceBeginEditable name="maincontents" -->
ここにコンテンツが入ります。
<!-- InstanceEndEditable -->
</div>
<div id="footer">
コピーライト
</div>
</div>
 
</body>
<!-- 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_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からの設定に自信のある方はそちらを試してみても良いと思います！

先ずは数値をマウスだけで入力可能になったこと。
これは動画でないとなかなか説明できないですが、いちいち数字を打ち込むのにマウスから手を離してキーボードで入力しなければならなかった今までのバージョンから比べて大幅に作業効率がよくなりました。

そして何よりも歓迎したいのが数値の入力に計算式が使えるようになったこと！

今までステージ上で整列させて配置したいときは整列パネルを使うか、電卓片手にXY座標を計算しながらポチポチとやらなくてはいけなかったんですが、これが格段に使いやすくなりました。

どういうことかというと、例えば

• 幅30px　高さ30pxのムービークリップを
• x=10 から始まって5ピクセルずつの幅をとりながら
• 100枚横に並べたいとき

Scriptを使うのであれば、さっさと

var startX:Number = 10;  //開始位置
var marginX:Number = 5; //間隔
var mc_width:Number = mc_0.width = 30;  //ムービークリップの幅
for(var i:int = 0; i < 100; i++){
	this["mc_" + i].x = startX + ((mc_width + marginX) * i) ;
}

こんな感じで書いてやれば一発なんですが、いろんな事情でActionScriptで配置できない場合などは手作業で並べないといけないですよね。

CS4ではプロパティウインドウに計算式が使えるので、X座標のところに
10 + ((30 + 5) * 1)
10 + ((30 + 5) * 2)
10 + ((30 + 5) * 3)
10 + ((30 + 5) * 4)
10 + ((30 + 5) * 5)
・
・
・
10 + ((30 + 5) * 100)
というように入力してやればきちんと並んでくれます！
これは便利！

プロパティで計算式が入力できるようになると、いろんな場面で活用できるのでおすすめの機能です。

ほら、みて。こんなに違う

私はデザインする時、もっぱらFireWorksなんですが、今更ながら発見した便利tips。
FireWorks（以下 FW）で写真などの画像を拡大縮小するためには、「拡大・縮小ツール」を選ぶなどして変形ハンドルを出現させ、調整後Enter押すとそのサイズで確定するわけですが、
よくよくあるのが、後から「サイズをもっと大きめにして」などと修正が入っちゃうケース。

FWのイヤーな癖で、一旦Enterを押して確定させてしまうと、そのサイズで100％の画像に変換されてしまうため、少しでも大きくや小さくしようものなら画像がボケて使えたもんじゃありません。その度にデカい画像を再配置し、マスクの場合は解除してエフェクトもかけ直さなきゃ…と工程が多くてめんどくさいですよね。

で、そんなときに便利なのが「シンボル」。
予め（コレ後から微調整したいなーor入りそうだなー）という場合は、大きいサイズのままで画像選択した後に右クリックから「シンボルに変換」。
大きいままでサイズ100％としてシンボル化されるため、小さくするのもその後大きくするのも画質は綺麗なまま！もちろんシンボル元の大きさよりも大きくしてしまってはダメですが、かなり使える！！

※とはいえ、どんなに小さい画像でもそれだけ大きい画質の情報を持ってるってことなんで、あんまり一度に使いすぎるとPCが固まってしまうかもです。