最終更新日: Mon Jun 25 11:54:00 2001


Tcl/Tk

このページは、江草が2000年度(平成12)にTAでTcl/Tkを教えたときの ドキュメントです。

ちょっとした、Tck/Tkのチュートリアルになるかもしれません。

2000年度(平成12)
授業名:情報処理演習II-2
対象学年 3年  2単位
前期 金曜日5時限、実習室 I 
Tcl/Tk ( 6/9,16) 

Tcl/TkはGUIを簡単に実現できるスクリプト言語です。 作成したスクリプトはC言語のようにコンパイルしなくても、 そのまま実行できます。


目次


授業の約束事

実際にTcl/Tkの説明に入る前に幾つかの準備と、 約束事があります。

1.作業ディレクトリの作成

まず、以下のコマンドを実行してこの授業用のディレクトリを作成してください。

実行例1
image of hr
dream% mkdir ~/tcltk
image of hr

この授業では幾つかのスクリプトを作成します。 作成するスクリプトは全てこの~/tcltk/ ディレクトリの下に作成してください。


とにかく使ってみよう

以下を入力してみましょう。

実行例2
image of hr
dream% wish8.0jp
image of hr
注) wish8.0jp は wish で実行できる場合もあるが、dreamではwish8.0jpでなければならない。

すると以下のような小さなウインドウが表示されます。
image of wish window
以下の2行を実行してみましょう。

実行例3
image of hr
% button .b -text こんにちは
% pack .b
image of hr

すると「こんにちは」というボタンが先ほどの小さなウインドウにできます。

このようにTcl/Tkではたった2行でボタンを作ることができます。

1行目の"button .b -text こんにちは" は ".b" というpathName(Tcl/Tkではこう呼ぶ)でこんにちは という ボタンの定義をしています。 2行目は ".b" を実際に配置しています。 あとで詳しく述べますが、Tcl/Tkではbuttonなどのことを widget(ウイジェット)といいいます。

ではこのこんにちは ボタンをクリックしてみて下さい。 しかし、何もおきません。

以下の2行を入力してみて下さい。

実行例4
image of hr
% button .b2 -text おはよう -command bell
% pack .b2
image of hr

では「おはようボタン」をクリックしてみて下さい。 こんどはクリックすると音がなります。

1行目のおはようボタンの定義に"-command bell"があるので ボタンをクリックした時にベルがなります。 このように -command の後に実行することを記述することで ボタンをクリックした時にさまざまな動作を起こすことができます。

終了するにはexitコマンドを使います。

実行例5
image of hr
% exit
image of hr

今までは、キーボードからコマンドを入力してボタンを 作成しましたが、毎回入力するのは面倒なので、 今度は、ファイルにコマンドを書いておいて、いちいち毎回キーボードから 入力しない方法を説明します。

まず、以下を入力したファイル"goodmorning.tcl"を作成して下さい。

スクリプト1)goodmorning.tcl
#!/bin/sh
# the next line restarts using wish \
exec wish8.0jp "$0" "$@"
button .b2 -text おはよう -command bell
pack .b2

注) wish8.0jp は wish で実行できる場合もあるが、dreamではwish8.0jpでなければならない。

次に以下のコマンドを実行して、goodmorning.tclファイルを コマンドとして実行できるように、実行パーミッションをつけます。

実行例6
image of hr
dream% chmod u+x goodmorning.tcl
image of hr

そして、以下のようにgoodmorning.tcl を実行してみてください。

実行例7
image of hr
dream% goodmorning.tcl
image of hr

すると、例2と同じ「おはようボタン」ができます。


widget

widget は「ウィジェット」 と読みます。 先ほど作成したbutton は widgetの一つです。 Widgetには以下のものがあります。

以下を実行すると、いろんなwidgetのデモを見ることができます。 適当にリンクをたどって眺めてみてください。 "See Code" ボタンをクリックすると実際のスクリプトが みれます。

