- 使用言語: HTML, CSS, SCSS, JavaScript
- ライブラリ: Email JS
ホーム画面では、徳川将軍の名前が次々に表示される。時間がカウントダウンされ、答えが表示され、また次の問題へ行く。止めない限り、無限に続く。下のボタンで、スキップをしたり、一時停止したりすることが可能になっている。また、ストップを押すと完全に停止する。
アバウトの画面では、15人の将軍に関する解説と、肖像画または写真を紹介している。ここで人物を確認し、ホーム画面に戻ってテストをするために作ったページである。
コンタクトの画面で、実際に文言を入れて送信すれば、私のメールに届くようになっている。未入力の項目があれば、アラートが出るようになっている。
クイズ作りから始まった。クイズには時間制限があった方が面白いので、そのカウントダウンの実装のために試作品を作ってみようと思い立ったのがきっかけである。徳川将軍を選んだのは当初はさほど意図はなかった。クイズにする際にほど良い数で誰もが知っていそうなものを選んだだけである。しかし、開発を進めていく中で徳川将軍について私自身も調べることが増え、次第に興味が湧いてきた。アバウトの画面などは、浪人時代に得意だった日本史を思い出して楽しくなり、ついつい解説を細かいところまで記述してしまった。アバウト画面が完成すると、ある程度の規模になったので、フォーム画面から実際に私のメールに送信が可能なようにしようと思い、ライブラリを使って実装した。
-
カウントダウンについて
カウントダウンの実装は、セットタイムインターバルで作っている。インターバル内で、表示する数字を条件分岐に入れ、無限ループを実現させた。実は、当初はセットタイムアウトを使用したのだが、これでは一度きりで処理が終了してしまうことに加え、非同期処理でその後に続く動作をストップさせる必要があり、かなりてこずった。ジェネレータを使うことで実装自体は実現できたが、コードがあまりに冗長になったために違う方法を模索した結果、インターバルでいとも簡単に実現できることに気付きはっとした。 -
カウントダウンの時にくるっと回るアニメーション
JavaScriptのアニメーションAPIを用いて実現した。インターバルの切り替わりのタイミングで、定義したアニメーションを挿入することで、毎秒ごとに回るようになっている。ここで苦労したのが、z-indexをちゃんと定義しても、表示するデバイスによってはカウントダウンの数字が回転する青色の背景の後ろに回り込んでしまうことだった。解決策としては、JavaScriptのアニメーションの動きの中で、背景をマイナスZ軸方向にトランスレートすることで、重ならないようにした。 -
アバウト画面のインターセクションオブザーバー
インターセクションオブザーバーの存在は一応知っていた。しかし、何となく構文がややこしく忌避していたのだが、今回使ってみようと思って使用した。そこで思ったことが、ほとんどはテンプレート化でき、次回使う時もほんの一部を書き換えればリサイクルできそうである。 -
コンタクトフォームのメール送信
ライブラリを使用しなくてもJavaScriptでメール送信ができると思っていたが、間違いだった。サーバー側との相性は良くないみたいで（フロントエンド中心の言語だから当たり前だが）、ライブラリを使用することで対応した。Email JSなるものを発見し、使用してみた。そのサイトにテンプレートがあり、それを自分のコードにオリジナルに書き込んでいった。成長を感じたのが、テンプレートのコードが何をしているのが読め、どこを修正すれば自分のコードで動くのかが瞬時に判断できたことである。自信がついた。 -
thisについて
thisは本当にややこしく、色んな場面でthisと書くことが多いが、果たしてこのthisは何をさすのか？と混乱することが多かった。クラスを使ううちに、だいぶんthisにも慣れて来て、thisが使われる状況に応じてbindを行ったり、_this = thisと、代入することで対処できるようになってきた。まだ、完全にthisを理解しているわけではないが、一応は大きな成長である。アロー関数では、thisの挙動にまた違いが出てくるので、このあたりの理解も深めたい。基本的にfunctionを使って関数を宣言しているので、アロー関数を使ってコードをすっきりさせたいのだが、thisの問題にあたる気がして今回は使用を躊躇した。次回は是非挑戦したい。
・コードの可読性に自信がない。第3者に見てもらうことが少ないので、自身のコードのリーダビリティに疑問が残る。
・メール送信の際、未記入の項目の色を変えたり、メールアドレスが無効だった時の対策なり、細かな実装はしていない。時間があれば、このあたりも改変していきたい。
・クイズの順番は1から始まり、順番通り続く。これにシャッフル機能を持たせたいが、他の実装に時間と労力を取られ、未だシャッフル機能には手をつけていない。
・クイズの際に、将軍の画像を一緒に挿入できるとよりおもしろくなると思った。これも、まだ着手できていない。