実践して身に付けるPython#1

PythonをNotebook環境に頼らず実行環境を整え、コマンドライン環境に親しみながら身につけましょう！
GUIアプリケーションの作成を通して、明瞭な文法に慣れ親しむ講座です。

1. 夏休み 特別企画 実践して⾝に付けるPython #1 エンジニアカフェ　スタッフ　永石　好 エンジニアカフェ主催　中高生向けコーディングイベント
2. Pythonについて オランダ出身・アメリカ在住のプログラマー、 Guido van Rossum (グイド・ヴァンロッサム )が開発したスクリプト言語。 バージョン0.9が公開されたのは1991年、1.0が公開されたのは1994年です。 非常に柔軟に出来ていて、簡潔な記述方法、誰が書いても読みやすいコード (可読性に優れる)であり、 扱いやすい言語として幅広い支持を得ています。 代表的なところとして、 Amazon、Dropbox、Youtube、Netflixなど、重要なところで使われています。
3. 何が簡潔なのか？ プログラミング言語とは「こうしてほしい」「ああしてほしい」ということを命令にして コンピューターに処理をさせるための言語です。 そのため、記述のためのルールが厳しく、ひとつでも間違えばエラーが返ってきます。 このエラーの原因を探るのも一苦労です。 (開発環境にもよる) ところがPythonでは、限定的ですが多少の間違いがあっても見逃して実行してくれます。 つい他の言語のクセが出ても見逃してくれるため、非常に扱いやすいわけです。 また、記述方法がシンプルで独特なため、誰が見ても分かりやすいコードになるように設計されています。 それでは、早速Pythonをインストールしてみましょう！ ※PCがMacであれば標準でインストールされていますが、 　アップデートが必要になる場合がありますのでチェックしてください。 　　チェック方法 　　　ターミナル起動 →　python --version　と入力しエンターキーを押します。 　　　　その下にPython〇.〇.〇と表示されますので、そのバージョンが 3.0.0以上(3系)であることを確認してください。 　　　　もし、バージョンが 2系(2.0.0～)の場合はアップデートを行います。 アドレスバーに入力してアクセスしてください。 http://www.python.org/
4. それでは早速プログラミング…！？ と、突然言われてもよく分からないですよね。 では、Pythonでどんな風にコーディングするかを少しだけ確認しながら、出力結果を見てみます。 まずは、コマンドプロンプトを立ち上げます。 Macの場合はターミナルを起動します。 Pythonは多くの言語同様、開発環境というのは自由に選べます。 中でも一番簡単なのが、テキスト編集ツールです。 どんな編集ツールでも構いませんので、標準装備のメモ帳でも構いません。 また、Python付属のIDLEという開発環境もあります。 しかし、実行結果を見ながら、という点においては、 IDLEかコマンドプロンプトでの記述が一番簡単だと思います。 今回はコマンドプロンプト (ターミナル)を使い記述していきます。 以下の赤文字部分を入力し、エンターを押します。 すると、Pythonを動かすための基本対話モード、インタラクティブシェルが起動します。 PS C:\Users\〇〇〇> python
5. このような画面になれば OKです。インタラクティブシェルが起動しました。 以降、この画面のことをインタラクティブシェルと呼称します。 ひとまず、表示に従って copyrightと入力してみましょう。 すると、著作権情報について表示されます。 (綴りを間違ってみても面白いかもしれません ) それでは次に、文字列を表示してみます。 以下のように記述してください。 >>> print(‘hello world’) それでは次に、インタラクティブシェルの終了方法について。 インタラクティブシェルを終了したい時には、 >>> quit() >>> exit() のどちらかを記述します。また、キー操作による終了方法もありますが、こちらは強制的な終了方法のため、 実行中のプログラムが終了しないなどの問題がある時にのみ行う最終手段です。 キー操作：controlキー＋Z、macの場合はcommand＋D、Linaxの場合はcontrol＋D いずれも、キー操作の後はエンターキーで決定します。 Pythonの世界へようこそ！
6. 先ほどからちょこちょこ出てきている　 ()　がついたもの。 これを「関数」と呼びます。 (厳密には違いますが今はざっくり覚えてください ) pythonでは()が末尾に付いていることで「これは関数ですよ」という宣言のようなものになり、先頭の文章は関数の名前です。 そして、中に入れる文章で内容を決めています。 よって、終了命令である関数 quitやexitには()の中身がないわけですね。 そして、print関数においては、「print」は表示しなさい、という命令文であり、 ()の中に入れた文章を表示します。 ところが、()の中は本来は数式などを入れるものであるため、文字列の表示をしたい際には ’(シングルクォーテーション )で囲ん であげる必要があります。 シングルクォーテーションで囲った文章は「文字列」扱いになります。 例え数列を入れても、それは「文字列」であり、計算などに用いることはできません。 それでは、数列と文字列の違いを見てみましょう。 以下の関数を入力してください。 >>> print( 7 + 8 ) どうでしょうか？ 15　と表示が返ってくれば成功です。 この命令文を解説するとすれば、　「 7と8を足した数を表示しなさい」になります。 よって、返ってきた結果は 15というわけです。 それでは、次はこう記述してください。 >>> print(‘7 + 8’)
7. どうでしょうか？ 返ってきた結果は、「 7 + 8」ではないでしょうか。 これは、数式ではなく、「 ’」シングルクォーテーションを用いて囲み、文字列として出力した結果になります。 スペースまできっちりと反映されていると思います。 少し違いが分かってきたでしょうか。 それでは、少し形を変えてみます。 次はこんな風に記述してみてください。 >>> print(’Maker’s space’) どうでしょうか？ エラーが出たと思います。 そうです、文字列の中にシングルクォーテーションが含まれていますね。 この場合、シングルクォーテーションが 3つあるため、前半は ’Maker’　で区切られてしまい、 後半がspaceの後から始まっているように見えてしまうわけですね。 そしてその後にはもうひとつあるはずのシングルクォーテーションが見当たらないため、 「ひとつ足りてなくない？」とエラーが返ってきているわけです。 表示したい文章の中にシングルクォーテーションを使わなければいいのかもしれませんが、そういうわけにもいか ないですね。 こんな時には、以下のように記述します。 どうでしょうか？今度はエラーなく表示できたのではないでしょうか。 このように、「’」を使う文章を出力したい時は、「 ”」ダブルクォーテーションで囲うとエラーなく記述できます。 また、表示したい文章の中にシングルクォーテーションがなくても、最初からダブルクォーテーションを使用しても普通に出力でき ます。 「’」「”」どちらも使える言語は他にもありますが、 Pythonがとっつきやすい理由にはこれも挙げられます。 >>> print(”Maker’s space”)
8. それでは、出力結果を色々試してみましょう。 さきほど、(7 +8)のように、ちょっとした計算結果を求めましたね。 コンピューターの世界では数学とは切っても切れない関係にあります。 難しい数式を扱うこともありますが、徐々に覚えていきましょう。 ただし、今回のイベントでは難しいことは省きます。 今覚えることは代表的な演算子です。 まずはよく使うものから紹介していきます。 以下の演算子を使って自由に結果を求めてみてください。 >>> print() ()の中に好きな数字を使って計算式を入力し、結果を確認してください。 演算子 意味 読み ＋ 左辺に右辺を足す プラス ー 左辺から右辺を引く マイナス、ハイフン * 左辺を右辺で掛ける アスタリスク / 左辺を右辺で割る スラッシュ // 左辺を右辺で割り、余りは切り捨てる スラッシュ2回 % 左辺を右辺で割り、余りだけを丸めて求める パーセント ** 左辺を右辺乗で求める アスタリスク2回
9. 演算子 順位 説明 (式)、[式]、{キー：値}、{式} 1 式結合またはタプル表示、リスト表示、辞書表示、集合表示 リスト[添字]、リスト[添字：添字]、関数(引 数)、オブジェクト.属性 2 添字指定、スライス操作、関数呼び出し、属性参照 await 3 Await式 ** 4 べき乗 +値、-値、～ 5 掛け算、行列計算、割り算、切り捨て割り算、余り *、@、/、//、% 6 加算、減算 +、- 7 正数、負数、ビット単位の NOT <<、>> 8 シフト演算 優先順位について プログラムでは、複数の演算子を使った長い数式を用いることがあります。 その場合、演算子に優先順位が存在していて、優先順位に沿って計算するようになっています。 まずは以下の一覧表を確認してください。
10. & 9 ビット単位のAND ^ 10 ビット単位のXOR | 11 ビット単位のOR in、notin、is、isnt、<、 <=、>、>=、!=、== 12 帰属テスト、同一性テスト、比較 not 13 ブール演算のNOT and 14 ブール演算のAND or 15 ブール演算のOR if～else 16 条件式 lambda 17 ラムダ式 演算子 順位 説明 今度は演算子を複数使用してなが～い数式を作り、結果を確認してください。 【例】5+2*3=　この場合2*3を優先し、結果に5を加算します。 【例②】7+7+(2+5)　この場合は(2+5)を優先し、その結果に 7+7を加算します。
11. 単なる電卓やん？ 計算結果を求めるだけではただの電卓代わりですね。 しかも電卓の方が使いやすいくらいです。 もう少し、複雑な計算をしてみましょう。 複雑な計算をするには、「変数」を使用すると幅が広がります。 変数とは何か？ 変数は「箱」のようなものを想像してみてください。 その箱には、1種類のものだけ入れることができます。 文字でも数字でも、1種類だけ入れることができます。 そして、数字を入れた時は、その数字で計算ができます。 つまり、プログラム稼働中に、箱に入れた数字は変えられるというわけです。 「変えられる数字」で変数。 ただし、どんな箱でもいいわけではありません。 プログラム中で、「これは数字を入れる箱です」という宣言が必要です。 そして変数はたくさんの種類を扱うことがありますが、入れられる種類は 1個だけなので、 変数が100個ある、なんていうことも普通です。 全部同じ変数だと分かりづらいですよね。 そこで、変数の箱には名前を付けるわけです。 たとえばですが、ユーザー情報として覚えておく必要がある項目の場合、 「名前」「年齢」を取っておくことにしましょう。
12. その場合、「名前」、「年齢」の名前を付けた変数を用意します。 宣言は以下の通りに行います。 >>> name = “福岡太郎” この記述では、「name」という箱に「福岡太郎」という文字列を格納します、という意味です。 これで、nameという変数には「福岡太郎」という名前が入りました。 それでは次は、年齢を格納してみましょう。 >>> age = 30 これで、ageという変数の中に「30」という数字が格納されました。 次に、その数字と文字列を取り出して表示してみましょう。 >>> print(name) 福岡太郎と表示されたでしょうか？ 次は年齢を呼び出してください。呼び出し方は上記を参考に、自分で打ち込んでください。 30と表示されれば成功です。
13. それでは次に、呼び出した変数を繋げて表示してみましょう。 >>> print(name,age) 福岡太郎 30 と表示されれば成功です。 なんだか味気ない表示ですね。 もう少し自然な呼び出し方にしてみましょう。 文字列や数字を繋げる時に、別の文字を入れ込むことができます。 >>> print(name,”さんは、”,age,”歳です”) どう表示されましたか？ 福岡太郎さんは、30歳です と表示されていれば成功です！ このように、呼び出した変数を繋げて表示することができます。 また、変数と変数を繋げて表示したい時、接続詞など別の言葉を入れ込むことができます。 変数や文字と繋ぐ時は ,(カンマ)で区切り、文字列を入力したい時は ””ダブルクォーテーションで囲みます。 >>> print(name,”さんは、”,age,”歳です”)
14. 次は、変数を足して表示してみましょう。 >>> print(name,”さんは、来年”,age+1,”歳になります”) 福岡太郎さんは、来年 31歳になります と表示されれば成功です！ このように、変数はプログラム中で計算が出来ます。 変数は、途中で上書きもできます。 >>> print(age) >>> age = 40 >>> print(age) と入力してみてください。 最初は　30　と表示されていたはずですが、上書きしたあとは　 40　と表示されるはずです。 Pythonの ここがスゴい!! 多くの言語では、変数に入れる中身の種類によって宣言の型を変える必要があります。 int型は-2,147,483,647 から 2,147,483,647までの数字(ちょっと語弊があります) str型は文字列、というように。 ところがPythonでは、変数を宣言して中身を入れると、中身に応じて型を変更してくれま す。 文字列を入れていたnameに、数字で上書きできるのです。 もちろん、その後計算に使う事もできます。 これを動的型付けと言います。Python以外にもあります。
15. さて、ここまで変数や演算子をいくつか使って結果を確認してきました。 しかし、実際にどう役立つのかがいまいち掴みづらいのではないでしょうか？ 今度は、目に見えて結果の分かりやすいものを作ってみます。 GUI(グラフィカル ユーザー インターフェース)を利用して、目に見える形を作ってみます。 まずは、PythonでGUIを使えるようにする「 tkinter(ティー ケー インター)」というモジュールをインポートします。 次のように入力してください。 >>> import tkinter as tk これでtkinterと呼ばれる、ウインドウ周りの事が扱えるようになるモジュールを読み込みます。 ちなみに、tkinter の後ろに付いている 「as tk」とは、「以後、tkinterの事をtkと略しますよ～」という宣言です。 これで、以降のtkinterの呼び出しが少し楽になります。 面倒なことをなるべく面倒じゃなくする エンジニアの習性です。 それはさておき、聞き慣れないワードが飛び出ましたね。 モジュールです。 Pythonはスクリプト言語ですがオブジェクト指向でもあります。 いくつもの関数をまとめて、動きを決めた一連のセットを 「モジュール」と呼び、そのモジュールは誰でも利用できるようになっています。 また、そのモジュールをいくつか関連のあるものがセットになって 配布されているものを「パッケージ」と呼びます。
16. また、いくつものパッケージをまとめて公開している場所を「ライブラリ」と呼びます。 「ライブラリ」という言葉の示す通り、図書館のような場所を 思い浮かべると分かりやすいかと思います。 ライブラリ(図書館)はパッケージ(本)をいくつも格納していて、 誰でもダウンロードして使えるようになっています。 (モジュールはいわばパッケージの中身、つまり本に例えれば文章 ) ちなみに、ライブラリには標準ライブラリと外部ライブラリがあり、 Pythonはこの外部ライブラリが非常に充実しているというわけです。 その中のひとつに「tkinter」があるという理解で大丈夫です。 tkinterは標準ライブラリのため、インストールは不要ですが、 標準装備以外のモジュールを導入する時はライブラリから ダウンロードしたあとはインストールが必要ですので注意。 さて、それでは「tkinter」をインポートしました。 これからGUIアプリを作ってみます。 次のように入力してください。 >>> form = tk.Tk() いきなり新しいウィンドウが出て驚いたでしょうか。 この命令文は以下のような意味になります。 tkと名付けたTk関数で、空っぽのウィンドウを新規作成し、このウィンドウをformと名付けて定義します これで、以降はウィンドウのサイズなどを変更する際は formという定義の名前を指定して命令します。
17. 作る手順の確認 1. トップレベルのウィンドウ（メインウィンドウ）を作る 2. ウィジェットを作成してウィンドウに配置する 3. イベントループを開始する処理を書く 4. 必要に応じてコールバック関数を作る ウィンドウは既に表示しましたので、 1に関してはOKです。 では次に「ウィジェット」の作成です。 ウィジェットとは画面を構成する部品のことを指します。 電卓を作るのであれば、 0から9までの数字キー、＋や＝などの演算子キー、 CとACキーが必要ですね。 そのボタンを作成するというイメージです。 現在の標準的な電卓では m+や%などの機能もありますので、作るボタンの数は比例して多くなります。 今回は、基礎の基礎、という基本的な部分ですので、あまり複雑なことはしません。 とりあえず、ボタンを押したら画像を表示する、くらいでいきましょう。 CLEAR！ その前に
18. さて、ウィンドウが表示されましたね。 手始めに、このウィンドウのサイズを変更してみましょう。 >>> form.geometry(“600x400”) ここで注意することは、「 ×」が「x(エックス小文字)」である事です。 「*」ではエラーが出ますので気を付けてください。 そして、左辺の数字は「幅」、右辺の数字は「高さ」の指定です。 (ピクセル) 自分の好きな大きさにしても大丈夫です。 意味としては、 「formと名付けたウィンドウのサイズを geometry関数で(指定した数値)に変えます」 どうでしょうか？ 大きさが変わったと思います。 今、ウィンドウの名前が「 tk」になっていますね。 これは初期設定の状態なので、名前を変えてみましょう。 >>> form.title(‘画像表示’) シングルクォーテーションの中身は好きに変更してください。 それなりに分かりやすい名前がいいでしょう。 それではエンターを押して適用してみます。 変わりましたか？
19. ボタンを配置してみよう 次にボタンを配置してみましょう。 画面の中央に出してみます。 ボタンを配置するには、まず「ボタンを出現させますよ」という宣言が必要で、宣言したボタンをどこに配置するかを指定する必 要があります。 それでは、まずテストしてみましょう。 以下の通りに入力してください。 >>> btn1 = tk.Button(form,text=“表示”) しかし、何も起きないはずです。 でもエラーは出ていないはずです。 これは、 「表示」と書かれたボタンウィジェットを formウィンドウの中に宣言し、 btn1という名前で定義しますという意味。 「配置して表示しなさい」という命令文がないので、まだ表示しないわけです。
20. 画面構成について tkinterを使って表示したウィンドウは空っぽですね。 この空っぽのウィンドウに、自分の思ったようにレイアウトした構成にするために、画面構成の要素・仕組みをきちんと理解する必 要があります。 実践していくとだんだん身に付くものですので、どんどん実践していきましょう。 まずは、「ウィンドウ」。これは部品 (ウィジェット)を表示するために 必要な大枠です。 そして、「ウィジェット」。これはボタンやラベル (ウィンドウの中に 文字表示などを行う部品 )などのこと。 それから、このウィジェットをまとめるための「フレーム」 (枠)です。 ウィジェットがあちこちバラバラに配置されないよう、予め設定し たフレームにまとめてからそのフレームの中で整列すると、キレ イに幅や位置が揃って整った見た目になります。 画面構成を考えるうえでは、どの要素も無視できない大事な部 分です。 今回のGUIアプリは、画像を表示したり非表示にしたりという簡 単なものですが、「どこか」にあるボタンを押したら「どこか」に画 像が表示される、というような大雑把なものでは、見た目が分か りづらく、使いにくさに繋がります。 なので、画面を二分割して、ボタンは左列に配置して、右列に画 像を表示する、といったような「だいたいのイメージ」が必要にな ります。 ウィンドウ フレーム ウィジェット1 ウィジェット2 ウィジェット3 その前に、画面構成について学ぶ必要があります。
21. 表示する 次へ 前へ 消す 終了 だいたいのイメージ(完成予想図)
22. これを目指して作っていきましょう。 青枠：ウィンドウ フレーム ウィジェット ウィジェット ウィジェット ウィジェット ウィジェット ウィジェット 内訳を見てみると…
23. ボタン(ウィジェット)を配置する前に ウィジェットを配置するにはいくつかの関数があります。 pack、grid、place、このどれかを使うことになりますが、それぞれ使い道が異なります。 全てを説明するには時間が足りませんので、今回は一番単純な pack関数を使用して作ってみます。 pack関数について packについては最も単純な「縦か横に表示する」という、一次元的な関数です。 ()の中に何も入れなければ、デフォルトである横向きに表示されます。 関数にはオプションがあり、それによって位置などを調節できます。 pack関数のsideオプションを使って上下左右に ボタンを配置した図。 (後述) 見た目的には上下左右にボタンが配置できてい るように見えますが… ちょっとズレているような？？ この謎の真相は…
24. padx, pady 外側の横か縦の隙間をピクセル単位で指定します。【例】 .pack(padx=150) パッドエックス、ワイ ipadx, ipady iはインナーの略。つまり内側の縦か横の隙間をピクセル単位で指定します。 アイパッドエックス、ワイ before, after 指定したウィジェットの前か後ろに移動させます【例】 .pack(after=〇〇) ビフォー、アフター in_ ウィジェット作成時に親要素を設定していない場合、 pack関数利用時に親要素の 指定が可能になります。【例】 .pack(in_=frame) イン オプション 意味 読み side ウィジェットを上下左右のどの方向から詰めるかを指定します。 tk.TOP(上から)　tk.BOTTOM(下から) tk.LEFT(左から)　tk.RIGHT(右から)【例】.pack(side=tk.LEFT) サイド anchor ウィジェットをどこに寄せて詰めるかを指定します。 tk.CENTER(中央)　tk.W(左寄せ)　tk.E(右寄せ)　tk.N(上寄せ)　tk.S(下寄せ) tk.NW(左上)　tk.SW(左下)　tk.NE(右上)　tk.SE(右下) 【例】.pack(anchor=tk.NE) アンカー fill ウィジェットが空いているスペースを埋めるかどうかを指定します。 tk.none(元のサイズを保持)　tk.x(横に広がる) tk.y(縦に広がる)　tk.both(縦横に広がる)【例】.pack(fill=tk.x) フィル expand 親ウィジェットがサイズを大きくした時に連動するかどうかを指定します。 0(大きくなる) 1(サイズを保持)【例】.pack(expand=0) エクスパンド その前に…pack関数のオプションは次の通りです。
25. pack関数では「縦」か「横」にしか指定できません。 位置の細かい指定はオプションを使用して指定します。 sideオプションを付けて指定した場合、「指定した場所から詰めて表示」します。 つまり、どういう事かというと … こんな感じで、見えないパネルの上にボタンが設置されているわけです。 そして、設置した順番で、その時その時の重なり具合が違うというわけです。 パネルのひとつひとつを見てみると、どのボタンも必ずそのパネルの「中央」にあるの が分かると思います。 (順番は1→2→3→4で、それぞれsideオプションで上下左右を指定して設置していま す)
26. 今回は簡単に、 「表示」を押すと予め用意した画像ファイルを読み込んで表示し、 「消す」を押すことでその画像を非表示にするという GUIアプリを作成します。 ざっくりと、左側にボタンが並び、残った画面の中に画像を表示する、くらいのイメージでいきましょう。 それでは、まずはボタンを確認しましょう。 さきほど作ったのは「表示する」ボタンでした。 しかし定義しただけで、まだ設置はしていません。 設置の前に、もう一つボタンを用意しておきましょう。 「消す」ボタンです。 >>> btn2 =tk.Button(form,text=”消す”) これで、2個のボタンを定義しました。 それでは設置していきましょう。 >>> btn1.pack(side=tk.LEFT) >>> btn2.pack(side=tk.LEFT) これで、ボタンが二個、左側に並んだと思います。 次は、画像を表示するためのエリアを設定します。 このエリアには、「キャンバス」と定義したウィジェットに画像を表示する額縁のような働きをしてもらいます。 >>> canvas = tk.Canvas(form, bg=”#808080”, width=”530”, height=”400”) これは、canvasと名付けてキャンバスを作成し、 BG(背景)の色と、幅、高さを指定しています。
27. 次に、作成したcanvasをウィンドウの中に設置します。 場所は、ボタンの横がいいと思いますので、 Pack関数で同じく左を設定しましょう。 >>> canvas.pack(side=tk.LEFT) どうでしょうか？ 画像のようになれば成功です！ ところで、配置したボタンは クリックしてみましたか？ 何も起きませんね。 これは、まだ「押した時に行う処理」 をプログラムしていないからです。 これから、そのプログラムを行って いきましょう。
28. またまたその前に… キャンバスをグレーの色で配置しましたね。 キャンバスには、画像を表示するエリアだよ、というのをユーザーに知らせる役目があります。 実は、画像を表示するためには、別の関数を使います。 Pythonでは、デフォルトの場合では読み込める画像の形式に制限があります。 一般的に知られる「jpg」や「jpeg」は対応していません。 対応している形式は「 png」、「gif」、「pgm」、「ppm」、「xbm」です。 それ以外の画像を表示したい場合は、対応しているモジュールを読み込む必要があります。 このように、必要に応じてモジュールを読み込んでいくことで Pythonで出来ることの幅が拡がっていきます。 まるで合体ロボのように、目的に応じてパーツ (モジュール)を増やして巨大化し、強くなっていくわけですね。 とりあえず今回はtkinterのみを使っての画像表示を目指していますので、手っ取り早く png画像を使ってプログラムします。 まず画像を表示するために、必要な画像を用意します。 今回は「いらすとや」さんで配布している pyoko_computer.pngという画像を使用して説明します。 まずはダウンロードしましょう。 ブラウザで「いらすとや」で検索し、「生活のイラスト」「 IT・コンピューターのイラスト」で探して、黒うさぎが PCに向かっているイラストを ダウンロードしてください。 前提として、この画像は 400x400の正方形をしています。 ここに少し秘密がありますが、後ほど説明します。 さて、それでは、この画像を imgと名前を付けた変数に紐づけを行います。 >>> img = tk.PhotoImage(file=”pyoko_computer.png”, height=”400”, width=”400”) 今までの定義の仕方で、だいたいの意味は分かっていると思いますが、 PhotoImage関数ではfileで指定したファイル名の画像を指定 したピクセル単位のサイズで紐づけします、という意味になります。 が
29. エラーが出てませんか？ このエラーの原因は、「ファイルがどこにあるかを見つけられない」事にあります。 指定したのはファイル名だけで、ファイルの住所までは指定していません。 正確には、していないように見えるだけで、元々ファイルがあるであろう場所を探しています。 この、「元々ファイルがある」というのは Pyhonのプロジェクトファイルが入っているフォルダの事です。 アプリやシステムを構築する時、必要なパーツを集めたもので、「カレントディレクトリ」と呼びます。 通常、プログラミングを始める時には開発環境が用意するものなのでユーザーが意識して作るものでもありません。 このあたりは色々調べてみると面白いと思いますよ。 さて、カレントディレクトリにあるファイルを探そうとしましたが無いのでエラーが返ってきましたね。 では、カレントディレクトリとはどこにあったのか？ それを知るために、まずはとあるモジュールをインポートします。 >>> import os インポートが済んだら、次のように入力します。 >>> print(os.getcwd()) 返ってきた結果が、今の Pythonプロジェクトが実行されている作業ディレクトリ (カレントディレクトリ)の絶対パスを 指しています。 場所を確認して、画像ファイルを該当のフォルダに移動させて、もう一度入力してください。 >>> img = tk.PhotoImage(file=”pyoko_computer.png”, height=”400”, width=”400”) 今度はエラーなく定義できたでしょうか？次は、この画像を表示してみます。
30. >>> canvas.create_image(0, 0, image=img, anchor=tk.NW) 今まであまり見ない表示の仕方をしましたね。 少し説明します。 create_image関数では引数があります。 ()内最初の数字で、0, 0,　とありますね。これが引数です。 この関数における引数は「座標指定」です。 第一引数がX座標、第二引数がY座標です。 ウィンドウの座標は左上が起点 0です。従って、-(マイナス)での指定はありません。 ウィンドウサイズに応じて設定しましょう。 キャンバスの左上から隙間 (ピクセル単位)をどのくらい空けるか？を指定するので、左上に詰めて表示したい時に 0,0,と指定し ます。 これで、ひとまず画像の表示はクリアです。 次は、ボタンを押した時の処理について話していきます。 1. トップレベルのウィンドウ（メインウィンドウ）を作る 2. ウィジェットを作成してウィンドウに配置する 3. イベントループを開始する処理を書く 4. 必要に応じてコールバック関数を作る CLEAR！ CLEAR！
31. イベントループとは？ たとえば、ゲームの電源ボタン、スリープ解除ボタンを押してゲームを始めますね。 そうすると、ゲーム機内では、「電源ボタンを押されたら」という処理が開始されます。 そして、繰り返し条件というものが設定されています。 「再び電源ボタンを押して電源を切るまで、またはスリープするまで」という繰り返し (ループ)処理です。 画像を表示するだけの簡単なアプリに見えますが、このウィンドウにも開始処理とループ処理が必要です。 すなわち、「ウィンドウが表示 (生成)されたなら」「ウィンドウを閉じるまで」という条件ですね。 この、「ウィンドウが表示 (生成)されたなら」と「ウィンドウを閉じるまで」の間に、 アプリの「やって欲しい動き」を書いていくわけです。 さて、ここで初歩の初歩ですがおさらいをしておきましょう。 プログラムは一定のルールが存在します。 その中でも、書かれたプログラムは 上から順に処理をしていく というルールは絶対です。 思った動きにならない時、だいたいこの順番を間違えていることがほとんどです。 コンピューターは言われたことは言われた通りに絶対行います。 逆に言えば、言われてない事は絶対にやりません。 たとえば、夕飯のお手伝いで「出来たおかずをテーブルに運んで」と言われた時、 「テーブルを拭かなくていいのかな？」と思う時があるんじゃないでしょうか。 あるいは汚れを見つけるかもしれません。 そんな時、人間なら言われずともテーブルを綺麗にしますね。 ところが、コンピューターは「言われた事しかやらない」ので、特に異変を感じずに汚れたテーブルでも 置いてきます。 やって欲しいことは予め言っておかなくてはいけないわけです。 「テーブルにおかずを運ぶ」「もしテーブルが汚れていたら綺麗にする」という処理で分岐させていくわけです。
32. だいぶ話が逸れてしまいましたが何が言いたいかと言うと、 ・正しい処理の順番を考えてプログラミングしていくことが必須 ・やって欲しいこと、想定できる全てをプログラミングすること を前提にプログラミングは行うものとして考えてください。 それでは、処理の流れを確認してみます。 ウィンドウを生成するには、まず先にもう一つの動き (きっかけ)があったはずです。 ①　 ウィンドウが生成されたら ？ インタラクティブシェルを起動し、 tkinterをインポートして、ウィンドウを作成して …？ 面倒ですよね…全部手動ですよね？ 全てをコンピューター任せにしたいですよね？ 人間が行う動きは、アプリを起動するための動き、「アイコンをダブルクリックする」だけにしたいですよね。 そうです。まずはアイコンを作成し、任意の場所 (デスクトップなど)に配置するのが先ですね。 さてここで、そろそろインタラクティブシェルの限界がやってきます。 インタラクティブシェルの利点は、一行ごとに実行結果を出してくれることですが、 このまま書いたことがアプリケーション化するわけではないのです。 アプリケーション化するにはもう少し書く事が増えてきます。 そこで、ひとまず、今まで書いたものを別のものに移します。 メモ帳を開いて、インタラクティブシェルに書いたものをコピー &ペーストします。 コピペしたら、必要な部分だけを別のメモ帳に移していきます。 新規でもうひとつメモ帳を展開してください。
33. Microsoft Windows [Version 10.0.18362.1256] (c) 2019 Microsoft Corporation. All rights reserved. C:\Users\user>python Python 3.11.4 (tags/v3.11.4:d2340ef, Jun 7 2023, 05:45:37) [MSC v.1934 64 bit (AMD64)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>> copyright Copyright (c) 2001-2023 Python Software Foundation. All Rights Reserved. Copyright (c) 2000 BeOpen.com. All Rights Reserved. Copyright (c) 1995-2001 Corporation for National Research Initiatives. All Rights Reserved. Copyright (c) 1991-1995 Stichting Mathematisch Centrum, Amsterdam. All Rights Reserved. >>> import tkinter as tk >>> form = tk.Tk() >>> form.geometry("600x400") '' >>> form.title("画像表示") '' >>> btn1 = tk.Button(form,text="表示") >>> btn2 = tk.Button(form,text="消す") >>> btn1.pack(side=tk.LEFT) >>> btn2.pack(side=tk.LEFT) >>> canvas = tk.Canvas(form,bg="#808080",width="530",height="400") >>> canvas.pack(side=tk.LEFT) >>> img = tk.PhotoImage(file="pyoko_computer.png",width="400",height="400") >>> canvas.create_image(0,0,image=img,anchor=tk.NW) 1 >>> 色が変わっているところが不要な部分になります。 細かいですが、全て消してください。
34. import tkinter as tk form = tk.Tk() form.geometry("600x400") form.title("画像表示") btn1 = tk.Button(form,text="表示") btn2 = tk.Button(form,text="消す") btn1.pack(side=tk.LEFT) btn2.pack(side=tk.LEFT) canvas = tk.Canvas(form,bg="#808080",width="530",height="400") canvas.pack(side=tk.LEFT) img = tk.PhotoImage(file="pyoko_computer.png",width="400",height="400") canvas.create_image(0,0,image=img,anchor=tk.NW) と、形を整えましたか？ それでは、「名前を付けて保存」します。
35. ファイルを開く時に少し面倒になりますので、画像を入れていたフォルダに入れます。 保存する時は〇〇(任意の名前。ただし半角アルファベットで ).py　とファイル名を変更します。 拡張子が.pyの場合、それはPythonプロジェクトファイルということになります。 また、文字コードをUTF-8にするのを忘れないようにしましょう。
36. さて、次は保存したファイルを実行してみましょう。 保存したフォルダに入っている Pythonのアイコンがついたさきほどのファイルをダブルクリックしましょう。 何か一瞬表示がされましたがすぐ消えて何も反応がないですね。 今回のファイルは実行する時の処理を書いていませんので、開く時はコマンドプロンプトかターミナルでしか開けません。 コマンドプロンプト(ターミナル)を起動して、次のように入力してください。 Microsoft Windows [Version 10.0.18362.1256] (c) 2019 Microsoft Corporation. All rights reserved. C:\Users\user>python PhotoImage.py 赤文字のところだけです。 入力したらエンターを押して実行してみてください。 あれ？さっきと同じじゃん …？ 一瞬だけ何か出たけどまた消えた …？ さきほどと同じ実行結果のような気がしますが、実は違います。 今まで書いてきたコードは、 実は繰り返し処理を書いていませんでした。 1回だけ実行したのですぐ終了したわけです。 コンピューターの実行速度は人間の目に留まるようなスピードではないわけです。 ということで、ループするよう処理を書き足します。 さきほど保存したファイルは Pythonファイルとなってますので、ダブルクリックしてもメモとしては開けません。 そこで、ファイルを右クリックして、「プログラムから開く」を選択し、メモ帳アプリを指定してください。 すると、閉じる前と同様の画面が出ると思います。
37. それでは、次のように一文を最後に付け足してください。 >>> form.mainloop() 書き足したら、「上書き保存」します。 ショートカットキーは windowsの場合「CTRL+s」、macの場合「command+s」です。 それでは、もう一度コマンドプロンプトで Microsoft Windows [Version 10.0.18362.1256] (c) 2019 Microsoft Corporation. All rights reserved. C:\Users\user>python PhotoImage.py 赤文字のところを入力したらエンターを押して実行してみてください。 閉じる前と同じ画面が出たら成功です！
38. 起動が確認できましたので、引き続きメモ帳にプログラムを書いていきましょう。 ここで気を付けたいのは、 form.mainloop()の前に書き足していくことです。 ループ処理の命令は一番最後に付けることで、書かれたまでの事を繰り返してくれます。 ループ処理の後に書かれていても最初まで戻ってしまうため、永遠にターンが来ません。 何度か改行して、書きやすくするといいと思います。 1. トップレベルのウィンドウ（メインウィンドウ）を作る 2. ウィジェットを作成してウィンドウに配置する 3. イベントループを開始する処理を書く 4. 必要に応じてコールバック関数を作る CLEAR！ CLEAR！ CLEAR？ さて、次はボタンを押した時の処理の書き方です。
39. 表示している画像を消してみましょう。 しかし、そのためには準備が必要です。 インタラクティブシェルで状況を確認しながらのプログラミングはこれ以上は厳しいので、メモ蝶に続きを描き、 実行する時はコマンドプロンプトでファイル名を指定して実行し、結果を確認しましょう。 まずは、ボタンを押した時に「イベントが開始されますよ」という命令文。 これはボタンの定義の際に、オプションで関連付けます。 既に書いていた一文に、赤文字の部分を足してみてください。 さて、関連付けたbtn2_clickですが、このまま下に書いていくわけではありません。 ボタン処理の中身は「定義」といい、いわゆるオリジナルで動きをセットしたものです。 どこに書くか、ですが、オリジナルの定義のセットは基本的にインポートの後です。 つまり、最初に書いた import tkinter as tk の後ろです。改行して次のように入力してください。 btn2 = tk.Button(form,text=”消す”,command=btn2_click) commandオプションは、ボタンを押した時の処理を命令するためのトリガー (きっかけ)です。 関連付けた名前が合図となって、合図があればその中身を実行する、というものです。 関連付けた名前は、もちろん任意のもので構いませんが、分かりやすくするために、「 btn2_click」と付けました。
40. def btn2_click(): canvas.delete(“img”) defというのは定義します、の宣言です。後ろに続くのが合図の名前です。 そして、横に()と:(コロン)が付いていますね。 これは、定義の中身が数行に渡る場合に付きます。 つまり、「これからインデントを付けて足した命令文はひとつの固まりでセットですよ」というような意味合いを持ちます。 インデントとは？ pythonにおいて、インデントは非常に重要な役割を持ちます。 インデントとは、文字の前に「空白 (スペース)」を入れて字下げを行う行為のこと。 空白を同じ数だけ与えた文章たちをグループと認めます　というような意味になります。 def btn2_click(): canvas.delete(“img”) ちなみにインデントは、スペースでも、タブでもどちらでも可能です。 今回はグループ化もなにも、一行しかない中身なのであまり意味を強く持つようなことはありませんが、 基本的に「def」は多用することになります。 早いうちから慣れておくことに越したことはありません。 ちなみに定義した中身についてですが、 canvas.delete(‘img’)とは、 imgと名前のついたキャンバスを削除してください、というような意味です。 (少し違いますが後述します ) さて、それでは上書き保存して、コマンドプロンプトで実行してみてください。 ↑1行目の先頭の文字より2行目の文字が後ろに下がっていること (字下げ)
41. 無事にウィンドウは表示されましたか？ では「消す」ボタンを押してみてください。 はい、反応が無いですね。 これは、「’img’なんてタグの付いたキャンバスなんてどこにもないぞ！だから消すも何も分からないから実行できないよ！」 ということになります。 imgという名前で紐づけしたのはあくまで画像であって、キャンバスではありません。 画像を消す時にはキャンバスに命令しますので、キャンバスに目印を付けておく必要があるわけです。 それが「タグ」です。 キャンバスを作成した時に、次の一文を足しておきます。 開いたウィンドウを閉じてから、メモ帳に書いてある黒字の部分を探してその後ろに書き足してください。 canvas.create_image(0,0,image=img,anchor=tk.NW,tag="img") それでは、再び上書き保存して、コマンドプロンプトから呼び出して実行してください。 ウィンドウが表示されたら、「消す」を押して反応を見てください。 無事に消えたでしょうか？
42. それでは今度は、消した画像をもう一度表示してみましょう。 「表示」ボタンを押すことで表示できるようにプログラミングします。 今度はbtn1_clickの合図を送るための準備が必要ですね。 さきほどの内容を思い出して記述してみてください。 答え合わせいきますよ？ btn1 = tk.Button(form,text="表示", command=btn1_click) 次は、定義の設定です。 def btn1_click(): canvas.create_image(0, 0, anchor=tk.NW, image=img, tag="img") どこかで見たことのあるような内容ですね。 そうです、キャンバスを設置した時の記述ですね。 そしてきちんとタグまで付けています。ここは反復でいいので、そのままコピペして、間違いがないかインデントを 確認してください。 そして上書き保存して実行です。 表示ボタンを押して、画像が表示されるか確認してください。
43. エラーが出た場合 imgの定義の前に、この一文を入力してみてください。 global img これは、PhotoImageオブジェクトにはデストラクタが設定されていることが原因のよう。 ローカル変数の場合関数を抜けると画像が破棄されてしまうので、次回呼び出す時には画像がなくなっているわけです。
44. お疲れ様でした！！ これで、tkinterを使ったGUIアプリが完成しました！ 本来であれば、アイコンを設定して、ダブルクリックで開けるところまで行いたかったところですが … そこまで設定する場合は、アイコンの素材を作ること、保存すること、設定すること、 …などなど やることが非常に多くなってしまうので、今回はここまでとします。 次回は8月7日と8月21日を予定しています！ 次回はtkinterではなく、2回に分けてシステムの構築を目指してみます。 ぜひ、参加してくださいね！
45. >>> btn.grid() 次に、grid関数について。 gridは、グリッド(格子)の中に格納して表示する方法。 イメージとして掴みやすいのは、エクセルやスプレッドシートでしょうか。 エクセル等では「行」と「列」で指定しますが、 gridの場合はgridでは「(row)」「column」の0から指定します。 また、エクセル等には「セルを結合して中央揃え」の機能がありますが、 gridにおいても可能です。 列番号(column) 　　行番号(row) pack関数のオプションは次の通り。 ０ １ ２ １ ２
46. padx, pady 外側の横か縦の隙間をピクセル単位で指定します。 パッドエックス、ワイ ipadx, ipady iはインナーの略。つまり内側の縦か横の隙間をピクセル単位で指定する アイパッドエックス、ワイ rowspan グリッドを縦方向に結合する数を指定します。 ロウスパン オプション 意味 読み column ウィジェットを配置する列番号（ 0始まり）を指定します。 カラム columnspan グリッドを横方向に結合する数を指定します。 カラムスパン row ウィジェットを配置する行番号（ 0始まり）を指定します。 ロウ sticky アンカーの機能にも似ていますが、例えば上下（ tk.N+ tk.S）を指定すると、ウィ ジェットが上下方向にグリッド内いっぱいに広がります。【設定値】 tk.N, tk.S, tk.W, tk.E, tk.NW, tk.NE, tk.SW, tk.SE, tk.NSEW および上記組み合わせ（ tk.N+ tk.Sなど） スティッキー