Diaryjupyterlab

JupyterLabの拡張機能を作ってみた

jupyterlab

はじめに

JupyterLabに拡張機能の仕組みが提供されたようなので，試しに拡張機能を作ってみました．
まだ安定版ではないようなので，この記事の内容は今後不正確になる可能性が高いです．

JupyterLabについて

JupyterLabは，Jupyter Notebookをベースに拡張したものです．
Jupyter Notebookとの違いとしては，以下のような画面の分割機能やタブ機能があります．

普段は，Jupyter Notebookを使っており，そろそろJupyterLabに乗り換えたいなーと思ってます．

JupyterLabの拡張機能について

拡張機能の仕組みは，できてから日が浅いようでドキュメントもほとんどないです．
今回は，以下のページを参考にしました．

拡張機能作成の全体の流れ

まずは，拡張機能のプロジェクトディレクトリを作ります．今回は，samplelabextensionという名前で作ります．

1
2
3
mkdir samplelabextension
cd samplelabextension
npm init

プロジェクトに必要なライブラリをインストール

1
2
3
4
5
6
npm install --save jupyterlab
npm install --save phosphor
npm install --save-dev jupyterlab-extension-builder
npm install --save-dev rimraf
npm install --save-dev typedoc
npm install --save-dev typescript

次に，samplelabextension/src ディレクトリ下に拡張機能のスクリプトを書きます．
今回は，独自のhtmlを表示する拡張機能とし，typescriptで書きました．

このスクリプトは後でjavascriptに変換して samplelabextension/lib ディレクトリ下に保存されます．

samplelabextension/scripts/buildExtension.js を使って， 拡張機能のスクリプトをビルドします．

1
2
3
4
5
6
7
8
9
var path = require('path');

var buildExtension = require('jupyterlab-extension-builder').buildExtension;

buildExtension({
  name: 'samplelabextension',
  entry: './lib/plugin',
  outputDir : './samplelabextension/static'
});

あとは，package.jsonのscriptsに色々書いたり，

1
2
3
4
5
6
7
8
9
10
11
"scripts": {
    "clean": "rimraf docs && rimraf lib && rimraf samplelabextension/static",
    "build:src": "tsc --project src",
    "build:extension": "node scripts/buildExtension.js",
    "build": "npm run build:src && npm run build:extension",
    "example:browser": "cd examples/browser && npm run update && npm run build",
    "example:node": "cd examples/node && npm install",
    "build:examples": "npm run example:browser && npm run example:node",
    "docs": "typedoc --mode file --module commonjs --excludeNotExported --target es5 --moduleResolution node --out docs/ src",
    "prepublish": "npm run build"
  },

setup.pyに色々書いたり，MANIFEST.inを書いたり，
samplelabextension/samplelabextension/__init__.py を書いたり，
samplelabextension/samplelabextension/_version.py を書いたりすれば終わりです．

ビルドして，

1
2
npm run build
python setup.py install

拡張機能としてインストールすれば，使えるようになります．

1
2
jupyter labextension install --py samplelabextension
jupyter labextension enable samplelabextension --py

JupyterLabを起動すれば，新たなCommandsが追加され，独自のhtmlを表示できています．

Share