目次と前回の記事

これまでに作成したモジュール

以下のリンクから、これまでに作成したモジュールを見ることができます。

ルールベースの AI の一覧

ルールベースの AI の一覧については、下記の記事を参照して下さい。

マウスによる着手の入力の実装

前回の記事で、ゲーム盤の 画像の上 で マウスを押した際 に 処理を行う方法 を紹介したので、その方法を使って ゲーム盤上 で マウスを押す ことで 着手を行う処理 を実装します。

下記は、前回の記事で説明した、イベント駆動型プログラミング の手法を利用した GUI の アプリケーション の記述の手順です。この手順に従って play メソッドを修正することで実装を行います。

画面内 の適切な位置に ウィジェットを配置 する 処理を記述 する
それぞれ の ウィジェット に対して、下記の処理 を記述する
1. ウィジェット を操作した際に 行う処理 を記述する、イベントハンドラ というプログラムを記述する
2. ウィジェット に イベントハンドラ を 結び付ける

最初に 人間どうし が対戦する場合の 処理を実装 し、その後 で AI との対戦 を実装することにします。

matplotlib の Figure の画像の描画が行われるタイミング

前回の記事では、ipywigets の ボタンを配置 する 例を紹介 しましたが、〇×ゲーム の場合は、ゲーム盤の画像 に対して マウスで操作 を行うので、ゲーム盤の画像 そのものが GUI の 操作の対象 となる ウィジェット になります。

play メソッドを実行すると、ゲームをリセットした後 で、ゲーム盤を描画 するので、play メソッドを 修正しなくても、ゲーム盤の画像 が 描画されるはず です。

下記は、%matplotlib widget を実行し、play メソッドに ai=[None, None] と gui=True を記述して 人間どうしの対戦 を、GUI で行う プログラムです。

%matplotlib widget
from marubatsu import Marubatsu

mb = Marubatsu()
mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

ゲーム盤が描画されない理由

実行結果 には、matplotlib が作成 した Figure が描画 されますが、画像の中 に ゲーム盤 が 描画されない という 問題が発生 します。その理由 は、以下の通りです。

前回の記事では、%matplotlib widget を実行すると、matplotlib が インタラクティブモード になるため、Figure の 内容が更新 されると、自動的 に 画像が更新 されると 説明したが、正確には画像の 描画の更新 は、イベントループの中 で 行われる
イベントループ は、イベントループから呼び出された イベントハンドラの処理 が 行われている間 は中断され、その処理 が すべて終了した後 で再開される

下記は、前回の記事で説明した イベントループ が 行う処理 の 手順 3 に 上記の処理 を 加えた ものです。

ipywidgets に登録された イベントハンドラ に 対応するイベント が 発生しているか どうかを 調べる
イベント が 発生していれば、対応する イベントハンドラ を 呼び出す。発生していなけれ ば 何もしない
Figure の描画 を更新する
手順 1 へ戻る

また、前回の記事では説明していませんでしたが、JupyterLab のセル に プログラムを記述 して 実行した場合 にも イベントが発生 し、ipywidgets には あらかじめ、そのイベント に対応する下記のような イベントハンドラ が登録されています。

JupyterLab の セルに記述 された プログラムを実行 する

従って、JupyterLab のセル に プログラムを記述 して 実行した場合 は、その処理 が 終了するまで の間は、イベントループの処理 が 中断される ため、実行したプログラム が すべて終了するまで の間は、Figure の 描画の更新 は 行われません。

先程実行 した play メソッド は、ゲーム盤の描画 を行う、draw_board メソッドを 呼び出し ており、draw_board メソッドの最後で plt.show() が 呼び出されています。plt.show() は、イベントハンドラ の 処理の中で実行 された場合でも 画像の描画 を行うので、上記の 実行結果 のように、真っ白 な Figure が描画 されますが、その Figure に対して 行われた plot メソッドなどによる描画は、play メソッドの 処理が終了 して JupyterLab の セルの処理 が 終了するまで は 更新されません。play メソッドは、ゲームの決着がつく か、exit を 入力するまで の間は 終了しない ため、真っ白の画像 が 描画される ことになります。

また、play メソッドで表示される テキストボックス に exit を入力 して play メソッドを終了すると、JupyterLab の セルの処理 が終了し、イベントループ の処理が再開されるようになるため、下図のように ゲーム盤の画像 が 描画される ようになります。

