18
ハンズオン:Hype 2の10の新機能

90年代にHTMLをいじり始めて以来、私は長年WYSIWYGエディタを嫌ってきました。(おそらく、Dreamweaverの初期バージョンとそのひどい出力結果に夜遅くまで怒鳴り散らしていたことが原因でしょう。)今でも、ほとんどすべての作業を手動でコーディングすることを好んでいます。

しかし、今日のHTML5アニメーションを手作業でコーディングするのは、90年代にイメージマップを手作業でコーディングするのと同じくらい楽しいものです。CSSや数値変換に1日中没頭するのは、できれば避けたいものです。Hype 1.0は、これを驚くほどシンプルかつクロスブラウザ対応にした最初のプログラムであり、私はその点が気に入っています。Hype 2は、既に素晴らしいプログラムがさらに大幅にアップグレードされ、10個の新機能(そして小さな機能もいくつか)が追加されました。Hypeの新バージョンを試してみたので、いくつか感想を述べたいと思います。

インスタントプレビューの素晴らしさ

Hype の最も優れた新機能の 1 つは、実は全く別のアプリ、Hype Reflect です。これは、iPhone、iPad、または iPod touch で作業を即座にプレビューできる iOS デバイス用の無料プログラムです。

Hype Reflect を使用すると、iOS デバイス上であらゆるプロジェクトをプレビューできます。

アプリは完璧に動作し、iBooks Authorのようなテザリングは必要ありません。Hypeを実行しているMacと同じWi-Fiネットワークに接続するだけで動作します。iPadは瞬時に起動し、数秒でプロジェクトを読み込んでくれました。

Hype Reflectはミラーモードもサポートしており、ドキュメントに加えた変更がリアルタイムで自動的に反映されます。タイムラインから個々のシーンを表示したり、開発者コンソールを開いたり、プレビューをモバイル版Safariに送信したりできます。この便利なコンパニオンアプリで、特に問題や遅延、その他の問題は一切発生せず、すべてが完璧に機能しました。

モバイルに関するすべて

Hypeはバージョン2でモバイル開発に重点を置き、Hype Reflectはより大規模な戦略の一部に過ぎません。Hype 2では新しいビューポート設定が提供され、特定のモバイル画面向けにデザインされたアニメーションを構築できるようになりました。また、ユーザーによる拡大縮小やタッチイベント、タップのハイライト表示も可能になりました。さらに、ホーム画面に表示するWebアプリとしてプロジェクトを設計することも可能です。

さらに良いことに、新しいオフライン アプリケーション キャッシュ機能を有効にすると、プロジェクト全体をオフラインでプレイできます。この機能は、すべてのリソースをローカルに保存するため、インターネットに接続しているときでも、飛行機の中で時間を過ごしたいときでも、いつでも読み込むことができます。

スワイプ、タッチ、クリック

Hype のアニメーションがタッチ操作に対応しました。左スワイプ、右スワイプ、上スワイプ、下スワイプ、ドラッグといったジェスチャーに、スワイプイベントとタッチイベントをプログラムできるようになりました。デフォルトでは、モバイルデバイスではマウスイベントが自動的にタッチイベントに変換されます。

ギャラリーやカルーセルを作成する場合など、スワイプとドラッグを使用してタイムラインの再生を制御することもできます。

Hype の新しいドラッグ アクションを使用して、約 10 分で最近のローラー ダービーの写真のカルーセルを作成しました。

タイムラインをスワイプしてシンプルなギャラリーを作るのはとても楽しかったです。Hypeのキーフレームツールを使えば、あっという間に作れます。(Hypeのキーフレームの使い方がわからない場合は、アプリのチュートリアルがとても役立ちます。)

騒音、騒音、騒音

自動再生されるオーディオは特に好まれる方ではありませんが、ウェブサイトでサウンドクリップや音楽を再生できると便利な場合があります。そこで、Hype はオーディオアクションをサポートしました。これにより、アクションに応じてサウンドを再生できます。

オーディオアクションはMP3、OGG、WAVをサポートしており、画像ファイルやフォントと同じように、ファイルをドキュメントライブラリにドラッグ&ドロップできます。大きなファイルのプリロードを無効にすることもできます。

オーディオ機能については少しだけ試してみましたが、Hypeの他のインタラクションと同じくらい簡単に設定できそうです。オーディオはシーンの読み込み時、またはタップなどの特定のアクションでトリガーできます。ちなみに(Hypeのドキュメントにも記載されていますが)、iOSデバイスでは、Webページがネイティブアプリまたはホーム画面のWebアプリからアクセスされていない限り、自動的にサウンドが再生されることはありません。ユーザーがタップなどのアクションを実行してオーディオをトリガーする必要があります。

曲線コースター

