【初心者向け】KivyによるWindowsアプリ作成13 ログイン失敗時のエラーメッセージ表示方法その2

前回の記事で、エラーメッセージを表示するためには以下の3ステップを踏む必要があることを説明の上、①の実装方法ついて紹介しました。

①ユーザID欄とパスワード欄に入力された文字列を取得(済)

②これら文字列を、別に保管しておいたユーザID/パスワードと照合(対象)

③照合の結果一致しない場合は、現在ブランクに設定されているLabelのtext属性をエラーメッセージに変更(照合に成功した場合は、経費申請画面に切り替え)(対象)

今回は残りの②、③について紹介します。

また、ついでにウインドウサイズを指定する方法についても併せて紹介します。

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

<スポンサーリンク>

②ユーザID/パスワードの照合

ユーザIDとパスワードは、データベースに保存するのが一般的ですが、ここでは簡単のため、プログラム内部に記述してしまうことにします。また、今回はユーザIDとパスワードともに「test」という文字列を設定することとします。

まずはPythonファイルのimport文の下あたりに、ユーザIDとパスワード用の変数を用意し、両方に「test」と入れておきましょう。もしもユーザIDとパスワードとして別の文字列を設定したい場合は、この部分を修正下さい。

from kivy.uix.screenmanager import ScreenManager, Screen

USER_ID = "test" #追加
PASSWORD = "test" #追加

さらに、loginButtonClickedメソッドの中に、ユーザが入力したユーザID/パスワードと、今追加した変数の値を比較し、その結果によって処理を分けるロジックを追加します。また、このメソッド内には、前回テストのために追加したprint文がありますが、今は不要ですので、コメントにして、実行させないようにしておきます。

def loginButtonClicked(self):
    userID = self.ids["text_userID"].text
    password = self.ids["text_password"].text
    #print("ユーザIDは" + userID)
    #print("パスワードは" + password)

    if userID == USER_ID and password == PASSWORD: #このブロックを追加
        sm.current = "input"

    else:
        #エラーメッセージ表示する処理を追加
        pass

追加したのは、「if」以降のブロックです。ifはKivy独自の表現ではなく、pythonの文法ですが、

if 条件式:
    処理1
else:
    処理2

という書き方で、条件式が成立する(条件式の評価結果がTrue)場合処理1を、そうでない場合は処理2を実行するという条件分岐を意味しています。

また、今回の場合、条件式には「userID == USER_ID and password == PASSWORD」と書かれていますが、「これはユーザが入力したユーザIDとプログラムに予め登録されているユーザID(test)が一致し、かつ(and)、ユーザが入力したパスワードとプログラムに予め登録されているパスワード(test)が一致する場合」という条件を表しています。

そして、今回、条件式が成立する場合は、画面の切り替えを、そうでない場合はエラーメッセージを表示するという形式にしています。

なお、エラーメッセージの表示についてはとりあえずpassと記述しておき、次の③で表示方法を説明した後に実装します。

③エラーメッセージの表示

さて、エラーメッセージの表示ですが、ログイン画面を設計した時から少し時間が経っていますので、念のためにウインドウのどこに表示したかったか、確認しておきたいと思います。

まず、以下は以前作成した画面設計ですが、ちょうど画面の中央あたりに表示したいと考えていました。

そして、Kvファイル上、この部分には現在ブランクのLabelが設置してあります。もしログイン処理に失敗した場合、このLabelのtext属性をエラーメッセージに書き換えてやれば、目的は達成できそうですね。そして、特定のWidgetのtext属性にアクセスするためには、前回使った識別子を利用してやれば良さそうです。

<LoginScreen>:
#略
            Label:
                text: "" #ここをログイン処理失敗時に書き換えたい

            Label:
                text: ""

            PaddingBoxLayout:
#略

では、早速実装に移ります。

まずはKvファイルの、今回アクセスしたいLabelに識別子を設定しましょう。また、エラーメッセージっぽくなるように、色も赤字にしておきます。

Label:
    id: error_message #識別子を設定
    text: ""
    color: 1, 0, 0, 1 #フォントカラーを赤に設定

続いてPythonファイルの修正です。2か所修正する箇所があります。

まず、先ほど追加したUSER_IDとPASSWORDの後に、エラーメッセージを保存する変数を作成しておきます。

USER_ID = "test"
PASSWORD = "test"
ERROR_MESSAGE = "ログインエラー" #追加

さらに、loginButtonClickedメソッドのelse句の中に、上記Labelのtext属性を書き換える処理を追加しましょう。今、else句の中にはpassと記載されていますが、これは削除してしまって下さい。

class LoginScreen(Screen):
    def loginButtonClicked(self):
        userID = self.ids["text_userID"].text
        password = self.ids["text_password"].text
        #print("ユーザIDは" + userID)
        #print("パスワードは" + password)
        if userID == USER_ID and password == PASSWORD:
            sm.current = "input"
        else:
            self.ids["error_message"].text = ERROR_MESSAGE #この行をpassから変更

これで、修正作業は完了です。

ウインドウサイズの指定

このままプログラムを実行してみても良いのですが、ついでにもう1作業やってみましょう。

現在のアプリはウインドウサイズが可変で、サイズを変えてしまうと、例えば以下の図のようにレイアウトが崩れてしまいます。

そこで、ウインドウサイズを固定してみましょう。

Pythonファイルの冒頭に、以下の4行を追加します。

from kivy.config import Config
Config.set("graphics", "resizable", False)
Config.set("graphics", "width", 640)
Config.set("graphics", "height", 480)

コードの説明ですが、まず1行目で「Config」というモジュールをインポートしています。Kivyではアプリを立ち上げるときに、Configに指定された内容を元にアプリの初期化を行います。今回はその内容として、2行目でウインドウサイズを固定に、そして3行目と4行目で、ウインドウの幅と高さを640×480と指定しています。

なお、公式サイトにも記載がありますが、Configを使う場合は、関連するコードを他モジュールのimport文の前に記載する必要があります

In order to avoid situations where the config settings do not work or are not applied before window creation (like setting an initial window size), Config.set should be used before importing any other Kivy modules. Ideally, this means setting them right at the start of your main.py script.

プログラムの実行

さて、今回紹介したかった内容はすべて紹介しましたので、ここでプログラムを実行してみます。

アプリを起動すると、いつものログイン画面が表示されます。ここで、ウインドウサイズを変更しようとしてみて、できないことをまず確認してみましょう。ウインドウの端にカーソルを当てても、カーソルポインタがサイズ変更用のアイコンに変わらないはずです。

次に、あえて誤ったIDとパスワードを入力してログインボタンを押してみましょう。すると、エラーメッセージがウインドウ中央に表示されます。

最後に、正しいIDとパスワードである「test」を入力し、ログインボタンを押してみます。今度はログインに成功し、次の画面に遷移するはずです。

終わりに

プログラムは意図した通りに動きましたでしょうか。

さて、今回でログイン画面の作成は完了です。次回からは経費申請画面の作りこみを行っていきます。

<スポンサーリンク>

シェアする

フォローする