Fork: 0
nitta-lab / TraceDebuggerExperiment
Browse code
実験主旨および流れの説明を作成した。
コースの説明（作業全体の説明）を作成した。
EC2インスタンスへのログイン方法の説明を作成した。
実験開始の説明を作成した。
コース毎に実験開始まで流れるようにした。
combine ...revise
1 parent 7d9a835 commit e8936d62919bccbbcb0f2564f201e77a436578ad
n-nitta authored on 24 Sep 2020
Patch
Unified Split
Showing 38 changed files
View
24
■■■■■
 Closing.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>終了時の説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<p>
最後に実験全体に関するアンケートにお答えいただき，実験は終了となります．<br>
</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfOGm63qySQLhrwGhwaDSm29y-6caYJBD7eu3_AqAiaZrSJ_Q/viewform?usp=sf_link" target="_blank">最終アンケートはこちら</a>
<p>
<p>
これで実験はすべて終了となります．<br>
この度は，ご協力いただき誠にありがとうございました．
</p>
</body>
View
133
■■■■■
 Introduction.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>実験主旨および流れ</title>
<meta charset="UTF-8">
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style>
 
</style>
<body>
<h1>実験主旨および流れ</h1>
<p>
甲南大学知能情報学部のソフトウェア設計検証研究室です．<br>
この度は私共の実験にご協力頂きまして誠にありがとうございます．<br>
<p>
<strong>実験の主旨と概要について説明いたします．</strong>
</p>
<p>
Javaによる実務経験3年以上のエンジニアの方々を対象に，被験者として実験へのご協力をお願いいたします．<br>
この実験は，Javaプログラムを理解する上での「実行トレースを用いたデバッガ」の有効性を評価することを目的としています．<br>
実行トレースとは，変数の値や実行された行など実行時のプログラム内部の情報を時系列に記録したファイルのことです．
また，実行トレースを用いたデバッガ(以下，<b>トレースデバッガ</b>と略)とは，実行トレースを参照しながら対象プログラムをデバッグすることができるデバッガのことです．<br>
トレースデバッガは，プログラムを何度も実行することなく，同じ条件で繰り返しデバッグすることができるという特長を持ちます．
今回の実験では通常のデバッガと同じように実行に対して順方向にしかトレースを辿れない順方向バージョンと，実行に対して順方向にも逆方向にも辿ることができる逆方向バージョンの2種類のトレースデバッガをお使いいただきます．<br>
トレースデバッガの実行環境および課題となるオープンソースプログラムはすべて，Amazon の EC2インスタンス上にご用意しております．
そのため，皆様のマシン上で環境構築を行っていただく必要は一切ございません．<br>
実験では，2つのオープンソースプログラムから2つずつ機能を選んで，計4つの課題に取り組んでいただきます．
比較の公平性を保つため，4つのうちの2つの課題に対しては順方向バージョンを，残り2つの課題に対しては逆方向バージョンを用いてソースコードを追いかけていただき，
それぞれの操作に要した時間を計測した上で，課題ごとにアンケートにお答えいただきます．<br>
全体の作業時間としては，5~6時間程度を想定しています．
お答えいただくアンケートは最初と最後，課題ごとに2個ずつの計10個あります．
アンケートへの回答が終わるたびに作業を中断していただいて構いません．
作業はすべてEC2インスタンスおよびWeb上で完結します．
</p>
<p>
<strong>実験における作業内容について説明いたします．</strong><br>
実験は，リモートデスクトップでログインしたEC2インスタンス上で，トレースデバッガを用いてソースコードを追いかけていただくことと，Web上のアンケートにお答えいただくことが主な作業内容になります．<br>
トレースデバッガで追いかける対象は，2つのオープンソースプログラムの4つの機能です．
また，実験の開始前と終了後に1つずつアンケートにお答えいただきます．<br>
</p>
<p>
<strong>ご応募までの手順を説明いたします．</strong>
<ol>
<li>本HTML(実験に関する説明，個人情報の取り扱いに関する説明，報酬を含む契約に関する説明)をお読みいただきます．</li>
<li>1の全てに同意できる場合は，下記の同意確認フォームにその旨を入力していただきます．</li>
<li>またご同意いただける場合は，下記の個人アンケートにもお答えいただきます．</li>
<li>ご同意および個人アンケートへの記入をもって応募の条件とさせていただきます．ご同意いただけない場合はご応募いただけません．</li>
</ol>
<strong>実験は以下の流れで行います．</strong>
<ol>
<li>下記の同意確認フォームにご記入いただきます．</li>
<li>実験にご同意いただける場合は，個人アンケートにお答えいただきます．</li>
<li>実験へのご同意を確認でき次第，実験用のWebページとEC2インスタンスへのログイン情報をこちらからお伝えいたします．</li>
<li>EC2インスタンスへのログインの方法をご説明いたします．</li>
<li>順方向バージョンのトレースデバッガを操作する練習を行っていただきます．</li>
<li>逆方向バージョンのトレースデバッガを操作する練習を行っていただきます．</li>
<li>ここから実験に入ります．2つのオープンソースプログラムから2つずつ機能を選んで，機能毎に以下の手順を繰り返します．</li>
<ul>
<li>(必要に応じて)対象となるオープンソースプログラムに関する，簡単な説明をお読みいただきます．</li>
<li>対象となる機能に関する説明をお読みいただきます．</li>
<li>対象となる機能に関係するソースコードを，順方向バージョンもしくは逆方向バージョンのトレースデバッガを用いて追いかけていただき，アンケートにお答えいただきます．
このとき，レースデバッガの操作に要した時間をお手元で計測していただきます．なお，トレースデバッガの操作はすべてEC2インスタンスにリモートデスクトップでログインした上で行っていただきます．</li>
<li>逆方向バージョンのトレースデバッガの「ある機能」を用いて，再度，同じソースコードを追いかけていただき，アンケートにお答えいただきます．</li>
</ul>
<li>最後に実験全体に関してのアンケートにお答えいただきます．</li>
</ol>
<p>
以上が実験の流れです．<br>
全ての作業はEC2インスタンスおよびWeb上で完結します．<br>
</p>
<p>
<strong>実験中の危険性に関して説明いたします．</strong><br>
通常のPC画面に向かっている際と危険性は変わりません．
</p>
<p>
<strong>実験時間(拘束時間)に関して説明いたします．</strong><br>
全体の作業としては5~6時間を想定していますが，人によっては多少前後する可能性があります．<br>
時間に余裕がある際に行ってください．<br>
また，後日大学にお越しいただいたり，こちらから連絡を行うことはありません(参加者に不利益が発生する恐れのある場合は除く)．
</p>
<p>
<strong>実験への参加取りやめに関して説明いたします．</strong><br>
実験の途中で，参加を取りやめることが可能です．<br>
その場合の報酬に関する取扱いついては．以下で説明いたします．
</p>
<p>
<strong>契約と報酬に関して説明いたします．</strong><br>
</p>
<ul>
<li>報酬は作業全体に対して一律に(10,500円)支払われます．</li>
<li>作業は全てのアンケートにお答えいただいた時点で終了とします．</li>
<li>実験の途中で参加を取りやめた場合は，報酬は支払われません．あらかじめご了承下さい．</li>
<li>契約及び報酬に関してご不明な点がございましたら，メッセージにてご連絡ください．</li>
<li>私共の直前の別の実験【Web上での3～5時間の作業＆アンケート】にご参加いただいた方は，実験の公平性のためご担当いただけません．</li>
<li>おひとりで，複数回ご担当することはできません．</li>
<li>他の参加者に作業の情報を提供したこと，または，他の参加者からの情報をもとに作業を行ったことが判明した場合は，報酬の支払いをお断りする場合がございます．</li>
</ul>
<p>
<strong>個人情報の取り扱いについて説明いたします．</strong><br>
</p>
<ul>
<li>ご提供いただいた個人情報は研究目的以外では利用いたしません．</li>
<li>ご提供いただいた個人情報を第三者に提供・開示することはありません．</li>
<li>研究成果として公開する場合は，統計処理を施し，個人の情報が特定できないようにしたデータのみを用います．</li>
<li>ご提供いただいた個人情報は不正アクセス，紛失，破壊，改ざん，漏洩等がないよう厳重に管理いたします．</li>
</ul>
 