以下は、上記を まとめた ものです。

ipywidgets と ipympl を利用した イベント駆動型プログラミング では、matplotlib の Figure の 描画の更新 は、イベントループ内 の処理で 行われる。

イベントループの処理 は、イベントハンドラの処理 が 行われている間 は中断され、イベントハンドラの処理 が 終了した後 で再開される。

JupyterLab の セルに記述 された プログラムの実行 も、イベントループ から 呼び出される、イベントハンドラの処理 であるため、セルのプログラム の 処理が終了するまで は、Figure の 描画の更新 は 行われない。

`play` メソッドの修正

上記のことから、gui=True を記述して GUI で 〇×ゲームを遊ぶ 場合は、play メソッドで ゲーム盤 を 描画する処理 を 行った後 で、play メソッドの 処理を終了 する必要が あります。下記は そのよう に play メソッドを修正したプログラムです。

10 行目：gui が True の場合に、draw_board メソッドで ゲーム盤 を 描画した後 に return 文 を記述して、play メソッドの 処理を終了 する

 1  import matplotlib.pyplot as plt
 2
 3  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
元と同じなので省略
 4          # ゲームの決着がついていない間繰り返す
 5          while self.status == Marubatsu.PLAYING:
 6              # ゲーム盤の表示
 7              if verbose:
 8                  if gui:
 9                      self.draw_board()
10                      return
11                  else:
12                      print(self)
元と同じなので省略                    
13    
14  Marubatsu.play = play

行番号のないプログラム

import matplotlib.pyplot as plt

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
        # seed が None でない場合は、seed を乱数の種として設定する
        if seed is not None:
            random.seed(seed)
        
        # 〇×ゲームを再起動する
        self.restart()
        # ゲームの決着がついていない間繰り返す
        while self.status == Marubatsu.PLAYING:
            # ゲーム盤の表示
            if verbose:
                if gui:
                    self.draw_board()
                    return
                else:
                    print(self)
                    
            # 現在の手番を表す ai のインデックスを計算する
            index = 0 if self.turn == Marubatsu.CIRCLE else 1
            # ai が着手を行うかどうかを判定する
            if ai[index] is not None:
                x, y = ai[index](self, **params[index])
            else:
                # キーボードからの座標の入力
                coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
                # "exit" が入力されていればメッセージを表示して関数を終了する
                if coord == "exit":
                    print("ゲームを終了します")
                    return       
                # x 座標と y 座標を要素として持つ list を計算する
                xylist = coord.split(",")
                # xylist の要素の数が 2 ではない場合
                if len(xylist) != 2:
                    # エラーメッセージを表示する
                    print("x, y の形式ではありません")
                    # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                    continue
                x, y = xylist
            # (x, y) に着手を行う
            try:
                self.move(int(x), int(y))
            except:
                print("整数の座標を入力して下さい")

        # 決着がついたので、ゲーム盤を表示する
        if verbose:
            if gui:
                self.draw_board()
            else:
                print(self)
                
        return self.status
    
Marubatsu.play = play

修正箇所

import matplotlib.pyplot as plt

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
元と同じなので省略
        # ゲームの決着がついていない間繰り返す
        while self.status == Marubatsu.PLAYING:
            # ゲーム盤の表示
            if verbose:
                if gui:
                    self.draw_board()
+                   return
                else:
                    print(self)
元と同じなので省略                    
    
Marubatsu.play = play

修正後 に下記のプログラムを実行すると、今度は play メソッドの 実行が終了 し、ゲーム盤の画像 が すぐに描画 されるようになることが確認できます。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

上記のように、gui=True の場合は、ゲーム の 決着がつく前 に return 文 で play メソッドが終了して play メソッドの 返り値 が None になるため、gui=False（または、キーワード引数 gui を省略）の場合のように、play メソッドの 返り値 が、ゲームの結果 では なくなります。従って、AI どうし の対戦の 通線成績 を 計算する場合 などで、play メソッドの 対戦結果 を 返り値 として 知りたい場合 は、gui=True を 記述してはいけない 点に注意して下さい。

イベントハンドラの定義とゲーム盤の画像への結び付け

