[初心者向け]Pythonista3のuiでスライダーを扱う方法

こんにちは。

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

今回はPythonista3のuiでスライダーを扱う方法を書いています。

スライダーとは

スライダーとは、ある一定の範囲内で数値などを変化させるための部品です。

例えば電子ピアノの音量を調節するためのスライド式のツマミもスライダーですし、ガスコンロの火力調節もスライダーと考えて良いと思います。

上記のような例えの中でどちらにも欠かせない『ある一定の範囲の中でツマミなどをスライドさせて状態を変化させる』という考え方がスライダーを扱う上で大事かと思っております。

『uiエディタでスライダーを作ってみる』の巻

今回はpyファイルとpyuiファイルを作成します。
ファイル名は何でもいいです！

が、とりあえず『slider_sample』にしましょうか！
slider_sample.pyとslider_sample.pyuiファイルを作成しましょう。

で、今回は何を作ろうかと悩みましたが、スライダーなので出来れば変化を楽しみたいと思ったので、RGBAのカラースライダーを作ってみようと思います！

実装するにはスライダーが4つ必要ですね！

R --- Red（赤）
G --- Green（緑）
B --- Blue（青）
A --- Alpha（透明度）

色と透明度を変化させるこの4つです！

では、はじめにslider_sample.pyuiを作っていきましょう。

[slider_sample.pyui]

ささっとこんな感じで部品をいい感じに配置してみてください！

①
カラー変更した時に色を表示するラベル
nameのところにcolor_label と textのところに空文字
背景色は黒にしておいて下さい！

②〜⑤
各色の数値を変更するためのスライダー

② nameのところにred_slider
③ nameのところにgreen_slider
④ nameのとのろにblue_slider
⑤ nameのところにalpha_slider

⑥〜⑨
各色のスライダーの値を表示するラベル
⑥ nameのところにred_label と textのところに0
⑦ nameのところにgreen_label と textのところに0
⑧ nameのところにblue_label と textのところに0
⑨ nameのところにalpha_label と textのところに100

左端のRGBAのラベルは、操作しないのでtextだけRとGとBとAに変えるだけで大丈夫です！

各ラベルとスライダーのnameとtextを変更したら次にスライダーのactionなどを設定しておきましょう。

valueはスライダーの初期位置で、0〜1の間の数値を設定します。RとGとBのスライダーには0（ゼロ）、Aのスライダーには1を設定しておいてください。

actionは『slider_movement』という名前を入れておいてください！後でこの名前で関数を定義します。全てのスライダーにこの関数名を書いてください！

continuousは『連続』という意味で、スライダーが動いている間は連続的にactionを呼び出すかどうかを設定します。全てのスライダーでONにしておいてくたさい！
ちなみにOFFだと、スライダーが動き終わって指が離れたタイミングでactionが呼ばれます。

これでとりあえずpyuiファイルは完成です！
次はプログラムを作っていきましょう！

『スライダーを利用するプログラムを書いてみる』の巻

無事にpyuiが完成したでしょうか？
ここからはプログラムを作って、順番に解説していきますので理解しながら実際にコードを書いてみてください！

[slider_sample.py]
始めは以下のコードが書かれているかと思います。

import ui

#①

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

#①
ここに先ほどスライダーのactionに設定した名前の関数を書いていきます。
ではいきましょう！

import ui
#①
def slider_movement(sender):
    #②
    red = v['red_slider'].value
    green = v['green_slider'].value
    blue = v['blue_slider'].value
    alpha = v['alpha_slider'].value

#①
『def slider_movement(sender):』
先ほどスライダーのactionに設定した関数を定義しています。
特に『sender』である事に意味はありません、actionを作る関数の第一引数にはイベント発生源の要素が入ります。
名前は任意の名前ですが、senderが分かりやすいかと思います。

ちなみに引数のsenderは直訳すると『送信者』です。
例えば『あなたが誰かに電話をかける』というアクションが発生した時のイベントの元は『あなた（送信者）』です。

classを作る際の『self』とほぼ同じだと思っていて問題ないと思います。

#②
『red = v['red_slider'].value』

v（ビュー）に配置されている『red_slider』という名前（name）のスライダーのvalue（値）を取得して変数redに格納しています。

ほかも同じです。各色と透明度のスライダーの値を取得して変数に格納しています。

次に、そのまま下に関数の続きを書いていきます。

#①
rgba=(red, green, blue, alpha)
#②
v['color_label'].background_color = rgba

#①
『rgba=(red, green, blue, alpha)』

先ほどスライダーの値を取得して格納した変数達をタプルにして変数rgbaに格納しています。

#②
『v['color_label'].background_color = rgba』

v（ビュー）に配置されている『color_label』という名前（name）の部品の背景色を、変数rgbaに格納しているタプルの値で指定しています。

ここで1度プログラムを実行してみましょう！
右上の▷の実行ボタンを押してみてください！

上の画像のような画面になっていると思いますので適当にスライダーを動かしてみてください！

ラベルの背景色が変わりましたね！
これでとりあえず色や透明度を変更する処理は完成ですので、あとは右側の数値部分をスライダーのスライド量に応じて変化する様に仕上げていきましょう！

関数の続きを書いていきます。

#①
v['red_label'].text = str(round(red * 255))
v['green_label'].text = str(round(green * 255))
v['blue_label'].text = str(round(blue * 255))
#②
v['alpha_label'].text = str(round(alpha * 100))

#①

『v['red_label'].text = str(round(red * 255))』

v（ビュー）に配置されている『red_label』という名前（name）の部品のtext属性に文字列型に変換した値を代入しています。↓

red*255で変数redの値に255 を掛け算
（255は、RGBで色を指定する際の範囲）
↓
round()を使って、掛け算した値の小数点以下を除去
↓
str()を使って数値型から文字列型に変換
（textとして利用出来る様にするため）

他のgreenとblueも同じように書いてください。

#②
『v['alpha_label'].text = str(round(alpha * 100))』

v（ビュー）に配置されている『alpha_label』という名前（name）の部品のtext属性に、文字列型に変換した値を代入しています。↓

alpha*100で変数alphaの値に100を掛け算
（透明度の範囲は100%のため）
↓
round()を使って、掛け算した値の小数点以下を除去
↓
str()を使って数値型から文字列型に変換
（textとして利用出来る様にするため）

これで各スライダーをスライドした時に右側のラベルの表示がスライド量に応じて変化する様になりました！

一応これで完成になりますので、右上の▷で実行してみましょう！

スライドしてみてください！

色の変化と共に右側のラベルの表示が変化していくと思います！
これでRGBが『0〜255』の範囲、Aが『0〜100』の範囲でスライダーを操作するプログラムの完成です。

完成版コード

import ui

def slider_movement(sender):
        red = v['red_slider'].value
        green = v['green_slider'].value
        blue = v['blue_slider'].value
        alpha = v['alpha_slider'].value

        rgba=(red, green, blue, alpha)
        v['color_label'].background_color = rgba

        v['red_label'].text = str(round(red * 255))
        v['green_label'].text = str(round(green * 255))
        v['blue_label'].text = str(round(blue * 255))
        v['alpha_label'].text = str(round(alpha * 100))

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

まとめ的なやつ

今回はPythonista3のuiでスライダーを扱う方法を解説しました。

スライダーは『ある一定の範囲で数値などを変化させる部品』でしたね。

今回作ったような色を変化させるスライダーだったり、他には幅や高さなどを変化させたりx座標やy座標を変化させたりといったように、スライダーは様々な部分で使用できると思います。

ただ、こういった部品を使う時は『何故その部品を使うのか？』という事を1度自問自答してみてください！
その部品を選んだ理由が特に無いのなら他に何か良い部品があるかもしれません。

という事で、少し長かったですがスライダーの使い方が分かったかと思います！

是非使い方を理解してあなたのプログラムにお役立てください！

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