【第五回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【画像追加】

JavaScript
この記事は約3分で読めます。

この記事の最終更新日: 2021年3月16日

【第五回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【画像追加】

はじめに

みなさんこんにちは。daigoroです。

現在、TOEFLタイピングアプリを、JavaScriptで作成中です。

今回は大幅なアップデートを行いましたので、報告いたします。

タイピングアプリはこちらから遊ぶことができます。

タイピングゲーム

2021年3月16日追記

最新のタイピングアプリはこちらです。

Heroku | Application Error

前回の記事はこちら

スクリーンショット

【第五回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【画像追加】
【第五回】JavaScript初心者が最強のTOEFLタイピングアプリを作りたい【画像追加】 メニュー画面

追加機能

今回は以下の機能を追加しました。

  • 英単語に画像を追加
  • メニュー画面にロゴを追加
  • 多重配列による処理高速化・保守性向上

アプリに画像を追加

英単語学習には、絶対に画像と音声があった方が良いというのが私の見解です。

そのため、画像追加は絶対にしたかった機能のひとつです。

画像を準備するのにかなりの時間がかかりますが、それでも必要だと感じています。

課題として、初回読み込み時やマシン性能などによって画像が遅れて表示されることがあります。

処理を見直したり、良いサーバに配置するなど、今後は対策が必須ですね。

画像サイズは「縮小一括」というフリーソフトを使って圧縮しました。

また、事前に画像を取得できる、プリロードという技も使っています。

こちらのサイトを参考にしました。

メニュー画面にロゴを追加

メニュー画面の「名詞」「動詞」「形容詞」「副詞」に、

かわいらしいロゴを配置しました。

このようなロゴは「ロゴメーカー」というサイトで無料で簡単に作成できます。

多重配列を使ってみる

今までは、英単語、日本語の意味でそれぞれリストに情報を入れていました。

しかし、これだとコード量が膨大になり、なにより管理が大変です。

const textLists = [
    'habitat',
    'sculpture',
    'past',
    'independence',
    'clerk',
    'countryside',
    'trial',
];
const meanLists = [
    '(動物や植物の)生息域',
    '彫像',
    '過去',
    '独立',
    '事務員',
    '(通例 the ~)田園地帯、田舎 ',
    '試み、裁判',
];

そこで、次のような多重配列にデータを格納するように変更しました。

英単語、日本語、画像ファイル名をまとめて管理できるようになりました。

コード量も3分の1未満まで減らせたのスッキリです。

const  vocabulary_data = [
    ['habitat', '(動物や植物の)生息域', 'habitat.jpg'],
    ['sculpture', '彫像', 'sculpture.jpg'],
    ['past', '過去', 'past.jpg'],
    ['independence','独立','independence.jpg'],
    ['clerk','事務員','clerk.jpg'],
    ['countryside','(通例 the ~)田園地帯、田舎 ','countryside.jpg'],
    ['trial','試み、裁判','trial.jpg']
];

今後は

アプリがかなり実用的になってきたので、どんどん単語を追加していこうと思います。

まだデザインが無骨なので、こちらもおしゃれにできたらいいですね。

以上、daigoroでした。

コメント

タイトルとURLをコピーしました