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

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

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

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

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

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

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

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

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

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

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

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

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

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

●見出しをつくる

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

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

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

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

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

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

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

線幅「1」では細すぎて「2」だと太すぎる・・・、そんなお悩みを抱えた方はいらっしゃいませんか？塗りがあるならまだしも*1、線だけで構成したい場合にはちょっと困りものですよね。

まずはサンプルを。ちょうど線幅「1」と「2」の中間の線をひきたい、というのが今回のお題目です。

線幅「１」では細すぎて「２」だと太すぎる・・・

そしてどん！こちらがその完成品。どうでしょう、中間といえば中間の太さじゃないでしょうか。

中間といえば中間な仕上がり。

さて続いてやり方です。まず線幅を「1」にし、フィルターのPhotoshopライブエフェクト「ストローク」を選択。サイズを「1」、位置を「縦書きの中央揃え」にします。

ポイントは「ストローク中央揃え」と、位置「縦書きの中央揃え」。

ただしこの方法ではピクセルが整数値ではなくなる為、線がにじむのはご愛嬌。。。
線のにじみに目をつぶるか、線の太さに目をつぶるか、という葛藤の末に前者を選んだ貴方様にだけおすすめできるチップスとなっております。

ここで気になるのが、Photoshopでは位置は「中央」なのに、Fireworksでは「縦書きの中央揃え」となっている点。・・・縦書きって何!?どこから来たん?!

とこんな感じの歯切れの悪い記事ですが、にじみの気になりにくいイラストなどでわりと活躍してくれてます。

*1 対象物に塗りのある場合は、ストロークを中央に整列＆塗りをストロークに重ねる、でキレイにできますよ。この場合、前者の方法よりにじみは少ないです。（あぁぁ、ますます需要なさそうな締め方・・・）

塗りがあるなら、この方法の方がキレイです・・・

Fwだけでここまでできちゃうよ！完成品

紙がビリビリに破れた感じをつくろう。

これ、Photoshopでのチュートリアルは数あれど、実はFireworksだけでも作ることができるんです。しかもお絵かき感覚で簡単に、エッジの質感もなかなか良い具合に仕上げる事ができます。
具体的な作り方は以下から。

1. 画像を用意します。
   

   元画像

   
   　
   　
2. 適当に切り取ります。隠れる部分なんでざっくりで大丈夫。ここではマスクを使いました。
   

   ここは神経質にならなくて大丈夫

   
   　
   　
3. 新規ビットマップ画像を追加したら、ブラシツール「油彩」＜「ブリストル」に設定。後で色を変えるので、輪郭が分かりやすい色にしておきます。こんな感じでお絵かきを楽しむように、輪郭を塗り塗りしてください。
   

   お絵かき感覚で思うままにぬりぬりして下さい

   
   　
   　
4. 塗り上がったところ。輪郭だけの一枚のビットマップになっているはずです。
   

   塗り上がりました。

   
   　
   　
5. このビットマップに対して「フィルター」＜「カラーを調整」＜「色相・彩度」のパラメータをこんな感じに変更。
   

   赤色だったのを「色相・彩度」をつかって自然な色に変更

   
   　
   　
6. さらにシャドウを追加すればあら簡単。ビリビリレイヤーの完成です。
   

   最後にドロップシャドウ

   
   　
   　

【応用】ブラシストロークやフィルターの微調整や追加で冒頭でも紹介したサンプル位の質感まで高めることができますよ。

ブラシストロークやフィルターを微調整するとこんな感じ

このＦｗスタイルライブラリを用意しました。こちらからダウンロードどぞ。→[ biribiri_paper.zip ]
※シャドウ部分はライブラリに含まれてませんが、サンプルではシャドウ用の別レイヤーを作ってゆがみなどの変形をさせてます。