次に、前回の記事で紹介した方法を使って、ゲーム盤の画像 を マウスで押した際 の処理を行う イベントハンドラを定義 します。このイベントハンドラ は、最終的 には マウスを押した ゲーム盤の マスに着手 を行う処理を行いますが、いきなり その処理を記述するのは 難しい ので、とりあえず、下記のプログラムのように、前回の記事で記述した、マウスを押した Axes の座標 を表示するプログラムとして定義する事にします。

def on_mouse_down(event):
    print(event.xdata, event.ydata)

次に、ゲーム盤の画像 と、この イベントハンドラ を 結び付ける必要 が あります。ゲーム盤の画像 は draw_board メソッドで作成しているので、その処理の直後 に下記のプログラムのように、前回の記事で紹介した方法で、ゲーム盤の画像 の上で マウスを押した時 の イベントハンドラ を 結び付ける処理 を記述します。

なお、ゲーム盤の画像 の「タイトル」、「ツールバー」、「変形の操作のマーク」の表示は 〇×ゲーム の ゲーム盤の画像 には 必要がない ので、前回の記事で説明した方法で、表示しない ようにしました。ただし、マウスの座標の表示 は 残しておいたほうが この後のプログラムを記述する際に便利なので、しばらくの間 は 表示を残しておく ことにします。

3 行目：mpl_connect を呼び出して、ゲーム盤 の 画像の上 で マウスを押した際 に、on_mouse_down の イベントハンドラ を 呼び出す ようにする
4 ~ 6 行目：ゲーム盤の画像 の「タイトル」、「ツールバー」、「変形の操作のマーク」の表示を 行わないよう にする

1  def draw_board(self, size=3):   
2      fig, ax = plt.subplots(figsize=[size, size])
3      fig.canvas.mpl_connect("button_press_event", on_mouse_down)
4      fig.canvas.toolbar_visible = False
5      fig.canvas.header_visible = False
6      fig.canvas.resizable = False
# 以下同じなので略
7
8  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.resizable = False
        
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

    # ゲーム盤を描画する
    plt.show()          

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
+   fig.canvas.mpl_connect("button_press_event", on_mouse_down)
+   fig.canvas.toolbar_visible = False
+   fig.canvas.header_visible = False
+   fig.canvas.resizable = False
# 以下同じなので略

Marubatsu.draw_board = draw_board

上記の 修正後 に下記のプログラムを実行し、描画された 画像の上 で マウスを押す と、実行結果 のように、画像の下 に マウスを押した Axes の 座標が表示 されるようになります。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

マウスを押したマスに着手を行う処理の記述

上記では、on_mouse_down の中で、マウスを押した Axes の 座標を表示 しましたが、マウスを押した ゲーム盤のマス に 着手を行う ためには、この座標 を、ゲーム盤 の マスの座標 に変換する必要が あります。その 変換の方法 について少し考えてみて下さい。

変換の方法 が良く わからない 人は、座標が表示 された ゲーム盤の図 を 書いてみる と良いでしょう。下図は、以前の記事で描画した、ゲーム盤 の枠に加えて Axes の枠 と 目盛り を描画した際の図です。

画像を書く のが 面倒な場合 は、JupterLab の 画像の上 で マウスを移動 した際に、画像の下 に表示される Axes の座標 を 観察する という方法もあります。

上図から、例えば、ゲーム盤 の (0, 0) のマスの 座標の範囲 は、x 座標 と y 座標 が 共に 0 ~ 1 の範囲 であることが わかります。同様に、(x, y) のマスの 座標の範囲 は、x 座標 は x ~ x + 1、y 座標 は y ~ y + 1 になることが わかります。

上記から、マウス の Axes 上 の座標の 小数点以下の数字 を 切り捨て て整数に 変換する ことで、ゲーム盤 の マスの座標 に 変換できる ことが わかりました。

数値を整数に変換する方法とその注意点

Python には、数値を整数に 変換する方法 が いくつかあります が、それぞれ 異なる処理 を行うため、正しく 使い分ける必要 が あります。間違った方法 を利用してしまうと、思わぬ バグの原因 になる 場合がある ので 注意が必要 です。

なお、小数点以下 の値が存在する数値を 整数に変換する など、数値の中 で、特定の桁数以下 の部分を 無くす処理 の事を、丸める（round）と 呼びます。

以下の説明では、整数に変換する 場合のみ を説明しますが、例えば「100 の位 で 四捨五入」する、「小数点以下 2 桁 で 切り捨てる」など、特定の桁数 の値に 変換する場合 も あります。いずれも 桁数が異なるだけ で、考え方 は 変わりません。

