My deck from FITC 2014

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.