fitc2014 モダンなweb

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

モダンなWebはモダンなツールで創ろう！Andy Hall・アドビジャパン


@fenomas

だれだこいつ

@fenomas

日本在住歴もWeb歴も十数年

物理学専攻→ Web制作→ Flash開発→アドビで色々

現在の肩書がテクニカルエバンジェリスト

興味はデザインとコードをまたぐところ

カタコトでゴメンね

ゲーム好き、などなど


@fenomas

１．Web開発に関係なさそうないきなりデモの話


@fenomas

２．アドビとHTML

についての話


@fenomas

Adobeとしての活躍

contribute to a better web

better web experience

bring innovations to the web better tools for the web


@fenomas

CSS リージョン

Webの進化の事例：

現状の対応： iOS7 （標準対応！）IE、Safari （プレフィックス）Chrome, Opera（有効に設定する必要がある）Webkit （ナイトリービルド）


@fenomas

CSS フィルター


現状の対応： Chrome, Safari, iOS, Opera（プレフィックス）

filter: sepia(0.8);


@fenomas

カスタムフィルター


現状の対応：Chrome, Opera（有効に設定する必要がある）

Webkit （ナイトリービルド）


@fenomas

詳細情報：

html.adobe.com/jp


@fenomas

３．Web開発ツールの哲学的な話。


@fenomas

ひと昔のWeb開発：

ツール

作者

HTML


@fenomas

ひと昔のWeb開発：

作者

HTML


@fenomas

モダンなWeb開発：

作者

HTML5

ツールライブラリ


@fenomas

で、問題はこれ：

HTML5


デザイナプログラマ


@fenomas

で、問題はこれ：

HTML5


デザイナプログラマ

壁


@fenomas


@fenomas

４．アドビが提供するWeb開発ツールの紹介


@fenomas

アドビが提供HTML5ツールについて

Dreamweaver

一言でいうと、

ページ作りからサイト管理までの何でも屋さん


@fenomas


Muse


コードいらずのWebデザイン


@fenomas


Edge Animate


Webコンテンツにインタラクションと動きを


@fenomas


Edge Reflow


レスポンシブWebのデザインツール


@fenomas


Edge Code/Brackets


Webに特化したテキストエディター


@fenomas

５．PhotoshopとワークフローとGeneratorの話


@fenomas

デザイナ

HTML5


プログラマ壁


@fenomas

Generatorの話

Web開発向けの２新機能


@fenomas

Generatorの話


アセット生成


@fenomas

Generatorの話


Reflow連携

アセット生成


@fenomas

だがホントの主役は

「Generator」という新機能


ExtendScript


KVLR

ExtendScript


Node.js

KVLR

ExtendScript

Generator!


generator-core

Node.js

KVLR

ExtendScript

Generator!


generator-core

Node.js

KVLR

プラグイン

ExtendScript

プラグインプラグイン

Generator!


そしてさらに・・


@fenomas

ソースと説明：

github.com/andyhall/genera

tor-awesome-ja


@fenomas

６．宣伝の話ｗ


@fenomas

ツールの入手はCreative Cloudから

creative.adobe.com/


@fenomas

ご清聴ありがとうございました！

詳細情報：

html.adobe.com/jp

aphall.com

@fenomas

Technology