2023年度 電子情報通信課程 計算機実習II

今日の説明動画

本日の説明は，7本の動画に分かれています．それぞれ視聴して，理解ができたら次に進むようにして下さい．

動画の長さは次の通りです．自分のペースで進めながらも，1コマで終わるように頑張ってください．

  1. 　計算機実習2／計算機基礎実習2-03回目ex3-1 - 08分18秒
  2. 　計算機実習2／計算機基礎実習2-03回目ex3-2 - 04分49秒
  3. 　計算機実習2／計算機基礎実習2-03回目ex3-3 - 03分18秒
  4. 　計算機実習2／計算機基礎実習2-03回目ex3-4 - 01分40秒
  5. 　計算機実習2／計算機基礎実習2-03回目ex3-5 - 03分13秒
  6. 　計算機実習2／計算機基礎実習2-03回目ex3-6a - 03分34秒
  7. 　計算機実習2／計算機基礎実習2-03回目ex3-6b - 11分30秒
    8. 計 36分22秒

レポートについて

前回のレポート採点結果は，こちらです．

※龍大のアカウントからのアクセスのみ許可しています．個人のGoogleアカウントでアクセスしないように気をつけて下さい．

前回の課題に関する解説や実際にコードを実行した結果を，以下にアップしています．

GUIプログラミング

今日のポイント

ウインドウを作ってみましょう．

マウスのクリックでプログラムを動かしてみましょう．

素材について

いらすとやさんをもとに作成した素材は，です．名前をつけて保存して下さい．

準備

素材のダウンロード

img3という名前のフォルダを作成し，その中に素材をchap3-back.png という名前で保存しましょう（拡張子が表示されない設定の場合は，ファイル名は「chap3-back」です．）

tkinter のインポート

pythonで画像を扱うには色々な方法がありますが，この教科書ではtkinter を使います．

※画像を扱う仕組みとして「tk」を使います．スクリプト言語から手軽に呼び出せる仕組みになっており，興味がある人には「Tcl/TK （ティクル・ティーケー）」をお勧めします．

このような他で作られたプログラムを自分のプログラムで利用するときにはimport を使います．また，import で読み込まれるプログラムのことをモジュールといいます．

MacOSXを使っている人は，pngファイルが表示できない場合があります．そのときは，MacOSでのインストールメモの後半に対応方法を書いていますので，そちらを参照して下さい．

動作確認

次のプログラムを実行して，エラーが出ないかどうか確認しましょう．

エラーが出た場合は，tkinterのモジュールが正しく扱えていませんので，上記の話をもう一度読み直して，作業して下さい．

ex3-1.py
hlonqs sjhmsdq

解説-1

import tkinter

tkinter のモジュールを使えるようにします（読み込みます）．

ウインドウの枠組みの作成

教科書p.55のchap3.py（下） を入力して実行しましょう．

解説-2

import tkinter

tkinter のモジュールを使えるようにします（読み込みます）．

root = tkinter.Tk()

tkinter のモジュールのTk()という命令を実行します．この命令はウインドウを作って，そのウインドウを戻り値として返します．今，それをroot という変数に代入しました．この変数は，「ウインドウ」を扱います．このような対象物のことをオブジェクトと言います．

root.mainloop()

Tk()で生成したオブジェクトには，いくつかの命令（メソッド）と変数（パラメータ）があります（正しくは，Tk()から継承します）．

命令は，引数を取りますので，丸括弧でくくります．引数がないときは，丸括弧だけになります．

その中には，mainloop()という命令があり，ウインドウを画面に表示してイベントが生じるのを待つ（ループする）命令です．

本来であれば，mainloop()を呼び出す前に，ウインドウの中身の記述が必要です．今回は，その部分を書いていませんので，何もない一番シンプルな（手抜きな）ウインドウが表示されるはずです．

※ウインドウの描画はOSの仕事です．「閉じる」「最大化」などのボタンは，OS側で描画していますので，同じプログラムでもOSが異なるとデザインが異なることがあります．

課題　3-1

先ほどのプログラム（chap3.py）の最後の「root.mainloop()」をコメントアウトして，何が変わるかを報告して下さい．

ウインドウの設定

教科書p.58のchap3.pyを入力して，実行しましょう．

    ウインドウのタイトルとサイズを設定します．

教科書p.60のchap3.pyを入力して，実行しましょう．

    ウインドウの背景を設定して，配置します．

課題　3-2

背景色を青，赤，そして緑に変えてみて下さい．それぞれ変えた行のみの提出で結構です．

canvas.placeのxとyの値を変えてみて下さい．そして，設定した値と画面がどのように変わったかを報告して下さい．

画像の表示

