「Fireworks Users Group第一回勉強会」に行ってきたよ。

火曜／金曜担当の@cremaです。

本日は、「【告知】初心者向けIllustrator勉強Ustします。（2010年8月27日19:00-21:00）」の予告通りに準備を進めているため、早めに今日担当分の記事をアップしてしまいます。

今日のネタは、2010年8月25日に大崎のAdobe会議室で開催された「Fireworks Users Group第一回勉強会」の参加ツイートまとめです。

例によって例のごとく、無編集ツイートしたまんまでお送りしますので、分かりにくく申し訳ありません。Fireworksの拡張機能を作りたい方には、ヒントになることがあるかもしれません。では、スタート。

渋谷から大崎に向かってます。
posted at 17:21:19

Adobeなう。
posted at 18:26:32

いまから2時間程度、「Fireworks Users Group第一回勉強会」の実況ツイートをします。TL汚して申し訳ありません。気になられる方は、フォロー解除してくださいませ。
posted at 18:30:24

そろそろ開始です。 #fwug
posted at 18:36:09

#fwug 「Fireworks Users Groupについて」日本には、いままで無かった。6月12日のCSS Nite in OMOTESANDO vol.2にて発表。本日初めての勉強会。できるだけ三ヶ月にいっぺんぐらい開催したいとのこと。
posted at 18:41:48

#fwug この会の目的は、Fwのノウハウを共有したり勉強会をしつつ、隅田川にFireworksを打ち上げることw Fw使いは今後「花火職人」と呼ぶそうです。暫定会長は @kazuma87 さん。
posted at 18:44:07

#fwug 色々お願いしたい人が鳥取に住んでるとのこと（笑）
posted at 18:44:54

がんばりまーす！ RT @mariroom: 今日は@cremaのレポに期待！FW User Group勉強会 RT @crema #fwug 「Fireworks Users Groupについて」日本には、いままで無かった。6月12日のCSS Nite in OMOTESAND
posted at 18:45:29

#fwug @kazuma87 による「Fireworksの拡張機能　使い方・作り方」が始まります。
posted at 18:47:51

#fwug Fireworksの拡張機能の盛り上がりがいかにも少ない。Adobe Exchangeには、昨日の時点で8個しか登録されていない。
posted at 18:49:49

#fwug 拡張機能とは何か。Adobe製品のさらに拡張するために作られた仕組み。ユーザーが独自に作成して利用することが可能。Fwの場合、初期状態でもいくつか組み込まれている（ので、使わない場合はずせば起動が速くなるw）。
posted at 18:52:38

#fwug 拡張機能を上手く利用することで、これまで以上に便利に製品を利用することが可能に。拡張期のは、通常mxp形式かzxp形式（CS5以降）で提供されている→ダブルクリックするとAdobe Extention Managerが起動して、拡張機能をインストール。
posted at 18:54:23

@shoshirasaka 一緒に花火職人になりましょw
posted at 18:55:01

#fwug アンインストールもExtention Managerから簡単に行うことができる。
posted at 18:56:52

#fwug 拡張機能を使ってみる。便利なものをいくつか紹介。Fw拡張機能作成の第一人者John Dunningさん作成のFavicon拡張機能。マルチアイコンも作成できる。MacではCS5以降のみ対応。 http://bit.ly/R6rwZ
posted at 18:59:50

#fwug インストールすると「コマンドメニュー」の中に表示される。「ページ」の中に、自動で16x16 32x32 64x64の三種類を描けるように作成される。
posted at 19:01:16

#fwug それぞれのサイズのfaviconを描いた後「Export as Favicon」を選ぶと、三種類の大きさを持ったマルチアイコンのfavicon.icoが生成される。
posted at 19:03:59

#fwug @kazuma87 さん作成の複製配置拡張機能。オブジェクトを選択して行と列を指定すると、自動で並べて複製してくれる。便利。
posted at 19:06:30

#fwug transformar拡張機能と複製配置拡張機能を組み合わせる方法。複製配置拡張機能でオブジェクトを20x20個に増やす。その後、Transformar拡張機能で、scaleやalphaなどの値を設定する。自動で、ランダムで色とりどりのオブジェクト群に変化する。
posted at 19:09:32

#fwug Transformer拡張機能＞ http://bit.ly/cqG6WG
posted at 19:10:42

