Adobe Edgeプレビュー1

HTML5には開発ツールが必要です。次世代のWebアプリケーションを構築する強力な方法ですが、新しいJavaScript APIは複雑なので、ブラウザでうまく動作しているようなコードを書くのが難しくなります。 JQueryなどの強力なJavaScriptライブラリを活用するツールであるHTML5の機能を活用する新しいWebサイトやアプリケーションを構築するためのツールが必要です。

これは、アドビの新しいEdge HTML5デザインツールの最初のプレビューリリースです。最初はHTML5アニメーションを作成するように設計されています(将来のプレビューリリースではより多くの機能が提供される予定です)、AdobeのFlashやMicrosoftのBlend、 HTMLアニメーションを配信するために使用します。独自のJavaScriptライブラリを追加したJQueryの上に構築されたEdgeは、JavaScriptとCSSを使用してHTML5アニメーションを簡単に作成することを目的としています。

エッジエディタのアニメーション

Chromeで実行される結果のアニメーション

Edgeは現在、Adobe Labsサイトから無料でダウンロードできます(登録が必要です)。すばやく簡単にインストールできます。

Edgeユーザーインターフェイスにはよく知られていることがたくさんあります.Flashを使用していれば、Edgeを使いやすくすることができます。現在の世代のFlashデザインツールと同様に、ビジュアル設計段階ではビジュアル要素をドロップできます。要素の初期および最終のプレースメントを選択し、回転、傾斜、および拡大縮小によって形状を変更する変換を適用できます。 PowerPointと同様に、トランジションエフェクトを適用することもできます。 Edgeには大きなトランジションライブラリが付属しています。これらを使用して、イメージをアニメーションの内外に取り込むことができます。

Edgeは使いやすいと判断し、最初のHTML5アニメーションを数分で構築してテストすることができました。過去にFlash Professionalを使用したことがあっても、多くのFlashスキルがEdgeに直接転送されるので、あまり学習曲線を持たないようにしてください。画像は、独自のアニメーションやトランジションでオブジェクトとして扱う必要があります。キーフレームを画面に配置したら、タイムラインを使ってトランジションとトランスフォームを適用できます。要素はウェブに適した任意のイメージ形式にすることができますが、SVGのベクトルイメージ形式がよりスムーズなレンダリングを生成するため、複雑な変換を使用することを計画している場合は、SVGを使用することをお勧めします。完了すると、アニメーションはJavaScriptとCSSとして保存され、既存のHTMLページに追加できるHTMLスタブが付いています。データはJSON形式で保存されるため、gzip圧縮などのサーバー側ツールを使用してパフォーマンスを向上させることができます。

現時点ではJavaScriptエディタはありませんので、Adobeが提供するツールに限られています。 Edgeでは、まだイベントのサポートがないため、インタラクティブ性がほとんどまたはまったくない基本的なアニメーションを提供することに制限されています。インタラクティブ性の湖は、エッジの最初のプレビューを好奇心のものとして残します。アドビがイベントのサポートを追加するまで、EdgeはFlashをサポートしていないが、AppleのiOSのようなHTML5をサポートしているプラ​​ットフォーム向けのHTML5バナー広告を作成するツールとしてのみ使用される。より大きなアイデアを持つデザイナーや開発者は、AdobeのFAQやメッセージボードの回答によれば、モーションパスやアニメーションループなどの追加機能を提供する、後のリリースを待つ必要があります。

モバイルでのサムスンギャラクシーS7 Edgeでのハンズオン:より良いWi-Fi通話体験、挑戦的な環境のための厳しいAndroidタブレット、モビリティ、Plantronics BackBeat GO 3とVoyager 5200ヘッドセットの実践:新しいApple iPhoneには完璧です

使い慣れたタイムラインとトランジションを使用してアニメーションを編集する

覚えておくべきことの1つは、EdgeがFlashではないということです。 Flashには10年以上の開発期間があり、独自のランタイムを活用することができます。代わりに、Edgeは一連の開発標準をベースにしたツールであり、さまざまな方法で異なる速度でそれらの標準を実装しているブラウザで動作する必要があります。もしかすると、Edgeを使ってFlashと同じことをすることはできません。

HTML5のデザイナーは、次世代ウェブを最大限に活用するためにEdgeのようなツールが必要です。この最初のプレビューでインタラクティブ性のない基本的なアニメーション機能しか提供されない場合でも、ここには多くの約束があります。今後のプレビューを楽しみにしており、HTML5開発のより複雑な部分を簡素化し続けるためにAdobeが何をしているのか見ることができます。

サイモン・ビッソン

Republic WirelessでSamsung Galaxy S7 Edgeとのハンズオン:より良いWi-Fi通話体験

Microsoft Sprightly、First Take:スマートフォンに魅力的なコンテンツを作成する

Xplore Xslate D10、First Take:挑戦的な環境のための厳しいAndroidタブレット

Plantronics BackBeat GO 3とVoyager 5200ヘッドセットのハンズオン:新しいApple iPhoneに最適