<p style="margin-bottom:2em;"></p>
 
<p>
同意確認フォームはこちらです．
</p>
 
<blockquote>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdkLl29XEGO0D2Q_woV54bbRcEca2CtB66rXM9xIlPZJyv2UQ/viewform?usp=sf_link" target="_blank">同意確認フォーム</a>
</blockquote>
 
<p>
実験にご同意いただけましたら，以下の個人アンケートにご協力ください．
</p>
 
<blockquote>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSe4nfOFKL74F5-BV7384-HmC4rGQQXW9VkToTF9QaONBOyzaw/viewform?usp=sf_link" target="_blank">個人アンケートはこちら</a>
</blockquote>
 
</body>
View
34
■■■■■
 courseA/ArgoUML_Forward/DescriptionArgoUML.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>ArgoUML説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>ArgoUMLの概要</h1>
 
<p>ArgoUMLはJavaで書かれたオープンソースのUMLエディタです．</p>
<p>ArgoUMLを起動すると,まずクラス図の編集画面が開きます．</p>
<img src="pictures/ArgoUML-1.png", class ="image_size">
<p>編集画面上で行える操作はモードによって異なります．</p>
<p>モードの切り替えは，ツールバーのボタンをクリックすることによって行うことができます．</p>
<img src="pictures/ArgoUML-2.png", class ="image_size">
<p>例えばクラス配置モードでは，編集画面上をクリックすると，クリックした位置にクラスを配置することができます（クラス配置機能）．</p>
<img src="pictures/ArgoUML-4.png", class ="image_size">
<p>クラスを配置すると選択モードに戻ります．</p>
<p>選択モードでは，編集画面上に配置されたクラスをクリックすると，そのクラスを選択状態にすることができます（選択機能）．</p>
<img src="pictures/ArgoUML-3.png", class ="image_size">
<p>選択状態のクラスは，Delキーを押すことで削除することができます（削除機能）．</p>
<img src="pictures/ArgoUML-1.png", class ="image_size">
<p style="margin-bottom:3em;"></p>
<a href="problem1/ArgoUML1_Forward.html">次へ</a>
<p style="margin-bottom:5em;"></p>
</body>
View
courseA/ArgoUML_Forward/pictures/ArgoUML-1.png 0 → 100644
View
courseA/ArgoUML_Forward/pictures/ArgoUML-2.png 0 → 100644
View
courseA/ArgoUML_Forward/pictures/ArgoUML-3.png 0 → 100644
View
courseA/ArgoUML_Forward/pictures/ArgoUML-4.png 0 → 100644
View
62
■■■■■
 courseA/CourseDescriptionA.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>作業全体の説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>作業全体の説明</h1>
