Web Layer

Web レイヤーは、HTML5 ウェブページを Designer のコンテンツとしてレンダリングする機能を提供します。さらに Disguise では、ウェブページを「フック」してタイムラインに統合することもできます。

レイヤーの主な機能

• ナビゲーション用のブックマーク（サムネイル付き）。

• 開いているウェブページに JavaScript コマンド を送信する機能（Command というフィールドを参照）。例: PageTransitions.nextPage(2, 1)。

• JavaScript を介して 5 つのカスタムタイムライン float 値をページに送信する機能。ウェブページ内のアイテムをタイムラインに合わせて順番にアニメーション化したり、フォントサイズを変更したりできます。

• JavaScript を介してさまざまな標準的なタイムラインクロック情報をページに送信する機能。

• 透明な背景のページのサポート。例: body { background-color: rgba(0, 0, 0, 0); }。これにより、アイテムを（Twitter フィードのように）合成できます。

• 3（Web レイヤー上部の Interact ボタンを参照）からのページとの簡単なユーザー操作のサポート。

• ローカルにホストされた HTML5 ページ。

ブラウザの機能サポート

ブラウザには次の属性があります。

• ソフトウェアレンダラーを使用します（Designer が GPU を排他的にロックしているため）。

• ブラウザは、Designer への悪影響を防ぐために、別々のプロセスで「サンドボックス化」されています。

• HTML5 をサポートします。

• WebKit を使用します（Chromium ベース。正確なバージョンは Interact → URL: “about:version” → go のパスで「about:version」URL を確認してください）。

• Adobe Flash はサポートされていませんが、システムは限定的な Flash プラグイン機能を実行できます。Flash は対象のマシンに個別にインストールする必要があります。

• WebGL はサポートされていません。

• three.js やハードウェア GPU レンダリングを使用する他のライブラリはサポートされていません。

警告

レイヤーインスタンスは、universal crossfade がトリガーされるたびにリセットされます。つまり、セクションをまたいで同じページが使用されていても、Web レイヤーは自分自身へフェードアウト / フェードインします。

ノート

ブラウザと特定の機能サポートの詳細については、Chromium Web Integration ページ こちら をご覧ください。

Web Layer のプロパティ

Interact

ウェブページをリアルタイムで操作できる操作ウィンドウを開きます。

Bookmark

閲覧したいウェブページのブックマーク。タイムラインに沿ってブックマークを変更すると、新しいウェブページがバックグラウンドで読み込まれてから表示されます。

Command

発行したい JavaScript コマンド。ページを操作するコマンド（ページめくりなど）をタイムラインに沿って実行できます。

Size

2 つのモード:

Match Mapping - ウェブサイトキャンバスのサイズを、適用先の Mapping のサイズに合わせます。

Custom - ウェブブラウザのサイズ（幅 / 高さ）を手動で設定できます。ブラウザキャンバスは Mapping に合わせて拡大されます。

Custom Parameters

Name X: 毎フレーム呼び出したい JavaScript 関数の名前。JavaScript での関数名は d3.*customParam1*(x) になります。

Value X: JavaScript 関数に渡したい値。

Clear Cache

ウェブブラウザのキャッシュをクリアします。

Reset Browser

ウェブブラウジングセッションを破棄してリセットします。

Bookmarks

ブックマークは、Web レイヤーのコンテンツを選択する方法です。

ブックマークのオプションは次のとおりです。

URL

このアドレスは、ウェブアドレスまたはファイルアドレスにできます。

• ウェブアドレスは http:// または https:// で始まります。

• ファイルアドレスは、d3 プロジェクトフォルダー構造内に含まれる HTML5 ファイルに関連します。ローカルに保存されたすべての html5 ファイルは project_folder/objects/Web/sub_folder の下にある必要があります。例えば、すべての新しいプロジェクトには “file:///sample pages/slide heading.html” にサンプルページがあります。

Background

Web レイヤーは、合成できるように透明な背景のページ、または白い背景のページをレンダリングできます。

透明な背景を正しく機能させるには、ウェブページが背景を透明に設定する必要があります。

CSS の例: ** body { background-color: rgba(0, 0, 0, 0); }

Zoom

正しくレンダリングされたフォントでテキストズームできます。通常のブラウザで Ctrl+/- を押すのと似ています。

Interact

小さなブラウザを使ってウェブページと直接対話できます。ブラウザを開くには、interact ボタンをクリックします。

このウィンドウにフォーカスがある間、次のようなウェブページとの対話ができます。

• 入力

• リンクのクリック

• マウスホイールでのスクロール

操作ウィンドウのサイズは、Scale または 50%/100% ボタンで変更できます。

JavaScript Commands

