見出し画像

Web技術を活用したインタラクティブコンテンツ開発

たきコーポレーション｜ZERO

はじめに

たきコーポレーション［ ZERO ］の石丸と申します。
テックラボという部署で、主にデジタル施策における体験型コンテンツやアプリケーション開発に従事しています。

これまで体験型のコンテンツ開発においては、UnityやTouchDesignerといったツールを利用することが多かったのですが、先日、Web技術を用いたデータ可視化アプリケーション開発の機会があったためご紹介させていただきます。

フレームワークの選定

技術スタックとしてRustベースの軽量フレームワークTauriを採用しました。Windows、macOS、Linux向けのアプリケーションを開発することができます。ReactやNext.jsとの互換性が決め手となりました。

データ可視化のフレームワークとしてはDeck.glを採用しました。WebGLで動作し、複雑な地理空間データの処理と表示が可能になります。またサブモジュールとして、DeckGLのReactコンポーネントが公開されています。

TauriとNext.jsのセッティング

インストールや基本的なセットアップについては公式ドキュメントをご参照いただきたいのですが、

Next.js

Using deck.gl without React

Tauriを利用した環境では、OS機能へのアクセスをTauri API経由で行うため、tauri.conf.jsonで有効化することができます。

{
  "tauri": {
    "allowlist": {
      "all": true // 全APIの使用を許可
    },
  },
}

次にTauriでNext.jsを、Next.jsでDeck.glを使用するための設定としてnext.config.jsに以下を追記します。

const nextConfig = {
  // Tauri用の設定。Next.jsをSSG/SPAモードに変更
  output: 'export',
  // deck.gl8.9でESモジュールになったため追加
  transpilePackages: ['@deck.gl/layers', '@mapbox/tiny-sdf'],
  experimental: {
    esmExternals: 'loose',
  },
}

module.exports = nextConfig

設定が完了したら、devモードでの起動確認を行います。

$ npm run tauri dev

ターミナルからコマンドを実行するとTauriのウィンドウが立ち上がります。

検証内容について

Deck.glには、データを描画しレンダリングするためのLayer APIが用意されていました。

Layer Catalog Overview

機能のバリエーションも豊富で、さまざま表現がカバーされていますが、
物足りない方は、レイヤーを継承したサブクラスを作成し独自Shaderを追加してカスタマイズすることも可能です。

以下は、CSVデータからプロットされたポリゴンの形状や色やアニメーションをカスタムして実装した例です。
※データは東京都内のコンビニエンスストアの緯度経度を利用しています。

次にDeck.glはポストエフェクトを追加することもできます。

PostProcessEffect

Deck.glはVis.glスイートの一部となっており、独自でポストエフェクトを実装したい場合は、Vis.glスイートに含まれるLuma.glを使用できます。
また、Deck.glは内部でLuma.glが使用されており、Luma.glを介してより低レイヤーな機能へとアクセスすることができます。
※Luma.glはThree.jsほど抽象化されておらず、WebGL APIのラッパークラスという印象を受けました。

今回はLuma.glを使用しBloomエフェクトを実装した例をご紹介させていただきます。

その他に、マウス座標を配列に追加し線を描画することも可能でした。

最後に

実案件ではTauriを採用していたこともあり、一部の機能をRustで実装しましたが、JavaScriptやTypeScriptのみで開発したい場合、Electronが選択肢に挙げられるかと思います。

データ可視化については、Deck.glの代替としてPLATEAUのプロジェクトで採用されることの多いCesiumJSというライブラリもありますので、そちらを活用してみるのも良いかもしれません。