まとめの限定公開に「リンク限定」が追加されました。URLを伝えてまとめを共有しよう!

東京五輪ボランティア応募サイトのコードがいかに酷いか

ボランティア応募サイトの使い勝手が悪いと話題になってますが、ソースコードもなかなかの品質でした。 HTMLのコードが悪いと、アクセシビリティ(音声読み上げやキーボード操作)にも支障があるので、開発者だけでなく利用者にも不便を強いることになります。
WAI-ARIA React CSS HTML JavaScript カネを使わせなかった結果
69984view 87コメント
153
リンク 東京2020大会ボランティア | 東京オリンピック・パラリンピック競技大会組織委員会 11 users 11076 東京2020大会ボランティア 東京2020大会のボランティア活動についてご紹介します。
池田 泰延 / ICS @clockmaker
オリンピックのボランティア募集サイトが酷いと話題だったので、コードを見てみたら残念品質でした・・・重複したid属性 ・javascript:void(0) ・まともに実装されてないWAI-ARIA  (音声読上も酷い) ・body内にstyleタグが頻出 これらは一例。ちなみにReact製。 tokyo2020.org/jp/special/vol… pic.twitter.com/ed6TrpByy1
 拡大
Masahiko Sakakibara @rdlabo
五輪のWebサイト、ボランティアのページだけ ・コントラスト低くて視認性が低い ・無駄なDOM操作いれてて見にくい ・というか自分たちで策定したウェブアクセシビリティ方針を満たしていない というやんちゃっぷりで、なかなかに絶句してる。 --- 東京2020大会ボランティア tokyo2020.org/jp/special/vol… pic.twitter.com/0Mlbi8RDTL
 拡大
深津 貴之 / THE GUILD @fladdict
地獄UIオブ・ザ・イヤーをいきなりとれそうな大物きたな・・・ news.yahoo.co.jp/byline/kandato…
リンク Yahoo!ニュース 個人 1342 users 10827 むずかしすぎる!五輪大会ボランティア応募フォーム(神田敏晶) - Yahoo!ニュース いよいよ東京五輪のボランティアの募集がはじまった!しかし、すぐに登録しようとすると、この応募フォームがとってもむずかしい!これでは誰も登録できないのではないだろうか?
HTML
池田 泰延 / ICS @clockmaker
オリンピックのボランティア募集サイトで、HTMLコーディングで気になる箇所(2) volunteer.tokyo2020.org pic.twitter.com/Q4d7i2C2s1
 拡大
池田 泰延 / ICS @clockmaker
<a href="javascript:void(0);">がいけてない理由 ・ステータスバーに表示される ・モダンな代替手段があるので、この記述が古くさい ユーザーにとって理解不能な情報、意味のない情報がステータスバーに表示されるのは微妙。 残念なことに、今も多くの国内サイトで使われていますよね・・・。 pic.twitter.com/cwz2kbb7bA
 拡大
池田 泰延 / ICS @clockmaker
あと、aタグにalt属性もついています。 title属性ならわかりますが・・・。 ※alt属性はimgタグに使うもの pic.twitter.com/KCKeoCnCtd
 拡大
音声読み上げ
Kazuhito Kidachi @kazuhito
“マイページにおいて、パソコンのキーボードを使った操作や音声読み上げソフト使用時等、アクセシビリティに関する対応が不十分となっております。” 応募登録|東京2020大会ボランティア tokyo2020.org/jp/special/vol…
すこや @sukoyakarizumu
東京五輪のボランティア申し込みフォーム、力強い代替テキストですね。 この代替テキストを書いた人は、この文章を読み上げられて、自分にあったユニフォームをきちんと選べるのでしょうか・・・ tokyo2020.org/jp/special/vol… pic.twitter.com/cKNlkCuKOL
 拡大
 拡大
墓守フロントエンド a.k.a. kzhrk @kzhrk0430
東京2020大会ボランティアのWAI-ARIA、ヘッダメニューとフッタメニューのaria-labelしかないので健常者以外お断り感ある
池田 泰延 / ICS @clockmaker
音声読み上げはズタズタの状況。 macOSの標準機能VoiceOverを使うと、応募フォームの読み上げを検証できます。 異なった入力フォームの説明が読み上げられるので、どのフォームを入力しているのか、目が不自由な方は、音声だけで判断できない。 やはり、HTMLコーディングの品質が重要。 pic.twitter.com/yfm8YUNE9L
 拡大
 拡大
 拡大
