Jupyter NotebookはPythonプログラム(最近はRなど他の言語でも使えるようです)の実行環境で、プログラムとその実行結果、ドキュメントを一つにまとめることができます。特にmatplotlibを使ってデーターをグラフ化した場合、プログラムとその実行結果のグラフ、それらに対するコメントをまとめて管理できて、非常に便利です。Jupyter Notebookについては次のページなどに詳しい解説がありますので、合わせてご覧ください。

Jupyter NotebookのドキュメントはGistで公開もできますが、やはり自分のブログや自社サイトに貼り込みたい場合があります。ブログやサイトがWordpressで管理されている場合に、Jupyter Notebookのドキュメントを貼り込む方法を調べたので、まとめておきます。

Jupyter NotebookのドキュメントをWordpressに貼り込む方法

Webで調べたところ、いくつかの方法があるようです。

方法1. .ipynbファイルをnbconvertでhtmlファイルにしてWordpressに入力する
方法2. Gistに公開したものをWordpressに貼り込む
方法3. Jupyter Notebookでhtmlファイルを出力し、iframeで貼り込む

簡単なのは方法2のGistに公開したものを貼り込む方法です。フレームの中に貼り込まれるので、短いプログラムなどは問題ないのですが、Jupyter Notebookで書いた、ある程度長さのあるドキュメントを貼り込むと窮屈な感じがします。方法3もフレームの中に貼り込まれるので、同様です。

方法1は例えば「WordPress Blogging with Jupyter Notebook in Five Simple Steps」で紹介されています。一手間かかりますが、Jupyter Notebookを貼り込んだページと直接Wordpressで作ったページを同じスタイルで表示することができ、いい感じです。

具体的な方法です。

1.Jupyter Notebookでコンテンツを作り、Saveする
.ipynbファイルができます。

2.nbconvertでhtmlファイルに変換する

$ jupyter nbconvert --to html --template basic 出来たファイル.ipynb

3.出来たhtmlファイルをWordpressのテキスト画面に貼り込む

4.WordpressのCSSファイルに最後に示したCSSを追加する

このCSSは前述の「WordPress Blogging with Jupyter Notebook in Five Simple Steps」にあったものです。オリジナルでは.sと.s1に色指定をしていましたが、.s1は私の環境では別のところで使っていたので、ここでは指定しないようにしました。

サンプル

ここで紹介した方法で作ったページの一つが次のページです。

「AmbientのデーターをPythonで扱う」

Jupyter NotebookでPythonプログラムとmatplotlibのグラフ、解説ドキュメントを書き、Wordpressに貼り込んでいますが、それ以外のドキュメントページと同じスタイルで書くことができました。

追加するCSS

/************** Jupyter Notebook CSS ************************/
.input_prompt {
    color: #0066cc;
}
.output_prompt{
    color:#cc0000;
}
.prompt{
    font-family: monospace;
    font-size: 14px;
}
.c, c1 {
    color: #408080;
    font-style: italic;
}
.k {
    color: #338822;
    font-weight: bold;
}
.kn {
    color: #338822;
    font-weight: bold;
}
.mi {
    color: #008800;
}
.mf {
    color: #008800;
}
.o {
    color: #9966ff;
}
.ow {
    color: #BA22FF;
    font-weight: bold;
}
.nb {
    color: #338822;
}
.n {
    color: #000000;
}
.s {
    color: #cc2222;
}
.se {
    color: #cc2222;
    font-weight: bold;
}
.si {
    color: #C06688;
    font-weight: bold;
}
.nn {
    color: #4D00FF;
    font-weight: bold;
}
.output_area pre {
    background-color: #FFFFFF;
    padding-left: 5%;
}
.code_cell {
    padding-left: 1%;
}
.cell {
    margin-top: 10px;
    margin-bottom: 10px;
}
br {
    line-height: 2;
}
.cell h1, h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}
/************** Jupyter Notebook CSS ************************/