Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
気の利いた入力コンポーネント
ymrl
April 08, 2016
Technology
0
1.6k
気の利いた入力コンポーネント
ymrl
April 08, 2016
Tweet
Share
More Decks by ymrl
See All by ymrl
やっぱりやりたいのはUIデザインだった
ymrl
0
4.1k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
580
開発チームみんなで取り組むアクセシビリティ
ymrl
0
590
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
640
Web技術基礎 for インターン
ymrl
0
4.1k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
81
Webエンジニアとして いま知っておきたい Webアクセシビリティ
ymrl
3
500
世界を変えるための デザインシステム (アクセシビリティ編)
ymrl
1
4.5k
インクルーシブな製品開発とリモートワークの職場環境
ymrl
1
4.2k
Other Decks in Technology
See All in Technology
アジャイルな組織改善〜手法とマインドセット〜
ishige
7
5.2k
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
120
スタメンのLeSSの導入と 事業部全体を巻き込んだ アウトカム文化への道のり
uuushiro
2
3k
F1 Ochanomizu GP '23
miholovesq
0
610
Pentesting Password Reset Functionality
anugrahsr
0
170
“Do you have a virtual router?” Discuss how to use virtual routers
line_developers
PRO
0
410
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
11
3.2k
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
130
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
8
1.7k
20230117_JAWS-UG_朝会_41_LT資料
tsumita
0
290
Optimizing your Swift code
kateinoigakukun
0
1.3k
1つのアプリを開発する複数の職能横断チームの運用と今後 ~ タクシーアプリ「GO」の現状と未来 ~
takahia1988
1
3.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
320
20k
GraphQLの誤解/rethinking-graphql
sonatard
38
7.8k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.7k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Automating Front-end Workflow
addyosmani
1351
200k
Bootstrapping a Software Product
garrettdimon
299
110k
Practical Orchestrator
shlominoach
178
8.9k
Clear Off the Table
cherdarchuk
79
290k
In The Pink: A Labor of Love
frogandcode
132
21k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Debugging Ruby Performance
tmm1
67
11k
Transcript
ؾͷར͍ͨ ೖྗίϯϙʔωϯτͷ !ZNSM
͜ͷεϥΠυຕ ͋ΔͷͰۦ͚Ͱ αϯϓϧίʔυ͜͜ɿ IUUQTHJUIVCDPNZNSMJOQVUDPNQPOFOUFYBNQMFT
୭ w !ZNSMʢ·͋Δʣ w ࣾձਓྺGSFFFྺ w 6*Λߟ͑Δͷͱ$44ॻ͘ͷ͕͖
ೖྗίϯϙʔωϯτ ʢ·͋ɺUFYUBSFBͱ͔͋Δ͚Ͳʣ
څ༩ܭࢉGSFFFͷͱ͋Δը໘
IUUQTXXXKSFBTUDPKQPUPOB
[email protected]
IUUQTUXJUUFSDPNZNSMTUBUVT
ආ͚ΒΕͳ͍িಥ w ։ൃऀࢹɿ͍ΖΜͳ߹͕͋ΜͶΜ w Ϣʔβʔࢹɿ։ൃऀͷ߹ͳΜͯΒΜ w Τϥʔ͕ग़ͯΠϥοͱͨ͘͠ͳ͍ w શ֯ͱ֯ͷ۠ผͳΜ͔ͯͭͳ͍ w
ͦͦͲ͏͍͏ܗࣜͰೖΕΔͷ͔Θ͔Βͳ͍
ؾΛޮ͔͍ͤͨ w શ֯֯ͷมͱ͔ϑϩϯτΤϯυͰͬͪΌ͑ w ॳΊͯͷϢʔβʔ͕໎ΘͣʹೖྗͰ͖Δ w ׳ΕͯΔϢʔβʔ͕ߴʹೖྗͰ͖Δ w ։ൃऀ͕΄͍͠ܗࣜΛ͑Δ͜ͱͰ͖Δʢ͔ʣ w
͔࣍ΒͦͷܗࣜͰೖΕͯΒ͑Δʢ͔ʣ
ؾΛར͔ͤͯΔྫ w શ֯ˠ͕֯ΔͷͰ*.&Φϯͷ··ೖྗ0, w ֹۚཝ͕Λ ʹͯ͘͠ΕΔ w ཝ͕Λʹͯ͘͠ΕΔ w ࣌ࠁཝͰΛʹͯ͘͠ΕΔ
w ༣ศ൪߸ཝͰϋΠϑϯ͕ࣗಈతʹิΘΕΔ
ʢ͓͞Β͍ʣ3FBDUͷ ೖྗίϯϙʔωϯτ
͜Μͳײ͡ class NormalInput extends React.Component { handleChange(e) { const value
= e.target.value; this.props.onChange(e, value); } render() { return( <input type="text" value={this.props.value} onChange={this.handleChange.bind(this)} /> ); } } ίϯϙʔωϯτʹ มߋ༰Λ௨͢Δ ͕͏͔͠Εͳ͍ͷͰ 4ZOUIFUJD&WFOUΛୈҰҾʹͯ͠Δ
͔ͭ͏ <NormalInput type="text" value={ this.state.value } onChange={(_e, value)=>this.setState({ value: value
})} />
શ֯ӳʹม͢Δ handleChange(e) { const value = e.target.value.replace(/[!-~]/g, (chr) => String.fromCharCode(chr.charCodeAt(0)
+ 0xFEE0) ); this.props.onChange(e, value); } ֯จࣈ͕͋ͬͨΒม͢Δ
ม͕ΔͱΧʔιϧ͕ ͍ͪΜޙΖʹ͍͘
͕มΘΔͱ͖ʹ ΧʔιϧҐஔΛͯ͋͛͠Δ componentWillUpdate() { const element = ReactDOM.findDOMNode(this); this.selectionStart =
element.selectionStart; this.selectionEnd = element.selectionEnd; } componentDidUpdate() { const element = ReactDOM.findDOMNode(this); if (element === document.activeElement) { element.setSelectionRange(this.selectionStart, this.selectionEnd); } } อ͓͍࣋ͯͨ͠ΧʔιϧҐஔΛ VQEBUFޙʹηοτ͢Δ VQEBUFલͷΧʔιϧҐஔΛอ͓࣋ͯ͘͠
͍͍ײ͡
ͻΒ͕ͳΛ ΧλΧφʹ͢Δ
handleChange(e) { const value = e.target.value.replace(/[ぁ-ゖ]/g, (chr) => String.fromCharCode(chr.charCodeAt(0) +
0x60) ); this.props.onChange(e, value); }
͍͋͠ڍಈʹͳΔ
ΧʔιϧҐஔͷ੍ޚ͍͠ w ຊޠೖྗ͕བྷΉ߹ͷڍಈ͕͋͘͠ͳΔ w มޙʹจࣈ͕มΘΔ߹ʹΑ͘Θ͔Μͳ͘ͳΔ w ఘΊͱ͍ͨ΄͏͕ແ w Χʔιϧ͕͋Δͱ͖ม͠ͳ͍Ͱ͓͘ w
ͬͱଞʹؤுΓ͍ͨ͜ͱͨ͘͞Μ͋Δ
CMVSͰม͞ΕΔ
class CoolKatakanaInput extends React.Component { constructor(props) { super(); this.state =
{ showValue: props.value }; } render() { return( <input type="text" value={this.state.showValue} onChange={this.handleChange.bind(this)} onBlur={this.handleBlur.bind(this)} /> ); } componentWillReceiveProps(props) { const element = ReactDOM.findDOMNode(this); if (element !== document.activeElement) { this.setState({ showValue: props.value}); } } ͞ΕͨQSPQTΛTUBUFʹίϐʔ දࣔʹTUBUFͷ΄͏Λ͏ ϑΥʔΧεͯ͠ͳ͍࣌ͷ QSPQTͷมԽදࣔʹଈ࣌ө
handleChange(e) { const inputValue = e.target.value; const value = inputValue.replace(/[ぁ-ゖ]/g,
(chr) => String.fromCharCode(chr.charCodeAt(0) + 0x60) ); this.setState({ showValue: inputValue}); this.props.onChange(e, value); } handleBlur() { this.setState({ showValue: this.props.value}); } ฤूதมͤͣʹදࣔ ϑΥʔΧε͕֎Εͨͱ͖ʹQSPQTΛ࠶ద༻
CMVSͰม͞ΕΔ
ؾͷར͍ͨײ͡ʹ͢ΔͨΊʹ w Ͱ͖Δ͔͗Γػցతʹม͢ΔʢͨΓલʣ w ೖྗϑΟʔϧυͷϥϕϧͰཉ͍͠ܗࣜΛ͑Δ w ࢯ໊ʢΧφʣʹΧλΧφͰೖΕͯ΄͍͠ؾ࣋ͪΛࠐΊΔ w αʔϏεͰೖྗܗࣜ౷Ұ͓ͯ͘͠ w
֯ɺಡΈԾ໊શ֯ΧλΧφͳͲ w Ͳ͏ͯ͠มͰ͖ͳ͍߹ͳͲଈ࣌ʹڭ͑ͯ͋͛Δ w ૹ৴͔ͯ͠ΒʮΤϥʔͰ͢ʯͰ͗͢
͔ͤͬ͘ྑ͍αʔϏε࡞ͬͯΔͷͳΒ ࡉ͔͍ͱ͜ΖؾΛར͔͍͖͍ͤͯͨͰ͢Ͷ