2010年4月10日（土）、Web制作者向けの小規模な勉強会「第1回 Webridge Meeting～はじめての勉強会」で、「Web制作を加速させるAdobeアプリケーションでのJavascript」というタイトルで、PhotoshopやFireworks、Dreamweaverなどで動作する、主にHTMLコーディングのスピードを加速させる便利なコマンド機能や拡張機能を、デモを交えながらご紹介しました。

スライドをslideshareにアップしましたので掲載しておきます。また、Webridge Kagawaのウェブサイトのレポートとフォローアップの記事でもごらんいただけます。（SlideShareにアップしたところ、SlideShareのeditorial teamに「Featured Presentations & Documents」に選んでいただき、しばらくトップページに掲載されていたのがうれしかったです！）

まだまだ勉強不足で、特にPhotoshopとDreamweaverが2つのスクリプトしか紹介できなかったので残念ですが、ほかにも便利なコマンドや拡張機能がありましたらコメント欄などで教えていただけますと幸いです。各拡張機能やスクリプトはスライド中のURLからダウンロードできます。（当日動作しなかったものや自作のスクリプトで検証段階のものはcoming soonとしています）

勉強会などでWeb制作技術についてお話しするのは久しぶりでしたが、いかに技術をわかりやすくおもしろくお伝えするか、あらためて考えさせられかなり勉強になりました。勉強会に参加された方は見苦しいところも多々お見せしてしまったかと思いますが、これからもお付き合いいただけると幸いです！

Fireworksで複数行のテキスト、複数のテキストオブジェクトのテキストを、1行にまとめてコピーするコマンドを書きましたので覚え書きしておきます。複数のテキストオブジェクトの内容を取得し結合する場合、背面のレイヤーから、前面のレイヤーに向かって結合されます。カーニングなどにより空白が生まれることはありません。

var altText = "";
for(i=fw.selection.length-1;i>=0;i--){
 for(j=0;j<fw.selection[i].textRuns.textRuns.length;j++){
 altText += fw.selection[i].textRuns.textRuns[j].characters;
 }
}
altText = altText.replace(/[\r\n|\n|\r]/g,"");
prompt("you can copy this text.",altText);

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用 いただけます。

CS3をお使いのWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、 Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

CS4をお使いのWindowsユーザの方は、「C:\Users\～ユーザ名～\AppData\Roaming\Adobe\Fireworks CS4\Commands」に、Macユーザの方は、「/Application/Adobe Fireworks CS4/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

コマンドメニューに加わればキーボードショート カットとして登録することができるのでとっても便利です！Fireworksで作られたデザインをコーディングするときには、コピーしてアプリケーションを切り替えてペーストして、という繰り返しの作業が不要になり、制作スピードが倍以上になるかと思います！私自身、一ヶ月前から制作して活用していますが本当に便利で欠かせないコマンドになっています。ぜひご活用ください。

see also:
Fireworksでスライス名を一括置換するスクリプト (jsf)
Fireworksでスライス名を簡単に変更するコマンド (jsf)

今週末の2010年4月10日（土）、Web制作者向けの小規模な勉強会「第 1回 Webridge Meeting～はじめての勉強会」を香川で開催します。地元のWeb制作者がまったり楽しく集まって、自分が作ったものを披露したり、ほかの人の制作環境を知ったり、消化できなかった／知らない知識を知ったり、といった集まりにしたいと思っています。

そこで、「Web制作を加速させるAdobeアプリケーションでのJavascript」として、これまでに覚え書きしてきた、「Fireworksでスライス名を簡単に変更するコマンド (jsf)」や、「Fireworksでスライス名を一括置換するスクリプト (jsf)」、また、そのほか覚え書きれていない便利コマンド（後日公開予定です）や、ほかの方が作ったすばらしい拡張機能やスクリプトの使いどころなどについて、ご紹介したいと思います。

参加お申し込みは以下サイトの「このイベントに参加登録する」から事前登録をお願いします！お時間がありましたらぜひ覗いてみてもらえるとうれしいです。

第１回 Webridge Meeting : ATND

Fireworksのスライス名を簡単に変更するエクステンションと同様のことを実現するFireworks用のコマンド（jsf）を書きましたので覚え書きしておきます。使っているPCに管理者権限がなくてエクステンションがインストールできないといったときにお使いいただけます。スライスを選択してこのコマンドを実行すれば、選択したスライス名を変更するダイアログが表示されます（複数のスライス選択変更にも対応しています）。

var dom = fw.getDocumentDOM()
var sliceArray = new Array();

for (var i=0;i<fw.selection.length;i++){
 if(fw.selection[i] =="[object SliceHotspot]") sliceArray.push(i);
}
for (var i=0;i<sliceArray.length;i++){
 var target = sliceArray.length-i-1;
 var newName = prompt('Please input change slice name below.',fw.selection[target].baseName);
 if( newName != null) fw.selection[target].baseName = newName;
}

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用いただけます。jsfファイルをWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。コマンドメニューに加わればキーボードショートカットとして登録することができます！お困りの方はぜひこちらもご利用いただければと思います。

なお、一括してスライス名をふりたいときにはPIXEL LABさん制作のslice_nambering.jsf、一括してスライス名を置換したいときには、拙作Fireworksでスライス名を一括置換するスクリプト(jsf)が便利です！

Fireworksのスクリプトの実行、今日めんどいなあと思う作業があって調べてみたんですけど、便利すぎて衝撃的でした。今までどうして知らなかったんだろうという感じです。以下サイトでいくつか紹介されていますが、スライスに連番＋一括名前設定は効率的すぎてやばいです。さっそく使わさせてもらっています。

■オリジナルツール / Fireworks用オリジナルコマンド(jsf)一覧 (PIXEL LAB)
http://www.pixelimage.jp/blog/2008/02/_fireworks.html

で、上記サイトを参考に僕もFireworksでスライス名を一括置換するスクリプトを書いてみました。以下スクリプトを拡張子「jsf」で保存、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込んでご利用いただけます。「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に入れれば「コマンド」メニューに加わります。スライスを流用するのだけどそのままの名前では使えないときや、ガイドラインでハイフンは使用禁止でアンダースコアにしなきゃいけなくなったとか、なんにせよスライス名を置換したいシチュエーションってけっこうあるので覚え書きしておきます。

var dom = fw.getDocumentDOM()
var le = fw.selection.length;
var sliceArray = new Array();

for (var i=0;i<le;i++){if(fw.selection[i] =="[object SliceHotspot]")sliceArray.push(i);}
var leng = sliceArray.length;

var searchName = prompt('SEARCH',( fw.newName || ""));
fw.searchName = searchName;
var replaceStr = prompt('REPLACE',( fw.numberStr || ""));
fw.replaceStr = replaceStr;

for (var i=0;i<leng;i++){
    var n = sliceArray[leng-i-1];
    fw.selection[n].baseName = fw.selection[n].baseName.replace(fw.searchName,fw.replaceStr);
}

jsfファイルのダウンロードはこちらから