JavaScriptでいろいろやってみた 中編

前回のブログで、「JavaScriptでいろいろやってみた 前編」として、文字サイズ変更機能とクイズページについて、工夫した点や苦労した点、課題点を紹介しました。

今回はその中編です。

目次

1.文字サイズ変更機能

2.クイズページ

--------------今日はここから

3.英語版ページ

4.用語解説ON/OFF機能

5.画像拡大機能

6.現在地表示

3.英語版ページ

↑実際の英語版ページ

英語版ページに使われているJavaScriptって何？と思った方もいるかもしれませんが、これは、「未来プリンター」の英語版ページ・日本語版ページを遷移する際に使用する、サイト右下設定ボタン内の機能に使っているということになります。

「え、ただリンクで飛ぶだけじゃん」、とおっしゃらないでください。(あ、誰もそんなこと言ってないか)

これは結構大変なことなんです。

というのも、私たちのウェブサイトでは、あるページから設定ボタンで英語版ページに飛んだ際、一旦英語版ホームへ飛ぶのではなく、今いるページの英語版に移動することが出来ます。これはもちろんサイトの利便性を考えてのことなのですが、JavaScriptを使わずにやろうとすると、相当な労力が必要です。なぜなら私たちは、各ページに遷移用ボタンを追加した後、そのリンク先が今いるページの英語版になるように、いちいち全てのhrefを書き直さなければいけません。

そこで私は、JavaScriptで、今いるページのパスを取得し、その先頭に英語版が格納されているフォルダであるenを書き加え、遷移ボタンのhrefの部分に出力するというプログラムを作成しました。これにより、ページごとにいちいちリンクを書き換える必要がなくなりました。ちなみに英語版に現在おり、日本語版に遷移する際には、パスの先頭からenを取り除いています。

工夫した点は、英語版に遷移した後に、日本語版で自分がいたページの地点まで、自動でスクロールするようにしたところです。sessionStorageを用いて、以前いた日本語版ページにおけるスクロール割合を保存し、その値と、現在の英語版ページの高さとを掛け合わせることで、スクロールするべき位置を把握し、動かしています。これにより、今読んでいたところの続きから、直ぐに、別言語で読み始めることが出来るようになりました。といってもどれほどの人がページの途中から言語を切り替えるのかという話ですが...

まあ実際のところ、この機能は自分たちのために作ったという部分もあります。日本語版から英語版への翻訳を進める中で、あれ？、このページのこの部分、日本語だとどう表現してたっけ？ということが多々あり、この機能を付けたおかげで、それを瞬時に確認できるようになりました。

こちらのJavaScriptについては、コードも結構シンプルで、変な記述方法も行っていないので、(自分では、)課題点は特にないかなと思っています。

4.用語解説ON/OFF機能

↑実際の用語解説ON/OFF機能

青色の文字にカーソルを重ねた際に表示される吹き出し上の解説を、表示するか/非常時にするか、を切り替えられる機能です。大会の方から頂いたアドバイスで、この吹き出し状の解説機能について、良い評価を貰った一方、別に要らないのではないか(解説ページへ飛ばすだけで良い)というご提案もいただきました。たしかに、これらの吹き出しのせいで、逆にページが読みにくく感じてしまう部分があったのも事実です。というわけで、

だったら選べるようにしてしまおう!!!

と、この機能を実装しました。文字サイズ変更機能と同じく、他のページに移動後も、この吹き出しのON/OFF設定を保持することが出来ます。

苦労した点は、どうやって吹き出しを消すかです。吹き出しのボックス自体は自動コーディングて作っていたため、全て同じ構造でしたが、class名による配列での要素取得を、当時私はまだよく理解できていなかったため、それを実現するのに大変苦労しました。

また、原因不明のバグ(一部ページに移動すると、吹き出しの設定が保持されなくなってしまう)が発生し、解決に半日を徹しました。一部のページで発生するバグであることから、そのページの特徴を調べていくと、どうやら、用語解説の吹き出しが一つもないページにおいてのみ、このバグが発生することが分かりました。試行錯誤の末にたどり着いたバグの原因は、

「吹き出し設定の保持に関する処理を、実際に吹き出しに対して出力を行うif文の中に入れていた」

ことにありました。どうりで吹き出しが一つもないページでのみバグが発生していたわけです...

工夫した点は,JavaScriptとはあまり関係ありませんが、切り替えボタンの見た目の分かり易さです。ボタンのイラストに工夫を凝らし、それが何のボタンなのか？今どういう状態なのか？が直感的にわかるようにしました。

今後への課題としては、先ほど紹介したバグの解決に、多大な時間がかかってしまったことかなと思います。まずは広い範囲から、バグの原因を特定していくべきなのに、当初は、ここだろうとあたりを付けて、非常に狭い範囲でバグの原因を探していたため、結果的には解決に物凄い時間を要してしまいました。

長くなりそうなので、今回のブログはここまで。

残りの

5.画像拡大機能

6.現在地表示

については、次回のブログで紹介します!!!お楽しみに。