JS コマンドの作成は非常に簡単です。

1. JS コマンドを作成し、ブラウザで実行したい JavaScript を入力します。
2. 実行したい時刻にタイムライン上にコマンドを配置します。

タイムラインが再生されてコマンドのキーフレームを越えると、コマンドが実行されます。

JavaScript Functions

Web レイヤーには 5 組の Name/Value が含まれます。

毎フレーム、その文字列に入力された Name（「d3.」名前空間内）でウェブページ内の関数を呼び出し、単一の float「Value」を渡します。

d3.customParam1(1.0)

本質的には、データをウェブページに「プッシュ」しています。

その後、対応する関数を記述して、好きなように処理できます。

注意: 関数は d3 名前空間内にある必要があります。

var g_size = 0 // here's an example global variable which d3 will set

var d3 =

{
    /* You can specify the names of custom functions in d3. Below are some defaults. */
    /* Every function is called every frame */

    customParam1: function(myVal) { g\_size = myVal }, // set the global
    variable in this function

    customParam2: function(myVal) {},
    customParam3: function(myVal) {},
    customParam4: function(myVal) {},
    customParam5: function(myVal) {},

    /* Below are the inbuilt d3 functions that give your custom HTML5 content a context*/

    lockedTime: function(tBeats) {

    },

    normalTime: function(tBeats) {

    },

    globalTime: function(tBeats) {

    },

    bpm: function(tBeats) {

    },

    status: function(statusString) {

    },

    dmxUniverses: function(universe, data) {

    }
}


    function setup() {
        createCanvas(1920, 1080);
        background(222);
    }

    function draw() {
    ellipse(mouseX, mouseY, 50 + 50 \* g\_size, 50 + 50 \* g\_size);
    // use the global variable to modify content.
}

JS/HTML を使用したサンプルプロジェクトは、Resources ページの Web Interaction セクションの こちら のリンクからダウンロードできます。

Standard JavaScript Functions

これらの JavaScript 関数は、ウェブページが Disguise タイムラインの変化に応答できるように設計されています。これらはウェブブラウザ上で毎フレーム呼び出されます。HTML5 ページがこれらの関数に応答するようコーディングされていれば、それに従って動作します。

d3.lockedTime(float) — 現在のレイヤー内での拍単位の時間。

d3.normalTime(float) — 現在のレイヤー内での拍単位の時間ですが、カウントアップを続けます（ビデオプレーヤーの動作を参照すると分かります）。

d3.globalTime(float) — トラック全体内での拍単位の時間。

d3.bpm(float) — トラックの現在の BPM。

d3.status(string) — 再生ヘッドのステータスを提供します。「playing」、「holding」、「stopped」のいずれかです。

d3.dmxUniverses(array[int], array[array[int]]) — レイヤーエディターで選択されたユニバースのダンプを提供します。

独自のビデオコーデック（h264 など）は現在サポートされていません。

Common Layer Properties

Web レイヤーには次の Common Layer Properties があります。

Blend Mode

BlendMode は、レイヤーの出力が下のレイヤーとどのように合成されるかを制御します。レイヤーは下から上の順にレンダリングされ、上にあるレイヤーは下のレイヤーの出力を変更できます。

Designer でコンテンツレイヤーの明るさ（brightness）を変更することは、実際にはそのレイヤーのアルファ値を制御しています。HAP ビデオを表示している場合でも、ソフトウェアはレイヤーごとに 1 つの制御可能なアルファのレイヤーで合成します。

画像のアルファを表現するには 2 つの方法があります。

ストレートアルファは、RGB と同じように機能するアルファチャンネルです。アルファは、ピクセルごとの 4 番目の情報チャンネルとして機能し、R・G・B が互いに独立しているのと同じように、他の 3 つのチャンネルから独立しています。例えば、ストレートアルファでは同じピクセルで RGB = 255（白）かつアルファ = 0（完全に透明）にすることができます。グラデーションレイヤーなど内部で生成されるコンテンツは、ストレートアルファで生成されます。これは 2 つのうち望ましいスタイルのアルファであり、よりクリーンな方法と考えられています。

プリマルチプライドアルファは、アルファを取り込み、ピクセルごとに RGB チャンネルの値に適用します。プリマルチプライドアルファでは、透明になるほど黒に近づきます。まるでコンテンツが黒いテーブルの上に乗っているかのようです。プリマルチプライドは Adobe Photoshop や AfterEffects のデフォルト出力です。その結果、RGB 255（完全な白）でアルファ 0 のピクセルは、最終的な画像では黒いピクセルとして計算されます。

以下は、個々のブレンドモードがそれぞれ何を行うかの説明です。

Over

