[JavaScript]タッチ操作対応

JavaScript による Webアプリのタッチ操作対応について簡単にまとめてみます。実際動いている様子はこちらをご覧下さい。

まず、window.TouchEvent オブジェクトがあるかないかでタッチ操作可能か判断します。次に、タッチ操作特有のイベントをリッスンする関数を指定します。

if(window.TouchEvent){
   if(document.addEventListener){
      document.addEventListener("touchstart",onTouchStart);
      document.addEventListener("touchmove",onTouchMove);
      document.addEventListener("touchend",onTouchEnd);
   }
}

各イベントハンドラに渡されるタッチイベントオブジェクトは、配列になっています。ですから、event.pageX といった形ではアクセスできず、 event.touches[0].pageX となります。screenX、clientX なども同様です。

function onTouchStart( event ){
   var x = event.touches[0].pageX;
   //alert( x );
}

前回も書きましたが、意外にハマるのが touchend イベントで指が離れた場所を知りたい場合は touches ではなくchangedTouches を見る必要がある点です。touches に入っているのはあくまで今タッチしている指だけであって、指が離れた瞬間 touches ではなくなるという理屈です。

function onTouchEnd( event ){
   var x = event.changedTouches[0].pageX;
   //alert( x );
}

なお、上記では document.addEventListener としていますが、実際のコードでは描画を行う canvas要素だけタッチイベントをリッスンしています。

更に、 event.preventDefault(); とすることでタッチ操作本来の挙動をキャンセルしています。こうしないと、キューブを回転しようとするとページまでスクロールしてしまいますので。これも、マウスとは違う点です。

さて、WebGL ですが、少なくとも手元の iPhone6 ではスムーズに動作しています。かなり将来性のある技術ではないかと思います。

iOSが走る端末をお持ちの方は、ぜひ実際に動かしてみて下さい

WebGL をタッチ操作

以前作った WebGL のデモページを iOS に対応させました。

タッチ操作を可能にするには touchstart や touchmove、touchend といったイベントをリッスンしなければなりません。さらに、イベントハンドラに渡されるイベントのオブジェクトが配列になっている点がマウスイベントとは異なります。ですから、

onMouseDown( e ){
   if(window.TouchEvent){
      e = e.touches[0];
   }
}

のようにしなければなりません。

マウスイベントの場合は、例えば e.pageX にマウスボタンを押下した瞬間のページ内でのX座標が入っていますが、タッチイベントではタッチした瞬間のそれが e.touches[0].pageX になるというわけです。

ちなみに、touchend の場合は touches[] ではなく、changedTouches[] です。

4年前に WebGL の普及に関して悲観的な予測を書きましたが、豈図らんや、現在では IE11までが対応済みです。これで Firefox、Google Chrome、IE と主要なブラウザの全てで WebGL が使えるようになりました。

良い意味で予想が裏切られました。

間違いメールの増加と、PCの終焉

最近、間違いメールをよくもらいます。一番多いのは日本予防医学リスクマネージメント学会のメールで、どこそこでシンポジウムがあるだとかを知らせるメールが盛んにやってきます。私は医者でもなんでもないのに。恐らく知り合いの誰かの「連絡先」から私のアドレスが紛れ込んだのだと思いますが、心当たりがありません。

まあ、それは良いのですが、気になるのは他にも企業等からのメールで社内の誰かへの Fw: がそのまま引用されていたり、直接来たのと CC とで同じメールが2通あったり、ケアレスミスと思われるものが増えていることです。

考えてみると、メールという連絡手段もやや廃れつつあり、使い方に習熟している人も減ってきているのでしょう。

確かにメールは LINE や SMS に比べて即時性がないし、引用の方法だの署名の仕方だのややこしい決まりがあり、しかも、スパムの増加で S/N 比も低下しています。

PC が終焉を迎えつつあるように、もうメールの時代も終わるのでしょうか。

そうだとすれば残念なことです。「電話するほどではないけど手紙では遅すぎる」という場合にメールはちょうど良いのですけどね。それに、相手が開封したかどうかを知る仕組みも一応ありますが一般的ではないので、「なぜ、メールを見たのに返事しないの!?」と責められることも通常ありません。

そのうち「LINE や SMS で返信に追われるより昔ながらのメールの方が良かったなあ」などと嘆いて、若い人から年寄り扱いされるようになるのかもしれません。

OCNのメールサーバには「新」と「旧」がある

2014年12月20日以降、OCN のメールで APOP や CRAM-MD5 が使えなくなるとアナウンスされています。これらには脆弱性があるので POP over SSL / SMTP over SSL を使ってくれということのようです。

APOP 等は使っていませんが、良い機会なので手元の PC のメールソフトで POP over SSL / SMTP over SSL を有効しました。ところがテストメールを出すと正常に送受信されません。ちゃんと標準SSLポート(POP3:995 、SMTP:465)にしているにもかかわらずです。