実行例8
image of hr
dream% /opt/free/lib/tk8.0jp/demos/widget
image of hr

先ほどのデモではかなり複雑なスクリプトでしたが、 参考文献にもあげている須栗さんの作成している Tk widgets のページではわかりやすいwidgetのサンプルがあるので参考になるでしょう。

このように様々なwidgetを使ってGUIを実現します。 授業では一つ一つのwidgetの使い方に付いては説明しませんが、 どのwidgetにもいえる基本事項やman ファイルの見方をbuttonを例に説明します。

まず、buttonのマニュアルの Synopsisを見てください。


button pathName ?options?

となっています。 pathNameとはこれまでの例でいうと".b" ".b1"というような widget固有の名前です。 なお?  ?で囲まれているのは省略可能ということを表します。

?options? には省略可能なオプションが入ります。 例でいうところとの -text とか、-commandなどです。

STANDARD OPTIONSには 他のwidgetでも共通のオプションが書いてあります。 -textなどがそれにあたります。 これらの使い方はoptionsのマニュアル や配布資料を見てください。

Widget-specific Optionsには そのwidget特有のオプションの使い方が書いてあります。 buttonの場合、-command などがそれにあたります。


pack

いままでのおはようbuttonなどの例で、packという コマンドを用いました。 このpackというコマンドは、 定義したwidgetを実際に配置するためのジオメトリ・マネージャーの 一つであるpackerのコマンドです。 他にもgridやplacerなどがあります。
参照:packのマニュアル

書式
pack option arg ?arg...?
注) これから出てくる書式はmanコマンドで使われている書式です。

pack.tclは 3つのボタンをpackしたプログラムです。

スクリプト2:pack.tcl
#!/bin/sh
# the next line restarts using wish \
exec wish8.0jp "$0" "$@"
# ウィンドウ・タイトルを button にする
wm title . button
# button widget を定義
button .b1 -text 1番目 -command bell
button .b2 -text 2番目 -command bell
button .b3 -text 3番目 -command bell
# 配置マネージャpackerで3つのbutton widgetを.(master)上に配置
pack .b1 .b2 .b3

pack.tclをダウンロード(保存)して、 実行してみてください。

実行例9
image of hr
dream% chmod u+x pack.tcl
dream% pack.tcl
image of hr
練習1)pack.tclの最終行を以下のように書き換えて、実行してみてください。
image of hr
pack .b1 .b2 .b3 -side left
image of hr

練習2)pack.tclの最終行のleftの部分をrightやbottomやtopに書き換えて、実行してみてください。

このようにpackはwidgetをいろんなふうに配置できます。 -side leftは widgetを左から順に配置するという意味です。 同様に、-side top はwidgetを上から順に配置するという意味になります。 -sideを指定しないと、-side topと同じになります。 他に良く使うオプションとしては、-fillと-expandがあります。

練習3)pack.tclを実行してみて、ウインドウを広げてみてください。 その後に、最終行を以下のように書き換えて、pack.tclを実行して ウインドウを広げてみてください。
image of hr
pack .b1 .b2 .b3 -fill both -expand yes
image of hr

すると、ウインドウのサイズを変えると、 ボタンの大きさが変わるようになります。

"-fill both" は ウインドウの大きさを変えたときに、widgetの左右上下方向に 引き延ばすという指定です。 -fill にはbothの他にも none,x,y などの指定があります。

"-expand yes" とはウインドウの大きさを変えたときに widgetが追随するかどうかです。-expandはyesの他にもno,1,0,true,falseがあります。


frame

packを使うだけだと、単純な配置しかできません。 そこで、frame widgetを使うともっと複雑な配置ができるようになります。 frame widget は 名前どおりフレーム(枠)を 作るだけなので、他のwidgetとちがって、レイアウトを整えるのに使います。 例えばこのように使います。

スクリプト3:frame.tcl
#!/bin/sh
# the next line restarts using wish \
exec wish8.0jp "$0" "$@"
# ウィンドウ・タイトルを "frame example" にする
wm title . "frame example"

frame .f1
button .f1.b1 -text 1番目 -command bell
button .f1.b2 -text 2番目 -command bell
# 配置マネージャpackerで .f1.b1 と .f1.b2 を .f1 に 上から順に配置
pack .f1.b1 .f1.b2

frame .f2
button .f2.b3 -text 3番目 -command bell
button .f2.b4 -text 4番目 -command bell
# 配置マネージャpackerで .f2.b3 .f2.b4 を .f2 に上から順に配置
pack .f2.b3 .f2.b4

# 配置マネージャpackerで .f1 .f2 を左から順に .(master)上に配置
pack .f1 .f2 -side left


frame.tclをダウンロード(保存)して、 実行してみてください。

実行例10
image of hr
dream% chmod u+x frame.tcl
dream% frame.tcl
image of hr
練習4)frame.tclを書き換えて、以下のような配置にしてください。

練習問題の絵

補足:これは問題が悪かったようです。-text を書き換えたり、pathNameを書き換えたりした人を大勢みかけました。正しい問題としては 「frame.tclのpackの行のみを書き換えて、以下のような配置にしてください。」でした。


Tcl文法:tclsh8.0jp

実行例11
image of hr
dream% tclsh8.0jp
%
image of hr

Tcl文法:コメント

コメントアウトするには行の始めに#をつけます。 # をつけた行はすべてコメントアウトされます。

スクリプト4)
#!/bin/sh
# the next line restarts using wish \
exec wish8.0jp "$0" "$@"
# この行はコメントアウトされています。
# button の定義
button .b2 -text おはよう -command bell
pack .b2


Tcl文法:標準出力

標準出力はputsコマンドを使います。

実行例12
image of hr
% puts 今日は晴れです。
image of hr

スペースを含む文の場合、"でくくります。

実行例13
image of hr
% puts "My name is Yuka Egusa."
image of hr

"でくくったなかに"を使いたいときには、"の前に\を書きます。NEW !!

実行例14
image of hr
% puts "My name is \"Yuka Egusa\"."
image of hr

練習5)スクリプト1のgoodmorning.tclを おはようボタンをクリックすると、 「おはよう」と標準出力されるように書き換えなさい。


Tcl文法:変数の扱い

Tcl/Tkにおいて変数はすべて文字列としてあつかいます。 変数の代入にはsetを使います。

実行例14
image of hr
% set my_value apple
image of hr

これは my_value という変数に apple という 文字列を代入する という意味です。

変数の値を参照するにはputsを使います。 変数の値を表すには$をつけます。 $をつけないと文字列とみなされます。

実行例15
image of hr
% puts $my_value
image of hr

Tcl文法:計算式

算術計算をするときにはexprを使います。

実行例16
image of hr
% expr 2 * 3
% set a 4
% set b 5
% expr $a * $b
image of hr

計算した結果を他の変数に代入するには以下のようにexpr全体を [ ]でくくります。

実行例17
image of hr
% set c [expr $a * $b]
% puts $c
image of hr

応用例

スクリプト5)practice.tcl
image of practice
#!/bin/sh
# the next line restarts using wish \
exec wish8.0jp "$0" "$@"

set entdata ""

frame .f
label .f.l -text 入力:
entry .f.e -width 20 -relief sunken -textvariable entrydata
pack .f.l .f.e -in .f -side left

button .b_print -text 入力デ−タの標準出力 -command {puts $entrydata}
button .b_popup -text ポップアップウインドウに出力 -command {
    toplevel .sub
    
    frame .sub.f
    label .sub.f.l -text $entrydata -relief ridge
    pack .sub.f.l -in .sub.f -side left

    button .sub.b_fin -text 閉じる -command {destroy .sub}
    
    pack .sub.f .sub.b_fin

}
button .b_fin -text 終了 -command exit

pack .f .b_print .b_popup .b_fin 



レポート課題

実行例8)で見た、Tcl/Tkに付属のwidgetデモプログラムの簡易版を作成せよ。 作成する「簡易widgetデモスクリプト」は最低限以下の条件を満たすこと。
  1. 1種類以上のwidget(button は除く)のデモがあること。
  2. デモを行うwidgetは最低3つ以上のオプションがあること。
  3. 使用したオプションの簡単な説明をソーススクリプトに コメントとしてつけること。
  4. それぞれのデモwidgetの隣に、クリックするとソースコードを表示する "See Code"ボタンを配置すること。 ただし、表示は、標準出力でもよいこととする。
  5. 作成したスクリプトのファイル名は report.tcl とすること。
  6. report.tcl は~/tcltk/に置くこと。
  7. report.tcl の上部にコメントとして、以下のように 学籍番号とメインシステムのIDと名前を入れておくこと。
    # ---------------------------------------------------
    # 情報処理演習II-2 (Tcl/Tk)
    # 課題:簡易widgetデモスクリプト
    # 学籍番号:2000604
    # メインシステムのID:yuka
    # 氏名:江草由佳
    # ---------------------------------------------------     
    

  8. report.tclにrパーミッションをつけて、 report.tclが誰にでも読めるようにしておくこと。
    誰にでも読めるかどうか確かめるには、他の人が以下を 実行出来るかどうかで分かる。
    image of hr
    dream% wish8.0jp -f ~g○○○/tcltk/report.tcl
    image of hr

レポートの体裁は以下のとおり。
注意!! 体裁が整っていない場合は、課題ができたとみなしません。

  1. 表紙をつける。
  2. 実行画面の画像をつける。
  3. report.tclのソースプログラムを付ける。
  4. A4の紙。
  5. 左上をホッチキスで止める。

総合情報処理センター事務室の横にある 申請書類ボックスに、提出してください。

締切りは6月23日です。

report.tclを実際に動かしてみて、一通り動いたらOKということにします。

参考例) レポート課題の例(button の簡易widgetデモスクリプト)

補足1 作成したWindowの画像ファイルの作り方

6/9の授業では練習4)の実行結果の画像をHTMLに張り付けて提出してもらいました。

画面ダンプをとる方法
image of hr
% xwd -frame > frame.xwd

とした後に、とりたいウインドウクリックして、アクティブにすると、
アクティブにしたウインドウの画面ダンプがとれます。
image of hr

画像ファイルをWWWで利用できるGIF形式に変換する方法
image of hr
% convert frame.xwd frame.gif
image of hr

画像ファイルの詳細を見る方法(GIFとなっていたらOK)
image of hr
% identify frame.gif
frame.gif 243x149+0+0 PseudoClass 32c 3850b GIF 1s
image of hr

画像ファイルを見る方法。
image of hr
% display frame.gif
image of hr

補足2 Error in startup script: unknown option " "を直すには?NEW !!

数人から以下のようなエラーがでて実行できないという質問がありました。
image of hr
Error in startup script: unknown option " "
image of hr

行の最後尾に余分なスペースがあるときに、 このようなエラーが出て実行できないことがあります。 行の最後尾には余分なスペースを書かないようにしましょう。


参考書

残念ながら、以下の本は本学の附属図書館に所蔵されていませんが、 他のTcl/Tkの本は何冊か所蔵されています。

リンク

AJUBA
Tcl/Tk開発元。最新版の入手など。元Scriptics
Tcl for Web Nerds
Tclの文法の入門ページ。例を一通りやってみれば、英語が分からなくてもだいたいわかります。
http://www.sra.co.jp/people/m-hirano/tcltkjp/
Tcl/Tk日本語化パッチのページ。
Tcl/Tk Page
「入門Tcl/Tk」著者のページ。BBSなど充実。
しばしば クリーンルーム
Tcl/TkとCを組み合わせたプログラミングについての説明が非常に詳し い。

質問や感想などはyuka@nier.go.jpまで。
江草由佳 (Egusa Yuka)