レイヤーを完全に不透明にします。すべてのアルファを各ピクセルの RGB 値にプリマルチプライします。アルファ = 黒なので、Over ブレンドモードのレイヤーの明るさを調整すると、暗くなります。

Alpha

デフォルトのブレンドモードです。アルファが存在する場合、アルファ値を透明度として適用します。明るさの変更により、レイヤーの透明度が増減します。

Add

各 RGB ピクセルの値を加算します。常により明るい結果になります。値は 255 で頭打ちになります。

Multiply

各サブピクセルのレベルを 0.0 から 1.0 の間のレベルとして読み取り、ソースとブレンドを乗算します。結果は常に全体的により暗い画像になります。例: 白 x グレー = 0.5。白は透明になり、黒が優先されます。アルファは Over ブレンドモードと同じ方法で適用されます。

Mask

同じマッピングを持つスタック内の上のレイヤーにマスクを適用します。詳細については Mask blending を参照してください。

Luma-Matte

このモードは、レイヤーの Rec. 709 輝度 を使って、同じマッピング内のその上のレイヤーのアルファチャンネルを制御することで、ルママットを作成します。

透明度を決定するため、システムは各ピクセルの赤・緑・青チャンネルの加重平均を計算します。この結果として得られる輝度値が、上のレイヤーの対応するピクセルのアルファ（不透明度）値としてマッピングされます。

その結果、白い領域は上のレイヤーを完全に不透明にし、黒い領域は完全に透明にし、グレーの値は比例した半透明を作成します。これは特殊な Mask ブレンドモードです。基盤となるロジックの詳細については、Mask blending を参照してください。

Inv-Luma-Matte

インバースルママットは Luma Matte マスクと同じように機能しますが、透明度が反転され、白い領域が透明になり、黒い領域が不透明になります。

Multiply-Fade

Multiply と同じですが、ソースレイヤーとブレンドレイヤーの透明度を計算するためにアルファチャンネルを利用します。最大の透明度はプリマルチプライされるため、アルファは黒になります。これはプリマルチプライによって生じる黒を無視します。

Multiply-Alpha

ストレートアルファでの Multiply です。このモードは、アルファが RGB 値にプリマルチプライされていないことを前提とし、半透明のピクセルに補正を適用しません。

Premultiply Alpha

Multiply-fade がプリマルチプライによって生じる暗化を無視するのと同様に、このブレンドモードはアルファに対して同じことを行います。

Colour Burn

コントラストを高めてベースカラーを暗くしながら、ブレンドカラーを反映するブレンドモードです。ブレンドカラーが暗いほど、ベース画像により強く色が適用されます。ブレンドカラーとして白を使用しても変化は生じません。Colour Burn ブレンドモードを使用すると、完全な不透明度で厳しい結果になることがあります。Colour Burn ブレンドモードは、レイヤーのトーンと色の調整に使用できます。

Screen

このブレンドモードは、各チャンネルの色情報を見て、ブレンドカラーとベースカラーの反転を乗算します。結果は常により明るい色になります。黒でスクリーンしても色は変わりません。白でスクリーンすると白になります。効果は複数の画像を重ねて投影するのに似ています。明るい白は完全に不透明、黒は完全に透明、50% グレーは 50% 透明です。

Overlay

ベースカラーに応じて色を乗算またはスクリーンします。パターンや色は、ベースカラーのハイライトとシャドウを保持しながら既存のピクセルにオーバーレイされます。ベースカラーは置き換えられず、元の色の明暗を反映するようにブレンドカラーと混合されます。

Hard Light

ブレンドカラーに応じて色を乗算またはスクリーンします。効果は画像に厳しいスポットライトを当てるのに似ています。ブレンドカラー（光源 / 上のレイヤー）が 50% グレーより明るい場合、スクリーンされたかのように画像が明るくなります。これは画像にハイライトを追加するのに便利です。ブレンドカラーが 50% グレーより暗い場合、乗算されたかのように画像が暗くなります。これは画像にシャドウを追加するのに便利です。純粋な黒または白でペイントすると、純粋な黒または白になります。

Soft Light

ブレンドカラーに応じて色を暗くまたは明るくします。効果は画像に拡散したスポットライトを当てるのに似ています。ブレンドカラー（光源 / 上のレイヤー）が 50% グレーより明るい場合、覆い焼きされたかのように画像が明るくなります。ブレンドカラーが 50% グレーより暗い場合、焼き込まれたかのように画像が暗くなります。純粋な黒または白でペイントすると、はっきりと暗いまたは明るい領域になりますが、純粋な黒または白にはなりません。

Darken

各チャンネルの色情報を見て、ベースカラーとブレンドカラーのうち暗い方を結果の色として選択します。ブレンドカラーより明るいピクセルは置き換えられ、ブレンドカラーより暗いピクセルは変化しません。

