Skip to content

Latest commit

 

History

130 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Typa(タイパ)

小学生が Chromebook で使う、タイピング学習アプリ。 ローマ字入力の基礎から、コピー・貼り付けなどのショートカットまでを、 「どのキーを どの指で 押すか」を見ながら練習できます。

Typa は単体で完結するアプリです。 通信は一切せず、外部サイトへのリンクも、 記録を送り出すしくみも持ちません。れんしゅうの記録・レベル・バッジは すべてその端末の中だけにたまります。

れんしゅうの記録は、GIGA山の学習アプリ共通の形式 (学習ログ study.v1)でも同じ端末に残ります。 これも保存だけで、送信はしません。

https://typa.giga-school.com/

このアプリが大事にしていること

0. ひらいたら、もう打てる

Typa をひらいた画面が、そのまま打つ画面です。 ホーム画面はありません。ボタンも押しません。キーを叩けば練習が始まります。

ひらく → 打つ            ← 0タップ

何が出るかは、その子にいまいちばん要るものをアプリが決めます。 選ばせません。 選ぶ画面を1枚はさむだけで、「じゃあ今度でいいか」になる子がいます。

じゅんばん 出るもの なぜそこか
1 きょうのふくしゅう これだけが「きょうやらないと効きめが落ちる」ものだからです
2 とちゅうでやめたステージのつづき 打ったぶんの上に積みます
3 まだ★3つになっていないいちばんさいしょのステージ ならびのとおりに進みます
4 そのさき(ぜんぶ★3つのとき) もう覚えたので、はやく・見ないで打つほうへ

ふくしゅうを先にするのは、日づけで決まるのがふくしゅうだけだからです。 とちゅうのひとまわりは、あしたつづきを打ってもまったく同じ結果になります (打ったぶんは消えません)。時間の決まっているほうを先に出します。

えらぶ・きろく・せっていは、下のバーからその下の階層に入ります。 以前ホーム画面にぜんぶ並べていた情報は、それぞれの階層に分けました (→「画面の構成と「もどる」操作」)。

0-2. 10秒でも、逆に何十分でも。「はじまり」も「おわり」も決めない

タイピングアプリの多くはドリルの形をしています。ステージを最後まで打ち切って はじめて結果が出て、★がつき、クリアになる。つまり **「まとまった時間があるときにしかやれない」**アプリです。

けれど子どもがタイピングを触れるのは、たいてい授業と授業のあいだ、 朝の会の前、給食を待っているあいだの、数十秒です。 そこで「最後までやらないと何も残らない」と分かっていれば、 子どもは合理的に「今日はやめておこう」を選びます。 続かない原因は やる気ではなく、アプリの決まりのほうにあります。

そこで Typa は、ドリルの枠そのものを外しました。

ふつうのタイピングアプリ Typa
はじめかた コース→ステージを選んでスタート ひらいた画面がもう打つ画面。選ばない
おわりかた 決まった問題数を打ち切るまで終われない いつでもやめられる(「やめる」がいつも画面にある)
途中でやめると 記録されない・★がつかない 打ったぶんはそのまま残る
つぎに開くと またはじめから 止めたお題のつづきから
ステージの完了 1回で最後まで通したとき 積み上がって1周ぶんに届いたとき

打ったお題の数はステージごとにたまっていき、 ステージの問題数に届いた時点で「ひとまわり」になります。 そこで★がつき、ふくしゅうの日が決まります。

3問だけ打ってやめても、その3問は消えません。 5回に分けてひとまわりしても、1回でひとまわりしても、結果はまったく同じです。 時間のある子とない子で、もらえるものが変わりません。

ひとまわりしても練習は止まりません。1.6びょうの短いお祝いが出て、 そのままつぎの周に入ります。ここで「おわり」の画面をはさむと、 そこでやめる気持ちになってしまい、「あと30びょうだけ」ができなくなるからです。

★3つでひとまわりできたときだけ、その場で知らせます。 お祝いのしるしが金色にかわり、★3つと出ます(2.4びょうで消えます)。 ★が結果画面でしか見えないと、いちばんうまく打てたしゅんかんに何もおきず、 子どもは「やめる」を押すまでそれを知りません。

そして★3つになったステージは、その場でつぎのステージに入れかわります。 結果画面ははさみません。お題とステージ名だけがかわって、そのまま 打ちつづけられます。入れかわるのはお題の切れ目なので、打ちかけのことばが とりあげられることはありません。ここまでの記録・★・けいけんちは、 その場で前のステージのものとして残ります (→「★3つになったら、その場でつぎのステージに入れかわります」)。

打っているとちゅうで「これじゃない」と思ったら、画面の左上のステージ名 (ホームポジション ① ▾かえる)をそのまま押せばステージ一覧に移れます。 下のバーまで目を移さずに変えられる、いちばん短い道です。

やめるときに「ほんとうにやめますか?」も聞きません。 以前2回確認していたのは、やめると記録が消えたからです。 消えなくなった以上、引き止める理由がありません。 止めにくいことが、そのまま「じゃあ今日はやめておこう」になります。

タブを閉じても大丈夫です。 ページが閉じられる直前(pagehide)に、 そこまでのぶんを保存します(js/play.jsbindLeaveGuard())。

いっぽうで、みじかい回は「最高記録」にはしません。 3打で正確さ100%を最高記録にしてしまうと、 すぐやめるほど得をするアプリになるからです(20打から記録の対象になります)。 ひとまわりのすすみ・けいけんち・にがての集計には、1打目から数えます。

1. 「どの指で押すか」がいつも見えている

タイピングが速くならないいちばんの原因は、人差し指2本だけで打つ癖です。 一度ついた癖は、あとから直すほうがずっと大変です。

そこで Typa は、次に押すキーを表示するだけでなく、 そのキーを担当する指を4つの見え方で同時に伝えます。

  1. 画面のキーボードのキーが光る
  2. 上から見た両手のイラストで、その指が光って前にのびる
  3. 指ごとの色(キーとイラストで同じ色)
  4. 「みぎの ひとさしゆびで」ということば

キーボードは「キーがどこにあるか」は教えてくれますが、 どの指をのばすかまでは教えてくれません。人差し指2本で打つ癖は、 まさにそこでつきます。手のイラストは、その1つだけのために置いています。

手のイラストは、画面のキーボードのすぐ下に上下でかさねています。 横に並べると、「次のキーはどこ」と「そのキーはどの指」を見くらべるたびに 目が画面の左右を行き来してしまいます。打ちながら目を大きく動かすのは、 タイピングの練習でいちばん避けたいことです。 上下にかさねると、指先がホームポジションのキーのまっすぐ下に来るので、 目はすこし下を見るだけですみます (画面のキーボードは横60マスのグリッドで組んでいて、 手のイラストも同じ60マスの座標で描いているので、 画面の幅がいくつでも指先とキーはぴったりそろいます)。

イラストの指先には A S D F / J K L ; と書いてあり、 「この指はこのキー」を目でつなげられます。 指はキーと同じ指の色でうすくぬってあるので、 ことばを読まなくても「この色のキーはこの指」がつながります。 光る指は色を変えるだけでなく太い縁取りがついて少し前にのびるので、 色の違いが見えにくい児童でも、どれが光っているか形で分かります。 シフトが必要なキーでは、打つ手と反対の小指もいっしょに光ります (片手でシフトを押す癖をつけないためです)。

手のイラストは、ヒントのつよさを「ばしょだけ」まで下げると いっしょに消えます(指の色分けと ひとくみだからです)。 「せってい → 手の イラストを 出す」で単独でも切れます。

打ち間違えても先へは進みません。正しい指で打ち直すところまでが1打です。 ただし同じお題で4回まちがえると「とばす」ボタンが出ます。 1つのキーの前で手が止まりつづけないための逃げ道です。

光らせるのは 打つはずだった指 です。打ったキーで光らせると、 まちがえたときに「まちがった指」をほめることになってしまいます。

2. ヒントは、なれてきたらすこしずつ消す

画面のキーボードをずっと出していると、こんどは 「画面を見て打つ」癖がかたまります。手もとを見ないようにするには、 なれるにつれてヒントをすこしずつ消していくのがいちばんの近道です。

つよさ 見えるもの
ぜんぶ 見える キーボード+指の色+ローマ字のヒント
ゆびの 色だけ ローマ字のヒントを消す
ばしょだけ キーの文字も指の色も消す。光る位置と F・J のでっぱりは残す
なにも 出ない 画面のキーボードを出さない
じどう おぼえぐあいに合わせて、練習をはじめるときに決める

どのつよさでも「つぎは D を みぎの ひとさしゆびで」のことばは消えません。 消えるのは絵だけです。「色だけにたよらない」という約束をここでも守ります。

つよさをスイッチとしてもう1つ足すのではなく、assist選ぶところにして、 選んだら既存の4つのスイッチ(画面にキーボードを出す/キーに文字を書く/ 指を色で分ける/ローマ字のヒントを出す)を書きかえます (js/store.jsASSIST_LEVELSsetAssist())。読む道が1つになるので、 設定どうしが食いちがうことがありません。 手でスイッチをさわったときは「じぶんで」にもどります。

自動では下げません。 ★3つでよくできたとき、結果画面に 「めかくしで やってみる」を出すだけです。子どもの画面が黙って変わるのは 混乱のもとだからです。「じどう」を選んだときも、 ★3つを1回もとっていないステージでは「ばしょだけ」以上にしません。 まだできていないところで画面を消しても、ただこまるだけです。

3. 学校の Chromebook と同じキーボードを出す

