目次と前回の記事

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

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

ルールベースの AI の一覧

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

今回の記事の内容

前回の記事で リセットボタン を実装しましたが、異なる AI と対戦を行う場合は、キーワード引数 ai の内容を変更して、改めて play メソッドを 実行する必要 がある点が面倒です。そこで、play メソッドを 実行しなくても、GUI で AI を 選択できる ようにします。

ipywidgets の Dropdown ウィジェットの使い方

GUI で AI を選択 できるようにするためには、複数の項目 の中から 1 つを選択 するための GUI が必要になります。ipywidgets には、そのようなウィジェットとして、ドロップダウンメニュー を表す Dropdown や、ラジオボタン を表す RadioButtons などがあります。

選択を行うための ipywidgets のウィジェット

Dropdown は、下図左 のような、選択中 の項目が表示される ウィジェット で、この上 で マウスを押す と、下図右 のような ドロップダウンメニュー が表示されます。下図は画像なので操作できないので、実物を見たい方 は、下記の リンク先 を参照して下さい。

RadioButtons は、下図のように、すべての項目 が表示され、左の ラジオボタン で 項目を選択 する ウィジェット です。実物を見たい方 は、下記の リンク先 を参照して下さい。

RadioButtons は、選択できる 項目の数 が 多くなる と、表示範囲 が 広くなる という欠点があります。これまで に ai1 から ai14s まで 多数の AI を作成してきたので、本記事では、Dropdown を使って AI を選択 することにします。

本記事では扱いませんが、ipywidgets には、他にも 選択を行う ための ウィジェット が 多数用意 されています。興味がある方は、下記のリンク先を参照して下さい。

Dropdown の作成方法

Dropdown は、ipywidgets の Dropdown という関数を使って作成します。例えば、先程紹介した画像の Dropdown は、下記のプログラムで作成し、ボタン の ウィジェット と同様に、display を使って 画面に表示 します。Dropdown を呼び出す際に記述する 実引数 については、この後で説明 します。実際に実行し、表示された Dropdown の上 で マウスを押す と メニューが表示 され、項目を 選択できる ことを確認して下さい。

import ipywidgets as widgets

dropdown = widgets.Dropdown(
    options=['1', '2', '3'],
    value='2',
    description='Number:',
)
display(dropdown)

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

Dropdown の属性と `Dropdown` の仮引数

Dropdown によってよって作成された オブジェクト には、下記のような属性があります。それぞれの 属性の意味 についてはこの 後で詳しく説明 します。なお、layout と style 属性は、すべて の ウィジェット で共通します。

属性	意味	データ型
`options`	選択できる項目のリスト	list
`value`	選択中の項目	any（何でもよい）
`index`	選択中の項目のインデックス	int
`label`	選択中の項目のラベル	str
`description`	左に表示される説明	str
`disabled`	`True` の場合に操作できなくなる	bool
`layout`	作成するウィジェットのレイアウトの設定	widgets.Layout
`style`	作成するウィジェットのスタイルの設定	dict

これらの属性は、Dropwdown の 作成時 に、Dropdown の 実引数 に、属性名 と 同じ名前 の キーワード引数 を記述することで設定することが できます。

具体例 を挙げます。下記のプログラムは、先程作成 した Dropdown と 同じもの を作製するプログラムです。下記のプログラムのように、Dropdown の属性 は、Dropdown の 作成後 に、直接値を代入 することでも設定することが できます。

dropdown2 = widgets.Dropdown()
dropdown2.options = ['1', '2', '3']
dropdown2.value = '2'
dropdown2.description = 'Number:'
display(dropdown2)

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

また、Dropdown を display で 表示した後 で、下記のプログラムのように、Dropdown の 属性を変更 すると、作成した Dropdown の 表示内容 が下記の実行結果のように 変化します。なお、description 属性は、Dropdown の 左に表示 される説明を表します。

dropdown2.description = '数字:'

実行結果（先程表示した Dropdown の表示内容が変化します）

Dropdown の主要な属性

Dropdown の 主要な属性 について説明します

