kivyMDチュートリアル其の壱 About&Getting Started篇

さぁ、今週も始まりました。kivyMDのお時間です。今週はGitHubやら下半身やら
IT業界のニュースが盛りだくさんでしたね。下半身はともかく、GitHubの件は人ごと
ではないかなと思いますね。まぁ今の私は流石にそんなことやりませんが、未経験からの
スタートだとか入りたての知識がそれほどないときだとそういったことを考えるかも。
Twitterとかで駆け出しだったら
# 駆け出しエンジニアと繋がりたい
# コピペで1千万欲しい
# 控えめにいって5000兆円欲しい
みたいなことをタグでつけているかもなので・・・
まぁそんなことはどうでもいいですね。本題に入りましょう。

About

最初の投稿ではライセンスとか触れていませんでしたが、マニュアルをよく見ると
こういったことも書かれていました。

MIT License
Copyright (c) 2015 Andrés Rodríguez and other contributors - KivyMD library up to version 0.1.2
Copyright (c) 2020 KivyMD Team and other contributors - KivyMD library version 0.1.3 and higher
Other libraries used in the project:
Copyright (c) 2010-2020 Kivy Team and other contributors
Copyright (c) 2013 Brian Knapp - Androidoast library
Copyright (c) 2014 LogicalDash - stiffscroll library
(略)

出ました、MIT Licenseです！
これにはなんとかコストを抑えたい事業者とか個人開発者はウハウハでよだれがダラダラ
している状況かもしれません。現に自分がアプリ作ると思うと、相当なデメリットがない限り
他のにしようかなと思いませんしね・・・あとはpythonともなると速度が1番気になるところ
ですし、こればっかりは動かしてみないと分からないかな。今後の方向性としては1回どんな
アプリ作るか決めて(それか速度計測するだけのアプリ)動かしてみるってのもいいですね。

Getting Started

少し長くなりそうな気もしたので、Aboutについては以上にしたいと思います。
licenseに関しては1度kivyにも触れるかもなので、一旦打ち切ります。

さて、「Getting Started」の冒頭にはこういったことも書かれています。

In order to start using KivyMD, you must first install the Kivy framework on your computer.
Once you have installed Kivy, you can install KivyMD.

おおっと、これは盲点でした！
どうやらkivyMDを試すには先にkivyを入れる必要があります。自分はすでにkivyを入れて
いたので、特に問題はなかったのですがともかく先にインストールしておいてもらえればと。
インストール方法は各自環境が異なるかもですが、最初の投稿で紹介した本とかにもご丁寧に
書かれていますのでそちらを参照ください。一応ではないですが、本家のインストール方法も
下のリンクに書かれています(順番が逆)。

Getting StartedGetting Started » Installing Kivy
https://kivy.org/doc/stable/gettingstarted/installation.html

あとはkivyのGitHubとかのページも見ると、以下のような要件も記載されていました。

Dependencies:
・Kivy >= 2.0.0 (Installation)
・Python 3.6+
https://kivymd.readthedocs.io/en/latest/getting-started/

ということなのでおとなしくここはkivyのバージョンも2.0.0以上にしておきましょう。
あとはpythonも3.6以上が必要になってくるのですね。そうそう、全然触れてきません
でしたが、自身の環境も情報が全然ありませんでしたね。ここで1回整理して、以下に記載
しておきます。今後はこちらで動作を見ていると思ってもらえればと。

[開発環境]
macOS Mojave 10.14.6

[バージョンなど]
Python 3.7.6
Kivy              2.0.0
kivymd            0.104.1

はい、これで要件が満たしているのが分かられたかと(謎の確認)。
やったんだけど、動かんよ！みたいなことがあればこちらを満たして
くださいとしか言いようがないですね。実際に動かしてみて、動かなければ
都度報告するようにします。

Installation

ここまできてやっとインストールです。
インストール方法はシンプルです。

pip install kivymd

これのみです。非常に簡単ですね。
マニュアルの方では、gitでクローンしてみたいなこともありますが
マゾ体質の方はそちらをやってもらえればと。自分はゆとりエンジニア
なのでpipでサクッとやっちゃいました。

First KivyMD application

