【Kivy】PythonでGUIアプリを作ろう

【Kivy】PythonでGUIアプリを作ろう

【Kivy】PythonでGUIアプリを作ろう

Kivyというライブラリを使って、PythonでGUIアプリを作成する方法を紹介します。

ebi
えび

KivyはHTMLとCSSのように、枠組みとデザインを別々に作ることができるので、綺麗にコードを書くことができます。

このCSS代わりになるデザインを定義する言語がKv言語と呼ばれるもので、好き嫌いが別れるそうですが個人的には特に気にならなかったです。

Pythonが書ければ苦にならないかな〜と思います。

本記事では、Kivyのインストール方法と、ラベル、ボタンを備えた簡単なGUIアプリの作り方を紹介します。

まずはPythonとKivyをインストール

Pythonをインストール

Pythonのインストール方法はこちらで解説しております

Kivyをインストール

Pythonをインストールしたら、続いてKivyをインストールします。

Pythonのインストールと同様に、WindwosとMacでインストール方法が異なります。

MacにKivyをインストールする方法はこちら

WindowsにKivyをインストールする方法はこちら

MacにKivyをインストールする方法

では、ここからはMacにKivyをインストールする方法を紹介します。

まずはbrewでKivyに必要なツール群をインストール

brew install pkg-config sdl2 sdl2_image sdl2_ttf sdl2_mixer gstreamer

続いて、Cythonをインストールします。

pip install cython

 

Cythonとは、簡単に言うとPython上でC言語を動かすためのツールです。

実はKivyは部分的にC言語でできており、PythonでKivyを使うためにはCythonが必要というわけです。

最後に、pipでKivy本体をインストールします

pip install kivy

もしエラーが出た場合は、Githubから最新版をインストールする必要があるのでこちら↓

pip install https://github.com/kivy/kivy/archive/master.zip

WindowsにKivyをインストールする方法

では、ここからはMacにKivyをインストールする方法を紹介します。

まずpipと呼ばれる、pythonのパッケージ管理が最新であることを確認します

python3 -m pip install --upgrade pip wheel setuptools 

続いて、Kivyに必要なツール群をインストールします

python3 -m pip install docutils pygments pypiwin32 kivy.deps.sdl2 kivy.deps.glew kivy.deps.angle kivy.deps.gstreamer 

最後にKivy本体をインストールします

python3 -m pip install kivy 

必要な方はKivyのexamplesもインストールすることできます

python3 -m pip install kivy_examples

 

KivyでデスクトップにHello World

まずは例によって挨拶から始めましょう。

下記コードをコピペするとGUIアプリが立ち上がります。

from kivy.app import App
from  kivy.uix.label import Label
class TestApp(App):
    def build(self):
        return Label(text='Hello World')
TestApp().run()

【実行結果】

KivyでデスクトップにHello World

ラベルを持ったクラスを宣言し、プログラム実行時にインスタンスを作成してラベルを表示します。

 

【Kivy】ボタンの作り方

Labelを設置しただけではインターフェースがないのでGUIの意味がないですね

ボタンをつけてGUI感を出してみましょう。

コードがごちゃごちゃしそうなので少しまとめてみます。

今回はせっかくなので、Kvファイルを作ってデザインを外部ファイルに切り分けたいと思います。

【Test.py】

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

class TextWidget(Widget):
    pass

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'

    def build(self):
        return TextWidget()
if __name__ == '__main__':
    TestApp().run()

【Test.kv】

TextWidget: # ルートに追加

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        # ラベル
        Label:
            id: label1
            font_size: 68
            text: root.text    # root(TextWidget)の変数テキストの値を取得
        Button:
            id: button1
            text: "OK"
            font_size: 68
            on_press: root.buttonClicked()  # ボタンをクリックした時にpython側の関数を呼ぶ

 

まず、先ほどはTestAppクラスにラベルを持たせていましたが、ラベル自体をクラス化してみます。

class TextWidget(Widget): 
    pass

passというのは何もしないというコマンドです。

クラスの中にデザインや挙動の処理を書くこともできますが、今回はKvファイルに切り分けます。

次にTestAppに初期設定処理を加えて、ウィンドウタイトルを設定します。

 def __init__(self, **kwargs): 
  super(TestApp, self).__init__(**kwargs) 
  self.title = 'greeting'

super(TestApp, self).__init__(**kwargs)はおまじないです。

self.titlenに代入した文字列がウィンドウタイトルになります。

【実行結果】

画面の上半分がラベル、下半分がボタンという状態になります。

画面の上半分がラベル、下半分がボタンという状態になります。1 画面の上半分がラベル、下半分がボタンという状態になります。2

その他のKivyコンポーネントの作り方

今回はラベルとボタンを使った簡易的なアプリの作り方を紹介しました。

その他のコンポーネントの使い方は公式ドキュメントをご覧ください

【日本語版】https://pyky.github.io/kivy-doc-ja/

ただし日本語版はまだ翻訳途中でして、正直不十分です。

欲しい情報がなければ英語版もご覧ください

【英語版】https://kivy.org/doc/stable/api-index.html

また、本記事の不明な点や、実装の相談等ありましたら気軽にコンタクトください。

Twitter:@ebi_ebidence

プログラミングの独学、大変じゃないですか?

プログラミングを独学しているそこのあなた

  • 思い通りにプログラムが動かなくてイライラする
  • エラーをググってもなかなか解決策が見つからない
  • そもそも何から手をつけて良いかわからない

こんな悩みを抱えていませんか?

そんなあなたにおすすめなのが、メンターを雇えるサービス MENTA です

メンターとのマッチングがめちゃくちゃ簡単

MENTAを利用すれば、自分のやりたいことを丁寧に教えてくれるメンターと簡単に出会うことができます!

自分が覚えたいスキルセットを持ったメンターを探す

もしくは

自分が覚えたいスキルと予算を提示して、メンターからの連絡を待つ

たったこれだけです!

プログラミングスクールより格安の料金設定

料金はメンター次第ですが、月々1000〜5000円程度(中には0円でサポートしてくれるメンターも!!)

ebi
えび

プログラミングスクールの月額は平均3万円とされている中で、5000円程度でメンターを雇えるのはかなり格安です!!

ぜひMENTAを活用してスキルアップを目指しましょう!!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください