HTML に関する仕様

このページは HTML に関する仕様をまとめています。

必要最低限の要素

negl では以下の HTML を最低限必要とします。

#global-container サイト全体を囲む要素に付与
.page-container ページ毎に異なるコンテンツを表示する部分に付与
#canvas キャンバス要素に付与

<!DOCTYPE html>
<html lang="ja">
  <body>
    <div id="global-container">
      <div class="page-container">
        <!-- この中にページ毎に異なるコンテンツを記述 -->
      </div>
      <!-- canvas 要素は必ず挿入してください。 -->
      <style>
        /* 下記のスタイルは最低限必要です。 */
        /* canvasを画面一杯まで広げる。 */
        #canvas {
          height: 100vh;
          width: 100vw;
          position: fixed;
          top: 0;
          left: 0;
          /* canvas要素を背面に移動 */
          z-index: -1;
        }
      </style>
      <canvas id="canvas"></canvas>
    </div>
  </body>
</html>

セレクタの変更

もし、#global-containerなどのセレクタを変更したい場合は setup 関数実行時にオプションとして渡すことができます。

config.$.globalContainer: グローバルコンテナのセレクタを指定のものに変更します。
config.$.pageContainer: ページコンテナのセレクタを指定のものに変更します。
config.$.canvas: キャンバスのセレクタを指定のものに変更します。

例）キャンバス要素に使用するセレクタを#my-canvasに変更

const { start } = setup({ $: { canvas: "#my-canvas" } });

データ属性（data-*）

negl では data 属性を使用して個別の制御を行っています。negl 内部で使用しているデータ属性は次の通りです。

data-webgl

エフェクトの種類を定義する際に使うデータ属性です。

templateエフェクトを要素に適用

<img data-webgl="template" data-tex-1="/img/sample.jpg" />

data-tex-*

画像や動画のテクスチャをエフェクトで読み込むためのデータ属性です。

templateエフェクトで使用している画像を読み込み

<img data-webgl="template" data-tex-1="/img/sample.jpg" />

また、画像などを複数使うエフェクトの場合、末尾の数値をカウントアップして使用します。

slider-worldで複数枚の画像を読み込み

<img
  data-webgl="slider-world"
  data-tex-1="/img/sample1.jpg"
  data-tex-2="/img/sample2.jpg"
  data-tex-3="/img/sample3.jpg"
/>

data-page

ページ毎に異なる制御を加える際に付与する属性です。.page-containerを指定した要素に対して付与して使います。詳細はページ毎の制御を実装しようをご覧ください。

data-interactive

エフェクトに対する mouseenter（マウスがエフェクトに入った時）、mouseleave（マウスがエフェクトから外れた時）、click（エフェクトがクリックされた時）イベントを受け取りたい場合に付与する属性です。また、シェーダ内で uHover、uMouse の値を使用している場合にもこの属性を付与する必要があります。

data-click-*

エフェクトに対するクリック時の制御を定義するためのデータ属性です。 data-click-*に設定された URL、または Ob クラスのメソッドはエフェクト（メッシュ）がクリックされた際に実行されます。

💡

data-click-*を使用する場合は必ず data-interactive も合わせて付与してください。

URL を設定した場合

画像クリックで/page1.htmlに遷移

<img
  data-interactive
  data-webgl="template"
  data-tex-1="/img/sample.jpg"
  data-click-1="/page1.html"
/>

URL を設定した場合（別タブで開く）

別タブで/page1.htmlを開く場合

<img
  data-interactive
  data-webgl="template"
  data-tex-1="/img/sample.jpg"
  data-click-1="newTab,/detail.html"
/>

Ob クラスのメソッドを設定した場合

Ob クラス内に指定されたメソッドが見つかった場合はクリックによってそのメソッドが実行されます。また、カンマ区切りで引数を渡すことができます。

クリックでObクラスにlogメソッドを実行

<img
  data-interactive
  data-webgl="some-effect"
  data-click-1="log,Hello,ClickEvent"
/>

some-effect/index.js

import { Ob } from "negl";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragment.glsl";
 
export default class extends Ob {
  setupVertex() {
    return vertexShader;
  }
  setupFragment() {
    return fragmentShader;
  }
  log(...args) {
    console.log(args);
    // クリックで以下のログが出力されます。
    // ['Hello', 'ClickEvent']
  }
}

スライダなどでクリックイベントを複数使い分けたい時

また、スライダエフェクトなどの複数枚画像がある場合などはそれに対応するクリックイベントを複数個登録することができます。

スライダ等の画像毎に遷移先を変えたい場合は、画像枚数分data-click-*を登録

<img
  data-interactive
  data-webgl="slider-noise"
  data-tex-1="/img/sample1.jpg"
  data-tex-2="/img/sample2.jpg"
  data-tex-3="/img/sample3.jpg"
  data-click-1="someMethod"
  data-click-2="/page2.html"
  data-click-3="http://google.com/"
/>

クリックイベントに独自の呼び分け条件を付けたい時

メッシュがクリックされた際にどの data-click-_ に設定されたイベントを実行するかはOb.getClickIdxの戻り値で判定しています。一つのメッシュでも状態毎に異なる data-click-_ 属性を呼び分けるなどの高度な処理を記述したい場合には Ob.getClickIdx メソッドをオーバーライド（上書き）して利用してください。

data-click-*をランダムで呼び分けます。

import { Ob } from "negl";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragment.glsl";
 
export default class extends Ob {
  setupVertex() {
    return vertexShader;
  }
  setupFragment() {
    return fragmentShader;
  }
  getClickIdx() {
    // data-click-1 と data-click-2 を 1/2 の確率で呼び分けます。
    return Math.random() > 0.5 ? 1 : 2;
  }
}

<!-- 1/2 の確率で page1.html または page2.html が開きます。 -->
<img
  data-interactive
  data-webgl="some-effect"
  data-click-1="/page1.html"
  data-click-2="/page2.html"
/>

data-transition

ページトランジションのタイプを指定するための属性です。

使用例

index.html

<!-- リンクの場合 -->
<a href="/detail.html" data-transition="some-transition">リンク</a>
 
<!-- エフェクトの場合 -->
<img
  data-webgl="some-effect"
  data-transition="some-transition"
  data-interactive
  data-click-1="/detail.html"
/>

data-*のプレフィクスを変更する場合

また、data 属性に続く文字列は setup 関数実行時に変更することができます。

data-tex-*をdata-img-*に変更

const { start } = setup({ prefix: { tex: "img" } });

Transitionstate エフェクト