メニューボタンの「HTML5 」は、「Documentation」のサイドバーの中の「HTML5」と同じリンク先です。せっかくなので、細かく読んでいきます。全て、グーグル先生にお任せですが・・・。

「HTML5」



krpano HTML5ビューアは、HTML5 / Javascriptベースのクライアントサイドアプリケーションで、HTML5 CSS 3D TransformsまたはWebGLを使用して、プラグインを必要とせずにパノラマ画像を直接ブラウザに表示します。 krpano HTML5ビューアは、同じxmlファイルとkrpano Flashビューアと同じイメージを使用します。 これにより、同じファイルと同じコードを使用して両方のビューアを制御して設定することができます。 パノラマやツアーは一度だけ作成する必要があり、どこでも自動的に動作します。

グーグル先生はすごいっすね。

「Demonstration」

「Demonstration」では、同じパノラマをさまざまな条件で閲覧できます。ブラウザや条件によってはエラーになったりするかもしれません。


こんなパノラマです。


注目すべきはURLの末尾あたり。.html? の後で読み込むxmlや、html5などの条件を変更しています。つまり、URLからパノラマに変数を渡して動作を変更する、ということができるわけです。詳細はいずれ。


一番下のリンクはこちらで、html5ビュアの指定の詳細が記されています。こちらもいずれ。


「Supported Systems and Browsers」




HTML5、CSS 3D TransformsとWebGLは非常に新しいテクノロジーであり、多くのブラウザとシステムはまだ実装が異なり、サポートレベルも異なりますし、異なる問題もあります。 krpano HTML5 Viewerはこれらの違いを内部的に処理し、すべてのシステムとブラウザで最高のパフォーマンスを発揮するように同じ出力を提供しようとします。

というわけで、技術革新でどんどん変更が加わっていくところです。時々、チェックしておかないと時代に取り残されそうな。

「Supported Panoramic-Image Formats」



●ビューアのサポート – 立体的およびフラットなパノラマのみ
krpano HTML5 Viewer自体は現在、立方体の平面パノラマ画像のみをサポートしています。
どうして? ⇒HTML5のCSS 3D変換では、3D空間でフラットhtmlサーフェイスを変換することしかできません。 これにより、立方体のパノラマの6つの平坦な面やフラットなパノラマの平坦な面のような平坦な面を持つパノラマ形式の使用のみが可能になります。

●ツールサポート – 球形、円柱形および立方体
球形や円柱形などの他の形式を使用できるようにするには、krpanoのツールとドロップレットを使用することができます。 このような画像(hfov = 360の画像のみ)を自動的に立方体画像に変換し、自動的に視野範囲制限を設定して、変換された立方体画像の未使用部分を見ることを避けることができます。

「How to use it?」



krpano HTML5 Viewer自体はkrpano.jsファイルです。

krpano HTML5ビューアは、krpano埋め込みスクリプトでのみ読み込むことができます。 その埋め込みスクリプトは、HTML5ビューアを必要に応じて自動的に読み込みます(html5埋め込み設定に応じて)。

krpano Dropletsを使用すると、1つのすべての ‘.js’ファイルが作成されます。 この.jsファイルでは、埋め込みスクリプトとHTML5ビューアが1つのファイルに統合されます。 この場合、そのファイルだけをhtmlファイルに含める必要があります。

「Notes about the usage on mobile devices (iPhone, iPad, Android)」



Phone、iPad、Androidの携帯端末やタブレットなどのモバイルデバイスで最適なパフォーマンスと安定性を得るには、マルチ解像度のパノラマを使用するか、代替の小さなキューブ画像を使用する必要があります。
krpano HTML5ビューアは、より大きなデスクトップイメージをロードしてオンザフライでスケールすることもできますが、効率を上げるためには、すでに縮小されたイメージの可用性が向上します。 ローディングもこのように高速です。
モバイルデバイス上のキューブサイズを制御するために、html5ディスプレイ設定が利用可能である。

「HTML5 Fullscreen Mode」