直線的なトランジションを超えてアニメーションを拡張したい場合、Hype 2 は曲線のモーションパスもサポートしています。すべての要素は左と上の原点から始まりますが、タイムラインのプロパティセクションでいずれかのパスの左側にあるベジェ曲線をクリックすると、モーションパスモードに切り替えることができます。有効にすると、他のグラフィックプログラムと同様に、アニメーションラインをクリックしてベジェ曲線を追加できます。Hype では、パスに沿って要素を回転させる操作も自動化できます。

Hype で曲線のモーション パスを構築するのは、Adobe Illustrator でベジェ曲線を作成するのとよく似ています。

モーションパスモードはうまく機能し、レンダリングも見事ですが、プログラムがスムーズに処理できない奇妙なループを時々作成してしまうことがあります。(狭い空間で 360 度回転するのは推奨されないことがわかりました。)

フォントを無料にする

Google には、プロジェクトに埋め込むことができる無料フォントが多数用意されています。

過去1年ほどの間に、カスタムフォントはWeb全体でより顕著になりました。Hypeは現在、GoogleのWebフォントライブラリとの完全な統合に加え、埋め込みたいカスタムフォントのサポートも提供しています。(Googleのフォントはすべて無料でご利用いただけますが、カスタムフォントをアップロードする場合は、Web上でそのフォントを表示するためのライセンスを取得していることを確認してください。)

Googleフォントの選択は簡単です。テキストインスペクタで「フォントを追加」をクリックし、ソースとしてGoogle Fontsを選択して、お気に入りのフォントを選びます。各フォントのプレビューを表示したり、カスタムプレビューテキストを入力したり、サイズや色を変更してフォントの正確なイメージを確認したりできます。フォントが見つかったら、「フォントを追加」をクリックしてプロジェクトにインポートします。

カスタムフォントを追加するのは少し複雑です。Typekitなどのサードパーティサービスを使用している場合は、関連するCSSを追加するだけで、HypeがTypekitのサーバーからフォントを読み込みます。それ以外の場合は、CSSを追加してフォントをHypeリソースライブラリにアップロードする必要があります。(ありがたいことに、Tumultのウェブサイトには、このための優れたドキュメントが掲載されています。)

新しい形状と改善されたプレビュー

CSS で作成された新しいシェイプや、より優れたプレビューなど、Hype の小さな改善点も、歓迎すべき機能です。

円や角丸四角形などの画像よりもCSSで作成された図形を使いたい場合、Hypeの「挿入」メニューから選択できるようになりました。これらの図形は自由にサイズ変更や回転が可能です。Internet Explorerでは不透明度と角丸四角形に関して若干の制限がありますが、他のブラウザではこれらの組み合わせを問題なくサポートしています。

これらの新しいシェイプをお好みのブラウザで確認するには、ツールバーのHypeのプレビューボタンをクリックするだけです。デフォルトではSafariが選択されていますが、ボタンの右側にある矢印をクリックすると、利用可能なすべてのブラウザ、iPhoneシミュレータ、そしてHype Reflect経由で接続されたデバイスを含むドロップダウンメニューが表示されます。別のブラウザまたはデバイスを選択すると、別のブラウザまたはデバイスを選択するまで、それがデフォルトのプレビューボタンになります。これは、ブラウザごとにテストするのに最適な方法です。アニメーション全体ではなく、ブラウザで現在のシーンだけをプレビューすることもできます。

どこでも検索(OS Xでも)して全画面表示

目新しい機能ではないかもしれませんが、全文検索はオンラインでコンテンツを見つけるための優れた方法です。Hypeは現在、あらゆるプロジェクトで全文検索をサポートしています。つまり、ウェブサイト全体をHypeで作成する場合でも、主要な検索エンジンで完全に検索可能です。

デスクトップの Spotlight または Quick Look から、最初のシーンのアニメーションを直接表示します。

OS X ではプロジェクト ファイルの全文検索もサポートされており、Hype ファイル内の任意のフレーズや単語を Spotlight に入力して検索したり、Quick Look プレビューで最初のシーンのアニメーションを表示したりできます。

画面スペースが狭くて困っている場合は、フルスクリーンモードに切り替えることで、より快適な作業環境を実現できます。私はアプリでフルスクリーンモードを使うことはあまりありませんが、クリエイティブな作業には非常に便利だと感じており、Hype 2に統合されているのは嬉しいです。

遊びの時間

Hype 2を試してみたい方、そしてHTML5のギャラリー、アニメーション、ゲームを作りたいと思ったことがある方は、ぜひお試しください。Tumultのウェブサイトでは14日間の無料トライアルを提供しています。また、9月10日まではMac App StoreまたはTumultのウェブサイトでHype 2を30ドルのアップグレード価格で購入することもできます。その後は通常価格の60ドルに戻ります。