実はこのシリーズを書くにあたって、折角なのでノートブックをそのまま貼り付ける方法はないか、と試行錯誤をした結果、前回の記事でうまく表示することが出来ました。
ノートブックをそのままブログ記事に貼り付けられると、書く手間は減るし、コードをそのまま見せられるし、コメントなどもノートブックの中に書いてしまえば、ノートブックの活用の際にも役に立ちます。
ただ、ネット検索しても納得できる方法はなかなか見つからず、ようやく思いついて試した方法がHTML編集で直接 iframe ノードを書く、という方法です。備忘録も兼ねてここにやり方を書いておきます。
ちなみにネット上で見つけた方法として、GithubのGistに公開して、それをはてなブログのGist貼り付け機能で貼り付ける、というのがあります。例えばこちらやこちらに詳しいやり方が公開されています。このやり方だと一度に表示できる量が少なく、ちょっと長いノートブックでは必ず縦スクロールバーが表示されること、Maximaをエンジンにして生成したノートブックでは数式のMathjaxレンダリングがうまくいかないこと、などがあり不満がありました。
Gist公開を貼り付けるやり方を突き詰めて考えれば、.ipynbファイルをHTMLに変換してくれるサービスを利用し、その結果のHTMLをそのまま貼り付ければ良いはず、という発想です。そして使うサービスとしてGistよりもnbviewer.jupyter.orgの方が良いだろうと考えました。
では、今回やってみた方法です。
- 作成した.ipynbファイルをインターネット上に公開します。私はGithubに置いたので、ここではその方法で説明します。
- Githubに１つ公開プロジェクトを作り、そこに作ったノートブックの.ipynbファイルを公開します。
- そのレポジトリでその.ipynbファイルをクリックしてファイルの確認画面を表示させます。ここでRaw | Blameと書かれたボタンを見つけて、RawボタンのURLを取得します。このRaw URLにアクセスするとノートブック の中身が生で見られます。
- nbview.jupyter.orgに行き、Raw URLを画面中央のテキストボックスに貼り付けて、隣のGo!ボタンを押します。
- ノートブックが見た目通りwebページに表示されます。そのURLをHTML_URLとします。
- はてなブログの記事の編集画面でHTML編集ボタンを押してHTML編集モードにします。次のHTMLコードを貼り付けます。HTML_URLは先程のURLに置き換えてください。
- <p><iframe width="800" height="12500" scrolling="no" src="HTML_URL"></iframe></p>
- 12500の数字は縦の高さです。全部表示されて不要な余白が残らないように調整してみてください。
- これで終わりです。プレビューをクリックして、うまく表示されることを確認してください。
この方法で、Maximaをエンジンとして作成したノートブックを下記に貼り付けてみました。数式の表示もうまく行っています。
