deadorxp のお話

Windows XPだとページ全体に警告表示するJavaScriptを配布します という記事に違和感を覚えているので記事を書いてたんだけどどうしても片手落ち感大きいので書きなぐったまま。とりあえず一旦公開。

まずはじめに

sotcker.jp さんが自身のメディア特性にも関わらずXPの使用者が多いことに対してもった危機感とそれに対して行った行動は素晴らしいと思う。
おっしゃるとおりサイト制作者がセキュリティリスクを抱えることになるOSを使い続けることは百害あって一理なしである。
そのために自身のサイトのアクセス数を犠牲にしてこの施策を施したことは素敵だと思う。 *1

ただ、それでもやはり気になることがある。ので書いておく。

deadorxp の意図を届けたい対象者を考えてみた

真っ先に思いつくのはXPをリプレイスしない中小企業や自治体だと思う。
しかし、これらの団体に属する端末使用者に対してはこの手法はさほど有効ではないと思う。

  • 端末使用者と購買担当者が別であるため端末使用者に警告したところで購買担当者の啓蒙につながらない
  • そもそも啓蒙が功を奏したところでリプレイス出来ない理由は無理解ではなく、個々の企業が抱えるソフトウェア資産や資金繰りの問題であることはすでに論じられているとおり
  • この施策によって業務効率が落ちてリプレイスの機運が高まるかもしれない。が、UA偽装で回避されてしまえば何も意味がない。さらに言えばUA偽装でお茶を濁せるという間違った理解に誘導しかねない。
  • 古いOSを使い続ける企業と取引(金銭的なものだけでなく情報を預けることも含む)することが忌避されるような社会的コンセンサスを醸成するほうが大事ではないか。

真のターゲット

では、この施策の意図が届きXPのリプレイスに繋げなければいけない相手は誰か。
情報格差の弱者側の人々だと思う。ステレオタイプ的な「PCやインターネットがわからないお父さん・お母さん・おじいちゃん・おばあちゃん達」であろう。(実際にはLinuxすら使いこなす高齢者も多々いるのであくまでも一般論としたい。)

彼らは月に数度、目的があってPCを立ち上げ無防備にもセキュリティパッチを当てていないOSのなかの生まれたままの姿のインターネット・エクスプローラーで「インターネット」をするのかもしれない。
そんな彼らが日々接する情報だけで我々が思うのと同程度にXPのリスクを知り得るだろうか。そしてそのリスクの周知は社会として本当に十分だったろうか。
たしかにNHKなどで特集が組まれているらしい話は見かける。しかし、例えば「オレオレ詐欺」と同程度に目の前にある危機として受け取られているだろうか。というか記憶に残っているだろうか。難しいと思う。

どう感じるか

やはり危機を想像できない限りリプレイスを促すことは難しい。
危機感を持てていないところにあのような画面いっぱいに広がる警告のみの表示を見た時にどう感じるか。少なくとも僕がその立場であれば「怖い」である。
その怖さは決して「XPを使うことが怖い。新しいPCを買おう。」ではない。「PC怖い。インターネット怖い。触りたくない。」である。

その結果起きる行動は「インターネット利用の自粛」ではないか。
もちろん、目の前に大きな危機が迫っている。「XP使うくらいならインターネットするな。」という理屈はわかる。僕も本音で言えばそうだ。他人に迷惑かけるくらいなら引きこもっていろと思う。
ただ、本当にそれでいいのか。世の中の情報の取得方法が変わっていくなか自分の父親や母親・親戚・知人の誰かが旧来のメディアのみに頼らざるを得ず、知らず知らずに社会的弱者になるのを見逃すことになるかもしれない。

ただの理想論

だからこそ、我々のできることは排除ではなく不毛なまでに続く説明と説得でしかないと思う。
いずれ別の理由でXPの乗ったPCを買い換える理由が増えるかもしれない。そのときに「PCはもうこりごりだ」と思わせてしまっては社会的損失である。
どんなに手数がかかろうとも。うん、つらい。

いろいろな手法が考えられると思う。この手の問題に「たったひとつのさえた方法」は存在しない。
だからこそ、 deadorxp はある側面では価値がある。でも、気軽にどこにでも適用できるような考え方ではない。チューニングが必要だと思う。

