Python3 マスターへの道：その８
前回は、kv 言語について、学びましたよね？ そして、今回なのですが、まずサンプルコードを参考しながら、Kivy のモジュールである kivy.uix.---- を見ていきたいと思います。様々なウィジェットを使いこなせるようになる、最初の一歩です。
今回のサンプルコード：ログインページ
今回のサンプルコードは、ユーザーネームとパスワードが表示され、入力できるページです。Kivy 公式サイトから、引用しています。ですが、ここでは、kv ファイルを作成しています。全く同じとは言いませんが、機能性は同じです。まずは、python ファイルから。
1 from kivy.app import App 2 from kivy.uix.gridlayout import GridLayout 3 from kivy.uix.label import Label 4 from kivy.uix.textinput import TextInput 5 6 class LoginScreen(GridLayout): 7 pass 8 9 class LoginApp(App): 10 def build(self): 11 return LoginScreen() 12 13 if __name__ == '__main__': 14 LoginApp().run()
そして、login.kv ファイル内には、
<LoginScreen>:
GridLayout:
cols: 2
size: root.size
Label:
text: 'Username'
TextInput:
multiline: False
Label:
text: 'password'
TextInput:
password: True
multiline: False
という事で、今回も、このコードを読み解いていきます。とは、言いつつも、python のファイルはほとんど問題ありませんよね。前回までに、すでに話しましたが、さらっとおさらいすると……
最初に、必要なウィジェットをインポートして。そして、App クラスを継承した LoginApp を作成。また、GridLayout クラス（ウィジェット）を継承した LoginScreen も作成しているだけです。
しかし、問題は kv ファイル。様々なウィジェットが追加されていて、ウィジェット同士の関係性もあり、わかりにくくなってきます。
豊富なウィジェットたち：kivy.uix.---
という事で、コード内のウィジェットの関係性の前にウィジェット自体について、書いていきたいと思います。実は、ウィジェットには、インポートするモジュールの名前に共通点があります。
2 と 3、4 行目をみてもらってもわかりますが、どれも kivy.uix.---- というモジュールになっています。大まかには、ウィジェットは、以下の５つ分類されています（参照）。
- UX ウィジェット
- レイアウト用ウィジェット（Layout）
- Complex UX ウィジェット
- Behaviour ウィジェット
- スクリーンマネージャー（Screen Manager）
今回のコードに使われているのは、UX ウィジェットとレイアウト用ウィジェットです。どれがどれか、わかりますか？
おそらく正解です。Label と TextInput は UX ウィジェット、そして GridLayout はレイアウト用です。ここでわかると思うのですが、レイアウト用のウィジェットには、Layout と付くので、わかりやすいです。
ちなみに、Button （ボタン）や Image （画像）なども UX ウィジェットに分類されます。そして、複雑な UX ウィジェット（Complex UX）には、ポップアップや、ドロップダウンリストなど、動きが加わるものが、分類されています。他の Behaviour ウィジェットは、アプリケーションとして、タップされた際に使用され、最後のスクリーンマネージャーは、複数スクリーンが存在するときに、発揮されます。
しかし、見ていただいてわかるように、基本的には、UX ウィジェットとレイアウト用ウィジェットがあれば、アプリケーションは作れそうですね。
サンプルコード上のウィジェットの使用
Tkinter の際を思い出してもらうと、フレームの中に、ウィジェットを配置（レイアウト）していたのですが、Kivy では、順番が前後します。Kivy では、感覚的に、レイアウトの中に、ウィジェットを入れていくのです。
ここで、再度、kv ファイルを見てみましょう。
<LoginScreen>:
GridLayout:
cols: 2
size: root.size
Label:
text: 'Username'
TextInput:
multiline: False
Label:
text: 'password'
TextInput:
password: True
multiline: False
今回のコードを見てみると、GridLayout が一番上（親のウィジェット）になっていますね。ここにある、cols は、縦列の数を示しています。なので、縦列の数が指定された 2 になると、次の列に進んでいます。そのため、コードの順番は重要になっていますね。
なので、特定の格子にウィジェットを表示させるのには、tkinter のように、簡単には以下なさそうですね（将棋のコマを動かすのが、少し面倒に……）。また、size には、root.size とありますが、これは、「大きさをウィンドウと同じ大きさに」という意味合いがあります。なので、結果的には、ウィンドウいっぱいに広がっていますね。
次に、Label なのですが、説明は入りませんよね。TextInput に関しては、入力受け取りです。multiline とは、複数行に渡っての入力で、password は、入力した文字列をパスワードのように、隠すことができるものとなっています。Tkinter のオプションのように考えてもらうと、わかりやすいかと思います。
今回のサンプルコードは、意外にも、容易に理解ができましたね。ちなみに、このサンプルコードを出力してみると、
のようになりました。最初にしては、まずまずの結果ではないでしょうか？（私が作ったわけではないですけどね……）
今回、紹介した GridLayout 以外にも、Kivy には、レイアウト用ウィジェットが豊富に存在します。例えば、BoxLayout や StackLayout のような、GridLayout と似たようなものから、FloatLayout や RelativeLayout なんかもあります。必要に応じて、使い分ける。難しそうですね。
最後に
今回は、サンプルコードを見ながら、ウィジェットについて、さらっと学んでいきました。しかし、使っていかないと学べないですよね？次回からは、ついに、非公式『どうぶつしょうぎ』の盤面作りに取り掛かって行けたらと思っています。
まだまだ、時間はかかるかもしれないですが、その分、できたときの達成感は、想像もできません。応援及び、一緒に Kivy の学習を頑張りましょう！
次回：お楽しみに〜