Photoshopチュートリアルでは、投げ縄ツールを使ってエッジを作る方法が多いようなんですが、これがなかなか自然な輪郭をなぞれず、四苦八苦しちゃうんですよね。
今回紹介したFwの方法だと微妙なエッジもブラシで書くだけなので、「もうちょいココは下地の白を出したい」「ココあたりで破くことに迷いが生じて線が揺れる」等お絵かき感覚で自分の思うままにできちゃいますよ。

中段あたりにチェックボックスがあるよ

いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流さ、なんて無頼を決め込んで今日も「エスダブルシーエスダブルシー」と 読んでいます。
僕が「エスダブルシー」って言う度に周りが若干イラっとした顔されるんですが、それでもかわまず「エスダブ…エスダボースィー」とか呼び続けてるのに未だ怒られた事がないのは 、ひとえに僕の人徳だと思います。

無駄な軽口はこのくらいにして、先日行われたひよこの会で少しだけ要望があったのでSWCと連携してProgressionでのFlashサイト開発環境を超快適にする方法をご紹介したいと思います。
今までのやり方にもよりますが、体感100倍速いと言っても全くおおげさでないくらい、爆速開発が可能になりますよ！

そもそもパブリッシュが遅い…

Progressionに限らずですが、Flashサイトを作っていて一番のネックになるのが「パブリッシュに時間がかかる」事なんですよね。
それもflaファイルが肥大すればする程パブリッシュに時間がかかるようになり、納品間近の追い込みの時期になるにつれてパブリッシュだけで1分以上かかるようになるし…（ヒーッ）。

デバッグなんかもそうですが、「よりわかりやすく、より気持ちよく」動くことを心がけているFlashサイトにとって、1pxの位置や0.1秒の速度までこだわってなんべんも動かしてみて作り込むことはよくあることなのに、パブリッシュに時間がかかるようになるとそれもままなりません。

書き出せるものは先に書き出しておけば…

そこで今回ご紹介するswcなんですが、これは言ってしまえば頻繁に変更しない素材はあらかじめswc形式で書き出しておいて 、それを使うことによって開発を進めていこう、という方法なんですね。
この方法自体は、僕もkatapadさんから教えて頂きました。
ちなみに僕というひよこ向けの備忘録なので、最初はswcとは何か、どうやってswcを書き出すのかなどの事が書かれてありますが、Progression連携のミソは一番最後なので、swc書き出しに精通されてる方はこのまま最後まですっ飛ばして読まれてもいいかもしれません。

ものには順序がある。まずはFlashBuilderとProgressionを連携させるようにしておく

僕の現在のFlash開発環境は100％FlashBuilder+Progressionなので、その方法でご説明します。
基本的なところは同じなので他の開発環境 でも工夫してswc連携スタイルが作れることと思います。

まずは僕の以前の記事
Progression4をいい感じにFlashBuilderで作業できるようにする
を参考にしてください。
これはFlashBuilderがsrcにあるflaファイルを勝手にbin-debugフォルダにコピーしてしまう現象を回避できなかったので、思い切ってflaファイルを削除してそれでもちゃんとswfがパブリッシュできるように設定し直した方法ですが、基本的にこのスタイルで開発を進めていくことになります。

記事に沿って、index.flaとかpreloader.flaを思い切って捨てちゃって下さい。次に進みます。

新規flaファイルを作る

FlashCS5の「ファイル」→「新規」から新規flaファイルを作ります。Progressionと連携させるのでASのバージョンはもちろんAS3です。
僕はFlashBuilder連携を前提にこの記事を書いていますんで、今回FlashCS5指定ですがFlashDevelopとかFDT、FlexBuilderなどお使いの環境に合わせて読まれてる方にとっては、特にFlashCSのバージョンは関係はありません。

新規flaファイルの保存場所はどこでもかまいません。どこでもかまいませんがFlashBuilderのワークスペース以外のところに作るのがおすすめです。flaファイルのファイル名も何でもいいですが、ここではmaterial.flaと名付けました。

