2017年7月20日(木) 13時40分35秒 [ハードウェア]

CASIO製の腕時計WV-58J-1AJFを新調。今度は電波時計

今まで使っていたCASIO製の腕時計のバンドを留める金具部分が、とうとう経年劣化で壊れてしまいました。自身のブログによると、その腕時計を買ったのは2005年9月。いつの間にか約12年間も使っていたようです。電池交換もバンド交換も何度もしました。約4ヶ月前に電池交換したばかりなので、時刻表示に問題は一切ないんですけども、さすがに腕時計本体にバンドそのものが取り付けられなくなると、腕時計として使うことはできません。(^_^;)
というわけで、新たに腕時計を新調しました。

今回も前と同じCASIO製のデジタル腕時計ですが、今度のは電波時計です。
多少の候補から迷った結果、丸形のデジタル電波時計WV-58J-1AJFに決めました(右上写真)。

価格は3,700円くらいでした。
電波時計の腕時計でもかなり安く買えるんですねえ……。
バンド部分が独特の形をしているので、サードパーティー製の汎用バンドに交換するのは困難っぽいです。腕の形に丸く固定されているので、折りたたんで仕舞えない点がちょっと不便な気もしないでもないですが、まあ、腕に付けて使っている最中に問題になることはありません。

電波の受信は夜中だけに固定されているようで、一晩窓際に置いていたらあっさり受信していました。
しかし、引き出しの中にしまっていると、さすがに電波は受信できないっぽいです。(^_^;)
まあ、1度時刻が合えば、そうそうズレることもないでしょう。

曜日はデフォルトでは英語で表示されますが、日本語(漢字)で表示する設定にもできます。また、モード変更時の音を消す設定にもできるので、静かに使えて良いです。
時刻表示部分はわりと大きくて見やすいのも良いですね。
右上のボタンを押すことで表示される緑色のバックライトも（夜道で時刻を確認する目的での）明るさは充分です。
買って良かったと思います。

■CASIO腕時計：WAVE CEPTOR(ウェーブセプター)電波時計：MULTI BAND5デジタルモデル：WV-58J-1AJF（＠Amazon.co.jp）

2017年7月11日(火) 16時14分18秒 [仕事]

サブメニューは自動で開くが、勝手には閉じないドロップダウンメニューを作るスクリプトを書いた

うちの個人サイトで使っているグローバルメニューバーにある、サブメニューの開閉スクリプトを新たに書き直しました。

※そのグローバルメニューは今ご覧のブログページにはありません。(^_^;) ブログTOPページやHOMEページページなどIndex系ページにだけあります。右図の黄色矢印はサブメニューを開いたところです。

All Aboutで「簡単なドロップダウンメニューの作り方(jQuery活用編)」という記事を書いたんですが、そこで解説している方法をほぼそのままうちのサイトでも使っています。(※この記事自体は2013年からありましたが、2017年7月付で全面改稿しました。)

サブメニューが勝手に閉じてしまうとストレスになる

うちの個人サイトでは従来からjQueryを使ってサブメニューを開閉していましたが、今までは以下のような2段階仕様でした。

• メニュー項目の上にマウスを載せると自動でサブメニューが開く
• メニュー項目の上からマウスが外れたら自動でサブメニューが閉じる

よくあるドロップダウンメニューの仕様です。

ただ、この動作だと、ほんの少しマウス操作を誤っただけでサブメニューが勝手に閉じてしまうという問題があります。
マウスを勢いよく動かしすぎたせいで、ちょっと項目枠内から外れてしまった……というケースはよく起きますよね。その際、せっかく開いたサブメニューが勝手に閉じてしまうと、再度サブメニューを開く必要があるので少々手間です。
特に、サブメニューの開閉にアニメーション効果が伴っている場合には、アニメーション効果の終了を待たないと再度開けない場合もあって、余計にストレスが溜まります。(^_^;)

自動で開くが、自動では閉じない仕様だと、使いやすい

それを避けるために、以下のようなドロップダウンメニューの仕様を考えました。

• メニュー項目の上にマウスを載せると自動でサブメニューが開く。
• メニュー項目の上からマウスが外れてもサブメニューはそのまま。
• どこかをクリックしたら、サブメニューが閉じる。
• （※ページがスクロールされても、サブメニューは消えます。）

上記の仕様なら、マウス操作がちょっとぶれてしまってメニュー項目範囲外に出てしまっても、一度開いたサブメニューは開かれたまま保持されます。このような動作だと使いやすいドロップダウンメニューになるのではないでしょうか。

ドロップダウンメニューは実はスクリプトを使わずにHTML＋CSSだけでも作れますが、上記のように「開いたまま保持する」仕組みはスクリプトを併用する必要があります。