<p>
甲南大学知能情報学部のソフトウェア設計検証研究室です．<br>
この度は私共の実験にご協力頂きまして誠にありがとうございます．<br>
</p>
<p>
これから行っていただく作業は，4つの課題とアンケートへの回答です．全体の作業時間としては，5~6時間程度を想定しています．<br>
実験に入る前にAmazon EC2インスタンスにログインしていただき，実験で使用するトレースデバッガの操作の練習を行っていただきます．<br>
実験では，2つのオープンソースプログラムの4つの機能を対象に4つの課題に取り組んでいただきます．<br>
これ以降お答えいただくアンケートは実験中に8個と，最後に1つの計9個あります．
アンケートへの回答が終わるたびに作業を中断していただいて構いません．
作業は，すべてEC2インスタンスおよびWeb上で完結します．
</p>
<strong>実験は以下の流れで行います．</strong>
<ol>
<li>実験用のWebページ(本ページ)にアクセスしていただきます．</li>
<li>EC2インスタンスへのログインの方法をご説明いたします．</li>
<li>EC2インスタンスにリモートデスクトップでログインし，順方向バージョンのトレースデバッガを操作する練習を行っていただきます．なお，以下のトレースデバッガの操作はすべてEC2インスタンス上で行っていただくこととします．</li>
<li>逆方向バージョンのトレースデバッガを操作する練習を行っていただきます．</li>
<li>ここから実験に入ります．
ArgoUMLとJHotDrawという2つのオープンソースソフトウェアから2つずつ機能を選んで，計4つの課題に取り組んでいただきます．</li>
<ul>
<li>ArgoUMLに関する，簡単な説明をお読みいただきます．</li>
<li>ArgoUMLの2つの機能について以下の手順を繰り返します．</li>
<ul>
<li>対象となる機能に関する説明をお読みいただきます．</li>
<li>対象となる機能に関係するソースコードを，<b>順方向バージョン</b>のトレースデバッガを用いて追いかけていただき，アンケートにお答えいただきます．
このとき，レースデバッガの操作に要した時間をお手元で計測していただきます．</li>
<li>逆方向バージョンのトレースデバッガの「ある機能」を用いて，再度，同じソースコードを追いかけていただき，アンケートにお答えいただきます．</li>
</ul>
<li>JHotDrawに関する，簡単な説明をお読みいただきます．</li>
<li>JHotDrawの2つの機能について以下の手順を繰り返します．</li>
<ul>
<li>対象となる機能に関する説明をお読みいただきます．</li>
<li>対象となる機能に関係するソースコードを，<b>逆方向バージョン</b>のトレースデバッガを用いて追いかけていただき，アンケートにお答えいただきます．
このとき，レースデバッガの操作に要した時間をお手元で計測していただきます．</li>
<li>逆方向バージョンのトレースデバッガの「ある機能」を用いて，再度，同じソースコードを追いかけていただき，アンケートにお答えいただきます．</li>
</ul>
</ul>
<li>最後に実験全体に関してのアンケートにお答えいただきます．</li>
</ol>
<p>
取り組んでいただく課題は，ArgoUMLが課題A1と課題A2，JHotDrawが課題A3と課題A4の計4つです．課題A1, A2では順方向バージョン，課題A3, A4では逆方向バージョンのトレースデバッガを使っていただきます．<br>
こちらからお進みください．まず，EC2インスタンスへのログイン方法の説明から始めます．
</p>
 
