adobe セッション for enterprise x html5 web application conference 2014
DESCRIPTION
2014年2月28日開催のEnterprise x HTML5 Web Application Conference 2014 Adobe セッション スライドです。 タイトル「ゼロコーディングでブラウザ動作プロトタイプを作る最新のWeb制作ツール」 Edge ツールをご紹介TRANSCRIPT
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ゼロコーディングでブラウザ動作プロトタイプを作る最新の Web 制作ツール仲尾 毅 | Adobe Creative Cloud エバンジェリスト
© 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 エバンジェリスト
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML5- 新しい Web 標準と Adobe の取り組み -
© 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ウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を
© 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 ドキュメンテーション
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Web の進化の事例:
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Web の進化の事例:
filter: sepia(0.8);
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタム フィルター
Web の進化の事例:
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS シェイプ
Web の進化の事例:
現状の対応: Chrome, Opera (有効に設定する必要がある)
Webkit (ナイトリービルド)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Web の進化の事例:
現状の対応: iOS7 (標準対応!)
IE 、 Safari (プレフィックス)
Chrome, Opera (有効に設定する必要がある)Webkit (ナイトリービルド)
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate 、 Reflow でビジュアルに作る
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Reflow でビジュアルに作る
© 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ウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務系アプリの課題- 使い勝手の重要性 -
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーションが成し遂げるべき事
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーションが成し遂げるべき事
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーションが成し遂げるべき事
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーション開発の要件定義
機能
• アプリケーションで実行可能な業務機能
非機能
• 保守 / 運用 / 信頼 / セキュリティなど
ユーザビリティ
• 使い勝手
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーションが成し遂げるべき事
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
開発
• コスト• リソース• 時間
運用
?
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
業務アプリケーションが成し遂げるべき事
http://builder.japan.zdnet.com/ria-ajax/20381355/1/
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ユーザビリティ向上に必要な開発プロセス
プロトタイピング
デザインカンプ
UI UX
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ユーザビリティ向上に必要な開発プロセス
要件定義 プロトタイピング 評価
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
情報設計
画面設計
デザインカンプ 実装 テスト
問題発生 !
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
情報設計
画面設計
デザインカンプ
実装( テスト )
プロトタイプ
( テスト )
画面設計
プロトタイプ
( テスト )
工程を分割し何度も回す
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tools- ウェブのためのより良いツール -
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tools
Edge Animate CC
Adobe Edge Tools & Services
洗練された最先端の Web を構築するための最新ツール & サービス
Edge Reflow CC Edge Code CC Edge Inspect CC
Edge Web Fonts Typekit PhoneGap Build
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アプリパッケージ化Web フォント
各ツールの役割
情報設計画面設計 実装 テスト
リッチコンテンツ制作
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アプリパッケージ化Web フォント
各ツールの役割
情報設計画面設計 実装 テスト
リッチコンテンツ制作
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いのまま。Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
Edge Reflow CCレスポンシブ デザイン ツール
プレビュー版
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CCモバイルサイトのリモート検証ツール
PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CCモバイルサイトのリモート検証ツール
PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
DEMOEdge Reflow CC と Edge Inspect CC によ
る、
プロトタイプ制作と実機テスト
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
情報設計
画面設計
デザインカンプ
実装( テスト )
プロトタイプ
( テスト )
画面設計
プロトタイプ
( テスト )
工程を分割し何度も回す
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
まとめ
ユーザビリティ向上 圧倒的費用対効果
UI/UX デザイン低コストで実現
コーディングゼロで実働プロト作成
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate CC
Adobe Edge Tools & Services
洗練された最先端の Web を構築するための最新ツール & サービス
Edge Reflow CC Edge Code CC Edge Inspect CC
Edge Web Fonts Typekit PhoneGap Build
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手は Creative Cloud から
30 日間無償体験Edge Reflow CC Preview と Edge Code CC
Preview はその後も無償 !
creative.adobe.com
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
リソース
Adobe & HTMLhtml.adobe.com/jp
Adobe Pinch Inwww.adobe.com/jp/jos/
pinchin.html
仲尾 毅 Tsuyoshi Nakao@tsuyon | [email protected]
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
appendix- その他の Edge Tools & Services -
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Code CC超軽量コードエディター
プレビュー版
HTML / CSS / JavaScript を効率よくコーディングしていくための、全く新しいコードエディター。
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate CCHTML5 アニメーション制作ツール
HTML5 / CSS3 / JavaScript によるアニメーションやインタラクティブコンテンツを直感的なタイムライン操作で制作。
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
フリー・オープンソースHTML5 モバイルアプリ開発フレームワーク
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
クラウド上でパッケージを生成build.phonegap.com
PhoneGap Build