jQueryを使って、使いやすいドロップダウンメニューを作る方法

jQueryを使って上記のような仕様のドロップダウンメニューを作る方法をAll Aboutで解説したのが、以下の記事です。

➡簡単なドロップダウンメニューの作り方(jQuery活用編)＠All About ホームページ作成

サンプルページも用意しているので、そちらのソースを見る方が早いかもしれません。^^;
記事は4ページ構成で、

1. ［ドロップダウンメニューの特長］
2. ［HTMLソース］
3. ［CSSソース］
4. ［JavaScript(jQuery)ソース］

の順に紹介しています。メインは4ページ目のjQueryソースです。
上記のような仕様のドロップダウンメニューでも、jQueryソースとして記述する分量はわずか9行だけで済みます。
とても簡単です。

備考：ページがスクロールされた際にもサブメニューを自動で閉じる(消す)方法

なお、この記事では「ページがスクロールされた際も、そのときサブメニューが開かれていたら自動で閉じる」という処理は紹介していません。スクロールで閉じるという動作は、「グローバルメニューが画面上部端に残り続ける」ようなページデザインを採用していない限り不要でしょうから。
スクロール時にも自動で閉じるには、例えば以下のようにスクリプトを書いておけば良いでしょう。

$(function() {
   $(window).scroll( function() {
      // サブメニューが出っぱなしなら消す。
      $('ul.ddmenu ul').hide();
   });
});


上記は、グローバルメニューを作っている要素の第1階層目が <ul class="ddmenu"> ～ </ul> の場合の記述例です。
その辺は、詳しくは記事本文を読んで下さい。(^_^;)

※なお、本記事で作るドロップダウンメニューは多段構成も可能なので、メニュー階層は3階層でも4階層でも好きなだけ増やせます。

2017年7月 8日(土) 16時58分17秒 [ハードウェア]

SONY製ノイズキャンセルイヤホン「MDR-NWBT20N」を電車内で使ってみた

先日、SONY製のノイズキャンセル機能付きワイヤレスBluetoothイヤホンを買いました。
ノイズキャンセル機能は初めて体験したんですが、かなり騒音が軽減されて驚きました。すごく静かですね！

電車内がそこそこ静かになる

ノイズキャンセルイヤホンは電車の中で動画を視聴するために買いました。実際に電車の中で使ってみると、車内の騒音（電車が走行する音やエアコンの稼働音など）もかなり軽減されて驚きました。

さすがにトンネル内の騒音だと完全に消えるには至りませんが、それでも（本来は隣に座っている人間との会話もままならないくらいの騒音なので）そこそこ軽減されて動画の音声もそれなりには聞こえるので便利です。

ここまで外部の騒音をキャンセル可能だとは予想していませんでした。
便利ですねえ。

▼アナウンスの音声はしっかり聞こえる

電車の騒音はかなり軽減されますが、アナウンスの音声はよく聞こえます。多少は小さくなるかな？という程度で。
たぶん、人間の声は軽減しようがないんでしょう。ずっと連続するような音ではありませんし、そもそも人間の耳は人間の声の周波数が最も聞き取りやすいようになっているでしょうし。(^_^;)

まあ、電車に乗っている場合、アナウンスは聞き逃さない方が望ましいので、そこは問題ありません。そんなにひっきりなしにアナウンスされるわけでもありませんし。^^;

ワイヤレス・ノイズキャンセリング・イヤホン「MDR-NWBT20N」白色

購入した製品は、SONY製のワイヤレス・ノイズキャンセリング・イヤホン「MDR-NWBT20N」です。
Bluetoothで機器と通信するので、本体と機器とをケーブルで繋ぐ必要がないので若干楽ですね。
この製品には色の選択肢が5種類あったんですが、一番(装着時に)目立たなさそうな白色を買いました。^^;

本体部分の裏面はクリップになっていて、自分の服などに簡単に留められるようになっています。これもなかなか使い勝手が良くて便利でした。胸ポケットあたりに留めておけば、イヤホンケーブルはほとんど延ばさなくても良い感じです。

▼バッテリは8時間くらい持続。残量確認は電源ランプの点滅回数で

ワイヤレスなので、稼働電力はバッテリ経由です。なので充電が必須。
1回の満充電でだいたい8時間くらい使えると説明書には書いてありました。
電源を入れた瞬間に、赤い電源ランプが点滅します。その回数でバッテリの残量がだいたい把握できるっぽいです。残量が多ければ3回点滅、中くらいなら2回点滅、少なければ1回だけ、みたいな感じで。