`options`

Dropdown で選択できる 各項目 を表す list です。先程の例 では、options=['1', '2', '3'] のように、'1'、'2'、'3' という 3 つの文字列 が list の要素に記述されたので、それら が 選択できる ようになります。

Dropdown では、選択できる項目が 表す値 と、メニューに その項目 を表示する際の 文字列 を 異なるものにする ことが できます。例えば、メニュー のそれぞれの項目は "令和元年"、"令和二年"、"令和三年" のように 日本語で表示 するが、それらの 項目を選択 した際には、2019、2020、2021 のような西暦を表す数値が 選択される ようにすることができます。このような、メニュー に表示する 文字列 の事を ラベル と呼びます。

ラベル を設定した Dropdown は、下記のプログラムのように、それぞれの項目 を (ラベル, 値) という tuple で記述します。下記のプログラムを実行すると、下図左 のような Dropdown が表示され、この上 で マウスを押す と、下図右 のような、設定した ラベル が表示される ドロップダウンメニュー が表示されます。

dropdown3 = widgets.Dropdown(
    options=[("令和元年", 2019), ("令和二年", 2020), ("令和三年", 2021)],
    description="年:", 
)
display(dropdown3)

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

なお、dropdown や dropdown2 のように ラベル を 設定しない 場合は、それぞれの項目の ラベル には、自動的 に 項目の値 を 文字列型 のデータに 変換した値 が設定されます。

`value`、`index`、`label`

Dropdown には、選択中の項目 を表す、下記の表の value、index、label という 3 つの属性 があります。

属性名	意味
`value`	選択中の項目の値
`index`	選択中の項目を表す `options` 属性の要素のインデックス
`label`	選択中の項目のラベル

Dropdown の 作成時 に、Dropdown に これら の キーワード引数 を 記述しなかった場合 は、先頭の項目 が選択された状態の Dropdown が作成 されます。

例えば、先程作成 した dropdown3 の 各項目 の インデックス、ラベル、値は以下のように設定されています。

インデックス	ラベル	値
0	`"平成元年"`	`2019`
1	`"平成二年"`	`2020`
2	`"平成三年"`	`2021`

dropdown3 の メニューの選択 を 好きな項目 に 変更した後 で、下記のプログラムを実行すると、index、label、value 属性に、現在選択中 の項目に対応する 上記の表 の値が表示されます。下記の 実行結果 は、平成三年 を 選択した際 のものです。

print(dropdown3.index, dropdown3.label, dropdown3.value)

実行結果

2 令和三年 2021

また、これらの属性 の いずれか に 値を代入 することで、Dropdown の 選択項目 を 変える ことが できます。その際 に、残りの 2 つ の 属性の値 は 自動的 に 新しく選択 された 項目の値 に変更されます。

下記は、index 属性に 0 を代入するプログラムです。実行結果 のように、Dropdown の 選択項目 の表示が 平成元年 に変更され、label と value 属性の値も変更されます。

dropdown3.index = 0
print(dropdown3.index, dropdown3.label, dropdown3.value)

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

0 令和元年 2019

下記は、label 属性に "令和二年" を代入するプログラムです。実行結果 のように、Dropdown の 選択項目 が 令和二年 に変更され、index、value 属性の値も変更されます。

dropdown3.label = "平成二年"
print(dropdown3.index, dropdown3.label, dropdown3.value)

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

1 令和二年 2020

value 属性に 値を代入 する場合も同様です。興味がある方は試してみて下さい。

なお、下記のプログラムのように、対応する項目が 存在しない値 を代入した場合は、実行結果 のような エラーが発生 します。これは、3 つの属性 に 共通する性質 です。

dropdown3.value = 2000

実行結果

略
File c:\Users\ys\Anaconda3\envs\marubatsu\Lib\site-packages\ipywidgets\widgets\widget_selection.py:244, in _Selection._validate_value(self, proposal)
    242     return findvalue(self._options_values, value, self.equals) if value is not None else None
    243 except ValueError:
--> 244     raise TraitError('Invalid selection: value not found')