<a href="../ec2/ConnectToEC2.html?course=A">EC2インスタンスへのログイン方法の説明へ進む</a>
</body>
View
30
■■■■■
 courseA/CourseStartA.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>実験開始の説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>実験開始の説明</h1>
<p>
いよいよ実験に入っていきます．<br>
トレースデバッガの操作に要した時間を測っていただきますので，お手元に時計をご用意ください．<br>
まず，ArgoUMLの説明をお読みいただき，ArgoUMLに関する課題A1と課題A2に取り組んでいただきます．
その後，JHotDrawの説明をお読みいただき，JHotDrawに関する課題A3と課題A4に取り組んでいただきます．
課題A1, A2では順方向バージョン，課題A3, A4では逆方向バージョンのトレースデバッガをお使いいただきます．
課題ごとに2つずつアンケートにお答えいただきます．
</p>
 
<p>
それでは以下のリンクよりお進みください．
</p>
 
<a href="ArgoUML_Forward/DescriptionArgoUML.html">ArgoUMLの説明へ進む</a>
</body>
View
34
■■■■■
 courseA/JHotDraw_Reverse/DescriptionJHotDraw.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>JHotDraw説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>JHotDrawの概要</h1>
 
<p>JHotDrawはJavaで書かれたオープンソースの2Dグラフィックスフレームワークです．</p>
<p>JHotDrawを起動すると,まず編集画面が開きます．</p>
<img src="pictures/JHotDraw-1.png", class ="image_size">
<p>編集画面上で行える操作はモードによって異なります．</p>
<p>モードの切り替えは，ツールバーのボタンをクリックすることによって行うことができます．</p>
<img src="pictures/JHotDraw-2.png", class ="image_size">
<p>例えば矩形配置モードでは，編集画面上をクリックすると，クリックした位置に矩形図形を配置することができます（矩形配置機能）．</p>
<img src="pictures/JHotDraw-3.png", class ="image_size">
<p>矩形図形を配置すると選択モードに戻ります．</p>
<p>選択モードでは，編集画面上に配置された図形をクリックすると，その図形を選択状態にすることができます（図形選択機能）．</p>
<img src="pictures/JHotDraw-4.png", class ="image_size">
<p>選択状態の図形はドラッグすることで，移動することができます（図形移動機能）．</p>
<img src="pictures/JHotDraw-5.png", class ="image_size">
<p style="margin-bottom:3em;"></p>
<a href="ProblemA3.html">次へ</a>
<p style="margin-bottom:5em;"></p>
</body>
View
courseA/JHotDraw_Reverse/pictures/JHotDraw-1.png 0 → 100644
View
courseA/JHotDraw_Reverse/pictures/JHotDraw-2.png 0 → 100644
View
courseA/JHotDraw_Reverse/pictures/JHotDraw-3.png 0 → 100644
View
courseA/JHotDraw_Reverse/pictures/JHotDraw-4.png 0 → 100644
View
courseA/JHotDraw_Reverse/pictures/JHotDraw-5.png 0 → 100644
View
34
■■■■■
 courseB/ArgoUML_Reverse/DescriptionArgoUML.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>ArgoUML説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>ArgoUMLの概要</h1>
 
