JavaScriptでタイピングゲームを作ろう講座

下のボタンで講座で作ったローカルストレージデータの一括削除が出来ます。 ただし希望の街J_TOWN内のローカルストレージデータも消えます

講座内で動的にHTMLの変換処理をしていますが、 HTMLの出力の仕方によっては脆弱性が生まれます。

詳しくはIPA が参考になると思います。

その中でも脆弱性体験学習ツール「AppGoat」は実際に試す事が出来るので かなり役立ちます。

ソフトの完成サンプル、講座のサンプルの不具合や脆弱性を発見した場合はお手数ですが、 junya58@hotmail.com までお知らせください。

講座での不明点等の個々の質問は答えられないのでご了承ください。

ページの中身を細かくすればするほど取っつき辛くなっている気がしてなりません。 1ページの量が多すぎるのもちょっと気になりますね・・・。 自分で見ても解り辛いとは思うんですが、出来あがったものを崩すのは難しいです。

(2014/06/08)

スポンサードリンク

2016/08/01: タウンタイプライブラリで バグが見つかった為、修正しました。
最新パージョンは1.4.3です。

2015/07/19: はじめに、 と講座のメインページを更新。

2015/06/13: 入力方法自動判別「ん」「その他」「記号等」 をアップ

2015/05/22: 入力方法自動判別「っ」 をアップ

2015/03/20: 単純なキー入力大文字、小文字、記号
をアップ

2015/03/14: 問題のセット、スタート機能
同じ問題を出さない
をアップ

2015/03/06: 画面遷移、問題リスト、問題格納
問題文の加工
をアップ

2015/03/03: スタイルの指定をアップ

2015/02/25: 画面の骨格をアップ

2015/02/22: 徐々に作っていく講座タイトルを一部掲載しました。
それに伴ってはじめにを更新。

2015/01/29: JavaScriptクイズ
のページを作成。

2014/07/19: タウンタイプライブラリ、 で『ん』+『記号』の処理でおかしい所があったので修正しました。
最新バージョンは1.4.2です。

2014/07/04: 同じ問題を出さない(方法1)
ローカルストレージに記録する の文章を修正。

以前ページの配色を変更したせいで、 文字の表現方法のサンプルが 見えない状態になっていたので修正しました。

2014/06/21: ページの配色を変更しました。
まだ調整中ですが・・・。

2014/06/20: 長文に対応する、 をアップ。

2014/06/13: 複数の文字列に対応する3、 をアップ。

この講座の項目の完結です。

2014/06/08: 複数の文字列に対応する2、 をアップ。

実際のスクリプトを記述しています。

2014/05/31: 複数の文字列に対応する1同じ問題を出さない(方法2)、 をアップ。

問題をすべて出してからリセットする方法です。

2014/05/23: HTML、CSS、JavaScriptの それぞれの役割 の追加とページ内容を微妙に直しました。

2014/03/22: タウンタイプライブラリ、 のキーイベントキャンセル処理を一部変更。

最新バージョンは1.4.1です。

2014/03/17: ローカルストレージに記録する で配列データ全部を保存する場合について追記しました。

2014/03/09: タウンタイプライブラリ、 で『ん』の変換テーブル更新の条件がおかしかった為、 修正しました。最新バージョンは1.4です。

2014/03/09: タウンタイプライブラリ、 でonekeydownでも使えるようにしました。
最新バージョンは1.3です。

2014/03/08: 様々なブラウザに対応させるタウンタイプライブラリ、 のIE11がIEと判定出来るようブラウザ判定を修正しました。

ブラウザ判定ではなく機能テストで処理分けする方法も載せました。

2014/03/07: オブジェクトの実践例文字の表現方法、 をアップしました。

2014/03/06: 共通講座のJavaScriptの基本をページ分けと内容を修正しました。 共通講座にオブジェクト指向についての項目を作りました。

タウンタイプライブラリの 活用サンプルでHTMLの出力方法を変更しました。

2014/02/28: タウンタイプライブラリの説明 をアップ。

ページ内でタウンタイプライブラリのダウンロードが出来ます。

入力方法自動判別機能3 内のro_machange()関数内の処理で一部処理間違いがあったので 修正しました。