これを機に今年は取引先にことあるごとにこの手の話をしてみようと思う。
CSRが一過性のブームになり現在は下火になっているように思えるが、この手の問題の啓蒙こそがインターネットを活用している企業が社会に果たせる責任の一つではないだろうか。 *2
可能であれば、公共性の高い任意団体(アクセシビリティに関わる団体やIT関連の推進団体)などの旗振りと大手企業の大々的な協賛があると良いのだろうけど。僕一人の力では及ばないので偉い人達を巻き込むしかない。

とりあえず、実家に帰ったら今使っている親のPCの状態を確認しようと思った。
それと積読の Fearless Change をどうにかして読まないと。

*1:結果的にブランディングにもつながり stocker.jp さんにとっても良い結果をもたらすと思う。

*2:もちろんそれをやっている団体は多々あるが、さらに増えてほしいという願い

さよなら hasLayout さよなら zoom

CSS Property Advent Calendar 2013 22日目です。なぜクリスマスは師走にあるのでしょうか。(またもや遅れてごめんなさい。)
前日は Tenderfeel さんの WebTecNote - CSS3 background-clipの実例紹介 でした。翌日は Hiroki Tani さんの CSSカスタムプロパティとMythの話 | inkdesign でした。


今となっては皆が知っているIEにかつてあった hasLayout プロパティとそれのおかげでランクアップしたお話。
IEとhasLayoutとzoomに感謝する記事です。技術要素なし、自分語りにつき閲覧注意。

hasLayout 攻略される

2006年末ごろIE7が出たばかりでブラウザと言えばIE6対応が主業務だった(ような気がする)頃のこと。
その頃僕はHTML+CSSで一通りのページがさくさく組めるようになり、IE6の不具合を一個ずつ時間をかけてつぶすことにそれなりの達成感を味わえていた牧歌的な時代。


当時僕は情報収集が下手でRSSとかもそんなに巡回できていなくて有名人のブログ情報を読むのが精一杯。海外の情報などほとんど追えていなかった。
そんなある日、当時の同僚が「俺らの睡眠時間削ってたのはこいつだった・・・。」とメールで教えてくれたのが hasLayout の解説をした海外のブログ記事だった。


IE6,7 相手に CSS を書いたことがある人ならみんな知っているように hasLayout の不具合は数多くの崩れを生み出し、多くのマークアップエンジニアやコーダーと言われる人達の終電を撃墜した強敵。(少なくとも当時の僕には強敵だった。)
その記事を読んでこんな理解だった記憶がある。

  • IEには hasLayout という隠しプロパティ *1 があるらしい
  • それが発狂すると崩れるらしい、widthとかあてると崩れなおることがあるのはこれ
  • zoom ってのを使うと見た目に影響せずに直せるらしい、何それ裏技みたい! *2


zoom の存在を知らなくて zoom: 100 とかあててゲラゲラ笑ってたのを今でも覚えている。当時文字以外を css で拡大できるなんて考えもしなかった。

時差を思い知る

この記事を読んだ次の日から作業は劇的に効率化した。reset.css 的なものにデフォルトが display: block になるような要素に zoom: 1 を当てたり、 zoom: normal でそれを解除できることを発見したり(当時ぐぐってもわからなかったのでいろいろ試行錯誤した) 、理由なく li に zoom: 1 をあてると後悔するということを理解したりするのに時間はかからなかった。
仕事仲間の間では hasLayout が話題の中心になった。それなのに日本語のブログとかではあまり言及がなく「なんでだろうね?」というような話をしていた。(当時の僕のググル力は極端に低かったので見つけられなかっただけなんだとは思う。)


それから数ヶ月たって日本語の Tips 系のブログで hasLayout の記事が出るようになり、海外との時差を初めて実感した。
「自分はみんなより早く知っていたんだ」みたいなことを思うことはなく、僕もたまたま同僚が海外の記事を読んでいて、たまたまそれを教えて貰えたから数ヶ月の間まわりより早く帰れていたということに漠然とした不安を抱いた。
日本語の分かりやすい記事が出るまで非効率な作業を非効率だと気付かずにこれからも続けていくことがあるのかと思うと背筋が凍る思いがした。


この一件から、苦手な英語ブログもRSSに登録して見出しだけは読むようにした。
幸い同僚には海外記事へのアンテナ感度が高い人が多くその人のソーシャルブックマークをウォッチするようにもなった。 *3
hasLayout の話題は僕の中で情報収集の方法を根底から変えた出来事だった。


今も英語はほとんど分からないし、できることなら日本語の記事だけを読んでいたい。
それでも少しでも海外の情報に目を向けていると良いことがあるというのを知れたため、その後の働き方は大きく変わったと思う。
何よりも視野が広がり調べることが楽しくなった。これはすべて hasLayout と zoom による成功体験と薄氷をふむような危うい立ち位置にいた自分に気付けたことが大きい。