TraitError: Invalid selection: value not found

上記のエラーメッセージは、以下のような意味を持ちます。

TraitError
TraitError は、ipywidget 独自のエラーです。おそらくウィジェットの選択に関するエラーを表しているのではないかと思います
invalid syntax
見つからない（not found）value を選択するという、不正な（invalid）選択（selection）を行おうとした

`description`

Dropdown の左 に表示される説明（description）を表します。

下記のプログラムのように、この属性 に値を 代入しない 場合は、Dropdown の左 には 何も表示されません。

dropdown4 = widgets.Dropdown(
    options=['1', '2', '3'],
    value='2',
)
display(dropdown4)

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

`disabled`

下記のプログラムのように、この属性 に True が代入 されていた場合は、Dropdown の メニューの項目 が 薄い色で表示 され、操作ができなく（disabled）なります。実際に実行 して 操作できない ことを確認して下さい。なお、薄い色で表示 されるのは 項目の部分 だけで、左に表示 される description の説明は 薄く表示されません。

dropdown5 = widgets.Dropdown(
    options=['1', '2', '3'],
    value='2',
    description='Number:',
    disabled=True,
)

display(dropdown5)

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

なお、disabled 属性は、すべて の 操作を行うウィジェット¹ に 共通する属性 で、それらのウィジェット の 作成時 には、disabled 属性の 初期値 として False が代入 されます。

`layout`

ウィジェット の横幅や縦幅などの レイアウト（layout）の設定を表す属性です。レイアウト は、ipywidgets の Layout という関数で作成される オブジェクト で設定します。

Layout には、様々な仮引数 があり、その中 で ウィジェット の サイズ に関する 仮引数 には下記の表のようなものがあります。

仮引数	意味
`width`	横幅
`height`	縦幅
`max_width`	横幅の最大値
`min_width`	横幅の最小値
`max_height`	縦幅の最大値
`min_height`	縦幅の最小値

また、サイズ の値は、以下の方法 で記述します。

	記述方法
ピクセル単位で設定する	`"100px"` のように、`px` で終わる文字列を記述する
割合で設定する	`"50%"` のように、`%` で終わる文字列を記述する

下記は、Dropdown の横幅を 100 ピクセル と、表示できる範囲 の半分（50 %）の サイズ で作成するプログラムです。

dropdown6 = widgets.Dropdown(
    options=['1', '2', '3'],
    layout=widgets.Layout(width="100px")
)
display(dropdown6)

dropdown7 = widgets.Dropdown(
    options=['1', '2', '3'],
    layout=widgets.Layout(width="50%")
)
display(dropdown7)

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

"50%" のように、% で サイズを指定 した場合は、VSCode の ウィンドウの幅 を変更すると、ウィジェットの幅 が 自動的に変更 されます。実際に試してみて下さい。

ウィジェット の レイアウトの詳細 に関しては、下記のリンク先 を参照して下さい。

`style`

ウィジェット の内部の 文字の色 などの スタイル（style）の設定を表す属性です。スタイル の設定は、スタイルの種類 を表すキーと その値 が設定された dict で行います。設定できる スタイル は、ウィジェット の 種類ごと に 異なって おり、Dropdown の場合は、下記のプログラムのように、description_width というキーによって、左に表示 する説明の 文字列 の 表示幅 を 設定できます。

下記は、description_width に "50px" と "100px" を設定した場合で、実行結果 のように、description で表示した "number" の 文字列 の 表示幅 が変化します。

dropdown8 = widgets.Dropdown(
    options=['1', '2', '3'],
    description="number",
    style= {
        "description_width": "50px",
    }
)
display(dropdown8)

dropdown9 = widgets.Dropdown(
    options=['1', '2', '3'],
    description="number",
    style= {
        "description_width": "100px",
    }
)
display(dropdown9)

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

ウィジェット の スタイルの詳細 に関しては、下記の リンク先 を参照して下さい。

AI を選択する Dropdown の作成

