先日は、

 

■ 関数 【 Python 3.9 】

 

で関数について書きました。関数は、処理の塊で、一連の処理を実装することにより、関数を呼び出す事で実装した処理を実行できます。

 

 関数は関数から呼び出す事もできますし、外部のPythonのファイルの関数を読み込んで使う事もできます。

 

 先日は、

 

■ JavaScriptとオブジェクト  【 JavaScript 】

の中で、 【 入力した文字を変数に代入して表示する 】 という処理を紹介しました。JavaScriptになると、最初の辺に登場する物なのに、いきなり構文が難しくなるわけですが、この理由は、GUIを使ったアプリケーションと同じ作業になるため、処理そのものは難しくなのですが、オブジェクトとの連携が発生するので構文が難しくなります。

 

 PythonでGUIを使ったアプリケーションの開発を行う場合ですが、標準ライブラリでGUIが用意されているので、それを用いることで、GUIを用いたアプリケーションを作る事ができます。

 

 

 T  kinter                        

 

  Pythonでは、標準ライブラリとして、Tkinterが用意されています。これがフォームで使用する物が用意されているのですが、TKを使用したGUIを用意してアプリケーションを作れます。

 

 Tkはツールキットの略称で、プログラミング言語のTclの拡張として開発されました。

 

 Tkinterについては、以前、

 

■ Pythonでのウィジェットの利用

 

で紹介していますが、ウインドウを決めてその中に実装する物を配置する流れになります。

 

 

■ モジュールのインポート              

 

    inport tkinter

 

   (*)この記述で外部モジュールを読み込みます。

 

■ ウインドウ(フレーム)の作成           

 

    a = tkinter.tk

 

   (*)変数にTkintet.tkを代入します。


 

 

■ イベントのループ                   

 

    a.mainloop()

 

   (*)TK上のイベントを捕捉し、適切な処理を呼び出します。

      (Event Dispatcher)

 

のような記述をすると、ウインドウを用意できます。ループについては、イベントのキューを管理する裏で動いているスレッドのようなもので管理しているのですが、これがイベントディスパッチャーと言います。その為、マウスやキーボードの操作によるイベントがキューに順番に溜まるのですが、これを順番に処理するのがイベントディスパッチャーになります。

 

 この構造を見ると、ウインドウサイズまでが設定で、ループは反復処理になります。その為、この間に使用するパーツを配置していく事になります。

 

 

コードを打ち込んで、

 

 

のように保存すると、このフォルダーにファイルが生成されるので、

 

 

のようになりますが、この状態で、実行すると、

 

 

のようにウインドウの表示ができます。

 

 

■ タイトルを決める                  

 

 フレームの表示が出来たのですが、名称がTkだっと問題がありますから、アプリケーションの名称にする必要があります。その場合、

 

tkinter.tk.title('名称')

 

で追加できますが、前述のように、

 

変数名 = tkinter.tk

 

とすることで、

 

変数名.title('名称')

 

のような表記ができます。前述の

 

a.mainloop()

 

が変数を使った記述の短縮になりますが、タイトルも指定した変数を用います。

 

 

■ ウインドウの名前を指定             

 

    a.title('Sample_Tkinter')

 

   (*)ウインドウに表示される名称を指定します。

 

のようにすると、タイトルを追加できます。

 

 

のようなコードを書いて実行すると、

 

 

のようにウインドウ上部のタイトルの表記が変わります。

 

 

■ ウインドウのサイズを決める           

 

 ウインドウのサイズを決めていない場合、配置したウィジェットのじょうたいによってウインドウサイズが変わりますが、ウインドウサイズを指定する場合、

 

tkinter.tk.gormetory('横の解像度x縦の解像度')

 

と言う記述になりますが、ピクセル単位(pix)で指定します。

 

 その為、前述のコードに追加する場合、変数でtkinter.tkを大ニュしてあるので、

 

a.gormetory('横の解像度x縦の解像度')

 

で指定できます。その為、

 

■ ウインドウのサイズの指定             

 

    a.geometory('720x480')

 

   (*)ウインドウのサイズを指定します。

 

のようなコードで指定できますが、この状態だと、ウインドウの表示をコントロールできないので、最小サイズと最大サイズを指定します。

 

 

■ 最小サイズと最大サイズを決める       

 

 ウインドウサイズが変わらないようにする場合、最小と最大の値が一致していればいいので、その指定を行います。この場合、

 

 

tkinter.tk.minsize(横の解像度,縦の解像度)

tkinter.tk.maxsize(横の解像度,縦の解像度)

 

 

で指定します。これも変数aにtkinte.tkを代入しているので、

 

 

a.minsize(横の解像度,縦の解像度)

a.maxsize(横の解像度,縦の解像度)

 

 

でサイズの指定ができます。これをコードに追加すると、

 

 

のようになり、実行すると、

 

 

のようにプログラムの実行直後から指定したサイズになります。

 

 ウインドウサイズの拡大・縮小がない場合、

 

【 最大値 】 = 【 最小値 】

 

の条件が成立するので、これを変数で指定することができるので、

 

のように記述する事が可能で、定数が変数に代わっただけなので、実行しても同じ結果になります。

 

 

変数にすると、アプリケーションの先頭部分でウインドウサイズを変更できるようになるので、ウインドウサイズの最小と最大を指定する場合だと、変数が4つになるだけなので、

 

 

のようになり、ウィジェットを配置していないので、minsize()で指定したサイズで表示されます。

 

 

 

 画像を扱う                     

 

 ウインドウが出来たので、このウインドウにウィジェットを配置する事になりますが、ウィジェットとファイルが異なるので、ファイルを参照して表示をする場合には、指定したファイルの読み込みを行う必要があります。変数での外部ファイルの参照もそうですが、文字列などもその一つになります。

 

 画像や音声ファイルもそれに該当しますが、表示を行う場合において、この外部ファイルの表示をする術を持っていない場合、表示をすることが出来ません。現在のOSでは、画像ファイルが開けて当たり前になっていますが、これも 【 表示を行う環境が揃っているので可能になっている 】 訳ですが、プログラミング言語で画像を使う場合には、そう言った呼び出しが出来る物を使うことになりますが、古い言語にはそうした機能がありません。その為、外部ライブラリを使うことになります。

 

 今回は、Tkinterを使っていますが、この機能はPython 3から標準実装になった機能なので2.7x系の時代には実装されていません。ちなみに、2.7x系は2015年がサポート終了でしたが、5年延長され、今年の4月までサポートがされていましたが、現在はPython 3以降しかサポートされていません。

 

 その為、現在の標準機能も古い2.7x系では未実装の機能になります。

 

 Tkinterでも画像のサポートが行われているので、Pythonをインストールして、GUIを使ったアプリケーションを作る場合、標準実装されているモジュールの呼び出しを行うだけで画像を扱うことができます。

 

 

■ Tkinterで使用できる画像ファイル        

 

 古いバージョンだと、

 

     PGM

     PPM

     GIF

 

だけだったので、256色まではロスレスになるGIFが使用できていましたが、それ以外は使用できませんでした。ただし、現在のバージョンでは、 【 PNGに対応している 】 ので、汎用性があり、8bitの色震度の物を当たり前に使えるファイル形式が使用できるようになっています。JPEGなどを使おうと思うと、PILを使用する事になりますが、pythonをインストールするとPNGを表示する事ができます。

 

 ただし、Tinterのバージョンが8.6以上と言う条件になりますが、画像を表示する事ができます。

 

 

■ 画像を配置する                   

 

 画像を配置する作業ですが、キャンバスを用意してそこにシェイプや画像を配置する事になります。その為、画像を呼び出す前にキャンバスを作ります。この時に 【 canvas 】 を使いますが、その後に何をするのかの指定を行います。

 

 最初にキャンバスの指定をすることになるので、変数に記述を指定してそれを使って処理を行う事になります。

 

 

 ャンバスの設定をする              

 

 キャンバスの設定ですが、

 

tk.canvas(横の幅、縦の幅、背景色)

 

で指定しますがこれでサイズの指定が出来るので、この指定を行いますが、これを変数化します。その為、

 

b = tk.canvas(横の幅、縦の幅、背景色)

 

のようになります。記述ですが、

 

     横の幅 : width

     縦の幅 : height

     背景色 : bg

 

