10FastFingers を劇的に快適にする方法

10FastFingers でまじめにスコア狙いをし始めると、

  • 途中経過が表示されない
  • リトライがめんどくさい (Tab → Enter に慣れない)

みたいなことが気になります。大丈夫です。解決できます。

やり方

このスクリプトをブラウザのデベロッパーコンソールに貼り付けるだけです。
(別に変な事してないんですが一応免責として自己責任でお願いします。)

$(function(){function e(){for(var e=0,t=document.getElementById("words").getElementsByClassName("correct"),n=0;n<t.length;n++){var o=t.item(n);e=Math.round(e+o.textContent.length+1)}var r=Math.round(e/5/((60.01-countdown)/60));(e<0||e>2e3)&&(e=0),(r<0||r>400)&&(r=0),$("#preview").html("<h2><b>Key Strokes: </b>"+e+" - <b>WPM: </b>"+r+"</h2>")}$("#words").before("<div id='preview'></div>"),e(),$(document).keydown(function(t){e()}),$(document).keyup(function(e){27==e.which&&restart()})});

そうすると、

  1. タイピング中に入力文字数と WPM が表示されます
  2. ESC でリトライできます

f:id:permil:20190303013326p:plain

べんり!!*1

これでだいぶタイプウェルと似た感覚でプレイできます。
Forefox/Chrome、Typing Test/Typing Test(advanced)、英語/日本語、あたりである程度使えそうなことを確認済です。
greasemonkey/tampermonkey あたりと組み合わせて使えばページ読み込み時に自動で適用もできます。

↑ で伝わらない人向けにもう少し細かく

ブラウザで 10FastFingers の Typing Test などのページを開いた状態で、

  1. 右クリックから開発者向けコンソールを開く
    • Firefox の場合、右クリック → 要素を調査 → コンソール
    • Chrome の場合、右クリック → 検証(I) → Console
  2. 上のスクリプトを入力欄に貼り付けて Enter
  3. 出題文字列の上に Key Strokes: 0 - WPM: 0 と表示されればたぶん成功
    • スクリプト貼付後はコンソールは消してしまって大丈夫です
    • ページを開くたびに貼り付ける必要があります
f:id:permil:20190303020706p:plain
Firefox の場合
f:id:permil:20190303021128p:plain
Chrome の場合

スクリプトについて

discord 上でいただいた2つのスクリプト*2を適当に混合しつつ、ESC でリトライ機能を足したものです。minify 書ける前はこんな感じです。

$(function() {
    $('#words').before("<div id='preview'></div>");
    update();

    $(document).keydown(function(k) { update() })
    $(document).keyup(function(k) { if (k.which == 27) { restart(); } })

    function update() {
        var realCPM = 0;
        var x = document.getElementById("words");
        var corrects = x.getElementsByClassName("correct");

        for(var i = 0; i < corrects.length; i++) {
            var correctword = corrects.item(i);
            realCPM = Math.round(realCPM + correctword.textContent.length + 1);
        }
        var realWPM = Math.round((realCPM / 5) / ((60.01 - countdown) / 60));

        if (realCPM < 0 || realCPM > 2000) { realCPM = 0; }
        if (realWPM < 0 || realWPM > 400) { realWPM = 0; }

        $('#preview').html("<h2><b>Key Strokes: </b>" + realCPM + " - " + "<b>WPM: </b>" + realWPM + "</h2>");
    }
})

ぶっちゃけ中味が気になる人が読めないほど複雑なことやってないんですが

  1. ページ読み込み時に Key Strokes と WPM の行を差し込む
  2. キー押下時にそれまでの打鍵数と速度を計測して更新
  3. ESC が押されたら reload (Tab → Enter を押したときと同じ挙動)

をしてるだけです。
$(document).keydown(function(k) { update() })setInterval(function() { update() }, 100} あたりで置き換えてもいいと思います。よしなに。

*1:使って問題ないことは、10FF関係者のAyasuさんにdiscord上のDMで確認済です。「ああそういうのみんな使ってるから大丈夫だよhaha」的な回答をいただきました。

*2:出自不明、10ff の discord に誰かが貼ったものっぽい

Typing Esports Network の discord で色を得る方法

というタイトルで書いてたのに昨日から今日で状況が変わってデフォルトで名前に色がつくようになってしまった。誤算。
名前の色を変える方法くらいに読み替えて読んでください。

Typing Esports Network とはなんぞや & 参加方法

タイピングの esports 化を目論む米国発信の discord チャンネルです。

KeNoさんの紹介ツイート
paraphrohn さんの紹介記事
公式サイト