さよなら hasLayout さよなら zoom

この冬まぼろし社さんがIE8対応を別途費用とするアナウンスを出した。
弊社 Gaji-Labo もIE8対応は徐々に減っており来年はさらにこの傾向は強くなると思っている。そうすると hasLayout のことは気にしなくてよくなるなと思ったら、だいぶ前の話を思い出した。
zoom プロパティは非標準だし、 transform: scale() などの標準的な手法で同じことができる。今後 zoom を書く機会は減るのだろう。それでも僕は zoom のことを忘れない。と思う。たぶん。いや、忘れたいけど。

*1:隠しプロパティって・・・

*2:恥ずかしい・・・

*3:当時ソーシャルブックマークはほとんど使っていなかった

寿司 Advent Calendar 2013 6日目

Advent Calendar を口実に寿司を食べるチャンスを手にしました。
寿司 Advent Calendar 2013 6日目です。昨日は you sakai さんの Sonic Food 寿司について でした。

ITS素晴らしい

関東のあいてぃー系な会社では加入しているところも多い 関東ITソフトウェア健康組合 という保険組合があります。通称ITS。
施設が充実しており、活用している方も多いのでは。とくに トスラブ箱根 ビオーレ などの保養施設は設備とコストパフォーマンス面から一部で有名ですね。

箱根いいですね。年末進行な師走、現実逃避したいですね。今すぐロマンスカーに飛び乗りたいですね。はー、温泉入りたい。


ちがう、今日は寿司の話だった。

ITSの食事処

さて、そのITSは宿泊施設だけでなく食事処の評判もとても良いのです。

桜華樓は以前僕も行きました。大きなフカヒレ美味しかったです。

鮨一新

そして仲間内でとくに話題なのが「鮨一新」。
「ITSと言えば寿司」[要出典]という勢いで知り合いにプッシュされつづけていました。

メニューを見ると「先付一品、寿司十四カン、巻き物一本、お椀みそ汁、デザート アイスクリーム」で3,150円(被保険者・被扶養者)と回ってないのに驚きの価格。しかも美味しいらしい(知人曰く)です。ちなみにITSの食事処はバー以外すべて予約制のようです。必ず予約してから行きましょう。
というわけでこれは試したい!廻ってない寿司食べたい!!!

寿司たべてきた

というわけでお寿司食べてきました!






あれ? *1

店舗情報

魚屋路 下高井戸店
〒168-0073 東京都杉並区下高井戸3丁目4-6
最寄り駅 京王線下高井戸


久しぶりのお寿司おいしかったです。ご馳走様でした。

明日は寿司 Advent Calendar 20137日目 GeckoTang 先生の担当です。よろしくお願いします!

*1:次はちゃんと予約します。うぅ;;

モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013

Web Accessibility Advent Calendar 2013 初日です。
http://www.adventar.org/calendars/64

neotagです。初日なのに記事公開が遅れてしまいました。
しょっぱなから出鼻をくじいてしまい大変申し訳ありません。(土下座)

追記 2013/12/06

この記事の補足になる記事を @milk54 さんが書いてくださいました。
リニューアルして情報が得られなくなったというサイトを調べてみた
追記ここまで


JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。
このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。

普通に組んだ場合

Library など使わずに普通に JavaScript を書いた場合です。(最近の Library はこの問題を解決済みなものが多いのでそもそも考慮不要な場合も多いです。)

デモ: http://jsdo.it/neotag.twit/sBK5
※解説に必要なダイアログの表示部分のみです。閉じるとかアニメーションとか気の利いた物はありません orz

問題点

このデモでは単にダイアログを表示しているだけなので、何を表示したのかユーザーエージェント側ではわからない状態になっています。
すなわち音声読み上げブラウザなどに対して何が起きたのか一切伝えられていない状態です。リンクを押しても反応がなく、次に何をしたらいいのか分からず迷子になってしまいますね。

解決策

フォーカスをあてる。以上。

表示したダイアログにフォーカスをあててあげましょう。これにより、読み上げ位置がダイアログに移動し迷わずに操作を継続できるようになります。
jQuery を使える環境であれば下記の2ステップで解決可能です。

  • dialog の要素に tabindex="0" を付与する *1 *2
  • dialog 表示後に .focus() をする。 *3

デモ: http://jsdo.it/neotag.twit/uDAb

html:

<div id="dialog" tabindex="0">