●バージョン1.0.8.15のビルド2012-10-05以降、krpano HTML5ビューアはHTML5フルスクリーンAPIもサポートしています。 ブラウザがサポートしていれば(現在はbtw-iOSではない)、HTML5でもフルスクリーンモードに切り替えることができます。
●フルスクリーンモードがサポートされているかどうかを検出するには、fullscreensupport xmlデバイス設定とactions device.fullscreensupport変数を使用する必要があります。
●iframeの使用に関する注意:iframe内のビューアからHTML5フルスクリーンモードを使用する場合は、allowfullscreenパラメータ(およびその非標準ブラウザバージョン)をiframe宣言に追加する必要があります。 これは、このiframeがフルスクリーンモードに切り替えることが許可されていることをブラウザに通知します。

「Testing the krpano HTML5 Viewer on Desktop」




krpano makepanoツールとそのMAKE PANO / MAKE VTOURドロップレットは、自動的にkrpano HTML5ビューアを使用し、モバイル使用のためのより小さいイメージを自動的に生成するための新しい設定を持っています。

「Tools / Droplets」




デフォルトのFlash使用を維持しながら、デスクトップ上でkrpano HTML5 Viewerをテストする方法はいくつかあります。

「Testing iPhone / iPad Layouts and Images on Desktop」




デスクトップ上のiPhoneまたはiPadデバイスをテスト/シミュレートするには、HTML5互換ブラウザとsimulatedevice埋め込み設定を使用できます。 この設定が設定されていると、ビューアは同じレイアウトスケーリング、同じデバイス設定、同じパノラマ画像など、これらのデバイス(マウス/タッチコントロールを除く)のように動作します。

krpano iPhone / iPad Simulator(ビューアのダウンロードパッケージに含まれています)は、iPhone / iPadの背景と元のサイズの表示ウィンドウとともにその設定を使用しています。

「Future Developments」




krpano HTML5ビューアには、krpano Flash Viewerでのみ使用できる一部の機能(部分的なパノラマやオブジェクトムービーなど)がまだありませんが、利用可能になるまでは時間がかかります。

HTML5のブラウザとデバイスは各バージョンでより良くなってきており、krpanoはそうした改良を利用します。 FlashとHTML5の2つのシステムで同じインターフェースを使用することで、既に大きな利点がいくつかあります。パノラマやツアーでは1回しか実行できませんが、FlashからHTML5への移行はほぼシームレスです。

「Supported / Unsupported Functionality (State: krpano 1.18)」




krpano FlashとHTML5ビューアはすでにほぼ同じレベルの機能を提供しているため、サポートされているすべての機能のリストが長すぎるため、現在サポートされていない機能のみがここにリストされます:

●サポートされていない機能:
複数のパノフレーム(マルチフレーム/オブジェクト) – 現在は使用できませんが、すでに動作しています。
Lensflares – 現在は使用できませんが、すでに使用中です(WebGL用)。

●サポートされていないXML要素/変数/アクション:
Flashplayer関連:色補正、ブレンドモード、usecontentsize、スムージング、fscommand()
共通:xml.content、bgcolor、lasterror、onloaderror、カーソル、reloadpano()、freezeview()
多重解像度関連:downloadlockedlevel、プログレッシブ、フレーム、フレーム
レンズフレア:lensflareset、lensflare、addlensflare()、removelensflare()
キーボード/マウス:movetocursor、カーソル移動、ヘッドスイング、
パノラマフォーマット:回転、ストリップ、反転、qtvr、ズーム
グローバルレイヤ設定:image.layer、layer.visible、layer.enabled、layer.alpha、hotspot.visible、hotspot.enabled、hotspot.alpha(注 – これらの設定を通常のレイヤ/プラグイン/ホットスポット要素と混在させないでくださいこれらの設定はもちろんサポートされています!)
レイヤー/プラグイン/ホットスポット要素:マスク、エフェクト

・・・・・・・・

さて、残るメニューは、 Download • Buy • Forum • Contact ですが、これらは特に説明不要と思いますので、いよいよ、次回かは本題に入っていきますよ。

 

futter