Kivyを触ってみた - 子供の落書き帳 Renaissance

触ってみたきっかけ
Kivyって何
公式ドキュメント
環境
Kivyのインストール（Getting Started » Installing Kivy）
インストールの次に見るべきページは何か?
Create an application
Pong Game Tutorial
- ボールを追加（Add the Ball）

触ってみたきっかけ

GitHubの言語Pythonのトレンドの中にあったのでちょっと触ってみようと思った。

Kivyって何

Pythonの公式ドキュメント内のFAQの中のグラフィックユーザインターフェース FAQには、 Tkinter、Qtなどと並んでKivyの名前がある。これらは、パソコン上でGUIを作るためのライブラリらしい。

公式ドキュメント

https://kivy.org/doc/stable/ ：公式ドキュメント
https://pyky.github.io/kivy-doc-ja/ ：公式ドキュメントを有志が日本語訳したもの（Kivyは2022年1月時点で2.0.0が最新である。日本語版は「2017年5月現在Kivy1.10に対応しております。」と書いてあり、情報が古いことには注意が必要。）

環境

MacBook Pro (16-inch, 2019)
MacOS Catalina (10.15.7)

Kivyのインストール（Getting Started » Installing Kivy）

公式ドキュメントの指示通りにインストールした。

% python3 -m venv kivy_venv
% source kivy_venv/bin/activate

(kivy_venv) % python --version 
Python 3.8.5
(kivy_venv) % python3 --version
Python 3.8.5
(kivy_venv) % python -m pip install kivy[base] kivy_examples 
zsh: no matches found: kivy[base]
(kivy_venv) % python -m pip install 'kivy[base]' kivy_examples
Collecting kivy[base]
……（以下略、インストール完了）

一点詰まったのは、公式ドキュメントどおりにpython -m pip install kivy[base] kivy_examplesと実行してもエラーになってしまったことである。
"zsh no matches found kivy base"で検索して以下を発見。

python - zsh: no matches found: requests[security] - Stack Overflow

zshでは[ ]の記号が特別な意味（正規表現と同様の使い方）を持つため、このままだと実行に失敗する。
特別扱いを避けて期待通りの動作にさせる方法はいくつかあるようだ。今回は、kivy[base]という文字列全体を引用符で囲むという方法を用いた。

インストール結果は以下のようになる。

(kivy_venv) % pip freeze
certifi==2021.10.8
charset-normalizer==2.0.9
docutils==0.18.1
idna==3.3
Kivy==2.0.0
Kivy-examples==2.0.0
Kivy-Garden==0.1.4
Pillow==9.0.0
Pygments==2.11.1
requests==2.26.0
urllib3==1.26.7

python kivy_venv/share/kivy-examples/demo/showcase/main.py
と打つと、デモ用のアプリが立ち上がる。画面を切り替えると、ボタンやチェックボックスやプログレスバーなど、いろいろな機能のデモができる。

インストールの次に見るべきページは何か?

ここの動線がちょっと複雑。公式ドキュメント上で「Installing Kivy」の次は以下のページである。 https://kivy.org/doc/stable/gettingstarted/first_app.html
でこのページにはだいたいこう書いてある：「Pong Game Tutorialがあるからそれをやってね。基本的なことは書いてあるから。チュートリアルに従うと、単純なアプリケーションを作るよ。Pong Game Tutorialはロードマップの中で一番重要な記事だよ」

「ロードマップ」という単語が突然登場したから「何かそういうまとめ画像(例えばこれみたいなやつ) があるの?」と思った。別にそういう「ロードマップ」はないらしい。

というわけでPong Game Tutorialに飛ぶと、以下のように書いてある。

Pong Gameのチュートリアルを始める前に

Kivyがインストールされていることを確認してね
Kivyアプリケーションを実行する方法を確認してね。わからないなら、Create an application を見てね

というわけで次に見るべきはCreate an applicationのようだ。

Create an application

https://kivy.org/doc/stable/guide/basic.html#quickstart
の'Hello World'アプリケーションを書き写して実行した。

Pong Game Tutorial

拡張子kvのコードにシンタックスハイライトが適用されなかったので、VSCodeの以下をインストール。
https://github.com/sspaink/kivy-vscode

最初はコロンを使わずに間違ってイコールで書いてしまい、以下のエラーが出てきた。

 ...
      15:    Label:
      16:        font_size: 70
 >>   17:        center_x = root.width * 3 / 4
      18:        top: root.top - 50
      19:        text: "0"
 ...
 Invalid property name

        center_x = root.width * 3 / 4

次。
ページにはこう書いてある。

Note
COMMON ERROR: The name of the kv file, e.g. pong.kv, must match the name of the app, e.g. PongApp (the part before the App ending).

kvファイルの名前を間違えると動かないよ、という話だ。
間違えるとどうなるんだ……? と思って、pong.kv を invalid_name.kv に名前変更して main.pyを実行した。特にエラーは出なかった。
しかし、その代わりに真っ黒な画面が出現した。
……なるほど、ファイル名がpong.kvだから自動的に関連付けて読み込まれるけど、違う名前だと無関係なファイルだと思われて読み込まれないようだ。

ボールを追加（Add the Ball）

ボールの位置を指定しているのは<PingGame>内部のcenter: self.parent.centerのように見えたので、 pong.kvの7行目の pos: self.posの必要性が無いように感じられた。これをコメントアウトして実行してみた。
すると、ボールが画面の左下に表示された。……え、何でだろう。謎だわ。

Pong Game Tutorial
の指示通りにコードを書いてPong（卓球）ゲームが完成するところまでやった。
本当は各ファイルのそれぞれのコードがどう繋がって、実際のゲームができたのとかしっかり理解するのが良いんだろうけど、久々の技術ブログなのでこれくらいで切り上げておく。
それでは。