非常に長い道のりでしたが、アプリケーションを動かせるところまできました。
まず最初に方法としてはkivyとkivyMDでの方法と2パターン分かれています。

hello, world!

kivyMD

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel


class MainApp(MDApp):
    def build(self):
        return MDLabel(text="Hello, World", halign="center")


MainApp().run()

kivy

from kivy.app import App
from kivy.uix.label import Label


class MainApp(App):
    def build(self):
        return Label(text="Hello, World")


MainApp().run()

まずは登竜門としての「Hello, World!」ですね。何回打ってきたことか
ということと今後これを何回表示させるのだろう・・・と思ってしまいますが
コード修正量としてはそれほど変化はありません。

実際に動かしてみた様子は以下の通りです。

kivymd

kivy

といった感じになりました。ここまではそんな書き方変わってないんじゃないの？
と思われる方はその通りですが、次からは仰天されるかもしれません。

button

kivy

from kivy.app import App
from kivy.metrics import dp
from kivy.uix.behaviors import TouchRippleBehavior
from kivy.uix.button import Button
from kivy.lang import Builder


KV = """
<RectangleFlatButton>:
    ripple_color: 0, 0, 0, .2
    background_color: 0, 0, 0, 0
    color: root.primary_color

    canvas.before:
        Color:
            rgba: root.primary_color
        Line:
            width: 1
            rectangle: (self.x, self.y, self.width, self.height)

Screen:
    canvas:
        Color:
            rgba: 0.9764705882352941, 0.9764705882352941, 0.9764705882352941, 1
        Rectangle:
            pos: self.pos
            size: self.size
"""


class RectangleFlatButton(TouchRippleBehavior, Button):
    primary_color = [
        0.12941176470588237,
        0.5882352941176471,
        0.9529411764705882,
        1
    ]

    def on_touch_down(self, touch):
        collide_point = self.collide_point(touch.x, touch.y)
        if collide_point:
            touch.grab(self)
            self.ripple_show(touch)
            return True
        return False

    def on_touch_up(self, touch):
        if touch.grab_current is self:
            touch.ungrab(self)
            self.ripple_fade()
            return True
        return False


class MainApp(App):
    def build(self):
        screen = Builder.load_string(KV)
        screen.add_widget(
            RectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
                size_hint=(None, None),
                size=(dp(110), dp(35)),
                ripple_color=(0.8, 0.8, 0.8, 0.5),
            )
        )
        return screen


MainApp().run()

kivyMD

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDRectangleFlatButton


class MainApp(MDApp):
    def build(self):
        screen = Screen()
        screen.add_widget(
            MDRectangleFlatButton(
                text="Hello, World",
                pos_hint={"center_x": 0.5, "center_y": 0.5},
            )
        )
        return screen


MainApp().run()

kivy

kivymd

まんまとkivyMDチームに騙されましたが、こんなことになってるのですね。
結果的にはkivyMDはkivyでマテリアルデザインを表現できるように抽象化した
ライブラリということでしたでしょうか(間違っていたら教えてください!)。
いやー、すごいぞkivyMD。マテリアルデザインをkivyで実装するとなると相当な
覚悟を持ってないと出来ませんね。というかやろうとしている方がいたら全力で止めた
方がいいかもしれません。

コードとしては、各要素なりコンポーネントなりでAPI化され、それを実装することで
Buttonなり何なりが表示される仕様となっているようです。動かしてみた様子としては
若干異なっていて、kivyMDの方がよりマテリアルな振る舞いを感じました。具体的には
影が押したあとに表示されるだとか、この辺は上手く実装されているんだなぁと感じました。

まとめ

ということでいかがでしたでしょうか。
ちょっと疲れてきたのでこの辺で終わりにしますが、動かしてみた方がよりわかるかもしれません。
次回からは順番通りThemesに入っていきたいと思います。いやー書いてみて思いましたが、結構大変
ですね。なるべく多くの情報をということで書いてきましたが、今後は少し省エネで進もうかなと
思います。でなければ1日中これにつきっかかりかも。。。

では、ごきげんよう。

参照

Getting Started
https://kivymd.readthedocs.io/en/latest/getting-started/

License
https://kivymd.readthedocs.io/en/latest/about/