オレオレkivyチュートリアル～その1 インストールと簡単なアプリづくり～

python アプリ開発 kivy

今月末にPyCon JPがあるということでいい機会なので、3年前のPyCon JPで知ったGUIアプリのライブラリであるkivyのチュートリアルシリーズを始めたいと思います。

ちなみにその時のPyConJPの参加記事はこちら↓です。かなり初期に書いたのでひどい文章ですｗ。

supernove.hatenadiary.jp

このときのセッションでkivyの存在を初めて知って以来、大学時代の研究に使うアプリをいくつか作っていたりしました。黒を基調にしたモダンなデザインのアプリができるので、個人的にはかなり好んで使っていました。

今はエンジニアとしてサーバーサイドの開発がメインになりクライアントサイドの開発がご無沙汰なので、改めて使い慣れたPythonでデスクトップのクライアントアプリを作ってみたいと思います。

Kivyとは

まずそもそもKivyってなに？ってところからだと思いますので、そこから簡単に話します。KivyはPythonでGUIアプリを作る際に使用されるライブラリです。マルチぷらっとフォームとなっており、Windows、Mac、Linuxでの開発にサポートしています。

PythonでGUIアプリといえばTkinterが有名ですが、Tkinterとは大きく違うのがスマホアプリを作ることができます。さらにTkinterよりも自由なレイアウトを作成できるのと拡張UIパーツが豊富なので、思い通りのアプリが実装できます。

インストール

インストール方法はOpenGLとSDLを使用するので、OSによって依存パッケージのセットアップ方法が様々なので以下の公式ドキュメントからお使いのOSに合わせてインストールします。

kivy.org

ここではRaspberry Piで動かしてみたいと思うので、Raspberry Piでのインストール方法を紹介します。今回作成するアプリはどのOSでも動くはずなので、他のOSでインストールしてもOKです。

公式ドキュメントでは、Raspbian Stretchまでのインストール方法しか紹介されていませんでしたが、一応Raspbian BusterでもStretchと同じ方法でインストールできました。Busterにデフォルトで導入されているのがPython3.7なので問題ないかと思います。

まずは、以下のコマンドを実行し依存パッケージをインストールします。

sudo apt update
sudo apt install libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-ttf-dev \
   pkg-config libgl1-mesa-dev libgles2-mesa-dev \
   python-setuptools libgstreamer1.0-dev git-core \
   gstreamer1.0-plugins-{bad,base,good,ugly} \
   gstreamer1.0-{omx,alsa} python-dev libmtdev-dev \
   xclip xsel libjpeg-dev

続いて、以下のコマンドを実行してPythonの依存ライブラリをインストールします。

pip3 install --upgrade --user pip setuptools
pip3 install --upgrade --user Cython==0.29.10 pillow

最後に以下のコマンドを実行して、kivyをインストールします。

pip3 install --user kivy

アプリ作成

まずは画面出力

それではkivyを使ってアプリ開発を始めてみます。アプリを動かすためには画面を出力させる必要があります。以下のコードを適当なディレクトリに保存します。

# coding: utg-8
from kivy.app import App

App().run()

実行するとこんな感じで何もない真っ黒な画面が表示されます。

f:id:KMiura:20200816113731p:plain

最小構成であればたった2行でアプリを作れてしまいます。

何か文字を出力する

画面を表示させることができましたが、アプリを作る上ではこの画面に対してUIを足していく必要があります。そこで次に画面上に文字を表示させることをやってみます。ここからがお約束のHello Worldです。

画面を表示するだけなら先程の2行だけで書けると言いましたが、UIを作成するときにはAppクラスを継承してクラス文で記述する必要があります。

# coding: utf-8
from kivy.app import App
from kivy.uix.label import Label

class sampleApp(App):
    def build(self):
        return Label(text='Hello, World!')

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

実行すると以下のように画面の真ん中にHello World!と表示されます。

f:id:KMiura:20200816120712p:plain

ここで先程のなにもない画面と比較すると、ウィンドウのタイトルが「名称未設定」だったのが、このコードを実行すると「sample」と表示されました。

これはクラス名の中のAppより前の文字列をそのままアプリウィンドウのタイトルとして自動で表示させています。

もしもタイトルを別で表示させるときには、sampleAppクラスに__init__()メソッドを追加してself.title = 'title'という感じでタイトルを追加できます。

class sampleApp(App):
    def __init__(self, **kwargs):
        super(sampleApp, self).__init__(**kwargs)
        self.title = 'title'
    def build(self):
        return Label(text='Hello, World!')

今回はここまで！

今回はKivyの最初の導入部分を行い、Hello Worldをやりました。Pythonはサーバーサイドで使うことが多いですが、昔からGUIアプリのライブラリが豊富に存在しています。

Kivyはその中でも自由自在にレイアウトができるので、自分好みのかっこいいアプリを作りやすいです。

次回はKivyを使ってボタンを配置する方法や、ボタンを押したときのアクションの作成方法を紹介します。