カーディーラーで、顧客が「あなたはロボットではないですね?」と訊かれる事案発生 アメリカ・フロリダ州

フロリダの西パームビーチのカーディーラーで、Fiat の新車を買うことにしたマルシ・ロビンさん(Marci Robin)が、膨大な購入資料をサインするなかで「あなたはロボットではないですね?」という「紙」に「ペン」でサインさせられるという事件が発生したそうです。 https://twitter.com/MarciRobin/status/998030243981033472 ディーラーの担当者は対面で次々と必要書類を出してきて、「この書類はナントカのため」と短い説明をする中で、この reCAPTCHA をプリントアウトしたような(というかそのものですね画像からすると)紙も出し、「これはあなたがロボットでないことをはっきりさせるためのものです」と説明したということ。「まじで?」「ええまあ」という短いやりとりの後、それに従ってチェックを入れて返したということですが。 フロリダの方では精巧な人型ロボットが車を買いに来たりして問題になってるのかというと、まだそういう事ではなさそうですね。 ニュースを報じたJalopnikはディーラーの方にも取材しており、このディーラーではすべてのお客に対していつもこれを行っているということ。オンラインシステムに担当者が入力をしながら手続きを進めているのですが、その際に画面に reCAPTCHA が出てくるので、これも印刷し、顧客にチェックしてもらっているそうです。 取材に応じた担当者は、「(個人的には)もしロボットがソーシャル・セキュリティー・ナンバー(マイナンバーみたいなもの)と身分証明書を持ってきたなら売っちゃいますね」とも答えたということ。reCAPTCHA のプリントアウトにチェックさせる現在の手順に関しても、「(Amazon)アレクサとか、電話できて必要事項を話せる女の子もいるでしょ。今後どうなるかなんてわかりませんから」と弁護したそうです。 via

格子間の移動距離をGoogleマップに聞くことで作られた等時間地図 Route Times

Route Timesは、ある地点から同じ時間で行けるところを表示する、いわゆる等時間地図のサービスです。 とはいっても、どこに対しても求められるわけではなくて、あらかじめデータが用意されている5つの都市の特定の地点だけが出発点として選べるようになっています。5つの中には東京の新宿都庁(ただTokyoで検索するとここがでてきますね)が選択肢にあるので、これを選ぶとこんな感じで出てきます。 中央高速道路やアクアライン沿いだと、60分以内で相当遠くまで行けますね。手動でGoogle Mapsで検索すると、都庁から中央道の談合坂サービスエリアまで60分掛からないようなのですが、これはAPIを呼んだ日時に渋滞があったか、グリッドのところだけを計測しているところからうまく最長になりそうな地点が選ばれなかったか、のどちらかではないかと思います。 GitHub にて関連するプロジェクトであるShinyTravelTime のソースコードが公開されていて、これを自分で走らせるか、こちらのデモサイトに「自分の」Google Maps API key を与えれば、自己責任でGoogle Map に多数の問い合わせをかけ、自分が緯度経度で指定した好きな地点からの等時間地図を描くことも可能です。 Google Maps API の呼び出し回数には上限があるので、ルートを求める格子の数を増やすほど、無料でできる広さは限定されてしまいますね。有料版APIの契約をすれば、自宅や職場を中心とした、ある程度細かい等時間地図を作ることも可能そうです。引っ越し先を検討したりするのに役立つかもしれません。ただ、東京の場合はこのツールのような車での移動時間ではなく、公共交通機関で求めた結果の方が役に立つかもしれません via

1980年代のアマゾンがどんなサービスだったかを紹介する動画