2014/02/16: 完成サンプル完成サンプルのダウンロード を修正。

かな入力時の「い」の小さい文字が打てませんでした。 最新バージョンは2.6.3です。

2014/02/14: 入力方法自動判別機能3 をアップ

2014/02/03: 完成サンプル完成サンプルのダウンロード を修正。

かな入力に変更した時にjwordに問題の文字を入れていなかった為、 正解時の処理で不具合が発生していました。 かな入力設定時の問題文を作成する時にjwordに文字を入れるよう修正しました。 最新バージョンは2.6.2になります。

2014/01/17:応用講座 文字列を画像にする入力方法自動判別機能2 をアップ。

2014/01/03:応用講座 画像ボタンにするをアップ

2013/12/27:応用講座 入力方法自動判別機能1一定時間毎に処理をする をアップ。

2013/12/20:応用講座 画像表示・アニメーションをアップ
改良の小ネタ集に『棒グラフで表現』を追加

2013/12/13: はじめに利用規約、 応用講座ローカルストレージに記録するを修正。 応用講座データを最小限にして保存する をアップ。

2013/12/08:応用講座 改良の小ネタ集に 『ソフトからはみ出した要素を表示しない』のネタを追加

スポンサードリンク

2013/12/06:基本講座 JavaScriptからテキストフィールドを操作5つの文字列の中からランダムに選んでテキストに入れるキーボードから打ったキーをテキストに表示、 の文章の修正と追加。

応用講座の『入力文字ごとに正解にしたい』を ひらがな一文字毎に正解にする に名称変更しました。

『ぎゃ』等の2文字を1文字扱いして正解数を増やしていた箇所を 『ぎゃ』であれば正解数を2増やすように変更しました。 『ぎ』までの時点で正解数が増えず『ぎゃ』まで打たないと 駄目なところは変わっていませんが・・・ 最新のソフトバージョンは2.6.1です。

2013/11/29:応用講座 onkeydownで小文字、記号を判定する をアップ。

2013/11/22:応用講座 ローカルストレージに記録するに、 6.ひとつのローカルストレージに複数のデータを保存するの項目を 追加。

JavaScriptの基本で変数の項目の配列、 条件文の条件式について、 関数の戻り値を返すreturnの内容を追加しました。

2013/11/15: 応用講座 間違えた文字をカウントするのアップ、 完成サンプル完成サンプルのダウンロード、 動的にHTML変換している講座のページでinnerHTMLで 画面書き換えしている所をcreateElement等を使ったやり方に 一部変更しました。

innerHTMLでの書き換えだと脆弱性が発生する可能性もあるので・・、 今の所ユーザー入力をそのままHTMLとして出力させている箇所はないと思うのですが、 どこで発生するかわからないので変更しました。 脆弱性を発見した場合はメールで教えてください。 最新のソフトのバージョンは2.6です。

2013/11/04: 改良の小ネタ集 タイピング終了ボタンのフォーカスを外す方法を 変更しました。

完成サンプル で読み込みボタンを押さないと保存したキーセッティングが 読み出せなかったのを変更して、ソフト開始時に読み込める ようにしました。 最新のソフトのバージョンは2.5.6になります。

2013/11/03: 完成サンプル完成サンプルのダウンロード を更新。

ro_machange()関数内を修正とhenkanテーブル、ro_matable、 hiraganatableに文字を追加して、 小さい文字(ぁ、ぃ、ぅ、ぇ、ぉ、ゃ、ゅ、ょ)を単独で 問題に入れられるようにしました。

restart関係の修正漏れがあり、データの削除が出来ない状態 になっていたのを修正しました。

deletedata()関数内の削除関係のボタンを押した時にrestart==0の時だけ ボタンが作用するようにしていた箇所を削除し、メイン画面 での削除関連ボタンを押した時の条件にrestart==0を 加えました。 最新のソフトのバージョンは2.5.5になります。

2013/11/02: 完成サンプル、 でオプション画面時にもSpaceキーでスタート処理が発生していた為 修正しました。

画面移動したらrestartに-1を入れ、メイン画面に戻ったら restartを0に設定するようにしました。 最新のソフトバージョンは2.5.2になります。

これ以前の更新履歴はこちらです。

このエントリーをはてなブックマークに追加