補足

ソースコードの不備は、特にアクセシビリティの恩恵を必要とする方に不便を強いることになります。

目の不自由な方は、音声読み上げをヒントにして操作します。間違った音声読み上げがされるようなソースコードだと、応募フォームへの入力がひどく困難になります。

CSS
\\ uto-usui // @uto_ao
やべえ、こんなコード久々に見た ... 😭 #visual img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: none !important; width: 100%; height: 100%; } twitter.com/clockmaker/sta…
いくら @YamadaIkra
html, body { min-width: 1200px; } togetter.com/li/1270944#c54… 「東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を..」togetter.com/li/1270944 にコメントしました。
いくら @YamadaIkra
なんで media="screen and (min-width: 768px)" のcssファイルで min-width:1200pxに指定してるんだ?そういう作法があるのだろうか。 togetter.com/li/1270944#c54… 「東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を..」togetter.com/li/1270944 にコメントしました。
JavaScript
死後強まるツイート @mizchi
React使ってるのに id 指定してる時点で React 的にもありえん
死後強まるツイート @mizchi
あ、でも form か。 uncontrolled form だとしたら id 指定するな。重複は論外だけど
唯桜(中段は見てから余裕でガード出来な) @yuizakura
東京オリンピックの公式サイトのボランティア登録ページでwebpackのmapファイルまで上がってるからReact.jsのソース一式丸見えだけどええのか? pic.twitter.com/TvsChavokn
 拡大
補足

ソースマップは開発情報の塊です。程度にもよりますが、セキュリティー的に手放しに公開していい情報とは言えません。

特にボランティアの個人情報を扱うサイトなので、不要な開発情報は公開すべきではないでしょう。

Fumio SAGAWA @albatrosary
別にReactが悪いわけではないとは思うが、何故かReactに多いのは??? Reactやるなら結果的にDOMがどうなるかってことをAngularやVue.js以上に確認しないといけないと思っているんだけど、こういう人たちは皆無何だろうなぁ https://t.co/Tj6beNlOYI
残りを読む(7)

コメント