SWCファイルを書き出す

おやこんなところにSWC書き出しのチェックが！

そのままFlashの「ファイル」→「パブリッシュ設定」で真ん中らへんに「SWC書き出し」というチェックボックスがあるので、ここにチェックを入れます。
そのままパブリッシュしたらflaファイルと同じフォルダに「material.swf」が出来たと思います。

おやこんなところにSWCファイルが出来ちゃった！

material.flaのライブラリの中はリンケージ書き出しのシンボルでいっぱい！

さてさて、これでswc書き出し用のflaファイルが新規作成できましたので、早速作業に入っていきましょう。
基本的にはmaterial[素材]というファイル名からも想像がつくように、このflaファイルの役割は「素材倉庫」です。長年慣れ親しんできたflaファイルをただの素材倉庫にするのは僕もしのびないですが快適環境作りのため。最終的にはFlash全体の開発環境が快適になることによって自然とこのflaファイルの活躍の場も以前より増してきますのでご心配なく！

最終的にライブラリの中にたくさんリンケージ書き出しのシンボルが作れました。

ライブラリの中は汗と涙と夢でいっぱい！

書き出したSWCファイルをProgression開発環境にコピーする

この記事ではProgression開発環境イコールFlashBuilderのワークスペースな意味合いで使っています。
先ほど書き出したswcファイルを早速Progressionの開発環境で使ってみましょう。

具体的にはProgression開発環境のlibというフォルダに先ほどのswcファイルをコピーするだけで良いです。

わかりにくくてすみません。スクリーンショットでは800_material.swcとリネームされていますが特に意味はないです。

たったこれだけ！

FlashBuilder+Progression環境だと、この「swcをlibフォルダに入れる」だけであとは何もせずにswcの中にあるリンケージをそのままクラスとして読み込めるようになります！

快適すぎて死ぬｗｗｗ！

他の環境だとクラスパスの設定とかしないといけないかもしれないですが、本来はひよこ的には「クラスパスって何？」ってところから記事を書きたいところなのですが今回の記事ではそれは割愛して、まあ他の環境でよくわからない場合は本番開発用flaと同じフォルダにswcファイルも入れておけば同じような感じにはなるかと思います。

まじで便利なコンポーネント連携！

さてさて、ここまでは普通にswc書き出しとの連携なんですが、Progressionが凄いのはここからなんです。

とちょっとそのまえにProgressionのAddChildコマンドについて少しお話を…。

FlashのActionScript3では、表示オブジェクトを画面上に入場/退場させる命令としてaddChildとremoveChildがあります。
Progressionではそれをさらに便利にしたjp.progression.commands.displayパッケージがあって、ようはわかりやすく言うとAddChildコマンドやRemoveChildコマンドっちゅうのがあります。
（他にもAddChildAtコマンドやRemoveAllChildrenなどなどいろいろ便利なコマンドもありますが、ややこしくなるのでこの記事では一律AddChildコマンド、RemoveChildコマンドと呼ぶことにします）
ただ便利なだけでなく、Progression側で何が表示されてて何が退場していったのかの管理とか、それこそ重なり順とか、表示されたときに実行される処理とか、かなりProgressionの根幹に関わる処理が、このAddChild系コマンドの実行されたタイミングで行われています（いるような気がします）。
なのでAddChildコマンドを使わずにaddChildだけで表示した場合、これがProgressionが管理しきれない表示オブジェクトとなってしまうので、使ってる経験上こういうのが思いがけずちょっとしたトラブルを招くことが多いです。

Progression始めた人で、僕が個人的にはまりやすいなと思うのが、この部分なので、例えばCastSpriteやCastMovieClip系の表示オブジェクトをAddChildコマンド経由せずにふつうにflashの addChildで表示させてしまってatCastAddedが正しく実行されないなどのミスで戸惑っている人がいるんじゃないかなと思っています。

