Wolfram Notebook Embedderのライブラリをインストールする

このライブラリをインストールしてクラウドノートブックをWebページに埋め込み,JavaScriptを使ってこのノートブックとインタラクトする.

CDNからscriptタグを使う...

ライブラリを取得する

関連するHTMLファイルに進み,以下を入力して,クロスオリジンリクエストでライブラリをインポートする:

<script crossorigin src="https://www.wolframcdn.com/notebook-embedder/0.1/wolfram-notebook-embedder.js"></script>

ライブラリを使う

ノートブックをレンダリングしたいHTMLファイル内の位置にコンテナを作成する:

<div id="notebookContainer"></div>

ノートブックを指定のDOMノードに埋め込む:

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

Import文を使う

このワークフローではnpmwebpackを使う.webpackについての詳しい情報は,webpackのドキュメントを参照されたい.

Node.jsがインストールされていることを確かめる

コマンドラインからnode -vを呼び出す:

$ node -v
v9.11.1
  • Node.jsがインストールされていない場合には,そのWebサイトからダウンロードし,インストールする.

プロジェクトを設定する

すべてのファイルを入れるディレクトリを作成し,そのディレクトリに切り替える:

$ mkdir wolfram-notebook-webpack && cd wolfram-notebook-webpack

デフォルトの設定でnpmを初期化する:

$ npm init -y

webpackをローカルマシンにインストールする:

$ npm install webpack --save-dev

webpack-cliをインストールして,コマンドライン上でwebpackを実行する:

$ npm install webpack-cli --save-dev

以下のような形のプロジェクト構造を作成する:

wolfram-notebook-webpack
    |- package.json
    |- package-lock.json
    |- /node_modules
    |- /src
        |- index.js
    |- /dist
        |- index.html

ライブラリを取得する

ライブラリをnpmで親のwolfram-notebook-webpackディレクトリにローカルにインストールする:

npm install --save wolfram-notebook-embedder

ライブラリを使う

ディストリビューションのサブディレクトリに変更する:

$ cd dist

index.htmlを開き,このノートブックをレンダリングしたい位置にコンテナを作成する:

<div id="notebookContainer"></div>

ソースのサブディレクトリに変更する:

$ cd ../src

index.jsを開き,ライブラリをインポートして,ノートブックを指定のDOMノードに埋め込む:

import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

ビルドを作成する

親ディレクトリに切り替える:

$ cd ..

package.jsonファイルを開き,dependenciesキーの値を次のように変更する:

"dependencies": {
    "wolfram-notebook-embedder": "^0.1.5"
}

npxを使ってビルドを作成する:

$ npx webpack

注釈

ライブラリは,ノートブックをDOMノードにレンダリングする「埋め込まれた」関数を明らかにする.さまざまなメソッドでオブジェクトを解像するPromiseを返して,さらにノートブックとインタラクトしたり,ノートブックを制御したりする.詳細は,Wolfram Notebook Embedderのライブラリインタフェースについてのドキュメントを参照されたい.