切り捨て、切り下げ、床関数

「切り捨て」という用語は、その 名前から、小数点以下 の数値を 無くす という意味だと 思っている人 が いるかもしれません が、数学での 切り捨て はそうではなく、具体的には下記のような 計算を行います。

その値以下 の、最も大きな整数 を計算する

当然ですが、元の数値 が 整数の場合 は、その値 そのものが 計算結果 になります。

整数でない 場合は、数値が 0 以上であるか によって、下記のような計算が 行われます。

0 以上 の数値の場合は、小数点以下 の 数値を無くす 計算を行う
負の数値 の場合は、小数点以下 の 数値を無くした後 で 1 を引いた値 を計算する

言葉の説明だけでは分かりづらいと思いますので、切り捨て が行う計算を 図で示します。下図は、数値を 縦方向の直線 で図示した場合に、0 ~ 1 未満 と -1 ~ 0 未満 の 範囲の数値 に対する 切り捨て の計算を表す図です。

図を見れば、切り捨て が行う計算が、複雑なもの ではない ことがわかるのではないかと思います。また、負の数値 の場合は、小数点以下 の 数値を無くした後 で 1 を引いた値 になることも 理解できる のではないでしょうか。

下記は、いくつかの数値 に対して 切り捨て を行った場合の表です。

数値	切り捨て後の数値
1	1
0.5	0
0	0
-0.5	-1
-1	-1

切り捨て はという表現は 紛らわしい ので、他にも「切り下げ」、「負の無限大への丸め」、「床関数」と呼ばれる場合があります。

負の無限大への丸め は、小数点以下 の値が 存在する場合 は、上図のように 負の無限大 に 近いほうの整数 に 丸める計算 が 行われる からです。

床関数 の由来は、先程の図 で、数値を 縦方向の直線 で表現した際に、0 ~ 1 未満 の数値を 0 にする計算 が、数値を 床におろして 0 にする 処理を行う ように 見える からです。

Python では 切り捨て は、数学に関する 様々な処理 を行うことができる math という モジュール の、floor という関数で行えます。floor は床を表す英語です。下記のプログラムは、floor の 使用例 です。上記の表 と 同じ値 が計算されることが確認できます。

import math

print(math.floor(1))
print(math.floor(0.5))
print(math.floor(0))
print(math.floor(-0.5)) # 0 ではなく、-1 が返される
print(math.floor(-1))

実行結果

floor に関する詳細は、下記のリンク先を参照して下さい。

切り上げ、天井関数

数学の「切り上げ」は、下記のような計算を行います。

その値以上 の 最も小さな整数 を計算する

当然ですが、元の数値 が 整数の場合 は、その値 そのものが 計算結果 になります。

整数でない 場合は、数値が 0 以上であるか によって、下記のような計算が 行われます。

0 以上 の数値の場合は、小数点以下 の 数値を無くした後 で 1 を足した値 を計算する
負の数値 の場合は、小数点以下 の 数値を無くす 計算を行う

先程と同様に、切り上げ が 行う計算 を図で示します。

下記は、いくつかの数値 に対して 切り上げ を行った場合の表です。

数値	切り上げ後の数値
1	1
0.5	1
0	0
-0.5	0
-1	-1

切り上げ は、他にも「正の無限大への丸め」、「天井関数」と 呼ばれる 場合があります。

正の無限大への丸め は、小数点以下 の値が 存在する場合 は、上図のように、正の無限大 に 近いほうの整数 に 丸める計算 が 行われる からです。

天井関数 の由来は、先程の図 で、数値を 縦方向の直線 で表現した際に、0 より大きく 1 以下の数値 を 1 にする計算 が、数値を 天井に上げて 1 にするという 処理を行う ように 見える からです。

切り上げ は、math モジュールの、ceil という関数で 行えます。ceil は、天井を表す ceiling という 英単語が由来 です。下記のプログラムは、ceil の 使用例 です。上記の表 と 同じ値 が 計算される ことが確認できます。

print(math.ceil(1))
print(math.ceil(0.5))
print(math.ceil(0))
print(math.ceil(-0.5)) # -1 ではなく、0 が返される
print(math.ceil(-1))

実行結果