swc連携に限ったことではないですが、Progressionでは特に初心者の場合でAddChildコマンドが何しちょるのかようわからん、といった場合はパフォーマンスを稼ぐなどの特別な理由がない限りはaddChildは使わずほぼ全てAddChildコマンドを使うようにしよう！と決めておくとそこらへんのミスが減るんじゃないかと僕は思います。

で、少し脱線したんで本題に戻りますが、とにかくProgresisonのAddChild系コマンド、RemoveChild系コマンドはコンポーネントとも連携が利くので、ここからが本領発揮です。

Flashの強力なタイムライン機能を活かしてInOutMovieコンポーネントでわしわしアニメーション描くもよし！

複雑なアニメーションもInOutMovieコンポーネントで思いのまま！

ボタンなんかもRollOverButtonコンポーネントでさくさく！

どうせswcの中に素材としてボタン置いてるんだからついでにコンポーネントでボタン化までしておいてしまえ！

new AddChildするだけの簡単なお仕事

あとはリンケージさえ設定してもらえれば、あとはプログラム側ではnew AddChildするだけの簡単なお仕事です。本当に。
ビジュアルとロジックの分離は当制作所でも必須課題なのですが、Progression導入でそこらへんも本当にやりやすくなりました。タイムラインでしっかり作り込みたいところはタイムラインで作って、Tweenerなどでぴっちり制御したいところはロジックを作って、それらの違いを意識せずに最終的に扱えるようになるのは、本当にパワフルな開発環境を整えることが出来ます。

この記事中、ほとんどが僕の無駄口で長くなってしまいましたが、実際はやってみると本当に簡単なので是非試してみて下さいね！
デメリットとしては先ほど書いたように今まで慣れ親しんだflaファイルをただの素材置き場としてしか使わなくなる事への心の抵抗くらいですが、最終的にはFlashのタイムラインというパワフルな環境を十二分に発揮できるスタイルに移行するわけなので、かえって以前よりFlashCS5の出番が増えるようになります。
「もっとこうしたほうがいいよ」とか「うちではこうしてるよ」ですとか、「うそばっかりやんけ！」などのご意見ありましたらコメント下さいね。
最近「ブログ読んでます」という反応が少しだけ得られるようになって、本当嬉しいです。

そうでなくても個人事業やフリーランス、中小企業で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の併用まじおすすめ」しか中身のない記事ですが、僕も常日頃からデータ管理に頭を悩ませている毎日ですので、少しでもどなたかの運用のヒントになれば幸いです。

JavaScriptでもActionScriptでも、関数を登録する場面ってけっこうよくあって、ActionScriptでいえば特にaddEventListenerですね。そんなときに引数を渡したい事もあると思うんです。
その方法を書いておきたいと思います。

jQuery（JavaScript）の場合

jQuery( '#hogehoge' ).load( 'nanika.html', myFunc );
function myFunc() {
	alert( 'こんにちは' );
}

こういうやつのmyFuncに引数を渡したいとき。

jQuery( '#hogehoge' ).load( 'nanika.html', myFunc( 'こんにちは' ) );
function myFunc( argment ) {
	return function(){
		alert(argment);
	}
}

渡され先でreturn functionするのがコツです。コツなのです！

ActionScriptの場合

どんどんいきましょう

_mc.addEventListener( MouseEvent.CLICK, __click__( 'クリックされたよ' ) );
functioin __click__( argment ):Function {
	return function( e:MouseEvent ):void {
		trace( argment );
	}
}

Progressionの場合

こういう書き方が出来るってことはProgressionのaddCommand内でも使えるはず！

 new SerialList( null,
	myFunc( 'コマンドにFunctionを登録するときにも引数がわたせる' ),
	myFunc( 'どんどん渡そう' )
);
function myFunc( argment ):Function {
	return function():void{
		trace( argment );
	}
}

何故こうなるの？

