Lamiyi

元 Apple 社員 2 名が、Mac OS X 用の HTML5 アニメーション ビルダー Hype をリリースしました。

共同創業者のジョナサン・ドイチュ氏は、The Startup Foundryに対し、アイデアの源について語っています。「ヨーロッパ旅行の後、美しく製本された写真アルバムのように美しく、たくさんのエフェクトを駆使した写真ウェブサイトを作りたいと思いました。HTML5でこれをコーディングするのは悪夢のようでした。もっと良い方法があるはずだ、と。そこでHypeのアイデアが生まれました。このアイデアは私の中でずっと頭から離れず、やがてこれはビジネスにとって大きなチャンスになるだろうと気づきました。」

Hype で、美しくアニメーション化されたインタラクティブなウェブコンテンツを作成しましょう！Hype の HTML5 出力は、すべての最新ブラウザと iPhone、iPad などのモバイルデバイスで動作します。コーディングは一切不要です。

• インタラクションとアニメーション
Hype のキーフレームベースのアニメーションシステムが、コンテンツに命を吹き込みます。「記録」ボタンをクリックすると、Hype があなたの動きをすべて記録し、必要に応じてキーフレームを自動的に作成します。より手作業で操作したい場合は、キーフレームを手動で追加、削除、並べ替えてコンテンツを微調整することもできます。Hype では、必要な数のシーンを作成でき、スムーズなトランジションを使用して、さまざまなアクションでシーンを切り替えることができます。複数のタイムラインを活用して、マウス/キーボードイベントに基づいてアニメーションを実行できます。

• HTML5
Hypeは、最先端のHTML5、CSS3スタイル、JavaScriptを出力します。ボックスシャドウ、反射、3D変形といった最先端の機能をサポートしています。Hypeは、すべてのブラウザで100%の忠実度を実現するよう努めています。例えば、高性能なCSS3トランジションがサポートされていない場合、HypeはJavaScriptベースのハートビートアニメーションにフォールバックします。適切なフォールバックがない場合は、Hypeはブラウザの非互換性について警告を発するため、予期せぬ問題が発生しません。

• WYSIWYG
Hypeのシーンエディターは、Safariと同じ最新のレンダリングエンジンであるWebKitを搭載しています。Hypeで作成したものが、ブラウザに表示されるものと同じになります。Hypeの豊富なインスペクターを使えば、コンテンツのあらゆる側面を詳細に確認し、簡単に調整できます。インテリジェントなガイドライン、配置ツール、サイズ調整ツールを使えば、要素の配置を細かく制御できます。

•
Hype をエクスポートすると、コンテンツに必要なすべてのリソースと JavaScript を含む、完全に独立したディレクトリが作成されます。このディレクトリをウェブサーバーにアップロードし、3行の HTML をコピーして既存のウェブページに貼り付けるだけで、準備完了です。Dropbox アカウントをお持ちの場合は、Hype を Dropbox のパブリックフォルダに公開して簡単に共有できます。

• 柔軟性
Hype は豊富なスタイリングツールを提供していますが、時には実際に手を動かして操作する必要がある場合もあります。各要素の内部 HTML はわずか数クリックでアクセスでき、変更内容はすべて即座にレンダリングされるため、編集中にライブプレビューを確認できます。統合された JavaScript エディタを使えば、ユーザーアクションによってトリガーされるカスタム関数を作成できます。Hype JavaScript API を使えば、埋め込まれた Hype コンテンツの内外からシーンを操作できます。

• ネイティブMacエクスペリエンス
HypeはMac OS X専用にCocoaで開発されました。直感的で使いやすく、優れたコンテンツの作成に集中できます。Hypeは瞬時に起動します。

Hype は、App Store から期間限定価格 29.99 ドルで購入できます。

続きを読む [TheStartupFoundry経由] [9to5Mac経由]