TrinketでWordPressにPythonを埋め込む方法

技術ブログを書いているPython使いのために、PythonをWordPressに埋め込む方法を紹介します。ここでは特別なWebプログラミングに関する知識を使わず、Trinketという外部サービスを使って簡単に埋め込みを実現する方法を試してみます。

WebページでPythonを実行しよう！

コードを読者に体験してほしい

最近では技術ブログを書いているPython使いが増えて来たように思います。

おそらく多くのPythonブロガーの方は、自分のコンピュータやGoogle Colab等の環境でPythonを実行し、そのコードを記事として公開しているでしょう。

一般的にそれで十分で、技術ブログの場合は特に記事上でコードを実行する必要性はほぼないと思っています。

ただ、中には記事を読んでくれている人に「ここでちょっとコード変更を体験してもらえたらな〜」と思う時もあるでしょう。

例えば数式を使って計算をするコードの場合、ユーザに式の変数値や式の形自体を実際に変更させて動作確認してもらった方が、技術の原理やプログラミングに対する理解が深まると考えられます。

本記事はそんなブロガーのために、WordPressの記事にPythonを埋め込む簡単な方法を紹介します。

HTMLやサーバーをいじるのは何か怖い

僕はXサーバーをレンタル、サーバーにWordPressをインストールして記事を書いています。

そしてWordPressは無料テーマで公開されているフレームワークを利用しているので、僕自身は実質Web技術に関する知識は何も使っていません。

XサーバーであればSSH接続でLinuxにPythonをインストールして記事からPHPで呼び出しとか、テーマや記事のHTMLを直接いじってPHPを書く…と様々な方法があるようです。

…という考えが頭をよぎって今までやっていませんでしたが、どうやらそんな人にぴったりのTrinketという外部サービスがあるようです。

（技術者ならその辺やってみなよ、とツッコミ入りそうですが、まだそっち方面への情熱がないのでまずはサービスを使ってみるだけにします…。）

Trinketとは？

Trinket(https://trinket.io/)とは、Webページ上にPython, Java, Rといったプログラミングの実行環境を埋め込む（組み込む：embed）ことができるサービスです。詳しくは公式ページをご確認ください。

Trinket lets you run and write code in any browser, on any device.
Trinkets work instantly, with no need to log in, download plugins, or install software.
Easily share or embed the code with your changes when you're done.

https://trinket.io/

このサービスはPythonの簡単なコード実行環境を埋め込むだけなら無料で使えます。記載上、Python3が有料になっていますが、こちらも標準機能だけ使うのであれば無料の範囲で使うことが可能です。

例えば、numpy.meshgrid()は使えないけど、forでgridデータを作る分には動く…といった感じ。

結構簡単なので、早速やってみましょう！

Trinketで記事にHello World!コードを埋め込んでみる

ここでは初めてTrinketを使う人用の手順をメモしていきます。

Sign Up

まずはじめに、公式ページ(https://trinket.io/)にアクセスし、Sign Upを行います。Google等のアカウントがあれば一瞬で終了します。

プログラミング言語を選択する

画面右上に自分のアカウント名部分がプルダウンで展開できます。その中の「New Trinket」→「Python」と選択します。

コードを書いて保存する

するといきなりコードエディタ画面が出て来ます。

下図左側にPythonコードを書いて、矢印ボタンで実行、右側の画面で結果確認といった要領で、普段使っているIDEとほぼ変わらない構成だと思います。

動作が確認できたら、タイトルを変更した後で「Save」をクリックしてTrinketを保存します。

Shareする

保存が完了したら、画面の構成が下図のように変わります。「Share」→「Embed」を選択します。

埋め込み用URLをコピーする

ここで埋め込み用のURLが出力されます。

Custumizeの欄を変更する事で埋め込んだ時の見栄えを変化させる事ができます。Customizeした後はURLが変更されるので、変更してからコピーしてください。

URLをHTMLとしてWordPressの記事にペースト

最後はWordPress編集画面です。僕はブロックエディタを使っていますが、カスタムHTMLブロックでHTMLとしてコピーしたURLを貼り付けます。

以下がこのページに貼り付けてみた結果。エディタが表示されているはず。

「▶︎」ボタンを押す事でコードを実行する事ができますので、是非クリックしてみてください！

上記コード内を読者（つまりあなた！）が変更し、実行する事ができるはずです。これで使い方はわかりました！

例:4次ルンゲ・クッタ法のコード

最後に「Pythonの4次ルンゲ・クッタ法で多自由度連成振動を解く方法」で書いたコードを試してみます。

元のコードをそのまま貼り付けると、やはり使えないメソッドが多くエラーになりました（無料だとnp.meshgridもnp.powerも使えない。さらにmatplotlibのfigureも…）。また、計算サーバーもTrinketを使っているのか、重い計算には向かないため時間刻みも粗くしています。

ここでは「▶︎」ボタンでコードを実行し、「✏️」ボタンでコード編集画面に戻るような設定にしてみました。是非m, k, cといったパラメータを変更した際のプロット変化を確認してみてください。

まとめ

一応Pythonを記事に埋め込む事ができました。

この記事では本当に簡単にPythonをWordPressに埋め込むための方法として、Trinketを使いましたが、もしかしたらWordPress以外の環境でも、HTMLの書き込みができれば同じように活用できるかも知れません。

まずは超簡単に埋め込んでみましたが、自由にPythonコードを使うためには、やはりXサーバーに直接matplotlibやscipyをpip installして使う以外にないかも知れません。

matplotlibによる3Dプロットを行い、くるくるとプロットを回す事をやりたかったのですが、そこまではできないようです。

ルンゲ・クッタのシミュレーションができただけでも良いかな？