タイピングの練習ができるサイト e-typing

タイピングの練習ができるサイト e-typing をご紹介します。とはいっても、けっこう有名なサイトみたいでwikiにも載っていますし公式サイトでも会員登録数が100万人を超えたとか100人に一人がe-typingを使った経験がある!?などと書かれています。
私がこのサイトを知ったきっかけが何だったのか思い出せないのですが、知ることができてよかったと思っています。この記事も誰かが e-typing を知るきっかけになればと思います。

公式サイト

インターネットでタイピング練習 イータイピング

e-typingのおもなコンテンツ

  • 腕試しレベルチェック
  • 今日の指トレ
  • 今月のタイピング
  • 練習メニュー
  • タイピングバラエティ

これらのコンテンツについて個人的な感想を書いてみます。あくまで個人的なことですのであしからず。
e-typingのメインコンテンツとなるのが腕試しレベルチェックだと思います。ランキング形式になっていて、いつでもどこでも何度でもチャレンジできます。このランキング要素がe-typingの目玉の一つだと思います。順位が上がると楽しいですからね。また、ランキングの上位陣のスコアを見ると驚きます。順位が2桁台だときっとランキングを見るのが楽しいだろうなと思います。私はだいたい3桁台後半なので想像しかできませんが。
今日の指トレは続けていた時期もあったのですが、今はやらなくなってしまいました。反射神経はよくなりそうですがなんかあまり楽しめないなと。
今月のタイピングもランキング形式になっていて、こちらは長文を打つことができます。これけっこう楽しいです。途中で間違えるとどこから打ちなおせばいいのか分からなくなることがありローマ字で書かれた文章から探すことになるのがたいへんですが。ようは間違えなければいいのですがこれがなかなか。
個人的にお気に入りなのが練習メニュー応用練習のなかの短文練習15文字長文練習です。長文練習今月のタイピングとほぼ同じですが、ランキングがないのであせったりすることもなくミス0を目指しつつお題の童話や名作を読みながら打つことができます。一定のリズムでタイピングを続けているとなんか落ち着いてくるんですよね。

ちなみに腕試しレベルチェックの結果は以下のように表示されます。スコアは正確さを重要視したタイピングの指標(詳細は謎)、WPM(words per minute)は一分あたりの入力文字数ということです。

蛇足になりますがこの記録は今の私のほぼ限界です。このときランキング3桁台後半でした。

メリット

タイピングの練習をすることで得られるメリットを考えてみました。

  • タイピングが速くなる(タイプミスが減る)
  • ストレス解消
  • 手を使うことで脳が刺激される(かもしれない)
  • 爪が伸びたのが分かる

まとめ

過去メールを調べてみたところ私は今年の8月26日にe-typingに登録しました。これまで毎日こつこつ練習してきたわけではなく、練習しても効果が見えなくて飽きたり、しばらく放置していたこともあります。でも最近復活しました。速度ではなくミス0を目指すようにしたら楽しくなったのです。速度と違いミスの数を目標にすると達成感を毎日得ることができます。これってけっこう大きなポイントだと思っています。また、練習の効果を示せるようになったらブログで紹介したいと思います(はたしてその日は来るのだろうか?つづく)。

JavaScriptのapply()とcall()

いつも忘れるので具体的な使い方を残しておこうと思います。自分のためのメモで目新しいことは何もありません。記事の最後にapply()とcall()の引数の型がどっちが配列でどっちが可変長引数リストか忘れない覚え方を載せました。そもそも間違えないとツッコまれそうですが、もし私と同様のお悩みをお持ちの方がいらっしゃいましたら、ご一読いただけたらと思います。

参考サイト

MDN(Function.prototype.apply)
MDN(Function.prototype.call)

apply(), call()とは

JavaScriptの関数はオブジェクトであり、すべての関数がプロパティとメソッドを持っています。このデフォルトで実装されているメソッドのなかにapply()とcall()があります。

JavaScriptの関数を実行すると、呼び出し元から引数とともにthis(コンテクスト、またはコンテキスト)が暗黙的に必ず渡されます。apply()とcall()はこのthisを自由に設定できるメソッドです。

