[Alexa APL] APLのDocumentをReactで描画するためのコンポーネント react-aplをリリースしました

以前からAPLをwebで描画するためのWASMが公開されていたので、隙間時間で追いかけていたのですが、一区切りするためにライブラリを作ってみました。

ベースにしたもの

APL Core LibraryをWeb-assembly化してブラウザ上でも動くようにしたというライブラリです。

使い方がよくわからなかったので、Issueで直球の質問してやりとりしていたのですが、最近ようやっと動くようになりました。

作ったモノ

上記のWASM系の処理を全部ラップしたReactコンポーネントです。

すごく雑に書くと、こんな感じで使えます。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { APLViewer } from 'react-apl';

const App = () => {
  const apl = {
    "type": "APL",
    "version": "1.4",
    "theme": "dark",
    "mainTemplate": {
      "parameters": [],
      "items": [
        {
          "type": "Container",
          "alignItems": "center",
          "justifyContent": "spaceAround",
          "items": [
            {
              "type": "Text",
              "text": "Hello",
              "fontSize": "50px",
              "color": "rgb(251,184,41)"
            }
          ]
        }
      ]
    }
  }
  return (
      <APLViewer
        aplDocument={apl}
        viewerElementId="test"
        options={{
          viewport: {
            width: 640,
            height: 640,
            dpi: 96
          }
        }}
        />
  );
};

上記のコードを実行すると、こんな感じで表示されます。

使い所

今のところ、「作ったAPLテンプレートをReactアプリで表示したい場合」というすごく限られた場面限定です。

パラメーターを更新するとバグる挙動があるので、エディタのプレビューに使うなどの編集想定の利用は現状厳しいです。更新系のメソッドもあるはずなのですが、最終的にC#のコードを読まないとわからない気配があり、今のところ「わかっているけど、どうにもならない」という状態です。

この辺りC#というかこいつの使い方がわかる方ヘルプしてもらえるとめっちゃ助かります。

ちなみに

理論上はask-sdk-jsx-for-aplで作ったコンポーネントも描画可能です。

import { 
    APL, MainTemplate, Container, Text, AplDocument
 } from 'ask-sdk-jsx-for-apl';

const AplJSX: FC = () => (
    <APL theme="dark" >
    <MainTemplate>
        <Container
            alignItems="center"
            justifyContent="spaceAround">
            <Text
                text="Hello"
                fontSize="50px"
                color="rgb(251,184,41)" />
        </Container>
    </MainTemplate>
</APL>
)
const directive = new AplDocument(<AplJSX />).getDirective()
const document = JSON.stringify(directive.document)

<APLViewer aplDocument={document} />