書き方だけわかっても、理屈がわからないと気持ち悪いですよね。一見意味不明な書き方にも見えるし、まる覚えしないと次もういちど書けないようでは身につけたとは言えません。
僕なりに解釈した考え方を書いていこうと思います。
ちなみに型が明記できるActionScriptで書いていきます。

function は（）で実行される

function myFunc( ) {
	trace( 'hogehoge' );
}
//関数を実行
myFunc( );

当たり前のルールなんですが、一度作った関数は、その関数の名前のお尻に() 「括弧」を付ける事で実行されます。
ということは逆に言うと括弧を付けないと実行されないという事です。

関数を実行せずとりあえず登録だけしておく

function myFunc( e:MouseEvent ) :void {
	trace( 'クリックされました' );
}
_mc.addEventListener( MouseEvent.CLICK, myFunc );

こういう書き方をしている場合、ようは「マウスクリックされたときにmyFuncっていう関数を実行してね」と書いている訳です。

_mc.addEventListener( MouseEvent.CLICK, myFunc() ); //まちがい

こう書いちゃうと、マウスクリックの時に実行してほしい関数なのに今実行してしまいます。
つまり、「あとで実行したい関数は、名前だけ登録しておく」のが正解なわけで、通常はそう書いている訳ですね。

関数の「戻り値」をおさらいしよう

本来関数を登録だけしておくはずの場所で、あえて実行する訳ですから通常だとエラーなわけです。間違いです。そこをあえて実行してみた場合、スクリプトの世界ではどのような事が行われるでしょうか。
その謎を考える前に関数の「戻り値」というやつをもう一回おさらいしてみます。

function myFunc1( ) :int {
	return 100;
}
var a:int = myFunc1( ); //変数aには数字の100が入る
 
function myFunc2( ) :String {
	return "こんにちは";
}
var b:String = myFunc2( ); //変数bには文字の「こんにちは」が入る
 
function myFunc2( ) :Object {
	return { test:"ごはんおいしいです" };
}
var c:Object myFunc3( ); //変数cにはObjectが入る

関数が関数を返す

結論から言うと、イベントリスナーやコールバック関数など、「関数を今実行せず登録だけしておく」場所で「あえて実行させてみる」わけですから、そこで実行された関数が関数を返してしまえばいい、とある頭のいい誰かが考えた訳ですね。

function myFunc( ) :Function {
	return function( ) { trace( 1+1 ); };
}
var f:Function = myFunc( ); //変数fに関数が入る
f( ); //関数が実行され1+1の計算結果が表示される

たとえばイベントリスナーの第二引数には

function ( e:Event) :void { }

この形が入れば言い訳ですから、

function myFunc( ) :Functioin {
	return function ( e:Event) :void { };
}

こういう形を返す関数を作っておいて

_mc.addEventListener( Event.ENTER_FRAME, myFunc( ) );

こういうふうにイベントリスナーの登録時にはmyFuncを実行してしまえば、関数が返ってくるので、その返ってきた関数のほうをイベントリスナーは登録してくれる、というのがこの書き方の謎の正体です。

はじめに発見した人はそうとう頭良いと思います。ぼくはこの理屈を発見したとき芸術性すら感じました。
実用性もさることながら、こういった動作の合理性を考えていくのもかなり楽しいです。昔中学校の技術の時間にエンジンの仕組みを勉強して以来、その動作の合理性に魅せられて車オタクバイクオタクというよりはエンジンオタクになったのを思い出します。

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からの設定に自信のある方はそちらを試してみても良いと思います！

泣く泣く強制終了コマンドを押しながら、
今までの作業よ永遠にさらば…！FW子の性格は分かってたはず…！と自分を咎める前に、最後の頼みの綱。うまく行けば万々歳のファイル救済方法です。

レイヤーの目玉マークをオフにする。
それだけで保存できる場合があります。

たったこれだけで、あっさり保存できたりします。

