Monaca EducationでのPythonコード実行のメカニズムと、高等学校『情報I』教科書向けの構成
アシアル情報教育研究所

概要
Monaca Educationは、HTML,CSS,JavaScriptなど、Webブラウザ上で実行されるプログラムを作成するためのツールです。
そのMonaca Education上で、Pythonのプログラムを実行させることができます。Brython(https://brython.info )というライブラリを利用して実現しています。
PythonはもともとWebブラウザ上で動作させることを想定している言語ではないため、Brythonはさまざまな工夫をしています。alert()機能や、prompt()機能（※ブラウザのポップアップウィンドウ）のサポート、DOM（Document Object Model）操作のサポートなどです。これらは、標準のPythonには無いライブラリの関数として実装されています。
高等学校の科目『情報I』向け教科書には、Python言語を使ってプログラミングを学ぶものがあります。アシアル情報教育研究所では、これらの教科書のPythonプログラムを、なるべく教科書に掲載されているそのままのかたちでMonaca Education上で記述・実行できるように、Brythonを含むプロジェクトの構成を行いました。
以下で、教科書のPythonプログラムをできるだけそのまま実行できるように構成した内容を説明します。
なお、Monaca EducationでPythonのプログラムを実行させたいだけであれば、別の資料『Pythonを実行するプロジェクトの利用』を見て、その指示に従うだけでも実行できます。本資料
は、詳しい構成内容を知りたい方向けに書かれています。

Brythonを利用するための設定内容

Brythonの実体はJavaScriptのライブラリです。index.htmlファイルのheadタグの中でscriptタグを使い、Monaca Educationプロジェクトに読み込んで使います。
Monaca IDEのプロジェクトパネルでは、次のように表示されます。

index.html
下記のプログラムは、index.htmlの中からの抜粋です。

[brython.min.js, brython_stdlib.js] Brythonの読み込み<head>タグの中で、<script>タグを使い、brython.min.jsと、brython_stdlib.jsの二つをインターネット上から読み込んでいます。

<head>...

<!-- Brython --><script src="https://cdn.jsdelivr.net/npm/brython@3.9.5/brython.min.js"
defer></script><script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js"
defer></script><!-- main.js --><script src="js/main.js" defer></script><!-- python.js --><script type="text/python" src="python.py" defer></script>...
</head><body onload=’brython()’><div id='contents'></div></body>[main.js] 補助コードの読み込み
3つ目の<script>タグでは、main.jsというJavaScriptファイルを読み込んでいます。これは、Brythonとは直接関係ありません。PythonとJavaScriptの差異を吸収するためのプログラム等が書かれているファイルです。
具体的には、グラフ表示の処理です。一部の教科書に掲載されているプログラムの中に、グラフ表示を行うものがあります。matplotlibというグラフ表示のライブラリが使われていますが、これはBrython環境では使うことができません。JavaScript環境では、グラフ表示にPlotly.jsというライブラリを使うことができます。matplotlibの書き方を残しつつ、Plotly.jsを利用したグラフ表示を行えるように、main.jsにJavaScriptのプログラムが書かれています。
教科書に掲載のプログラムを実行するだけであれば、main.jsを変更する必要はありません。

[python.js] Pythonプログラムを書くファイルの指定
4つ目の<script>タグでは、type=”text/python” src=”python.py”という属性が指定されています。
src属性を使って指定しているファイルpython.pyに、Python言語によるプログラムを書いて、実行させることになります。

[bodyタグ] brython()関数の呼び出しと、表示領域の定義上のコードの最後に<body>タグが書かれています。onload属性を使い、「<body>タグの内容が読み込まれたら、brython()関数を呼び出して実行する」という記述をしています。
bodyタグには、id属性を’contents’とする<div>タグがあります。この<div>に、Pythonプログラムからの出力を書き出します。

その他のファイルの指定
そのほか、index.htmlではstyle.cssなどMonaca Educationプロジェクト内の各種ファイルを指定しています。

python.py
python.pyに、Pythonプログラムを記述します。ただし、ファイルの前半の22行目までには、事前に用意されたプログラムが書かれています。20行目から22行目までは、Python言語のコメントで、「この行より下にPythonプログラムを書いてください」と記載しています。
Pythonのプログラムを書くときは、このコメントがある22行目よりあと、つまり23行目以降に書くようにしてください。
from browser import documentfrom browser import alertfrom browser import prompt
from browser import window# Pythonのprint関数をbrowserの処理に読み替える
def print(*msgs, end='<br>' ):i=0message = ''while i < len(msgs):
message = message + str(msgs[i]) + ' 'i += 1
oldContents = document['contents'].innerHTML
document['contents'].innerHTML = oldContents + message + end# Pythonのinput関数をbrowser.promptに読み替える
def input(msg):
return prompt(msg)##################################################### この行より下にPythonプログラムを書いてください####################################################

プログラムの説明
以下は、22行目までに書かれているPythonプログラムの説明です。上に述べた通り、原則として23行目以降に必要なPythonプログラムを書いてください。以下の説明は、アシアルが構成した内容を作り替えたい場合に必要になる情報です。

from … import ...
ファイルの先頭に書かれているfrom … import ...という4行は、Brythonが定義しているbrowser機能を読み込んでいます。このbrowserこそが、JavaScriptから利用できるWebブラウザの諸機能（alert()、prompt()など）をPythonから利用できるようにする機構です。
続いて、Python言語のdefキーワードを使って、二つの関数が定義されています。

print()関数
def print()以下では、print()関数を定義しています。
print()関数は、本来はPython言語に標準で用意されている関数で、引数に渡された値を出力・表示することができます。
しかし、Brython環境には定義されていません（かわりに、browser.documentなどの機能を使うことが想定されています）。
この箇所では、Monaca Education上で教科書のPythonプログラムをなるべくそのまま実行させるために、「Webブラウザで表示している画面の中に値を表示する処理」として定義しています。
表示先は、index.htmlの中にある<div id=’contents’>（ID属性が’contents’と指定されているタグ）の中です。
プログラムは複雑に見えますが、処理内容は簡単で、「複数の値をリストとして受け取り、全て表示した上で、最後に改行（<br>タグ）を付け足す」という動作をします。

input()関数
def input()以下では、input()関数を定義しています。
input()関数も、本来はPython言語に標準で用意されている関数です。ユーザーに対して値の入力を促す表示をした上で、ユーザーの入力を受け付けることができます。
これも、やはりBrython環境には定義されていません（browser.prompt()を使うことが想定されています）。
この箇所で、Monaca Education上で教科書のPythonプログラムをなるべくそのまま実行させるために、input()関数の内部でbrowser.prompt()の処理をするように定義しています。

制限事項
TkInterやmatplotlibなど、Python言語に付属しないライブラリを利用するプログラムについては、アシアルがプログラムを提供していない場合があります。
また、アシアルが提供するプログラムの中には、JavaScriptのライブラリを使ってPythonライブラリの動作を模倣しているものが含まれます。これらは、教科書のプログラム通りではない場合があります（差異がある場合、プログラムにコメントでその旨を記載しています）。
各教科書会社の「情報I」用教科書記載のPythonプログラムのサポート状況の詳細については、各社の教科書のサポートページをご覧ください。
アシアルが提供するPythonプログラムは、Monaca Educationで動作確認をしています。
Monaca for Studyでの動作は、iPhone版で確認済みです。

Android版での動作は、現在準備中です。