構文

fun.apply(this, array);
引数:コンテクストと配列1個
fun.call(this, arg1, arg2, arg3, …);
引数:コンテクストと可変長の引数

使い方

最大値/最小値を取得する

var array = [0, 6, 12, -1, 3];

// 自力で検出する場合
var max = min = array[0];
for (var i=1; i<array.length; i++) {
  if (max < array[i]) max = array[i];
  if (min > array[i]) min = array[i];
}
console.log(min, max);	// -1 12

// Mathメソッドを使う
// 比較対象の個数が定数の場合はそのまま使える
// でも10個とか100個とか書きたくない
// ちなみに第一引数は使用されないのでnullでも問題なし
Math.min(Math, [0], [1], [2], [3], [4]);
Math.max(Math, [0], [1], [2], [3], [4]);
console.log(min, max);	// -1 12

// Mathメソッドのapply()を使う
// 配列を渡すことができる
var min = Math.min.apply(Math, array);
var max = Math.max.apply(Math, array);
console.log(min, max);	// -1 12

配列のようなオブジェクトに配列メソッドを使う

配列のようなオブジェクトは本物の配列ではないため、直接Arrayクラスのメソッドを使うことはできません。Arrayクラスのメソッドを使うには、Array.prototypeの配列メソッドからapply()またはcall()を呼び出し、第一引数のコンテクストに配列のようなオブジェクトを指定します。

配列のようなオブジェクト

argumentsオブジェクト
関数の引数
getElementsByClassName(“クラス名”)
指定したクラス名を持つ要素
getElementsByName(“name属性”)
指定したname属性を持つ要素
getElementsByTagName(“タグ名”)
指定したタグ名を持つ要素
querySelectorAll(“セレクタ”)
指定したセレクタにマッチする要素

よく使う配列メソッド

slice
配列の部分取り出し(元の配列を変更しない)
forEach/map
配列の各要素に対して関数を実行
// ex. 配列のようなオブジェクトを配列に変換
// 配列のメソッドが使えるようになる
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);	// 上記と同じ式

// ex. 指定したクラスを持つすべての要素のテキストを書き換える
// 上記の変換を使って配列のメソッドforEach()を呼び出す
var elems = document.getElementsByClassName("counter");
var array = Array.prototype.slice.call(elems);
array.forEach(function(elem) {
  elem.textContent = "0";
});

// これをcall()メソッドを使って書き直すと以下のようになる
var elems = document.getElementsByClassName("counter");
Array.prototype.forEach.call(elems, function (elem) {
  elem.textContent = "0";
});

// ex. セレクタで指定されたすべての要素のクラスを書き換える
// querySelectorAll()は便利
var elems = document.querySelectorAll(".signal");
Array.prototype.forEach.call(elems, function(elem) {
  elem.classList.remove("red");
  elem.classList.add("blue");
});

// ex. セレクタで指定されたすべての要素のサイズを配列にして出力する
// map()の場合もforEach()と同じように使える
var elems = document.querySelectorAll(".signal");
var size = Array.prototype.map.call(elems, function(elem) {
  return {w: elem.offsetWidth, h: elem.offsetHeight};
});

// ex. 可変長の引数を使用する関数を呼び出す
function sum() {
  for (var i=0, n=0; i<arguments.length; i++) {
    n += arguments[i];
  }
  return n;
}
var answer = sum(2,4,6,8,10,12,14);
var array = [2,4,6,8,10,12,14];		// 配列で扱いたい
var answer = sum.apply(this, array);	// そんなときはapply

apply()とcall()どっちを使う?

引数の型の違いがあるだけでどっちも同じように使えます。どっちを使ったらいいか迷ったら、コードがきれいに見えるほうを採用すればいいと思います。

apply()とcall()の引数の型がどっちが配列でどっちが可変長引数リストか忘れない覚え方

どっちがどっちか覚えられず悩んでいたときがありました。読み方、連想、語呂合わせ… いろいろ試しましたが効果がなく、毎回ググるしかないのかとあきらめかけていました。そもそも関数名が(apply: 適用する)、(call: 呼ぶ)とか、引数の型にぜんぜん関係ないではありませんか。単純にcallbyAry()やcallbyArg()みたいにしてくれていれば… そんなしょうもないことを考えていたある日のこと、突然天啓を授かりました。
その内容は以下の図式になります。

