Adobe Web 統合開発環境のご紹介
-
Upload
tsuyoshi-nakao -
Category
Technology
-
view
413 -
download
3
description
Transcript of Adobe Web 統合開発環境のご紹介
![Page 1: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/1.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe Web 統合開発環境のご紹介仲尾 毅 | Adobe Creative Cloud エバンジェリスト
![Page 2: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/2.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
自己紹介
電気電子工学専攻 → Pro Video SE → Product Marketing → Evangelist
興味は、ユーザーと創り手 ( エンジニア ) のクロスポイント Creative Cloud 道場ブログ http://blogs.adobe.com/tnakao/ Creative Cloud 道場 on USTREAM 毎週木曜夜 8 時 趣味は、バンド、ビデオ、 Mac
@tsuyon仲尾 毅
Tsuyoshi NakaoAdobe Creative Cloud エバンジェリスト
![Page 3: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/3.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 4: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/4.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
![Page 5: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/5.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS
![Page 6: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/6.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS
![Page 7: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/7.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS
![Page 8: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/8.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 9: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/9.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 10: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/10.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
情報設計 / 画面設計
リッチコンテンツ制作
実装
テスト
![Page 11: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/11.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 12: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/12.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dreamweaver CC
CSS デザイナー 可変グリッドレイアウト
設定の同期 WebKit プレビュー
![Page 13: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/13.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いのまま。Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
Edge Reflow CCレスポンシブ デザイン ツール
プレビュー版
![Page 14: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/14.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate CCHTML5 アニメーション制作ツール
HTML5 / CSS3 / JavaScript によるアニメーションやインタラクティブコンテンツを直感的なタイムライン操作で制作。
![Page 15: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/15.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Code CC超軽量コードエディター
プレビュー版
HTML / CSS / JavaScript を効率よくコーディングしていくための、全く新しいコードエディター。
![Page 16: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/16.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CCモバイルサイトのリモート検証ツール
PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。
![Page 17: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/17.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CCモバイルサイトのリモート検証ツール
PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。
![Page 18: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/18.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML5- 新しい Web 標準と Adobe の取り組み -
![Page 19: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/19.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe の活動
contribute to a better web
better web experience
bring innovations to the web
better tools for the webウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を
![Page 20: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/20.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Contributing to the web ウェブへの貢献
表示ブレンドモード
カスタムフィルターClip Paths
レイアウトCSS RegionsCSS Shapes
プラットフォーム
Apache Cordova(PhoneGap)
コミュニティー & テスト Test the Web Forward
Web Platform ドキュメンテーション
![Page 21: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/21.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Web の進化の事例:
![Page 22: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/22.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Web の進化の事例:
filter: sepia(0.8);
![Page 23: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/23.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタム フィルター
Web の進化の事例:
![Page 24: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/24.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS シェイプ
Web の進化の事例:
現状の対応: Chrome, Opera (有効に設定する必要がある)
Webkit (ナイトリービルド)
![Page 25: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/25.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Web の進化の事例:
現状の対応: iOS7 (標準対応!)
IE 、 Safari (プレフィックス)
Chrome, Opera (有効に設定する必要がある)Webkit (ナイトリービルド)
![Page 26: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/26.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate 、 Reflow でビジュアルに作る
![Page 27: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/27.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Reflow でビジュアルに作る
![Page 28: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/28.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML5
contribute to a better web
better web experience
bring innovations to the web
better tools for the webウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を
![Page 29: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/29.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 30: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/30.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手は Creative Cloud から
30 日間無償体験Edge Reflow CC Preview と Edge Code CC
Preview はその後も無償 !
creative.adobe.com
![Page 31: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/31.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
リソース
Adobe Pinch Inwww.adobe.com/jp/jos/pinchin.html
Creative Cloud 道場ブログhttp://blogs.adobe.com/tnakao/
仲尾 毅 Tsuyoshi Nakao@tsuyon | [email protected]
![Page 32: Adobe Web 統合開発環境のご紹介](https://reader038.fdocuments.net/reader038/viewer/2022102717/5586d843d8b42a524a8b46b7/html5/thumbnails/32.jpg)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.