ceil に関する詳細は、下記のリンク先を参照して下さい。

偶数丸めによる四捨五入

〇×ゲームの座標の変換の際には利用しませんが、四捨五入 は 良く使われる丸めの計算 で、Python の 四捨五入 を行う関数は 少し特殊な計算 を行うので説明します。

四捨五入 は、round という 組み込み関数 で計算できます（math モジュールの関数では ありません）。round は、丸めや 四捨五入 を表す round という 英単語が由来 です。なお、round という用語に関しては この後で補足 します。

四捨五入 は、一般的 には、下記の計算 を行います。しかし、Python の round は、下記のような計算は 行わない 点に注意して下さい。

小数点以下 の数値が 0.5 以下 の場合は 切り捨てる
小数点以下 の数値が 0.5 より大きい 場合は、切り上げる

Python の round は、下記の計算を行います。

最も近い整数 を計算する
小数点以下 の数値が 0.5 の場合 は、最も近い整数 のうち、偶数を計算 する

このような四捨五入 の 計算方法 を 偶数丸め¹と 呼びます。

このように、Python の round を 利用する際 は、一般的 な 四捨五入 とは 少しだけ異なる計算 が 行われる点 に注意して下さい。

下記は、いくつかの数値 に対して 偶数丸め による 四捨五入 を 行った場合の表 です。表のように、小数点以下 の数値が 0.5 の場合 は、偶数の整数 が計算されます。

数値	切り上げ後の数値
2	2
1.5	2
1	1
0.5	0
0	0
-0.5	0
-1	-1
-1.5	-2
-2	-2

下記のプログラムは、round の 使用例 です。上記の表 と 同じ値 が計算されます。

print(round(2))
print(round(1.5))
print(round(1))
print(round(0.5))
print(round(0))
print(round(-0.5))
print(round(-1))
print(round(-1.5))
print(round(-2))

実行結果

round に関する詳細は、下記のリンク先を参照して下さい。

0 への丸め

小数点以下 の 数値を無くす 計算のことを 0 への丸め と呼びます。由来は、小数点以下 の 数値が存在 した場合は、下図のように、0 に近いほうの整数 に 丸めが行われる からです。数値が 正の場合 と 負の場合 で、下図の 矢印の方向 が 異なる点 に注目して下さい。

Python では、math モジュールの trunc² という関数で 0 への丸め を計算できます。下記は、trunc の使用例です。floor と trunc を 混同しない ように注意して下さい。

print(math.trunc(1))
print(math.trunc(0.5))
print(math.trunc(0))
print(math.trunc(-0.5))
print(math.trunc(-1))

実行結果

trunc に関する詳細は、下記のリンク先を参照して下さい。

0 への丸め は、整数型 の クラス を表す int を使って行うこともできます。下記は、int の 使用例 です。math.trunc と 同じ計算 が 行われます。

print(int(1))
print(int(0.5))
print(int(0))
print(int(-0.5))
print(int(-1))

実行結果

int と math.trunc の違いは、int が 実引数 に 文字列 を 記述できる 点です。実際に、下記のプログラムのように、int は 文字列の "1" を 整数の 1 に変換できます。

print(int("1"))

実行結果

一方、math.trunc の 実引数 に 文字列の "1" を記述すると、下記のプログラムのように エラーが発生 します。

print(math.trunc("1"))

実行結果

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
Cell In[13], line 1
----> 1 print(math.trunc("1"))

TypeError: type str doesn't define __trunc__ method

int に関する詳細は、下記のリンク先を参照して下さい。

丸めに関する英語の表記の補足

英語の round は、四捨五入 という意味で使われることが 実際にあります が、切り捨てなど を 含めた「丸め」という意味で 使われること も あります。round という用語が表す 丸めの種類 を明確にしたい場合は、下記の表のように、round に 丸めの種類 を表す単語を 組み合わせる ことで区別します³。なお、紛らわしい ですが、場合によって は round off を 四捨五入 の 意味で使う こともあるようです。

日本語	英語
切り捨て、負の無限大への丸め	round up、round towards negative infinity
切り上げ、正の無限大への丸め	round down、round towards positive infinity
一般的な四捨五入	round off、round half up
偶数丸めによる四捨五入	round half to even
0 への丸め	round towards 0

さまざま な 丸め処理 を 扱った記事 がありましたのでリンクを紹介します。

