kivyMDチュートリアル其の肆什陸 Behaviors - Magic篇

ハロー、Qiita!いかがお過ごしでしょうか。

もうはや1ヶ月が過ぎようとしていますね。このままだと年末までもういくつ
数えると状態になってしまいそうです。(意味不明)

今週は目立ったニュースなどはありませんでしたが、最近、Twitterで技術
トレンドが多く載るような気がしてなりません。今週とかだとMacに関する
Linux/Unixの話題なんかがありましたし、TypeScriptの話題なんかも
あったような。。

もう技術者がそこら中にいらっしゃるのか、非技術者が技術トレンドを扱う
ようになったのか、、街歩くとこの人もフロント技術者、あの人はバック
エンド技術者とかなっているのでしょうか。そういうスカウターがあれば
またそれもトレンドになるのだろうなー。

はい、余談も過ぎてはいますが、いつものごとくKivyMDのことをやって
いきます。今週はというと、タイトルにもある通りMagic篇となります。
ではさっそく、レッツラゴ。

Magic

冒頭では一言で説明がありますね。ここにも掲載をしておきます。

Magical effects for buttons.

これは依頼するまでもになりますでしょうか。じゃ、お前の解釈はどうなのよ
って言われてる気がしますが、一旦個人の解釈は置いておきます。台パンされて
いる方もいらっしゃると思いますが、KivyMDの解釈は難しいのよ、あと英語が
それほど得意でもないし翻訳ツールや人によって様々であると思っているからです。

なんか、雑音みたいなものが入りましたが、結局はボタン使用時に使われる
ものでしょうか(鼻ホジホジ)。続けて、以下が記載されています。

Magic effects do not work correctly with KivyMD buttons!

おやぁ、なんかにおいがするぞぉﾆﾔﾆﾔ。まぁこれも書かれている通りで
あとでこういうことかと分かるでしょう。

次からは使用方法みたいなものですが、説明としては以下のように記載があり
ます。

To apply magic effects, you must create a new class that
is inherited from the widget to which you apply the effect
and from the MagicBehavior class.

もうinheritedという文字が見えたら、継承というように思い浮かんでおきたい
ところですね。共通テストでKivyMDが科目に入ればまず問われそうです(まず、
科目に入らない)。なにやらMagicBehaviorというものがキーになってきそう
ですね。

そして、具体的な使用方法としては

In KV file:

<MagicButton@MagicBehavior+MDRectangleFlatButton>

In python file:

class MagicButton(MagicBehavior, MDRectangleFlatButton):
    pass

上記のようになります。KV・pythonファイル同時ではなく、片方だけにこう
記載することもポイントですね。

さらにMagicBehaviorのeffectの種類として

• MagicBehavior.wobble
• MagicBehavior.grow
• MagicBehavior.shake
• MagicBehavior.twist
• MagicBehavior.shrink

というように5つあるみたいです。これはコードと結果の方で見ておきたいところ
ですね。

Example

なんか区切りが悪かったので、勝手に区切っています。サンプルコードが掲載され
ていますが、これも見てみましょう。

xlvi/magic.py

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
<MagicButton@MagicBehavior+MDRectangleFlatButton>


MDFloatLayout:

    MagicButton:
        text: "WOBBLE EFFECT"
        on_release: self.wobble()
        pos_hint: {"center_x": .5, "center_y": .3}

    MagicButton:
        text: "GROW EFFECT"
        on_release: self.grow()
        pos_hint: {"center_x": .5, "center_y": .4}

    MagicButton:
        text: "SHAKE EFFECT"
        on_release: self.shake()
        pos_hint: {"center_x": .5, "center_y": .5}

    MagicButton:
        text: "TWIST EFFECT"
        on_release: self.twist()
        pos_hint: {"center_x": .5, "center_y": .6}

    MagicButton:
        text: "SHRINK EFFECT"
        on_release: self.shrink()
        pos_hint: {"center_x": .5, "center_y": .7}
'''


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()

これもまた、シンプルな書き方となっています。おおまかに言うと、MDFloatLayout
の配下にMagicButton(MagicBehavior+MDRectangleFlatButton)が5つ配置され
ているだけです。

MagicBehaviorの使用方法もコードに含まれていますよね。今回は以下の一部抜粋の
ようにKVファイル側に定義する形となります。

KV = '''
<MagicButton@MagicBehavior+MDRectangleFlatButton>


MDFloatLayout:

    MagicButton:
        text: "WOBBLE EFFECT"
        on_release: self.wobble()
        pos_hint: {"center_x": .5, "center_y": .3}

そして、effectの使い方としてはMagicButtonのon_releaseコールバックにて指定
する形となるのですね。これまで幾度となく触ってきた方は、text・pos_hintなんか
は目に余るくらい見てきたのではないでしょうか。もし、それすら分からんとなった方は
以下のリンクもしくは該当マニュアルをご覧いただけたらと思います。

結果

ということで触れ込みとしては以上になります。まずは実行結果を見てみましょう。

(へんなくうはく)

と言いたいところなのですが、久しぶりに動かないことが発覚しましたw
バージョンが対応していないのかと思いましたが、特段そんなことも記載がなく。

と白々しいことを書きやがって、と思われる方もいますが、実はそうで冒頭にその
予兆はあったのですね。warnセクションで書かれていたところがそうでした。

まぁでも動かないのは仕方ないので、今日はここまでということでしょうか。
このまま放置ということはしなく、一旦次バージョンでの課題ということにします。

まとめ

はい、いかがだったでしょうか。

動きはしませんでしたが、それほど難しい使い方はしないということは分かられた
のではないでしょうか。

しかし、少し懸念点もあり、他のイベントと組み合わせたいときはどうするかという
ことですね。例えば他のページに遷移したいとか。どちらもon_releaseで値を指定
すると思いますので、それも次バージョンに上げたときに試してみましょうかね。余裕
があればだけど。

ということで課題は次回に解消するということにしたいと思います。それでは、みなさん
さようなら〜。

それでは、ごきげんよう。

参照

Behaviors » Magic
https://kivymd.readthedocs.io/en/latest/behaviors/magic/