gistのみ！３分間の作業でwordpressにjupyter notebookの実行結果を埋め込む方法

前提条件

このブログの手順を試す前に以下の前提条件が必要になります。

• Githubのアカウントを持っていること
• jupyter notebookを動かす環境があること

wordpressにjupyter notebookを埋め込んだらどうなるの？

手順を説明する前に、wordpressにjupyter notebookを埋め込んだら、ブログではどのように表示されるか見せておくね。

たしかに、ブログ内にjupyter notebookの内容が埋め込まれているのを確認できるかと思います。

実現方法

では、wordpressにjupyter notebookの内容を埋め込む手順を解説します。

gistにjupyter notebookのファイルをアップデートする

gistにjupyter notebookのファイル(拡張子「ipynb」)をアップデートします。

①gistにアクセスする

Githubにログインした状態で以下のURLにアクセスします。

https://gist.github.com/

②jupyter notebookのファイルをgistにアップデートします

scriptタグを取得する

gistにてscriptタグが発行されるので、以下の図を参考に取得します。

wordpressに貼り付ける

wordpressを開いて、記事に先程取得したscriptタグを追加します。

追加したタグのところにgistにアップデートしたjupyter notebookのファイルが表示されます。

難点といえば・・・

今回紹介した方法の難点と言えば、ブログを開いた直後にnotebookの内容を表示できないことです。その理由は、ブログのページを開いたときに、gistにアクセスが発生するためです。

まとめ

以上、wordpressにjupyter notebookの内容を埋め込む方法でした。

＼IT未経験者からのサポートあり！転職サービス3選！！／

サービス名
未経験	未経験OK	未経験の転職専用	経験者向け
公開の求人数	ITエンジニア全体で1万件以上 ITエンジニア未経験で600件以上	未公開	5,000件以上
利用対象	全職種	IT特化	IT特化
特徴	✓誰もが知る転職サービス ✓経歴を登録しておくとオファーが来る	✓企業担当者と条件交渉 ✓スキルの身につく企業を紹介	✓IT専門のエージェントが対応 ✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容	求人検索	企業担当者と交渉 求人紹介 ライフプランのサポート	キャリア相談 求人紹介 提出書類の添削 面接対策
公式サイト	リクナビネクスト	テックゲート	レバテックキャリア