Fork: 0
nitta-lab / SpecificationSimulatorExperiments
Transfer to URL with SHA Find file
Newer
Older
SpecificationSimulatorExperiments / courseA / ST_DTRAM.html
okazakitakehiro on 9 Sep 11 KB courseA全体の完成．
Raw Blame History 
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<style>
  6. 		c1{
  7. 			color: blue;
  8. 		}
  9. 		c2{
  10. 			color: red;
  11. 		}
  12.  
  13. 	</style>
  14. 	<title>【SimpleTwitter(DTRAM)】</title>
  15. </head>
  16. <body>
  17. <h1 class="title">
  18. 	【SimpleTwitter(DTRAM) の課題】
  19. </h1>
  20. <p>
  21. 	ここでは，SimpleTwitter の DTRAM による仕様記述に関する課題に取り組んでいただきます．<br>
  22. 	以下に DTRAM で記述された SimpleTwitter のモデルを示します．こちらを適宜参照しながら課題を進めてください．
  23. </p>
  24. <hr/>
  25.  
  26. <h2>SimpleTwitter の DTRAM による記述についての説明</h2>
  27. <p>
  28. 	DTRAM では，SimpleTwitter の仕様を以下のような階層化されたリソースで表します．<br>
  29. <ul>
  30. 	<li><code>accounts</code>: アカウント全体を管理するデータベース</li>
  31. 	<li><code>accounts.{accountId}</code>: <code>accountId</code> で登録されているアカウント</li>
  32. 	<li><code>accounts.{accountId}.name</code>: <code>accountId</code> で示されたアカウントのアカウント名</li>
  33. 	<li><code>accounts.{accountId}.tweets</code>: <code>accountId</code> で示されたアカウントのツイートリスト</li>
  34. 	<li><code>accounts.{accountId}.tweets.{tid}</code>: <code>accountId</code> で示されたアカウントのツイートリストに <code>tid</code> で登録されているツイート</li>
  35. </ul>
  36.  
  37. DTRAM では，SimpleTwitter のモデルを以下のようなチャンネル単位で記述していきます．<br>
  38. アカウント登録用のイベントチャンネルを <code>Signup</code> ，<code>accountId</code> で登録されているアカウントに対してツイートを行うためのイベントチャンネルを <code>Tweet(accountId:<c1>Str</c1>)</code> として宣言しています．<br>
  39. <code>Signup</code> チャンネルでは <code>accounts</code> リソースが，メッセージ <code>signUp(accountId, name)</code> を受け取ると， リソースの状態が <code>accountDB</code> から <code>insert(accountDB, accountId, {"name": name, "tweets": nil})</code> に変わることを示しています．<code>nil</code> は空のマップやリストを表しています．<br>
  40. ここで，<code>insert()</code> 関数は，第1引数に渡された写像に対し，第2引数と第3引数の対応を追加した結果得られる写像を返す関数です．<br>
  41. また <code>{"name": name, "tweets": nil}</code> は，<code>"name"</code> と <code>"tweets"</code> をキーに持つ JSON オブジェクトを表しています．<br>
  42. <code>Tweet(accountId:<c1>Str</c1>)</code> チャンネルでは <code>accounts.{accountId}.tweets</code> リソースがメッセージ <code>tweet(contents)</code> を受け取ると，
  43. 遷移前の状態 <code>tweetList</code> が <code>append(tweetList, contents)</code> に変わることを示しています．<br>
  44. ここで，<code>append()</code> 関数は，第1引数に渡されたリストに対し，第2引数のオブジェクトを末尾に追加した結果得られるリストを返す関数です．<br>
  45. </p>
  46.  
  47. <div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
  48. 	<pre>
  49. <c1>channel</c1> Signup {
  50. 	<c1>out</c1> accounts(accountDB:<c1>Map</c1>, signUp(accountId:<c1>Str</c1>, name:<c1>Str</c1>)) = insert(accountDB, accountId, {"name": name, "tweets": nil})
  51. }
  52.  
  53. <c1>channel</c1> Tweet(accountId:<c1>Str</c1>) {
  54. 	<c1>out</c1> accounts.{accountId}.tweets(tweetList:<c1>List</c1>, tweet(contents:<c1>Str</c1>)) = append(tweetList, contents)
  55. }
  56. 	</pre>
  57. </div>
  58. <hr/>
  59.  
  60. <h2>モデルの可視化</h2>
  61. <p>
  62. 	先ほどの SimpleTwitter のモデルのリソースとチャンネルを，DTRAM のモデリングツールを使用して可視化したものを以下の図に示します．<br>
  63. </p>
  64. <div class="img-center">
  65. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM Ver SimpleTwitter architecture Visualize.png", class ="before-image-size"><br>
  66. </div>
  67. <p>
  68. 	この図がモデルの実行に依らない，リソースとチャンネルの関係を表していることに注意して下さい．<br>
  69. 	図の中央にある <code>accounts</code> リソースは <code>Signup</code> チャンネルからアカウントを登録するメッセージを受け取ります．<br>
  70. 	<code>accounts</code> リソースの子リソースである，<code>accounts.{accountId}</code> リソースはアカウントを表しています．<br>
  71. 	リソース名に含まれる <code>accountId</code> はアカウントIDを表すパスパラメータで，一意なアカウントの特定を可能にしています．<br>
  72. 	<code>accounts.{accountId}</code> リソースの子リソースである <code>accounts.{accountId}.tweets</code> リソースは <code>accounts.{accountId}</code> のツイートリストを表しており，
  73. 	<code>Tweet</code> チャンネルからツイートを行うメッセージを受け取ります．
  74. </p>
  75. <hr/>
  76.  
  77. <h2>SimpleTwitter モデルの仮想実行について</h2>
  78. <p>
  79. 	ここでは，SimpleTwitter モデルの仮想実行について説明します．この仮想実行で用いるテストケースは次の通りです．<br>
  80. <ol>
  81. 	<li>accounts にアカウント名が "Satou" という新しいアカウントをアカウントID @123 で登録します．</li>
  82. 	<li>登録したアカウント(Satou)で "Hello" というツイートを行います．</li>
  83. </ol>
  84. </p>
  85.  
  86. <h3>仮想実行の可視化:</h3>
  87. <p>
  88. 	シミュレーションツールを使用すると与えられたモデルに対して，任意の仮想実行を行うことができます．<br>
  89. 	ここでは上で示したテストケースに従って行った仮想実行を可視化したものを示していきます．まず，システムの初期状態を可視化したものが以下の図です．
  90. </p>
  91.  
  92. <div class="img-center">
  93. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 1 VerSimpleTwitter.png", class ="before-image-size"><br>
  94. </div>
  95. <p>
  96. 	初期状態では，<code>accounts</code> リソースには何のアカウントも登録されていない状態になっています．<br>
  97. 	次に，<code>accounts</code> にアカウント名が "Satou" のアカウントを登録するため，<code>accounts</code> リソースをダブルクリックします．
  98. </p>
  99.  
  100. <div class="img-center">
  101. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 2 VerSimpleTwitter.png", class ="before-image-size"><br>
  102. </div>
  103. <p>
  104. 	<strong><code>signUp</code></strong> というアカウントを登録するためのメッセージを選択します．
  105. </p>
  106.  
  107. <div class="img-center">
  108. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 3 VerSimpleTwitter.png", class ="before-image-size"><br>
  109. </div>
  110. <p>
  111. 	<code>signUp</code> メッセージのシグニチャが表示されます．<br>
  112. 	<code>accountId</code> はアカウントID，<code>name</code> はアカウント名を表します．
  113. </p>
  114.  
  115. <div class="img-center">
  116. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 4 VerSimpleTwitter.png", class ="before-image-size"><br>
  117. </div>
  118. <p>
  119. 	ここでは，<code>signUp("@123", "Satou")</code> を入力します．
  120. </p>
  121.  
  122. <div class="img-center">
  123. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 5 VerSimpleTwitter.png", class ="before-image-size"><br>
  124. </div>
  125. <p>
  126. 	次の状態に遷移し，遷移後の状態が表示されます．@123というidを持つアカウント <code>accounts.@123</code> が <code>accounts</code> の子リソースとして生成されていることがわかります．<br>
  127. 	<code>accounts.@123</code> のツイートリスト <code>accounts.@123.tweets</code> が 空のリスト(nil)，アカウント名 <code>accounts.@123.name</code> が "Satou" となっていることを確認できます．<br>
  128. 	次に，登録したアカウント <code>accounts.@123</code> でツイートを行いたいので，<code>accounts.@123.tweets</code> リソースをダブルクリックします．
  129. </p>
  130.  
  131. <div class="img-center">
  132. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 6 VerSimpleTwitter.png", class ="before-image-size"><br>
  133. </div>
  134. <p>
  135. 	メッセージを選択する画面が同様に表示されますので，ツイートを行う <strong><code>tweet</code></strong> というメッセージを選択します．
  136. </p>
  137.  
  138. <div class="img-center">
  139. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 7 VerSimpleTwitter.png", class ="before-image-size"><br>
  140. </div>
  141. <p>
  142. 	ツイート内容の入力が可能な画面が表示されますので，ここでは <code>tweet("Hello")</code> と入力して実行します．<br>
  143. </p>
  144.  
  145. <div class="img-center">
  146. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 9 VerSimpleTwitter.png", class ="before-image-size"><br>
  147. </div>
  148. <p>
  149. 	次の状態に遷移したため，Hello というツイート内容を持つツイート <code>accounts.@123.tweets.0</code> が <code>accounts.@123.tweets</code> の子リソースとしてツイートリストの0番目に生成されていることが確認できました．
  150. </p>
  151. <hr/>
  152.  
  153. <h2>
  154. 	課題概要
  155. </h2>
  156. <p>
  157. 	ここからが課題です．<br>
  158. 	本課題ではまず，上記にて説明を行った <code>SimpleTwitter</code> の仕様に，ある機能を追加した仕様を考えます．<br>
  159. 	その仕様のモデルを以下に示します．また，そのモデルの仮想実行を可視化したものをその下に示します．これらの図を見ていただいた上で，２つの設問にお答えいただきます．<br>
  160. 	設問にお答えいただく際は，必ず設問１，設問２の順番でご解答下さい．以下の図と同じものが設問のページにも記載されているのでこのまま設問のページに飛んでいただいてもかまいません．
  161. </p>
  162. <div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
  163. <pre>
  164. <c1>channel</c1> Signup {
  165. 	<c1>out</c1> accounts(accountDB:<c1>Map</c1>, signUp(accountId:<c1>Str</c1>, name:<c1>Str</c1>)) = insert(accountDB, accountId, {"name": name, "tweets": nil})
  166. }
  167.  
  168. <c1>channel</c1> Tweet(accountId:<c1>Str</c1>) {
  169. 	<c1>out</c1> accounts.{accountId}.tweets(tweetList:<c1>List</c1>, tweet(contents:<c1>Str</c1>)) = append(tweetList, contents)
  170. }
  171.  
  172. <c1>channel</c1> ChangeName(accountId:<c1>Str</c1>) {
  173. 	<c1>out</c1> accounts.{accountId}.name(prevNamr:<c1>Str</c1>, changeName(name:<c1>Str</c1>)) = name
  174. }
  175.  
  176.  
  177. </pre>
  178. </div>
  179.  
  180. <h3>1:</h3>
  181. <div class="img-center">
  182. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 1 VerSimpleTwitter.png", class ="before-image-size"><br>
  183. </div>
  184. <h3>2:</h3>
  185. <div class="img-center">
  186. 	<img src="../img/DTRAM/SimpleTwitter/ChangeName/DTRAM_kadai2_SimpleTwitter.png", class ="before-image-size"><br>
  187. </div>
  188. <h3>3:</h3>
  189. <div class="img-center">
  190. 	<img src="../img/DTRAM/SimpleTwitter/DTRAM 5 VerSimpleTwitter.png", class ="before-image-size"><br>
  191. </div>
  192. <h3>4:</h3>
  193. <div class="img-center">
  194. 	<img src="../img/DTRAM/SimpleTwitter/ChangeName/DTRAM_kadai4_SimpleTwitter.png", class ="before-image-size"><br>
  195. </div>
  196. <h3>5:</h3>
  197. <div class="img-center">
  198. 	<img src="../img/DTRAM/SimpleTwitter/ChangeName/DTRAM_1_ChangeName_VerSimpleTwitter.png", class ="before-image-size"><br>
  199. </div>
  200.  
  201. <p>
  202. 	<strong>
  203. 		<a href="https://docs.google.com/forms/d/e/1FAIpQLSf5rIUfHnzsLMLPZ_KWnsukn3HcEGBSLN-BxzRPzqszyrlj8g/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">
  204. 			課題アンケート (別タブが開きます)
  205. 		</a>
  206. 	</strong>
  207. 	<br>
  208. 	<strong>
  209. 		<a href="https://docs.google.com/forms/d/e/1FAIpQLSf8Ex1RPzMRvyUYIRkCjcIY69fI74sNXK-m4rNAoAcR6_dm4g/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">
  210. 			課題終了後の評価アンケート (別タブが開きます)
  211. 		</a>
  212. 	</strong>
  213. </p>
  214.  
  215. <hr>
  216. <br>
  217. <a href="IM_DTRAM.html">【Closing】へ</a>
  218. </body>
  219.  
  220. <style>
  221. 	.title{
  222. 		text-align: center;
  223. 	}
  224. 	.links-manual-A{
  225. 		display: flex;
  226. 		flex-direction: column;
  227. 	}
  228. 	.img-center{
  229. 		display: flex;
  230. 		justify-content: center;
  231. 		align-items: center;
  232. 	}
  233. 	.before-image-size{
  234. 		max-width: 100%;
  235. 		height: auto;
  236. 	}
  237. 	.after-image-size{
  238. 		max-width: 100%;
  239. 		height: auto;
  240. 	}
  241. </style>
  242.  
  243. </html>