教科書p.62のchap3.pyを入力して，実行しましょう．

    画像のファイル名と場所に注意して下さい．

解説-3

tkinter.PhotoImage

画像ファイルを変数に読み込みます．

create_image

変数の画像ファイルを，実際にウインドウに貼り付けます．

原点（基準点）の位置が，画像の中心になっています．教科書p.64をよく読んで理解しましょう．

課題　3-3

create_imageの第1と第2引数を(100, 100)に変えてみましょう．どのように変わったかを報告して下さい．

画像の表示（その2）

教科書p.65のchap3.pyを入力して，実行しましょう．

解説-4

create_image

表示したい画像のサイズ情報から原点（基準点）の位置を計算する必要があります．

課題　3-4

自分の環境における，画像ファイルの相対パスと絶対パスを答えなさい．

テキストの配置

教科書p.67-68のchap3.pyを入力して，実行しましょう．

解説-5

tkinter.Label

ウインドウに文字を表示するオブジェクトです．

引数として，textに表示する文字列を指定します．

place

設定した文字列をウインドウに配置します．

引数として，配置する座標を指定します．

課題　3-5

文字列を「計算機実習2」に変更し，それが吹き出しに右寄せで表示されるように座標を調整しなさい．その座標を提出しましょう．

フォントの変更

教科書p.69のchap3.pyを入力して，実行しましょう．

解説-6

option_add

ウインドウの設定を変更（追加）します．

今回は引数として，「全ての文字」のフォントを「MS Pゴシック」にしています．

なお，MS PゴシックはWindows に標準で入っているフォントですが，LinuxやMacには入っていません．その場合，近いフォントで表示されます．

引数の与え方として，[ ]で囲っていますが，これは「リスト」と呼ばれる扱い方です．後ほど出てきます．

課題　3-6

フォントを「Times New Roman」にしてみましょう．どのような文字になったかを報告して下さい．

表示するテキストの背景の色を水色，黄色，紫色に変更して下さい．それぞれ変えた行のみの提出で結構です．

テキストボックス，ボタンの追加

教科書p.70-71のchap3.pyを入力して，実行しましょう．

解説-7

tkinter.Entry

テキストボックスを作成します．

引数として，ボックスの幅とボックスの線の太さを指定しています．place でウインドウに配置します．

tkinter.Button

ボタンを作成します．

引数として，ボタンに表示する文字列を指定します．place でウインドウに配置します．

教科書p.72のchap3.pyを入力して，実行しましょう．

三つ目の吹き出し（答えの欄）が空だと分かりにくいので，初期値のセリフを用意しておきます．

イベントドリブンのプログラム

CUIのプログラムは，基本的に上から一文ずつ順番に実行していきますので，ソースを読むときも同じ順番で見ていけば，理解しやすいです．

一方でGUIのプログラムは，ユーザーの動作がきっかけとなってプログラムが起動します．「マウスをクリックした」とか，「キーボードからの入力があった」というものだけでなく「閉じるボタンが押された」とか「マウスが上に来た」といったシステム的な作業をきっかけにすることもできます．ちなみに，この「きっかけ」のことを「トリガー」と呼びます．

このような「何らかのアクション（イベント）」をきっかけにプログラム（正確には関数）が呼び出される仕組みを「イベントドリブン」といいます．イベントで駆動するプログラムです．

今はまだ，そのような部分を書いていませんので，何の操作も受け付けないプログラムになっています．これから追加していきます．

※プログラムを実行する順番が，ユーザーの作業に依存しますので，プログラマの予期せぬ組み合わせが生じる可能性が高くなります．色々な場合を想像できるようになりましょう．

関数の作成

「関数」とは，プログラムの一連の塊のことです．

何度も用いる命令群を1つにまとめることで，使い易くなります．

また，引数を処理することで，要求に応じた動作をすることも可能です．

今までに出てきたprintやinputも関数です．

関数は，def 文を使って定義します．

定義の範囲（ここからここまで）を表すのにpythonではインデント（字下げ）を用います．

同一のインデントの区間のことをブロックと呼びます．

関数の例として，p.78-79のchap3-4sample.py を入力して実行しましょう．

ボタンのクリック

教科書p.79のchap3.pyを入力して，実行しましょう．

解説-8

askbutton["command"] = ask_click

askbutton が押されたらask_clickの関数を呼び出します．

※ask_click() と書かないように気をつけて下さい．

教科書p.80のchap3.pyを入力して，実行しましょう．

計算結果をprintで画面に出力するのではなく，テキストに表示します．

今日の課題

上記の課題3-1から3-6です．

課題はメールで提出して下さい．メールの書き方は，メールの書き方を参考にして下さい．

件名はreport03，アドレスはcom02@elec.ryukoku.ac.jp です．