画面のキーボードは、日本語配列(JIS)の Chromebook をそのまま写しています。

  • Enter は縦2段のかぎ形(JIS のかたち)
  • Caps Lock の位置にあるのは けんさくキー
  • いちばん上の列は、ファンクションキーではなく ブラウザの操作キー(もどる・すすむ・ぜんがめん…)
  • スペースの左右に 英数 / かな
  • 数字の段のいちばん左は かな英数キー。その分「1」は Q のななめ左上にずれます(けすキーは JIS どおりほかのキーと同じ幅)
  • FJ のでっぱりを画面でも表現

数字の段のずれは、見た目だけの話ではありません。ここが本物とちがうと、 画面の「1」を見た子は手もとの Q のまっすぐ上をさがします。 キーボードは 1行を「よこ15マス」で組んでいるので(js/keyboard.js が 60マスのグリッドに4倍で置きます)、キーを1つ足したぶんは どこかを1マス縮めて合わせます。

手もとと画面が同じ形なので、視線を往復させても迷いません。 外づけキーボードなどのために、英語配列(US)にも切り替えられます。

キーボードは画面の幅いっぱいまで大きく出します。打つ画面だけは ほかの画面の 1080px のわくを外し、画面をはかって 「下部バーの上までに収まるいちばん大きいサイズ」を選びます (js/play.jsfitKeyboard)。決めうちの数字にしないのは、 お題の文の長さ・「文字を大きくする」の設定・端末のたてよこで 入る大きさが変わるからです。打ちながらスクロールはできないので、 キーボードと手の絵がぜんぶ見えていることを先に決めて、 そのうえでいちばん大きくします。 大きさは1回のれんしゅうのあいだ変わりません (そのステージでいちばん場所をとるお題ではかるので、 お題が変わってもキーボードが動きません)。

指の色分けは、色のこさだけにたよりません。 キーの下のふちを指の色で太く引くので、同じ指のキーが 同じ色の線でつながって見えます。次に押すキーも、 指の色分けを出しているあいだはその指の色で光るので、 手のイラストの光る指と色がそろいます。

4. 楽しいけれど、気が散らない

ゲームらしさは「色・形・ほんの少しの動き」だけで作り、 キラキラした装飾・絵文字・にぎやかな背景は置いていません。 画面の中でいちばん目立つのは、いつもお題の文字です。

  • アイコンはすべて自前の SVG(絵文字を使わない)
  • アイコンには必ずことばのラベルを添える
  • 文字は UD フォントを優先、行間広め、「文字を大きくする」設定あり
  • ライト/ダークの両方に対応
  • 「動きを減らす」設定の端末ではアニメーションを止める
  • タップできるところは 44px 以上

打つと、ちびキャラが「はたらく」

お題のよこに小さなキャラクターがいて、打つとその子の仕事が進みます。 「リズム天国」のように、自分の1打がすぐ何かを動かす手ごたえをつくるためです。 うまくなる前に「打つのが楽しい」が先に来ると、 スキマ時間にもう一度ひらいてもらえます。

できごと 呼ぶもの うごき
1打 正しく打てた tap() 仕事の動作を1回(左右の手をこうごに使います)
お題を1つ打ちきった done() よろこんで、できあがったものが1つ積み上がる
打ちまちがえた miss() しごとをしくじってあわてる。目が > < になる
れんぞく10打ごと combo() 大きくジャンプ(山は増えません)
ひとまわり cheer() 積み上げたものをぜんぶおさめて大よろこび。山は空にもどる

仕事は3つあります。

しごと 打つと 積み上がるもの
かいしゃいん パソコンを打つ しょるい
シェフ フライパンをあおる(火がゆれ、具材がはねる) りょうり
大工 かなづちをふり下ろす(火花が出る) くぎ

きほんは 「おまかせ」=くじ引きです(せってい → だれといっしょにはたらく?)。 3つ作ったのに、いつも同じ1つしか出てこないのでは作ったぶんがむだになります。 ドリルがひとまわり終わるごとに引きなおすので、つづけて打つほど いろいろなキャラクターに会えます(Buddy.reroll())。 じぶんで決めたい子は、せっていでしごとを選べば固定できます。

抽選のタイミングは2つだけです。

