[速報]アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に

2012年9月25日

米アドビは24日(日本時間24日深夜)、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。

Edge Tools & Services | Adobe & HTML JP

発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。

Adobe Edge Animateは高度なアニメーション作成ツール

Adobe Vice President and General Manager, Interactive Development、Danny Winokur氏。

モダンなWebにはモダンなツールが必要だ。Adobe Edge Tools & Servicesは、そのために作り上げたものだ。モバイル対応のコンテンツやWebを作成でき、クリエイターの生産性を向上させる。

fig

Adobe Edge Animate 1.0。リッチなアニメーションコンテンツをHTML5、CSS、JavaScriptで作るためのツールだ。

fig

タイムラインベースで、ピクセルまで非常に緻密にアニメーションをコントロールできる。

fig

499ドルで今日から利用可能だ。だが、これをみなさんは無料で使うことができる。その方法は最後に紹介しよう。

fig

Adobe Edge Reflowは、レスポンシブデザインを簡単に作れる

アニメーションのコンテンツは大事だが、ページレイアウトもそれ以上に重要だ。世の中にはさまざまな大きさ、解像度、向きのスクリーンが存在する。それぞれにWebサイトを対応させるのは現実には難しくてコストもかかる。

そこで複数のスクリーンに1つの実装で対応する「レスポンシブデザイン」がある。アドビはそのためのツールを開発した。これは今日リリースではなくスニークピークになる。

Adobe Edge Reflowだ。

fig

グリッドシステムを備えており、さまざまなスクリーンに対応する。これはPCのスクリーン用。

fig

横幅を狭くして再レイアウトする。これでMedia QueryやCSSなどが作られ、レスポンシブなサイトができあがる。

fig

Adobe Edge Web Fontsは500以上の無料フォントを提供

WebにはfontタグやCSSなどが登場したが、現実には、非常にベーシックなフォントしか使えなかった。

fig

しかしWeb Font機能が利用され始め、TypekitはWebに向けて商用フォントのライセンスを開始した。Webでも非常に豊かなフォントが使えるようになった。

そこで発表するのが「Adobe Edge Web Fonts」だ。これまでのGoogleとのパートナーシップをさらに進めて、Google Font APIやアドビのオリジナルフォントを合わせて500以上のフォントをフリーで提供する(注:日本語を含むCJKフォントについての言及はなかった)。

fig

また、コーディングやマークアップのための「Source Code Pro」フォントをオープンソースで公開することも発表する(詳細は別記事「[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開」を参照)。

Adobe Edge Codeは、HTML5で書かれたコードエディタ

Adobe Edge Codeは、オープンソースとして公開してたBracketがコアになった、Web開発に対応したコードエディタだ。

fig

HTML、CSS、JavaScriptのインラインエディットが可能。コードヒンティング(いわゆるIntelliSense)や、カラーピッカー、フォントピッカーなどにも対応する。

fig

BracketやEdge Code自体もHTML5、CSS、JavaScriptで作られている。今日からプレビュー版が利用可能だ。

Adobe Edge Inspectはモバイルのデバッグに必須

さまざまな解像度、スクリーンサイズが違うクロスデバイスでのテストをどうするか。

アドビはそのためのツールとしてShadowを発表しているが、これをリファインした「Adobe Edge Inspect」を発表する。

fig

iOS、Android、Kindleなどに対応し、複数のデバイス画面を同時にリロードし、強力なデバッグ機能を備えている。左上のPCのChromeブラウザに拡張機能を入れ、画面を再描画すると、すべてのモバイルデバイスの画面も再描画される。スクロールなども同様だ(別記事「アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール」参照)。

fig

さらにリモートインスペクションツールで、PCからiPhoneで表示されているHTMLのソースコードを参照することができ、PC上でソースを変更するとそのままiPhoneの表示に反映される。

fig

また各デバイスの画面キャプチャをまとめて取得できる。全部のキャプチャがPC上で1つのPDFとして生成される。

fig

プレビュー版は今日から利用可能だ。

PhoneGap Build、今日から正式版に

PhoneGap Buildを1年以上βで提供してきたが、今日正式リリースとする。

fig

PhoneGap Buildに、HTML、CSS、JavaScriptをZipでまとめたファイルをアップロードする。

fig

すると、iOSやAndroid用などを一斉にビルドしてくれる。

Androidで画面に表示されたバーコードを読み込ませると、ビルドしたアプリケーションをそのままインストール、試すことができる。

fig

無料のCreative Cloudでも利用可能

Creative Cloudは、最新のソフトウェアアップデートをそのまま利用できる。これは急速に変化するWebの世界では非常に重要なことだ。

fig

そして今日発表したソフトウェアはCreative Cloudに含まれているため、Creative Cloud登録者ならば誰でも無料で利用可能だ(新野注:無料の登録ユーザーでもAnimateなどの機能は使えるようです)。

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : Adobe , CSS3 , HTML5 , JavaScript



≫次の記事
FacebookのHTML5アプリは何が時期尚早だったのか。「クラッシュの原因も分からないし、スクロールも遅すぎる」
≪前の記事
[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus