Python3で作るアンケートフォーム【GUI編】
2015/11/04
Python3でGUIアプリを作ります。
そのPython3でのGUIを用いて、前回つくったアンケートフォームを改造してみましょう。
オープンソースのサードパーティーのライブラリーを使います。
sudo cp graphics.py /usr/local/lib/python3.4/dist-packages/ sudo apt-get install python3-tk
または、こちらから入手できます。(開いてコピペする場合はgraphics.py、リンクをダウンロードも可)
入手したファイルを/usr/local/lib/python3.4/dist-packages/に入れます。
Windowsユーザーの私(仕事上)はPython/Libに入れます。Visual Studioのタダ版が拡大して、オープンソース化した部分も多くなり、Microsoftも変わりつつありますね。
または、実行するpyファイルと同じディレクトリーなら問題なく動作します。
ここまでで、よく分からない場合はコメントください。
次に、コードです。
すごく雑です。今回は、main()もありません。
from graphics import *
win = GraphWin('Form Window',400,400)
message =Text(Point(160,20),'Welcome. Please answer following questions.')
message.draw(win)
quesArray = ['Enter your name','Enter your gender']
ques2Array = ['Enter your age','Enter your phone number','Enter your email address']
ansArray = []
submitBtnTxt = Text(Point(320,110),'Submit')
submitBtnTxt.draw(win)
submitBtn = Rectangle(Point(290,100),Point(350,120))
submitBtn.draw(win)
for i in range(len(quesArray)):
    submit = False
    quesMessage = Text(Point(160,50),'Q.'+str(i+1)+': '+quesArray[i])
    quesMessage.draw(win)
    inp = Entry(Point(150,70),20)
    inp.draw(win)
    while submit == False:
        click = win.getMouse()    
        if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
            submit = True
            answer = inp.getText()
            ansArray.append(answer)
            quesMessage.undraw()
            inp.undraw()
if ansArray[1].lower() == 'male':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[0])
elif ansArray[1].lower() == 'female':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[1])
else:
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[2])    
quesMessage.draw(win)
submit = False
inp = Entry(Point(150,70),20)
inp.draw(win)
while submit == False:
    click = win.getMouse()    
    if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
        submit = True
        answer = inp.getText()
        ansArray.append(answer)
        quesMessage.undraw()
        inp.undraw()
message.undraw()
message =Text(Point(160,20),'Thank you.')
message.draw(win)
for i in range(len(ansArray)):
    print(ansArray[i])
if win.getMouse():
    win.close()
    
虱潰しに行きましょう。
from graphics import *
作成したgraphics.pyファイルはモジュールと言い、パイソンのスクリプトが書かれています。
このモジュールから、_で以外のすべて(*は全てをあらわします。)を取得します。
これにより、graphicsライブラリーが使用できます。
win = GraphWin('Form Window',400,400)
ライブラリーの中にあるGraphWin(タイトル,横,高さ)を使います。
GraphWinオブジェクトを変数winにおさめて色々します。
message =Text(Point(160,20),'Welcome. Please answer following questions.') message.draw(win)
では、メッセージを表示しましょう。Text(座標,文字列)関数を使います。座標にはPoint(x,y)という関数を用います。
文字列として、今回は’’で囲ってみました。
Text()関数によってGraphicsオブジェクトのTextオブジェクトが作成されました。
変数messageにいれます。
そしてmessage.draw(win)で表示します。draw()はGraphWinオブジェクトを引数とします。なので、winをいれます。
quesArray = ['Enter your name','Enter your gender'] ques2Array = ['Enter your age','Enter your phone number','Enter your email address'] ansArray = []
質問と、答えの配列を用意しました。
submitBtnTxt = Text(Point(320,110),'Submit') submitBtnTxt.draw(win) submitBtn = Rectangle(Point(290,100),Point(350,120)) submitBtn.draw(win)
送信ボタンを、ウィンドウ上に表示します。
ボタンと言ってもお粗末な物で、指定された範囲内をクリックしたら次へ行くというものです。
まず、Submitとテキストを表示して、その周りに四角を表示してます。
for i in range(len(quesArray)):
    submit = False
    quesMessage = Text(Point(160,50),'Q.'+str(i+1)+': '+quesArray[i])
    quesMessage.draw(win)
    inp = Entry(Point(150,70),20)
    inp.draw(win)
    while submit == False:
        click = win.getMouse()    
        if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
            submit = True
            answer = inp.getText()
            ansArray.append(answer)
            quesMessage.undraw()
            inp.undraw()
for i in range():ループの開始です。
submit = Falseとして、クリックに対応します。
quesMessageで質問文を表示します。
Entry(座標,横幅)はエントリーボックスを表示し、入力を取得することのできるEntryオブジェクトを作成します。
それを、inpに入れて、winに表示します。
while submit == False: submitがFalseの間
click = win.getMouse()はGraphWinオブジェクトのメソッドであるgetMouse()を使います。
getMouse()はユーザーがクリックするまでプログラムを一時停止し、クリックされた座標をPointオブジェクトで返します。
変数clickにはPointオブジェクトを返すwin.getMouse()というものが入ってます。
Pointオブジェクトには,getX()とgetY()というメソッドがあり、座標Xと座標Yを返します。
if 290 <= click.getX() <= 350 and 100 <= click.getY() <=120:
先ほど作成した、四角形(290,100) (350,120)の座標の中になるようにします。
if 290 <= win.getMouse().getX() <= 350 and 100 <=win.getMouse().getY() <=120:
変数click無しでも動きますよ。
こうすることによって、範囲をクリックしたら、と条件付きにします。
submit = Trueにして、ループを終わらせます。
answer = inp.getText()は、EntryオブジェクトのinpのメソッドであるgetText()を使って、入力された文字列を取得し、変数answerにいれます。
そして、それをansArrayの配列にいれます。
quesMessage.undraw()は、表示されていた質問文を消します。
また、どうようにinp.undraw()をして消します。
if ansArray[1].lower() == 'male':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[0])
elif ansArray[1].lower() == 'female':
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[1])
else:
    quesMessage = Text(Point(160,50),'Q.3: '+ques2Array[2])    
quesMessage.draw(win)
ここでは、性別によって質問を変えています。
ansArrayの二番目の答えが、male,femaleか、またはそれ以外かで、quesMessageの中身を変えています。
そして、同じ事の繰り返しです。
message.undraw() message =Text(Point(160,20),'Thank you.') message.draw(win)
ここでは、最初に表示されたメッセージを一回消して、内容を変えて表示します。
for i in range(len(ansArray)):
    print(ansArray[i])
結果を、コンソールに表示します。
if win.getMouse():
    win.close()
ここでは、ユーザーのマウスクリックを待って、クリックされたらウィンドウを閉じるようにしています。
これで以上です。お疲れ様です。長かったですね。
今回は、おもにGUIに関して説明しました。
参考にしたものは、こちら(英語)になります。
次回は、今回のコードを綺麗に書き直してみたいと思います。