「ワールドワイドウェブ(WWW)の不思議」という1980年代のテレビ番組で、当時の Amazon 社のサービスを紹介している動画が見つかったようです。 「パソコンで行けるデパート」であるアマゾンを使うのに必要なのは、モデムとインストールディスクだけ。 初回はお店のデータベースのダウンロードに、モデムをピーガーと言わせながら15分ほど掛かりますが、2度目からは1分以内に起動するそうです。 アマゾンのトップは、アドベンチャーゲーム風のエレベータ。買いたいもののカテゴリーを選ぶと、そのカテゴリーのページに移動できます。 各メニューのタイトルの一文字目がブリンクして、そのキーを押すと移動できる、というあたりのギミックも昔懐かしい感じ。商品の型番を手で入れないと見られないのは、マウスとリンクが当たり前の今の時代からみたらだいぶ不便そうです。 アマゾンといえばユーザーレビューは外せません。ちゃんとレビューを見ることもできます。ヤニー・ローレルさんはこのテレビが気に入らなかったようですね。 3:30 頃からは、アマゾンprime の紹介(あったんだ!)。送料無料やレンタルビデオ店で使えるクーポンの他に、音声応答サービス Alexa が紹介されています。 Alexa の番号に電話を掛けると、なんでも答えてくれるそうです。デモによると、掛け算の答えを訊いたり、今の大統領の名前を訊いたり(ロナルド・レーガン!)、モーニングコールを予約したり、テレビ番組がどのチャンネルでやってるかお訊いたり、音声でいろんな手伝いをしてくれるようです。 https://www.youtube.com/watch?v=hUi-yUpBqo0 # Amazon の前身である Cadabra.com 社の創業は1994年、ウェブの登場は1991年です。念のため via Laughing

イギリスの交通違反の悪質な地域を可視化したインタラクティブ地図