「SSL を使ってくれもなにも、使えないではないか!」と頭を抱えました。

気を取り直してもう少し調べてみると、SSL が使えるのは、

  • 2009年11月24日以降、OCNへ新規加入されたお客さま。
  • 2009年11月24日以降に、OCNメールアドレスの追加や変更を行ったお客さま。
  • 2009年11月23日以前からご利用中のOCNメールアドレスについて、新しい「OCNメール」へのバージョンアップ(移行)の手続きを済まされたお客さま。

と書いてあるページが見つかりました。私が加入したのははるか昔、20世紀です。「新しいOCNメール」とやらにバージョンアップしないと SSL は使えないのでしょうか。だとしても、そのやり方が分かりません。

仕方なく、サポートセンターに電話して聞きました。

結論から言うと、OCN には SSL が使えるメールサーバと使えないメールサーバがあります。従来、OCNのメールサーバは複数に分かれていたのですが、現在では受信は pop.ocn.ne.jp 、送信は smtp.ocn.ne.jp に統一しているとのことで、SSL が使えないのは古い個別のメールサーバにアクセスしているからでした。

個別サーバも一応残してはあるものの、 SSL にまでは対応していない、というわけです。

なお、新と旧では ID が変わります。メールアドレスが例えば xxx@abcd.ocn.ne.jp の場合、古いサーバでは ID は xxx ですが、新しいサーバでは ID は xxx@abcd.ocn.ne.jp です。つまり、メールアドレスがそのまま ID になります。パスワードは変わりません。

それから、私のように2009年11月23日以前に加入した人も上記のようにメールソフトを設定すれば SSL が使えるそうです。バージョンアップ云々は、 Web メールにログインすることをバージョンアップと称していただけなんだとか。

ただ、Web メールはフィッシングの危険があるし、正規のサイトでも、自分のものではない端末でうっかりブラウザにパスワードを記憶させてしまっては元も子もありません。

重要な用件をやりとりするアドレスはメールソフトで使うのが無難でしょう。

詐欺メールの巧妙化

アホな詐欺メールを嘲笑する記事を何度も書きましたが、最近は笑ってばかりもいられません。彼らの手口も巧妙化してきています。

そもそもDNSを逆引きできないIPからのメールは弾いている上に、ベイジアンフィルタも稼働中で、さらに独自のNGワードも設定しています。それらをかいくぐって辿り着くのですから大したものです。悪い意味で。

ここ数日ウチによく来るのは「緊急地震速報」と称するもので、うっかり開いてしまいそうになります。他にも、「エボラ出血熱に関する情報」というのもあります。

一番小癪なのは「放射能汚染警報」なるもので、「お住まいの地域で放射線が多量計測されています。」などと書かれています。

いずれも、世間の耳目を集める事柄を「エサ」にしているあたり、非常に巧妙です。人間が一番関心を持つのは金銭と異性でしょうが、この二つを利用した詐欺、「儲かります!」「モテます!」はさすがに使い古された観があります。

その点、エボラ出血熱は時事性があり、また恐怖心を引き起こすので引っかけやすいのでしょう。「犯人」は単独か複数か、また国籍はどこかといったことは分かりませんが、日本の事情に精通した人物のように思われます。

皆様もくれぐれもご注意下さい。

BBSが廃れて久しい

十年ちょっと前まで、インターネット上には賑わっている「掲示板(BBS)」がいくつもありました。BBS(Bulletin Board System)は主に日本で使われた用語で、海外ではForumなどと呼ばれていました。

ブログの普及によって、それらはすっかり廃れてしまったのはみなさんご承知の通りです。残っているのは「2ちゃんねる」くらいですが、あれは匿名というより「名無し」を基本としていて、私がここで語りたい「掲示板」とは少し違います。

どう違うかというと、ニックネーム(ハンドル)さえ使わない「名無し」による発言は、完全にその場限りのコミュニケーションであるということです。

2ちゃんねる以外の掲示板では、大抵古株のユーザーが幅を利かせていて、彼らに睨まれるとその場に居づらくなったものでした。古株の発言力は強く、なにやら思い上がったような態度の者もしばしば見受けられました。

こう書くと弊害ばかりだったようですが、中には高い見識を誇る「論客」も居ました。時折発生する論争は、揚げ足取りに終始しがちな名無し同士のそれと異なり、各人とも自分のことを論客と自負するだけに、見応えがありました。

ブログのコメント欄が似ていますが、ブログに於いてはあくまで開設者が主で、意に添わないコメントは承認しないということが考えられますし、そうでなくても、本文でたっぷり自説を開陳できるブログ主と、コメントだけする人とではどうしても力関係に差が生じてしまいます。

