Kivyを使ってアプリを作ってみた

Kivyとは

• 簡単にUIをいじって、アプリケーションを実行できる

環境

今回はPython 3.11 を使用しました

https://youtu.be/usbEwmOIhwo

こちらの動画を参照しながら作りました

軽く自己紹介

プログラミングを触り始めて、5日ほどです。
勉強がてらアプリ制作しながら、コードの使い方勉強できるかなと今回Kivyを触ってみた

感想? アウトプット?

なんとなく、ライブラリ参照の仕方は分かったのかなーと。
動画での説明を自分なりに、コメントとして残すようにしてみてる

main.py

from kivy.config import Config

Config.set("graphics", "width", "640")  # 横幅の設定
Config.set("graphics", "height", "480")  # 高さの設定

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

from random import randint

---

フォントの変更とか、ファイルのパス指定とか理解は出来た

main.py

# デフォルトに使用するフォントの変更
resource_add_path("C:\Windows\Fonts")
LabelBase.register(DEFAULT_FONT, "YuGothB.ttc")

resource_add_path("./image")

---

正直ここの、説明が「定型文てきなもの」と動画で話していたけれど
Discord.pyでもdef関数見たから、理解しなければいけない
**kwargsはなんだろう

main.py

# 全体の要素を作成する処理
class ImageWidget(Widget):
    source = StringProperty("./image/000001.jpg")

    def __int__(self, **kwargs):
        super(ImageWidget, self).__init__(**kwargs)
        pass

    def buttonStarted(self):
        self.source = "./image/000001.jpg"

    def buttonRandom(self):
        self.source = f"00000{randint(1, 9)}.jpg"

---

「if文の__name__とは」って感じ

CatAppのCatの部分は、このあとのkvファイル名と合わせなければいけない

main.py

# タイトル表示
# アプリ起動
class CatApp(App):
    def __int__(self, **kwargs):
        super(CatApp, self).__init__(**kwargs)
        self.title = "ねこ画像表示"


if __name__ == "__main__":
    CatApp().run()

---

これがkvファイルになるんだけれど、
htmlファイルはいじったことがあったから、わかり易かった。

ImageWidget:

# ImageWidgetの定義
<ImageWidget>:
    canvas.before:
        Color:
            rgba: 0.6, 0.6, 0.6, 1 # 背景画像の指定
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        orientation: "vertical" # 画像表示とボタン部分の垂直表示
        size: root.size

        Image:
            source: root.source

        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20,10
            Button:
                id: button1
                text: "元の画像に戻る"
                font_size: 30
                on_press: root.buttonStarted()
            Button:
                id: button2
                text: "ランダム表示"
                font_size: 30
                on_press: root.buttonRandom()
		

root

ここだと、Imagewidgetのこと インデントで区切られてるからrootは一番上のやつだと
覚えとけば良きかな

self

rootだとImageWidgetだったけど、selfだとRectangleになる。

<ImageWidget>:
    canvas.before:
        Color:
            rgba: 0.6, 0.6, 0.6, 1 # 背景画像の指定
        Rectangle:
            pos: self.pos
            size: self.size

最後に

仕上がったのはこんな感じ

ランダム表示のボタンを連打すると、うまく反応しなくなるのはどうしてだろう

連打ツールとか簡単に作れそう。

---

はじめてZenn使ったけど、アウトプットとして言語化するのかなり良いかも。
書き方が上手くなることを願ってる。