![[PukiWiki]](image/blackuni3-80x80.png "[PukiWiki]")
#author("2019-04-12T10:45:41+09:00","default:takataka","takataka") #author("2019-04-12T10:46:02+09:00","default:takataka","takataka") *グラフィックス基礎及び実習 2019年度 実習第1回 [#kd45822f] //&color(Red){工事中}; #contents **実習のすすめ方 [#l5135b5b] [[Graphics/2019/ex00]] を参照してください． **課題A(self) 完成目標: 今回の実習終了まで [#kadaiA] ***step1 環境設定 [#l906608c] この授業の演習課題をやるための環境を整えよう． + 次のようにコマンドを実行します（コピペしましょう）．&color(white,blue){check}; &color(blue){行頭の '$' は入力する必要ありません．}; &color(white,blue){check}; &color(blue){このコマンドの実行は今回一度限りの作業です．}; $ /roes/sample/takataka/graphics/setup.sh これで，「端末」内でコマンドを解釈して実行してくれるプログラム（''シェル''といいます）の設定ができました（&size(10){何をやってるのか気になるひとは [[課題Aの補足>./#appendixA]] へ};）．ただし，設定が有効になるのは，次にシェルを起動したときからです． + ''「端末」をいったん終了して，新しいのを起動しましょう．'' +端末を開き，mkdir コマンドを使って，ホームディレクトリの下に Graphics20XY というディレクトリを作りなさい．&color(white,blue){check}; &color(blue){Graphics20XY の XY のところは，実際には2桁の数字が入ります（20XYが今年を表すように）．今後も同様に考えてください．}; --&color(white,blue){check}; mkdir の使い方を忘れたひとは [[Docs/4UNIXBeginners]] へ --&color(white,blue){check}; 今後，このディレクトリのことを ~/Graphics20XY と書いて説明する（~ はホームディレクトリを表す記号）． ***step2 エディタ Visual Studio Code を使えるようになる [#j814a570] この授業では，ソースプログラムの作成に Visual Studio Code （以下 code と略します）というエディタを用います． + 次のようにディレクトリ ~/Graphics20XY へ移動して code を起動してみましょう． $ cd ~/Graphics20XY $ code . ← ピリオド（現在のディレクトリ（カレントディレクトリ）を表す） + こんな感じのウィンドウが開きます．~ &ref(https://www-tlab.math.ryukoku.ac.jp/~takataka/course/Graphics/vscode01.png,nolink); + 画面上部のメニューバーの「ファイル」→「新規ファイル」を選択すると，ウィンドウ右側に 「Untitled-1」のような名前のタブが現れて編集できるようになります． + これを使って G01Hello.java を作ることにしましょう．「ファイル」→「名前を付けて保存」を選択し，G01Hello.java を指定して「保存」を押します． + 右側に「Java Overview」とかいう画面が出てくるかもしれませんが，上部に「G01Hello.java」というタブが見えてるはずです．そっちを選択して上に出しましょう． +講義資料の G01Hello.java を実際に作りなさい．ただし，"a01055"の部分は自分の学籍番号に，"ほげほげお"の部分は自分の名前にすること．~ &ref(https://www-tlab.math.ryukoku.ac.jp/~takataka/course/Graphics/vscode02.png,nolink); + 上記のようになるはず． -- &color(white,blue){check}; 4行目と5行目の間に「Run | Debug」という謎の表示がありますが，これは自分で入力するものではありません．code が勝手に挿入します．この行のことは今のところ無視してください． -- &color(white,blue){check}; この画像ではカーソルが13行目の閉じ括弧 ''}'' のところにあるのですが，それに対応する3行目の開き括弧が枠で囲われて示されてるのがわかりますね． + 正しく書けたら「ファイル」→「保存」しましょう． -- &color(white,blue){check}; メニューの各項目の右側に，その操作に対応するキーボードショートカットが表示されてます．慣れてきたら積極的にそっちを使えるようにするとすてき． ***step3 G01Hello を作ろう [#ye350fdf] +作成したプログラムをコンパイルして実行し，動作を確認しなさい． -- やり方は講義資料に書いてあります． +次のようにわざと間違えるとどんな結果になるか，ひとつづつ試して観察しなさい --&color(white,blue){check}; いちいち code を終了する必要はありません．code をいじって保存 → 端末でコンパイル&実行 → code をいじって... を繰り返せばok --&color(white,blue){check}; よく見ると，メッセージ中にエラー箇所の行番号や位置が示されていることがわかる． ++7行目の "println" を "purintln" と間違えてみる ++7行目の最後の ";" （セミコロン）をつけ忘れてみる ++3行目の G01Hello をわざと別の名前にかえてみる（詳しくは今後説明しますが，このプログラムの例では，この名前はソースファイル名の ".java" より前の部分と一致していないといけません） + ここまでできたら，課題の完了を報告しましょう **課題B(self) 完成目標: 今回の実習終了まで [#kadaiB] この課題は以下の通りです． &color(#0000a0){以下の文だけではどうやっていいかわからないという人は，次のページを参照しなさい：}; [[Docs/4UNIXBeginners]] + [[Graphics/Link]] から grtg.zip をダウンロードして，~/Graphics20XY に置きなさい．&color(#0000a0){ヒント：右クリックして「名前を付けてリンク先を保存」}; + 上記のディレクトリに移動し，lsコマンドを実行してダウンロードしたファイルが存在することを確認しなさい． --&color(white,blue){check}; cdコマンドでディレクトリを移動できるか？ cd コマンドをどのように実行すればよい？ + ダウンロードしたファイルは，複数のファイルをひとまとめにした形式のファイル（アーカイブと呼ばれることがある）である．この例ではファイル名に .zip という拡張子がついているが，これは，このファイルが 「[[ZIPファイルフォーマット>https://ja.wikipedia.org/wiki/ZIP_(%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88)]]」に則ったアーカイブファイルであることを表している．計算機室の Linux 環境では，次のように zipinfo コマンドで内容を確認できる． #pre{{ $ zipinfo grtg.zip }} + unzip コマンドで，このアーカイブを展開しよう． #pre{{ $ unzip grtg.zip }} + 展開できたかどうか，ls コマンドで確認しよう． #pre{{ $ ls $ ls tg }} &color(white,blue){check}; カレントディレクトリ（今いる場所，~/Graphics20XY のはず）に tg というディレクトリが作られ，その中に拡張子 .java のファイルが4つできているはずである．確認できたら，grtg.zip は削除して構わない． + cd や ls の使い方に慣れる（思い出す）ため，次のことをやろう． --&color(white,blue){check}; コンソールで次のように順次コマンドを実行し，何が起こっているか考えなさい． #pre{{ $ cd $ pwd pwdは，現在いるディレクトリ（カレントディレクトリ, present working directory）を表示する $ ls $ cd Graphics20XY/tg （Tabキーを使った補完を活用しよう．たとえば G を入力したらTabキーを押してみる，等 ） $ pwd $ ls $ cd .. $ pwd $ ls $ cd .. $ pwd $ ls }} + ディレクトリ ~/Graphics20XY 中（tgの中ではない）に T21.java というファイルを作りなさい（内容は教科書p.9の通り）．&color(#0000a0){注意： このプログラムの詳しい説明は次回の講義で行います．まずは雰囲気をつかんでみて下さい．}; +T21.java をコンパイルして，lsしてみなさい． --&color(white,blue){check}; エラーにならなければ，T21.class というファイルができているはずである． --&color(white,blue){check}; T21.java は tg という「パッケージ」（詳しいことはいずれまた）内のクラス（TurtleクラスやTurtleFrameクラス）を利用しているので，うまくコンパイルできた場合，~/Graphics20XY/tg 内の関係する .java もコンパイルされて，Turtle.class や TurtleFrame.class などが自動的に作られているはずである．ls を実行し，そのことを確認しよう． +T21.class を実行し，動作確認しなさい． --&color(white,blue){check}; 教科書の指定通りの動作をしているか？ --&color(white,blue){check}; これは次回の講義で説明することだが，2匹の亀は m と m1 という変数で表されている． 上の方の亀は，m と m1 のどちらだろう？ +実行結果が以下の図のようになるように T21.java を修正しなさい．かめの位置や向きの指定の仕方に迷ったときは，教科書p.7の図を参照して考えよう． --&color(white,blue){check}; 要求通りの動作をしているか？ --&color(white,blue){check}; 一度ソースを完成させてコンパイル済みのプログラムを，変更せずにもう一度実行する場合，以下のどちらが適切？ --- 「javac ほげ」してから「java ほげ」 --- 「java ほげ」のみ #ref(https://www-tlab.math.ryukoku.ac.jp/~takataka/course/Graphics/T21.png,nowrap,nolink) + ここまでできたら，code のウィンドウはこんな感じになってると思います． $ code . として「ディレクトリを開く」ようにしたおかげで，左側のメニューからこのディレクトリ内のファイルを選択するだけでそのファイルを編集できて便利です．~ &ref(https://www-tlab.math.ryukoku.ac.jp/~takataka/course/Graphics/vscode03.png,nolink); + ここまでできたら，課題の完了を報告しましょう **課題C(takataka) 締切: 次回実習開始直後 [#kadaiC] 教科書p.12の練習問題2.1をやりなさい．ただし， -ソースファイル名は教科書の指示通り P20.java とすること． --&color(white,blue){check}; ソースファイルはどこに作ったらよいか，自分でよく考えよう -図2.1のような星型が描けたら，星の向きがまっすぐ（ &size(30){★};のような向き）になるように修正すること． --&color(white,blue){check}; 小学校の算数ですが...何度回転させたらよい？ （何通りかありえます） -「これは繰り返しやからふぉー」って人は教科書の目次を見てみよう **課題S(omake) [#kadaiS] 次のことを全てやりましょう． + 以下のリンク先からソースファイルをダウンロードし，実行してみよう． --DoublePendulum のソース [[Graphicsgakunai:DoublePendulum.java]] （学内アクセス限定） + 重りの質量(m1,m2)や振り子の長さ(l1,l2)をいろいろ変えて実行してみよう --このプログラムそのものはこの科目の範囲外ですが，数理情報学科で学ぶ物理，数値計算，計算科学などの知識と，この科目で学ぶ内容で理解できます． + おまけ課題関係の情報のやりとりのために，Slack というビジネスチャットツールを使った場所を用意しました．以下の新規登録用 URL をたどって，ユーザ登録してください．メイルアドレスには 学籍番号@mail.ryukoku.ac.jp を使ってください． -- 新規登録用URL: https://join.slack.com/t/math-graphics/signup - 上記で入れる場所に投稿されている takataka からのメッセージを読んで，今回のおまけ課題のつづき（しりとり）をやりましょう． - 全て完了したら，takataka を呼んでチェックを受けてください + 上記で入れる場所に投稿されている takataka からのメッセージを読んで，今回のおまけ課題のつづき（しりとり）をやりましょう． + 全て完了したら，takataka を呼んでチェックを受けてください **おまけ [#r6b8ca4a] - C言語プログラムの実行形式ファイル（Mac OS Xの環境で実行できるようにコンパイルしたもの） [[G01Hello-mac>Graphics:G01Hello-mac]] - C言語プログラムの実行形式ファイル（Linuxの環境で実行できるようにコンパイルしたもの） [[G01Hello-linux>Graphics:G01Hello-linux]] - Java のクラスファイル [[G01Hello.class>Graphics:G01Hello.class]], [[DoublePendulum.class>Graphics:DoublePendulum.class]] **課題Aの補足 [#appendixA] //&color(Red){工事中}; $ /roes/sample/takataka/graphics/setup.sh を実行すると，自分のホームディレクトリ上の .bashrc という名前のファイルに記述が追加されます． $ less ~/.bashrc とすれば，このファイルの中身を確認できます． この ~/.bashrc というファイルは，端末上でユーザとOSとの仲立ちをして，コマンドを解釈したりOSに実行を依頼したりする，「シェル」というプログラムの設定ファイルです．より正確に言うと，龍大 Linux 環境でのデフォルトである Bash というシェルの設定ファイルです． 新しく端末を開くたびに，この設定ファイルが読み込まれます． で，~/.bashrc の中身を理解するとわかるのですが，ここでは takataka が用意した別の場所にあるファイル /roes/sample/takataka/graphics/alias.sh を読みこむようになってます．このファイルの中身を less で確認すると， #pre{{ alias ls="ls -F --color=auto" alias java="java --module-path $PATH_TO_FX --add-modules=javafx.base,javafx.graphics,javafx.controls,javafx.fxml" alias javac="javac --module-path $PATH_TO_FX --add-modules=javafx.base,javafx.graphics,javafx.controls,javafx.fxml" }} こんな感じで，alias というコマンドを実行するようになってます． alias コマンドは，コマンドの別名（エイリアス）を定義するコマンドです． alias ls=... の場合，ls とコマンドを実行しようとしてシェルに ls という文字列を渡すと，シェルは実際には ls -F --color=auto というコマンドを実行してくれる，ということになります．結果として，ファイルやディレクトリの属性ごとに記号（ / とか * とか）がついたり色がついた表示になります． java や javac に上記のようなエイリアスを定義している理由は，龍大計算機室の Java のバージョン（現在は Java11）でこの授業で扱うタートルグラフィックスその他のグラフィックス関係の プログラムをコンパイル&実行したい場合，本当は上記のように長ったらしいコマンドを打たないといけないからです．それはめんどいから...． ちなみに， $ alias とすると，現在のシェルで定義されてるエイリアスの一覧が出てきます． $ \ls のようにコマンドの前にバックスラッシュを付けて実行すると，エイリアスを無視して本来のコマンドを実行します． $ alias hoge=ls とすると，それ以降は $ hoge を実行すると ls を実行するのと同じことになります．このように手動で alias を実行した場合，それが有効なのはこのシェルの中だけです．unalias というコマンドで特定のエイリアスを解除することもできます．
