HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール- Adobe Edge ツール & サービス -アドビ システムズ 株式会社

HTML5 Carnival Fukuoka

Who?- 轟 啓介（とどろき けいすけ）- アドビのデベロッパーマーケティング

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

- 前職は開発者

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

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

- USTREAM番組「ADC OnAir」MC

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

@keisuke322

【急募】天神駅周辺の旨いラーメン屋情報求む。マジっす。明日の昼飯！

さて、HTML5。

仲良くやってますか？

HTML5の幻想- 夢見がちなクライアントは、- HTML5なら何でもできるんでしょ？

- あのサイトみたいにスマホでも見れるやつ、よろしく！

- とりあえず、HTML5！

- HTML5を理解している制作者は、- 「何でも」って、そんな簡単に…言うんじゃねー、この○○○

- レスポンシブですか。1ソースですが手間が掛かるので予算を… もっと上乗せせんかい、この○○○

- 「とりあえず」って、ビールじゃないんだから…もはや逝ってよし

Modern Web NeedsModern Tools

Adobe Edge ツール & サービス

Edge Animate Edge Reflow Edge Code Edge Inspect

PhoneGap BuildTypekitEdge Web Fonts

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

Sep 26, 2012 - Debut

本日の4つのツール1. HTML5アニメーション- コーディングが苦手でも大丈夫

2. HTML / CSS / JavaScript の生産性↑- 一度使うと忘れられない魔法のツール

3. モバイルサイトの実機テスト- 実機テストをお手軽に！

4. レスポンシブWebデザイン- RWDをもっともっと簡単に！

Adobe Edge AnimateHTMLアニメーションツール

•HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの制作ツール

•主な用途

•スマホ環境でも閲覧可能なバナー作成

•既存サイトへのアニメーション / インタラクション追加

•スマホ向け電子出版 / ゲームのコンテンツ作成

•主な機能

•タイムライン操作によるアニメーション設定•プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc

•レスポンシブアニメーション•HTML5非対応ブラウザーのフォールバック設定

Adobe Edge AnimateHTMLアニメーションツール

アニメーションバナー（スマホでも動作）

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

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

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

Adobe Edge AnimateHTMLアニメーションツール

HTML5 アニメーション

DOMアニメーション

Canvasアニメーション

+Flash Professional CreateJS

CSSアニメーション

DreamweaverCreateJSEdge Animate

Adobe Edge CodeHTML / CSS / JavaScript コードエディター

プレビュー版公開中

•HTML/CSS/JavaScriptで作られた超軽量コードエディター

•Web制作者の作業効率を一気に上げる2つの機能

•クイック編集•Cmd + E (Mac) / Ctrl + E (Win)

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

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

プレビュー版公開中Adobe Edge CodeHTML / CSS / JavaScript コードエディター

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

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

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

Brackets Adobe Edge Code

+ PhoneGap Build+ Edge Web Fonts

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

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

•スマホやタブレット向けのWebサイトを母艦PCからリモートで検証する超便利ツール

•モバイルサイト検証者の作業効率を一気に上げる3つの機能

•リモートで画面遷移•母艦PCの画面遷移が接続されたデバイス上でも追従

•リモートで Web インスペクト•母艦PCからデバイス上のHTML画面に対して、Webインスペクトが可能（Developer Tools）

•リモートでスクリーンショット•母艦PCからボタン一発で全デバイスのHTML画面のスクリーンショットを撮影し、母艦PCに保存

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

• 必要なもの

• 母艦PC（Mac / Win）+ Chromeブラウザ

• 検証対象デバイス（iOS / Android）

• 上記にインストールするInspectアプリ

• 母艦PCとデバイスはパスコード（デバイスにインストールしたInspectアプリが最初に表示）を使ってコネクションを作る

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

プレビュー版近日公開

無償ビルドの機能制限

* 2013年2月9日時点の状況です

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

リリースビルド 機能制限

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

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

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

preview 2 なし

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

1.1 同時接続デバイス1台

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

preview 1近日公開予定 なし

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

いつでも無償

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

無償 & 有償

無償サービスの機能制限

* 2013年2月9日時点の状況です

サービス 機能制限

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

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

なし

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

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

Adobe Edge ツール & サービス

Edge Animate Edge Reflow Edge Code Edge Inspect

PhoneGap BuildTypekitEdge Web Fonts

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

Dreamweaver & Edge Tools

web workflow

統合制作環境

Dreamweaver

Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect

専用ツール

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

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

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

http://html.adobe.com/jp

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

http://adobe-html5.jp

ADCAdobe Developer Connection

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

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

ADC OnAirアドビのUSTREAM番組。FlashからHTML5まで。

http://onair.adclounge.jp

CREATE THE WEB TOUREdge AnimateからCode、PhoneGap、Inspectなど紹介するイベント。全セッション録画公開中。http://adobe.ly/adcmeetup06