ぼくとScrapboxと2019
https://media.connpass.com/thumbs/50/33/50336ce1ca44abc51f8d597873417b6e.png
この資料はScrapbox Drinkup #11のLT資料です。
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
Twitter
GitHub
Qiita
得意領域
マークアップ・フロントエンド・UIデザイン・アクセシビリティ
既婚で1児の父と猫🐈🐈🐈の飼い主
1年に2回転職するのをやりました
2019/09/30より流山市民になりました
増税前に戸建ても手に入れました🏠
自慢しないと買ったこと自体を忘れるyamanoku.icon
2019/12/20につくばエクスプレス民を集めたつくばexpress.jsを千葉でやります
https://gyazo.com/f23eab13b1d6e8764431c4079f216fc8
https://txjs.connpass.com/event/153123/
つくばエクスプレスの民はあつまれ〜
2019年も、もう終わるのか
振り返りをしてみよう
ぼくとScrapboxと2019
Drinkupの会場提供をできた
Scrapbox Drinkup #9
「Scrapbox Drinkup #9」面白活用法から悩み相談まで。LT大会! - Scrapbox - Medium
https://gyazo.com/ee74bcf4c342acdbd50e4ba6f25dcac0
https://gyazo.com/9d641538309060936bb229f45d64eeff
この時暑かったのに男物の会社ロゴTシャツがなかったのでパーカー着てました
きっかけ
/scrapbox-drinkup/Scrapbox Drinkupのテーマや開催場所を募集します
芝宣伝したかったのもあるし社内で興味ある人も引っかかればいいなという軽い気持ちでやった
中の人からDMで使わせてもらっていいですか?と来たのでやっといてビビった
自分が企業を招いてイベントすることは初体験
Nota Inc.の皆さんにも誘導助けてもらいました
この場を借りてあらためてありがとうございました
今日登壇したのでピンバッチほしいですyamanoku.icon
2019年でScrapboxで活用したこと
去年から引き続き勉強会めぐり
参加した勉強会、MeetUp、カンファレンス、ハンズオン
2019年は69件参加(予定含む)
2018年は34件でした
基本フロントエンド系ばっかり
JavaScript
PWA
CSS
アクセシビリティ
Firebase
CircleCI
Android
デザイン
UX
デザインシステム
カンファレンス
builderscon 2019
転職
企業系
大規模カンファレンス
来年はRuby系行くと思うyamanoku.icon
基本メモはScrapboxで取る
秘匿情報とかは社内Slackとかに
https://gyazo.com/fa84c40a62daed27489f55a0c5548823 https://twitter.com/morumoru72/status/1095120544213553152
うれしいyamanoku.icon
https://gyazo.com/51aadb806dbaa3de145e4d367e7a34dc https://twitter.com/yamanoku/status/1126279518476324864
最近のDMMのフロントエンドの動向とその先について
まとめたのがはてブにあがったyamanoku.icon
メモを取るもの
一番使えるものはScrapboxだと思ってる
最高!
箇条書きスタイルでサクサク書ける
書き出した情報がリンクでページごとで紐づく
ただのメモと別格になりうる
関係ないワードでも紐づくことがある
自分だけのWikipediaのようなものができる
https://gyazo.com/81f2910a9761d7bfb48197c7919e4f03 https://twitter.com/daizplus/status/1122018302098722816
Webにあげる資料は極力はテキスト情報であってほしい
テキストをコピペできるのって最高ですね!
リンクをクリック、タップできるのって最高ですね!
そうした一次情報を書き出す・増やしたいと思って参加してるところはある
この辺のモチベーションがあるから行ってるのかも
言葉の重要性
イメージが与える印象というのも大事だが
やっぱり言葉が一番大事
On-Screen Typography Day 2019
オンスクリーンにおけるタイポグラフィのカンファレンス
言葉からはじめましょう。
あなたはすでに
タイポグラファなのですから。
なぜ、わざわざテキストなのか?
すべての人の同質の情報を伝えることができる
伝えるために行うすべてのことがタイポグラフィ
WEBにはまだまだ言葉が足りない
Scrapboxはサクサク書けるので言葉を大量に残せている
Helpfeelもテキスト情報から必要なものを結びつける
/scrapbox-drinkup/情報保障としてのScrapbox_(k,_yuhkis,_akihisa-shitara)
「情報保障」
聴覚障害の学生たちとリアルタイムコミュニケーションできる
文字情報残すの大事!!
わかる!!!!!!yamanoku.icon
ページを見ながら&書き込みながら議論
書き込んでの「議論」っていいな
会話によるものではない
「文章」として向き合えてるかは別だけど
言葉を残すことの抵抗をなくすのはScrapboxのいいところ
聴覚障害の話が出たので関連したアクセシビリティの話していいすか?yamanoku.icon
視覚障害者の意見(掲載許可もらった)
全盲エンジニアの方
https://gyazo.com/5b259b752521774d0bf69f778c38d2fa https://twitter.com/nyanchan2013/status/1112530965824339968
https://gyazo.com/67eb7ad4b9fec816dd50c31544bcbc01 https://twitter.com/nyanchan2013/status/1186629127324848129
NVDAでは読み取れることはできる
書き込むことはできない
個人的な観測として
OS側が提供するスクリーンリーダーでは限界がある
MacOSはもはやだめ
iOSとは別
PC-Talkerの利用者が多い
NVDAは結構頑張ってるスクリーンリーダー
しかしHTMLでの文書構造がしっかりできないと厳しいものは厳しい
読み上げだけでもなんかうまいこといけるかな yamanoku.icon
Speech Synthesis APIがなんかいけそう
Web Speech APIの実装 - Speech Synthesis API | CodeGrid
SpeechSynthesis使ってブラウザに喋らせてみた。 - istyle Tech Blog
長い文章だと途切れるらしい
キーボード対応はすすめてるらしい
https://github.com/nota/key-focus-visible
https://github.com/nota/mouse-hover-visible
マウスフォーカスとキーフォーカスの違い対応
https://gyazo.com/05b6b73c50228ae5901d852d0b73a903
フォーカスしてるときはアウトラインが出てる
クリックするときはアウトラインが出ない
what-inputのそれに近い
キーボード対応は「ギーク」らしくあるためにみたいな感じだった
アクセシブルにする・障害者対応とかのそれ目的ではない
でもそこから利用層が広がることにも繋がるのでどんな形からでも入っていくのは大切
自分もショートカットとしてのキーボードでタブキー遷移などは期待している
どんどんユースケースが増えていってその中での要望も増えていけばいいな
みんなもアクセシビリティやっていきましょう
表現の幅を広げる
プロダクトの利用想定の拡張
利用者に多様性を
まとめ
2019年もScrapboxの世話になっていました
来年もよろしくお願いいたします
今度こそ社内で使っていきたいな
テキストとは力である
アクセシビリティやっていこうぜ