バッテリ残量を数値で把握することはできないので、電源をONにした直後に、何回点滅するかに注目しておく必要があります。とはいえ、電源をONにするときには当然視線は電源スイッチに向いているので、その場で点滅を確認できますから、特に不便はありません。
（理想を言えば、Bluetooth接続機器側でイヤホン側のバッテリ残量を確認できる仕組みがあればもっと便利だったかもしれませんが。^^;）

▼充電はUBSケーブルで

充電は付属のUSBケーブルで、PCのUSB端子なり、USB充電器なりに繋いで行います。
本体の端にマイクロUSB端子が隠された部分があるので、蓋を開けてケーブルを接続します。
PCのUSB端子に繋ぐ場合は2時間くらいで満充電になるようです。

付属の充電用USBケーブルは50cmくらいあります。(※本体の色は白色を選択しましたが、付属のUSBケーブルの色は黒色でした。充電用だから本体のカラーと合わせる必要はない、ということなんでしょうかね？^^;)
説明書には付属のケーブル以外使うなというようなことが書かれていましたが(^_^;)、ただの［USB－MicroUSB］ケーブルなので、別に他の何を使っても問題ないだろうと思います。

最近はUSBケーブルで電力供給する機器もずいぶん増えましたねえ……。壁の電源から直接USB機器へ充電できる充電器もあるんですが、iPod touchやタブレットなどに同時に消費するとポートが足りません。(^_^;)

▼電源ON/OFFやペアリングなど

イヤホンを耳に装着してから電源をON/OFFすると、ぴろりん♪的な音が聞こえるので分かりやすいです。
そして、電源投入後ほんの1～2秒程度でノイズキャンセル機能が働いて、すごく静かになります。
エアコンの稼働音くらいなら、簡単に消えてくれますね。

私はタブレット(Nexus7)とBluetooth接続して使っています。最初のペアリング操作にも特に問題はなく、あっさり繋がりました。
一度ペアリング作業を済ませておけば、機器(タブレット)との接続も、タブレット側のBluetooth機能で操作してから概ね1～2秒くらいで完了します。
楽々です。

▼満足

というわけで、とても満足しています。
価格はだいたい6千円くらいでした。
この性能と価格なら、リーズナブルと言えるのではないでしょうかね？

※元々騒音のある電車内でのみ使うことを目的に買ったので、あまり音質にはこだわりませんでした。音楽を聴く目的ではないですし、そもそも電車内なのでそんなにクオリティの高い音が出力されたとしても、完全に騒音が消え去るわけではないのでそこまでクッキリハッキリとは聞こえないでしょうから。

※注：私はタブレットで再生される動画の音声を(電車内で)聞くためにこれを買ったので特に問題ないんですが、このイヤホンは電話には使えないようなので、スマートフォンで使おうとする場合には注意が必要かもしれません。

■ソニー SONY ワイヤレスノイズキャンセリングイヤホン MDR-NWBT20N : Bluetooth対応 ホワイト（＠Amazon.co.jp）

2017年7月 1日(土) 13時24分52秒 [Web関連]

サーバログにapple-touch-icon系URLの404エラーが多数記録されるので対策をしてみた記録

ウェブサーバのアクセスログ(のうちエラーログ)を眺めていると、apple-touch-icon-120x120-precomposed.png だとか apple-touch-icon.png などのURLにアクセスが多数あり、すべて 404 Not Found としてエラーが記録されています。
これらは、iPhoneなどで使われているiOSがホームアイコン画像を探すために問答無用でアクセスしてくるURLです。PC版ブラウザがfavicon.icoに問答無用でアクセスを試すのと同じです。
昔からよくあるエラーで、特に問題になるわけではないので放置していました。

ただ、やっぱりエラーログを眺めるときに、こういうどうでもいいエラーがあると煩わしいですし、何より毎回404 Not Foundページを返すと、サーバの転送量が無駄に増えてしまうので、何か軽いアイコンを1つ用意しておく方が良さげだな、と思い直しました。^^;

エラーログを見てみると、だいたい1回のアクセスで、以下の4つのURLに連続してアクセスがあります。

File does not exist: /home/nishishi/www/apple-touch-icon-120x120-precomposed.png
File does not exist: /home/nishishi/www/apple-touch-icon-120x120.png
File does not exist: /home/nishishi/www/apple-touch-icon-precomposed.png
File does not exist: /home/nishishi/www/apple-touch-icon.png

どうも一部のiOS端末では、

1. 最初に apple-touch-icon-120x120-precomposed.png が存在するかどうかをチェックして、
2. なければ次に apple-touch-icon-120x120.png が存在するかどうかをチェックして、
3. なければ次に apple-touch-icon-precomposed.png が存在するかどうかをチェックして、
4. なければ最後に apple-touch-icon.png が存在するかどうかをチェックする。