参加にあたってタイピングが速い必要も特になく、

  • タイピングを練習している
  • 過去にタイピングを練習していたことがある
  • 練習は特にしていないがたまに e-typing をプレイする

など、タイピングをゲームとして楽しんだことのある人なら入ってみてよいと思います。
というか速い人だらけになると余計入りづらくなるので今のうちに入っとくのがおすすめです。
今なら新参の日本人にみんな興味持ってて優しいし構ってもらえるし入るなら今です。

この団体がどうなるか自体は正直まだよく分からないですが、

  • 普段絡みのない国内外のタイパーにカジュアルに絡める
  • 国内外のタイパーに名前を認知してもらえる

というだけでも価値があると思うので、discord 入れてる人は雑に入ってみてもいいと思います。 空気合わなかったら抜ければ良いです。discord 使ってない人は頑張って入れましょう。

本題

discord に入るとなんかやたらと名前がカラフルなことに気付きます。

f:id:permil:20190227235138p:plain

想像されたかもしれませんが、これはこのサーパーにおける称号 (Tier)です。*1
名前に色がつくと名前を覚えてもらいやすいしチャットもカラフルで楽しいのでみんな気軽に色をつけて行きましょう。*2

Tier(称号)の条件

次の3種類のタイピングゲームのどれかをプレイして、#roll-requestsチャンネルに記録を貼り付けることで認定してもらえます。*3

f:id:permil:20190227220836p:plain
現行の称号(Tier)リスト

たとえば 10FastFingers の通常モードで 80 WPM(毎分400打) を出すと Intermediate の称号が、
Typeracer の全レース平均で 70 WPM(毎分350打鍵) を出すと Advanced の称号がもらえます。*4

Typeracer のアカウントを既に持っている人はそれを貼り付けるだけで良いので一番おすすめです。
そうでない人は Twitter ログインだけでプレイできて、1回打ち切るだけで良い 10FastFingers(10FF) がおすすめです。

10FastFingers(10FF) の場合

ログイン

まず英語ばかり見ていると気が滅入ってくるので言語を日本語にしましょう。 左上の Languages から Japanese (日本語) を選択します。

f:id:permil:20190227235853p:plain:w300

あとはもう右上の ログイン/アカウントを作成 から Twitterでログイン を選択するだけです。アカウント登録も要りません。

f:id:permil:20190228000345p:plain:w250

プレイ

10FastFingers の場合は タイピングテストタイピングテスト(上級) のどちらか一方で Tier(称号) がもらえます。(上の表の 10FF-A が タイピングテスト(上級)、10FF-N が タイピングテスト)
上級の方が単語が多かったり大文字が多かったりするので速度条件は易しめです。

f:id:permil:20190228001344p:plain

たまに気付いたらログアウトされてることがあるので気をつけましょう。
スコアは、正しく打てたワードの文字数です。ミスがあるとそのワードが丸ごと0点になるので、長いワードはバックスペースでミスを修正した方がよいでしょう。 途中でやめてリトライしたい場合は Tab -> Enter でできます。
一定以上の速度 (100WPM?) で打つと右上のところに通知が来ます。

f:id:permil:20190228003023p:plain

不正対策のテストを受けろと言われているので、 https://10fastfingers.com/anticheatからテストを受けます。 Typeracer のテストと違って何回でも受けられるので安心して受けてください。 一定速度以上が出ればスコアがアンロックされます。

TypeRacer(TR) の場合

この調子で書いてると終わらないので端折ります。 mayo さん主催の typeracer 対戦会に参加してる人達はご存じだと思いますが、 こんな感じで他の人とレース形式で文章を打ち終わる速度を競うゲームです。

f:id:permil:20190301000127p:plain:w350

アカウントを既に持っている人は、右上の名前クリックからプロファイルページに行って、その url を提出するだけです。

f:id:permil:20190228002000p:plain

last 10 races(直近10レース、名前の横にあるやつ)が使われるのか Full Average(全レース平均) が使われるのかいまいち不明。情報募集。

f:id:permil:20190228002104p:plain

Nitro Type(NT) の場合

バックスペースの要らない Typeracer だと思えば大体合ってます。

f:id:permil:20190228235933p:plain

右上の Sign Up からユーザー名・パスワードを入力して Sign Up を押してアカウントを作成し、 Log In からログインすればよいです。はず。まだ作ってないので分からないけどたぶん。

f:id:permil:20190301000719p:plain:w200

Tier(称号)の申請方法

