このライブラリをインストールしてクラウドノートブックを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文を使う
このワークフローではnpmとwebpackを使う.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のライブラリインタフェースについてのドキュメントを参照されたい.