コメント欄を持たないブログも増えてきており、どうも世の中は論じ合わない方向、閉じたSNSの中で、なあなあでやっていく方向へと向かっているようです。残念なことです。

架空の銀行からのメール

今までにも何度となくアホな詐欺メールを晒してきましたが、また「独創的」なヤツが来ました。

詐欺メール

「東京ファンド銀行」という架空の銀行からです。「振込入金」という表現が「馬から落馬」的で揮っています(笑)

なるほど、実在の銀行を騙るのと違って、架空の銀行なら注意喚起がなされることもありませんね。もっとも、口座を持つ人もいませんから、暗証番号の盗みようもありませんが。

恐らくこれは、パスワード等を使い回している人が多いことに着目したフィッシングです。あるいは、キーロガーなどを仕込むつもりなのかもしれません。

「生年月日や電話番号など、第三者に類推されやすいものの使用は避け……」などと、如何にも銀行が言いそうなことを書いているあたりは、なかなか巧妙です。

小癪ですね。

Google汚染、極まれり

先日、安倍総理の祖父に当たる安倍寛でググってみて驚くことがありました。

たまたま、高杉晋作を弔う東行庵に行ったので、「そう言えば、安倍総理は晋三、父親は晋太郎と二代にわたって晋の字がつくのは、晋作にあやかったのかな」などと思いながら安倍一族のことを調べていたのです。

Googleの検索結果ページの右上に Wikipedia を要約したような囲みが出ることがありますが、「安倍寛」でもそれが出ます。しかし、何かヘンです。

Google汚染、極まれり

安倍寛として、晋三氏の顔写真を醜く改変した写真が載せられているのです。

人の顔写真を改変するような下衆がこの世に存在するのは、まあ仕方ありません。「安倍寛」で表示される画像の中にそういった「コラージュ作品」が混じることもやむを得ないでしょう。しかし、上のスクリーンショットのように、あたかもGoogleが公認した安倍寛の肖像であるかのように表示されるのは問題です。

よく知られているように、Googleは「ロボット型検索エンジン」であり、Googleのエンジニア達は、データの収集にいかに人の手を掛けないかに心を砕いています。上記の写真も、クローラーと呼ばれるプログラムが「間違って」拾ったもので、Googleに他意はないはずです。

しかし、他意はなくとも故人に対する酷い侮辱であることに違いはありません。

以前から、検索結果を「汚染」するために、でたらめな記述、例えば「〇〇は痴漢」などと書いたページを大量に作成し、互いにリンクしあってGoogleに拾わせるということが行われてきました。

Googleはそれらの「ノイズ」を無視するのに長けていると言われていますが、上記の件を見る限りまだまだのようです。

私は別に安倍一族のシンパではありませんが、さすがにこれは胸糞が悪かったので、「フィードバック」を通じてGoogleに通報しておきました。しかし、丸1日を経過した現在(2014年9月28日)も、問題の写真は掲載されたままです。

接続の安全性を確認できません

Panoramio というサービスがあります。一種の写真投稿サイトで、Google Mapとの連携に特徴があります。

ところが、さきほどこのPanoramioの中のマイページにアクセスしようとするとFirefoxが警告を発しました。

SSL

「接続の安全性を確認できません」とのことですが、具体的には証明書の有効期限切れのようです。(エラーコード:sec_error_expired_certificate)

恐らくPanoramio側のケアレスミスでしょうが、Firefoxのタブに「信頼できない接続」という文言が表示されることによる、イメージダウンは少なくないと思われます。

現に私も「なんだこりゃ」と思ったし、このサービスに対する印象はかなり悪くなりました。

SSL対応のサイトを運営している方は是非ともご注意下さい。

迷惑メールに対抗する力をつけよう

「メールを見たら詐欺と思え」を座右の銘としている私ですが、昨今はスパムないし詐欺メールに対抗する手段も増えてきました。

まず、純然たるスパムについては、キーワードによる除外、送信元のIPからリモートホストを逆引き出来るか否か、そしてベイジアンフィルタによって、かなりの精度で選別できます。

詐欺メールについては、電子署名がなされているかどうかで判断できます。

p7s

メールクライアントによっても異なりますが、多くの場合 .p7s という拡張子の添付ファイルとして表示されるのが電子署名です。

Windows では certmgr というアプリで電子署名を検証できます。

certmgr

大手企業からの重要なメールには必ず電子署名がなされているので、まずはこれのありなしで判断しましょう。ちなみに、上記はSBI証券からのメールにくっついていたものですが、ここから来るメールは「豪ドルに投資してみませんか」などといった、たいして重要でない用件であっても全て電子署名されています。

ただ、私が危惧するのは、一見真正な電子署名を備えた、極めて精巧な詐欺メールが将来登場するのではないかということです。

やはり、メールだけで判断するのではなく、電話で、それも相手が記している番号ではなく電話帳に載っている番号に掛けて確認するのが賢明です。