Your SlideShare is downloading. ×
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

13,331
views

Published on

HTML5 Carnival Fukuokaで発表したアドビの Edge ツールの紹介です。基本的に現段階(2013/2/9)なら、結構な範囲でHTML5のWeb制作ツールを無償で使えます。 …

HTML5 Carnival Fukuokaで発表したアドビの Edge ツールの紹介です。基本的に現段階(2013/2/9)なら、結構な範囲でHTML5のWeb制作ツールを無償で使えます。
この機をお見逃しなく。

Published in: Technology

0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,331
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
40
Comments
0
Likes
39
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 の Web制作を確実に楽にする最新のアドビWeb制作ツール- Adobe Edge ツール & サービス - アドビ システムズ 株式会社 HTML5 Carnival Fukuoka
  • 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. さて、HTML5。仲良くやってますか?
  • 4. HTML5の幻想- 夢見がちなクライアントは、 - HTML5なら何でもできるんでしょ? - あのサイトみたいにスマホでも見れるやつ、よろしく! - とりあえず、HTML5!- HTML5を理解している制作者は、 - 「何でも」って、そんな簡単に… 言うんじゃねー、この○○○ - レスポンシブですか。 1ソースですが手間が掛かるので予算を… もっと上乗せせんかい、この○○○ - 「とりあえず」って、ビールじゃないんだから… もはや逝ってよし
  • 5. Modern Web Needs Modern Tools
  • 6. Adobe Edge ツール & サービス洗練された最先端のWebサイトを構築できる新しいツール&サービス Edge Animate Edge Reflow Edge Code Edge Inspect Edge Web Fonts Typekit PhoneGap Build Sep 26, 2012 - Debut
  • 7. 本日の4つのツール1. HTML5アニメーション - コーディングが苦手でも大丈夫2. HTML / CSS / JavaScript の生産性↑ - 一度使うと忘れられない魔法のツール3. モバイルサイトの実機テスト - 実機テストをお手軽に!4. レスポンシブWebデザイン - RWDをもっともっと簡単に!
  • 8. Adobe Edge AnimateHTMLアニメーションツール
  • 9. Adobe Edge Animate HTMLアニメーションツール• HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの制作ツール• 主な用途 • スマホ環境でも閲覧可能なバナー作成 • 既存サイトへのアニメーション / インタラクション追加 • スマホ向け電子出版 / ゲームのコンテンツ作成• 主な機能 • タイムライン操作によるアニメーション設定 • プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc • レスポンシブアニメーション • HTML5非対応ブラウザーのフォールバック設定
  • 10. Adobe Edge Animate HTMLアニメーションツールアニメーションバナー 既存サイトへの アニメーション / (スマホでも動作) アニメーション追加 ゲームコンテンツ 押井守監督「ちまみれマイ・らぶ」 Comic Animation 電子出版コンテンツ
  • 11. HTML5 アニメーション DOM Canvas CSSアニメーション アニメーション アニメーション +Edge Animate CreateJS Flash Professional CreateJS Dreamweaver
  • 12. Adobe Edge Code プレビュー版公開中HTML / CSS / JavaScript コードエディター
  • 13. Adobe Edge Code プレビュー版公開中 HTML / CSS / JavaScript コードエディター•HTML/CSS/JavaScriptで作られた超軽量コードエディター•Web制作者の作業効率を一気に上げる2つの機能 •クイック編集 •Cmd + E (Mac) / Ctrl + E (Win) •カーソルのあるHTMLタグやJSのプロパティ、メソッド の定義をファイル切り替えせずにダイレクトに表示•ライブプレビュー •Chromeブラウザと連携して、CSSの変更を保存する前 にライブプレビュー
  • 14. Brackets- オープンソースのコードエディター- Edge Codeはアドビ ディストリビューション- http://brackets.io - Feature Backlog : http://bit.ly/BracketsBacklog Brackets Adobe Edge Code + PhoneGap Build + Edge Web Fonts
  • 15. Adobe Edge Inspectモバイルサイトのリモート検証ツール
  • 16. Adobe Edge Inspect モバイルサイトのリモート検証ツール• スマホやタブレット向けのWebサイトを母艦PCからリモートで検証する超便利ツール• モバイルサイト検証者の作業効率を一気に上げる3つの機能 • リモートで画面遷移 • 母艦PCの画面遷移が接続されたデバイス上でも追従 • リモートで Web インスペクト • 母艦PCからデバイス上のHTML画面に対して、Webインスペク トが可能(Developer Tools) • リモートでスクリーンショット • 母艦PCからボタン一発で全デバイスのHTML画面のスクリーン ショットを撮影し、母艦PCに保存
  • 17. Adobe Edge Inspect モバイルサイトのリモート検証ツール• 必要なもの • 母艦PC(Mac / Win)+ Chromeブラウザ • 検証対象デバイス(iOS / Android) • 上記にインストールするInspectアプリ• 母艦PCとデバイスはパスコード(デバイス にインストールしたInspectアプリが最初に 表示)を使ってコネクションを作る
  • 18. Adobe Edge Reflow プレビュー版近日公開レスポンシブWebデザイン専用ツール
  • 19. 無償ビルドの機能制限無償ビルドは Creative Cloud の無償メンバーシップから入手 リリースビルド 機能制限Edge Animate 1.0 なしHTML5アニメーションツール Animate 1.x は完全無償提供Edge Code preview 2 なしHTML / CSS / JS コードエディタEdge Inspect 同時接続モバイルサイトのリモート検証 1.1 デバイス1台Edge Reflow preview 1レスポンシブWebデザインツール 近日公開予定 なし * 2013年2月9日時点の状況です
  • 20. Adobe Edge Web Fonts いつでも無償無料のWebフォントサービス
  • 21. Adobe PhoneGap Build 無償 & 有償モバイルアプリのパッケージサービス
  • 22. 無償サービスの機能制限 サービス 機能制限Edge Web Fonts 正式 なし無償のWebフォントサービス 現在は英文フォントのみPhoneGap Build privateアプリ1つクラウドでモバイルアプリを作成 正式 publicアプリ無制限 * 2013年2月9日時点の状況です
  • 23. Adobe Edge ツール & サービス洗練された最先端のWebサイトを構築できる新しいツール&サービス Edge Animate Edge Reflow Edge Code Edge Inspect Edge Web Fonts Typekit PhoneGap Build
  • 24. Dreamweaver & Edge Tools 統合制作環境 統合制作環境と専用ツールは役割 が異なる。 これらを自由に組み合わせて最適 なワークフローを構築する事を提 案。 Dreamweaver web workflowEdge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect 専用ツール
  • 25. Adobe & HTML アドビのWebに対する取り組みや Edge ツール & サービスの最新情報を掲載。http://html.adobe.com/jp
  • 26. HTML5 特設サイトHTML5関連のサンプルが入手できるサイト。http://adobe-html5.jp
  • 27. ADC Adobe Developer ConnectionWeb技術ポータルサイト。著名クリエイター/開発 者による技術記事を定期的に掲載。http://www.adobe.com/jp/devnet/
  • 28. ADC OnAirアドビのUSTREAM番組。FlashからHTML5まで。http://onair.adclounge.jp
  • 29. CREATE THE WEB TOUREdge AnimateからCode、PhoneGap、Inspectなど 紹介するイベント。全セッション録画公開中。 http://adobe.ly/adcmeetup06