……というような動作をするみたいですね。
ただ、端末によっては上記の3～4だけにしかアクセスしないものも(エラーログからは)見えましたが。

毎回アクセスされる度に、都合4回の404 Nout Foundエラーが発生するのはなんとも無駄です。
うちのサイトで404エラー用に用意しているページはだいたい3.4KBあるので、(連続4回発生するとなると)毎回13.6KBも意味のないデータを返してしまいます。
それならば、放置するよりも何か小さいアイコンを用意しておく方が無駄な転送が発生しなくて済むよな、と思いました。
そもそも、アイコンの存在が見つかればそのiOS端末はアイコンデータをキャッシュするでしょうから、次からのアクセス頻度が減るかもしれませんし。

というわけで、iOS用のホームアイコン画像を作って1つ用意しておくことにしました。

iOSホームアイコン画像のファイル名をどうするか？

iOS端末が問答無用で探すホームアイコン画像のファイル名は、上述の通り4種類ありました。
でも、もしかしたら端末によってはもっと別のファイルも探すのかもしれません。
とすると、ホームアイコン画像を作っておくとしても、どんなファイル名で用意するか？ という問題があります。

• 最も共通するファイル名は apple-touch-icon.png のようですが、このファイル名1つを用意したところで、それよりも前に数回ほど404エラーが発生してしまうのであまり意味がありません。
• しかし、apple-touch-icon-120x120-precomposed.png のファイル名で用意すると、このファイル名をチェックしないような古い端末や、このファイル名よりも前に別のファイル名を探そうとするような端末では、やはり404エラーが発生してしまいます。
• 先述の4つのファイル名で用意しておけば良いと言えなくもないですが、4つだけで足りるとは限りませんし、何より余計なファイルをサーバ上に多数置くことになるのはなんだかスマートではありません。

というわけで、以下の対処方法を考えました。

• ホームアイコン画像の実体は1つだけを用意しておく。
• どのファイル名でアクセスされても同じファイルの中身を返すよう.htaccessファイルを記述する。

これなら、サーバ上に置くホームアイコン画像は1つだけで済み、iOS端末側がどのファイル名に先にアクセスしても、最初の1回で画像を返すことができるので、404 Not Foundエラーの発生を回避できます。

iOSホームアイコン画像と.htaccessファイルの記述

まず、apple-touch-icon.png というファイル名でアイコン画像を1つ用意しました。
で、.htaccessファイルにはmod_rewriteを使って以下のように記述しました。

RewriteEngine on
RewriteRule ^apple-touch-icon-.*?\.png$ /apple-touch-icon.png [L]

上記(の2行目)では、リクエストされたURLが「apple-touch-icon-」で始まっていて「.png」で終わっている場合に、apple-touch-icon.pngファイルの中身を返すよう指示しています。(リダイレクトはしません。)
※前半の[書き換え前]側には先頭にスラッシュ記号は不要です。後半の[書き換え後]側には先頭にスラッシュ記号が必須です。

これなら、

• apple-touch-icon-120x120-precomposed.png をリクエストされても、実際には apple-touch-icon.png の中身が返されます。(URLはそのまま)
• apple-touch-icon-120x120.png をリクエストされても、実際には apple-touch-icon.png の中身が返されます。(URLはそのまま)
• apple-touch-icon-precomposed.png をリクエストされても、実際には apple-touch-icon.png の中身が返されます。(URLはそのまま)
• apple-touch-icon.png がリクエストされた場合は、そのファイル名で実体が存在するので、そのファイルの中身がそのまま返されます。

確認したエラーログでは上記の4ファイルしかリクエストされていなかったんですが、ググってみると他のファイル名でのアクセスがある可能性もあるっぽいですね。例えば apple-touch-icon-72x72.png とか apple-touch-icon-152x152.png とか。
それらのファイル名でリクエストがあった場合も、すべて apple-touch-icon.png の中身を返します。(^_^;)

アイコンサイズは全部一緒になるけども……

今のところ、私は apple-touch-icon.png を120×120サイズで作りました。
なので、iOS側がどんなサイズのアイコンをリクエストしたとしても、全部120×120サイズで返ります。
もしかしたら表示上の不具合が出るかもしれません。

……でもですよ、そもそも、私のウェブサイトをiOS端末のホーム画面に常に表示させておこう、などと考える方々が居るとは思えないんですよね。(^_^;;;
なので、たぶんこの画像をホームアイコン画像として実際に使うユーザが居ないと考えて問題ないと思っています。単に、iOS端末が問答無用でアクセスしてくるだけであって。

というわけで、たぶんこの方法で何も問題はないのではないかと考えています。(^_^;)
どうかな。^^;