テーブルの行全体をクリックで子要素のチェックボックス操作（jQuery使用）

http://kachibito.net/snippets/24578/table-tr-check.html

上記のかちびと.netさんの記事をみて、これは親切なUI設計には必要だな…と思って早速授業に取り入れました。
こないだ、古い記事をDisったばかりですが、いつも参考にさせていただいてます。

が、このページのJavaScriptコードだけでは、チェックボックスそのものをクリックしたときに反応がないので、コードを追加して以下のようにしました。
他人のコードをそのままコピペでは…。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {	
    $('input[type=checkbox]').click(function() {
                  var t = $(this);
                    if(t.prop('checked'))
                       t.prop('checked', '');
                    else
                       t.prop('checked', 'checked');
    });
	
    $('table tr').click(function() {
        var c = $(this).children('td').children('input[type=checkbox]');
        if(c.prop('checked'))
		c.prop('checked', '');
        else
		c.prop('checked', 'checked');
    });

});
</script>

赤字部分が追加した部分です。
これで、チェックボックスそのものに操作をしたときにちゃんと動きます。
行全体をクリックしたときにチェックボックスが連動するのはいいとして、チェックボックスそのものをクリックしたときに何も反応がないんじゃ、「あれ？」ってなっちゃいますから。


これを授業に取り入れた理由は、これからのECはシニアマーケットをどう取り込んでいくかが鍵になると思うからです。

高齢化、過疎化、核家族化の加速。

これら日本が抱える問題は、そっくりそのままECにも関わってきます。
高齢化して外出を控えるようになった過疎地に住むお年寄りが便利なネット通販を利用したいと思うのは当然の流れ。

お年寄り=ネットを使わない

なんて思わないでください。
一線を退いて、自分のための時間はいくらでもある方々が多いわけですから、ネットでモノを買うくらいの操作なんていくらでも覚えられます。

ただ、やっぱりフォーム入力はやりにくい…と。
僕でさえ、疲れている時やメガネをかけていないときはチェックを入れるのが難しいですから。
お年寄りの方であれば尚更…ということを考えると、動作エリアは大きくしたほうがいいわけです。


以下にサンプルを置いておきます。
単体ファイル（jQuery本体はCDNで読み込んでいるので）なので、ソースを見てみてください。

テーブルの行を子要素のチェックボックスに連動させる



ここからは、蛇足です。

ECサイトを利用するとき、フォーム入力などがめんどくさいということで電話で注文したい方も多いと思います。
そうしたことを考えたら、カートページに注文用の電話番号を載せない手はないハズなのですが…。

現在あるほとんどのECサイトのカートページが、電話番号を掲載していません。
カートページだけでなく、トップページにすら掲載していません。

これ、とっても重要ですよ。

フォーム入力ページに
「ご注文内容をお電話でも承ることができます。」
これ、けっこう効くと思います。

さらに言うと、お年寄り以外にも効果はありますよ。
御中元や御歳暮等の大量注文の場合には、１件１件フォームに入力するのがアホらしいので、電話やFAXで注文したいという方も多いです。

今年の夏に、務めている会社の運営するECサイトで御中元用の大量注文をいただきましたが、それも電話でのやりとりの後に送り先をFAXしてもらうという方法でした。

あるいは、送り先一覧のエクセルファイルをフォーム送信できるようにするとかもいいかもしれません。
現在は備考欄に一覧を羅列してもらうという方法が主流（というより、この方法しかない）ですが、いろいろと改善していく余地はまだまだありますね。

アメリカでは、スカイプを使って直接オペレーターとやり取りできるサイトもあるようです。


カートページに商品名と商品番号が一覧で出ていて、電話番号が記載されていたら、僕も電話で注文すると思います。
楽だし、確実だから。


ECサイトって、今回のようなUIや様々な案内というのは重要だと思います。
SEOやマーケティングにうつつを抜かしている暇があるのであれば、こうしたことに重点を置いてサイトの改善を行なったほうがいいです。