になります。今回のコードでは、320x240の解像度の背景を指定します。

 

 ここでは、tkを使用するのですが、tkinterを打ち込むの大変なので、略称を用います。この時にfromやasを使う事で、略称でコマンドを実行できるようになります。そこで、元のコードを

 

import tkinter as tk

 

と言う記述に変更し、

 

 

のようなコードの変更します。そうすると、サイズが決まっているのですが、キャンバスの位置が決まっていないので、黒く表示されます。そこで、位置の指定を行います。

 

 

■ キャンバスの位置の設定をする        

 

 キャンバスの位置ですが、.placeで指定します。その為、bで変数を指定していますから、

 

b.place(x座標, y座標)

 

 

で座標の指定ができます。コードを書くと、

 

 

のようになり、実行すると、

 

 

のように画面の角からキャンバスが広がった状態になります。解像度をウインドウサイズに合わせて、

 

 

のようにすると、

 

 

のようにキャンバスで指定した色で埋め尽くす事ができます。

 

 

 像の表示をする                  

 

 キャンバスの設定が出来ると後は画像を指定して呼び出すだけですから、呼び出す準備をします。今回は、

 

     VloidStucio

       https://vroid.pixiv.net/

 

 

を使って画像を用意する事にしました。vLOIDsTUDIOを立ち上げると、プリセットで、

 

 

のようにキャラが揃っているので、

 

 

のように調整をして撮影をします。デフォルトだと解像度が解らないので、今回は

 

 

のようにD1/D2のサイズにしてみました。これをPythonのファイルのあるフォルダーに保存します。

 

 

すると、

 

 

のよに同じ階層に画像も配置されるので、階層の上下の変動がなくそのまま呼び出せるようになります。この画像は、ビュワーで開くと、

 

 

の世に開けるのですが、Tkinter 8.6以降ではPNGは開けるので、この画像も開くことができます。

 

 像を読み込む                   

 

 Tkinterで画像を読み込む場合には

 

tk.PhotoImage(file='画像ファイル')

 

で呼び出す事になりますが、これも後で使用するので、変数に代入しておきます。今回は、コードと同じ階層に画像ファイルがあるので、階層の変更なしにファイル名だけで指定できます。今回は、この記述を変数cに代入するので、

 

c = tk.PhotoImage(file='画像ファイル')

 

という記述になっています。そして、今回の画像の解像度は、720x480なので、

 

のようにキャンバスサイズを変更しておきました。縦横を20づつ広くして、キャンバスを配置しているのですが、ここに、画像ファイルを配置します。

 

 

■ 画像ファイルの配置                

 

 先ほどは、画像ファイルの指定でしたが、この状態では、変数cに対して画像の指定先を代入しただけですから、ブルースクリーンのままになります。そこで、キャンバス内に画像の指定を行います。ウィジェットの指定も同じですが、ウインドウ内に指定をすることで表示を行う事ができます。

 

 画像の表示では、 【 Create_image 】 を使うわけですが、ここで、変数bと変数cを使うことになります。Create_Imageは、

 

Create_Image(X座標, Y座標, 画像, 位置合わせ)

 

の指定を行います。ここでanchorと言う指定がありますが、これは平面で見た場合の地図の東西南北になるので、tk.NWというのはNorthとWestになるので、北西になります。地図は、北が地図の上部で、南が下になるので、北西という事は左上になります。つまり、N/Sが上下で、W/Eが左右なので、このどの方向に指定するのかを決めます。

 

これを変数bと組わせるので、b.Create_Image(...) のような記述になります。また、画像の読み込みを変数cで行っているので、imageの読み込みもcになっています。

 

 最初のX座標とY座標ですが、これは画像を配置する座標なので、ここが始点になります。今回は、縦横で20ピクセルづつ画像よりも広くしているので、配置場所を縦横で10ピクセルずらしています。

 

 

そして、このソースコードを実行すると、

 

 

のようにウインドウ上に画像を表示する事ができます。

 

 今回は、内部処理は全く存在していないので、ウィジェットの表示だけですが、現在は、TkinterでPNGの表示もできるので、インストールした後に実装されている標準ライブラリだけでも画像を扱う事もできます。