kei3.jp | head -n 10 diary

今日のAdobeのイベントはUstareamで配信が有り、途中までライブで見ていたのですが、ここの所不規則な生活が続いていたため、眠くなり、いつの間にか寝てしまってました。録画があったので、それを見て気になった部分を列挙しておきます。

録画自体は、下記の場所にあり、Web関連は、1時間1分あたりから始まります。

Ustream.tv: ユーザー AdobeCreativeStation: 第２部, Recorded on 2012/04/24. その他
>>関連リンク

「FireworksでCSS3」

Dreamweaverの話からかと思ったら、Fireworksで作った形状からスタイルシートの抽出。サイズや、グラデーション、角丸の情報をベンダープレフィックス付きでクリップボードにコピー出来、簡単にDreamweaverへ貼付け出来る様です。個人的には、管理を考えるとLESSファイルへの書き出しもサポートしてほしい所。スタイルシートをそのままCSSファイルで管理している以上、Dreamweaverでスタイルシートを記述したり管理したくないです。

「レスポンシブウェブデザイン」 at 1:08

まずは、レスポンシブウェブデザインの概要説明からはじまり、新機能の「可変グリッドレイアウト」の紹介。CS5にもマルチスクリーンプレビューからメディアクエリを追加出来たりしましたが、CS6からは新規にページを作る時にグリッドレイアウトと組み合わせて、ページを作り始められるようです。新規に作ったページにrespond.min.jsと見えたので、ポリフィル用に Scott Jehl氏のRespondを使っているのかもしれません。

scottjehl/Respond · GitHub
>>関連リンク

実際にグリッドレイアウトを三種類のスクリーン用にデモされてましたが、書き出すスタイルシートは一つのCSSファイルに書き出すようです。簡単ではあるけど、ファイルサイズを最適化すべきモバイル端末もすべてのスタイルシートを読み込む事になってしまいます。事前に公開されていたビデオを見ても疑問に思っていた部分がそのままの様です。1年くらい前だったら、これでも良かったかもしれませんが、現状は不味いですね。素早くプロトタイプを作る場合には良いかもしれませんが、このまま納品は良くないと思います。

「Edgeの紹介」 at 1:19

DreamweaverでHTML5のアニメーション出来るの？という話から、Edge Preview 5を使ってデモ。まずは簡単な赤い矩形が移動するアニメーション。次に、既存のウェブページを読み込んでテキストに透明度を変化させるアニメーションを追加。

Edgeの正式リリースは夏の予定。

「Flash Professional」 at 1:27

最近のFlashの話という事で、UnityのサンプルゲームをFlash書き出ししたものを一瞬だけ紹介して、すぐさまFlash CS6のデモ。

Flash CS6新機能「スプライトシート生成」

画像形式の選択などあり、書き出し形式が、JSON、JSON-Array、Sparrow v.1、Sparrow v.2、Starling、cocos2d v.2、cocos2d v.3、easel.js

「FlashからHTML5を直接書き出す」 at 1:31

無償で提供されているToolkit for CreatJSを使用して、パブリッシュボタンを押すだけで、HTML5のCanvasとJavascriptを使った書き出しが出来る。

Flash to HTML5 | Learn more about the CreateJS toolkit
>>関連リンク

「宣伝」 at 1:34

明日(4月25日)、夜8時からのADC OnAirからWebツールの最新情報を紹介するUstream番組。

Adobe Developer Connection
>>関連リンク

5月19日(土曜日) のADC MEETUPでアドビの最新 HTML5 制作ツールの紹介イベント。

Adobe - Adobe Developer Connection Presents ADC MEETUP ROUND 05 HTML5 Design Tools
>>関連リンク


以上でウェブ関連ツールの紹介が終わりましたが、昨日(2012年4月23日)、今回触れる事がなかったFlash Catalystはひっそりと開発と販売が終了。HTML5へ注力する事を考えると当然ですね。Edge自体がCatalystに吸収される選択肢もあったかなと思うのですが、割り切ってリストラしたいみたいです。

Adobe Flash Catalyst CS5.5
>>関連リンク


関連情報

アドビ クリエイティブ クラウド | Adobe Creative Cloud
>>関連リンク