Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

モバイルコンテンツ制作を効 率化するツールを使いこなせ

2,648 views

Published on

ABC 2013 Springで発表したAdobe Edgeツールの紹介資料です。

Published in: Technology
  • Be the first to comment

モバイルコンテンツ制作を効 率化するツールを使いこなせ

  1. 1. モバイルコンテンツ制作を効率化するツールを使いこなせ - Adobe Edge ツール & サービス - ABC Spring 2013
  2. 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. 3. Modern Web Needs Modern ToolsHTML5とその関連技術で制作する「Modern Web」、 それに対して必要なものは「Modern Tools」である
  4. 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. 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. 6. E W ! Edge Reflow プレビュー版公開中N レスポンシブWebデザイン専用ツール
  7. 7. レスポンシブWebデザイン (RWD) 1つのHTMLで様々な画面サイズのデバイスに対応
  8. 8. RWDのコスト依頼者PCもスマホも1ソースでコスト削減制作者制作難易度はUP / 安易な見積もりは危険
  9. 9. 従来ワークフローのリスク ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」より http://onair.adobe-adc.jp
  10. 10. RWDのリスク単に画面サイズが異なる話ではないデバイスによって利用シーンが異なる 情報の優先度が異なる 情報設計の重要性が非常に高い
  11. 11. 早めのプロトタイプで回避 ここからEdge Reflow 投入! ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」より http://onair.adobe-adc.jp
  12. 12. レスポンシブWebデザインを もっと自由に、簡単に。
  13. 13. Edge Reflow - 3つの特徴- ブレークポイント設定 - ブラウザ幅に応じたレイアウトを定義 - ブラウザ幅別の「動く」デザインカンプを同時に作成- CSSスタイル設定 - 様々なCSS3表現をコーディングなしで設定 - メディアクエリーで定義されたCSSも書き出し- 強力なプレビュー機能 - PCブラウザだけでなく、Edge Inspect連携でスマホ、タ ブレット上で、リアルタイムにデザインを確認
  14. 14. Phone Tablet PC
  15. 15. Phone Tablet PCheader header headerarticle article article article article article 1 1 2 1 2 3 footer article3article3 footerfooter
  16. 16. Edge Inspectモバイルサイトのリモート検証ツール
  17. 17. Edge Inspect - 3つの特徴- リモートで画面遷移 - 母艦PCの画面遷移が接続されたデバイス上でも追従- リモートで Web インスペクト - 母艦PCからデバイス上のHTML画面に対して、Webイン スペクトが可能(Developer Tools)- リモートでスクリーンショット - 母艦PCからボタン一発で全デバイスのHTML画面のスク リーンショットを撮影し、母艦PCに保存
  18. 18. 入門ガイド1. 接続デバイスが同じネットワーク 上にあることを確認 - 自動検出するには同サブネットに - IPアドレス指定による手動接続可2. デバイスをPCのChromeに接続 A.自動検出 B. 手動接続3. デバイス上でページのデバッグ - PCのChrome操作で画面遷移、イン スペクション、画面ショット
  19. 19. Edge Code プレビュー版公開中まったく新しい超軽量コードエディター
  20. 20. Edge Code - 2つの特徴- クイック編集 - Cmd + E (Mac) / Ctrl + E (Win) - カーソルのあるHTMLタグのCSSやJSのプロパティ、メ ソッドの定義をファイル切り替えせずにダイレクトに表 示- ライブプレビュー - Chromeブラウザと連携して、CSSの変更を保存する前 にライブプレビュー
  21. 21. A T ED ! New Features, Feb 15 PDU ‣ preview 3 (2013/2/15) - エディター機能強化 - エディターコアのCodeMirror ver. 3によるエ ディター機能の強化 - CSS コード補完強化、定義検索 - ネイティブ メニュー ‣ preview 2 (2012/12/13) - クイック編集にカラーピッカー追加 - Edge Web Fonts サポート - プロジェクト設定 - WebサーバーURL指定でサーバーサイドコン テンツにも対応
  22. 22. Brackets- オープンソースのコードエディター- Edge Codeはアドビ ディストリビューション- http://brackets.io - Feature Backlog : http://bit.ly/BracketsBacklog Brackets Adobe Edge Code + PhoneGap Build + Edge Web Fonts
  23. 23. Edge Animate 正式版無償提供中直感的なHTML5アニメーション制作ツール
  24. 24. Edge Animate - 3つの特徴- タイムライン操作によるアニメーション設定 - プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc- JavaScript スニペット - JSが苦手な人でも基本的なスクリプトを一発挿入- HTML5非対応ブラウザーのフォールバック設定 - 代替画像設定、chrome Frame プロンプト設定にも対応
  25. 25. 様々な用途アニメーションバナー 既存サイトへの アニメーション / (スマホでも動作) アニメーション追加 ゲームコンテンツ 押井守監督「ちまみれマイ・らぶ」 Comic Animation 電子出版コンテンツ
  26. 26. レスポンシブにpx %異なる画面サイズに対応させるために、コンテンツをリキッドにすることも検討する
  27. 27. レスポンシブに Edge Animate Sample リキッドレイアウト TRY http://html.adobe.com/edge/animate/showcase/catch/catch.htmlDOWNLOAD http://download.macromedia.com/pub/developer/edge-animate/ showcase-examples/EA_Sample_catch.zip
  28. 28. A T ED ! New Features, Feb 15 PDU - グラデーションサポート - CSSの線形/円形グラデーション - Edge Web Fonts サポート - タイポグラフィ導入を簡単に提供 * 現時点では英文fontのみ - CSS Filter サポート - 反転、色相循環、コントラスト、 彩度、セピア、グレースケール… * 現時点ではChrome, Safari, iOS 6, BlackBerry 10のみ
  29. 29. HTML5 アニメーション DOM Canvas CSSアニメーション アニメーション アニメーション +Edge Animate CreateJS Flash Professional CreateJS Dreamweaver
  30. 30. PhoneGap Buildモバイルアプリのパッケージサービス
  31. 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. 32. 無償サービスの機能制限 サービス 機能制限Edge Web Fonts 正式 なし無償のWebフォントサービス 現在は英文フォントのみPhoneGap Build privateアプリ1つクラウドでモバイルアプリを作成 正式 publicアプリ無制限 * 2013年2月15日現在
  33. 33. Dreamweaver & Edge Tools 統合制作環境 統合制作環境と専用ツールは役割 が異なる。 これらを自由に組み合わせて最適 なワークフローを構築する事を提 案。 Dreamweaver web workflowEdge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect 専用ツール
  34. 34. Web情報番組「ADC OnAir」3.19 TUE. 20:30 ONAIRVol. 03HTML5とEdgeツールが開くコンテンツ制作の可能性 http://onair.adobe-adc.jp
  35. 35. Adobe & HTML アドビのWebに対する取り組みや Edge ツール & サービスの最新情報を掲載。http://html.adobe.com/jp
  36. 36. ADC Adobe Developer ConnectionWeb技術ポータルサイト。著名クリエイター/開発 者による技術記事を定期的に掲載。http://www.adobe.com/jp/devnet/
  37. 37. HTML5 特設サイトHTML5関連のサンプルが入手できるサイト。http://adobe-html5.jp
  38. 38. 本日のツール Edge Edge Reflow InspectレスポンシブWebデザイン モバイルサイトのリモート専用ツール 検証ツール Edge Edge Code Animateまったく新しい超軽量の 直感的なHTML5アニメーシコードエディター ョン制作ツール

×