読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

無償でここまで使えるWeb制作ツール #devsumiC

勉強会

アドビのデベロッパーマーケティング 轟さん
担当は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と連携しているため実機(iPhoneiPad)でも確認出来る

無償ビルドの機能制限はあります。

Dreamweaver & Edge Tools