ふぁむ氏 @phantom0730 2018-09-28 15:41:14
マイナンバーの時も今時javaアプレット使ってて閉口したけど…どうしてこう、お上のWeb要件は基本情報の資格も持ってないコーダーが作ったようなモンしか出てこないんだよ
ちょちょまる @sakuya_little 2018-09-28 16:21:48
専門学校の夏休みの宿題で出来が良かったのを使いました感
まさご叔父さん @masago53 2018-09-28 16:43:35
やべぇよ・・・やべぇよ・・・
fai into VR @faifx 2018-09-28 17:16:49
よくわからないままに React 使っちゃったみたいな?最新の流行だから??
虎次(とら🐯つぐ) @tora_2com 2018-09-28 19:04:57
ツッコまずにいられない方々が正に有志のボランティアと化しているような…ちゃんとツッコミをフィードバックする体制が整ってるかは知らんけど。
だいすけ @daisuke_n 2018-09-28 21:11:01
ついに動作チェックどころかソースコード確認もボランティアにwww
Off Black @OffBlack1 2018-09-28 21:35:17
どうやら全国のwebエンジニア、webデザイナーがアップはじめたようです。(ツッコミのために)
Off Black @OffBlack1 2018-09-28 21:41:10
とりあえず、DBの設計みたいな〜…ER図とか〜。SQLとか〜。このフォームから想像するに、たぶん全国のDBエンジニアがみた途端、ショックで吐血して瀕死になると思うのよ。60カラムくらいありそうなてーぶるとか、入れ子の入れ子の入れ子な謎のビューとか。インデックスが…うっ…頭が頭痛で痛いっ!!
電磁波ちゃん語録 @yunyun_yonyon 2018-09-28 21:45:18
どーせやっつけ仕事程度に思ってたけど、ここまでくると故意にやってそな気がしないでも
しわ(師走くらげ)@休暇ホスィ @shiwasu_hrpy 2018-09-28 21:54:10
ねぇこれが国費という名の税金クオリティなん?これで?
よこなが @yokonaga_h 2018-09-28 21:59:41
コレにいくらかかってるんだろう?
ヘルヴォルト @hervort 2018-09-28 22:20:47
金をかけるなと言うからこういうレベルのができたのでは?
がらえぽ @glaepo 2018-09-28 22:22:18
とほほを見ながら、メモ帳で作ってそう…
kumonopanya @kumonopanya 2018-09-28 22:27:40
導入の壁が低いVue.jsつかおうよ?
電子馬@お腹いっぱい。 @Erechorse 2018-09-28 22:29:48
ちゃんとお金だしなよ...緊縮極まりないな
ふひひっ☆ @satoda3104s2 2018-09-28 22:57:51
何もかもガバガバすぎて草
白蓮 @Wh1te_L0tu5 2018-09-28 23:02:38
https://web.archive.org/web/20140828215446if_/https://portaldovoluntario.rio2016.com/ESIREG/NewFormRequest.do?language=0&formId=1 参考までに前回のリオオリンピックにおけるボランティア応募フォーム(アーカイブ・製作元は今回と同じくATOS)。コードレビューは面倒なのでしたくありませんが
深月スカルチノフ🌒謎のふりかけ民 @Key_Hukatuki 2018-09-28 23:05:01
ヤバイってのはサイト見てわかるんだが、コードので何がどうまずいのか教えてくれ…… 注文した人もそうだったりして……
白蓮 @Wh1te_L0tu5 2018-09-28 23:07:06
JOCが今までボランティア用ポータルサイトを運用してきた(IOCから直接指定されたと思われる)所に対してどこまで影響力があるのか(金を出せる余地があったのか)ってのがイマイチ見えてこないのでよく分からないんですよね
桜花ゲートウェイ@多摩丙丁督 @Sakura87_net 2018-09-28 23:28:59
流石にとほほ見ながらメモ帳で作ってもここまで酷いことにはならんだろ。
桜花ゲートウェイ@多摩丙丁督 @Sakura87_net 2018-09-28 23:31:03
Key_Hukatuki 料理のレシピで、材料欄に砂糖大さじ2杯が2つあるのにレシピのどこを見ても砂糖を入れるところがない。くらいヤバい。
ゆいとまる @ytm3558 2018-09-28 23:37:06
うっわぁ………(白目)
労働一号@b142499e @ai11gukt4icqgu3 2018-09-28 23:52:52
タダで作れと言われてもやらんだろうにタダでチェックはしてくれるんだなお優しいこった。
中谷康一 Koichi Nakatani @knakatani 2018-09-28 23:55:30
「応募フォームの入力には約30分かかりますが、入力途中で保存することが可能です。」って書いてある。まるで確定申告だなぁ。
中谷康一 Koichi Nakatani @knakatani 2018-09-28 23:58:22
もしかしたらサイトのどこかに縦読みで「ミ・ン・ナ・ニ・ゲ・テ」って書いてあったりして。
n_a_o_k_i @n_a_0_k_l_ 2018-09-29 00:02:44
これならお上御用達の連中にサマータイム移行も任せて大丈夫なんじゃないっすかねー(鼻ホジ
汝、翼を与える@ばってん先に翼ばくれんね イベント・・(出た、出たが最初から居るとまでは・・・) @ryunosinfx 2018-09-29 00:06:20
耳が痛い。でもヤーパンの大手SIer経由で発注したらもっと酷いことになっていそうなのでReact使ってるだけマシ。ただ、ReactギリギリHTMLビミョーな3年目ぐらいの人間も混じってんじゃないかな。職業PGは本当に勉強しないよ?WordPressが有る世界じゃHTMLを規約どおりに書くインセンティブは殆ど無いから、安いお賃金じゃ仕方ないんだけど。
Brandkloof @Brandkloof1 2018-09-29 00:22:33
コードに「ひでむし」が「まず、かいはつとちゅうで おとことにげた    おぐら かおる てめェーだよ てめェー まえのばん 7かいも セックスして シャワーも あびずに かいしゃに くるなよ。」とか書いてあっても驚かない・・・
都幾川 沙月 @SatsukiFox 2018-09-29 00:25:25
数年前には高クオリティのサイト作ってた小学校4年生も居たのに・・・(え
amallo @ttmsamallo 2018-09-29 00:52:57
そりゃソースコード見てあーだこーだ言うのに納期ないからイキイキするよ
ひえたろう@笑顔と上機嫌こそが最高の化粧 @hietaro 2018-09-29 01:10:43
電通はこれで数百万取ってそうな気がする…実際カネの流れと実際に作ったところってどうなんよ
空家の恵比寿様1968 @ebcdic_ascii 2018-09-29 01:15:35
うちのWebアプリエンジニア達に他山の石として見せてみようかな
語るマン @katal_man 2018-09-29 01:19:25
ボランティアで作ったソースでしょ
@izanamu 2018-09-29 01:49:20
漢字が中華フォントに化けるのは <html> で lang="ja" を指定してないからですね(当該webサイトでは日本語版でも lang="en" が指定されている)。
Kodox @kodokujinsei 2018-09-29 01:50:57
まぁ内容からして、ネット可燃性は高そう。ここまで来ると、制作陣もボランティアかと勘ぐるが、実の所どうなのか。
aomakerel @aomakerel1782 2018-09-29 01:51:35
素人の俺の方がまだマシなコード書くぞ…
のん介 @yu_skv719 2018-09-29 02:20:40
作った人はいいな〜アドバイスめっちゃもらえるし
カミ @kami2805 2018-09-29 02:36:53
坊主憎けりゃ袈裟まで憎いだなー。 オリンピックはどうでもいいけど、サイトのソースまで叩きだすとか、嫌味な姑レベルやん
CAW=ZOO@高津娼会 @CAWZOO 2018-09-29 02:38:27
動けばそこまで突っ込みはいらないけど、まあそれ以前の話だからなあ。動いてるけどまずデザインがひどいっていう。項目多すぎるっていう。
ゐすと@黒蓮の騎空団長 @ebony_steed 2018-09-29 02:54:16
ク〜〜〜〜〜ル、じゃぱ〜ん(絶対零度)
鳥公 @crowkou_ 2018-09-29 03:08:29
kami2805 そもそもサイトが酷いからソースまでチェックされてるんやで。 誕生日とか直接入力できず、1クリックごとに1ヶ月遡るとかアホかと思う。
六面サイコロ@腰痛 @rokumen_saikoro 2018-09-29 05:44:23
おそらく有償で作られてるサイトがこの出来なら、集まる無償ボランティアの質はこれ以下なのでは
茶でもすするか @zzz_zzz_zoo 2018-09-29 06:16:47
まさか、UIもソースコードもひどい東京五輪ボランティア応募サイトは、ボランティアでやってくれる優秀なWebエンジニアを釣るための罠だったのでは?
はたさん @aki_hatamoto 2018-09-29 06:18:02
金をかけなきゃ全てがこうなる。これはまだ命に関わる話じゃないから笑えるレベルだけどインフラとか酷い中抜きで微々たる給料しかもらえてない人達に任せることがリスクだと世の中が考えてないのか怖い。それで何でも電子化とか良く言えるなと。
Ikunao Sugiyama @Dursan 2018-09-29 07:05:00
「これは、無償ボランティアをどんどん参加させるための策略だったんだよ」「な、なんだってー」
あき @i0VEP 2018-09-29 07:57:36
crowkou_ 誕生日の入力欄はDDMMYYYYって書いてあるからその通りに数字を直接打ち込めば一発で終わりますよ(小声)
稟@馬主ライフ @Rin_chaaaaaaaan 2018-09-29 07:59:40
kami2805 こんな酷いUI、どんな実装したら出来るんだ!?って逆に興味が湧いてくるんですよ…
桜花ゲートウェイ@多摩丙丁督 @Sakura87_net 2018-09-29 08:13:50
kami2805 料理だと肉に火が通ってないとか、そんなレベルで厨房見たら冷凍のママ焼いてたとかそんな程度なんだから叩かれて当然だと思います。普段「そこまで言うことないだろ」と思っている身ですが、流石にちょっと擁護できるレベルを超えてる。味付けが悪いとかそんな次元じゃ無いんですよ。
ハナ・ターレン(洟大人) @hanataray 2018-09-29 08:18:04
何回下請けに丸投げされるとこうなるんだろ。総予算と最後の現場への支払いの比率って300対1くらいじゃない?
てとらおどん @TetraodonS 2018-09-29 08:18:24
これもボランティアに作らせたんだよきっと
tohtetsu @tohtetsu 2018-09-29 08:22:49
ボタンティア募集サイトを作るために、まずWeb業界から優秀なボランティアを招集しないとな!(使命感
カツヲ @RX78_01 2018-09-29 08:24:08
検証班おつかれさまでした
いくら @YamadaIkra 2018-09-29 08:57:58
個人的には、坊主(オリンピック)はどうでもいいけどすごくファンキーな袈裟(Webサイト)を着ていらしたので興味を抱きました。みんながみんなオリンピック憎しで言ってるに違いない、というのは危険な考え方。
だいすけ @daisuke_n 2018-09-29 09:15:52
このページにいくら掛けたのか知りたいw
Knappertsbusch @Knappertsbusch 2018-09-29 09:16:29
ツッコミだろと思う人が居るかも知れないが、こう言うコーディングしてると言う事は相当高い確率でサーバに脆弱性を抱えているだろうと言う事。こんなサイトにあれだけの個人情報を預けられない。
ジョージ2世 @GEORGE221 2018-09-29 09:18:27
こういうの、都から受託した電通が中抜きしてサイト構築を下請けの下請けの下請けに安く発注して起きるのかしら?
おいちゃん @semispatha 2018-09-29 09:34:57
DDMMYYYYって普通に罠だよな。日本人だとYYYYMMDDになるだろ。
denev @_denev_ 2018-09-29 09:35:46
確かに酷い出来なんだろうけど、世の中のシステムのどれだけがこれよりマシなんだろう。
中谷康一 Koichi Nakatani @knakatani 2018-09-29 09:48:59
待てよ、日付の並び順が DDMMYYYY (つまり "29092018") ってことは欧州 (またはアフリカ、中南米) で作られたコードかも知れないな。その辺りには IOC 委員がたくさんいるし、IOC 委員の息のかかったシステム開発会社も無数にあるだろうな。
渡志郎 C95 3日目 X-13a @watarishirou28 2018-09-29 10:05:36
この問題満載のサイト、ここでまとめられた指摘者を「補足拉致してボランティアに参加させる」ために作られた釣りだとしたらJOCに相当の策士がいると思う。
池田 泰延 / ICS @clockmaker 2018-09-29 10:26:08
izanamu コメントいただきありがとうございます。 私もはじめはhtml lang="en"が原因だと思ったのですが、直接原因はCSSのfont-familyでした。 ・言語設定を日本語を選択したときに、html lang="ja"に動的に切り替わる ・「今日」の部分だけ中華フォントであり、他の部分は日本語フォント (続く)
池田 泰延 / ICS @clockmaker 2018-09-29 10:26:26
(続き) ・.rc-calendarクラスで、sans-serifよりも中華フォントを優先してアテられている ・具体的には「Hiragino Sans GB」という簡体中文フォントが指定されている
yybbjjeehh @yybbjjeehh 2018-09-29 10:51:01
hietaro 今どき数百万ぽっちだと、この程度のWEBサイトも作れないですよ。不具合はあれど、これくらいで数百万円なら、むしろ格安の部類かと思います。
ありえない @tkr_nkn 2018-09-29 11:07:49
ボランティアのおじいちゃんが作ってるからだよ
無式MT @MxxTxxxx 2018-09-29 11:08:51
オリンピック叩き芸ももう飽きたな 五輪は盛大な公共事業だからボランティアに頼るのは間違いだが、そんなのもう知れ渡ってるし、アホでもバカでもオリンピックさえ叩ければお湯かけて3分で社会正義ヒーローに変身できるインスタントライダーベルトと化してる ネットでイキってるやつなんてそもそも有償でも応募しないくせに
中谷康一 Koichi Nakatani @knakatani 2018-09-29 11:32:59
sorry.tokyo2020.jp とか sorry.tokyo2020.org とかいうドメインネームがあるんだな。いろいろ謝りたいらしい。
ぷほるず@アラサーITちゃん @homerunutuyo 2018-09-29 11:55:13
おもしれぇもん作ったって聞いてみんなソースまで見てるんやで
yomoya@原稿を頑張ろう @yomoya_chukou 2018-09-29 12:17:28
本当に国の仕事なんですか???って感じやん…
堀石 廉 (石華工匠) @Holyithylene 2018-09-29 12:23:40
むしろ、なんか適当な条件で入札やっちゃって経験ないところが落札しちゃった感が……。電通とかならまだマシなもの作ってくるはず。あそこ、意外といろんなサイト作ってるし。
ztt0711 @ztt0711 2018-09-29 12:24:15
ダメな見本として本当に勉強になります
fortrand🌵 @fortrand 2018-09-29 12:38:05
まあひどいなとは思うけど、任意のGoogle検索の上位サイトが素晴らしいかというと…なので、平均的なWebサイト作成に頼んだら平均的なものができたとかそんな感じに思えなくもない。(ツイート中に「今も多くの国内サイトで使われています」とあるから、業者の使用テンプレがもともとひどかったとか)
jk @jk_1976 2018-09-29 13:08:19
半角スペース二つを示す2020を直打ちさせられるってのはなかなか素敵だな
Taka @tnakamura23 2018-09-29 13:26:27
こんなもん「ワールドワイドITパートナー」のATOSがリオや平昌のコードを使いまわしてるものと思ったのだが違うのだろうか。
雷更新世 @pleist 2018-09-29 13:57:06
変わったフォント使おうとしてYahei選んじゃったやつかと思ったらHiragino Sans GBも簡体字か…。WenQuanYi Micro Heiってのも知らないけど見るからに中国のゴシック体だし意図的に中華フォントが選ばれているなあ。
虎次(とら🐯つぐ) @tora_2com 2018-09-29 14:26:18
MxxTxxxx あなたの逆張り芸は飽きる以前につまらないですけどね。
kn @darks508 2018-09-29 14:30:27
国が「みんな!ボランティアに志願して!無料で!」と言うと反感を買うと学んだ結果がこれなんだろう。ひどい出来のものを転がしておけば、俺が検証してやる俺ならもっといいものを作ってやると無料で志願者を集めることができる。
ほげほげ @ts59h 2018-09-29 16:38:56
ボランティアの人がつくったんだよ。町内会のおばちゃんが『清掃のお知らせ』をWordでつくるのと同じ感覚でさ。
労働一号@b142499e @ai11gukt4icqgu3 2018-09-29 17:22:32
darks508 なにその2chで教えを請う方法みたいなの。
末路 @kensandayoo 2018-09-29 17:47:08
ボランティアが作ったんじゃね笑
砂場 @chipstarko1 2018-09-29 18:34:10
UIやデザイン云々以前に依頼主が「アレもコレもソレも全部載せて!詰め詰めにして!」と言って混沌としたパターンでもありそう。
@izanamu 2018-09-30 04:19:20
clockmaker clockmaker 詳細な検証、お疲れ様です。自分が{Ctrl+U}で見た際には lang="en" のままだったので単純なミスかなとも思ったのですが、動的に上書きしてたみたいですね。まあしかしそれ以前に色々とヒドイというか、体が痒くなる様なコードを長時間見てられないというか…後学のためこのサイトはこのまま永久保存アーカイブ化して置いて欲しいですね。
みっくす・じゅーす @mixjuice_100cc 2018-09-30 18:02:20
情報漏洩も怖い ダイジョブだよねセキュリティ
jk @jk_1976 2018-10-01 08:42:23
jk_1976 必須項目はスペースだとエラーにしてるけど、コードを持たない=「半角スペース2 つ」というコードを割り当てたので、無理矢理入力させるためにASCII文字コードで手打ちさせてると思われる そもそも企業コードが必須って時点で動員ノルマを感じるけど
ログインして広告を非表示にする
ログインして広告を非表示にする