bitWalk's: ボタン (Button) 〜 Kivy

Kivy は、NUI (Natural User Interface) を持つモバイルアプリやその他のマルチタッチアプリケーションソフトウェアを開発するためのフリーでオープンソースの Python フレームワークです。MIT ライセンスのもとで配布され、Android, iOS, Linux, macOS そして Windows で動作させることができます。

Wikipedia より引用、翻訳、編集

使ったことのなかった Python の GUI ライブラリ（フレームワーク）、Kivy に興味を持ったので^[1]、ひととおりウィジェットのサンプルを作ってみようとしています。サンプルを作っていくにあたって、どんなスタイルでコーディングするか、テンプレートみたいなものを固めていこうとあれこれ試し始めました。

下記の環境で動作確認をしています。

	Fedora Linux 36	x86_64
	python3	3.10.5-2.fc36.x86_64
	Kivy	2.1.0

トップへ

Button (Python)

ボタンは、ボタンが押されたとき（またはクリックやタッチの後に離されたとき）に起動されるアクションを持つラベルです。最初にラベルのサンプルを取り上げれば良かったのですが、あとに回します。

Kivy の特徴を活かしたコーディングのスタイルというのはもちろんあるでしょうが、ながらく Pyside (PyQt) で GUI アプリを作ってきたので、まずは今までと同じような書き方で簡単なサンプルを作ってみました。

kivy_button.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.button import Button

	Window.size = (200, 200)


	class KivyButton(BoxLayout):
	def __init__(self):
	super().__init__()
	self.orientation = 'vertical'
	self.init_ui()

	def init_ui(self):
	btn_a = Button(text='ボタンＡ')
	btn_a.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_a)
	btn_b = Button(text='ボタンＢ')
	btn_b.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_b)
	btn_c = Button(text='ボタンＣ')
	btn_c.bind(on_press=self.on_button_pressed)
	self.add_widget(btn_c)

	def on_button_pressed(self, instance):
	print('%s がクリックされました。' % instance.text)


	class ExampleApp(App):
	def build(self):
	self.title = 'Buttons'
	return KivyButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_button.py hosted with ❤ by GitHub

kivy_button.py の実行例

kivy_button.py の出力例

  :
  :
[INFO   ] [Window      ] auto add sdl2 input provider
[INFO   ] [Window      ] virtual keyboard not allowed, single mode, not docked
[INFO   ] [Base        ] Start application main loop
[INFO   ] [GL          ] NPOT texture support is available
ボタンＡ がクリックされました。
ボタンＢ がクリックされました。
ボタンＣ がクリックされました。
[INFO   ] [Base        ] Leaving application in progress...

プロセスは終了コード 0 で終了しました

日本語表示について

Kivy を使い始めて、日本語フォントを表示すると文字化けすることに気が付きました。しかし japanize_kivy という、インポートするだけで日本語フォントを表示できるパッケージがあることを知りました^[2][3][4]。

(venv) [bitwalk@fedora-pc Kivy_sample]$ pip install japanize_kivy

そもそもデフォルトのフォントはどういう仕組みで扱われているのでしょうか。OS 側のフォントを利用していないのでしょうか？興味は尽きませんが、おいおい調べていくことにします。

トップへ

Button (Python + Kv)

Kivy フレームワークでは UI 部分を記述するための専用言語 Kv が用意されています。これを使って、UI 部分を分離してみます。

Kv 言語で記述したファイルは、App クラスを継承したクラスの名前（今回の例では ExampleApp）の App の前の部分を全部小文字にして、拡張子を .kv としたファイル名（この例では example.kv）にして同一ディレクトリ内に保存おけば、プログラムの実行時にこれを探して自動的に読み込んでくれるようです。

しかし指定したファイルを読み込むようにしたかったので、ここでは Builder.load_file() を使って、指定したファイルを読み込むようにしています。

kivy_button_1.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.lang import Builder
	from kivy.uix.boxlayout import BoxLayout

	Builder.load_file('kivy_button_1.kv')
	Window.size = (200, 200)


	class KivyButton(BoxLayout):
	def on_button_pressed(self, instance):
	print('%s がクリックされました。' % instance.text)


	class ExampleApp(App):
	def build(self):
	self.title = 'Buttons'
	return KivyButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_button_1.py hosted with ❤ by GitHub

Kv 言語で記述された UI 部分についてですが、自クラス（ウィジェットのインスタンス）には self（あるいは id で指定した名前）、UI の親クラス（この例では KivyButton）には root、（イベントループの面倒を見てくれる）アプリケーションクラス（この例では ExampleApp）には app で名前空間を指定するようです。

なお、ウィジェットの親子関係はインデントで表現されています。

kivy_button_1.kv

	<KivyButton>:
	orientation: 'vertical'
	size: root.size

	Button:
	id: btn_a
	text: "ボタンＡ"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_b
	text: "ボタンＢ"
	on_press: root.on_button_pressed(self)

	Button:
	id: btn_c
	text: "ボタンＣ"
	on_press: root.on_button_pressed(self)