-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
154 lines (130 loc) · 8.24 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.52">
<title>Scriptorium の使い方</title>
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
<link rel="manifest" href="/icon/site.webmanifest">
<link rel="mask-icon" href="/icon/safari-pinned-tab.svg" color="#8A8DA7">
<meta name="msapplication-config" content="/icon/browserconfig.xml">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="theme-color" content="#3f51b5">
<link rel="stylesheet" href="scriptorium.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GSMVXKGXXR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GSMVXKGXXR');
</script>
</head>
<body>
<header>
<br>
<nav id="nav">
<ul>
<li><a href="./index.html">戻る</a></li>
</ul>
</nav>
<div id="hmenu" onclick="toggleMenu()">
<span class="hmenu_inner_line hmenu_inner_1" id="line1"></span>
<span class="hmenu_inner_line hmenu_inner_2" id="line2"></span>
<span class="hmenu_inner_line hmenu_inner_3" id="line3"></span>
</div>
<span id="logo">Scriptorium</span>
<a class="logo-info" href="./help.html">使い方</a>
<a class="logo-info" href="https://scriptorium.chibas.net">scriptorium.chibas.net</a>
</header>
<div class="helpdoc body-font" onclick="closeMenu()">
<p><br></p>
<p>Scriptorium（スクリプトリアム）は JavaScript 言語でプログラムを書くための簡単なプログラミング環境です。
タートルグラフィックスや Processing 言語風のプログラミングの機能もついています。
<a href="http://www.utp.or.jp/book/b584555.html">書籍「１４歳からのプログラミング」（千葉 滋・東京大学出版会・2021年）</a>のために作成されました。
書籍の<a href="https://note.com/utpress/n/n5395e40cdb16">「はじめに」</a>は無料公開されています。
また<a href="https://note.com/utpress/n/ndcfcd9b27816">著者自身による書籍の紹介文</a>も公開されています。
</p>
<p>以下では使い方を簡単に説明します。
プログラム中で利用できる関数（メソッド）等は<a href="./api.html">それらの一覧</a>を見て下さい。
</p>
<h1>使い方</h1>
<img src="./window.png" width=90%>
<img src="./buttons.png" width=90%>
<h2>画面構成</h2>
<ul>
<li>エディター領域</li>
<p>動かしたいプログラムをこの四角い枠の区画（ペイン）の中に書く。</p>
<li>描画領域</li>
<p>プログラムが描く絵はこの四角い枠の区画（ペイン）の中に表示される。</p>
</ul>
<h2>主要ボタン</h2>
<ul>
<li>実行</li>
<p>エディタの中に書かれたプログラムを実行する。</p>
<li>消去</li>
<p>図が描かれる領域（ペイン）の中を白く塗りつぶして消去する。</p>
<li>再編集</li>
<p>直前に実行したプログラムを再度エディタの中にコピーして表示する。</p>
<li>新規</li>
<p>エディタの中に書かれたプログラムを消去する。</p>
</ul>
<h2>チェック欄</h2>
<ul>
<li>実行後新規編集</li>
<p>チェックされていると、プログラムの実行後にそのプログラムをエディタの中から消去する。チェックされていないと、プログラムをそのままエディタの中に残す。チェックされていても、プログラムに間違いがありエラーで実行が失敗した場合はプログラムを消去しない。</p>
</ul>
<h2>メニューボタン</h2>
<p>左上すみのメニューボタンをクリックするとプルダウンメニューが表示される。</p>
<img src="./menu.png" width=35% style="margin-left: 10%;">
<ul>
<li>× 印</li>
<p>プロダウンメニューを非表示にする。</p>
<li>使い方</li>
<p>このページを表示する。</p>
<li>プログラム例</li>
<p>プログラムの例を示したページを表示する。
プログラム例の下の「選択」ボタンをクリックすると、ページの一番下のエディター領域にプログラムがコピーされる。
実行ボタンを押せばコピーされたプログラム例を実行できる。
</p>
<li>Scratch 風エディタ</li>
<p>Scratch 言語風にブロックを組合わせて JavaScript プログラムを書くためのエディタを表示する。</p>
<p style="margin-left: 10%; margin-top: 5%; margin-bottom: 5%;"><iframe width="448" height="252" src="https://www.youtube.com/embed/7u3k1ijsSJc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<li>HTML エディタ</li>
<p>HTML ファイルの編集用のエディタを表示する。</p>
<li>文字縮小（文字拡大）</li>
<p>表示に使われる文字を小さくする（大きくする）。</p>
<li>ファイルの読み込み</li>
<p>パソコン等に保存されているファイルを選び、そのファイルの中に保存されているプログラムを読み込む。読み込んだプログラムはエディタの中に表示される。前に「ファイルへ保存」メニューで保存したプログラムを再びエディタの中に表示したいときなどに使う。</p>
<li>ファイルへ保存</li>
<p>エディタの中のプログラムをファイルに保存する。ファイル名にはこのプルダウンメニューの一番上の欄に書いた名前が使われる。とくに変更しなければ <code>untitled.js</code>。変更する場合は名前の部分をクリックして変更する。</p>
<p>ファイルの保存場所は利用しているブラウザや機器によって異なるが、普通はダウンロード・フォルダーに保存される。</p>
</ul>
<h1>本プログラミング環境について</h1>
<p>本プログラミング環境は実行中に外部のサーバと通信することはありません。このため書いたプログラムが外部に送信されることはありません。全ての情報は手元のパソコンやタブレットの中に留まります。</p>
<p>また必要なファイルを事前にすべてダウンロードしておけば、インターネット接続がなくても本プログラミング環境を利用することができます。
必要なファイルは <a href="https://github.com/chibash/scriptorium">https://github.com/chibash/scriptorium</a> からダウンロードできます。</P>
<p>ただし本プログラミング環境はページビューの測定のために Google Analytics を利用しています。したがってこのページを見たという情報が Google に送信されます。</p>
<p>本プログラミング環境は内部で <a href="https://codemirror.net/">CodeMirror</a>、<a href="https://jshint.com">JSHint</a>、そして <a href="https://developers.google.com/blockly">Blockly</a> を利用しています。</p>
<p>不具合等の問い合わせは<a href="https://www.csg.ci.i.u-tokyo.ac.jp">著者</a>へメール等であるいは @chiba_sh へ Twitter でお願いします。</p>
</div>
<footer class="body-font">
Copyright (C) 2019-2021 Shigeru Chiba.
<br>
<br>
<button class="btn-normal" onclick="document.location.href='./index.html'">戻る</button>
<button class="btn-smallscreen" onclick="document.location.href='./index.html'">戻る</button>
</footer>
<script>
function toggleMenu() {
document.getElementById('nav').classList.toggle('in')
document.getElementById('hmenu').classList.toggle('in')
}
function closeMenu() {
document.getElementById('nav').classList.remove('in')
document.getElementById('hmenu').classList.remove('in')
}
</script>
</body>
</html>