EPMツールを活用した 定量的マネジメント概要 · 全環境を導入できる一括インストーラを提供 オープンソースとして公開( GPL ) 既存ツールを活用
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Click here to load reader
-
Upload
keisuke-todoroki -
Category
Technology
-
view
2.085 -
download
2
description
Transcript of モバイルコンテンツ制作を効 率化するツールを使いこなせ
モバイルコンテンツ制作を効率化するツールを使いこなせ
- 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/
本日のツール
Edge Reflow
レスポンシブWebデザイン専用ツール
Edge Inspect
EdgeCode
Edge Animate
モバイルサイトのリモート検証ツール
まったく新しい超軽量のコードエディター
直感的なHTML5アニメーション制作ツール