Lighten

各チャンネルの色情報を見て、ベースカラーとブレンドカラーのうち明るい方を結果の色として選択します。ブレンドカラーより暗いピクセルは置き換えられ、ブレンドカラーより明るいピクセルは変化しません。

Difference

各チャンネルの色情報を見て、明るさの値が大きい方に応じて、ベースカラーからブレンドカラーを、またはブレンドカラーからベースカラーを減算します。白とブレンドするとベースカラーの値が反転し、黒とブレンドしても変化は生じません。

Exclusion

Difference モードに似ていますが、コントラストが低い効果を作成します。白とブレンドするとベースカラーの値が反転します。黒とブレンドしても変化は生じません。

Colour Dodge

各チャンネルの色情報を見て、2 つの間のコントラストを下げることで、ブレンドカラーを反映するようにベースカラーを明るくします。黒とブレンドしても変化は生じません。

Hard Mix

ブレンドカラーの RGB チャンネルをベースカラーの RGB 値に加算します。あるチャンネルの合計が 255 以上になる場合は 255 の値になり、255 未満の場合は 0 の値になります。したがって、すべてのブレンドされたピクセルは 0 または 255 のいずれかの RGB チャンネルを持ちます。これにより、すべてのピクセルが原色（RGB）、白、または黒に変化します。

Brightness

このプロパティ（電球アイコンとして表示されます）は、レイヤー出力の明るさを制御します。

レイヤーのブレンドモードが Alpha に設定されている場合、明るさを 0 まで下げると、レイヤーの不透明度も 0 まで下がります。これは、あるレイヤーから次のレイヤーへディゾルブしたいときに便利です。その場合、新しいレイヤーを古いレイヤーの上に配置し、その明るさレベルを上げることができます。

Note

Sockpuppet（DMX、OSC、HTTP）にパッチされたレイヤーは、明るさが 0 に設定されると Dormant（休止状態）になります。これは、明るさが 0 より大きい値に変更されるまで、レンダリングを行わず、リソースも消費しないことを意味します。詳細についてはこちらを参照してください: [Sequencing with Sockpuppet] (../content/docs/ja/workflows/sockpuppet/sequencing-sockpuppet)。Sockpuppet パッチを持たないレイヤーは、このようには動作しません。

Mapping

Mapping プロパティは、レイヤーの出力が Stage レベルのスクリーンにどのようにマッピングされるかを制御します。

Designer が提供するさまざまなマッピングタイプの使い方を含むマッピングの詳細については、[Content Mapping] (../content/docs/ja/designer/mapping/content-mapping-overview) の章を参照してください。

Palette

これは、ティントカラーの取得元となるビットマップを定義する静止画像ファイルを指します。デフォルトのパレット（HSVPAL）は、色相と彩度の全範囲で構成されています。このプロパティを選択すると Texture オブジェクトライブラリが開き、ローカルハードドライブの DxTexture フォルダーに保存されているすべての静止画像ファイルが表示されます。

現在のパレットビットマップ内の位置を制御し、それによって色を制御するには、xCol と yCol の値を編集する必要があります（xCol、yCol のセクションを参照）。

現在のパレットビットマップを変更するには:

1. palette を左クリックして Texture オブジェクトライブラリを開きます。
2. パレットビットマップに使用したい静止画像ファイルを左クリックします。

Designer で提供されている標準の静止画像以外のパレットビットマップを使用したい場合は、カスタムの静止画像ファイルを使用する必要があります。

カスタムの静止画像ファイルの配置場所と Designer でのアクセス方法については、[Placing media files] (../content/docs/ja/designer/content-management/placing-media-files) サブチャプターを参照してください。また、ファイルは [サポートされているファイル形式] (../content/docs/ja/designer/getting-started/supported-file-formats) で保存してください。

Xcol, YCol

これらのプロパティは、出力カラーがサンプリングされる現在のパレットビットマップ内の座標を制御します。デフォルト値は 0,0 で、（HSVPAL パレットを使用している場合）白を指します。白を選択したコンテンツの色と乗算すると、単に元のコンテンツの色が生成されます。Colour X は水平位置を制御し、0 が左端、255 が右端です。Colour Y は垂直位置を制御し、0 が上端、255 が下端です。

例えば、ビデオクリップを赤く彩度を上げるには、Colour Y の値を 255 に変更し、Colour X の値に 0 を使用します。これらの座標は、既存のコンテンツの色と乗算されているパレット内の赤色を指します。

デフォルトのパレット HSVPAL を使用している場合、Colour Y は彩度を制御し、Colour X は色相を制御します。