ある日、”‘地名生成ツール’が動かない”という連絡があり、手持ちのAndroidで確認してみました。すると、FirefoxとChromeでは正常に動作し、ブラウザではボタンが表示されないことが判明したのです。

表示されるはずのボタンがありません。

その後PCのIEで見ても、これと同じことが起こっていました。この原因を調べた結果、以下の記述に問題があることが分かりました。

function button(bool,msg,obj=document.form0.button1) {
  obj.disabled = bool;
  obj.value = msg;
}

一見何の問題もないように見えますが、1行目の

obj=document.form0.button1

という記述が引っかかっていたのです。これは、引数を変数に代入するもので、変数objにはボタンオブジェクトをあらかじめ代入し、参照できるようにするはずでした。これを、

function button(bool,msg) {
  var obj = document.form0.button1;
  obj.disabled = bool;
  obj.value = msg;
}

とすると、うそのように解消したのです。どうやらこの記述方法は、AndroidのブラウザやInternet Explorerでは動作しません。

原因の解明には苦戦しましたが、修正できたのでよしとしましょう！

“こーぐばこ”内の”地名生成ツール“を更新しました。変更点は以下の通りです。

• 処理速度の向上
• Twitter投稿用のボタンを設置
• 文字の追加や削除

順に説明します。

処理速度の向上

生成地名数を10、20、30個の中から選択できた時代から残っていた不要な関数の削除や、処理方法を変更することにより、処理速度が向上しました。performance.now()を使用して生成時間を比較した結果、更新後は更新前よりおよそ40%短縮されていることを確認しました。

Twitter投稿用のボタンを設置

需要は0だと思われますが、面白そうだったので追加しました。”ツイート”ボタンを押した後、30個の生成結果の中から1つだけをTwitterに投稿することができます。

漢字の追加や削除

地名としては使われないような文字を削除し、”久”や”那”などの地名としてはよくある文字を追加しました。また、漢字ではありませんが”ケ”や”ノ”も追加しています。

削除

央,絵,各,閣,孔,交,行,豪,参,桟,支,首,臨,楼,湾,圃,坦,堵,塙,壬,夷,奄,娃,嵩,帖,庇,柾,棲,檀,汀,祇,笈,荻,蓉,蔭,祁,鵬,鱗,黎

追加

久,光,植,泉,浅,荘,那,奈,内,氷,鳴,緑,呂,ケ,ノ

変更

穏->隠(“かくす”の字を間違えていました)

その他

狩(二重に記述されていたため一方を削除しました)

結果39文字を削除、15文字の追加により24文字減の695文字となっています。その他多数の字の読みを変更しています。
もしも”この字を入れてほしい!”、”これはいらない!”というのがありましたら、お気軽にどうぞ。

一部のブラウザで正常に動作しないことが判明したため、修正を行いました。詳細を見る>>(2016/08/21)

JavaScriptでテストを作成できる”examination.js”が完成し、“The Main Line”にて公開を開始しました。“ダウンロード固定ページ“より”テストキット”を選ぶとダウンロードが可能です。

2020年11月03日より、”examination_v2.js”の配布を開始しました。一問一答が可能となったほか、いくつか改良を加えています。ダウンロード固定ページより、”テストキットv2″をご選択ください。v2について詳細を見る>>(2020/12/06)

このファイルは、以前に”The Main Line”で公開されていた駅名検定コーナーで使用するために作成したもので、それを配布用に改修しています。”examination.js”は採点などのプログラムや解答、点数の定義が含まれており、問題を表示するHTMLファイルと合わせるとテストが出来上がります。

主な仕様は以下の通りです。

• 自動採点
• 合格基準を、点数(～点以上)または問題数(～問以上)に設定することが可能
• 解答表示
• Twitter投稿用のボタンを表示(非表示にすることも可能)
• 1つのグローバル変数”examination”を使用

こんな感じですかね。下の見本にもあるように、解答欄は入力(記述)と選択の2種類があり、選択肢を作らない分、前者のほうが作成は簡単です。

imgタグを使えば問題に画像を表示させることもできます。HTML5になり、inputタグではさまざまな種類の入力欄ができたので、新しいものを使うのも手ですね。

最後に、配布ファイルに同梱の”sample.html”の内容を見本として掲載します。”採点”ボタンを押すと結果が表示されます。

数字や英字、記号はすべて半角小文字で、それ以外は全角文字で記入してください。

サイトの新しいページをhttp://ichiso.net/tml/にアップロードした後、パソコンとスマートフォン(Android)で確認を行ったわけですが、ここでちょっと困ったことになってしまいました。まずはこちらをご覧ください。(すべてAndroidのスクリーンショットです)

この画像は、Firefoxでトップページを表示させたときのものです。ページ上端に4色の帯がありますが、これはSVGで作成した背景です。CSSのmarginによって、その帯かそれ以上の幅だけ文字を下げています。こうすれば、最初に表示したときに帯と文字が重ならなくなります。(スクロールすれば重なります)

では、ページの高さが変わればどうでしょう。ご覧の通り、帯の幅は変わりません。これは、ブラウザの画面の高さを100%とし、それに対する割合(ここでは5%)を帯の幅としたためです。どんなページを閲覧しようとも、ブラウザの画面の高さは変わらないので、この帯の幅も不変のはずです。

ところが、Google Chromeではそうはいきませんでした。

同じトップページです。ブラウザの画面の高さはFirefoxと変わらないにもかかわらず、帯の幅が大きくなっています。

ページが長くなると、帯がぐんと大きくなります。このことから、Google Chromeに関しては”ブラウザの画面の高さ”が100%になるのではなく、”ページの高さ”を100%として計算してしまっているということが分かります。

Chromeの表示では明らかに帯と文字が重なっていますが、現時点では単位を変更したり、背景の表示をやめたりするといったことは考えていません。Firefoxのほうが正しい表示だと思うので、どうにかChromeに修正がかかることを祈るだけです…