【初心者向け】KivyによるWindowsアプリ作成14 経費申請画面の作成その1

前回までで経費申請アプリのログイン画面作成までが完了しました。

今回と次回の2回で、本アプリのメインとなる画面である、経費申請画面を作成していきたいと思います。

また、コードはGitHubにアップしていますので、必要に応じてご参照ください。

<スポンサーリンク>

経費申請画面レイアウトの作成

まずは、レイアウトを作成しておきましょう。

Kvファイルの<InputScreen:>を以下のように書き換えて下さい。なお、このレイアウトを作成するのに必要となる知識は、これまでの記事で紹介した範囲にすべて含まれていますので、不明な点があれば、過去の記事を読み返してみて下さい。

<InputScreen>:
    BoxLayout:
        orientation: "vertical"
        canvas.before:
            Color:
                rgba: 0.9, 0.9 ,0.9 ,1
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            text: "経費申請"
            size_hint_y: 0.15
            font_size: 32

        BoxLayout:
            orientation: "vertical"
            size_hint_y: 0.85

            PaddingBoxLayout:
                Label:
                    text: "社員番号"
                TextInput:

            PaddingBoxLayout:
                Label:
                    text: "発生日"
                TextInput:

            PaddingBoxLayout:
                Label:
                    text: "費目"
                TextInput:

            PaddingBoxLayout:
                Label:
                    text: "金額"
                TextInput:

            PaddingBoxLayout:
                Label:

                BoxLayout:
                    Button:
                        text: "申請"
                        color: 1, 1, 1, 1
                    Button:
                        text: "クリア"
                        color: 1, 1, 1, 1

なお、InputScreenを追加することにより、ウインドウの背景色の設定とボタン上のテキストカラーについては共通設定する余地が生まれました。上記コードでは個別設定としていますが、気になる方は共通設定化してもよいでしょう。

さて、ここでプログラムを実行して、アプリにログインしてみて下さい。以下のようなウインドウが表示されると思います。

この画面に対して、あとは、申請ボタンとクリアボタンを押したときの処理を追加する必要があります。

処理の内容ですが、申請ボタンを押した時には、入力された内容をテキストファイルに書き込み、クリアボタンを押した時には、入力欄に入力された内容をすべて消去するという処理にしたいと思います。

今回はこのうちクリアボタンを押した時の処理を実装し、申請ボタンを押した時の処理は次回に回したいと思います。

クリアボタン押下時の処理追加

さて、それでは早速実装に移りたいと思いますが、まず、どのように処理を実現すべきか、少し考えてみましょう。

前回、ログイン画面上に入力されたユーザIDとパスワードを取得した際には、各TextInputにid属性により識別子を設定した上で、その識別子を指定することでPythonファイル側で入力内容を取得しました。

今回もこれと同じ発想で、経費申請画面上の各TextInputにid属性を設定し、それを使って表示されている文字列を空文字列に設定するような処理を追加すれば良さそうです。

識別子の設定

それではまず、Kvファイル上で4つのTextInputに対して、識別子を設定してみましょう。ここでは識別子名以下のように設定します。

  • 社員番号 ⇒ text_emp
  • 発生日 ⇒ text_date
  • 費目 ⇒ text_item
  • 金額 ⇒ text_amount

この識別子をTextInputにid属性として指定しますが、以下に社員番号TextInputについてのコードのみ例示します。他のTextInputについても同様に指定して下さい。

PaddingBoxLayout:
    Label:
        text: "社員番号"
    TextInput:
        id: text_emp #この行を追加

ボタン押下時の実行メソッド追加

続いて、Pythonファイル側に、ボタンを押したときに実行したい処理をメソッドとして追加します。

以下のように、InputScreenクラス内にメソッドを追加して下さい。

class InputScreen(Screen):
    def clearButtonClicked(self): #このメソッドを追加
        for key in self.ids:
            self.ids[key].text = ""

単純にTextInput毎にtext属性を空文字列にする行を羅列してもよいのですが、ここでは少しだけ捻った処理にしてみました。

コードの内容を説明します。

2行目は単純にメソッドを宣言しているだけです。これは問題ないと思います。

次の3行目ですが、まず、「for 変数 in 配列:」という書き方で、「配列」と言う、要素が複数入った入れ物から1つ値を取り出し、それを変数に入れて以降の処理を実施し、それが終わったら、配列から別の値を取り出して処理を行う、ということを、配列の要素がなくなるまで繰り返し行わせることができます。このfor文自体はKivy独自の用法ではなく、Pythonの用法です。

もう1つ、Pythonの用法なのですが、Pythonでは配列の実現方法には複数の方法があります。今回はディクショナリという、キーとそれに紐づく値を1セットとし、それを複数持つというデータ型を利用しています。

さらに、ここがKivyの独自用法なのですが、Kivyでは識別子を設定したWidgetをidsというディクショナリに入れて管理します。この場合、キーはid属性で設定した識別子名、値はWidgetが保存されているメモリ上の場所(参照と言います)が入っています

ですので、「ids[識別子]」という記述で、「識別子」が設定されたWidgetにアクセスすることができるのです。

これらを踏まると、「for key in self.ids:」という記述は、「id属性が設定されたWidgetの識別子を1つずつkeyに入れ、そのkeyを使った処理を、idが設定されたWidget全てに対して行う」という意味になります。

そして、繰り返し行う処理が4行目に該当するのですが、ここはTextInputのtext属性、つまり、入力欄に表示される文字列を空文字列にするという処理内容になります。

まとめますが、3行目、4行目により、経費申請画面上でidが設定されたWidget全てのtext属性を空文字列にするという処理が実現できることになります。

ボタンとメソッドの紐づけ

さて、メソッドが定義できたところでKvファイル上のButton Widgetとこのメソッドを紐付け、ボタン押下時にメソッドが呼び出されるようにしましょう。

紐付けは、Kvファイル上でButtonの属性にon_pressを指定すれば良かったのでした。

Button:
    text: "クリア"
    color: 1, 1, 1, 1
    on_press: root.clearButtonClicked() #この行を追加

プログラムの実行

それではここで、プログラムを実行して、正しく処理が実装されたか確認してみましょう。

まず経費アプリにログインして、経費申請画面を表示し、入力欄に適当な文字列を入力します。

この状態でクリアボタンを押してみます。正しくプログラムが作成されていれあ、入力された内容がすべて消去されるはずです。

終わりに

今回は申請経費情報の入力ミスがあったときに、全ての入力内容を消去する処理を実装しました。

なお、入力の際、日本語入力を行おうとして入力できないことに気付いた方もおられるかと思います。

実はKivyでは現状、日本語入力について以下の問題があるようです。

  • 入力中の文字列が表示されず、エンターを押して入力が確定した段階で基本的には入力した文字が表示される
  • ただし、TextInputの属性に「multiline: False」を指定していると、エンターキーの入力情報が入力欄のフォーカスアウトの制御に取られてしまい、文字入力が確定できず、表示もされない

ただ、テキストファイルなどに日本語を打ち込み、それをコピー&ペーストすれば入力はできますので、興味がある方は試してみて下さい。

さて、次回は気を取り直して、保留にしていた申請ボタンを押した際の処理を実装していきたいと思います。

<スポンサーリンク>

シェアする

フォローする