<p>ArgoUMLはJavaで書かれたオープンソースのUMLエディタです．</p>
<p>ArgoUMLを起動すると,まずクラス図の編集画面が開きます．</p>
<img src="pictures/ArgoUML-1.png", class ="image_size">
<p>編集画面上で行える操作はモードによって異なります．</p>
<p>モードの切り替えは，ツールバーのボタンをクリックすることによって行うことができます．</p>
<img src="pictures/ArgoUML-2.png", class ="image_size">
<p>例えばクラス配置モードでは，編集画面上をクリックすると，クリックした位置にクラスを配置することができます（クラス配置機能）．</p>
<img src="pictures/ArgoUML-4.png", class ="image_size">
<p>クラスを配置すると選択モードに戻ります．</p>
<p>選択モードでは，編集画面上に配置されたクラスをクリックすると，そのクラスを選択状態にすることができます（選択機能）．</p>
<img src="pictures/ArgoUML-3.png", class ="image_size">
<p>選択状態のクラスは，Delキーを押すことで削除することができます（削除機能）．</p>
<img src="pictures/ArgoUML-1.png", class ="image_size">
<p style="margin-bottom:3em;"></p>
<a href="SampleA.html">次へ</a>
<p style="margin-bottom:5em;"></p>
</body>
View
courseB/ArgoUML_Reverse/pictures/ArgoUML-1.png 0 → 100644
View
courseB/ArgoUML_Reverse/pictures/ArgoUML-2.png 0 → 100644
View
courseB/ArgoUML_Reverse/pictures/ArgoUML-3.png 0 → 100644
View
courseB/ArgoUML_Reverse/pictures/ArgoUML-4.png 0 → 100644
View
62
■■■■■
 courseB/CourseDescriptionB.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>作業全体の説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>作業全体の説明</h1>
