プログラミング

WordPressに「jupyter notebook」の実行結果を埋め込む方法

「jupyter notebook」で実行された結果をWordPressに埋め込めたら最高だと思い、何かないものかとネットを徘徊。

埋め込む方法は色々ある

やりようは、いくらでもあるようです。

ですが、全て試してみましたが、あまりしっくり来ず。

さらにネットで調べてみると「jupyter notebook」用のとあるプラグインを使用する方法が一番効率が良い印象。

実際に使ってみるとかなり良さげ。

「jupyter_contrib_nbextensions」で幸せになろう

そのとあるプラグインは「jupyter_contrib_nbextensions」というもの。

このプラグインは「jupyter notebook」を使いやすくしてくれるエクステンションキットみたいなもので、その中の「Gist-it」というエクステンションを使用します。

具体的な埋め込みフローは、このエクステンションで「GitHubGist」に投稿、その後にGistページからソースコードを拝借しWordPressに埋め込む、という流れ。

実行環境

Pythonの実行は「Anaconda」を使用しています。

そのためこれ以降は全て「Anaconda」をベースとした方法になります。

「jupyter_contrib_nbextensions」の使い方

「jupyter_contrib_nbextensions」のインストール

まずは「jupyter_contrib_nbextensions」のインストール。

インストール方法は配布元のドキュメントをフォローしながら。

Gist-itの有効化

「Gist-it」エクステンションの有効化は以下のリンクからブラウザを使って設定出来ます。

アクセスが出来ない場合は一旦「Anaconda」の再起動を試してみてください。

「Personal access tokens」の設定

GitHubとの認証を通すために「Personal access tokens」を設定する必要があります。

「Personal access tokens」の作成は以下のリンクから。

GitHubGistへ投稿する

「Gist-it」エクステンションが有効になっていると「jupyter notebook」の編集画面に「GitHub」ボタンが出現。

これを押下すると投稿用のポップアップが表示されます。

「Gist it!」ボタンを押下すると、GitHubGistへ投稿されます。

2回目以降は自動的にIDが振られているので、更新も楽々です。

あとは、作成されたGistページから埋め込み用コードを拝借しお好きなところにペースト。

おわり

Have fun doing the Jupyter notebook!

参考記事

ABOUT ME
maechan
ベンチャー、フリーランス、スタートアップを経験。 開発業務、人事業務に従事していました。 現在は農業系スタートアップ企業でエンジニアとして働いています。 リモートワークをしているノマドサラリーマンです。茶道とワークアウトが趣味です。