イギリス交通違反多発地域(The UK's Driving Offence Hotspots)は、交通違反のデータを基に、どの地域(警察管轄)で交通違反が多いかを可視化した地図です。 上は、速度超過違反を選んだ場合。運転手1万人あたりの違反件数が多いほど、濃い赤色で表示されるようになっています。 7つのカテゴリー別の地図と、全部を合わせた総合の地図を選ぶことができます。総合で1位となったのは、南西部のエイボン・サマーセット地域。個別にみるとスピード違反で1位の地域のようですが、スピード違反の件数が他の違反よりも桁違いに大きいのが効いているように見えます。 免許不携帯と不注意運転の両方で1位なのはスコットランド。運転中の携帯電話利用はロンドンが1位、あたりは、なんとなくイメージからわかる気もします。信号無視の件数が2位以下を引き離して多いレスターシャーは、なんかあるんですかね。 2016-2017年度のデータを各警察署などから集めたということで、データも公開されています。公開データを使った可視化で、注意喚起としてもいいですね。 via Maps

ロンドンで一番ひどいバス停を見つける – ビッグデータ活用事例

ビッグデータ解析サービスの英コグニシオ社(Kognitio)が公開している、ロンドン最悪のバス停(The worst bus stop in London)は、ロンドン交通局の運営するバス運行に関する膨大なデータを使って、運行状況に関して優秀なバスやひどいバスを見つけるというプロジェクトです。 対象となるデータの規模は以下。 データ数 4,938,534,706 バス停の数 19,687個 バス路線数 675本 バスの台数 9,641台 ロンドン交通局のオープンデータというページがあるので、ここから入手できるのでしょうね。 これらのデータから、たとえば、7つの運行ゾーン毎に、「バスがとても遅れるバス停」「時刻表より前にバスが来がちなバス停」などのランキングが求められています。 これは「ロンドンで最も出発が遅れる路線」。走ってて遅れるのではなく出発が遅れるってどういうこと? と思いますが、運転手が遅刻するとかそういうのもあるんでしょうか。 こちらなんかは良い方の結果で、最も時間に正確なルート。路線のバスのうち85%が時刻表から外れずに走っているそうです。 郵便番号でランキング バスが正確な地域、不正確な地域をランキングするには、郵便番号(の上3桁)が使われています。 なんで郵便番号?

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが AキーとDキーで車が左右に動いています。 こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。 CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。 キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。 クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。 疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。 レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。 See

Salieo – レスポンシブ・いい感じに画像を切り出し表示してくれるサービス

Salieo は、Javascript で画像ファイルから写真の重要そうなところを切り出して表示してくれるというサービスです。サイトのキャッチは”instantly, intelligently, responsive”(即座に、賢く、レスポンシブに)となっています。

ユーザー登録してAPIキーをもらってみました。同じ一つの写真がこんな風に自動でクロップされて表示されます。

比較のため、スクリプトをオフにすると以下のようになります。横長でも縦長でも、元の画像がそのまま縮むので、車の形がゆがみますね。

# 物があるところをうまく切り出してくれる、ということなのですが、この写真はちょっと例には良くなかったかな。

ユーザー登録した上で、申請したドメインやURLパターンに合致した画像だけが変換の対象となります。変換できる画像の数や変換の回数によって料金が変わりますが、一番下の無料枠でも10画像、月25,000回までの呼び出しができるようです。

先行の類似サービスとして、imaggaImageKit.ioが見つかりましたが、どちらも無料枠は無いようです。Salieo の無料枠もお試し用という感じの枠ではありますが、実際に試せるのはやはりいいかと。

これらのサービスを使えば、切り出しについて特に考えずに元の画像一つをアップロードしておけば、サイトで表示した時にその時の縦横比にあわせて動的にクロップされるわけです。あとは写真から重要そうな場所を切り出す判定部分の精度が良ければ、画像が表示される際の縦横比を固定しにくいサービス運営者からは、有料でも嬉しいサービスとなるかもしれません。

via Hacker News

IDEA – イケアのマニュアル風にアルゴリズムを説明

IKEA の組み立て家具の説明書のような形式で、言葉を使わずにコンピューターの各種アルゴリズムを説明しようというサイト IDEA です。

もともとサンドル・フェケトさん(Sándor P. Fekete)が作っていたものに、セバスチャン・ムーアさん(Sebastian Morr)とセバスチャン・スティラーさん(Sebastian Stiller)が参加し、教師や学生、その他興味のある人が使えるように公開するようになったということです。

マージソート、クイックソート、ボゴソート、二分探索、平衡二分木、公開鍵暗号、一筆書き、グラフ探索、の8種類が、言葉を使わずに絵だけで説明されています。

元のアルゴリズムについて一度は学んでいないと、図だけで何のことかわからない、というものもあるとは思いますが、なんとか簡単に図でおさめようと努力された工夫が見て取れ、面白いものとなっています。

これらの図は、クリエイティブ・コモンズ4.0 by-nc-sa の条件の下で、改変したり配ったりして大丈夫だそうです。

via Kottke

コンピューター無しで子供にプログラミング体験させるキット

Space Race Game for Studentは、印刷して使えるプログラミング体験キットです。

地球や月、人工衛星や宇宙人の駒と、「進め」「左折」「n回繰り返す」「もし□なら」といった命令パーツが一枚の紙にカラーでデザインされていて、切り離して使います。

碁盤上のボードに駒を配置し、たとえば「地球から月へ、宇宙船などにぶつからずに行く」みたいな問題を出し、それを命令パーツを組み合わせて実行するゲームとなっています。簡単な問題を出し、審判をしてあげれば、すぐに子供同士で遊べるようになるのではないでしょうか。

子供向けのロボット/プログラミング教育の研究会に子供を連れて行ったことがあり、そこでいろいろなロボットを体験させてもらったのですが、その中にはこのキットの内容とほぼ同じことを実際のロボットで実行するというものもありました。

ロボットの上に命令ブロックを差し込んで並べる形でプログラミングをし、大きなボードの上で動かして障害物を避けられるか確認する、といったものです。

うちの子も楽しく遊んでいて、もし買ってもらえるとなれば間違いなく喜んだことでしょう(教育の研究会なので販売とかはしていなかった)。ただ、このロボットでできるプログラミングの複雑さを考えると、買って家に置いたとしてもそう長いことは遊べないかな、と。おもちゃとしては高価なので、科学館や児童館などに有って、順番にいろんな子供が体験でき、指導できる大人もついていればいいのかなと感じました。

価格の面からいえば、このような紙のキットで、プリンターの印刷代だけでほぼ同じことはできますね。プログラミングというものを体験してもらう最初の最初、子供がそっち方面に興味がありそうかどうかを見るのにいいかなと思いました。

Smash – サイズ無制限を謳うファイル転送Webサービス

Smash は、ブラウザベースの巨大ファイル転送サービスです。日本でいうところの GigaFile とか宅ふぁいる便みたいなサービス。

今風のデザインで、ファイルをドラッグするだけでアップロードできます。

個人は無料で、追加サービスやチーム利用でお金を取るビジネスモデルのようです。無料でも広告なしで、ファイルサイズの制限もなし、と良いことづくめのようですが、ファイルを扱うサービスでは当初”Unlimited”と売り出しても後日軌道変更を余儀なくされる事例が多いので、さてどうなるか、というところ。

こんな感じでメール等でURLを送って相手に大きなファイルを送ることができます。

# 上のテストは7日で消えるはずです。

via ニュースリリース

ゼロ幅文字にエンコードした隠し情報で、文書をリークしたメンバーを特定

とある会員制掲示板からの文書の流出に困った運営者が、ユニコードの見えない文字「ゼロ幅文字(Zero-Width characters)」を使って流出させたユーザーを特定した、という話が出ていました。

数年前の話、Tom さんが所属していた競技ビデオゲームのチームでは、ログインが必要なプライベートの掲示板を使って連絡していました。その掲示板に書かれた秘密情報や戦術に関する重大アナウンスなどがしばしば掲示板外のウェブにコピペされ、チームにとって大きな問題となっていたそうです。

外部ユーザーの攻撃で中身が漏れたというよりは、メンバーの誰かがコピーしているのでは、と考えた Tom さんは、当時気になっていたユニコードのゼロ幅文字を使ったトリックを仕掛けたそうです。

ユーザーを特定する情報を、見えない文字に変換して埋め込む

ログイン中のログインユーザーのユーザーIDを、一定のルールによってゼロ幅文字の並びに変換します。そして、この文字列が、掲示板のコメントを表示する際に文章の間に埋め込まれるようにします。

コピー&ペーストされた外部の掲示板等を見ると、目には見えませんがそちらにもこのゼロ幅文字を組み合わせた文字列が含まれているので、そこから逆への変換を適用することで、コピーをしたユーザーのIDがわかる、というわけです。

GitHub 上で公開されたデモコードがこちら。動くデモがこちらです。

1 で入れたユーザー名が入っていないように見える2 のテキストをコピーすると、コピー先の 3 から、元のユーザー名が取り出せていますね。

データ列をASCII文字64個でエンコードすれば Base64 ですが、このデモでは 4種類のゼロ幅文字を使った ZeroWidth4 とでもいうべきエンコーディングですね。

元ブログ記事では、この手法を掲示板に組み込んで新しい情報を流したところ、数時間でコピーされた文章からユーザー名を回復し、流出者を特定できた、と語っています。

この場合はうまくいきましたが、この仕掛けを知った上で無実の他人のユーザーIDに書き換える、といった反撃も考えられるので、ユーザー名をそのまま組み込むとかではなく、改竄があればわかるような形にするのがより良いだろう、とも述べられていました。

自衛ツールの登場など

この記事が広く読まれたので、Chrome拡張が早速登場。ゼロ幅文字を絵文字に変換して表示する拡張で、こういうのを入れておくと何かが埋め込まれているな、というのを見つけられますね。急いで作られたせいか、ユーザーが能動的にクリックしないと絵文字表示されないなど、実用するには今一つですが。

それと、英語のテキストでやってる分には問題ないですが、そもそも役割があって文章中にゼロ幅文字が含まれている言語もあるので、一律に除去したり警告したりするようなツールでは不十分だと言えそうですね。

情報を守る立場からすれば、このような追跡手法をいくつも持って仕掛けておくことは有用でしょう。

逆に、内部告発など悪事を暴く活動として秘密情報をコピーする立場から見れば、このような仕掛けがないかを確認したり、同定されないよう過剰と思われる情報を切り落とすツール等を使うなど、ある程度のリテラシーが必要となってきそうですね。

via reddit

関連

忍者猫(Ninja Cat)絵文字がWindows 10に登場 – 合字用Zero Width文字

Unicodeの空白文字を使ってクリックトラッキング – URLに同様の文字を入れ込む

市販のプリンターは印刷時に追跡用の隠しコードを描き込んでいるものがある

[追記 2018-04-11] 隠し情報をゼロ幅文字エンコードする仕組み – Qiita – Ruby で試してみた方

悪のUIデザイン、ダークパターンの実例を見せる動画

ダークパターンについては2010年、概念が提唱された際にこのブログでも紹介しました

ユーザー体験を向上させるのではなく、ウェブサイト運営側の都合でものを買わせたり、ユーザー登録させたりするウェブサイト構築上のトリックを分類して名前をつけよう、というのがダークパターンです。

先週、そのようなダークパターンを解説する動画が公開され、注目を集めています。

とにかく退会したいんだ!

動画の最初はアマゾン。「アマゾンを退会しようとした人はどうなる?」で、一回入ったらそこから出ることは難しい Roach Motel (ゴキブリホイホイ)ダークパターンの実例を見せています。(00:15)

アマゾンを止めようと思ったことがないので知りませんでしたが、日本語でも止めるための手順を説明するブログ記事がいくつもあり、なかなか止め方が難しいのですね。動画と同じように日本のアマゾンでも退会ページを目指してみたのですが、退会に関してはアメリカ版と同じサイト構造になっているようです。

直観的にまず開くであろう、上部ナビゲーションバーの「アカウント&リスト」からは、様々なリンクが表示されるものの、そのどこからも退会ページに辿り着くことはできないそうです。

動画が教えてくれる手順は、

  • ページ最下部のリンクから「ヘルプ」をクリック
  • 「問題が解決しない場合は」から「カスタマーサービスに連絡」
  • 1の「プライム、その他」タブを選んで
  • 2のプルダウンから「アカウントの確認、変更、閉鎖」 (アメリカ版ではここが”Login & Security”だそうで、さらにわかりにくいですね)
  • もう一つ出てくるプルダウンから「アカウントの閉鎖」
  • 「チャット」「電話」「eメール」のいずれかを選び、先方からの連絡を待つ

なるほどこれは大変ですね。多くの人は途中で諦めてしまいそうです。

メルマガ退会を難しく

次はニュースレター/メールマガジンの購読停止(02:15)。メールの末尾に購読中止のためのリンクがあり、それを開けばその相手からのメールはもう来なくなる、という仕組みは良くあります。

日本のメルマガでは手動で依頼しないといけなかったりするのがまだまだ多いので、これでも助かる方かと思いますが、動画作者はここにもダークパターンがある、と喝破しています。

購読中止のリンクが地のテキストと見分けにくい色や太さになっていたり、ガチャガチャと関係のない情報が列挙されて非常に探しにくくなっていることが多い、と言います。

言われてみれば、たしかにこういうのよく見ます。

流れで購入ボタン

3つめのスマートフォンゲームアプリでの事例(02:30)は、「ゲームを始める」「次の面へ行く」などのボタンを全部グリーンの角丸ボタンで続けた上で、ゲーム内課金のダイアログで「購入」の方を同じデザインのボタンで描画する、というパターン。

動画では他に、やたらと「こちらは先ほど売り切れました!」「あとn時間で無くなります!」といった警告を散りばめるホテル予約サイトや、友人のメールアドレス情報を(サービスに招待する目的で)預けることをわかりにくいボタンで8回も押す機会があるような登録フォームをデザインして訴訟を受け負けたリンクトインの裁判、などの事例を紹介しています。

akky's work blog