#fwug 拡張機能の作成。ヒストリーパネルに残った履歴を流用する。ヒストリーパネルの中で保存したい手順をshiftキーを押しながら複数選択。右下の「保存」アイコンをクリック。「線で区切られた手順は...」云々のアラートが出るが、大概大丈夫。OKを押す。
posted at 19:13:29

#fwug 保存した手順はコマンドメニューに入るので、随時再利用可能。難しい知識無しに、よく使う操作をコマンドとして登録できる。
posted at 19:16:16

#fwug 拡張機能の中身。拡張機能は、JavaScriptで記述される。FireworksAPIを介してFireworksの機能を扱う。ヒストリーパネルから「手順をクリップボードにコピー」を行うことで、必要なコードをそのまま取得可能。
posted at 19:18:22

#fwug コピーした状態でテキストエディタにペーストすると、JavaScriptの中身を見ることができる。これをいじることで、比較的簡単に拡張機能を作成することが可能。必要なAPIを利用しつつ、JSで記述。
posted at 19:21:30

#fwug 作成したファイルを拡張子.jsfにして /Applications/Abobe Firewoeks CS5/Configrations/xxxxx（聞き取れず）の中に置く（macの場合）。
posted at 19:22:38

#fwug UIの作成。単なるコマンドではユーザーからの入力を受け付けられないので、ダイアログボックスやFlashパネルを利用する（Flexでもできるっぽい）。UIを有するパネルを配置する時には、収める場所が違う点に注意。（置く場所メモれなかったので、後でチェック）。
posted at 19:25:52

#fwug 配布用mxpの作成。作成した拡張機能を他の人に使ってもらいやすくなる。mxiファイルを作成。作者名、裁定要求バージョン、機能の説明、ファイル名や設置場所の指定、現在置いてあるファイルパスなど。
posted at 19:27:29

#fwug mxiファイルの中身の説明。「mxiファイル　書き方」等で検索すること。 Extention Managerを使って「mxp拡張機能のパッケージ化」を選んでmxiファイルを指定する。Adobe Exchangeにも公開できる。
posted at 19:31:52

#fwug 足りないものは、自分で作ってみる。JavaScriptがある程度記述できれば、作成可能。Adobe Excgangeにも公開できるので、ぜひ。
posted at 19:33:00

#fwug @kazuma87さんのお話終了。日頃講師をされているだけあって、よどみなく分かりやすいお話でした！
posted at 19:34:49

#fwug 休憩終わり。 @risay さんによる「swfパネル」のお話です。（swfって「スイフ」って発音するのね！）
posted at 19:48:24

#fwug swfパネルを知ろう。コマンドから開けるパネル。モーダルダイアログなので、実行中に中断されたくない場合におすすめ。Win版はパネル自体に「閉じる」ボタンがあるが、Mac版には無いので、必ず「閉じる」ボタンを自作すること。
posted at 19:50:32

#fwug ウィンドウから開けるパネル。フローティングパネルなので、操作をしながら利用できる。ユーザの操作を補足できる。ツールが選択されたとき、ドキュメントが選択されたとき、など、Fireworksからイベントが送られる。
posted at 19:52:12

#fwug 注意点。Win版では、ウィンドウを閉じたりパネルを切り替えると再読み込みされ、入力値と変更が初期化される。ので、入力値や変更を保存する仕組みを実装したほうがいい。Mac版では、再起動するまで保存される。
posted at 19:54:28

#fwug #fwug01 swfパネル開発環境。swfを生成できるソフトなら大体作れる。Flash、Flex / Flash Builder、Flexフレームワーク。Java＋ライブラリ。
posted at 19:56:25

あれー？今日最初に告知されたのは、#fwug だったのですが...。T @akira_maru: @crema ほらやっぱりハッシュタグ #fwug01 ですよ。 RT @fwug: ただ今湯口さんによる講演中です #fwug01
posted at 19:58:16

そんなことないです！分かりやすくて素晴らしかったです。 RT @KAZUMA87: @crema ありがとうございます。少し内容が薄くて申し訳ありません。
posted at 19:59:38

#fwug #fwug01 swfを作るアプリケーションによってはFw内で実行すると暴走する場合があるので、強制終了する手段を準備して開始した方が良い。
posted at 20:00:49

