【第5週】プログラミング未経験者が独学成果物で「1千イイね」とれるまでリアルタイム実況

■試作品までの道程は遠い

# coding: cp932
from typing import SupportsAbs
# tkinterライブラリをtkと名付けてインポートする
import tkinter as tk
# ■画面作成
# Tkinter のバージョンの確認方法
version = tk.Tcl().eval('info patchlevel')
# Tk()メソッドを使ってwinというルートウィンドウを作る
win = tk.Tk()
# geometryメソッドで"幅×高+表示横+表示縦"
win.geometry("600x400+100+100")
# ウィンドウタイトルを設定
win.title("テストゲーム" )

class test_Branch:
   #各種初期設定
   bg1 = "haikei_1.png"
   bg2 = "haikei_2.png"
   bg3 = "haikei_3.png"
   bg4 = "haikei_4.png"
   bg5 = "haikei_5.png"
   bg6 = "haikei_6.png"
   bg7 = "haikei_7.png"
   sat = "satou.png"
   tan = "tanaka.png"
   suz = "suzuki.png"
   ito = "itou.png"
   te1 = "ch1です"
   te2 = "ch2ですどちらを選びますか"
   te3 = "ch3です"
   te4 = "ch4ですどちらを選びますか"
   te5 = "ch5ですどちらを選びますか"
   te6 = "ch6ですED1"
   te7 = "ch7ですED2"
   te8 = "ch8ですED3"
   te9 = "ch9ですED4"
   cho_Y = "はい"
   cho_N = "いいえ"
   cho_D = "進める"
   
   #各チャートの辞書
   ch1 = {"bg":bg1,"per1":sat,"per2":"","text":te1,"cho1":cho_D,"cho2":cho_D}
   ch2 = {"bg":bg1,"per1":sat,"per2":tan,"text":te2,"cho1":cho_Y,"cho2":cho_N}
   ch3 = {"bg":bg2,"per1":sat,"per2":"","text":te3,"cho1":cho_D,"cho2":cho_D}
   ch4 = {"bg":bg3,"per1":sat,"per2":suz,"text":te4,"cho1":cho_Y,"cho2":cho_N}
   ch5 = {"bg":bg2,"per1":sat,"per2":ito,"text":te5,"cho1":cho_Y,"cho2":cho_N}
   ch6 = {"bg":bg4,"per1":sat,"per2":suz,"text":te6,"cho1":cho_D,"cho2":cho_D}
   ch7 = {"bg":bg5,"per1":sat,"per2":"","text":te7,"cho1":cho_D,"cho2":cho_D}
   ch8 = {"bg":bg6,"per1":sat,"per2":ito,"text":te8,"cho1":cho_D,"cho2":cho_D}
   ch9 = {"bg":bg7,"per1":sat,"per2":"","text":te9,"cho1":cho_D,"cho2":cho_D}

   def Gamenseni(ch):
       # キャンバス作成 RGBと高さ・幅を指定
       canvas = tk.Canvas(win, bg="#fff", height=250, width=575)
       # キャンバス表示 表示箇所の指定
       canvas.place(x=10, y=10)
       # 【背景】イメージ作成
       img = tk.PhotoImage(file=ch["bg"], width=100, height=50)
       # キャンバスにイメージを表示
       canvas.create_image(10, 10, image=img, anchor=tk.NW)
   
       # 【人物１】表示
       # 【人物２】表示
　   
       # ボタン作成（不可視）
       btn_Y = tk.Button(win, text=ch["cho1"])
       btn_N = tk.Button(win, text=ch["cho2"])
       # ボタン表示（可視）
       btn_Y.place(x=100, y=300, width=150, height=50)
       btn_N.place(x=350, y=300, width=150, height=50)
       
   Gamenseni(ch1)

   # 画面表示（常駐）※これが無いと一瞬で消える
   win.mainloop()

メソッド　Gamenseni(ch)　を呼び出して、
変数chを変更することで、各チャートの辞書を反映させようとした。

ボタンの文字は出力できたのだが、背景画像が反映しなかった。

■画像のサイズに注意しろ？

上記の一段階前に　変数ch　を直接　ch1　と置いてテストしていた。

　 # キャンバス作成 RGBと高さ・幅を指定
   canvas = tk.Canvas(win, bg="#fff", height=250, width=575)
   # キャンバス表示 表示箇所の指定
   canvas.place(x=10, y=10)
   # イメージ作成
   img = tk.PhotoImage(file=ch1["bg"], width=575, height=250)
   # キャンバスにイメージを表示
   canvas.create_image(10, 10, image=img, anchor=tk.NW)
   
   # ボタン作成（不可視）
   btn_Y = tk.Button(win, text=ch1["cho1"])
   btn_N = tk.Button(win, text=ch1["cho2"])
   # ボタン表示（可視）
   btn_Y.place(x=100, y=300, width=150, height=50)
   btn_N.place(x=350, y=300, width=150, height=50)

※実行結果画像

背景画像は出ているのだが、なんだかサイズ調整が上手くいっていない。
というか、この表示状態まで持ってくるまでに、下記のエラーに悩まされた。

#1
couldn't open "haikei_1.png": no such file or directory
「haikei_1.png」を開くことができませんでした
   ：そのようなファイルまたはディレクトリはありません

#2
couldn't recognize data in image file "haikei_1.png"
画像ファイル「haikei_1.png」のデータを認識できませんでした

1の方は画像の格納場所の変更時に発生したので原因はすぐ特定できた。
2は調べたもののはっきりとはわからず。
色々試して辿り着いたのは、「画像のサイズが大きすぎて認識できていない」らしい？ということ。

画像や写真のサイズを変更（拡大・縮小）する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP

こちらのサイトで画像サイズを落としたら、「※実行結果画像」の結果になった。

■PIL？pillow？　画像処理ライブラリを探せ

Q：キャンバス部分に背景画像を目いっぱい出すには？
ググるとなんだか出てくるPILとpillowの文字…

●PIL（Python Imaging Library）
2011年を最後に開発が停止した画像処理ライブラリ。

●pillow（PILの後継）
今まさに開発が進められている画像処理ライブラリ。

ただ、これを使うためにはAnaconda（プログラム記述がシンプルで人気が高いPythonの実行環境）が必要らしい？

■新たな学習コンテンツを入手しよう

実行環境の不足箇所を整えるのも大事だが、そもそも知識不足は否めない。
学習習慣を維持するためにも手立てを打たねば…

とそんなときに、

Online Courses - Learn Anything, On Your Schedule | Udemy

udemyのブラックフライデーセール！

これは使えそうな講座を入手するチャンスやんけ。

というわけで、Python関連は当然ですが、他にもいろいろ見漁ってガサガサ入手してやろうと思います。

■前回