〇×ゲームの座標の変換で利用する丸めの種類

数値を 整数に変換 する 丸めの方法 を紹介しましたが、どの方法 で、Axes 上 の マウスの座標 を ゲーム盤 の マスの座標 に 変換すればよいか について少し考えてみて下さい。

切り上げ と 四捨五入 は 明らか に ふさわしくない ので、候補としては 切り捨て と 0 への丸め の 2 つ が挙げられます。どちらが良いかわからない 場合は、実際に それぞれの方法 で 処理を行う プログラムを記述して 確認する と良いでしょう。

0 への丸めによる座標の変換

下記は、0 への丸め を行う int を使って、Axes 上 の マウスを押した座標 の 小数点以下の数値 を削除した 値を表示 するように、on_mouse_down を修正したプログラムです。

def on_mouse_down(event):
    print(int(event.xdata), int(event.ydata))

修正箇所

def on_mouse_down(event):
-   print(event.xdata, event.ydata)
+   print(int(event.xdata), int(event.ydata))

上記の 修正後 に、下記のプログラムを実行し、ゲーム盤の画像 の上の さまざまな場所 で マウス を 押してみて 下さい。

mb.play(ai=[None, None], gui=True)

上図は、ゲーム盤 の (1, 1)、(2, 1)、(0, 1) の マスの上 で マウスを押した 場合の図です。図の下 にそれらの マスの座標 が 正しく表示 されているので、一見する と 問題がない ように 思えるかもしれません。しかし、ゲーム盤の外 で マウスを押す と、下記のような エラーが発生 してしまいます。このエラーの原因について少し考えてみて下さい。

なお、どの部分 で マウスを押す と エラーが発生するか が良く わからない 人がいるのではないかと思いますので、この後 で エラーが発生する場所 が 分かるよう にします。

略
Cell In[14], line 2
      1 def on_mouse_down(event):
----> 2     print(int(event.xdata), int(event.ydata))

TypeError: int() argument must be a string, a bytes-like object or a real number, not 'NoneType'

これまで のプログラムは、エラーが発生 すると、その時点 で プログラムの処理 が 完全に終了 しましたが、イベント駆動型プログラミング では、イベントハンドラ で エラーが発生 しすると、イベントループ の 中断が再開 されるため、イベントループ の処理は 引き続き実行 されます。そのため、上記の エラーが発生した後 に ゲーム盤の上 で マウスを押す と、新しく イベントハンドラ が実行されて、エラーメッセージの後 に マウスの座標が表示 されます。

エラーの原因

エラーメッセージ から、int の 実引数 に記述した event.xdeata の値が、NoneType、すなわち None になっている ことが原因であることが推測されます。

上記のプログラムで表示される ゲーム盤の画像 ではこの エラーの原因 が わかりにくい ので、draw_board メソッドの 最初の行 を、下記のプログラムのように変更して Figure の 背景色 を水色にし、Axes の 枠と目盛り の 描画を削除 する処理を コメント にして 実行しない ようにすることで、原因が わかりやすく なります。

2 行目：subplots の 実引数 に、facecolor="lightblue" を記述することで、作成する Figure の 背景色 を水色にする
12 行目：ax.axis("off") を コメントにする ことによって、Axes の 枠と目盛り が 表示される ようにする

 1  def draw_board(self, size=3):
 2      fig, ax = plt.subplots(figsize=[size, size], facecolor="lightblue")
 3      fig.canvas.mpl_connect("button_press_event", on_mouse_down)
 4      fig.canvas.toolbar_visible = False
 5      fig.canvas.header_visible = False
 6      fig.canvas.resizable = False
 7       
 8      # y 軸を反転させる
 9      ax.invert_yaxis()
10
11      # 枠と目盛りを表示しないようにする
12      #ax.axis("off")
以下同じなので略
13
14  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size], facecolor="lightblue")
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.resizable = False
        
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    #ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

    # ゲーム盤を描画する
    plt.show()          

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
-   fig, ax = plt.subplots(figsize=[size, size])
+   fig, ax = plt.subplots(figsize=[size, size], facecolor="lightblue")
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.resizable = False
        
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
-   ax.axis("off")
+   #ax.axis("off")
以下同じなので略

Marubatsu.draw_board = draw_board

