1990年代半ば以来、AdobeのFlashはWebページのアニメーション化に最も選ばれるツールとなってきました。しかし、普及しているからといって必ずしも人気が上がるわけではありません。Flashは広く使用されている一方で、その閉鎖的でプロプライエタリな性質、そして不安定でメモリを大量に消費するブラウザプラグインのせいで、広く嫌われています。
Flashの優位性、ひいては最終的な存続さえも脅かす技術は、Webページの構造を定義する言語とプロトコルの最新版であるHTML5です。Flashほどスクリプト化は容易ではありませんが、HTML5は以前のバージョンのHTMLよりもはるかに豊富なアニメーションやトランジションを実現できます。AppleのiOSベースの世界は全面的に、いや、むしろ積極的にFlashフリーゾーンとなっており、Adobeでさえモバイルデバイス向けのFlash開発を断念したことで（「Adobe、モバイルFlashの開発を中止」、2011年11月9日記事参照）、Webデザイナーは動的コンテンツの作成手段としてHTML5に注目し始めています。
しかし、HTML5のようなオープンスタンダードの問題は、それを推進し、オーサリングツールの利用可能性を確保する単一の団体が存在しないことです。Flashはクローズドな製品ですが、Adobe（そしてそれ以前のMacromedia）は、比較的容易なコンテンツ開発を可能にする優れたオーサリングツールを提供してきました。AdobeはHTML5エディターの例としてEdgeを提供していますが、Edgeは「プレビュー」状態で放置され、いつの間にか忘れ去られる運命にあるプログラムである兆候を如実に示しています。
一方で、HypeはHTML5アニメーションとインタラクティブコンテンツを簡単に始めるための方法を提供しています。元Apple開発者のJonathan Deutsch氏とRyan Nielsen氏によって設立された小さなスタートアップ企業Tumultが公開しているHypeは、タイムラインベースのWYSIWYG HTML5エディタで、既存のWebページに配置できるHTML5コードを出力します。2011年5月に初リリースされ、最近バージョン1.5にアップデートされました。
基本的な使い方— Hype の使い方は比較的簡単です。かつて Apple の開発者が開発した Mac プログラムということもあり、インターフェースは iWork アプリケーションを彷彿とさせます。テキストボックスや画像などのレイアウトアイテムをキャンバスに配置し、標準のプロパティインスペクタとカラーパレットを使ってプロパティを調整します。キャンバスの下にはタイムラインがあり、様々なスタイル要素を任意のタイミングで指定できます。
例えば、ロゴを左からスライドインさせ、同時にフェードインさせたいとします。これを実現するにはいくつかの手順が必要ですが、どれも簡単です。
- Finder ウィンドウまたは Hype のメディア パレットから、ロゴをキャンバス上の開始位置にドラッグします。
- 再生ヘッドをタイムラインの開始点に配置します。
-
記録ボタンをクリックします。
-
インスペクタ パレットの要素ペインで、不透明度や影などのロゴの開始プロパティを設定します。
-
タイムライン上で再生ヘッドを上に移動し、ロゴを最終位置に配置します。
-
ロゴを終了位置までドラッグし、インスペクターに戻ってロゴの終了時のビジュアル プロパティを設定します。
-
録画を停止するには、もう一度録画ボタンをクリックします。
Hype は、タイムライン内の開始キー フレームと終了キー フレーム間の時間経過に応じて、それらの間の遷移を作成するために必要なコードを自動的に生成します。
タイムラインを使って、色、サイズ、向き、フォントファミリー、文字サイズなどのプロパティをアニメーション化できます。また、タイムライン上でキーフレームをかなり正確にドラッグできるため、イベントのタイミングを厳密に制御できます。
Hype では、Web コンテンツをインタラクティブに制御することもできます。キャンバス上に配置されたレイアウトアイテムには、マウスの動きに基づいたアクションを関連付けることができます（これらの効果は、コンピューターの Web ブラウザで表示した場合に最適です。iOS デバイスではマウスが使用できないため、ホバーベースのアクションは困難です）。ボタンにマウスを合わせたり離したりすると、「シーン」（背景を含むキャンバス全体に表示されるものに対する Hype の呼称）の変更や JavaScript スクリプトの実行などのアクションをトリガーできます。
キャンバス上の要素の操作は簡単で、開発者がユーザーからの懸念に応えたおかげで、バージョン1.5では大幅に改善されました。Hypeでは、キャンバス上でオブジェクトをグループ化してロックできるようになりました。これは、オリジナルリリースでは大きな期待を寄せられていた機能です。コンテキストメニューが追加され、キャンバスからマウスを離すことなくレイアウトや整理機能に素早くアクセスできるようになりました。また、ツールバーにズームポップアップメニューが追加されました。
Hypeドキュメントのプレビューは2つの方法で行えます。タイムラインの再生ボタンをクリックすると、ドキュメントのアニメーションがプレビューされます。ただし、マウスイベントに基づくアクションの場合は、Safariでプレビューする必要があります。Safariでプレビューするには、ツールバーのSafariアイコンをクリックします。すると、Safariが新しいウィンドウを開き、作業中のコンテンツがWebサイトに表示されるとおりに表示されます。
Hypeからコンテンツをエクスポートするのも簡単です。HypeはHTMLドキュメントと、ページの動作に必要なサポートファイルを含むフォルダを生成します。通常、これにはページに含まれるグラフィックファイルと、ページ上のアニメーションに必要なスクリプトを含むJavaScript (.js) ドキュメントが含まれます。
Hype の HTML コードは自己完結型で、そのまま公開できます。しかし、他のドキュメントに挿入したいというニーズの方が高いでしょう。そのため、コードにはコメントが明確にマークアップされており、JavaScript を実際に呼び出して動作させる行が示されています。これらの行はコピーして別の HTML ページに貼り付けることができます。そのページと、サポートファイルを含むフォルダを Web サーバーにアップロードすれば、新しい Web ページが完成し、画面から飛び出すような体験ができます。Hype の出力結果は、私の Web サイトで簡単にご覧いただけます。
ウェブページを事後的に変更するには、元のHypeドキュメントが必要です。Hypeが生成するHTMLは判読可能ですが、処理内容には制限があり、ほとんどの処理は付随するJavaScriptファイルで実行されます。もちろん、このファイルは編集可能ですが、簡単には編集できません。例えば、フォントのような単純なものを変更したい場合でも、元のHypeドキュメントを編集する必要があります。なぜなら、そのような細かい変更でさえ、CSSファイルではなく、生成されたJavaScriptファイルに保存されるからです。
癖と制限— Hype はバージョン 1.5 で大幅に改善されましたが、それでも少し気になる癖が残っています。例えば、「挿入」メニューにはキーボードショートカットが一つもありません。これは、 Hype ドキュメントに不可欠なテキスト、ボタン、画像、その他の要素を挿入する際に少し煩わしいものです。キャンバス上部のツールバーにある「要素を挿入」ポップアップメニューを使えば別の挿入方法がありますが、組み込みのキーボードショートカットがあればもっと良かったでしょう（もちろん、「システム環境設定」の「キーボード」パネルや Keyboard Maestro などのユーティリティを使って
独自のキーボードショートカットを割り当てることもできます）。
さらに厄介なのは、HypeはHTML5コンテンツの設計と開発を容易にする一方で、HTML5アニメーション機能の一部しか利用できないことです。例えば、HTML5アニメーションオプションではオブジェクトの動きを詳細に制御できます。しかし、Hypeではタイムライン上でドラッグ可能なキーフレームを使って時間を制御するオプションしか提供されていません。オブジェクトは加速、移動、減速、停止を繰り返します。これは画面上でオブジェクトを動かす分かりやすく魅力的な方法であり、多くのユーザーが選択する可能性が高いでしょう。しかし、Hypeでは速度や加速を制御できないのは依然として不満です。
同様に、HypeではKeynoteのようなシーン間のトランジションを、ワイプ、クロスフェード、スワップといったHTML5アニメーションスタイルを駆使して実現できますが、トランジションにかかる時間など、HTML5のタイミング設定にHypeから直接アクセスすることはできません。見た目通りの結果が得られることは確かですが、得られるのは与えられたものだけです。これは避けられないトレードオフと言えるかもしれません。HTML5は要素の動きを細かく調整する幅広い可能性を提供していますが、Hypeがコンテンツ作成の容易さに重点を置くことで、こうしたオプションにアクセスできないという代償を被っているのです。
さらに、Hypeには画像操作ツールがまだ不足しています。サイズ変更は簡単に管理でき、タイムライン内で自動化できますが、マスクや編集ツールはまだありません。Hype内で画像を移動することはできますが、Hypeドキュメントに配置する前に、外部の画像エディタで準備する必要があります。
しかし、あまりネガティブな意見にはなりたくない。HypeはまだHTML5のアニメーションツールのすべて、あるいはWebデザイナーが単一のプログラムに求める機能のすべてを網羅しているわけではないが、標準に準拠したサイトを構築する過程でデザイナーが活用できる、もう1つの便利なツールとして捉えるのが妥当だろう。（技術的には、Hypeは自己完結型のWebページを作成することもできるが、スタンドアロンのWebオーサリングツールとして十分な機能を備えていると考える人はほとんどいないだろう。）Hypeは、アニメーション化されたインタラクティブなコンテンツを作成するという点では、使いやすく便利であり、HTML5やJavaScriptのコードに手を出しにくいデザイナーにとって魅力的なツールとなるだろう。Mac App Storeで49.99ドルで購入できるHypeは、静止したページに少しだけ動的なコンテンツを加えたいWebデザイナーにとって、良い投資となるだろう。