何度も消えては現れる不死身のエラーダイアログ現象や、メモリ不足と伝えるのがやっとの全面グレー画面現象でも、レイヤーが操作できるまでは我慢！みたいな感じで、あとちょっと踏ん張ってみて下さい。
描画に負担かかりそうだなあと思われるレイヤーをフォルダごとオフにするのがコツです。

Progressionではスクリプトを一切使わない「コンポーネントスタイル」やタイムラインスクリプト派の「タイムラインスタイル」、クラスでわしわし書きたい人向けの「クラススタイル」など制作者のスタイルにあわせたとても柔軟な開発スタイルが用意されていますが、今回はその中でも「コンポーネントスタイル」と「クラススタイル」を連携させた開発手法についてまとめてみました。

はじめに

そもそも「コンポーネントスタイル」と「クラススタイル」の連携とはなんぞやという説明ですが、ひとつのサイトを作る上でデザイナーやアニメーターは「コンポーネントスタイル」を、プログラマーは「クラススタイル」をそれぞれ用いながら、同時にサイト制作を行えないかと考えてあみだした必殺技です。
Progressionのようなよくできた開発フレームワークがあれば、Progressionを制作の共通言語として、開発スタイルの違いを気にせずほんとうに簡単に連携してサイト制作が行えるようになります。

今回はそのためのひとつの方法をうちがやってる例として紹介したいと思います。

今回の例

コンポーネントとクラス、それぞれのスタイルの連携といっても、ベースのスタイルをどちらにするか先ず決めなければ行けません。
ページの遷移のコントロールなど、サイト全体の管理をクラスベースで行いたい場合は「クラススタイル」ベースにしておいて、ページの部品などをコンポーネントで制作していくやり方になるでしょうが、今回は「コンポーネントスタイル」をベースとして制作を行い、あるページや部分だけをクラスで開発するという方法をとってみます。

Progressionプロジェクトの作成

Flashdevelopと連携するため、一旦クラスベースでProgressionプロジェクトを作成します。
Flashdevelopを使う予定のない場合は、そのままコンポーネントスタイルでプロジェクトを作成して、この章をすっ飛ばして読み進めてもかまいません。

AS3クラスを書くのにFlashDevelopが欠かせないのは僕みたいな中途半端なスクリプトコーダーには言わずもがななんですが、最初からコンポーネントスタイルでProgressionプロジェクトを作成してもFlashDevelopプロジェクトファイルも一緒に書き出せればいいんですが、どうも最初にクラスベースにしておかないとFlashDevelopプロジェクトファイルは書き出してくれないようで、だったら最初はコンポーネントスタイルにしておいて後から手作業でFlashDevelopプロジェクトファイルを作成する方法もあるのですが、いろいろと設定が面倒なので今回は「最初に一旦クラスベースで書き出しておいて、FlashDevelopプロジェクトファイルを書き出してもらってからflaファイルのほうはコンポーネントベースで制作できるようにする」ことを目的としています。

Progressionプロジェクトを作成

種類を「クラス」に選んだら、ActionScriptタブの中にある「FlashDevelopプロジェクトを作成」にチェックを入れておきます。あとは「新しく作成する」ボタンで適当なフォルダにプロジェクトを作成します。

しばらく待つとプロジェクトが作成されてindex.flaが開くと思います。普通のクラスベースの開発でしたら、ここからそのままわしわしとクラスを書いていけばいいのですが、今回はこのプロジェクトをコンポーネントスタイルで行いたいので、そっちで制作するように変更してみましょう。

ドキュメントクラスを消します

Flashのステージのプロパティウインドウにドキュメントクラスっちゅうものを指定する欄があります。クラスベースでProgressionプロジェクトを作成すると、クラスでの開発が行いやすいようにとあらかじめtaka:nium先生が入れて下さっているのですが、コンポーネントスタイルの開発には必要のないものなので心は痛みますがここの項目はさくっと消しちゃいましょう。

