More Related Content
Similar to FITC2014 モダンなWeb (20)
FITC2014 モダンなWeb
- 1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
モダンなWebはモダンなツールで創ろう！
Andy Hall・アドビジャパン
- 2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
だれだこいつ
@fenomas
日本在住歴もWeb歴も十数年
物理学専攻 → Web制作 → Flash開発 → アドビで色々
現在の肩書がテクニカルエバンジェリスト
興味はデザインとコードをまたぐところ
カタコトでゴメンね
ゲーム好き、などなど
- 3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
１．Web開発に
関係なさそうな
いきなりデモの話
- 4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
２．アドビとHTML
についての話
- 6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
Adobeとしての活躍
contribute to a better web
better web experience
bring innovations to the web better tools for the web
- 7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
CSS リージョン
Webの進化の事例：
現状の対応： iOS7 （標準対応！）
IE、Safari （プレフィックス）
Chrome, Opera（有効に設定する必要がある）
Webkit （ナイトリービルド）
- 8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
CSS フィルター
Webの進化の事例：
現状の対応： Chrome, Safari, iOS, Opera
（プレフィックス）
filter: sepia(0.8);
- 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
カスタム フィルター
Webの進化の事例：
現状の対応：
Chrome, Opera
（有効に設定する必要がある）
Webkit （ナイトリービルド）
- 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
詳細情報：
html.adobe.com/jp
- 11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
３．Web開発ツール
の哲学的な話。
- 12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
ひと昔のWeb開発：
ツール
作者
HTML
- 13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
ひと昔のWeb開発：
作者
HTML
- 14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
モダンなWeb開発：
作者
HTML5
ツール ライブラリ
- 15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
で、問題はこれ：
HTML5
ツール ライブラリ
デザイナ プログラマ
- 16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
で、問題はこれ：
HTML5
ツール ライブラリ
デザイナ プログラマ
壁
- 17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
- 18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
４．アドビが
提供するWeb開発
ツールの紹介
- 19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
アドビが提供HTML5ツールについて
Dreamweaver
一言でいうと、
ページ作りから
サイト管理までの
何でも屋さん
- 20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
アドビが提供HTML5ツールについて
Muse
一言でいうと、
コードいらずの
Webデザイン
- 21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
アドビが提供HTML5ツールについて
Edge Animate
一言でいうと、
Webコンテンツに
インタラクションと
動きを
- 22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
アドビが提供HTML5ツールについて
Edge Reflow
一言でいうと、
レスポンシブWebの
デザインツール
- 23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
アドビが提供HTML5ツールについて
Edge Code/Brackets
一言でいうと、
Webに特化した
テキストエディター
- 24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
５．Photoshopと
ワークフローと
Generatorの話
- 25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
デザイナ
HTML5
ツール ライブラリ
プログラマ
壁
- 26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
Generatorの話
Web開発向けの２新機能
- 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
Generatorの話
Web開発向けの２新機能
アセット生成
- 28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
Generatorの話
Web開発向けの２新機能
Reflow連携
アセット生成
- 29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
だがホントの主役は
「Generator」
という新機能
- 30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ExtendScript
- 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
KVLR
ExtendScript
- 33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Node.js
KVLR
ExtendScript
Generator!
- 34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
generator-core
Node.js
KVLR
ExtendScript
Generator!
- 35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
generator-core
Node.js
KVLR
プラグイン
ExtendScript
プラグイン プラグイ
Generator!
- 36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
そしてさらに・・
- 37. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
ソースと説明：
github.com/andyhall/genera
tor-awesome-ja
- 38. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
６．宣伝の話ｗ
- 39. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
ツールの入手はCreative Cloudから
creative.adobe.com/
- 40. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
@fenomas
ご清聴ありがとうございました！
詳細情報：
html.adobe.com/jp
aphall.com
@fenomas
- 41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