AI を選択する Dropdown を作成 するためには、どの AI を Dropdown で 選択できる ようにするかを 決める必要 があります。せっかくなので、ルール 1 から ルール 14 までの すべての AI を 選択できる ようにすることにします。ただし、ai1 と ai1s のように、同じルール の AI が 複数存在 する場合は、s がつく方 を 選択できる ようにします。従って、ai1s ~ ai14s の 14 種類 の AI を 選択できる ようにします。

AI の関数の list の作成

Dropdown の 選択項目 は、options 属性 に list の形式 で 代入する必要 があるため、その list を作成します。下記は、AI の 関数の一覧 を表す list を作成するプログラムです。

import ai

ai_list = [ ai.ai1s, ai.ai2s, ai.ai3s, ai.ai4s, ai.ai5s, ai.ai6s, ai.ai7s,
            ai.ai8s, ai.ai9s, ai.ai10s, ai.ai11s, ai.ai12s, ai.ai13s, ai.ai14s ]

これまで のプログラムで AI の関数 を 利用する際 に記述した方法で、上記のプログラムを下記のプログラムのように記述することも できます が、記述が かえって長くなる ので上記のように記述しました。

from ai import ai1s, ai2s, ai3s, ai4s, ai5s, ai6s, ai7s, \
               ai8s, ai9s, ai10s, ai11s, ai12s, ai13s, ai14s

ai_list = [ ai1s, ai2s, ai3s, ai4s, ai5s, ai6s, ai7s,
            ai8s, ai9s, ai10s, ai11s, ai12s, ai13s, ai14s ]

上記のプログラムで 正しい list を作成できていますが、上記のプログラムは 記述が大変 だと思いませんか？AI の 関数の名前 は ai と s の間に 1 から 14 まで の整数が __ 入る__ という、規則正しい名前 になっています。そのこと と、オブジェクトの中 から 指定した名前 を持つ 属性を計算 する getattr という 組み込み関数 を利用することで、上記のプログラムを 簡潔に記述 することが できます。

`getattr` を利用した AI の関数の取得方法

getattr は、以前の記事で説明していますが、これまでに作成 した marubatsu.py や ai.py では 利用していない ので、改めて説明 します。

getattr は、任意の オブジェクト 対して 利用できる関数 で、1 つ目 の 実引数 に オブジェクト を、2 つ目 の 実引数 に 属性の名前 を記述することで、指定した属性 の値を 返り値 として 返す処理 を行います。

Python では、インポート した モジュール内 で定義された変数や 関数など を、モジュール名.名前 のように記述して参照することが できます。. を使って 記述している ことからわかるように、モジュール の変数や関数などは、インポート した モジュール を表す オブジェクトの属性 として管理されています。

従って、例えば ai.ai1s は、ai という モジュール の "ai1s" という名前の属性に代入されているので、下記のプログラムのように、getattr を利用することで、ai.ai1s を参照して、特定の変数 に代入することが できます。

ai1s = getattr(ai, "ai1s")

上記の ai1s と ai.ai1s には 同じ関数オブジェクト が代入されているので、下記のプログラムのように、ゲーム開始時 の局面を表す mb を 実引数 に記述して 呼び出すこと で、どちらも 同じ着手 が選択されます。なお、ai1s は、「左上から順 に 空いているマス を探し、最初に見つかったマス に着手する」という AI なので、(0, 0) が選択されます。

from marubatsu import Marubatsu

mb = Marubatsu()

print(ai1s(mb))
print(ai.ai1s(mb))

実行結果

(0, 0)
(0, 0)

list や dict の場合は [] を使って 要素の値 を参照することができますが、オブジェクト の場合は [] を使って 属性の値 を参照することは できません。getattr は、list や dict における [] と 同じ役割 を果たすものだと 考えると良い でしょう。

getattr の詳細については、下記のリンク先を参照して下さい。

`getattr` を利用した AI の関数の list の計算

先程説明したように、AI の 関数の名前 は、ai と s の間に 1 から 14 まで の 数字が入る という、規則正しい名前 になっているので、getattr を利用することで、AI の 関数の list を作成するプログラムは、下記のように 簡潔に記述 できます。