<p>
甲南大学知能情報学部のソフトウェア設計検証研究室です．<br>
この度は私共の実験にご協力頂きまして誠にありがとうございます．<br>
</p>
<p>
これから行っていただく作業は，4つの課題とアンケートへの回答です．全体の作業時間としては，5~6時間程度を想定しています．<br>
実験に入る前にAmazon EC2インスタンスにログインしていただき，実験で使用するトレースデバッガの操作の練習を行っていただきます．<br>
実験では，2つのオープンソースプログラムの4つの機能を対象に4つの課題に取り組んでいただきます．<br>
これ以降お答えいただくアンケートは実験中に8個と，最後に1つの計9個あります．
アンケートへの回答が終わるたびに作業を中断していただいて構いません．
作業は，すべてEC2インスタンスおよびWeb上で完結します．
</p>
<strong>実験は以下の流れで行います．</strong>
<ol>
<li>実験用のWebページ(本ページ)にアクセスしていただきます．</li>
<li>EC2インスタンスへのログインの方法をご説明いたします．</li>
<li>EC2インスタンスにリモートデスクトップでログインし，順方向バージョンのトレースデバッガを操作する練習を行っていただきます．なお，以下のトレースデバッガの操作はすべてEC2インスタンス上で行っていただくこととします．</li>
<li>逆方向バージョンのトレースデバッガを操作する練習を行っていただきます．</li>
<li>ここから実験に入ります．
JHotDrawとArgoUMLという2つのオープンソースソフトウェアから2つずつ機能を選んで，計4つの課題に取り組んでいただきます．</li>
<ul>
<li>JHotDrawに関する，簡単な説明をお読みいただきます．</li>
<li>JHotDrawの2つの機能について以下の手順を繰り返します．</li>
<ul>
<li>対象となる機能に関する説明をお読みいただきます．</li>
<li>対象となる機能に関係するソースコードを，<b>順方向バージョン</b>のトレースデバッガを用いて追いかけていただき，アンケートにお答えいただきます．
このとき，レースデバッガの操作に要した時間をお手元で計測していただきます．</li>
<li>逆方向バージョンのトレースデバッガの「ある機能」を用いて，再度，同じソースコードを追いかけていただき，アンケートにお答えいただきます．</li>
</ul>
<li>ArgoUMLに関する，簡単な説明をお読みいただきます．</li>
<li>ArgoUMLの2つの機能について以下の手順を繰り返します．</li>
<ul>
<li>対象となる機能に関する説明をお読みいただきます．</li>
<li>対象となる機能に関係するソースコードを，<b>逆方向バージョン</b>のトレースデバッガを用いて追いかけていただき，アンケートにお答えいただきます．
このとき，レースデバッガの操作に要した時間をお手元で計測していただきます．</li>
<li>逆方向バージョンのトレースデバッガの「ある機能」を用いて，再度，同じソースコードを追いかけていただき，アンケートにお答えいただきます．</li>
</ul>
</ul>
<li>最後に実験全体に関してのアンケートにお答えいただきます．</li>
</ol>
<p>
取り組んでいただく課題は，JHotDrawが課題B1と課題B2，ArgoUMLが課題B3と課題B4の計4つです．課題B1, B2では順方向バージョン，課題B3, B4では逆方向バージョンのトレースデバッガを使っていただきます．<br>
こちらからお進みください．まず，EC2インスタンスへのログイン方法の説明から始めます．
</p>
 
<a href="../ec2/ConnectToEC2.html?course=B">EC2インスタンスへのログイン方法の説明へ進む</a>
</body>
View
30
■■■■■
 courseB/CourseStartB.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>実験開始の説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>実験開始の説明</h1>