上記の 修正後 に、下記のプログラムを実行すると、実行結果 のような ゲーム盤の画像 が表示されるようになります。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

画像の 白い部分 が、Figure に登録された Axes の 表示の範囲 です。この範囲の外 の、水色の部分 は Axes の表示の 範囲の外 なので、水色の部分 の上で マウスを押す と、前回の記事で説明したように、イベントハンドラ の 仮引数 の xdata と ydata 属性 の値は None になります。そのことは、JupyterLab に描画された上図の 水色の部分 に マウスを移動 した際に、図の下 に マウスの座標 が 描画されない ことからも確認できます。

上図の 白い部分 で マウスを押す と 図の下 に マスの座標 が表示され、水色の部分 で マウスを押す と エラーが発生する ことを確認してみて下さい。

エラーの修正

前回の記事で説明したように、マウス を 押した場所 が、Axes の 上であるか どうかは、イベントハンドラ の 仮引数 の inaxes⁴ という属性で 調べる ことが できます。従って、on_mouse_down を、下記のプログラムの 3 行目 のように修正することで、Axes の中 で マウス を 押した場合だけ、マスの座標 を 表示する ようになります。

def on_mouse_down(event):
    # Axes の上でマウスを押していた場合のみ処理を行う
    if event.inaxes:
        print(int(event.xdata), int(event.ydata))

修正箇所

def on_mouse_down(event):
-   print(int(event.xdata), int(event.ydata))
    # Axes の上でマウスを押していた場合のみ処理を行う
+   if event.inaxes:
+       print(int(event.xdata), int(event.ydata))

上記の修正後 に、下記のプログラムを実行し、ゲーム盤 の 画像の上 の さまざまな場所 で マウスを押して みて下さい。表示される画像は先ほどと同じなので実行結果は省略しますが、今度は白色の Axes の中 で マウス を 押した時だけ 下部に マスの座標 が表示され、水色の Axes の外 で マウスを押して も エラー が 発生しなくなります。

mb.play(ai=[None, None], gui=True)

0 への丸めの問題点

初心者の方には気が付きづらいと思いますが、0 への丸め による 座標の変換 には 1 つ問題 が あります。それは、Axes の中 の、ゲーム盤 の 外の部分 で マウスを押す と、間違ったマスの座標 に 変換される というものです。

以前の記事で説明したように、matplotlib で Axes に plot メソッドなどで描画を 行った場合 は、Axes の 描画範囲 は、Axes に登録した すべての図形 が ぴったり収まる ような 範囲より も 少しだけ広い範囲 になるように 自動的 に設定されます。〇×ゲームの ゲーム盤の画像 の場合は、Axes の x 座標 と y 座標 の範囲は、以前の記事で確認したように、 -0.15 ~ 3.15 が設定されます。

下図⁵の黄色と緑の部分が、Axes の中 で、ゲーム盤 の 外の部分 を表します。

0 への丸め で 座標の変換 を行った場合は、この図の 黄色い部分 で マウスを押した 際に、間違った座標 が表示されます。黄色い部分 は、Axes の x 座標 または y 座標 が -0.15 ~ 0 の範囲 の 負の座標 になりますが、その範囲の数値 は 0 への丸め で 整数に変換 を行うと、0 になります。そのため、黄色い部分 で マウスを押す と、ゲーム盤の外 であるにも 関わらず、(0, 0) のような ゲーム盤の中 の座標が表示されてしまいます。

実際に、JupyterLab に表示される ゲーム盤の画像 の中で、上図の 黄色い部分 に相当する場所で マウスを押して、そのことを確認してみて下さい。

上記の事から、0 への丸め で 座標の変換 を行ってしまうと、ゲーム盤の外 で マウスを押した際 に 着手が行われてしまう という、間違った処理 が 行われてしまう ことになります。

上記の問題が 発生する理由 は、0 への丸め では、0 ~ 1 と -1 ~ 0 の 範囲の数値 が、どちらも 0 に なってしまう という 性質がある からです。切り捨て と 切り上げ では、異なる整数の間 の範囲の数値が 同じ値になる ことは ありません。

このような問題 は、些細なこと なので どうでも良い のではないかと 思った人 が いるかもしれません が、些細に思える問題 を放置することで、後で 思わぬバグの原因になる ことが 実際にある ので、この問題 は修正しておいたほうが良いでしょう。

切り捨て（床関数）による座標の変換