1 行目：ai_list を 空の list で 初期化 する
2 行目：1 から 14 ま での整数の 繰り返し処理 を行う
3 行目：AI の 関数の名前 を計算する
4 行目：getattr を使って AI の関数 を取得し、ai_list の 要素に追加 する

ai_list = []
for i in range(1, 15):
    ai_name = f"ai{i}s"
    ai_list.append(getattr(ai, ai_name))

少し わかりづらい ので本記事では採用しませんが、上記のプログラムは、リスト内包表記 を使って、下記のように記述することも できます。

ai_list = [ getattr(ai, f"ai{i}s") for i in range(1, 15) ]

AI の一覧を表す Dropdown の作成

AI の一覧 を表す Dropdown は、下記のプログラムのように、上記で作成 した ai_list 使って、Dropdown の 実引数 に options=ai_list を記述することで作成できます。

dropdown10 = widgets.Dropdown(options=ai_list)
display(dropdown10)

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

上図左 は表示される Dropdown で、上図右 は Dropdown の上 で マウス を 押した場合 に表示される ドロップダウンメニュー の図です。メニューに表示 されるのは、下記のプログラムのように、関数を print で表示 した場合に 表示される内容 です。

print(ai.ai1s)

実行結果（at の後ろに表示される内容は、下記と異なる場合があります）

<function ai1s at 0x0000025E8600C860>

上記のプログラムでは、options に Dropdown で 選択できる項目のみ を要素として持つ list を代入しました。先程の options の所で説明したように、そのような場合 は、画面に表示 されるそれぞれの 項目のラベル には、項目を 文字列型 のデータに 変換した値 が 自動的に設定 されます。関数を 文字列 のデータに変換すると、上記のような表示になるので、先程作成 した AI の関数を項目として持つ Dropdown の メニュー には、先程の図 のような内容が表示されます。

AI の名前を表すラベルの設定

先程説明したように、Dropdown では、メニュー に表示する 文字列 を ラベル と呼び、options の要素に下記のような tuple を代入 することで、ラベル に項目とは 別の文字列 を設定することが できます。

(ラベルを表す文字列, 項目の値)

従って、例えば、ai1s、ai2s、ai3s の 3 つ の AI の名前 を ラベル にした Dropdown は、下記のプログラムで作成できます。

dropdown11 = widgets.Dropdown(
    options=[("ai1s", ai.ai1s), ("ai2s", ai.ai2s), ("ai3s", ai.ai3s)]
)
display(dropdown11)

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

上図左 は表示される Dropdown で、上図右 は Dropdown の上 で マウスを押した 場合に表示される メニューの図 です。メニューに表示 されるのは "ai1s" という ラベル ですが、このラベル を 選択した際 に Dropdown が実際に 選択する項目 は、ai.ai1s という関数になります。そのことは、Dropdown で ai1 を 選択した後 で、下記のプログラムで確認することが できます。先ほど説明したように、Dropdown の value 属性 には、選択中 の 項目の値 が代入されています。そのため、ai1s を選択すると、dropdown11.value には、ai.ai1s という AI の関数 が代入され、dropdown11.value(mb) を実行すると、ai1s が 着手を選択 し、先程と同様 に (0, 0) が選択されます。

print(dropdown11.value(mb))

実行結果

(0, 0)

また、下記のプログラムのように、dropdown11.value を表示することでも、ai.ai1s という関数が 代入されている ことを確認できます。

print(dropdown11.value)

実行結果（at の後ろに表示される内容は、下記と異なる場合があります）

<function ai1s at 0x0000025E8600C860>

ラベルに AI の名前を設定した Dropdown の作成

上記で説明した方法を利用することで、ラベル に AI の名前 を設定した AI の一覧 を表す Dropdown を、下記のプログラムで作成することが できます。

ai_list = []
for i in range(1, 15):
    ai_name = f"ai{i}s"  
    ai_list.append((ai_name, getattr(ai, ai_name)))

dropdown12 = widgets.Dropdown(options=ai_list)
display(dropdown12)

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