<p>
いよいよ実験に入っていきます．<br>
トレースデバッガの操作に要した時間を測っていただきますので，お手元に時計をご用意ください．<br>
まず，JHotDrawの説明をお読みいただき，JHotDrawに関する課題B1と課題B2に取り組んでいただきます．
その後，ArgoUMLの説明をお読みいただき，ArgoUMLに関する課題B3と課題B4に取り組んでいただきます．
課題B1, B2では順方向バージョン，課題B3, B4では逆方向バージョンのトレースデバッガをお使いいただきます．
課題ごとに2つずつアンケートにお答えいただきます．
</p>
 
<p>
それでは以下のリンクよりお進みください．
</p>
 
<a href="JHotDraw_Forward/DescriptionJHotDraw.html">JHotDrawの説明へ進む</a>
</body>
View
34
■■■■■
 courseB/JHotDraw_Forward/DescriptionJHotDraw.html 0 → 100644
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>JHotDraw説明</title>
<meta charset="UTF-8">
</head>
<style>
.image_size{
width: 800px;
height: 550px;
}
</style>
<body>
<h1>JHotDrawの概要</h1>
 
<p>JHotDrawはJavaで書かれたオープンソースの2Dグラフィックスフレームワークです．</p>
<p>JHotDrawを起動すると,まず編集画面が開きます．</p>
<img src="pictures/JHotDraw-1.png", class ="image_size">
<p>編集画面上で行える操作はモードによって異なります．</p>
<p>モードの切り替えは，ツールバーのボタンをクリックすることによって行うことができます．</p>
<img src="pictures/JHotDraw-2.png", class ="image_size">
<p>例えば矩形配置モードでは，編集画面上をクリックすると，クリックした位置に矩形図形を配置することができます（矩形配置機能）．</p>
<img src="pictures/JHotDraw-3.png", class ="image_size">
<p>矩形図形を配置すると選択モードに戻ります．</p>
<p>選択モードでは，編集画面上に配置された図形をクリックすると，その図形を選択状態にすることができます（図形選択機能）．</p>
<img src="pictures/JHotDraw-4.png", class ="image_size">
<p>選択状態の図形はドラッグすることで，移動することができます（図形移動機能）．</p>
<img src="pictures/JHotDraw-5.png", class ="image_size">
<p style="margin-bottom:3em;"></p>
<a href="ProblemA3.html">次へ</a>
<p style="margin-bottom:5em;"></p>
</body>
View
courseB/JHotDraw_Forward/pictures/JHotDraw-1.png 0 → 100644
View
courseB/JHotDraw_Forward/pictures/JHotDraw-2.png 0 → 100644
View
courseB/JHotDraw_Forward/pictures/JHotDraw-3.png 0 → 100644
View
courseB/JHotDraw_Forward/pictures/JHotDraw-4.png 0 → 100644
View
courseB/JHotDraw_Forward/pictures/JHotDraw-5.png 0 → 100644
View
75
■■■■■
 ec2/ConnectToEC2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja">
<head>
<title>EC2インスタンスへのログイン方法</title>
<meta charset="UTF-8">
<link rel = "stylesheet" type = "text/css" href = "../prettify.css">
<script type="text/javascript">
function init(param) {
var course = "A";
if (param) {
var c = getParam('course', param);
if (c) course = c;
}
var next = document.getElementById("next");
next.href = "../tools/Forward/TraceDebugger_Forward.html?course=" + course;
}
 
