Más contenido relacionado
La actualidad más candente (20)
Similar a モバイルコンテンツ制作を効 率化するツールを使いこなせ (20)
Más de Keisuke Todoroki (15)
モバイルコンテンツ制作を効 率化するツールを使いこなせ
- 2. Who?
- 轟 啓介(とどろき けいすけ)
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE(7年)、AS3/Flex/AIR(2年)
- HTML/JS/PHPなどは必要な範囲で
@keisuke322
- USTREAM番組「ADC OnAir」MC
【緩募】都内で流しソー
- http://onair.adobe-adc.jp/ メンを食べられる店情報
を夏までにください。
- 3. Modern Web Needs
Modern Tools
HTML5とその関連技術で制作する「Modern Web」、
それに対して必要なものは「Modern Tools」である
- 4. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.0 Edge Reflow Edge Code Edge Inspect 1.0
sneak preview preview
Edge Web Fonts Typekit PhoneGap Build
Sep 26, 2012 - Debut
- 5. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.5 Edge Reflow Edge Code Edge Inspect 1.2
preview preview 3
Edge Web Fonts Typekit PhoneGap Build
Feb 15, 2013 - Updated!
- 6. E W
! Edge Reflow プレビュー版公開中
N
レスポンシブWebデザイン専用ツール
- 11. 早めのプロトタイプで回避
ここからEdge Reflow
投入!
ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」より
http://onair.adobe-adc.jp
- 13. Edge Reflow - 3つの特徴
- ブレークポイント設定
- ブラウザ幅に応じたレイアウトを定義
- ブラウザ幅別の「動く」デザインカンプを同時に作成
- CSSスタイル設定
- 様々なCSS3表現をコーディングなしで設定
- メディアクエリーで定義されたCSSも書き出し
- 強力なプレビュー機能
- PCブラウザだけでなく、Edge Inspect連携でスマホ、タ
ブレット上で、リアルタイムにデザインを確認
- 15. Phone Tablet PC
header header header
article article article article article article
1 1 2 1 2 3
footer
article3
article3
footer
footer
- 17. Edge Inspect - 3つの特徴
- リモートで画面遷移
- 母艦PCの画面遷移が接続されたデバイス上でも追従
- リモートで Web インスペクト
- 母艦PCからデバイス上のHTML画面に対して、Webイン
スペクトが可能(Developer Tools)
- リモートでスクリーンショット
- 母艦PCからボタン一発で全デバイスのHTML画面のスク
リーンショットを撮影し、母艦PCに保存
- 18. 入門ガイド
1. 接続デバイスが同じネットワーク
上にあることを確認
- 自動検出するには同サブネットに
- IPアドレス指定による手動接続可
2. デバイスをPCのChromeに接続
A.自動検出
B. 手動接続
3. デバイス上でページのデバッグ
- PCのChrome操作で画面遷移、イン
スペクション、画面ショット
- 20. Edge Code - 2つの特徴
- クイック編集
- Cmd + E (Mac) / Ctrl + E (Win)
- カーソルのあるHTMLタグのCSSやJSのプロパティ、メ
ソッドの定義をファイル切り替えせずにダイレクトに表
示
- ライブプレビュー
- Chromeブラウザと連携して、CSSの変更を保存する前
にライブプレビュー
- 21. A
T ED
!
New Features, Feb 15
PD
U ‣ preview 3 (2013/2/15)
- エディター機能強化
- エディターコアのCodeMirror ver. 3によるエ
ディター機能の強化
- CSS コード補完強化、定義検索
- ネイティブ メニュー
‣ preview 2 (2012/12/13)
- クイック編集にカラーピッカー追加
- Edge Web Fonts サポート
- プロジェクト設定
- WebサーバーURL指定でサーバーサイドコン
テンツにも対応
- 22. Brackets
- オープンソースのコードエディター
- Edge Codeはアドビ ディストリビューション
- http://brackets.io
- Feature Backlog : http://bit.ly/BracketsBacklog
Brackets Adobe Edge Code
+ PhoneGap Build
+ Edge Web Fonts
- 24. Edge Animate - 3つの特徴
- タイムライン操作によるアニメーション設定
- プロパティ単位のキーフレーム編集 / イージング機能 /
ピンツール etc
- JavaScript スニペット
- JSが苦手な人でも基本的なスクリプトを一発挿入
- HTML5非対応ブラウザーのフォールバック設定
- 代替画像設定、chrome Frame プロンプト設定にも対応
- 25. 様々な用途
アニメーションバナー 既存サイトへの アニメーション /
(スマホでも動作) アニメーション追加 ゲームコンテンツ
押井守監督「ちまみれマイ・らぶ」
Comic Animation
電子出版コンテンツ
- 26. レスポンシブに
px %
異なる画面サイズに対応させるために、コン
テンツをリキッドにすることも検討する
- 27. レスポンシブに
Edge Animate Sample リキッドレイアウト
TRY http://html.adobe.com/edge/animate/showcase/catch/catch.html
DOWNLOAD http://download.macromedia.com/pub/developer/edge-animate/
showcase-examples/EA_Sample_catch.zip
- 28. A
T ED
!
New Features, Feb 15
PD
U - グラデーションサポート
- CSSの線形/円形グラデーション
- Edge Web Fonts サポート
- タイポグラフィ導入を簡単に提供
* 現時点では英文fontのみ
- CSS Filter サポート
- 反転、色相循環、コントラスト、
彩度、セピア、グレースケール…
* 現時点ではChrome, Safari, iOS 6, BlackBerry 10のみ
- 29. HTML5 アニメーション
DOM Canvas CSS
アニメーション アニメーション アニメーション
+
Edge Animate CreateJS Flash Professional CreateJS Dreamweaver
- 31. 無償ビルドの機能制限
無償ビルドは Creative Cloud の無償メンバーシップから入手
リリースビルド 機能制限
Edge Animate 1.5 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供
Edge Code preview 3 なし
HTML / CSS / JS コードエディタ
Edge Inspect 同時接続
モバイルサイトのリモート検証
1.2 デバイス1台
Edge Reflow preview なし
レスポンシブWebデザインツール
* 2013年2月15日現在
- 32. 無償サービスの機能制限
サービス 機能制限
Edge Web Fonts 正式 なし
無償のWebフォントサービス
現在は英文フォントのみ
PhoneGap Build privateアプリ1つ
クラウドでモバイルアプリを作成
正式 publicアプリ無制限
* 2013年2月15日現在
- 33. Dreamweaver & Edge Tools
統合制作環境 統合制作環境と専用ツールは役割
が異なる。
これらを自由に組み合わせて最適
なワークフローを構築する事を提
案。
Dreamweaver
web workflow
Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect
専用ツール
- 35. Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。
http://html.adobe.com/jp
- 36. ADC
Adobe Developer Connection
Web技術ポータルサイト。著名クリエイター/開発
者による技術記事を定期的に掲載。
http://www.adobe.com/jp/devnet/
- 38. 本日のツール
Edge Edge
Reflow Inspect
レスポンシブWebデザイン モバイルサイトのリモート
専用ツール 検証ツール
Edge Edge
Code Animate
まったく新しい超軽量の 直感的なHTML5アニメーシ
コードエディター ョン制作ツール