HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival Fukuoka

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

HTML5 Carnival Fukuoka

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

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

- 前職は開発者
- Java/J2EE（7年）、AS3/Flex/AIR（2年）

- HTML/JS/PHPなどは必要な範囲で
@keisuke322
- USTREAM番組「ADC OnAir」MC
【急募】天神駅周辺の旨
- http://onair.adobe-adc.jp/ いラーメン屋情報求む。
マジっす。明日の昼飯！

さて、HTML5。

仲良くやってますか？

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

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

- とりあえず、HTML5！

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

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

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

Modern Web Needs
Modern Tools

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

Edge Animate Edge Reﬂow Edge Code Edge Inspect

Edge Web Fonts Typekit PhoneGap Build

Sep 26, 2012 - Debut

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

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

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

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

Adobe Edge Animate
HTMLアニメーションツール

Adobe Edge Animate

• HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの制作ツール
• 主な用途
• スマホ環境でも閲覧可能なバナー作成
• 既存サイトへのアニメーション / インタラクション追加
• スマホ向け電子出版 / ゲームのコンテンツ作成
• 主な機能
• タイムライン操作によるアニメーション設定
• プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc
• レスポンシブアニメーション
• HTML5非対応ブラウザーのフォールバック設定

Adobe Edge Animate

アニメーションバナー既存サイトへのアニメーション /
（スマホでも動作）アニメーション追加ゲームコンテンツ

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

HTML5 アニメーション

DOM Canvas CSS
アニメーションアニメーションアニメーション

+
Edge Animate CreateJS Flash Professional CreateJS Dreamweaver

Adobe Edge Code プレビュー版公開中

HTML / CSS / JavaScript コードエディター

Adobe Edge Code プレビュー版公開中

HTML / CSS / JavaScript コードエディター

•HTML/CSS/JavaScriptで作られた超軽量コードエディター
•Web制作者の作業効率を一気に上げる2つの機能
•クイック編集
•Cmd + E (Mac) / Ctrl + E (Win)
•カーソルのあるHTMLタグやJSのプロパティ、メソッド
の定義をファイル切り替えせずにダイレクトに表示

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

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 Reﬂow プレビュー版近日公開

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

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

リリースビルド機能制限

Edge Animate 1.0 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供

Edge Code preview 2 なし
HTML / CSS / JS コードエディタ

Edge Inspect 同時接続
モバイルサイトのリモート検証
1.1 デバイス1台

Edge Reﬂow preview 1
レスポンシブWebデザインツール近日公開予定
なし

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

Adobe Edge Web Fonts いつでも無償

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

Adobe PhoneGap Build 無償 & 有償

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

無償サービスの機能制限

サービス機能制限

Edge Web Fonts 正式なし
無償のWebフォントサービス
現在は英文フォントのみ

PhoneGap Build privateアプリ1つ
クラウドでモバイルアプリを作成
正式 publicアプリ無制限

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

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

Edge Animate Edge Reﬂow Edge Code Edge Inspect

Edge Web Fonts Typekit PhoneGap Build

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

Dreamweaver

web workﬂow

Edge Animate Edge Reﬂow Edge Code PhoneGap Build Edge Inspect

専用ツール

Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。

http://html.adobe.com/jp

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

http://adobe-html5.jp

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

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

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

http://onair.adclounge.jp

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

HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival Fukuoka

HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival Fukuoka

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival Fukuoka

Similar to HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール for HTML5 Carnival Fukuoka (20)

More from Keisuke Todoroki

More from Keisuke Todoroki (15)

Recently uploaded

Recently uploaded (9)