function getParam(name, url) {
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</head>
<body onLoad="init(location.search)">
<h1>EC2インスタンスへのログイン方法</h1>
<p>
Windows Server 2019 の実験用サーバを Amazon EC2 インスタンスとして立ち上げております．
皆様のPCからは，リモートデスクトップを用いて以下のような手順でログインしていただきます．
Mac をご使用でリモートデスクトップをお持ちでない方は，App Store から「Microsoft Remote Desktop」をインストールしてください．
以下，Windows の画面を用いて手順の説明を行います．
</p>
 
<hr>
 
<p>
<ol>
<li>
スタートメニューからWindowsアクセサリを選び，リモートデスクトップを起動します．
<div class = "image"><img src = "./images/ec2_1.jpg" class = "halfSize"></div>
</li>
<li>
接続先としてお送りしたipアドレスをご入力いただきます．
<div class = "image"><img src = "./images/ec2_2.jpg" class = "quarterSize"></div>
</li>
<li>
お送りしたユーザ名とパスワードでログインしていただきます．
<div class = "image"><img src = "./images/ec2_3.jpg" class = "quarterSize"></div>
</li>
<li>
「はい」を押します．
<div class = "image"><img src = "./images/ec2_4.jpg" class = "quarterSize"></div>
</li>
<li>
接続が成功すれば実験用サーバの画面が表示されます．
<div class = "image"><img src = "./images/ec2_5.jpg" class = "halfSize"></div>
</li>
<li>
デスクトップに配置してあるEclipseの起動アイコンをクリックし，起動確認を行います．以下のようにEclipseの画面が表示されたらオッケーです．
<div class = "image"><img src = "./images/ec2_6.jpg" class = "halfSize"></div>
</li>
<li>
作業が完了したら，スタートメニューから切断を選んで，ログアウトします．
<div class = "image"><img src = "./images/ec2_7.jpg" class = "halfSize"></div>
</li>
</ol>
</p>
 
<a id="next" href="../tools/Forward/TraceDebugger_Forward.html">順方向トレースデバッガの説明へ進む</a>
 
</body>
</html>
View
ec2/images/ec2_1.jpg 0 → 100644
View
ec2/images/ec2_2.jpg 0 → 100644
View
ec2/images/ec2_3.jpg 0 → 100644
View
ec2/images/ec2_4.jpg 0 → 100644
View
ec2/images/ec2_5.jpg 0 → 100644
View
ec2/images/ec2_6.jpg 0 → 100644
View
ec2/images/ec2_7.jpg 0 → 100644
View
25
■■■■■
 tools/Forward/TraceDebugger_Forward.html
<head>
<title>トレースデバッガ (順方向)</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" type = "text/css" href = "../../prettify.css">
<script type="text/javascript">
function init(param) {
var course = "A";
if (param) {
var c = getParam('course', param);
if (c) course = c;
}
var next = document.getElementById("next");
next.href = "../Reverse/TraceDebugger_Reverse.html?course=" + course;
}
 
function getParam(name, url) {
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</head>
<body>
<body onLoad="init(location.search)">
<h1>トレースデバッガ (順方向)</h1>
 
<hr>
<h2>説明</h2>
<div class = "image"><img src = "./images/Variable_SP_Forward_2.png" class = "threeQuartersSize"></div>
</p>
 
</p>
 
<a id="next" href="../Reverse/TraceDebugger_Reverse.html">逆方向トレースデバッガの説明へ進む</a>
 
</body>
</html>
View
29
■■■■■
 tools/Reverse/TraceDebugger_Reverse.html
<head>
<title>トレースデバッガ (逆方向)</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" type = "text/css" href = "../../prettify.css">
<script type="text/javascript">
function init(param) {
var course = "A";
if (param) {
var c = getParam('course', param);
if (c) course = c;
}
var next = document.getElementById("next");
if (course == 'A') {
next.href = "../../courseA/CourseStartA.html";
} else if (course == 'B') {
next.href = "../../courseB/CourseStartB.html";
}
}
 
function getParam(name, url) {
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</head>
<body>
<body onLoad="init(location.search)">
<h1>トレースデバッガ (逆方向)</h1>
 
<hr>
<h2>説明</h2>
「オブジェクト接近過程」ビュー上の「参照時点」をクリックすると, 参照元側のオブジェクトが参照先側のオブジェクトを参照するようになる時点に飛ぶことができます.<br>
<div class = "image"><img src = "./images/Delta_Reverse_10.png" class = "threeQuartersSize"></div>
</p>
</p>
 
<a id="next" href="../../courseA/CourseStartA.html">実験開始の説明へ進む</a>
 
</body>
</html>