Python入門コンテンツのお供にBrython

Web上のPythonの入門コンテンツに、ブラウザ内でPythonを実行できるコンソールを付けてみました。

道具としては、ブラウザ上でPythonコードが実行できるBrythonというJSのライブラリを使いました。

Brythonとは

Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation

Brythonは、としてのWebのためのスクリプト言語JavaScriptを置き換えるために作られました。これはPython3の実装です。（意訳）

というわけで、Brythonは、Webブラウザ上でJavaScriptの代わりにPythonが使えるものです。

Brythonの典型的な使い方は、htmlのスクリプトタグの中に、JavaScriptじゃなくてPythonのコードを書く、というものみたいです。

例えばこちらのサイトにあるサンプルは非常に基本的なものです。

http://python301.blog123.fc2.com/blog-category-24.html

ちょっと応用で、テキストエリアに入力したPythonコードを実行するということもできます。

Brythonの公式サイトには、PytnonのREPL環境的なコンソール版のコードも公開されていました。

http://brython.info/console.html

それをiframeタグで読み込んだものです。
こんな風に書きます。

  <iframe src=http://brython.info/console.html width=800 height=400></iframe>

表示結果はこちら。

Pythonコードが実行できます。

もともと、このサイトではPythonの初心者向けのコンテンツを提供しようと考えていました。

このコンテンツが対象とする、ものすごく初心者な人には、Pythonをローカル環境にインストールして動かすのも一苦労ということが分かっていました。

ローカル環境にインストールするという作業は、Pythonのプログラミング学習の本質ではありません。インストールでつまずくのは非常にもったいない。

そこで、近頃よくあるブラウザ上でいろいろなプログラミング言語を実行してすぐ結果がみられる環境を、入門記事の中に入れられないかと考えました。

インストール前に、まずPythonを使う感覚をつかんでもらいたかったためです。

そこで、上に書いてあるBrythonのコンソールを、Wordpressで書いた記事の中に簡単に入れられるような工夫をしました。

上記のように、iframeでPythonコードを読み込んだだけです。

とはいっても、公式のコンソールを読み込むのは忍びないので、まずじtech-joho.info上でbrythonコンソール用のhtmlをホストしています。

これを、各投稿でirameで読み込んでいます。

さらに、使いやすいように、
テーマのCSSに、width:100%; position:fixed; bottom:0pxとか書いて、画面下部に固定しました。

表示例はこちらにあります。

tech-joho.infoの管理人です。いろいろな技術について勉強しています。 View all posts by 管理