apply >>> arrly >>> array === 配列

これを見たらもう忘れないと思います。
以上です。

HTML5 Canvasの勉強

HTML5のCanvas要素の勉強のために作成したサンプルが少したまったのでご紹介します。

globalCompositeOperation

Canvasの魅力的な機能のひとつに合成処理があります。図形などを描画するときにglobalCompositeOperationプロパティを設定することで、描画先となるCanvasの内容と合成処理を行い、その結果を描画することができます。

合成とクリッピング(MDN)
globalCompositeOperation プロパティ(HTML5.jp)

ドキュメントを読むだけだと眠くなるので動作確認用のコードを書いてみました。動かす場合は現在大きいウィンドウサイズにしか対応していないので、お手数ですがCodePenに飛んで頂けたらと思います。

See the Pen canvas by senmyou (@senmyou) on CodePen.

lighterやmultiply、screenなど、重なった色を演算して描画するのっておもしろいですね。使いこなせると楽しいかも。

Memo

  • globalCompositeOperationプロパティを指定しない場合はデフォルトとしてsource-overが設定されます。source-overはこれから描画しようとする図形をCanvasの内容の上に描く設定です。
  • 気をつける点としては、globalCompositeOperationプロパティやglobalAlphaプロパティはいったん関数を抜けたりgetContext(“2d”)やbeginPath()を実行しても、値はクリアされずに保持されているということです。つまり「普通に描画するのでglobalCompositeOperationをわざわざ設定することないよね」と思っていても、前に合成処理を行っていればそれが反映されてしまいます。globalCompositeOperationプロパティやglobalAlphaプロパティを設定した場合は、描画後にデフォルトに戻すか、またはsave()/restore()で状態を管理しないとトラブルの元になります。

アニメーション+残像効果

Canvasアニメーションのサンプルです。

  • arc(), fill()でsin/cos式の軌跡を描画
  • requestAnimationFrame()によるブラウザの再描画タイミングに合わせた描画
  • globalAlphaによる透過設定でCanvasを塗り重ねていくことで残像を表現

See the Pen canvas by senmyou (@senmyou) on CodePen.

テキストのネオン効果

ネットでCanvasの使い方を探していたときに素晴らしいサイトを見つけました。

canvas のタイポグラフィ効果(HTML5 Rocks)

魅力的なサンプルに詳しい解説。情報の量、質ともにすごいと思います。そして、ありがたいことにサイトの下の方からソースコードを一式ダウンロードできます。
これをまねてみることにしました。
。。。とはいうものの、やってることが私にとってレベル高過ぎ。ちょっとあきらめかけましたが、根性で無理やり簡略化して動かしました。きっとなにか足りない部分とかあるかもしれませんが、とりあえず、ということで。

See the Pen canvas by senmyou (@senmyou) on CodePen.

これ、CSSでもtext-shadowを使って簡単にできるんですよね。苦労してコーディングしたのにこのままじゃ報われないということで、JavaScriptを活かしたサンプルを無理やり作りました。

See the Pen canvas by senmyou (@senmyou) on CodePen.

。。。ちょっと微妙ですかね。ソースの方はさらに微妙な具合に仕上がってます。

もうひとつ、ジッター効果なるものもまねをさせて頂きました。

See the Pen canvas by senmyou (@senmyou) on CodePen.

。。。うつくしぃ。

一番最後の「残像—ジェネレーティブ効果」も素晴らしい作品でまねてみました。簡略化してなんとか表示できたのですが、これだけは内容がよくわからないため載せるのはあとにしようと思います。

CanvasってAPIの数自体はそんなにないですし使い方もわりと簡単なんですが、ネットやCodePenなどで芸術的な作品を見るたびに驚きと感銘を受けます。さしあたり、CodePenで「canvas」を検索するとたくさんでてきますので、ご覧になってみてはいかがでしょうか。それでは、すてきなキャンバスライフを。