JavaScript:

            target.focus();

OSXChrome などで見るとダイアログの周りに薄い水色の outline が付いているのが分かるかと思います。
要素にフォーカスがあたっているときに出るブラウザデフォルトの装飾ですね。(textarea とかで良く見るやつ)
outline が不要であれば css で outline: none にしてあげてください。ただし、全称セレクタなどでまとめて指定するのは避けましょう。input や textarea などブラウザデフォルトの挙動は極力残すべきです。*4


「閉じる」にも注意

閉じる機能の実装をしていませんが、これも単に閉じただけでは読み上げ位置が元の場所に戻りません。
モーダルダイアログを開く際に押したリンクを記憶しておいてモーダルダイアログを閉じたらそのリンクへフォーカスを戻すなどの工夫が必要ですね。

まとめ

モーダルダイアログを例に、視覚に頼ったUIで迷子になる問題とその解決方法を紹介しました。
とくに厳密なモーダルダイアログはダイアログ以外の操作を受け付けないため迷子どころか落とし穴に入った状態になる危険性すらあります。
便利どころかアクセス不能ですね。アクセシビリティゼロです。
これはユーザビリティをあげようと思って知らないうちにアクセシビリティを落としている好例だと思っています。

代替テキストによるアクセシビリティの向上だけでなく、各種操作が視覚表現に頼ったものになっていないか少しでも意識できるようになればと思い書きました。

今回は手軽な解決方法の紹介でしたが、関連技術として WAI-ARIA などのしっかりした仕様もあります。この Web Accessibility Advent Calendar 2013 でも出てくると思いますので楽しみにしています。


Web Accessibility Advent Calendar 2013 の2日目は、ChibaReimi@rechiba3さんです。よろしくお願いします!

*1:tabindex に 1 以上の数字を与えるとタブ移動の順序が変わり、管理できなくなると動作が破綻します。明確な理由がないかぎり0にして順序はユーザーエージェントに任せるのが無難です。

*2: 実はHTML4.01だとdivにtabindexふれないんですよね。HTML5万歳。(謎

*3: 表示前に .focus() することはできないので必ず表示後に行いましょう。

*4: モーダルダイアログは表示そのものが視覚的な誘導になっているので outline 不要な場合が多いですが、input や textarea などは視覚的な誘導を残しておかないとどこにカーソルがあたってるか分からなくなりますよね。

GitX.app を command line から叩く

↓の gitx の .app になってる奴を使ってるんだけど、terminal から叩けないのをどうにかしたかった。
https://github.com/brotherbard/gitx

結論

/Applications/GitX.app/Contents/MacOS/ のpathを通すだけでよかったorz

.zshrc

PATH=$PATH:/Applications/GitX.app/Contents/MacOS/

微妙な問題

$ gitx すると GitX じゃね?って聞かれる。小文字、大文字を無視する設定のFilesystemになってるからyでもnでも同じ物叩くけど一手間増える。

$ gitx
zsh: correct 'gitx' to 'git' [nyae]?

Google AJAX search API - News bar の表示件数を減らす

http://www.google.com/uds/solutions/wizards/newsbar.html

これの件数が4件だとちょっと多いのでどうにか3件にしようと思って、ざっくりコードさらった。
↓の定数的な変数名の変数(謎)を上書きしちゃえば表示件数減らせた。

    GSearch.SMALL_RESULTSET=3;

間違いなくアンドキュメントなので気を付けて。

mysql インストール

brew install mysql したら↓こんなんでた。すごい親切。(makeしたら必ず出るんかな)

Set up databases with:
    unset TMPDIR
    mysql_install_db

If this is your first install, automatically load on login with:
    cp /usr/local/Cellar/mysql/5.1.55/com.mysql.mysqld.plist ~/Library/LaunchAgents
    launchctl load -w ~/Library/LaunchAgents/com.mysql.mysqld.plist

If this is an upgrade and you already have the com.mysql.mysqld.plist loaded:
    launchctl unload -w ~/Library/LaunchAgents/com.mysql.mysqld.plist
    cp /usr/local/Cellar/mysql/5.1.55/com.mysql.mysqld.plist ~/Library/LaunchAgents
    launchctl load -w ~/Library/LaunchAgents/com.mysql.mysqld.plist

Note on upgrading:
    We overwrite any existing com.mysql.mysqld.plist in ~/Library/LaunchAgents
    if we are upgrading because previous versions of this brew created the
    plist with a version specific program argument.

Or start manually with:
    mysql.server start