ドキュメントクラスの設定を消します

要はFlashDevelopプロジェクトファイルを作って欲しかっただけで、利用するものは利用して必要のないものはどんどん消していくという、名付けて鬼のジゴロスタイル！

次にFlashメニューの「ウインドウ」→「コンポーネント」からコンポーネントウインドウを開いて、その中にある「Progression Loader」の「EasyCastingLoader」というコンポーネントを探してきて、これをステージにドラッグドロップします。

ステージ上にEasyCastingLoaderコンポーネントを置こう

今ステージ上に置いたEasyCastingLoaderを選択した状態で、Flashメニューの「ウインドウ」→「コンポーネントインスペクタ」からコンポーネントインスペクタウインドウを開きます。EasyCastingLoaderの設定画面が出てくると思うので、ここの「url」の欄に「easycasting.xml」と書き込んでおきましょう。

urlのところにeasycasting.xmlと書く

これで「クラスもところどころで書きたいのでFlashDevelopプロジェクトも作りつつコンポーネントスタイルメインで制作を行う」準備が整いました。

Progressionシーンエディタの活用

あとはコンポーネントスタイルで気楽に制作に取りかかりましょう。
Flashメニューの「ウインドウ」→「他のパネル」→「Progression シーンエディタ」でシーンエディタを開きます。

気楽に、ってこのサイト気ぬきすぎです

シーンエディタの詳しい使い方はProgression公式ページのドキュメント、コンポーネントスタイルガイドの「シーンを作成する」などを参考にしてみて下さい。
シーンは「舞台」、キャストは「役者」など昔なつかしいFlashの概念を踏襲してて、ほとんど直感的に扱えると思います。

ちなみにシーンエディタでは、Flashで言うところのレイヤーの重なりと同じ概念としてキャストに「index」という数字を設定できます。
これは数字が大きい方が前面に重なるものなので、サイトロゴやグローバルメニューなど常に前面に表示しておきたいキャストはこの「index」の数字を大きい数字にしておくと良いです。
ただし「index」がゼロの場合だけは特別で、ここをゼロに設定しておくと常に一番前面に表示されるようです。
もう、何が何でも絶対に表示されてないといけないキャストは（あ、それこそサイトロゴとか）ここをゼロに設定する方法も考えてみても良いでしょう。

ちなみにシーンエディタの「書き出し」→「キャストをシンボルとして書き出す」をするとよくわかるんですが、コンポーネントスタイルでのキャストというのは要はムービークリップの事です。
ここらへんもよくできていて、今まで培ったムービークリップの技術を捨てることなく誰でも今日からでもProgressionを使用してサイト制作を容易にするための工夫が随所にちりばめられています。

キャストをシンボルとして書き出す

さっきからProgressionべたぼめで自分でも気持ち悪いですが、いやほんと使えば使うほどよくできてます。

最後にシーンエディタ上の「ファイル」→「名前をつけて保存」から（Flashメニューではなくシーンエディタのメニューです）今回のProgressionプロジェクトで作成したフォルダにある「deploy」というフォルダの中に「easycasting.xml」という名前でファイルを保存すれば完成です。

easycasting.xmlという名前でdeployフォルダに保存

あとは各ページを作っていくだけ！

基本的にあとはコンポーネントスタイルで制作していくだけなので、Progressionコンポーネントスタイルガイドなどを参考に、本当にActionScriptを一行も書かずにフルFlashサイトが出来てしまいます。

Progressionのバージョンが2と少し古いですが（現在のProgressionのバージョンは3）FlashPowerSessionでもお世話になっている琉球インクさんの松竹さんがAdobeデベロッパーセンターに書かれたProgression Framework 2　初級編：ActionScriptを書かずにFlashサイトを簡単に構築するという記事も参考になります。

繰り返しになりますがとにかくコンポーネントスタイルで制作すれば、ActionScriptの事なんか一行も考えずにページが出来ていくようになります（もちろんActionScriptを書いても良いです）。