ヤコブ・ニールセン博士も、自身のコラム10 High-Profit Redesign Prioritiesの７番目の項目でこう言ってます。

7. Catering to Seniors

Older people are the fastest-growing segment of Internet users. In fact, they are virtually the only remaining growth market in rich countries, where most of the younger people who want to get online already have accounts.

Many senior citizens are rich and have time on their hands. When it becomes difficult for them to get around, the Internet becomes a natural place for them to spend some of their vast piles of money. Seniors are also less into piracy and tend to be more loyal than fad-chasing young people.

Best of all, you can take advantage of the fact that most websites discriminate horribly against older users.

Even government websites that supposedly target retirees are designed according to guidelines for thirty-somethings. Because so many sites are hard for them to use, seniors will shower you with business if you're the honorable exception who acknowledges their special needs.

(And, those needs aren't even that special — it's much easier to make sites usable for seniors than for users with disabilities, plus there are many more seniors and they tend to be richer.)


高齢者層のインターネットユーザが急速に増えています。実際のところ、先進諸国ではマーケット増加の余地が残っているのは高齢者層だけと言ってもいい。なぜなら、若い世代の人であればオンライン（マーケット）に興味がある人はすでにアカウントを持っているからだ。

高齢者の多くは、お金にも時間にも余裕がある。歳をとって動き回るのが難しくなれば、持て余すほどの大金を使う場所としてインターネットに意識が向いてくるのはごく自然なことだ。高齢者はサイトを荒らし回ることもなく、流行を追いかけて様々なサイトを見て回る若い人たちと違って、忠誠心が強い（決まったところで物を買う）という傾向もある。

そうであるなら、ほとんどのウェブサイトが高齢者ユーザをひどく軽視しているという事実を活用（利用）しない手はない。

退職後の高齢者が利用することが前提とされている政府機関のウェブサイトでさえ、30 代くらいの年齢層を基準としたガイドラインにそって設計されている。


高齢者には難しすぎて使えないというウェブサイトがほとんどなのだから、高齢者のニーズを受け止め、使いやすいウェブサイトをあなたが例外的に提供するなら、湯水のようにお金をつぎ込んでくれるだろう。

（ましてや、高齢者のニーズに答えるサイトを提供するということは、ハンディキャップ（障害）を持つユーザーのためにサイトを設計するよりはるかに簡単だ。おまけに、高齢者の数の方がずっと多いわけだし、その多くは若い層よりお金に余裕がある。そして高齢者のニーズは決して特別なものではなく、そのデザインは若い層のユーザーにも受け入れてもらえるのだ。）

僕はちょっと前に、あるNPOの代表から頼まれて行政に提出するための事業計画書を作成するときに、シニアマーケットについての論文をたくさん読んだりしたこともあって、わりとシニアマーケットに関しては他の人より詳しかったりします。

独居老人向け宅配事業ということで、配食や洗濯物の回収と配達などのサービスと、行政による安否確認等のサービスを「官民連携」によって行うというモデルでしたが、そこでも「お年寄りが携帯でいかにサービスの申し込みをしやすいか」をいろいろ考えました。

２４時間スタッフを常駐させるようなモデルではなかったので、夜間は携帯電話によるインターネットからの利用です。

モバイルは画面が小さいので、UI設計はかなり大変そうだな…と思いました。

結局、事業所として使おうとしていた土地・建物が取得できなかったことで計画はお流れになってしまいましたが。
これは裏話ですが、そのNPOの代表が社民党の党首と仲が良くて県議会の承認が得られなかったという政治的な事情があっただけなんですけどね。

僕は一時期、雇止め→ネカフェ難民→ホームレス…という状態になったことがあり、その時にお世話になったNPOなので応援したかったのですが…。


どこの党とつながっているとかどうとかで、ホームレス支援など人の命に関わる活動を行なっているNPOの活動に圧力をかけるなんて、いやはや、沖縄の（自民系）県議会議員は腐ってるなぁと思います。


ま、日本全国似たようなもんだとは思いますけどね。