上記の問題 は、下記のプログラムのように、math.floor による 切り捨て によって 座標を変換 することで解決できます。

def on_mouse_down(event):
    # Axes の上でマウスを押していた場合のみ処理を行う
    if event.inaxes:
        print(math.floor(event.xdata), math.floor(event.ydata))

修正箇所

def on_mouse_down(event):
    # Axes の上でマウスを押していた場合のみ処理を行う
    if event.inaxes:
-   print(int(event.xdata), int(event.ydata))
+   print(math.floor(event.xdata), math.floor(event.ydata))

上記の 修正後 に、下記のプログラムを実行し、先程の図 の 黄色い部分 に 相当する場所 で マウスを押す と、下記の 実行結果 のように、x 座標 や y 座標 が 負の値 になり、ゲーム盤の中 のマスとは 異なる座標 が 表示される ようになります。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

本記事では採用しませんが、この問題 を解決する 別の方法 として、Axes の x 座標 と y 座標 の 表示範囲 を 0 ~ 3 に設定して ゲーム盤 の 範囲外 を 表示しない ようにするという方法があります。

ただし、その方法を採用した場合でも、後から ゲーム盤の 範囲外 を表示する 可能性がある のであれば、切り捨て による 座標の変換 を 行ったほうが良い でしょう。

`draw_board` の修正

問題が解決 されたので、draw_board を下記のプログラムのように、Figure の 背景色 を 白に戻し、枠と目盛り を 表示しない ようにします。また、画像の下部 に表示される マウス の Axes の座標 はもう 必要がなくなった ので、表示しない ように修正します。

2 行目：facecolor="lightblue" を削除して Figure の 背景色 を 白に戻す
6 行目：画像の下部 の マウス の Axes の座標の表示 を 行わないよう にする
13 行目：コメントを削除 して、枠と目盛り を 表示しない ようにする

 1  def draw_board(self, size=3):
 2      fig, ax = plt.subplots(figsize=[size, size])
 3      fig.canvas.mpl_connect("button_press_event", on_mouse_down)
 4      fig.canvas.toolbar_visible = False
 5      fig.canvas.header_visible = False
 6      fig.canvas.footer_visible = False
 7      fig.canvas.resizable = False
 8       
 9      # y 軸を反転させる
10      ax.invert_yaxis()
11
12      # 枠と目盛りを表示しないようにする
13      ax.axis("off")
以下同じなので略
14
15  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.footer_visible = False
    fig.canvas.resizable = False
        
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

    # ゲーム盤を描画する
    plt.show()          

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):   
-   fig, ax = plt.subplots(figsize=[size, size], facecolor="lightblue")
+   fig, ax = plt.subplots(figsize=[size, size])
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
+   fig.canvas.footer_visible = False
    fig.canvas.resizable = False
        
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
-   #ax.axis("off")
+   ax.axis("off")
以下同じなので略

Marubatsu.draw_board = draw_board

上記の 修正後 に、下記のプログラムを実行し、実行結果 から 意図通り の ゲーム盤 の 画像が表示される ことが確認できました。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

今回の記事のまとめ

今回の記事では、以下の内容を説明しました。

%matplotlib widget を実行した場合に、matplotlib の画像の 描画が更新 される タイミング
数値を 整数に変換 する 丸めの種類 と 注意点
ゲーム盤の画像 の上で マウスを押した場所 の、ゲーム盤 の マスの座標 への 変換方法

次回の記事では、マウス を 押した場所 に 着手を行う処理 を記述します。

本記事で入力したプログラム

以下のリンクから、本記事で入力して実行した JupyterLab のファイルを見ることができます。

以下のリンクは、今回の記事で更新した marubatsu.py です。なお、on_mouse_down は 先頭に記述 しました。

次回の記事

更新履歴

更新日時	更新内容
2024/4/5	`gui=True` の場合に、`play` メソッドの返り値が `None` になる点に関するノートを追記しました

銀行員 が 良く使っていた ので、「銀行丸め」と 呼ぶ場合 も あります ↩
trunc は、切り詰める という意味の truncate という 英単語の略 です ↩
この 表以外 の 英語表記 も 存在します ↩
inaxes の名前は、Axes の中（in）に あるか どうかという意味です ↩
この図は 説明のため に 独自に作った図 なので、JupyterLab には 表示されません ↩