JupyterをGistで共有する。ブログに貼れるぞ。

Jupyter notebookをブログに貼り付けたいと思い,Gistというサービスを利用しましたが, JSONファイルのソースコードまで貼られることになったので そこを回避しながら書いていきたいと思います。

Gistとは?

GistはGithubの提供しているコードの共有サービスです。

簡易型のgithubだと思えばいいと思います。ブログにもコードを貼ることができるのでとても便利です。
コードを公開したいときにGithubだとgitの知識が必要でgitでpushしなくては行けませんが, Gistはドラッグアンドドロップで公開することができます。

Gistにnotebookをアップする

まずGithubのアカウントを作成します。

github.com

つぎにGithubのホームの右上の "+" ボタンからNew Gistを選ぶか

Create a new Gist · GitHub

こちらからgistを作る画面を開きます。

ここに公開したいipynbファイルをドラッグアンドドロップでファイルを置きます。

そうするとこのようにあたかも2つのファイルがあるように見えます。

f:id:mashiroyuya:20170109203458p:plain

この2つのファイルは見た目が似ていますが、上のファイルがJSONのファイルで下がJupyter notebookの見た目でGistにアップされるファイルです。 このままだとブログに貼ったときにJSONソースコードも表示されてしまうので邪魔になります。なのでここでJSONソースコードを表示する方は削除しておきます。

f:id:mashiroyuya:20170109204737p:plain

これで右下の
Create secret gist か Create public gist でgistを作成できます。

ここでのsecretという意味はGithubアカウントからは他の人に見えないようになるだけで, URLを知っている人であれば普通に見えます。

Gistをブログに貼り付ける

では最後にGistを使ってnotebookをブログに貼り付けます。

貼り付けるGistのページの右上の方にある

f:id:mashiroyuya:20170109205530p:plain

というところの画像の赤い枠の場所をクリックするとスクリプトがコピーされます。
あとはブログのhtmlを編集するところに(もしくは はてなブログMarkdownはてな記法を使っている人はそのままエディタに)貼り付けます。

そうすると

のようにNotebookをブログに表示することができます。
ここにアップした内容はここの記事で紹介しています。

ネットワークアナライザなどのデータをpythonで逆フーリエ変換 - ましろのログ

Jupyter Notebookはそのままでも見やすいので貼り付けると見やすくていいですね。
もちろんGistはJupyter Notebookだけでなく, 普通にソースコードを公開するのにも最適なサービスです。