Slide 1
Slide 1 text
東京都新型コロナ対策サイトの
アクセシビリティ改善を語る
伊原 力也 伊藤 俊輔
2020/10/18
Code for Japan Summit 2020
Slide 2
Slide 2 text
自己紹介
サイオステクノロジー株式会社
チーフ・デザイン・オフィサー。
HCD-Net 認定人間中心設計スペシャリスト。
主に金融系システムのユーザーインターフェイス設計・デ
ザインなどを専門にしている。また、アクセシビリティ関連
として日本DAISYコンソーシアムに参加するなど、読みや
すさ・理解しやすさに関して興味・関心があり活動をして
いる。
freee株式会社 デザイナー。
HCD-Net 評議委員および認定人間中心設計専門家。
ウェブアクセシビリティ基盤委員会 WG1委員。共著書に
『デザイニングWebアクセシビリティ
』、監訳書に『コーディ
ングWebアクセシビリティ』『インクルーシブ
HTML+CSS&JavaScript』がある。
クリエイティブユニットmokuva所属。
伊原 力也
伊藤 俊輔
@magi1125
@shunito
Slide 3
Slide 3 text
アクセシビリティとは
● access + ability = アクセスできる度合い
● 多様な状況に対する、情報にアクセスするためのルートの幅広さ
● 「アクセシビリティの向上」とは、利用方法の選択肢を広げ、
使える状況を広げる取り組みのこと
Slide 4
Slide 4 text
東京都 新型コロナウイルス感染症 対策サイト
Slide 5
Slide 5 text
tokyo-metropolitan-gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
Slide 6
Slide 6 text
Issues · tokyo-metropolitan-gov/covid19
Slide 7
Slide 7 text
スクリーンリーダー利用時のデモ動画
Slide 8
Slide 8 text
すべてのAccessibility
Contributorに敬意を表します
Slide 9
Slide 9 text
前代未聞の現場、それを伝えたい
● 約2ヶ月で数十件のアクセシビリティIssueが提案され、高速で反映され、
ユーザーフィードバックが寄せられる現場は前代未聞！
● たいてい「どうしたらアクセシビリティ向上を始められるか？」からの
議論になるのに、この現場では最初からフルアクセルだった
● 障害当事者ユーザーも協力し、現実的なラインを議論しながらも
どんどん改善されていく様子は、圧倒的なRe:DESIGN感を感じた
● なぜそれができたのか？どのように進んでいったのか？
それを共有することで他の現場でもRe:DESIGNを起こしたい
Slide 10
Slide 10 text
きっかけのIssueと行動原則
Slide 11
Slide 11 text
ユニバーサルデザイン対応を確認する · Issue #65 · tokyo-metropolitan-gov/covid19
Slide 12
Slide 12 text
サイト構築にあたっての行動原則
Slide 13
Slide 13 text
サイト構築にあたっての行動原則
Slide 14
Slide 14 text
ポイント
● シビックテックにおいてはインクルーシブな環境と
インクルーシブなアウトプットが必要不可欠
● はじめから「アクセシビリティが必要だ」と宣言すると
有識者・協力者を集めやすい
● 後付け対応だとコストが高くなりがちなので、
その点でも初期から巻き込むのが重要
Slide 15
Slide 15 text
自動テストツールの導入と改善
Slide 16
Slide 16 text
自動テストツール導入のきっかけ
● 対策サイトの公開後、多くの協力者が開発に参加するようになり、日々新しい情報
や機能が追加されている状況
● アクセシビリティ上の問題も改善のイシューが登録されるのと同時に新しい問題も
発生して、イタチごっこ
● さらにこのコードベースから地方版も作られようとしている……
なるべく多くの開発者にアクセシビリティを意識してもらい、新規の問題が生まれにくくす
る仕組みが必要だと考えた。
Slide 17
Slide 17 text
自動テストライブラリvue-axeの導入
● 対策サイトは、Vueのフレームワークである「NuxtJS」で開発されており、ローカルの
開発用サーバ上でビルドし開発する仕組み
● アクセシビリティ検査ライブラリであるvue-axeを開発用ビルド設定に追加
● アクセシビリティ上の問題があるとブラウザの「開発者ツール」のコンソールにメッ
セージとして表示するように設定
vue-axeのベースとなっているaxe-coreは、Deque社によりオープンソースで公開されて
いるアクセシビリティチェックライブラリで、Lighthouseのアクセシビリティ項目のチェック
でも利用されています。
Deque : axe-core
Slide 18
Slide 18 text
背景色とテキストの
コントラスト不足の指摘
ID属性の重複の指摘
ランドマークの
不具合の指摘など
Slide 19
Slide 19 text
ポイント
● 多数のコントリビューターがいる場合に、アクセシビリティを意識してもらい、新しい
問題を作ってしまわないような仕組みとして有効
● できれば開発の初期段階で設定し、共通認識を持ちながら進められるとよい
● 開発が落ち着いてきたらチェック項目を減らすなど、チェック対象の見直しなどもで
きるようにするとなおよい
● 機械的なテストで発見できないアクセシビリティ上の問題も多数あるので、有識者
による試験も組み合わせる
gov.ukによる2017年の報告によれば、ツールにより特性はあるが機械的な検査により発見出来るアクセシビリティ上の問題は17%
～37%とのこと。
Slide 20
Slide 20 text
アクセシビリティ試験
もくもく会の開催
Slide 21
Slide 21 text
オンラインアクセシビリティもくもく会 - 東京都新型コロナウイルス対策サイト改善
Slide 22
Slide 22 text
Web Content Accessibility Guidelines (WCAG) 2.1
Slide 23
Slide 23 text
東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック
Slide 24
Slide 24 text
Ameba Accessibility Guidelines
Slide 25
Slide 25 text
東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック
Slide 26
Slide 26 text
キーボードフォーカス時にoutlineが表示されるようにする · Issue #1147 · tokyo-metropolitan-gov/covid19
Slide 27
Slide 27 text
ポイント
● 個々に改善提案を挙げるより、まず網羅的にチェックし、Issue化
● 25人いれば、10画面を2時間＋αでひと通りチェックできる
● 達成基準ごとに分担、精度よりカバー範囲を優先
● 読みやすいガイドラインを使い、質疑に対応できる相談役を立てる
Slide 28
Slide 28 text
東京都 covid-19 対策サイトにアクセシビリティ視点でコントリビュートしてみた
Slide 29
Slide 29 text
検査陽性者の状況の3段階進化
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
検査陽性者の状況の3段階進化
SVG
HTML
HTML
Slide 32
Slide 32 text
検査陽性者の状況の3段階進化
1. エクセルから起こしたSVG、読み上げや多言語対応に難あり
2. HTML化で改善、要素増加対応やレスポンシブ対応も必要に
3. 縦積みリストになり、上記の課題が解消されている
Slide 33
Slide 33 text
表の追加：検査陽性者の状況 · Issue #309 · tokyo-metropolitan-gov/covid19
Slide 34
Slide 34 text
「検査陽性者の状況」コンポーネントコーディング（table組みでOK!） · Issue #860 · tokyo-metropolitan-gov/covid19
Slide 35
Slide 35 text
「検査陽性者の状況」テーブルを横均等7分割から縦の積み上げにする · Issue #1520 · tokyo-metropolitan-gov/covid19
Slide 36
Slide 36 text
Tokyo COVID-19 Information Website - a Collection by macropygia on CodePen
Slide 37
Slide 37 text
ポイント
● 多言語対応や要素追加を考えるとHTML化が必要になる。
結果として機械可読性があがり、アクセシブルになる
● ウェブの媒体特性に合った（＝マテリアルオネスティな）デザインは、
多様な状況に対応しやすく、実装コスト面でも有利
● いっぽう、ウェブにあるだけでアクセシブル、スピードは正義でもある。
調整コストを考えると段階的な改善という作戦も必要
Slide 38
Slide 38 text
相談フローの4段階進化
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
相談フローの修正 · Issue #167 · tokyo-metropolitan-gov/covid19
Slide 42
Slide 42 text
PC: SVG
SP: SVG
Slide 43
Slide 43 text
相談フローの4段階進化
1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
2. HTMLになり多言語対応できたが、読み上げ順に難あり
3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
4. デザインが改定され、多言語・読み上げ・レスポンシブに対応
Slide 44
Slide 44 text
[/flowページ] コンポーネントコーディング · Issue #659 · tokyo-metropolitan-gov/covid19
Slide 45
Slide 45 text
PC: HTML
Slide 46
Slide 46 text
SP: HTML
Slide 47
Slide 47 text
相談フローの4段階進化
1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
2. HTMLになり多言語対応できたが、読み上げ順に難あり
3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
4. （上記3をユーザビリティテスト、見出しを追加しさらに改善）
5. デザインが改定され、多言語・読み上げ・レスポンシブに対応
Slide 48
Slide 48 text
[/flow] PC版で矢印の示す順番にコンテンツがスクリーンリーダーで読み上げられない · Issue #1440 · tokyo-metropolitan-gov/covid19
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
相談フローの4段階進化
1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
2. HTMLになり多言語対応できたが、読み上げ順に難あり
3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
4. デザインが改定され、多言語・読み上げ・レスポンシブに対応
Slide 51
Slide 51 text
aria-hiddenを指定して
スクリーンリーダーから隠す
PCかつスクリーンリーダーでアクセス
SP版のHTMLをvisually-hidden化して
見た目上は隠す
Slide 52
Slide 52 text
相談フローの4段階進化
1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
2. HTMLになり多言語対応できたが、読み上げ順に難あり
3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
4. デザインが改定され、多言語・読み上げ・レスポンシブに対応
Slide 53
Slide 53 text
[/flow][全面改修]ページマークアップ · Issue #3315 · tokyo-metropolitan-gov/covid19
Slide 54
Slide 54 text
PC: HTML
Slide 55
Slide 55 text
SP: HTML
Slide 56
Slide 56 text
ポイント
● HTMLも線形、音声も線形である。ゆえにスクリーンリーダーには
線形に読み上げて意味がわかる順序が必要
● スマホ版では要素を縦に積みがちゆえに、線形な順序である可能性が高く
スクリーンリーダーでも理解しやすい
● 有りモノで上手くまかなえるか考えるのも1つの手段。
永続性・メンテ性・美しさと「いま伝わるか」は天秤に掛けて考える
Slide 57
Slide 57 text
グラフの4段階進化
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
グラフの4段階進化
1. 見た目にグラフはあるが、
スクリーンリーダーでは存在が不明
2. スクリーンリーダーでも
グラフの存在はわかるが、内容は不明
3. グラフとは別に隠しテーブルがあり、
スクリーンリーダーで内容がわかる
4. グラフとは別に見えるテーブルがあり、
より多くの人が内容を理解できる
Slide 60
Slide 60 text
グラフにaria-labelを付与する · Issue #2448 · tokyo-metropolitan-gov/covid19
Slide 61
Slide 61 text
table提供やcsv提供による、グラフのアクセシビリティへの過渡的な対応 · Issue #1091 · tokyo-metropolitan-gov/covid19
Slide 62
Slide 62 text
スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい · Issue #2068 · tokyo-metropolitan-gov/covid19
Slide 63
Slide 63 text
オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは
Slide 64
Slide 64 text
Essential for Some, Useful for All
今村：「障がいを持っていなかったとしても、グラフを読めない人もいるのでは？」と
いうコントリビューターからの提案を受け、数字が羅列するテーブルを追加で表示さ
せることにしました。
一見グラフの方が直感的にわかりやすい気がしますが、実は今この数字がかなり
見られていて、SNSなどでスクショされてツイートされるのはグラフより表の方が多い
んです。
Slide 65
Slide 65 text
ポイント
● 「グラフがある」とわかるだけでも取り得る選択肢は増える、
アクセシブルになっている
● 隠しテーブルでも情報を取得できる人は増える。
グラフ自体がアクセシブルになればもちろん最高だが、
メインコンテンツがアクセス不能な期間を最短にするのが先決
● グラフ→テーブルといった別の表現による提供は、
特定の人（全盲、弱視、色弱等）をアクセス可能にするだけでなく、
より多くの人にとっての理解のチャンスを増やすことにも繋がる
Slide 66
Slide 66 text
視覚障害当事者が
スクリーンリーダーで使ってみる会
Slide 67
Slide 67 text
“目が見えないエンジニア“として、多様性ある社会をつくりたい。情報アクセシビリティーの向上に取り組む中根雅文さん
Slide 68
Slide 68 text
東京都コロナ対策サイトのスクリーンリーダー・ユーザビリティテスト台本
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
東京都 新型コロナウイルス感染症対策サイトをスクリーン・リーダーで使ってみる会 実況まとめ
Slide 71
Slide 71 text
テスト結果サマリ：OK
● サイト全体の構成：ナビゲーション類から概ね理解できる
● シンプルな情報ページ：見出しと本文とリンクなので問題なし
● グラフ内容の理解：テーブルによって行と列と数字から構成を類推できる。
※ただし、これらのデータから何を示唆として受け取るべきかは難しい
Slide 72
Slide 72 text
テスト結果サマリ：要改善
● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
包含関係を理解しにくい。類推はできるが自信は持てない
● 問い合わせの手段：電話しかないので改善の余地あり
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
グラフのパネルの要素出現順の検討（人数・件数と切り替えボタンとグラフ） · Issue #3115 · tokyo-metropolitan-gov/covid19
Slide 75
Slide 75 text
テスト結果サマリ：要改善
● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
包含関係を理解しにくい。類推はできるが自信は持てない
● 問い合わせの手段：電話しかないので改善の余地あり
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
flowページのSP版HTMLにh4見出しを立てる · Issue #3111 · tokyo-metropolitan-gov/covid19
Slide 78
Slide 78 text
テスト結果サマリ：要改善
● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
包含関係を理解しにくい。類推はできるが自信は持てない
● 問い合わせの手段：電話しかないので改善の余地あり
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
電話以外のお問い合わせ方法の検討 · Issue #3113 · tokyo-metropolitan-gov/covid19
Slide 81
Slide 81 text
グラフの色を識別可能なものにする
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
色弱者 用にチャートで使われる色を変更 · Issue #740 · tokyo-metropolitan-gov/covid19
Slide 84
Slide 84 text
チャートのカラーをアクセシビリティを考慮した色へ変更する · Issue #1172 · tokyo-metropolitan-gov/covid19
Slide 85
Slide 85 text
拡張性と基準とトーン&マナーから導かれる要件
● 4段階までのデータ系列を想定する：
それぞれを塗りで見分けられ、白背景とも見分けられること
● 塗りの上に文字が乗ることを想定する：
塗り色と上に載る文字とのコントラストを4.5:1確保すること
● 塗り色は凡例の文字色としても使用を想定する：
白背景と凡例文字色とのコントラストを4.5:1確保すること
● 「躍動、繁栄、潤い、安らぎ」のイメージを踏襲：
生死を連想させる色（≒黒）、危険を煽るような色は回避する
● それぞれの数値を正しく公平に伝える：
薄い塗り＋囲み、一部模様付き、一部異なる色相などは
部分強調の意図が出るおそれがあるので回避する
🤯
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
６ たいへん見分けやすい とても使いやすい
５ 見分けやすい 使いやすい
４ つねに見分けられる 使える
３ 見分けにくいこともある 使えるが惜しい
２ 見分けにくい やめてほしい
１ 見分けられない ぜったいにやめてください
Slide 88
Slide 88 text
チャートのカラーについての再考、パターンの提案、アンケート作成を行う · Issue #2364 · tokyo-metropolitan-gov/covid19
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
なぜ紆余曲折があったか
1. 見分けにくいという声を受け、色の調整を開始した
2. 同時にグラフの拡張を見据え、組み合わせる要素や段階を増やした
3. 要素や段階が増えると、見分けられる表現は限定されていく
4. 避けたい表現があり、そことの競合回避の優先度が高かった
5. 複雑な状態を前提とした配色は、シンプルなグラフでも有効とは限らない
6. クリアできる表現の方向性は、色弱や弱視当事者でなければわかりにくい
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
ポイント
● そもそもグラフを複雑にしないようにする
● グラフの段階や要素が増えるほど、誰にとってもわかりにくくなる
● コントラストも模様も色相も万能ではなく、面積や配置次第で
どうやっても見分けられないケースが出てくる
● シンプルなグラフを維持し、なるべくコントラストのみで
差をつけるのがベターなケースが多そう
● 色弱や弱視の当事者に見てもらうのは絶対やったほうがよい。
シミュレーターは目安でしかない
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
やさしい日本語におけるruby実装
Slide 96
Slide 96 text
「やさしい日本語」とは日本語を習得していない子供や外国人にも分かりやすいよう、
簡易な表現を使ったり漢字に読み仮名をふるなど、表現をやさしくした日本語。
Slide 97
Slide 97 text
rubyタグ対応の開始
● 「単語（よみ）」の連続が読みにくいという意見があり実装をスタート
● 言語切り替えで「やさしい日本語」が選択された場合に、通常の翻訳テキスト（span
タグ）ではなくルビ付きテキスト（rubyタグ）を表示するコンポーネントを開発
● 翻訳テキストをルビ付きテキストに変換するための書式を整備
● 影響範囲が広く、その他のIssue対応への影響を避けるため専用の検証環境とブラ
ンチを準備
● ページごとに担当をわけ概ね実装は終了したが、リリースに至らず
Slide 98
Slide 98 text
[ruby] やさしい日本語 のルビタグ対応· Issue #3116 · tokyo-metropolitan-gov/covid19
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
ruby実装の課題
1. サイトの開発が活発で、多数のテキスト指定個所をルビ用コンポーネントに置き換えるにあたり
コンフリクトが多数発生。
2. ルビにより表示される要素の高さが変わり、レイアウトの崩れが各所発生したこと。また、最新
のレイアウトの適応や確認に追いつけなくなっていった。
3. 言語切り替えの際にブラウザ側ですべてのテキストの置き換えを行うため、ルビへの変換もそ
のタイミングで行う必要があり、パフォーマンス面での懸念があったこと。
パフォーマンス面については、体感的には多少遅いものの許容範囲で動いているようでしたがス
マートフォンなどでの検証の手もたりず、そのままとなっています。
初期設計時にうまく取り込むことで、より簡単に対応できる可能性がありますので、次の課題として記
憶しておきたい。
Slide 101
Slide 101 text
他にも数十件のIssue
Slide 102
Slide 102 text
他にも数十件のIssue
● HTML文法ミス等の修正、不適切なWAI-ARIAの指定を修正
● spanやdivを妥当な要素に変更、ランドマークやrole属性の追加
● 見出しレベルの修正、行列見出し(th)の追加
● 画像やアイコンにテキストラベル追加
● キーボードで操作可能に、フォーカス順の修正、フォーカスの可視化
● テキスト色のコントラスト改善
Slide 103
Slide 103 text
Issues · tokyo-metropolitan-gov/covid19
Slide 104
Slide 104 text
まとめと、これから
Slide 105
Slide 105 text
「前代未聞の現場」からの示唆まとめ
● 『シビックテックとアクセシビリティはズッ友』
前提にあればすぐ協力し合える。有識者と女将を確保しよう
● 前提が共有できる環境ならば自動チェックも有効そう。
＋なるべく初期に、荒くても網羅的にチェックするのは有効そう
● スピード重視でも、少しずつアクセスの選択肢は増やせる。
オープンに議論することで対応のアイデアは広がる
● アクセシビリティを必要とする人に協力を仰ごう。
テストしてもらって「使える」とわかることがモチベになる
● アクセシビリティ改善はパッと取り組めるものもたくさん。
OSSコントリビュートの入り口にぜひ！
Slide 106
Slide 106 text
俺たちの戦いはこれからだ！
● まだIssueはいくつか残っています、そして…
● いまこの瞬間においてどの程度アクセシブルなのか？再試験が必要そう
● アクセシビリティを継続的に維持するにはどうしたら良いか？
● 有識者や女将や改善PR出してみる人を増やすにはどうしたら良いか？
● 各地域ごとの対策サイトをアクセシブルするにはどうしたらいいか？
● 今後新しく何かが生まれたり広まったりするときに、
より効率よくアクセシビリティを高めていくにはどうしたら良いか？
Slide 107
Slide 107 text
ありがとうございました
@magi1125, @shunito
Special Thanks
@forestgtree
Slide 108
Slide 108 text
Code of Conduct (行動規約) と参加時のお願い
● サミットは参加者・セッション登壇者・スタッフみ
んなでつくるイベントです
● 誰もが参加しやすいサミットを「ともに考え、と
もにつくる」ことを目指しています
● お互い敬意を持って、価値観を認め合いなが
ら、建設的に意見を交わしましょう
● それぞれが文化的および個人的なバックグラ
ウンドがあることを理解するように努めましょう
● Github - Code of Conduct
https://github.com/codeforjapan/codeofcond
uct
● HackMD - Code of Conduct
https://hackmd.io/@codeforjapan/CodeOfCon
duct
● オンライン版の注意点（抜粋）
○ それぞれが文化的および個人的なバックグラウンド
があることを理解するように努めましょう
● 困った時は…
○ メール: [email protected]
○ Slack: jinnouchi ・ takesada_c4j
#cfjsummit
Slide 109
Slide 109 text
Code for Japan Summit 2020
特別協賛
協賛
協力
#cfjsummit
Slide 110
Slide 110 text
Code of Conduct (行動規約) と参加時のお願い
● サミットは参加者・セッション登壇者・スタッフみ
んなでつくるイベントです
● 誰もが参加しやすいサミットを「ともに考え、と
もにつくる」ことを目指しています
● お互い敬意を持って、価値観を認め合いなが
ら、建設的に意見を交わしましょう
● それぞれが文化的および個人的なバックグラ
ウンドがあることを理解するように努めましょう
● Github - Code of Conduct
https://github.com/codeforjapan/codeofcond
uct
● HackMD - Code of Conduct
https://hackmd.io/@codeforjapan/CodeOfCon
duct
● オンライン版の注意点（抜粋）
○ それぞれが文化的および個人的なバックグラウンド
があることを理解するように努めましょう
● 困った時は…
○ メール: [email protected]
○ Slack: jinnouchi ・ takesada_c4j
#cfjsummit
Slide 111
Slide 111 text
問合せ・連絡先はこちら
あなたがハラスメントを受けている場合、あるいは、
誰かがハラスメントを受けていることに気づいた場合、
その他の懸念がある場合は、すぐに各トラック常駐のスタッフ
またはCode for Japan担当者に連絡してください。
メール: [email protected]
Slack: jinnouchi / takesada_c4j
#cfjsummit