  |
成功例より失敗例のほうが圧倒的に学ぶものは多いと言う人がいるがなるほどその通りかもしれない。
2時間ほど触ってみてメモを兼ねて気になったことを書いてみる。
なお、私はメインはサーバー系エンジニアであってそこまでクライアント側には詳しくなく、
javascriptはjqueryなら結構使えるとかのレベルで近年のjavascriptは詳しくない。
後試しているブラウザはChromeである。他のブラウザでも試すほどの気力はない。
おそらくもっと詳しい人ならこれ以上のべからず知見をあのページから叩きだすのではないか。
（そういう人はこういうごみページ触るのは無駄な作業と思ってはなから触らないかもしれないが）
まず、最初のページ
https://tokyo2020.org/jp/special/volunteer/
「大会ボランティアに応募する」のリンクボタン（でかっ、でかすぎる）をクリックして
https://tokyo2020.org/jp/special/volunteer/method/
のページに飛ぶ。
このページは応募前の事前説明みたいなのだが、開いてみるとすぐに実に目を引くリンクボタンがある。
「応募を考えてくださっている皆さまへ」
目を引くので押してみると目的の応募ページではなくポエム表示ページに飛ぶのである。
https://tokyo2020.org/jp/special/volunteer-message/
そしてその耐えがたいつまらないポエムを読んだ後やっと下にはなぜか妙に小さい文字のリンクで
やっと応募できるのか思ってクリックすると、なんとさっきのページに戻りでかでかと
「応募を考えてくださっている皆さまへ」を見る再び羽目になるのである。
応募を考えてくださっている皆さまへ→大会ボランティアに応募する→ループで遊べる。
…うれしくない。
「リンクボタンは無駄に大きいと圧迫感があってよくないので大きさは必要な大きさをよく検討し無駄にカラーで広げるな」
と怒られたことが私にはあるが、これを見てなるほどと思わざるを得なかった。無駄にでかいボタンは確かに逆効果。
しかもその問題のリンクボタンはメインの目的（応募ページに飛ぶ）ではないのである。
本来の目的のボタンより目立つボタンがあるのは画面構成として大きく間違っていることを知った。
そもそもトップページ・つまらないポエムページ・事前の応募説明の各ページに
「大会ボランティアに応募する」のリンクがあってそれぞれ飛んでいくページが違うというのも…。
後、リンクボタンの大きさの基準が全く分からないのもあれである。さすがに一つのサイト内では統一したほうがいいと思うのだけど。
上記の「応募を考えてくださっている皆さまへ」のある縦に長いページの一番下に今度はやたらでかく
（でかいから目立つと言いたいが一番下にあるし上の方に同じくらい目立つ「応募を考えてくださっている皆さまへ」があるから無意味である。）
ログインを求められるのだ。Googleアカウント（私にはAndroid携帯かパスワード忘れた捨てアカウントしかない）
Facebookアカウント（持ってない）Lineアカウント（持ってない）
そんな化石のような私はどうするのかしばらく悩んだところ、下に小さく
これはなんだろう。上記3アカウントをホイホイ提示できる人しか相手にしていないんだろうか。若い人はいざ知らず、爺さんばあさんは持ってないだろう。
化石にとって応募の壁は高い。
新規登録で先に進むとメルアドを教えろやコラァと怒られてやる気がつきそうになる。
やむなく捨てアドをコピーして貼り付けようとしたらメルアドコピペ禁止の鬼仕様。
最初から不適合者のそぎ落としにかかっている。これは応募ではなく奴隷の耐久試験なのではないかと思った。
もう一つ、このサイト新規登録をしたら取消せない。ログイン情報を取り消すことが出来ないのだ。
その辺の詐欺サイトならともかく公的サイトでこれとは…認識が甘かった。
やってはいないが、おそらくGoogleやFacebook・Lineのアカウントも同様だろう。
悪いサイトの実例を見て学ぶとかいう殊勝な理由でこのサイトを触る気なら他に使わない本物の捨てアドを使うことを勧める。
本気で応募したい人は別に止めはしないがこのサイトを勧める気にはならない。
このサイトでやるよりはそのうちみんなの会社に来るであろう企業徴兵に応募したほうが幾分かましだと思う。
まず推奨ブラウザが哀愁を誘う。IE11以上って…IEは11までしかないですやん。12…ないよね？
背景が青の白文字なのも意味が分からない。カラフルにしたかったのだろうか。
白文字はラベル的にアクセントをつけたりボタンをカラフルにしてボタンの文字を白にするといった使い方をするもんだと思っていたが、
ちなみに水色のボタンがあるステップ（ぶっちゃけSTEP4や5の削除ボタン)もあり、
背景の青なことが災いし微妙なコントラストで特にそのSTEPは違和感バリバリである。
ボタンに色を付けるほど背景には気を使わないといけないようだ。
細かく言うと、その機能はさらに追加ボタンと削除ボタンがセットで一個でも項目を追加すると削除ボタンがアクティブ（紫色になり）
上限まで追加するとさらに追加ボタンが水色になる。紫色は押せる・水色は押せない(disable)扱いのようだ。
やはり背景は白か色を付けるにしても薄い白っぽいカラーリングに限ると思った。
最初に突撃した先駆者はレポートで国籍すら選択しなきゃいけなかったと悲鳴を上げていたが、さすがにやばいと思ったのか
選択肢を見たら…なるほど初期選択じゃないと日本なんて選択できないわこれというレベルだった。
いろんなサイトを見ているが、これだけのプルダウンは初めて…嫌になるよな。
細かく見ると、実は日本語入力で候補を絞り込めるようである。おお。凄い。
でも説明がないとプルダウンに日本語入力をしようとする人は少ないだろう…。
ちなみに国の選択は「国籍」「上記以外の国籍」「居住国（STEP2）」の三つある
（まあ上記以外の国籍は必須じゃないが…）絞り込みに気づかないとかなりの苦行。
私が驚いたのはほかにもあるが、最初に突撃レポートを出した先駆者の作業で最も衝撃的な画像はNaNで敷き詰められたカレンダーであろう。
今（9/29:0時時点）でも再現する。方法は簡単で生年月日かパスポート期限日を一度入力する。
→再度選択する。これだけである。ほぼ間違いなく日付をDDMMYYYY形式で認識してそれをYYYY年MM月DD日に表示しなおしているが、
その変換した日付を認識できないのである。それであの破壊力抜群のNaNカレンダーを見ることが出来る。
その状態でカーソルを外そうものなら日付がでたらめになってしまい再入力である。
もしやと思い、英語に変更してカレンダーを動かしてみたらビンゴ！だった。英語では問題の事象は起きないのだ。
こいつらひょっとしたら英語でしかテストしてねえな…。英語でもしてなかったりして。
ちなみに恐ろしくどうでもいいことだが、誕生日は1900年以降を入れないと保存できないようにチェックがかかっているが、
まあ、そんなでたらめを入力する私みたいな不埒者は応募しても落ちるだろうから多分問題はないだろう。
さすがにNaNカレンダーはそのうち連中が直すと思う（直す…よな？）ので見たい人は早く見ておくとよい。
私は年配者向けのサイト運営を仕事にしているのだけど、私のところの客さんは縦に長いのを嫌う。
縦スクロールが嫌みたいだ。
短い項目は1行に二つとかやって少しでも入力欄を縦に長くしないように努力する。
はい・いいえのプルダウンで一行丸々使うというのは驚愕の発想である。
トップス・ボトムズ・靴・帽子でそれぞれラベル・プルダウン1行の計8行使うが
私ならトップスボトムズのラベルプルダウンで1行・残りで１行の2行かラベルとプルダウン分けても4行にする。
レスポンシブサイト用のフレームワーク使ってれば仮にスマホの幅になっても調整間違わなければそれなりに表示してくれる。
何よりパソコンのフルサイズ表示ではいいいえのプルダウンで一行とかはないだろう…。
国籍だって長い国名にも限度があるのだから長さ半分でいいと思うしそういう謎なプルダウン幅が多すぎて不思議である。
はいいいえを選択する際の右の異常に長い空欄が私には物悲しく思えるのだ。
このサイトがプルダウンだらけなことがあり正直一番私が気になってイライラした点はこれである。
でもSTEP4では短めのちょうどいい幅のプルダウンを横に並べていたりもするし、
正直何を考えているのか。（まあ、行追加処理の方は1行のほうが実装に都合がいいからこの部分だけちゃんと幅合わせしたんだろうけど…）
エラーチェックでエラーになるとポップアップが表示されるがこれがなかなかうざい。
その辺のプラグインを使ってもエラーを修正すればエラーメッセージが消えるご時世でわざわざ×ボタンを押してエラーメッセージを消さないといけないのだ。
びっくりだ。私のつたない技術でさえそれはしないと言い切れる。
例えばこのサイトでスポーツに関する経験の入力欄は200文字である。
試しにああああああを連打して200文字以上入れてみると困った事象に出くわす。
文字数の上限を超えていますのメッセージが画面中に出るのだ（一つではない、おそらくオーバーした文字数分）
電話番号で0連打でも同じことになる。面白く…はない。ぼーっとして押してると大量のエラーにポカーンとすることになる。
そしてすべてのエラーメッセージを×ボタンで消していくことになる。
まあエラーを直して保存ボタンで保存して再描画しても消えるが…。
私は今でもおそらく現時点だと古臭い部類に入るだろうjquery.validateを使ってたりするが、
あれで結構便利でありそんなに考えて実装しなくても決してこんな実装にはならない。不思議だ。
このサイトはReactを使ってるみたいだが、Reactにだってそういう部類のバリデーション実装は多分あるだろうになぜこうなったのだろうか。
私だけでなく多くの人があのサイトにダメ出ししているが、本当に使えば使うほどダメサイトである。
写真を提供して申請してさらに先に進めばより魅力的な魔境が待ち受けているのかもしれないが残念ながらそこまでする気にはなれなかった。
良いところはReactを使っていること…くらいではないか。
ログインページのロゴから推察するにAtosがこのサイトの責任企業になるんだろうか。
どれだけAtosやその他関係者が中抜きしたり下流に放り出したりしたか知らないが、億くらいの金はかけて作ったのでしょう？
もうちょっと責任もって作らない？下っ端企業が100万程度で作ったサイトだってもう少しちゃんとチェックする（というか実装を求められる）よ。
ちゃんとした企業なら1000万～2000万も出せばこれと同一内容でよりレベルの高いサイトを提供するんじゃないの。
最後に、私の感想は上記だが、話題になっているので私と似た目的でこのサイトを触っている人もいると思う。
qiitaにお戻りください
なんか、最近のqiitaはポエムも3行も許されるようになってきてるんですが、これ以上ゴミ記事増やさせないでください＞＜
anond:20180929000847
はい表現の自由に抵触します
8
