SVG未読み込み
作図手順
SVGファイルを読み込んでください
この枠にドラッグ&ドロップでも読み込めます
 
教材全体の設定
用紙と方眼
方眼
用紙の外は、編集中はグレー、プレビューと教材では黒になります。
作図の置き場所
作図ぜんぶをまとめて動かす
パーツをそろえる
先にパーツを選ぶ必要はありません。ボタンを押してから、動かしたいパーツの線を クリックしてください(線の端や交点をねらうと正確です)。次にすることはカーソルの脇に出ます。 やめるときは Esc。
パーツごとの位置
数値でも動かせます。0以外にしたパーツは、名前が琥珀色になります。
線と文字の見え方
作図線
ペンで引く動き
文字(寸法・記号)は引けないので、順番が来たら現れます。 引く向きは、青い丸を押すか Alt+線の始点にしたい側をクリックで決められます。
なぞっている途中でクリックすると早送り、もう一度で引き終わります。 1つ前に戻れば、その手順をもう一度引くところから見せられます。
書き出した教材では、見る人が歯車から「ペンを出すかどうか」と速さを選べます。
説明文の帯
番号の形(①/1.)と説明文の文字の大きさは、 右のパネルの説明文のところにあります。

ネットに公開する

GitHub Pages に置いて、学生に配るURLを作ります。 公開済みの教材を開く / 設置と鍵 はじめの設定(1回だけ)
置き場所(ユーザー名 / リポジトリ名)
/
アクセストークン(この端末にだけ保存されます)
一覧の合言葉(教員用。教材そのものには掛かりません)
教材の一覧ページを開くための合言葉です。使う人みんなで共通のもので、 「設定の受け渡し」の1行にも含まれます。
作成者名(一覧に出る名前)

使い方ガイド

スライド資料 実演を見る

Illustrator で描いた作図を読み込み、どの線をどの順番で引くかを決めると、 学生のスマホで見られる作図手順の教材ができあがります。全体は 5 つの段どりです。

1
作図を読み込む
SVG ファイルをこの画面にドラッグ&ドロップ。 左上のからでも開けます。
2
線を手順に分ける
左で手順を選び、作図の線をクリック。 その手順で引く線がになります。
3
説明文を書く
右の欄に、その手順の説明を。 文字をドラッグするとマーカーが引けます。
4
見せ方を決める
細かいところはズーム設定で寄る。 ペンでなぞる動きも付けられます。
5
見せる・配る
で授業用に全画面。 教材を押すと配布用の HTML ができます。

まずこれだけ覚えれば動かせます

線をクリック

いま選んでいる手順に入れる。もう一度クリックで外す。 細い線は少し離れていても拾います(当たりの広さは下のバーで調整)。

ドラッグで囲む

囲んだ線をまとめて入れる。Ctrl を押しながらならまとめて外す

連続割り当て

入れておくと、線を 1 本入れるたびに次の手順へ自動で進みます。 最初にざっと分けるとき便利です。

手順を送る

左パネルを押しに行かなくても、矢印キーで前後の手順に移れます。

右クリック

押したその場に小さなパネルが出ます。道具の切り替え・ズーム設定・ その線の割り当てなど。手順の一覧の上でも、見せている最中でも出ます。

Ctrl+Z

やり直しがききます。思い切って触って大丈夫です。

Shift+クリック 重なった線

上に別の線が乗っていると、ふつうに押しても下の線は取れません。 同じところを Shift+クリックすると、2 本目・3 本目…と下へ降りていきます。 右クリックの小さなパネルにも、重なっている線がそのまま並びます。

残った線をさがす

上の「未割り当て ○」を押すと、まだどの手順にも入っていない線へ 1 本ずつ寄っていきます。全体に戻すのは 0

1 本の線を引くのは 1 か所だけです。 すでにどこかの手順に入っている線を、別の手順で押すと、そちらへ移ります (前の手順からは外れます)。移したときは下の帯に琥珀色で出ますので、 そのつもりが無ければ Ctrl+Z で戻してください。 なお「前に引いた線をもう一度出す」手順は例外で、先にその印を付けてから線を入れれば、 元の手順はそのまま残ります。
迷ったら 上の プレビューを押すと、学生の画面と同じ見え方になります。 Esc で編集に戻ります。