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

- Adobe Edge ツール & サービス -

ABC Spring 2013

Who?- 轟 啓介（とどろき けいすけ）

- アドビのデベロッパーマーケティング

- 担当はFlashからHTML5まで多岐

- 前職は開発者

- Java/J2EE（7年）、AS3/Flex/AIR（2年）

- HTML/JS/PHPなどは必要な範囲で

- USTREAM番組「ADC OnAir」MC

- http://onair.adobe-adc.jp/

@keisuke322

【緩募】都内で流しソーメンを食べられる店情報を夏までにください。

Modern Web NeedsModern Tools

HTML5とその関連技術で制作する「Modern Web」、それに対して必要なものは「Modern Tools」である

Adobe Edge ツール & サービス

Edge Animate 1.0 Edge Reflowsneak preview

Edge Codepreview

Edge Inspect 1.0

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

Sep 26, 2012 - Debut

Adobe Edge ツール & サービス

Edge Animate 1.5 Edge Reflowpreview

Edge Codepreview 3

Edge Inspect 1.2

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

Feb 15, 2013 - Updated!

Edge ReflowレスポンシブWebデザイン専用ツール

プレビュー版公開中

NEW!

レスポンシブWebデザイン

1つのHTMLで様々な画面サイズのデバイスに対応

(RWD)

RWDのコスト

依頼者

制作者

PCもスマホも1ソースでコスト削減

制作難易度はUP / 安易な見積もりは危険

従来ワークフローのリスク

ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」よりhttp://onair.adobe-adc.jp

RWDのリスク

単に画面サイズが異なる話ではない

デバイスによって利用シーンが異なる

情報の優先度が異なる

情報設計の重要性が非常に高い

早めのプロトタイプで回避

ADC OnAir Season 2 / 第1回「レスポンシブWebデザイン徹底討論」よりhttp://onair.adobe-adc.jp

ここからEdge Reflow投入！

レスポンシブWebデザインをもっと自由に、簡単に。

Edge Reflow - 3つの特徴- ブレークポイント設定

- ブラウザ幅に応じたレイアウトを定義

- ブラウザ幅別の「動く」デザインカンプを同時に作成

- CSSスタイル設定- 様々なCSS3表現をコーディングなしで設定

- メディアクエリーで定義されたCSSも書き出し

- 強力なプレビュー機能- PCブラウザだけでなく、Edge Inspect連携でスマホ、タ

ブレット上で、リアルタイムにデザインを確認

PCTabletPhone

headerheaderheader

article1

article2

article3

footer

article2

article1

article3

footer

article1

article3

footer

PCTabletPhone

Edge Inspectモバイルサイトのリモート検証ツール

Edge Inspect - 3つの特徴- リモートで画面遷移

- 母艦PCの画面遷移が接続されたデバイス上でも追従

- リモートで Web インスペクト- 母艦PCからデバイス上のHTML画面に対して、Webイン

スペクトが可能（Developer Tools）

- リモートでスクリーンショット- 母艦PCからボタン一発で全デバイスのHTML画面のスク

リーンショットを撮影し、母艦PCに保存

入門ガイド1.接続デバイスが同じネットワーク

上にあることを確認- 自動検出するには同サブネットに

- IPアドレス指定による手動接続可

2.デバイスをPCのChromeに接続A.自動検出

B.手動接続

3.デバイス上でページのデバッグ

- PCのChrome操作で画面遷移、インスペクション、画面ショット

Edge Codeまったく新しい超軽量コードエディター

プレビュー版公開中

Edge Code - 2つの特徴- クイック編集

- Cmd + E (Mac) / Ctrl + E (Win)

- カーソルのあるHTMLタグのCSSやJSのプロパティ、メソッドの定義をファイル切り替えせずにダイレクトに表示

- ライブプレビュー- Chromeブラウザと連携して、CSSの変更を保存する前

にライブプレビュー

New Features, Feb 15‣ preview 3 (2013/2/15)

- エディター機能強化- エディターコアのCodeMirror ver. 3によるエ

ディター機能の強化

- CSS コード補完強化、定義検索