申請したいサイトのプロフィールページの url を #role-requests チャンネルに貼り付けつつ、 Requesting ~ みたいに言えばいいです。
たとえば 10FastFingers の通常モードで 80WPM を越えたので Tier2: Intermediate を申請したい場合は、

https://10fastfingers.com/user/1774633/
Requesting Tier2: Intermediate

みたいに言えば申請できます。称号の付与は手動なのですぐに反映されないこともありますが、少し待ってあげてください。 自信がなければ #日本語 チャンネルでやり方を聞けば誰かが教えてくれると思います。

ということで

認定に使われてるゲームの簡単な紹介を兼ねた、称号の申請方法でした。
操作に難しいところもあまりないので、気軽にチャレンジして名前に色をつけていきましょう!

*1:厳密には色がつかない称号(Specialist Roles)などもあるんですが、おまけみたいなものです。まずは色をつけましょう。

*2:というか色もなくて発言もない人ばっかりだと「日本人増えたけど全然参加してないやん...」てなって心象悪いので雑にプレイして色つけるだけでいいのでほんとお願いします(切実)

*3:日本のタイピングゲームでも認定してもらえるようにならないか?という話もしてるんですが、 日本人の参加者が増えないことにはなかなかそういう話も進みません。 「英語のやったこともないタイピングゲームとかやりたくねえ、俺はもっと実力が高いのだからこんな中途半端な称号はいらん」という人は多いと思うし完全にもっともなんですが、飾りだと割り切ってお願いします。

*4:海外のタイピングサイトの場合通例としてWPMは毎分打鍵数/5です。毎分600打鍵の場合600/5=120WPMになります。

Rough instruction to register e-typing and to play english version

For Japanese

Typing Esports Network で e-typing が流行りだしたので、海外の方向けに登録方法と参加方法を書いてみます。 Typing Esports Network については id:paraphrohn さんが詳しい記事を書いてくれたのでそちらにお任せします。

paraphrohn.hateblo.jp

discord の参加はこちらから。

discordapp.com

Instruction for register

For trial, you don't need to be registered. If you want to use Karte (Stats, only you can see), you need to be registered. If you don't, please see the next section.

  1. Access to e-typing english version

www.e-typing.ne.jp

  1. Press register button (move to register instruction page)

f:id:permil:20190223201933p:plain

  1. Press register button again (move to register page)

f:id:permil:20190223202319p:plain

  1. Fill out the requirements, and press register button

"Your goal" means "What do you want to do with your typing skill?" (merely it will be displayed in your Karte afaik).

f:id:permil:20190223203126p:plain

  1. You got registered and logged in

confirmation mail will be sent to your address. (but no confirmation needed) f:id:permil:20190223204024p:plain

Instruction for game play

To the game window

The page's appearance is slightly different whether you're registered or not.

if not registered

You just need to access here, and press start trial button. f:id:permil:20190223204359p:plain

if registered

  1. Login, if not logged-in yet f:id:permil:20190223204843p:plain

  2. and open game window, or move to other pages f:id:permil:20190223205625p:plain

In game window

  1. Press start button f:id:permil:20190223210425p:plain

  2. Press spacebar to start f:id:permil:20190223210606p:plain

  3. Type f:id:permil:20190223210850p:plain

  4. Result f:id:permil:20190223213050p:plain

  5. After save your score

You can also sent it to global ranking. f:id:permil:20190223212313p:plain

Instruction for unregister

  1. Go to setting page

  2. Scroll down, and fill out mail address and password, and press unregsiter button f:id:permil:20190223220532p:plain

Rules and Privacy policy (just in case, not translated)

https://www.e-typing.ne.jp/rules/ https://www.e-typing.ne.jp/privacy/

Macで本気でRealforceを使う

タイピングをガチってた割に打鍵感にそこまでこだわりのない方なので、 macbook では設定もめんどいし内蔵キーボードでいいか、Control と Command と Caps くらい入れ替えときゃいいだろ、 くらいの気持ちで雑に過ごしてきたのですが、

  • 首肩痛めたのでノートパソコンスタンド(こういうやつ)を導入した
  • → らキーボードの位置も高くなって打ちづらいので余ってた Realforce を繋いだ
  • → ら Windows 用のショートカットが身に染み込みすぎてて発狂した *1

のでなんとかして MacWindows 用外付けキーボードを繋いで Windowsキーバインドで使ってやろう*2 という記事です。

結論

お金と時間と空間に余裕のあって Mac しか使わない人

東プレ,第2世代「REALFORCE」のMac向けフルキーボード4製品を2019年3月に発売 - 4Gamer.net