上図左 は表示される Dropdown で、上図右 は Dropdown の上 で マウス を 押した場合 に表示される ドロップダウンメニュー の図で、意図通り の Dropdown が作成されます。

〇と × の AI を選択する Dropdown の作成

次に、〇と × の それぞれの AI を選択する Dropdown を作成します。また、それぞれ の Dropdown が どちらの手番 を 担当する かを、Dropdown の description 属性を使って区別することにします。下記は、2 つ の Dropdown を作成するプログラムです。

dropdown_circle = widgets.Dropdown(
    options=ai_list,
    description="〇",
)
display(dropdown_circle)

dropdown_cross = widgets.Dropdown(
    options=ai_list,
    description="×",
)
display(dropdown_cross)

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

実行結果 からわかるように、作成された Dropdown は、2 行 に 分けて表示 されます。また、2 つ の Dropdown は 左端の位置 が 微妙に揃わない という問題が生じています。

ipywidgets のウィジェットの配置のレイアウト

display を使って複数の ipywidgets を表示すると、上記のように、作成された ウィジェット が 思い通り に 表示されない という問題が 生じます。この問題 を解決するために、ipywidgets には、作成した ウィジェット の配置の レイアウト を設定するための HBox と VBox という ウィジェット が用意されています。

HBox と VBox の詳細については、下記のリンク先を参照して下さい。

ipywidgets には HBox と VBox 以外 にもウィジェットの配置の レイアウト を設定するための ウィジェット が用意されており、詳細な レイアウトの設定 を行うことが できます。興味がある方は下記のリンク先を参照して下さい。

HBox と VBox の使い方

HBox は ウィジェット を水平（horizontal）方向に 並べて配置 するための ウィジェット で、下記のプログラムのように、ipywidgets の HBox の 実引数 に、横方向 に 並べて配置 する ウィジェット を要素として持つ list を記述 することで作成します。作成した HBox を display で表示 することで、HBox に登録した ウィジェット が 実行結果 のように、横方向 に 並べて表示 されるようになります。

hbox = widgets.HBox([dropdown_circle, dropdown_cross])
display(hbox)

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

VBox は ウィジェット を垂直（vertical）方向に 並べて配置 するための ウィジェット で、下記のプログラムのように、ipywidgets の VBox の 実引数 に、縦方向 に 並べて配置 する ウィジェット を要素として持つ list を記述 することで作成します。作成した VBox を display で表示 することで、VBox に登録した ウィジェット が 実行結果 のように、縦方向 に 並べて表示 されるようになります。

vbox = widgets.VBox([dropdown_circle, dropdown_cross])
display(vbox)

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

今回の記事では行いませんが、HBox や VBox の 実引数 に記述する list の要素 には、任意の ウィジェット を代入することが できます。HBox や VBox も ウィジェットの一種な ので、下記のプログラムのように、HBox 内 で横に 2 つ並べた Dropdown を VBox で 縦に並べて表示 するようなことも できます。

vbox = widgets.VBox([hbox, hbox])
display(vbox)

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

わかりづらいと思いますので、上記の 実行結果 の中の ウィジェット が どのような構成 で配置されているかを下図で示します。

`play` メソッドの修正

AI を選択するための Dropdown の作成と 配置方法 がわかったので、下記のプログラムのように、play メソッドを 実行した際 に、それらの Dropdown を作成 し、HBox で 横に並べて配置 するように修正します。その際に、リセットボタン を 同じ HBox の 中に入れる ことで、Dropdown の 右に配置 するようにしてみました。

なお、play メソッドの 仮引数 の名前に ai が 存在する ので、ai モジュール と名前が かぶっています。そのため、import ai で ai モジュール を インポート すると、play メソッドの ブロックの中 で ai モジュール を利用することが できません。そこで、ai モジュール を インポートする際 に、ai_module という 別の名前 で インポート しました。

