[初心者向け]Pythonista3のuiでボタンを扱う方法

こんにちは。

普段プログラミングを趣味として自分なりに楽しんでやっています。
その中で学んだ事などを備忘録として残し、僕の思いも少し付け足してnoteにまとめています。

今回はPythonista3のuiでボタンを扱う方法を書いています。

ボタンとは

まずボタンとは『押すと、ある作用が起こる仕掛けになっているモノ』です。

具体的に言うと『ボタンがONかOFFか』の２つの状態を見てその状態によって他の何かを動作させたり、まとまったプログラムを実行させるための起爆剤になる部品です。

例えば携帯電話で電話をかける場面だったら、
『かけたい相手の電話番号の数字のボタンを押していって、最後に電話マークのボタンを押して発信』

番号のボタンを押せばそのボタンに応じた数字が表示されて、電話マークのボタンを押せばその数字の番号に向けて発信を開始しますよね。

この発信するまでの一連の作業であなたはボタンを押しているだけですが、電話を掛けたいというあなたの思いは実現しています。

これがボタンの凄いところです。
利用者は何も考えなくても、ボタンを押せばやりたい事が実現出来る。これがボタンだということです。

話が長くなりましたがここから説明していきます。

『viewに部品を配置する』の巻

では、ここからPythonista3のuiを使ってボタンを作っていきましょう！

まずはpyファイルとpyuiファイルを作成します。
ファイル名はなんでもいいです。

が、今回はボタンを使うので『button_sample』という名前にしておきましょう。

で、今回は何を作ろうかと思ったんですがボタンなので『押したら他の部品（ラベル）の文字色がランダムで変わる』というプログラムにしようかと思います。

では、いきましょう！まずはpyuiファイルから作成していきます！
［button_sample.pyui］
pyuiファイルを開いたら以下のようにラベルとボタンを配置してください！

①
テキストを表示させるためのラベルという部品を配置しています。
ラベルのプロパティのtextという部分に『ボタンを押したら色が変わるよ』という文字列を入れています。

②
ラベルに表示されている文字列の色を変更するためにボタンを配置しています。
ボタンのプロパティのtitleに『色変更』という文字列を入れています。

そして、actionのところに『change_color』という文字列を入れておいてください！
後でこの名前で関数を定義します。

これでpyuiの方は完成です！
次はプログラムを作成していきましょう。

『プログラムを作成する』の巻

pyファイルにプログラムを書いていきます。
始めは以下のようになっていると思います。

［button_sample.py］

import ui

#①

v = ui.load_view()
v.present('sheet')

#①
ここにボタンを押した時に実行される関数などを書いていきます。

import ui
#①
import random

#②
color = ['black', 'red', 'yellow', 'green', 'blue', 'purple', 'orange', 'pink']

#③
def change_color(sender):
       #④
	label = sender.superview['label1']
       #⑤
	rand_num = random.randint(0, 7)
       #⑥
	label.text_color = color[rand_num]

v = ui.load_view()
v.present('sheet')

#①
ランダムで色を変えたいので、randomモジュールをインポートしています。

#②
ランダムで色を変更するので、使いたい色の名前をリストに文字列として作成して変数colorに格納しています。

#③
先ほどpyuiファイルのボタンのactionに紐付けた『change_color』という名前の関数を定義して引数をsenderとしています。
このsenderを日本語に訳すと『送信者』となります、そして送信者はイベントを発生させた部品自身になります。

今回で言うとsenderはボタンの事です。

#④
sender（ボタン）のsuperview（親ビュー）に配置されている『label1』という名前の要素を取得して変数labelに格納しています。

#⑤
rondomモジュールのrandintに引数0と7（リストの長さ分）を渡してその結果を変数rand_numに格納しています。
第二引数を『len(color) - 1』にすると、後からリストcolorの色が増えた場合もこの第二引数を書き直す必要が無くなるのでそのように記述してもいいかもしれませんね。

#⑥
ラベルのtext_colorプロパティの値を変更しています。（文字色を設定するプロパティ）
color[rand_num]は、colorというリストのrand_num番目の値を指定しています。

これでpyファイルも完成しました！

『実行してみる』の巻

完成したので右上の▷ボタンを押して実行してみてください！
『色変更』ボタンを押すごとにラベルに表示されているテキストの色が変わっていくと思います！

まとめ的なやつ

今回はPythonista3のuiでボタンを扱う方法を説明しました！

今回のサンプルは簡単なボタン押下時の処理でしたが、なんとなく『ボタンってこういう使い方なんだな』という事が分かっていただけたかと思います！

また、ボタンだけでなく他のui部品も今回のボタンのようにactionを設定したりして色々な動きを実装する事が出来るので是非チャレンジしてみてください！

最後まで読んでいただきありがとうございました！
では、またお会いしましょう！