アドビのデベロッパーマーケティング 轟さん
担当はFlashからHTML5まで多岐
HTML5勉強していますか？
色々なことは出来そうだが、生産性は？
Flashみたいなことが出来る？
表現力はある？
コストに見合わないアウトプットは厳しい？
Modern Web Needs Modern Tools
モダンなツールを用意しなきゃああ
Adobe Edge ツール & サービス
Edge Atnimateアップデート
Adobe Edge Animate(完全無料)
HTMLアニメーションツール
インタラクティブコンテンツの制作ツール
タイムライン操作によるアニメーション設定 など
アニメーションバナーはスマホじゃ作りづらい
HTML記述されている要素にたいして後からアニメーションを追加できる
今日のアップデートでCSSのグラデーションが使えるようになった
グラデーションの追加も簡単!!
CSS or 画像
Adobe Edge Web Font(これもまた無料)
web fontの追加(これも今日のアップデートで使えるように)
警告も出るのでIE対策もちょくちょくやってこう
アニメーションの始点と終点を設定する
「コーディングせずに」設定できる
- イベント
- アニメーション
- グラデーション
- リダイレクト
- CSS3のfilter(これも今日のアップデートで追加)
ただしCSS関連については、ブラウザによって見えかたが違うので、都度警告が下のほうに出る
既存のサイトをカスタマイズ
Edge Animateで作った制作物に関連するファイルを全て指定の場所に保存出来る。
ごにょごにょしてHTMLにコードが追加される。
Adobeでうまく代替画像を用意することも出来る
押井守がEdge Animateで新作の2話を作るらしいよ
Edge Animateで音も出る
DOM CSS Canvas すべて対応
Adobe Edge Code
コードエディタ CSS変更をリアルタイムでブラウザに反映する
どこかのbodyの背景色を変更したい→どこのbodyや!!探すの面倒じゃ!!っていうのを解決する
当てられているCSSをリストアップしてくれる(ブラウザの開発者ツール使えばいいのでは…)
marginの微妙な設定も細かくサイトを見ながらカスタマイズ出来る
color pickerを使って細かく色を変更出来る
JavaScriptも編集出来る
Go to definition でサクサクっと検索できる。(検索はインクリメンタル)
HTML CSS Javascriptで構成されたエディタなので、自分で拡張することも可能である
adobe developer connection
Hackasonも5月以降にやる予定
Brackets
オープンソースのコードエディター Edge Codeはアドビディストリビューション
(feature site log)
Adobe Edge Reflow
レスポンシブデザインって来てるかどうか分からないけど、とりあえず注目されている
提供側の予算のなさも相俟って
情報デザインの壁 外ならスマホ 家ならタブレット オフィスならPC そのデバイスに合わせてどうやって情報を順位づけするかレイアウトするかはかなり難しい
レイアウトデザインの壁
イテレーションの壁 システムでもないのにデスマーチはしたくない
基本はグリッド (邪魔なら消せる)
D&Dで画面サイズに合わせて要素のサイズや色を変更出来る
Chromeでプレビューできるが、ソースコードの吐き出しはありません。
プレビューはAdge Inspectと連携しているため実機(iPhoneやiPad)でも確認出来る
無償ビルドの機能制限はあります。
Dreamweaver & Edge Tools