でも特定のページはクラスで書きたい

いちおう今回の記事のヤマですが、他のページはコンポーネントだけで作りたいけどある特定のページだけはクラスで作っていきたい場合があります。

基本的にはただのクラスの継承なので、そもそもクラスベースで開発したい方にとっては当たり前すぎて有用な情報ではないのですが、まとめておきたいと思います。

例えば今回参考にしたシーンの中で「BbsPage」だけはクラスで作りたい場合、プロジェクトの中にBbsPageというクラスを作っておきます。今回はsrcフォルダの中に「myproject」フォルダを作り、さらにその中に「pages」というフォルダを作ってそこにクラスファイルを作成しました。
（蛇足ですが僕はクラスベースで開発するときはSceneObjectクラスは「scenes」フォルダ、そのSceneObjectから直接読み込まれるCastなにがしクラスは「pages」フォルダを作りそれぞれその中に入れるようにしています）

BbsPageクラスを作っておく

クラスファイルの中身は、こんな感じでCastSpriteやSctMovieClipなどを継承しておけば、_onCastAddedや_onCastRemovedイベントも受け取ることが出来るのでとても便利です。

package myproject.pages
{
	import flash.display.Graphics;
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
 
	/**
	 *
	 */
	public class BbsPage extends CastSprite
	{
 
		/**
		 * コンストラクタ
		 */
		public function BbsPage( initObject:Object = null )
		{
			super( initObject );
 
			var p:Progression = new Progression("contact");
 
			var g:Graphics = graphics;
 
			g.beginFill(0xFF0000);
			g.drawRect(0, 0, p.stage.stageWidth, p.stage.stageHeight);
			g.endFill();
 
			alpha = 0;
		}
 
		/**
		 * ICastObject オブジェクトが AddChild コマンド、または AddChildAt コマンド経由でディスプレイリストに追加された場合に送出されます。
		 * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
		 */
		protected override function _onCastAdded():void
		{
			// 実行したいコマンドを登録します。
			addCommand(
				// 任意のコマンドを記述してください。
				new DoTweener(this, { alpha:1, time:1 } )
			);
		}
 
		/**
		 * ICastObject オブジェクトが RemoveChild コマンド、または RemoveAllChild コマンド経由でディスプレイリストから削除された場合に送出されます。
		 * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
		 */
		protected override function _onCastRemoved():void
		{
			// 実行したいコマンドを登録します。
			addCommand(
				// 任意のコマンドを記述してください。
				new DoTweener(this, { alpha:0, time:1 } )
			);
		}
	}
}

あとはFlash上のライブラリウインドウから「BbsPage」インスタンスのプロパティを選択して、継承するクラス（基本クラス）を「myproject.pages.BbsPage」と書き換えてやるだけで、本当に簡単にコンポーネントスタイルと連携を取ることができるようになります。

基本クラスを自分の作ったクラスファイルに書き換えるだけ

まとめ

デザイナーとプログラマーの連携以外にも、「Progressionコンポーネントスタイルはマスターして次はクラスベースにも挑戦したいけど全部をクラスにするにはまだ難しくて敷居が高い」方も、こうしておくと基本はコンポーネントスタイル作っていって、特定のページだけクラスに挑戦することも出来るので非常にお勧めです。

うちでは普段はProgressionで制作するときは先ずクラスベースで作っておいて、ボタンなどちょっとした部品はコンポーネントを併用することの方が多いですが、今回まずデザインやアニメーションありきの案件の場合コンポーネントメインで作っておいて、ある特定のページだけ高度なことをしたかったのでクラスと連携させる方法を探ってみました。結果としてProgressionの_onCastAdded便利なCommand環境を捨てることなくすんなりとコンポーネントスタイルに組み込むことが出来たので制作スタイルの幅がよりいっそう広がったと思います。