了解です！この後、両刀使いにします。 @KAZUMA87: @crema あ、スイマセン、イベント開始までは、#fwug01で、開始後は#fwugという扱いにしたいと思いつつ、なんか適当になってしまいました。
posted at 20:01:21

#fwug01 #fwug デバッグのお話。Falsh Tlacerでデバッグのデモ。（うぉー、ここら辺になると、かなり勉強しないとついていけない！）
posted at 20:03:11

#fwug01 #fwug ActionScriptのバージョンは？AS3は、Flashのノウハウが無い場合、スクリプトを書くのが逆に簡単。湯口さんはこっちに慣れている。AS2は湯口さんは使用していない。Flash Player8にしておくと安全。
posted at 20:05:05

#fwug01 #fwug MMExcute（要確認）。fw.runSctipe。MMEndCommand（キャンセルなどに使う）。Flash Builderのデモ。Flexのプロジェクトを作り、ローマ字でプロジェクト名をつける。
posted at 20:07:24

#fwug01 #fwug コンボボックスなどを簡単に配置。（Flash Builderって初めて見た！）
posted at 20:10:16

#fwug01 #fwug 作成が終わったら、コマンドとして保存。.jsfファイルができる。それをDwで開く。
posted at 20:12:35

@foresuke ごめんねごめんね＞＜　近いうちに夜お茶しに行こうね！！！！！
posted at 20:13:05

#fwug01 #fwug （@risay さんのプレゼン資料はFwで出来ているので、プレゼンしながらその場でコマンドを実行できたりして、すごく便利なのだった。）
posted at 20:14:01

#fwug01 #fwug .jsfファイルの編集デモ中。実行する値を変数に置き換えてみる。そしてその変数をユーザーの入力した値に置き換えるように、書き換える。
posted at 20:15:45

#fwug01 #fwug （コードを書き写す余力は無いので、資料公開されるのを待ちたいと思います。すみません...）
posted at 20:19:11

#fwug #fwug01 会場の様子。 http://yfrog.com/f11exzj
posted at 20:20:49

なるほどです！ でもFwでできてる資料もあったような。。。 RT @akira_maru: FWじゃなくて、swfで出来てます。Flash Playerが入っているので動作します。 @crema: #fwug01 #fwug （@risay さんのプレゼン資料はFwで出来ているの
posted at 20:24:11

#fwug01 #fwug （JS書けないデザイナーには、ここら辺のお話は難しいなぁ。やっぱりJS書けないと、生き残れないっすね......。）
posted at 20:25:34

watching: Fireworks Users Group | 最終的に隅田川にFireworksを打ち上げるのを目標にする会です http://fwug.net/
posted at 20:27:28

さすがです！RT @akira_maru: 自分は簡単なJSをFWのコマンドを作成することで勉強しました。そこから進歩がないけど...。RT @crema: #fwug01 #fwug （JS書けないデザイナーには、ここら辺のお話は難しいなぁ。やっぱりJS書けないと、生き残れないっ
posted at 20:30:25

#fwug01 #fwug スクリプトで気をつけることは？エラーが起きた時の反応を知っておく。表示されない、何かがロード中→swfに問題あり。FlashTracerにエラーが出ていることも。バージョンの問題だったり。ボタンが効かない→テスト済みなら8割jsfファイルの記述ミス。
posted at 20:36:00

#fwug01 #fwug @risay さんの今日のお話は、基本的に RsStudio Style - Fireworks機能拡張 Flashパネル作成用AS3メモ http://bit.ly/u5teA に掲載されているそうです！
posted at 20:38:38

#fwug01 #fwug お話終了！後半まったくついていけなくて申し訳なかったのですが、Fwをここまで使いこなすことができるのだということが、とてもよく分かりました。 @kazuma87 @risay @mariroom さんたちを始め、皆さまありがとうございました！
posted at 20:40:31

#fwug01 #fwug fwugのツイッターアカウントは、 @fwug 、 Dwのアカウント @dwug もあるそうです。興味ある方はフォローしてみてくださいませ。
posted at 20:42:29

これにて実況終わります。帰宅して仕事しまーす。
posted at 20:42:47

@akira_maru あきらさん、色々フォローありがとうございました！ なかなか難しい内容でしたので、復習に務めたいと思います。
posted at 20:57:07

#fwug #fwug01 アプリアイコンのシールもらった！ http://yfrog.com/nazawrj
posted at 21:52:56