REALFORCE for Macが出るらしいんでそれを待ちましょう。

別に 変換/無変換 とか使わなくね? むしろ Mac の 英数/かな の方がいいでしょという人

Windows の方の挙動を変えてしまいましょう。GoogleIME ならこの辺でいけそうです。

Windowsで英数/かな入力切替は無変換/変換キーでしよう | Techs Life

また将来的には Windows の 無変換/変換 の挙動が Mac の 英数/かな 準拠に変わるという話もあるらしいです。

[半角/全角]キー不要に? WindowsのIME切り替えがMac方式に - ITmedia NEWS

私の場合

KarabinerHyperSwitch 入れたらそこそこ苦痛なく使える状態になりました。

やったこと

とはいえ Windows はそこまでキーボードショートカットに頼る文化でもないので(多分)、 無意識で使おうとしてストレスになるようなショートカットはそこまで多くありませんでした。 のでその辺だけ上書きして、Mac でもそれっぽい挙動になるようにしました。

具体的には (Windows における)

  • Ctrl+A, C, V, Z, F, T, ...
  • 半角/全角
  • 変換, 無変換
  • Alt+Tab

あたりです。

Karabiner

Windows の Ctrl+英字キー 辺りのショートカットは Mac では大体 Cmd+英字キー あたりで違和感なく使えるので、 それだけなら Mac の標準機能でできます。(システム環境設定 → キーボード → キーボード → 修飾キー)

f:id:permil:20190124101707p:plain:w300

が、他の入れ替えは標準機能ではできないので Karabiner を入れます。 いわゆるキーリマッピングツールで Windows における窓使いの憂鬱とか DvorakJ みたいやつです。たぶん。

Karabiner を入れると認証を求められるので適当に許可します。 Karabiner-Elements.app が設定用アプリ、Karabiner-EventViewer.app は実際に発生しているキーコードのビューワーです。

f:id:permil:20190124102329p:plain

Karabiner を入れると別のキーボードデバイスとして認識されます。 ので修飾キーの入れ替えが戻ったり、内臓キーボードと Windows キーボードで Control の位置が違ったりして一瞬焦るんですが、 Karabiner 側でキーボードごとの設定を持てるので、Cmd/Control/Caps あたりシステムの設定を使わず Karabiner 側で個別に設定することにします。(既にシステム側で設定済の人は戻した方が混乱しないかもしれません。)

Control, Caps, Cmd

内蔵キーボードと外付けキーボードで修飾キーの配置が違うので個別に設定します。

内蔵キーボードでは Windows ユーザーが如何にも押しそうな位置に Caps があるので、Caps を押したら Cmd になるようにしてしまいます。 Simple Modifications から

  1. Target Device に Apple Internal Keyboard を選択し、
  2. Add Item → From key: caps_lock, To key: left_command

を設定します。

f:id:permil:20190124104732p:plain

同様に外付けの方では、caps_lock → control、left_control → left_command を設定します。

半角/全角

Complex Modifications → Add rule → Import more rules from the Internet (open a web browser)
の一番下の other examples から、
input_source_if,input_source_unless example
を Import し、Karabiner の方で Enable にすれば完了です。 この辺の下の方見ました。

変換, 無変換

まじめにシミュレートしようとすると面倒そうなんですが、 私は単に日本語入力後「カタカナに変換」「普通に変換」の用途でしか使ってなかったので、単に

Simple Modifications → Target Devices: For all devices から

  • From key: PCキーボードの無変換キー → To key: F7
  • From key: PCキーボードの変換キー → To key: spaceber

を設定するだけでごまかしてます。

入力してないときは無変換キーで入力モード切り替えるとかも Complex Modifications 使えばできんのかな、どうだろ...

(おまけ) PrintScreen, Alt+PrintScreen

頻繁に使うわけでもないし元のショートカットでも困ってないんですが Complex Modifications でできそうだったので試しに設定してみました。

  • PrintScreen → Cmd+Shift+3
  • Alt+PrintScreen → Cmd+Shift+4, 50ms後 Space

Windows のような最前面にあるウィンドウを自動でキャプチャする機能はないっぽいので、 Cmd+Shift+4 → Space でキャプチャするウィンドウの選択までを Alt+PrintScreen で行うようにしてみました。

実際の設定内容はこんな感じ*3 Complex Modifications の設定は設定ファイル(~/.config/karabiner/karabiner.json)を手動でゴリゴリいじるしかなさそうなので分かる人の参考になれば。complex_modifications → rules の下の配列に追加してけば良いです。 公式ドキュメント日本語の解説記事が大変参考になりました。