いつ すること
れんしゅうを はじめるとき くじを引いて、その子を出す(Buddy.render({ job: 'random' })
ひとまわりできたとき 大よろこびが終わってから(1.8びょう後)くじを引きなおす

すぐに入れかえないのは、ひとまわりの瞬間が 積み上げたものをおさめて大よろこびしているところだからです。 そこで絵を組みなおすと、いちばんうれしい動きが途中で切られます。 前に出ていた子はくじから外すので、2回つづけて同じ子にはなりません。

「お題1つ = 成果物1つ」「ひとまわり = 出荷」なので、 画面のよこの山が、そのまま『ひとまわりまであと何問か』の絵になります。 数字を読まなくても、どれだけやったかが目で分かります。

イラストの素材は1つも使わず、js/buddy.js の中で SVG を組み立てています (外部ファイル・CDN はこのアプリに1つもありません)。

なめらかに動かすためにしていること

速く打つ子は1びょうに5〜8回この処理を呼びます。ふつうに作ると 前の動きが途中で切られて、カクカクした点滅に見えます。4つのことをしています。

  1. 動きごとに別の <g> を持つ — 息づかい/よろこび/かたむき/うで/あたまを それぞれ別のグループにして、1つのグループに2つの動きを重ねません。 取りあいが起きないので、切りかえでとびません。
  2. composite: 'add'(足しあわせ) — 1打の動きを「いまの姿に足す」形で動かします。 前の動きの途中でも打ち消さず、2つが足されてつながります。 はじめと終わりを 0 にしてあるので、何回重ねてももとの姿からずれません。 結果として、速く打つほど深く前かがみになり、手を止めるとすっと戻ります。
  3. 待機の動きを止めない — 息づかいとまばたきは iterations: Infinity で回しつづけ、 一度も止めません。1打の動きはその上に足されるだけです。
  4. CSS の class の付けはずしを使わない — class で動かすと、同じ class を付け直すために いったん描きなおす(リフロー)ことになり、そこで1こまとびます。 Web Animations(el.animate)は何本でも重ねられるので、その細工がいりません。

表情も差しかえではなく、3つの顔(ふつう・うれしい・こまった)を重ねておいて 濃さを行き来させます。目や口の形を書きかえるとその瞬間パッと変わって見えますが、 濃さなら表情がすっと移ります。

落とし穴: SVG の要素に transform 属性(置き場所)と CSS の transform(動き)を 両方つけると、CSS が属性を上書きして絵が左上へとんでいきます。 置き場所は外側の <g> に逃がします(シェフの炎がこれで消えていました)。 また、その場で大きくなるもの(キラキラなど)は transform-box: fill-box にします。 view-box のままだと viewBox の中心(160,115)が拡大の中心になり、 小さいときに画面の真ん中へ引っぱられて見えます。

ここは画面の中でいちばん目立ってはいけないところです。そこで、

  • 大きさはひかえめ。お題の文字と重なる場所には置きません
  • 1打の動きは 0.2秒ほどですぐ戻ります
  • キャラクターの色は決めうちです(まわりの色につられて顔色が変わらないように)

うるさければ「せってい → キャラクターを 出す」で消せます。 「動きを減らす」設定の端末ではアニメーションが止まりますが、 顔の形は変わるので、当たり・はずれはそのまま伝わります。

5. ローマ字は「習ったやり方」でそのまま打てる

ローマ字には正解が複数あります。学年や教科書で習うやり方も違います。

かな 受け付ける打ち方
si shi ci
じゃ zya ja jya
ちょ tyo cho cyo
hu fu
次の子音を2回(kitte)/ xtu ltu xtsu ltsu
nn n' xn/次が子音なら n 1回(kanji

ヒントにはいちばん基本の打ち方だけを出すので、画面は迷いません。 アプリの中にローマ字ひょう(せってい →「キーボード」→「ローマ字ひょうを 見る」)があり、 受け付ける打ち方をその場で確かめられます。 けっか画面で「ローマ字のきまり」につまずいていたときも、そこから直接ひらけます。

語尾の「ん」は nn が必要です。 これは意地悪ではなく、本物の IME と同じ動きです。 nihon と打つと IME では「にほn」のままになってしまうため、 「ん は n を2回」を最初から正しい習慣として身につけます。 専用のステージ(ローマ字 → 「ん の うちかた」)も用意しています。

6. ショートカットは「おぼえる」ではなく「やってみる」

ショートカットのステージには、本物の入力欄が2つあります。 児童は実際に 選んで・コピーして・貼り付けて・元に戻します。 合格の判定は「キーを押したか」ではなく、やった結果が正しいかです。

ブラウザの機能が先に動いてしまうキー(Ctrl+S 保存・Ctrl+F 検索など)だけは、 ページ側で止めてキーの組み合わせを見ています。

7. つづける理由が、アプリの中にある

外部のポイントやランキングに頼らず、続きたくなる手ごたえをアプリの中で作ります

しくみ 中身
けいけんち・レベル 正しく打てた数がそのまま経験値。レベルが上がると「ひよこ タイパー」から「でんせつの タイパー」まで呼び名が変わります
バッジ(24種) 「ノーミス」「3日つづけた」「はやさ4.0」「ローマ字マスター」など。条件はすべて数で決まり、一度もらったら消えません。ぜんぶ★3つのあとは「そのさきへ」「3だん」「オール 3だん」がつづきます
れんぞく日数 きょう練習すると連続日数がのびます。直近4週間のカレンダーつき
れんぞく(コンボ) 連続で正しく打てた数を練習中に表示。10打ごとに短い音でほめます

けいけんちでいちばん大きいのは打鍵数と正確さで、速さではありません。 ゆっくりていねいに打つ児童ほどよく伸びるようにしています。


できること

数で見るとこうなります。

中身
コース 5コース・32ステージ(ゆびのばしょ 8/ローマ字 11/ことば 5/文 4/ショートカット 4)
ステージごとに 0〜3つ。速さではなく正確さでつき(★3つ=98%以上、またはミス1かいまで)、一度ついたら下がりません
つぎへすすむ ★3つになると、その場でつぎのステージに入れかわります。けっか画面ははさみません
ふくしゅう ★2つ以上でひとまわりできると 1→3→7→14→30日 と間をのばして戻ってきます
にがて とっくん それまでのミスからその場で組み立てる、最大 16問(90びょうくらい)のドリル
チャレンジ 30/60/120びょう × ことば/文/アルファベット の9通り。組み合わせごとに最高記録
だん ぜんぶ★3つのあとのはしご。1だん 2.0打/びょう・2だん 3.0・3だん 4.0を、それぞれヒントを1段消したままで
ヒントのつよさ ぜんぶ見える/ゆびの色だけ/ばしょだけ/なにも出ない/じどう の5段階
キーボード 日本語配列(JIS)/英語配列(US)。画面のキーボードと手のイラストで「どの指か」を見せます
ごほうび けいけんち・レベル(ひよこ タイパー〜でんせつの タイパー)・バッジ24種・れんぞく日数・打つとはたらくちびキャラ3種
記録 すべて端末の localStorage。書き出し・読みこみができます。通信のコードは1行もありません

画面のならびはこうです。

うつ(ひらいたところ)─ けっか
えらぶ ─ コースから えらぶ ─ コース ─ ステージ
       ├ チャレンジ(30/60/120びょう)
       ├ にがて とっくん
       ├ きょうの ようす・きろく(きろくタブへ)
       ├ つづきから(いま やっているところ・そのさき)
       └ そろそろ ふくしゅう(日が来ているときだけ)
きろく ─[きょう][にがて][たからもの][あゆみ]─ バッジ
せってい ─[ヒント][みため][キーボード][データ]
         ├ ローマ字ひょう([キーボード]から)
         └ きろくを もちだす([データ]から)

ステージの画面は自分から終わりません。ひとまわりするとお祝いを出して そのまま次の周に入ります。★3つのときだけは、けっか画面をはさまずに つぎのステージへ入れかわって、そのまま打ちつづけます。 「やめる」「もどる」「端末の戻る」「端のスワイプ」の どれでも、その場でけっか画面になります(どれも同じ1つの動きです)。

チャレンジ(時間ぎめ)

30・60・120びょうのあいだに何打できるかを競います。 お題は「ことば」「文」「アルファベット」から選べ、時間内は次々に出続けます。 まちがえると先へ進まないので、あわてず正確に打つほうがスコアが伸びます。 組み合わせごとに最高記録が残ります。

にがて とっくん

これまでの練習から、その子だけのお題をその場で作ります

同じキーを4回打つ練習(ffff)だけでは弱く、実際のつまずきは キーのつなぎ目にたキーの取りちがえで起きます。そこで順に組み立てます。

入れるもの お題の形
取りちがえたくみあわせ dfdf fdfd(交ごに打つと「区べつ」がつく)
まちがえるキー tttttftf(ホームポジションへ戻る往復)
手がとまるキー tftf のみ(打てているので反復は要らない、つなぎ目だけ)
最後に ぜんぶ混ぜたもの2問

最大16問(90びょうくらい)。「D と K の とりちがえ を あつめました」のように、 何を集めたかをことばで出します。キーの並びだけでは分かりません。

結果画面と「きろく」からいつでも呼び出せます。

そろそろ ふくしゅう

★3にしたステージは、そのままだと二度と出てきません。 けれど打ちかたは、使わないとわすれます。

そこで、うまくできたステージほど間をのばしながらもう一度よびもどします。

はこ つぎのふくしゅう
1 1日後
2 3日後
3 7日後
4 14日後
5 30日後

★2つ(正かくさ92%)以上でつぎのはこへ進み、それ未満ならはこ1にもどして あすまた出します。ここでも速さは見ません。

日が来たふくしゅうは、ひらいた画面にそのまま出ます。 スペースキーも「うつ」も、まずここへ連れていきます。 ボタンをさがす必要はありません(→「ひらいたら、もう打てる」)。

2つ目からはえらぶの画面に「そろそろ ふくしゅう」としてならびます。 何もなければカードごと出ません。わざとひかえめな見た目にしています。 大きなボタンが2つあると、どちらを押せばいいかまよいます。

日づけは端末の時計で数えます(js/store.jslocalDay())。 1日ずれても画面を見て気づけないので、node tools/check-review.js で 月またぎ・うるう年までまとめて確かめています。

そのさき ― ぜんぶ★3つになったあと

ぜんぶのステージが★3つになった子は、どのキーをどの指で打つかをもう知っています。 そこで★をながめつづけても、もう何もおきません。★は正確さの物さしなので、 上限に当たったらそれ以上のびないからです。

のこっているのは2つだけです。

   おぼえる          わすれない            そのさき
  (★・正かくさ) →(ふくしゅう)  →  (見ないで打つ・はやく打つ)

この2つを1本のはしごにしたのが「だん」です。

だん ヒント はやさ
1だん ゆびの 色だけ(ローマ字のヒントを消す) 2.0 打/びょう
2だん ばしょだけ(キーの文字も指の色も消す) 3.0 打/びょう
3だん なにも 出ない(キーボードを出さない) 4.0 打/びょう

両方そろってはじめて上がります。 ひとまわりを★3つでできたときだけ数えます。

なぜ「はやさだけ」のはしごにしないのか

はやさだけで決めると、画面のキーボードを見たまま速い子がいちばん上に立ちます。 それはこのアプリが目ざしているところの逆です。だんは ヒントを1つ消したままで出したはやさでしか上がらないので、 「見ないで打つ」を通らずに上へは行けません。

なぜ★3つが要るのか

だんはひとまわりの★が3つのときだけ上がります。これがないと 「まちがえても速く打つほどよい」になり、★を正確さで決めている意味がなくなります。 **正確さが先、はやさはその上。**この順番はここでも変えません。

画面が黙って変わることはありません

だんを上げるにはヒントを下げる必要がありますが、アプリが勝手に下げることはしません (→「ヒントは、なれてきたらすこしずつ消す」)。 けっか画面が「1だんは『ゆびの 色だけ』で打てたらです」と出し、 押すとその回だけヒントを下げてやってみられます。せっていは書きかえません。

はやさのめやすは、そのさきに入ってからしか画面に出しません。 まだ★をあつめている子に速さの目標を見せると、正確さより速さを追いかけます。

つぎに出るステージ

そのさきでは、いちばんだんの低いステージが出ます。同じなら長くさわっていないほうです。 ぜんぶ3だんになったら、時間ぎめの**チャレンジ(60びょう/文)**をすすめます。 ここから先は本番と同じ、「文をどれだけ打てるか」だけになります。

だんは★と同じで下がりません。打鍵を数えないショートカットにはだんはつきません (はやさをはかれないためです)。

にがてキーのヒートマップ

「きろく」タブに、本物と同じ並びのキーボードを出し、 まちがえた回数を色の濃さで重ねます。 どの段・どの指が弱いかが、ことばの説明より先に目で分かります。

見かたは2つあり、切り替えられます。

見かた 何が見えるか
まちがえた かず ミスの多いキーほど濃く
おぼえぐあい まだ手がおぼえていないキーほど濃く

「まちがえないけれど、手がとまるキー」

タイピングで本当に身につけたいのは見ないで打てることです。 ところが「まちがえた数」だけを見ていると、

まちがえないが、いつも1びょう さがしているキー

がまったく見えません。この子はまだ画面を見て打っています。 ミスは0なので、これまでのにがて集計には一度も出てきませんでした。

そこで打つまでにかかった時間も数え、「正しさ」と「はやさ」を あわせて「おぼえぐあい」にします(正しさ6割・はやさ4割)。 「きろく」タブに「まだ 手が とまる キー」として出ます。

数えてよい1打かどうかは、きびしく見ます。 これをまぜると、にがての一覧がでたらめになるからです。

数えない1打 なぜ
お題の1文字目 前の時間はお題を読んでいた時間
まちがえたすぐあと 打ち直しは「さがす時間」ではない
画面のキーをタップ 指をはこぶ時間で、タイピングではない
ほかの画面からもどった直後 時計をつけ直すので、にせのみじかい時間になる
3びょうより長いとき キーボードから手をはなしていた

正解が複数あるローマ字(si / shi)では、実際に押したキーで数えます。 手が見つけたキーで数えないと意味がありません。

数が足りないキー(8打未満)は「まだ わからない」と出し、 にがてとは別の見た目にします。2回打っただけのキーを にがてと言い切るのはまちがいです。

打鍵ごとの生の記録は保存しません。集計だけを直近60回ぶん残します (300回ぶんで約240KB)。

けっか画面は「つぎの一手」がわかる

数字だけ出しても、次に何をすればよいかは分かりません。そこで2つ足しました。

どこで手がとまったか。 1打ずつのかかった時間を棒グラフで出します。 よこは時こくではなく打った順番です。時こくにすると、1回の4びょうの 手止まりでほかのぜんぶがつぶれて見えなくなります。 ミスは色だけでなく(下にのびるしるし)でも分けます。 グラフだけでは2年生に読めないので、下にかならず 「ふだんは0.3びょうに1打。いちばん止まったのは K のところで1.4びょう」 とことばのまとめをつけます。

「つぎは これを やろう」を1つだけ。 出口をいくつも並べると、 どれを押せばいいかまよいます。次の順でいちばん学びになるものを1つ選び、 なぜそれなのかを一文そえます。

  1. きょうのふくしゅう(日が来ていて、いま打ったステージとは別のとき)
  2. にがて とっくん(にがてがはっきりしていて、この回の正かくさが 92%未満のとき)
  3. ローマ字のきまり(はっきりつまずいているとき。そのきまりのステージへ)
  4. そのさきの「だん」(ぜんぶ★3つになった子だけ)
  5. めかくし(ステージも今回も★3つで、まだヒントが「なにも 出ない」まで下がっていないとき)
  6. つぎのステージ/もう1かい(★2つ以上でつぎへ、★3つ未満ならもう1かい)

順に見ていって、最初に当てはまったもの1つだけを出します (js/app.jsrecommend())。 結果画面は「通りみち」なので、このボタンも履歴を置きかえます

ローマ字で つまずくところ

「d が にがて」より「ちいさい つ が にがて」のほうが、 つぎに何をすればよいかがはっきりします。 ローマ字のつまずきは、キーの問題ではなくきまりの問題だからです。

ローマ字エンジンが、かたまりを作るときに「っ」「ん」「拗音」「濁音」「行」の ふだをつけます(js/romaji.jsbuildChunks)。 そこが「どのきまりか」をすでに知っているただ1つの場所で、 あとからかなを見て引きなおす作りにすると、いつかかならず食いちがいます。

「きろく」タブに「ちいさい つ … 10かいに 3かい まちがえます」のように出し、 そのきまりのステージへ直接とべます。回数ではなくわりあいで見ます。 回数で見ると、よく出てくるきまりほどにがてに見えてしまいます。


画面の構成と「もどる」操作

入口が打つ画面で、そのほかはすべてその下の階層です。

うつ(ひらいたところ。もう打てる)
 └ けっか                        ← やめると出る。もどると また打つ画面へ
えらぶ
 ├ コースから えらぶ ─ コース ─ ステージ
 ├ チャレンジ
 ├ にがて とっくん
 ├ きょうの ようす・きろく
 ├ つづきから(いま やっているところ)
 └ そろそろ ふくしゅう
きろく                           ← 上に「いまのじぶん」、下に4つのひきだし
 ├[きょう][にがて][たからもの][あゆみ]
 └ バッジ
せってい                         ← 4つのひきだし
 ├[ヒント][みため][キーボード][データ]
 ├ ローマ字ひょう
 └ きろくを もちだす

以前は「ホーム」画面に、きょうのようす・レベル・つづきから・ふくしゅう・ とくべつれんしゅう・コース一覧・最高記録をぜんぶ縦に並べていました。 ひらいて最初に見る画面が、アプリでいちばん長い画面だったということです。 打ちはじめるまでに読むものが多すぎました。

いまはそれを分けています。

もとホームにあったもの いまの場所
つづきから/すぐはじめる 打つ画面そのもの(ひらけばもう始まっている)
コース一覧 えらぶ → コースから えらぶ
チャレンジ・にがて とっくん えらぶ(1行ずつ)
そろそろ ふくしゅう えらぶ(あるときだけ出ます)
きょうのようす・レベル・れんぞく日数・最高記録 きろく

「えらぶ」は行き先を並べるだけの画面です。 1行に1つの行き先だけを置き、 中身はそれぞれの下の階層に分けています。 打つ画面から階層に上がる最短の道は、左上のステージ名(▾かえる)です。

きろく・せっていは「ひきだし」に分ける

集められるデータが増えるほど、きろく画面は長くなりました。 最後にはカード12枚の縦並びになり、 ひらいた児童がどこを見ればいいのかわからない画面になっていました。 数が多いことが問題ではなく、ぜんぶ並んでいることが問題です。

そこで3段の階層にしました。

  1. いちばん上に「いまのじぶん」を1つだけ大きく(レベルのわっか・段位・ れんぞく日数・きょう打った数)。数字を7つ並べるのをやめ、 わっか1つと呼び名で見せます
  2. のこりは4つのひきだしに分け、1つずつ見せる
  3. そのなかも、たためるようにする(コースごとの★、ふるい練習の並び)
ひきだし 中身 いつ見るか
きょう きょうのようす・れんしゅうした日・この1しゅうかん きのうのじぶんとくらべたいとき
にがて キーボードのヒートマップ・手がとまるキー・ローマ字のきまり・にがてな指 つぎに何をやるか決めたいとき
たからもの バッジ・ステージの★ あつめたものを見たいとき
あゆみ 最高記録・はやさのグラフ・チャレンジ・さいきんの練習 のびを見たいとき

時間の軸で分けています。 きのうのじぶんとくらべたいときと、 つぎに何をやるか決めたいときでは、見たいものがちがうからです。 1画面に出るカードは多くて3枚になりました。

せっていも同じで、ヒント/みため/キーボード/データの4つに分けています。 以前は「文字を大きくする」を探すだけで画面3つぶんスクロールしていました。

ひきだしを切りかえても、上の「いまのじぶん」は描きなおしません。 レベルのわっかが何度も0からまわると、それだけでうるさくなるからです (js/app.jsswapSection())。 ひらいていたひきだしは画面を行き来しても覚えています。

中身がないひきだしは、空のままにしません。 かならず 「これから」と、つぎにすることのボタンを1つ出します。 空の画面をそのまま見せると、こわれているように見えます。

アニメーションと演出

うごきはすべて js/fx.js に集めています。画面ごとに書くと、 「動きをへらす」設定の入れわすれがかならず出るからです。

うごき どこで なぜ
カードがすこしずつ下から出る 打つ画面いがいの全画面 どこからどこまでが1つのまとまりかがわかる
数字が0からそだつ きょうのようす・けっか・あつめた数 「これだけやった」が目で見える
おびが0からのびる/わっかがまわる レベル・すすみぐあい・あつめぐあい 割合が数字を読まなくてもわかる
ひらひら(紙吹雪) けっか画面・ひとまわりできたとき いちばんうれしいしゅんかんに
★がじゅんばんにぴょこんと出る けっか画面 ★の数がかぞえなくてもわかる
しるしが金色になって★3つが出る 打つ画面(★3つでひとまわりできたとき) いちばんうまく打てたしゅんかんに、その場で気づける
うすい色のたまが背景でゆっくり動く 打つ画面いがい 画面が「生きている」ように見える

ひらひらは、いつでもまくわけではありません。 何をしても出るなら、 それはもう「おめでとう」ではなくただの飾りです。 ★3つ・新記録・レベルアップ・新しいバッジ・はじめてのクリアの どれかがあったときだけ出し、つよさもうれしさに合わせて変えます (js/app.jscelebrate())。

打つ画面には、出しいれのうごきをつけません。 打ちながら画面が動くのは、タイピングの練習でいちばん避けたいことです。 例外はひとまわりできたときだけで、 それもお題の文字にかぶらない右上のしるしの位置から、少しだけまきます。 ★3つのときは数を少し増やしますが、まく場所も、しるしの大きさも変えません。 背景のたまも打つ画面では止めます。

prefers-reduced-motion: reduce の端末では、 うごきを飛ばして最後のすがたをすぐ出します(消すのではありません)。 おびは伸びきった状態で、数字は最終値で、ひらひらは出ません。

画面の下にナビゲーションバーがあり、いちばん左が「もどる」です。 「もどる」は次の3つがすべて同じ1つの動きになります。

  1. 下部バーの「もどる」をタップ
  2. 画面の左右どちらかの端から中央へスワイプ(引いた量が画面の端に見えます)
  3. 端末・ブラウザの戻る(Android の戻るジェスチャー、iOS の端スワイプ、Alt+←)

どの画面からでも、スペースキーで打つ画面へ

キーボードのある端末では、スペースキーがそのまま「うつ」の入口です (js/app.jsbindPlayShortcut)。えらぶ・きろく・せっていを見ていた子が 「じゃあ打とう」と思ったとき、下部バーの小さなボタンをねらうのは遠まわりです。 いちばん大きくて、手を動かさずに押せるキーをその入口にしました。

次のところではスペースはもとの役目のままです。

どこ スペースの役目
打つ画面 打鍵(js/play.js が受け取ります)
文字を書くところ(もちだしのテキストなど) 空白の入力
せっていのスイッチ(チェックボックス) 入れかえ
たためる見出し(<summary> ひらく・とじる

ボタンにフォーカスがあるときは打つ画面へ行きます。 ボタンはエンターでも押せるので、キーボードだけで使う子の行き先をうばいません。

アプリが終了したり、ブラウザだけ先に戻ったりしません

ブラウザの戻るは、ふつうに使うとアプリから出てしまいます。 Typa は起動時に「見えない履歴」を1つ足しておき、戻られたらすぐ足し直します (js/nav.jsarmGuard)。こうすることで、

  • 戻る操作はいつもアプリの中で受け取られます
  • 階層のいちばん上で戻っても、ページから出ません(画面が少し揺れて知らせます)
  • バーのタップと端末の戻るが二重に届いても、0.4秒以内は1回の操作として扱います

「もどる」は次の順で行き先を探します(js/nav.jsback())。

  1. 階層が積み上がっていれば1つ捨てる
  2. タブのいちばん上だが、そのタブ本来の画面でなければ本来の画面に戻す (「うつ」タブに出したけっか画面 → 打つ画面
  3. いちばんさいしょのタブ(うつ)でなければ、そこへ戻る
  4. どれもなければ画面を揺らして知らせる

練習中に「もどる」を押すと、その場でけっか画面になります。 「もう1かい おすと やめます」の確認はしません。 以前2回聞いていたのは、やめると記録が消えたからです(→ 0-2節)。

けっか画面は「通りみち」なので、「もう1かい」も「つぎの ステージ」も 履歴を置きかえます。次のステージで戻ったとき、 ひとつ前のけっか画面ではなくコース一覧に戻ります。


どの端末でも本文が広い

  • たてが短い画面をいちばん大事にしています。 学校の Chromebook は 1366×768 で、 ブラウザの枠を除くとたてが 600px ほどしかありません。打つ画面は入口そのものなので、 キーボードと手の絵までぜんぶ見えていることが何より大事です (打ちながらスクロールはできません)。 キーボードと手の絵はかならず上下にかさねるので、 たての場所は次の順でひねり出します。
    1. かざりのブランド行をしまう
    2. 「つぎの 指」ときろくの数字を横1行にまとめる
    3. ちびキャラをすこし小さくする/すきまをつめる
    4. 手の絵は指先だけを見せる(手のひらは画面の下に出す)
    5. それでも足りなければ、お題の文字をいちばん最後に少しだけ小さくする
  • キーボードの大きさは、残った場所をはかって js/play.js が決めます。 たてに余裕があるときはキーをましかくまで大きくします (本物のキーはましかくなので、それより横長にはしません)
  • 幅の狭い画面では上のバーを出さず、下部バーだけにしています
  • iPhone のホームバー・ノッチは env(safe-area-inset-*) でよけます
  • お題の文字は clamp() で画面幅に合わせて拡大(たてに余裕があれば 3.2rem)
  • 画面のキーボードは横スクロールできるので、狭い画面でも本文が押しつぶされません。 手の絵もキーボードと同じわくの中でスクロールするので、 横にずらしても指先はキーの下からずれません
  • キーボードのない端末(タブレット・スマートフォン)では、 画面のキーをタップして打てます(シフトは押すたびに切り替わります)

打つ画面いがいも、1画面におさめる

打つ画面だけでなく、えらぶ・きろく・せっていもスクロールなしで見わたせる ようにしています。カードをたてに1列に並べると、よこに広い画面では 本文の右がわがずっと空いたまま、たてにどんどん長くなります。 1画面に入らないぶんはスクロールしないと見えないので、 「どんなものがあるのか」がひと目でわからなくなります。

やっていること どこ
ひきだしの中のカードを2列に流す(columns: 2 きろく・せってい・チャレンジ
「つづきから」と行き先の並びをよこに置く えらぶ
コース・ステージの一覧を複数列にする(auto-fit コース一覧・ステージ一覧
コースごとの★のようなたたんだ見出しを2列にする きろく → たからもの
れんしゅうした日のカレンダーを1行28マスにする きろく → きょう
たてが短いほど、すきまと行の高さをつめる(900px / 700px の2段) 打つ画面いがいの全画面

列は2つまでです。 カードの中には選ぶボタンの並び(.seg)やスイッチが 入っていて、列が狭くなるとボタンが折れてかえってたてに伸びます。 3列にして測ったら、せってい画面はむしろ 118px 高くなりました。

キーボードの図が入るカード(.card-wide)は、たてに余裕があるときだけ 2列ぶんを使います。たてが短いノートPCでは、広げたぶんがそのまま 「スクロールしないと見えない」に変わるからです。 図が入りきらないときは、そのわくの中だけで横に動きます(.kb-guide)。

文字の大きさはできるだけ変えません。読みにくくなるのはスクロールより困ることです。 つめるのは、すきま・行の高さ・かざりの大きさだけです。

1366×640(Chromebook のブラウザ枠を除いたくらい。記録なしの状態)で測った結果です。

画面 まえ いま
えらぶ ぴったり ぴったり
きろく(4つのひきだし) 71〜188px あふれる ぜんぶ入る
せってい(4つのひきだし) 96〜256px あふれる ぜんぶ入る
チャレンジ 69px あふれる 入る
コース一覧 ぴったり ぴったり
ステージ一覧(11ステージ) 202px あふれる 入る(1024×700 では 35px あふれます)

記録がたまると、きろく画面はその分だけ伸びます。 れんしゅう1回ぶんの記録を入れて測ると、1366×768(Chromebook のふつうの状態)では えらぶ・きろく・せってい・チャレンジがぜんぶ1画面に入ります。 たてが 660px しかない状態では、きろくの[きょう][にがて][たからもの]が 64〜90px あふれます(バッジやにがてキーが増えるほど伸びるので、ここは残ります)。

けっか画面は、上から順に読んでいく「通りみち」なので1列のままです。

スマートフォンの縦画面は、もともとスクロールする形が正しいので変えていません。


PWA(アプリとしてインストール)

manifest.webmanifestsw.js で PWA に対応しています。

ブラウザ 入れかた
Chrome / Edge(Chromebook・Windows・Android) アドレスバー右のインストール、またはメニュー →「アプリをインストール」。アプリ内の「せってい → アプリとして つかう」からも入れられます
Safari(iPad・iPhone・Mac) 共有ボタン →「ホーム画面に追加」

インストールするとブラウザのバーが消え、画面がさらに広くなります。 オフラインでも練習できます(学校の Wi-Fi が混んでいても授業が止まりません)。

Service Worker が面倒をみるのはこのアプリのフォルダの下だけなので、 同じドメインにほかのページがあっても影響しません。

sw.js のコメントの中に半角の */ を並べて書くと、 そこでブロックコメントが終わってファイル全体が壊れ、 Service Worker の登録が静かに失敗します(オフラインが効かなくなります)。 変更したら node --check sw.js で確かめてください。


記録とプライバシー

Typa は通信をしません。アカウントもなく、名前も出席番号も持ちません。 記録はすべて、その端末の localStorage にだけ保存されます。

キー 中身
typa.settings.v1 配列・ヒントのつよさ・表示・音などの設定
typa.progress.v1 ステージごとの★・だんrank)・最高記録・つぎのふくしゅう日・ひとまわりのすすみlapItems / lapCorrect / lapTotal
typa.history.v1 練習1回ぶんの記録(最新300件)。ミスしたキー・指、打つまでの時間・取りちがえ・ローマ字のきまりは最新60件
typa.awards.v1 けいけんち・レベル・バッジ・通算の打鍵数
typa.challenge.v1 チャレンジの最高記録
study.records.v1 アプリ共通の学習ログ(study.v1・最新500件)

study.records.v1 は複数アプリ共通の学習ログです。このアプリ専用のキーではないため、 リセット処理やクリーンアップの対象に含めないでください。

「せってい →『データ』→ きろくと プライバシー」からまとめて消せます (まちがえて押しても消えないよう2段階です)。 消えるのは typa.progress.v1 / typa.history.v1 / typa.awards.v1 / typa.challenge.v1 の4つで、typa.settings.v1(設定)は残しますjs/store.jsclearRecords())。ヒントのつよさや配列まで初期値に戻ると、 記録を消しただけの児童が次の練習でいきなり別の画面を見ることになるためです。 study.records.v1 も消しません。 まだ先生にとどいていない回が入っていて、しかもほかのアプリの分まで消えるからです (localStorage.clear() を使わないのも同じ理由です)。 きろくの書き出し(もちだし)にも含めません。共有のキーなので、 読みこみ(置きかえ)でほかのアプリの記録まで消えてしまいます。

べつの端末にうつす

学年がかわって Chromebook が入れかわると、localStorage の記録はいっしょに消えます。 「せってい → きろくを もちだす」から、記録を1つのファイルに書き出して読みこめます。

ここでも通信はしません。 ブラウザの中でファイルを作ってダウンロードするだけで、 できたファイルはその端末の「ダウンロード」に入ります。 学校の端末でダウンロードが止められているときのために、 画面に出してコピーする道も用意しています。

読みこみは置きかえだけです。2つの記録をまぜると、けいけんちが二重に数えられたり、 どちらが本当か分からなくなったりします。子どもに説明できないふるまいは入れません。 読みこむ前に、何が入っているか(れんしゅう回数・★の数・けいけんち・さいごの日)を 出してから、2段階で確認します。

ファイルは手で書きかえられるので、読みこむ前にかならず中身をしらべます。 とくに設定は知っている名前だけを取りこみます(まるごと代入しません)。

このファイルに児童を特定する情報は入っていません。 名前・出席番号・端末の ID は、もともとアプリが持っていないからです。

日づけは端末の時計で数えます。ISO 文字列をそのまま切ると 世界標準時になり、日本では朝9時までが「きのう」になってしまうためです (js/store.jslocalDay())。


学習ログ(study.v1)

GIGA山の学習アプリ(8本)は、学習の記録を共通の形式で同じ端末に残します。 先生が横にならべて見るためのしくみで、Typa は8本目としてこれに対応しています。

出力するスキーマ版は study.v1 です。

項目
保存先 localStoragestudy.records.v1(最新500件・古いものから捨てる)
送信 しません。 アプリは保存だけです
児童の識別 持ちません。 名前・出席番号・端末情報は入りません

送り出すのは、同じドメインに置かれた別のページ(送信ページ)の仕事です。 Typa の中には通信のコードが1行もありません。

何を記録しているか

フィールド Typa での中身
mode practice / weak(にがて とっくん)/ challenge
unit.id {コースID}-{ステージID}home-position-hp-1)。にがては weak-review、チャレンジは challenge-30s
source course / review(そろそろ ふくしゅう)/ weak
grading objective(打鍵の正誤は見たとおりに決まります)
summary.count 打ったお題の数(打鍵数ではありません)
summary.firstTryCorrect 一度も打ち間違えずに打ち切ったお題の数
items お題ごとの q / ok / firstTry / tries / ms / wrong(最大200件)
ext 打鍵数・速さ・ミスしたキーと指・ヒントのつよさ・★・だんrank)・ひとまわりの位置など

打鍵の数字は count に入れません。 1回で数百打になり、ほかのアプリの 「問題数」とけたが合わなくなるためです。打鍵の数は ext.keys、 打鍵ベースの正かくさは ext.keyAccuracy という別の名前で入れます。

画面の「正かくさ」と、先生が見る初回正答率は別の数字です。 画面のほうは打鍵ベース(1文字まちがえても少し下がるだけ)、 先生が見るほうはお題ベース(1文字でもまちがえたらそのお題は数えない)です。 どちらも正しい数字なので、混ざらないように名前を分けてあります。

時間のものさしを2本持ちます

用途 フィールド 手が止まったとみなすまで
8アプリ共通の学習時間 activeMs 60秒(全アプリ同じ・変えてはいけません)
画面に出す速さ(打/びょう)の計算 ext.typingMs 5秒(Typa の都合)

アプリの中では「5秒より長い手止まり」を除いた時間で速さを出していますが、 その値を activeMs に入れてはいけません。 Typa だけ学習時間が短く出て、 全アプリを合計したとき、Typa で熱心に練習した子ほど時間が少なく見えます。

チャレンジ(時間ぎめ)だけは、制限時間そのものがスコアの前提なので 手止まりを除かず activeMs === elapsedMs とします。

aborted は「やりとげられなかった」ではありません

Typa はとちゅうでやめても打ったぶんが残ることを設計の中心にすえています。 10秒でやめるのは正しい使いかたなので、記録の多くは aborted になります。

これを完走率として先生に見せてはいけません。 取り組みの量は count の合計と activeMs の合計で見てください。 completed になるのは、ひとまわり到達ちょうどでやめたときと、 チャレンジが時間切れになったとき、ショートカットの課題を全部やったときです。

とりこぼさないためのしくみ

場面 動き
「やめる」「もどる」 その場で記録します
タブを閉じた・メモリ不足で捨てられた pagehide で確定します(打つ画面・ショートカット画面の両方)
5分より長くほかのタブにいた はなれた時刻で記録を締め、もどったら新しい記録をはじめます
1打も打っていない回 記録しません(ログの枠500件が中身のない記録で埋まります)

5分をこれより短くすると、先生の話を聞くための数分の離席まで区切りになります。 長くすると、朝ひらいて昼にもどってきた回がひとつづきの練習として数えられます。

ほかのタブにいるあいだは時計を止めます。止めないと、画面をひらいたまま 図書室へ行った時間まで「れんしゅうした時間」に入ってしまいます。

おまけの周(打ち直し)は分けて数えます

ひとまわりの最後に出る「まちがえたお題をもう1回」は、アプリの中でも 速さ・正かくさ・★・けいけんちから除いています。学習ログでも同じにします。

  • items には本編のお題だけを入れます(attempted === items.length を保つため)
  • 打ち直しのつまずきは ext.retry に分けて残します(捨てません
  • 打ち直しにいた時間は elapsedMs / activeMs から引きます

設問ID(q

問題文そのものは入れません。容量を圧迫し、お題を書きかえたときに 過去のデータとつながらなくなるためです。

お題 q
アルファベットだけ・20文字以内 そのまま(ffff
かな・20文字超 ハッシュにして短縮(w-8b004105
ショートカットの課題 課題のID(sc-all

ハッシュは djb2 で、乱数も時刻も混ぜません。同じお題はいつも同じIDになります。

ファイルの3層構成

ファイル 役わり
js/studyLog.js 8アプリで中身が同じ(ロジック版 1.1)。保存だけをします
js/studySession.js Typa の1回ぶんを study.v1 の形に組み立てます
js/studyStats.js 読みかえして児童に見せます(読み出し専用

studyLog.js を直したときは、ほかの7アプリにも同じものを配り直します。 版がずれると、アプリによって記録の残りかたが変わります。 版は StudyLog.LOGIC_VERSION で確かめられます。

studyStats.js は「きろく」画面のこの1しゅうかんのつみあげに使っています。 自分の記録を自分で見るための表示で、ここでも通信はしません。

公開する前に

  • 受信側(送信ページ・GAS)の appId 許可リストに typa を追加する
  • 表示名(先生のシート・児童の画面に出る名前)を登録する
  • 実機で1件送信し、シートに行が増えることを確認する

1つめを忘れると、記録は受信側で拒否されます。仕様の retryable により 端末には残りますが、アプリの公開より先に受信側を更新してください


記録のとりかた

数字 決めかた
はやさ(打/びょう) 正しく打てた数 ÷ 秒。打ち間違えは速さに入りません。合計打鍵数で数えると、でたらめに連打したほうが記録が伸びてしまうためです
正かくさ(%) 正しく打てた数 ÷ 打った合計数
★(0〜3) 速さではなく正確さで決まります(98%以上で★3)。速さで決めると「間違えても速く打つほどよい」という誤った練習になるためです。ただし短いステージでは割り算だけだと厳しすぎるので、ミスの回数にも下ささえがあります(→「短いステージほど厳しくならないように」)
れんぞく(コンボ) 続けて正しく打てた最大数

ストップウォッチは最初の1打で動きだします。 画面が出た瞬間から数えると、 まだ手を置いていない時間まで記録に入ってしまうためです。

★がつくのは「ひとまわり」できたとき

★は1回の練習ではなく、ひとまわりについてつきます。

ステージの お題が 8もん のとき

  月よう  3もん 打ってやめた      → すすみ 3/8 ・ ★はまだ
  火よう  2もん 打ってやめた      → すすみ 5/8 ・ ★はまだ
  水よう  3もん 打った            → ひとまわり! ★がつく(3日ぶんの正確さで)

正確さはその周ぶんを通して数えます(lapCorrect / lapTotal)。 ひとまわりできた時点で★が決まり、そこから数えなおします。 ずっと打ちつづけて1回で何周もしたときは、どの周も同じ正確さで見ます。 周ごとに0に戻すと、2周目がいつも★0になってしまうためです。

★は下がりません。一度とったものは消えません。

けっか画面に出る★も、この「ひとまわりぶん」の★です。 その回だけの正確さから出しなおすと、月曜に少しつまずいて火曜にひとまわりした子に 「けっか画面は★3つ、ステージ一覧は★2つ」が起きます。子どもから見れば 「★3つをとったのに消えた」です。前のつづきぶんも入れた正確さは、 けっか画面の「すすみ」のところに1行で出します。

★3つは、その場で知らせます

ひとまわりできた瞬間の★が3つのときだけ、打つ画面のお祝いのしるしが 金色にかわり、★3つと出ます(はじめてなら「はじめての ★3つ!」)。

★が結果画面でしか見えないと、いちばんうまく打てたしゅんかんに何もおきません。 ノーミスでひとまわりできても画面は何ごともなかったように次の周に入り、 子どもは「やめる」を押すまでそれを知らないままでした。

知らせても、止めません。 出るのは2びょうほどの短いしるしだけで、 場所も大きさもふだんのお祝いと同じ(お題の文字にかぶらない右上)です。

しるしに出す★はTypa.Store.lapStarsPreview()が出します。 あとでつく★とまったく同じ数えかた(前のつづきぶんも入れた正確さ)です。 打つ画面だけ別の数えかたにすると、また 「さっき★3つと出たのに、ステージ一覧は★2つ」が起きます。

★3つになったら、その場でつぎのステージに入れかわります

★3つはそのステージの合格です。そこでお題とステージ名だけが入れかわり、 そのまま打ちつづけられますjs/play.jslapDone()js/app.jsadvanceStage())。

結果画面ははさみません。 はさむとそこで手が止まり、 「きょうはやめておこう」になります。0-2 に書いた「はじまりもおわりも 決めない」がこわれるのは、たいてい画面をはさんだときです。

入れかえるのはお題の切れ目(1つ打ち終えて、つぎを出す直前)です。 だから打ちかけのことばをとりあげることも、打ったぶんがむだになることも ありません。ここまでの記録・★・けいけんちは、その場で前のステージの ものとして残ります。

お祝いのしるしは入れかわったあとの画面で出します。 「★3つ! ホームポジション ①ができました」のように、 どのステージのことかをことばで言います。前の画面で出すと、 見ているさいちゅうに入れかわってしまうためです。

行き先は「まだ★3つでない、いちばん近いステージ」です (Typa.Lessons.nextStageAfter())。すでに★3つのステージはとばし、 コースのさいごまでいったら先頭にもどってさがします。 ショートカットには送りません(打鍵の練習のとちゅうにコピー・はりつけの 課題が出てくるのは、べつのしごとだからです)。 ぜんぶ★3つになったら入れかえません。そこからは「そのさき」(だん)の時期です。

入れかわらないときもあります。じぶんでえらんだことをとりあげないためです。

入れかわる?
コースやホームからふつうに始めた練習
「もう1かい」(結果画面から) ×
「めかくしでやってみる」「だんをねらう」 ×
チャレンジ・にがて とっくん ×(ひとまわりを数えないので★がつきません)
ショートカット ×(★はつきますが、打鍵の練習ではないので、入れかえのもとにも行き先にもしません)
★3つにとどかなかったひとまわり ×(これまでどおり「ひとまわり できた!」)

見せた★は、あとから下がりません

1回で何周もまわると、どの周も同じ正確さで見ます。すると 1周目をノーミスでまわって「★3つ!」と見せたあと、2周目でくずれると 合計の正確さがさがって、けっか画面が★2つになります。 子どもから見れば「さっき★3つと出たのに消えた」です。

あのとき★3つだったのは本当なので、練習中に見せた★を下ささえにします (play.jslapStarsSeen を返し、applyResult がそれより下げません)。 ひとまわりしていない回にはこれまでどおり★はつきません ——見せた★だけで★を作ることはできません。

つけるもの 条件
ひとまわりのすすみ 1問目から。とちゅうでやめても残る
けいけんち・にがての集計・れんぞく日数 1打目から
★・ふくしゅうの日 ひとまわりできたとき
最高記録(はやさ・正かくさ) その回に 20打以上 打ったとき
チャレンジのスコア 時間いっぱいまでやったとき(20びょうでやめたぶんを 60びょうの記録にはできません)

「20打以上」の線は js/store.jsMIN_RECORD_KEYS です。 「きろく」の最高記録・はやさのバッジ・「はやさのうつりかわり」のグラフも、 同じ線でふるいます。3打の回がまぐれで出した数字が、 ずっと画面に残ってしまわないようにするためです。

短いステージほど厳しくならないように

★はひとまわり全体で見ます。ところがひとまわりの長さはステージによってまるで違います

ステージ ひとまわりの打鍵数 「98%」で許されるミス
あ行 13打 0かい
ホームポジション ① 32打 0かい
ことばを打つ 76〜92打 1かい
ながい文 208打 4かい

割り算だけで98%を求めると、いちばん最初の、いちばんやさしいステージが いちばん厳しくなります(1文字でもまちがえたら★3つはなし=実質100%)。 32ステージのうち17ステージがこれでした。 しかも★3つになるまで次のステージへ進まないので、 ホームポジション ①からずっと出られません。

「98%」はもともと「ほとんどミスなし」を表すための線です。32打の2%は0.64打なので、 切りすてて0にするより1かいまでは許すほうが、ことばの意味に合っています。 そこで★は、割り算とミスの回数のゆるいほうでつけます。

正かくさ または ミスの回数
★3つ 98%以上 1かいまで
★2つ 92%以上 2かいまで
★1つ 80%以上 3かいまで

長いステージでは割り算のほうが大きくなるので、この下ささえがきいてくるのは 短いステージだけです(208打のステージは今までどおり4かいまで)。 どのステージもこれまでより厳しくはなりません。 線は js/store.jsSTAR_RULES にあります。

打鍵を数えないステージ(ショートカット)は、できた課題の数で見ます。 ショートカットは打鍵数を数えない(correctKeystotalKeys も 0)ので、 打鍵で数えるとひとまわりの正確さがずっと0%になり、 全部の課題ができても★が1つもつきませんでした。 こちらに下ささえは使いません(課題4つで「1つとばしても★3つ」では意味がないためです)。

まちがえたお題は、ひとまわりの さいごに もう1回

まちがえた直後にもう一度打つと、いちばんよく身につきます。 そこでひとまわりするたびに、その周でつまずいたお題(最大5問)を もう1回だけ出します。

このおまけの周の打鍵は、はやさ・正かくさ・★・けいけんちには数えません。 数えてしまうと「まちがえて打ち直した子ほど正かくさが上がる」ことになり、 ★が「さいしょにどれだけ正しく打てたか」をあらわさなくなります。 いっぽうで「どのキーでつまずいたか」の記録にはちゃんと数えます。 れんしゅうとしては本物だからです。

時間ぎめのチャレンジではやりません(実際の60びょうで何打できたかがスコアなので、 あとから打鍵を足せません)。「せってい →『まちがえた お題を さいごに もう1かい』」で切れます。

おまけの周は毎周入るので、「入ったところで時計を止める」だけでは足りません。 入っていたあいだの合計retryMs)をためておき、あとから引いています。

速さ(打/びょう)は、5秒より長い手止まりを除いた時間で出します (js/play.jsIDLE_MS)。途中で先生の話を聞いていた回でも記録が下がりません。 ただしチャレンジだけは除きません。実際の60びょうで何打できたかを そのままスコアにするためです。

この5秒の時間を、学習ログの activeMs に入れてはいけません。 activeMs は8アプリ共通で 60秒基準です。5秒基準の値は ext.typingMs という別の名前で入れます (→「時間のものさしを2本持ちます」)。

1打も打たなかった回は残しません

ひらいてすぐ戻っただけの回で「れんしゅう 1回」が増えると、 きょうの回数もれんぞく日数もうそになります。 1打も打っていない回は、きろくにも けっか画面にもしません。


コースとステージ

コース ねらい ステージ数
ゆびの ばしょを おぼえる ホームポジションから段を広げ、記号(シフト)まで 8
ローマ字を おぼえる あ行〜わ行・濁音・ん・っ・拗音 11
ことばを 打つ 身のまわり/学校/学習/コンピュータ/地名のことば 5
文を 打つ あいさつ・日記・ふり返り・長い文(句読点つき) 4
ショートカットを つかう コピー・貼り付け・元に戻す・選択と移動・便利なキー 4

内容は js/lessons.js にまとまっているので、学級の実態に合わせて ことばや文を差し替えられます。チャレンジのお題も同じ配列から作られるので、 ことばを足すとチャレンジの中身も増えます。

お題を書きかえたら、かならず確かめてください

node tools/check-lessons.js

お題の k(打つ文字)に漢字が混ざっていても、画面はふつうに出ます。 ところがローマ字エンジンは知らない文字を「そのまま1打」として扱うので、 児童はその漢字そのものを打たないかぎり先へ進めません。 目で見ても気づきにくく、授業のまん中で手が止まります。

このスクリプトは全部のお題を最後まで打ちとおして、 ① 1打ずつ「次に押すキー」が出るか ② そのキーが JIS と US の両方にあるか ③ そのキーに指の割り当てがあるか、を確かめます。

漢字は k ではなく**第2引数(画面に出すことば)**に書きます。

w('となりの せきの ひとと、はなしました。', 'となりの せきの 人と、はなしました。')

手をいれたら走らせるもの

追加のインストールは要りません(依存はゼロのままです)。

node tools/check-lessons.js     # お題がほんとうに打てるか
node tools/check-progress.js    # 「ひとまわり」のつみあげ・★・だん・最高記録の線
                                #(練習中に見せる★とあとでつく★が同じかもここ)
node tools/check-mastery.js     # おぼえぐあい・ローマ字のきまり・ヒントのつよさ
node tools/check-review.js      # ふくしゅうの日づけ
node tools/check-backup.js      # 書き出し・読みこみ
node tools/check-study.js       # 学習ログ(study.v1)のかたち
node --check sw.js              # sw.js をさわったらかならず

どれも目で見て気づけないところを守っています。 日づけが1日ずれても、にがての集計が的外れになっても、画面はふつうに出ます。 気づくのは何週間かあとの授業のまん中です。

js/mastery.jsjs/backup.jsStudy.buildRecord()localStorage にも DOM にもさわらないので、node からそのまま呼べます(global.window = global のしくみは tools/check-lessons.js と同じです)。

js/ にファイルを足したら、index.html の読みこみ順と sw.jsASSETSVERSION の3か所をいっしょに直してください。 sw.js を忘れるとオフラインのときだけ壊れます。


ファイル構成

Typa/
├── index.html                アプリの外枠(下部ナビゲーションバー)・CSP
├── install-hook.js           「ホーム画面に入れる」の合図を head の先頭で受ける
├── offline.html              圏外で本体も手もとに無いときに出る画面
├── manifest.webmanifest      PWA の設定
├── sw.js                     オフライン対応
├── package.json              npm run check などの入口(実行時の依存はゼロ)
├── .nojekyll                 GitHub Pages に Jekyll 処理をさせない
├── .github/workflows/ci.yml  pull_request と push で npm run check を走らせる
├── .github/dependabot.yml    GitHub Actions の更新をひろう
├── LICENSE                   MIT
├── README.md                 このファイル(設計と、そう決めた理由)
├── MANUAL.md                 先生向け(専門用語ゼロ・「うまくいかないとき」つき)
├── AUDIT.md                  GIGA Standard v5 の監査結果(実測値と、測っていないもの)
├── css/style.css             デザイントークンと全画面のスタイル
├── css/fx.css                たのしさと階層(ヒーロー・ひきだし・アニメーション)
├── icons/                    アイコン(make_icons.py で生成)
├── scripts/
│   ├── check-project.mjs     品質ゲート(CI と同じもの。npm run check)
│   ├── self-test.mjs         検査そのものが動いているかを、わざと壊して確かめる
│   ├── lib/giga-v5-checks.mjs  Part I の検査(他リポジトリと共通・差しかえ可能)
│   └── measure/              実ブラウザで測る道具(playwright)
├── tools/
│   ├── check-lessons.js      お題がほんとうに打てるかを確かめる
│   ├── check-progress.js     「ひとまわり」のつみあげが正しいかを確かめる
│   ├── check-backup.js       書き出し・読みこみが正しいかを確かめる
│   ├── check-review.js       ふくしゅうの日づけが正しいかを確かめる
│   ├── check-mastery.js      おぼえぐあいの数えかたを確かめる
│   └── check-study.js        学習ログ(study.v1)のかたちを確かめる
└── js/
    ├── icons.js              自前の SVG アイコン
    ├── fx.js                 画面のうごき(出しいれ・数字がそだつ・おいわい)
    ├── layout.js             JIS / US のキー配列と「どの指で押すか」
    ├── romaji.js             ローマ字入力エンジン+ローマ字ひょう
    ├── lessons.js            コース・ステージ・ショートカット課題・チャレンジ・にがて とっくん
    ├── mastery.js            おぼえぐあい・ローマ字の きまり・にがての ねらい
    ├── store.js              設定・すすみぐあい・履歴・れんぞく日数・にがて集計
    ├── studyLog.js           学習ログの保存(study.v1・8アプリ共通・さわらない)
    ├── studySession.js       れんしゅう1回を study.v1 の形に組み立てる
    ├── studyStats.js         学習ログを読みかえして児童に見せる(読み出し専用)
    ├── backup.js             きろくの書き出しと読みこみ
    ├── awards.js             けいけんち・レベル・バッジ
    ├── keyboard.js           画面のキーボード(ヒートマップつき)
    ├── hands.js              手のイラスト(キーボードの下・つぎに使う指が光る)
    ├── buddy.js              はたらくちびキャラ(SVG+Web Animations)
    ├── nav.js                画面の階層と「もどる」(履歴ガード・端スワイプ)
    ├── play.js               打つ練習の画面(ひとまわり・時間ぎめ・コンボ・とばす)
    ├── shortcut.js           ショートカットの練習画面
    └── app.js                各画面の中身と起動

外部のライブラリ・フォント・CDN は使っていません(オフラインで完結します)。

アイコンを作り直すときは次を実行します(追加のインストールは不要です)。

python3 icons/make_icons.py

apple-touch-icon と maskable は 下地を画像のはしまで伸ばした、透明を含まない版を 出します。理由は icons/make_icons.pybuild() の説明を読んでください。


品質ゲートと実測

走らせかた

npm run check              # 静的な検査。CI(pull_request と push)で走るのと同じもの
npm run check:self-test    # 検査そのものが動いているかを確かめる

npm run check は 2つを合成した 39件です。

中身 件数 置き場所
Part I の検査 GIGA Standard v5 の共通の決まりごと 33 scripts/lib/giga-v5-checks.mjs
アプリの中身の検査 お題が打てるか、記録の計算が合っているか 6 tools/check-*.js

Part I の検査は他のリポジトリと共通の中身です。正本が更新されたら ファイルごと差しかえられる形にしてあります。Typa 固有の検査はここに書かず、 tools/ に置いてください。

「0件でした」を信じない

npm run check:self-test は、リポジトリを一時フォルダに写して 検査ごとにわざと 1か所こわし、その検査がちゃんと落ちるかを見ます。 落ちなければ、その検査は何も見ていません。

この確認をしたことで、検査そのものの不具合が実際に 3件見つかっています (AUDIT.md §2-6)。検査を足したら、scripts/self-test.mjsBREAKAGES に こわしかたも足してください。足し忘れると self-test が警告します。

実ブラウザで測る

npm i -D playwright && npx playwright install chromium
npm run measure            # コントラスト・タップ44px・320px幅・JSエラー(4画面サイズ × 明暗)
npm run measure:typing     # 打っているとちゅうにしか出ない色(○×・つぎのキー・シフト中)
npm run measure:pwa        # 更新・圏外・他アプリのキャッシュ
npm run measure:keyboard   # キーボードだけで全機能に届くか(12画面を Tab で歩く)
npm run measure:perf       # LCP・CLS・初回に届く大きさ

ブラウザをダウンロードできないネットワーク(cdn.playwright.dev が塞がれている)では、 手もとに Chromium があっても playwright が版ちがいだと使ってくれず、 実測がまるごとできません。その場合は場所を教えます。

CHROME_PATH=/opt/pw-browsers/chromium-1194/chrome-linux/chrome npm run measure

読むだけでは分からないことがあります。とくに次の 4つは、 走らせないと絶対に気づけませんでした。

  • CSP を入れると、style="--finger: …" が止まって指の色分けだけが黙って消える (画面はふつうに出るので、ビルドも静的解析も通ります)
  • 打ったしゅんかんにしか出ない色は、画面を歩くだけの検査では 1つも見えません
  • <label for="x"><input id="x" hidden> は、マウスでしか押せないボタンになります。 見た目はふつうのボタンです。Tab で歩いてみるまで分かりません(AUDIT.md §8-1)
  • Playwright の context.setOffline(true)Service Worker からの通信に効きません。 圏外の検査はサーバーそのものを止めて行います

測る道具そのものも疑う

measure:keyboard を最初に走らせたときは 24件出ましたが、 そのうち 23件は検査側のまちがいでした(cursor: pointer の継承、 ヘッドレスに アドレスバーがないための Tab の巻きもどり)。 measure:perfContent-Length を出さないサーバーで 「0 KB なので 300 KB 以下、合格」といううその ✅ を出していました。

「0件でした」と同じくらい、「たくさん出ました」もそのままでは信じられません。 0 バイトは「軽い」ではなく「測れていない」です。


公開のしかた(GitHub Pages)

  1. このリポジトリの Settings → Pages で、Source を Deploy from a branch、 ブランチを main / (root) にする
  2. https://typa.giga-school.com/ が開くことを確認する

サーバー側の準備は要りません。静的ファイルを置くだけで動きます。

リリースの手順(この順で)

  1. sw.jsAPP_VERSION を上げる。(キャッシュの名前です。いまは v22) 上げないと、児童の端末に新しい版が届きません。いちばん多い抜けです
  2. 中身が変わったなら js/app.jsAPP_VERSION も上げる(いまは 4.2.1)。 こちらは人が読む版で、「せってい →『データ』」の表示と学習ログの appVersion に出ます。sw.js のほうとは別の数字です
  3. 先読みするファイルを増やした/減らしたなら、sw.jsASSETS も直す
  4. npm run check を通す(CI と同じもの)
  5. 見た目やキーボードに手を入れたなら npm run measurenpm run measure:typing も通す
  6. 画面や部品を足したなら npm run measure:keyboard も通す (Tab で届かないボタンが増えていないか。見た目では分かりません)
  7. push する

児童の端末では、新しい版はすぐには切りかわりません。 「あたらしい ばんが あります/さいしんに する」の帯が出て、 押されたときだけ切りかわります。打っているとちゅうに 打ちかけのお題や出したばかりの結果が消えないようにするためです。

frame-ancestors について

index.html の CSP には frame-ancestors を書いていません。 <meta> で書いても無視され、読みこみのたびにコンソールへ警告が出るだけです。 他サイトへの埋めこみを止めるには HTTP ヘッダーが要りますが、GitHub Pages では足せません。 独自ドメインや CDN をはさむときは、サーバー側で frame-ancestors 'self' を足してください。


児童の使いかた

  1. Typa を開く。もう打てます(ボタンも選択もありません)。 まえに途中でやめたステージがあれば、そのつづきのお題が出ます
  2. 打ちたいだけ打つ。10秒でやめても、打ったぶんは残ります。 よこのちびキャラが、打つたびに仕事をして成果物を積み上げます
  3. やめるときは「やめる」か「もどる」。けっか画面が出て、 ひとまわりまであと何問かが分かります
  4. ひとまわりすると★がつきます。★が3つになると、その場でつぎのステージに 入れかわります(けっか画面ははさみません。お題とステージ名がかわるだけなので、 そのまま打ちつづけられます)。 ふくしゅうの日が来ているときは、ひらいた画面がそのままふくしゅうになります
  5. べつのステージをやりたくなったら、左上のステージ名(▾かえる)か 下のバーのえらぶから
  6. なれてきたらチャレンジで、時間内に何打できるかためす (これだけは時間いっぱいまでやるとスコアになります)
  7. まちがえが増えてきたらにがて とっくんで、弱いキーだけを集中して打つ
  8. 「きろく」できょうのようす・レベル・れんぞく日数・バッジ・にがてキーを見る
  9. ぜんぶのステージが★3つになったらそのさきへ。ヒントを1つずつ消しながら、 はやさのめやすにとどくと「だん」が上がります (→「そのさき」)

先生へ:うまくいかないとき

こまりごと 見るところ
打ってもキーが反応しない 画面に「かな入力に なって いるみたい」と出ていませんか。かな英数キー(1の左)か 英数キー(スペースの左)を押します
すぐ打ちはじめたい どの画面でも スペースキーで打つ画面に移れます
いつも同じキャラクターが出る せってい →「だれと いっしょに はたらく?」が「おまかせ」だと、ひとまわりごとにくじを引きます。しごとを選ぶと固定できます
画面のキーボードと手もとの形が違う せってい →「キーボードの ならび」を US に変えます
1つのキーで止まってしまう 4回まちがえると「この お題を とばす」が出ます
ぜんぶ★3つになった。この先は? そのさきに入ります。ひらいた画面が自動でそこへ向かい、ヒントを1つずつ消しながらはやさのめやすを目ざす「だん」が進みかたになります(→「そのさき」)
ふくしゅうが出てこない ふくしゅうは日づけで出ます。日が来ていればひらいた画面がそのままふくしゅうです。まだ先の日なら出ません(きろく →「そろそろ ふくしゅう」で日が分かります)
だんが上がらない だんはヒントを消したままのはやさでしか上がりません。キーボードを出したままでは、いくらはやくても上がりません。けっか画面の「だん」に、足りないほうが出ます
★3つがなかなかとれない ★は1回の練習ではなくひとまわり全体でつきます。日をまたいで積み上げた子は、前の回のミスもいっしょに数えます。けっか画面の「すすみ」に、そのひとまわりぶんの正確さが出ます(→「短いステージほど厳しくならないように」)
「にがて とっくん」が押せない にがてなキーが2つ、または取りちがえが1くみたまると使えるようになります(js/mastery.jsweakTargets())。1キーにつき8打ためないと判定しないので、少し打つと出ます
きろくを消したい せってい →「きろくを ぜんぶ けす」(2段階の確認つき)
記録が消えてしまった ブラウザのデータ削除、シークレットモード、別アカウントでのログインを確認します
端末が入れかわる せってい →「きろくを もちだす」で書き出し、新しい端末で読みこみます
書き出しのボタンが効かない 管理された端末でダウンロードが止められています。「がめんに 出す」でコピーします
色が見分けにくい 指の名前が必ずことばでも出ます。せってい →「指を 色で 分ける」を切ると、次のキーの強調だけになります
手もとばかり見てしまう せってい →「ヒントの つよさ」を1つずつ下げます。ことばの案内は残ります

Releases

Packages

Contributors

Languages