はじめに
Python の学習やデータ分析に便利な Google Colab ですが、実はちょっとした HTML/JavaScript のプレビュー環境としても活用できることをご存知でしょうか。 Colab のノートブックでは、セルに直接 HTML や JavaScript を書いて実行し、出力セル上で簡単なウェブアプリを動かすことが可能です。
本記事では「じゃんけんゲーム」を例に、Colab 上でフロントエンド（HTML/JS）とバックエンド（Python）の両方を組み合わせて動かす手順を解説します。
Colab上でHTMLをプレビューするときは、セルの実行順や再実行に気をつけましょう！
Colab でウェブアプリを動かす仕組み
1. %%html マジックセル
Colab にはセルの先頭で %%html と書くと、そのセルを HTML として解釈・表示するマジックが用意されています。
たとえば、単に %%html の後に <button>Click me</button> と書けば、ノートブックの出力セルにボタンが表示されます。
2. Python 関数との連携
Colab には JavaScript から Python 関数を呼び出すためのメソッドが用意されています。
具体的には、google.colab.kernel.invokeFunction('コールバック名', [引数], {}) で呼び出せます。
Python 側は from google.colab import output をインポートし、output.register_callback("コールバック名", 関数名)
で登録しておけば、JavaScript → Python の呼び出しが可能になります。
これらを組み合わせることで、「HTML/JavaScript でボタンを押す → Python のロジックを実行する → 結果を再びブラウザ上に表示する」という流れを簡単に実装できます。
実装例：じゃんけんゲーム
それでは実際のコードを紹介します。じゃんけんの勝敗を判定する処理を Python 側に置き、UI（ボタンや表示）を JavaScript で作成します。
1. Python 側でロジックを定義・登録
まずは Python セル にて以下を記述します。
import random
from google.colab import output
def janken_logic(user_choice):
"""JavaScriptから呼び出されるじゃんけんロジック"""
hands = ["グー", "チョキ", "パー"]
comp_choice = random.choice(hands)
# 結果判定
if user_choice == comp_choice:
result = "引き分け"
elif (
(user_choice == "グー" and comp_choice == "チョキ") or
(user_choice == "チョキ" and comp_choice == "パー") or
(user_choice == "パー" and comp_choice == "グー")
):
result = "あなたの勝ち"
else:
result = "あなたの負け"
return f"""あなたの手：{user_choice}<br>
コンピュータの手：{comp_choice}<br>
結果：{result}"""
# コールバックを登録
output.register_callback('janken_logic', janken_logic)
janken_logic(user_choice)は、ユーザーが選んだ手を引数に取り勝敗を判定します。
output.register_callback('janken_logic', janken_logic) で 'janken_logic' という名前を付けて登録しておけば、後述の JavaScript から呼び出せるようになります。
2. HTML + JavaScript セルを作成してプレビュー
新しいセルを作成し、先頭に %%html と書いて HTML/JS を埋め込みます。
%%html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>じゃんけんゲーム</title>
</head>
<body>
<h2>じゃんけんゲーム</h2>
<p>ボタンをクリックしてね：</p>
<button onclick="play('グー')">グー</button>
<button onclick="play('チョキ')">チョキ</button>
<button onclick="play('パー')">パー</button>
<p id="result" style="margin-top: 20px; font-weight: bold; color: blue;"></p>
<script>
// Python 関数を呼び出す JS 関数
function play(userChoice) {
google.colab.kernel.invokeFunction(
'janken_logic', // Python 側に登録したコールバック名
[userChoice], // 引数(リスト形式)
{}
).then((result) => {
// Python 側の戻り値が result.data['text/plain'] に格納される
document.getElementById("result").innerHTML = result.data['text/plain'];
});
}
</script>
</body>
</html>
このセルを実行すると、出力欄に「じゃんけんゲーム」の画面が表示されます。ボタンをクリックすると JavaScript 側が Python 関数を呼び出し、勝敗を動的に表示してくれます。
実行とプレビューの流れ
- Python セル (じゃんけんロジック + register_callback) を先に実行すること
- HTML/JavaScript セル (%%html) を実行し、ノートブックの出力領域でウェブアプリを操作
- ボタンを押すと Python 側が呼ばれて、結果が返される
応用: もっと複雑なアプリを作りたい場合
- UI を増やす: HTML/JS でテキストフィールドや画像アップロードなども可能。
- Python ↔ JavaScript のデータ通信: Python 側で JSON を返し、JS で受け取るなど拡張もできます。
- サーバーを立ち上げる: Flask や FastAPI、Streamlit、Gradio の利用も検討。ただし本記事の手法はシンプルです。
おわりに
Google Colab を使えば、Python の利点を生かしながら簡易的なウェブアプリを手早く試すことができます。機械学習モデルの推論結果を手軽に可視化したり、簡単なデモサイトを共有したりする場合にも便利です。
もっと複雑なUIや別タブでの確認が必要なら、Flask や Streamlit などを利用してみましょう。まずはこの「Colab セルに HTML/JavaScript を書き、Python 関数を呼び出す」方法で試してみるのがおすすめです。
手元で気軽に遊べるのが Colab の強みです。ぜひ今回のじゃんけんゲームをきっかけに、さまざまなアイデアを形にしてみてください！