HyperSwitch

Windows の Alt+Tab に相当する機能は Mac には存在しないようなので、*4 それっぽい挙動を実現してる HyperSwitch を入れました。

手順はこの辺り。 ざっくり書くと

  1. インストール後起動すると認証を求められるので許可する
  2. 再度起動しライセンスに同意
  3. Preference → General から Run HyperSwitch in the background にチェック

で Option+Tab (Windows 用キーボードでは Alt+Tab) でウィンドウを切り替えられるようになると思います。 複数の操作スペース (マルチデスクトップ) を使っている人は Include Windows from other spaces にチェックを複数スペースをまたいだウィンドウの切り替えができるようになります。お好みで。

*1:どうやらこれまでは「macbook の場合はこのキーで 英字/かな 変換」みたいな理解をしてたのでそんなに不都合なく使えてたみたいです。Realforce 繋いだら完全に脳が Windows モードになって頭おかしくなった。

*2:コード書くときは7割方 mac になってしまったけれど、PC はゲーム機だと思ってるので心はいつも Windows ユーザーです

*3:本当は複数打鍵も設定できるみたいなのだけど GUI が絡むせいか delay 入れないと動かなかった。この辺の人もハマってるっぽい。

*4:同じアプリのウィンドウ同士を切り替える Command+F1 と、アプリ間を切り替える Command+Tab はあるが、アプリをまたがってウィンドウを切り替えるショートカットはないっぽい。たぶん。

改めて

なんかテンション上げすぎてタイピングのガチ記事ばっか書いてたら既に他のこと書きづらくなってるんですが改めて指針を表明しておくと

ここはタイピングブログではありません。雑にいろんなことを書きます。

よしこれで他のこと書けるぞ

WeatherTyping用月配列プラグインを作りました (v3.3, v3.4対応)

正確には作ったのは去年なんですが、バージョン3.3.0, 3.4.0で動作する形式に修正しました。
中指シフト系で最もメジャーと思われる月配列 2-263式用のkeymapも付属させておきます。

月配列プラグインと銘打っているものの、WTEditor.exe での配列作成に対応しているため 花配列中指NICOLA配列TWW配列 といった前置シフト系の配列であれば流用可能です。

バージョン3.2.1から公式にサポートされるようになった入力方式プラグインとして作られているため、 結果画面やロビーでもちゃんと配列名が表示されます。

f:id:permil:20181223221402p:plain f:id:permil:20181223221235p:plain

ただし、実装方針の都合上以下の制限があります。

  • シフトキーが2つまでしか使えない
    • そのため、薬指にもシフトを置くUx版や、多段シフトの必要な3-285改などには対応不可*1
  • D/K 以外にシフトを置く配列では、初回の配列選択時にシフトキーを設定する必要がある

使い方 (月2-263配列)

Windows デスクトップ版(WeatherTyping340.zip)をダウンロードします。解凍後WTを一度起動すると、本体と同じ階層に InputMethod ディレクトリができます。 f:id:permil:20181223181805p:plain:w320

次にプラグインページから WeatherTypingPluginTsuki.dll, Tsuki_2_263_v1.keymap の 2 つのファイルをダウンロードし、 InputMethod ディレクトリに両方とも配置してください。

問題なければこれだけで WT で 月配列 2-263 が選択できるようになっているはずです。

f:id:permil:20181223182335p:plain:w320

その他の配列での使い方

月2-263以外の配列で利用したい場合は WTEditor.exe で配列を作成してください。

f:id:permil:20181223190110p:plain

注意点は

  • 名前・著作者・バージョンを入力する
  • KeyFilter は permil:月配列 v1、InputFilter は Denasu System:かな v1 を選択する
  • 必要に応じてシフトキー1, シフトキー2 の双方に文字を割り当てる
  • 配列保存時にエラーが出る場合は、割り当て忘れている文字がないか確認する (特に、。・「」など)

あたりです。

保存に成功すれば、作成した配列が WT で選択可能になっているはずです。
ギャルメロンパン配列のような D/K 以外にシフトキーを置く配列の場合は、忘れずにシフトキーを変更しましょう。

f:id:permil:20181223191144p:plain

*1:WTEditorでの配列編集を諦めればコード側で対応は可能だと思います。コードは公開しておくので参考になれば。

JISかなタイピング動画

昔の動画を取っておくと面白いという知見を得たので運指いじる前に撮っておくことにしました。
特に変哲はないです。

運指

運指です。かわいそうなくらい薬指が動きます。

f:id:permil:20181213011454p:plain:w400