4 行目：ai モジュールを ai_module という名前で インポート する
12 ~ 15 行目：Dropdown の options 属性の list を作成する
18 ~ 25 行目：〇と × の AI を選択 する Dropdown を作成する
31 行目：〇と × の Dropdown と リセットボタン を 横に配置 する HBox を作成する
32 行目：display で HBox を表示 する

 1  import matplotlib.pyplot as plt
 2  import ipywidgets as widgets
 3  import math
 4  import ai as ai_module
 5
 6  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
 7      # seed が None でない場合は、seed を乱数の種として設定する
 8      if seed is not None:
 9          random.seed(seed)
10
11      # Dropdown の作成の際に必要となる、AI のリストを作成する    
12      ai_list = []
13      for i in range(1, 15):
14          ai_name = f"ai{i}s"  
15          ai_list.append((ai_name, getattr(ai_module, ai_name)))    
16     
17      # 〇 と × の Dropdown を作成する   
18      dropdown_circle = widgets.Dropdown(
19          options=ai_list,
20          description="〇",
21      )
22      dropdown_cross = widgets.Dropdown(
23          options=ai_list,
24          description="×",
25      )       
26    
27      # リセットボタンを作成する
28      button = widgets.Button(description="リセット")
29    
30      # 〇 と × の dropdown と リセットボタンを横に配置した HBox を作成し、表示する
31      hbox = widgets.HBox([dropdown_circle, dropdown_cross, button])
32      display(hbox)
元と同じなので省略
33
34  Marubatsu.play = play

行番号のないプログラム

from marubatsu import Marubatsu
import matplotlib.pyplot as plt
import ipywidgets as widgets
import math
import ai as ai_module

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)

    # Dropdown の作成の際に必要となる、AI のリストを作成する    
    ai_list = []
    for i in range(1, 15):
        ai_name = f"ai{i}s"  
        ai_list.append((ai_name, getattr(ai_module, ai_name)))    
     
    # 〇 と × の Dropdown を作成する   
    dropdown_circle = widgets.Dropdown(
        options=ai_list,
        description="〇",
    )
    dropdown_cross = widgets.Dropdown(
        options=ai_list,
        description="×",
    )       
    
    # リセットボタンを作成する
    button = widgets.Button(description="リセット")
    
    # 〇 と × の dropdown と リセットボタンを横に配置した HBox を作成し、表示する
    hbox = widgets.HBox([dropdown_circle, dropdown_cross, button])
    display(hbox)
    
    # リセットボタンのイベントハンドラを定義する
    def on_button_clicked(b):
        self.restart()
        self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)           
         
    # イベントハンドラをリセットボタンに結びつける
    button.on_click(on_button_clicked)

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes and self.status == Marubatsu.PLAYING:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)                
                self.draw_board(ax)

                # 次の手番の処理を行うメソッドを呼び出す
                self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)
                   
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    self.restart()
    return self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)
    
Marubatsu.play = play

修正箇所

from marubatsu import Marubatsu
import matplotlib.pyplot as plt
import ipywidgets as widgets
import math
import ai as ai_module

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)

    # Dropdown の作成の際に必要となる、AI のリストを作成する    
+   ai_list = []
+   for i in range(1, 15):
+       ai_name = f"ai{i}s"  
+       ai_list.append((ai_name, getattr(ai_module, ai_name)))    
     
    # 〇 と × の Dropdown を作成する   
+   dropdown_circle = widgets.Dropdown(
+       options=ai_list,
+       description="〇",
+   )
+   dropdown_cross = widgets.Dropdown(
+       options=ai_list,
+       description="×",
+   )       
    
    # リセットボタンを作成する
    button = widgets.Button(description="リセット")
    
    # 〇 と × の dropdown と リセットボタンを横に配置した HBox を作成し、表示する
+   hbox = widgets.HBox([dropdown_circle, dropdown_cross, button])
+   display(hbox)
元と同じなので省略
    
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、実行結果 のように 2 つ の Dropdown と リセットボタン が 横一列に配置 されて表示されるようになります。

%matplotlib widget

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

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

レイアウトとスタイルの調整

