【初心者向け】KivyによるWindowsアプリ作成4 Kvファイルを用いた簡単なアプリ作成

前回までの記事で、Kivyを用いたアプリ作成をする準備が整いました。

ですので、今回から少しずつ、1つ題材となるアプリを作成しながらKivyの使い方を紹介していきたいと思います。

題材となるアプリですが、以前別の記事執筆のためで作成した、経費申請するための非常にシンプルなアプリを作っていきたいと思います。アプリはWindowsの実行ファイル形式にしたものをGitHubにアップしています。ダウンロード方法とアプリの機能概要については以下に記載していますので、ご参照下さい。

前回までの記事では、1つテーマを設定して、それを解決するための処理を徐々に自動化していくことで、UiPathの使い方を紹介しました。 ...
<スポンサーリンク>

Kivyアプリ開発で作成するファイル

さて、実際にプログラム作成に取り掛かる前に、Kivyでアプリを開発する際に作成するファイルについて簡単に説明します。

基本的には2種類のファイルを作成することになります。

1つはpythonのプログラムコード本体で、拡張子が「.py」のファイルです。こちらには、アプリを立ち上げたり、アプリ上のボタンを押した際のアクションなど、アプリの動作に関する処理を記述します。

もう1つはKivy独自のファイルで、Kvファイル(拡張子が「.ky」)のファイルです。こちらの役割は、アプリの見た目、例えば入力ボックスやボタンなどの部品群のレイアウトを作成することです。(なお、部品のことをWidgetと言いますので、覚えておいて頂ければと思います)

Kvファイルで設定するレイアウトに関しては、実はpythonファイルに記述することもできるのですが、プログラムが複雑になり、その後のメンテナンス性に欠けてしまいますので、基本的にはこれら2種類のファイルは分けて作成するのがよいでしょう。

Kvファイルを用いたシンプルなアプリ作成

それでは実際にアプリを作成していきましょう。

最初にAtomを立ち上げたいところですが、Kivy関連のパッケージが導入されている仮想環境で作業をしなければ、アプリケーションを動かすことができません。そのため、まずはAnaconda Promptを立ち上げてkivy仮想環境に入って、Prompt上からAtomを起動します。

以下をAnaconda Prompt上で入力して下さい。

> activate kivy
(kivy) >Atomの実行ファイル

Atomの実行ファイルは絶対パスで指定してください。Windows 10上でのデフォルトパスは「C:\Users\(ユーザ名)\AppData\Local\atom\atom.exe」です。

また、起動のたびに絶対パスを入力するのが面倒であれば、ショートカットを適当な場所に作成し、それを指定する方法でも問題ありません。

Atomが起動しましたら、以下2つのファイルを作成して下さい。

main.py

from kivy.app import App

class ExpenseApp(App):
    pass

if __name__ == '__main__':
    ExpenseApp().run()

expense.kv

Label:
    text: "Expense App"

前回登場しなかった箇所について説明します。

まずmain.pyの3行目ですが、前回紹介したAppクラスを親とする新しいExpenseAppクラスを定義しています。これにより、ExpenseAppではAppクラスに定義されたデータ型やメソッドをExpenseAppクラス内では何も定義せずに利用することができ、さらに、プラスアルファで独自のデータ型/メソッドを持つことができます

なお、このようにクラスを作成する際に、他のクラス機能を引き継がせることを、「継承」と呼びます構文は「class 作成するクラス名(親クラス名)」です。継承を行わずにゼロからクラスを作成したい場合には()内をブランクにします。

次に4行目ですが、「pass」は「何もしない」ことを明示するものです。今回の場合、ExpenseAppクラスは上記のプラスアルファに該当するものを何も持たず、Appクラスで定義されているデータ型とメソッドのみ利用できることになります。このpassは次回以降、必要な処理に書き換えます。

続いて6,7行目ですが、これは6行目のif以降の条件に該当する場合に、7行目が実行されるということを表しています。ExpenseAppクラスはAppクラスを継承していることから、7行目は実質的にAppクラスのrunメソッドが実行されますので、前回同様にウインドウが呼び出されることになります。

一方6行目の条件ですが、「(このmain.pyがモジュールとして他のpythonプログラムから呼び出された場合ではなく、)main.pyが直接実行された場合」ということです。今回のプログラムでは実質的な意味はありませんので、ここでは「プログラムがうまく動くためのおまじない」程度に思って頂ければと思います。

次に、expense.kvの説明に移ります。

まず前提として、main.pyにて、Appクラスを継承したXxxAppという名称を持つクラスのrunメソッドを呼ぶ場合、自動的にxxx.kvというファイルが存在するかどうかを確かめ、あればそれを読み込みます。今回の場合はAppクラスを継承したクラス名がExpenseAppですから、expense.kvが読み込まれることになります。大文字と小文字の区別に気を付けて下さい。

そしてKvファイルが読み込まれると、その記述に従って、アプリウインドウ上に配置するWidgetとそれらのレイアウトを決定します。

今回のexpense.kvの中身ですが、まず1行目でLabelという、単純に文字列を表示するためのWidgetをウインドウに入れることを宣言しています。さらにその下に、Labelの属性としてtextを指定していますが、これはLabelに表示する文字列を意味しています。

このように、Kvファイルでは、Widgetや次回以降説明するレイアウトを記述した上で、その属性を具体的に指定することで、ウインドウの見た目を設定します。

今回の例では、ウインドウ中に「Expense App」という文字列を表示することになります。

実行

説明が長くなってしまいましたが、百聞は一見に如かず、作成したプログラムを実行してみましょう。実行には前回の予告通り、Atomのatom-runnerを使って見たいと思います。

Atomでmain.pyタブを選択した状態で、「Altキー + r」を押して下さい。すると、プログラムが実行され、Expense Appとだけ書かれたウインドウが表示されます。

ところで、ウインドウのタイトルに、設定した覚えのない「Expense」という文字が表示されているのにお気付きになりましたでしょうか。

実はKivyを使った場合、Appクラスを継承したクラスの名称における、App以前の文字列がタイトルに表示されます。今回該当するクラスはExpenseAppですから、「Expense」という文字列がタイトルに表示されているわけです。

終わりに

今回の記事では、主にPythonプログラムファイルとKvファイルの関係性や、それぞれの内容について簡単に説明しました。

次回はKvファイルでWidgetだけではなくレイアウトを設定する方法を紹介したいと思います。

<スポンサーリンク>

シェアする

フォローする