- ネイティブ メニュー

‣ preview 2 (2012/12/13)

- クイック編集にカラーピッカー追加

- Edge Web Fonts サポート

- プロジェクト設定- WebサーバーURL指定でサーバーサイドコン

テンツにも対応

UPDATED!

Brackets- オープンソースのコードエディター

- Edge Codeはアドビ ディストリビューション

- http://brackets.io- Feature Backlog : http://bit.ly/BracketsBacklog

Brackets Adobe Edge Code

+ PhoneGap Build+ Edge Web Fonts

Edge Animate直感的なHTML5アニメーション制作ツール

正式版無償提供中

Edge Animate - 3つの特徴- タイムライン操作によるアニメーション設定

- プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc

- JavaScript スニペット- JSが苦手な人でも基本的なスクリプトを一発挿入

- HTML5非対応ブラウザーのフォールバック設定- 代替画像設定、chrome Frame プロンプト設定にも対応

様々な用途アニメーションバナー（スマホでも動作）

既存サイトへのアニメーション追加

アニメーション /ゲームコンテンツ

押井守監督「ちまみれマイ・らぶ」Comic Animation電子出版コンテンツ

レスポンシブに

px %異なる画面サイズに対応させるために、コンテンツをリキッドにすることも検討する

レスポンシブにEdge Animate Sample リキッドレイアウト

http://html.adobe.com/edge/animate/showcase/catch/catch.htmlTRY

DOWNLOAD http://download.macromedia.com/pub/developer/edge-animate/showcase-examples/EA_Sample_catch.zip

New Features, Feb 15- グラデーションサポート

- CSSの線形/円形グラデーション

- Edge Web Fonts サポート- タイポグラフィ導入を簡単に提供

* 現時点では英文fontのみ

- CSS Filter サポート- 反転、色相循環、コントラスト、

彩度、セピア、グレースケール…* 現時点ではChrome, Safari, iOS 6, BlackBerry 10のみ

UPDATED!

HTML5 アニメーション

DOMアニメーション

Canvasアニメーション

+Flash Professional CreateJS

CSSアニメーション

DreamweaverCreateJSEdge Animate

PhoneGap Buildモバイルアプリのパッケージサービス

無償ビルドの機能制限

* 2013年2月15日現在

無償ビルドは Creative Cloud の無償メンバーシップから入手

リリースビルド 機能制限

Edge AnimateHTML5アニメーションツール

1.5 なしAnimate 1.x は完全無償提供

Edge CodeHTML / CSS / JS コードエディタ

preview 3 なし

Edge Inspectモバイルサイトのリモート検証

1.2 同時接続デバイス1台

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

preview なし

無償サービスの機能制限

サービス 機能制限

Edge Web Fonts無償のWebフォントサービス

正式現在は英文フォントのみ

なし

PhoneGap Buildクラウドでモバイルアプリを作成

正式 privateアプリ1つpublicアプリ無制限

* 2013年2月15日現在

Dreamweaver & Edge Tools

web workflow

統合制作環境

Dreamweaver

Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect

専用ツール

統合制作環境と専用ツールは役割が異なる。これらを自由に組み合わせて最適なワークフローを構築する事を提案。

http://onair.adobe-adc.jp

HTML5とEdgeツールが開くコンテンツ制作の可能性

Vol. 03

Web情報番組「ADC OnAir」

3.19 TUE. 20:30 ONAIR

Adobe & HTMLアドビのWebに対する取り組みや

Edge ツール & サービスの最新情報を掲載。

http://html.adobe.com/jp

ADCAdobe Developer Connection

Web技術ポータルサイト。著名クリエイター/開発者による技術記事を定期的に掲載。

http://www.adobe.com/jp/devnet/

HTML5 特設サイトHTML5関連のサンプルが入手できるサイト。

http://adobe-html5.jp

本日のツール

Edge Reflow

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

Edge Inspect

EdgeCode

Edge Animate

モバイルサイトのリモート検証ツール

まったく新しい超軽量のコードエディター

直感的なHTML5アニメーション制作ツール