実行結果 から、Dropdown の「説明の幅が 長すぎる」、「項目の横幅が 長すぎる」、リセットボタン の「横幅が 長すぎる」の 3 点 が 気になる ので、先程説明した ウィジェット の layout と style 属性を使って Dropdown と ボタン の 表示を調整 します。

6、12、19 行目：Dropdown と ボタン の横幅を 100 ピクセル に設定する
7、13 行目：Dropdown の 左の説明 の横幅を 20 ピクセル に設定する

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
 2      # 〇 と × の Dropdown を作成する   
 3      dropdown_circle = widgets.Dropdown(
 4          options=ai_list,
 5          description="〇",
 6          layout=widgets.Layout(width="100px"),
 7          style={"description_width": "20px"},
 8      )
 9      dropdown_cross = widgets.Dropdown(
10          options=ai_list,
11          description="×",
12          layout=widgets.Layout(width="100px"),
13          style={"description_width": "20px"},
14      )       
15   
16      # リセットボタンを作成する
17      button = widgets.Button(
18          description="リセット",
19          layout=widgets.Layout(width="100px"),
20      )
元と同じなので省略   
21    
22  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)

    # Dropdown の作成の際に必要となる、AI のリストを作成する    
    ai_list = []
    for i in range(1, 15):
        ai_name = f"ai{i}s"  
        ai_list.append((ai_name, getattr(ai_module, ai_name)))    
     
    # 〇 と × の Dropdown を作成する   
    dropdown_circle = widgets.Dropdown(
        options=ai_list,
        description="〇",
        layout=widgets.Layout(width="100px"),
        style={"description_width": "20px"},
    )
    dropdown_cross = widgets.Dropdown(
        options=ai_list,
        description="×",
        layout=widgets.Layout(width="100px"),
        style={"description_width": "20px"},
    )       
    
    # リセットボタンを作成する
    button = widgets.Button(
        description="リセット",
        layout=widgets.Layout(width="100px"),
    )
    
    # 〇 と × の dropdown と リセットボタンを横に配置した HBox を作成し、表示する
    hbox = widgets.HBox([dropdown_circle, dropdown_cross, button])
    display(hbox)
    
    # リセットボタンのイベントハンドラを定義する
    def on_button_clicked(b):
        self.restart()
        self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)           
         
    # イベントハンドラをリセットボタンに結びつける
    button.on_click(on_button_clicked)

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes and self.status == Marubatsu.PLAYING:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)                
                self.draw_board(ax)

                # 次の手番の処理を行うメソッドを呼び出す
                self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)
                   
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    self.restart()
    return self.play_loop(ai=ai, ax=ax, params=params, verbose=verbose, gui=gui)
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
    # 〇 と × の Dropdown を作成する   
    dropdown_circle = widgets.Dropdown(
        options=ai_list,
        description="〇",
+       layout=widgets.Layout(width="100px"),
+       style={"description_width": "20px"},
    )
    dropdown_cross = widgets.Dropdown(
        options=ai_list,
        description="×",
+       layout=widgets.Layout(width="100px"),
+       style={"description_width": "20px"},
    )       
    
    # リセットボタンを作成する
    button = widgets.Button(
        description="リセット",
+       layout=widgets.Layout(width="100px"),
    )
元と同じなので省略   
    
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、実行結果 のような表示が行われます。上記のプログラムは 試行錯誤 の結果、ちょうど良い と 筆者が感じた設定 です。人によってデザインの感覚は異なると思いますので、もっと良い設定 があれば、自由に変更 して下さい。

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

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

今回の記事のまとめ

今回の記事では、ipywidgets の Dropdown の 使い方 を説明し、〇×ゲーム の ゲーム盤の上 に AI を 選択するため の Dropdown を表示しました。

ただし、今回のプログラムでは、Dropdown を 表示しただけ なので、Dropdown で AI を選択 しても AI が変更される ことは ありません。その処理は次回の記事で実装します。

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

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

以下のリンクは、今回の記事で更新した marubatsu.py です。

次回の記事

文字の表示 を 行うだけ で、操作を行わない ような ウィジェット が 存在します ↩