Slide 1
Slide 1 text
ؾͷར͍ͨ
ೖྗίϯϙʔωϯτͷ
!ZNSM
Slide 2
Slide 2 text
͜ͷεϥΠυຕ
͋ΔͷͰۦ͚Ͱ
αϯϓϧίʔυ͜͜ɿ
IUUQTHJUIVCDPNZNSMJOQVUDPNQPOFOUFYBNQMFT
Slide 3
Slide 3 text
୭
w !ZNSMʢ·͋Δʣ
w ࣾձਓྺGSFFFྺ
w 6*Λߟ͑Δͷͱ$44ॻ͘ͷ͕͖
Slide 4
Slide 4 text
ೖྗίϯϙʔωϯτ
ʢ·͋ɺUFYUBSFBͱ͔͋Δ͚Ͳʣ
Slide 5
Slide 5 text
څ༩ܭࢉGSFFFͷͱ͋Δը໘
Slide 6
Slide 6 text
IUUQTXXXKSFBTUDPKQPUPOBEPDVNFOU@SFRVFTU
Slide 7
Slide 7 text
IUUQTUXJUUFSDPNZNSMTUBUVT
Slide 8
Slide 8 text
ආ͚ΒΕͳ͍িಥ
w ։ൃऀࢹɿ͍ΖΜͳ߹͕͋ΜͶΜ
w Ϣʔβʔࢹɿ։ൃऀͷ߹ͳΜͯΒΜ
w Τϥʔ͕ग़ͯΠϥοͱͨ͘͠ͳ͍
w શ֯ͱ֯ͷ۠ผͳΜ͔ͯͭͳ͍
w ͦͦͲ͏͍͏ܗࣜͰೖΕΔͷ͔Θ͔Βͳ͍
Slide 9
Slide 9 text
ؾΛޮ͔͍ͤͨ
w શ֯֯ͷมͱ͔ϑϩϯτΤϯυͰͬͪΌ͑
w ॳΊͯͷϢʔβʔ͕໎ΘͣʹೖྗͰ͖Δ
w ׳ΕͯΔϢʔβʔ͕ߴʹೖྗͰ͖Δ
w ։ൃऀ͕΄͍͠ܗࣜΛ͑Δ͜ͱͰ͖Δʢ͔ʣ
w ͔࣍ΒͦͷܗࣜͰೖΕͯΒ͑Δʢ͔ʣ
Slide 10
Slide 10 text
ؾΛར͔ͤͯΔྫ
w શ֯ˠ͕֯ΔͷͰ*.&Φϯͷ··ೖྗ0,
w ֹۚཝ͕Λ
ʹͯ͘͠ΕΔ
w ཝ͕Λʹͯ͘͠ΕΔ
w ࣌ࠁཝͰΛʹͯ͘͠ΕΔ
w ༣ศ൪߸ཝͰϋΠϑϯ͕ࣗಈతʹิΘΕΔ
Slide 11
Slide 11 text
ʢ͓͞Β͍ʣ3FBDUͷ
ೖྗίϯϙʔωϯτ
Slide 12
Slide 12 text
͜Μͳײ͡
class NormalInput extends React.Component {
handleChange(e) {
const value = e.target.value;
this.props.onChange(e, value);
}
render() {
return(
);
}
}
ίϯϙʔωϯτʹ
มߋ༰Λ௨͢Δ
͕͏͔͠Εͳ͍ͷͰ
4ZOUIFUJD&WFOUΛୈҰҾʹͯ͠Δ
Slide 13
Slide 13 text
͔ͭ͏
this.setState({ value: value })} />
Slide 14
Slide 14 text
શ֯ӳʹม͢Δ
handleChange(e) {
const value = e.target.value.replace(/[!-~]/g, (chr) =>
String.fromCharCode(chr.charCodeAt(0) + 0xFEE0)
);
this.props.onChange(e, value);
}
֯จࣈ͕͋ͬͨΒม͢Δ
Slide 15
Slide 15 text
ม͕ΔͱΧʔιϧ͕
͍ͪΜޙΖʹ͍͘
Slide 16
Slide 16 text
͕มΘΔͱ͖ʹ
ΧʔιϧҐஔΛͯ͋͛͠Δ
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લͷΧʔιϧҐஔΛอ͓࣋ͯ͘͠
Slide 17
Slide 17 text
͍͍ײ͡
Slide 18
Slide 18 text
ͻΒ͕ͳΛ
ΧλΧφʹ͢Δ
Slide 19
Slide 19 text
handleChange(e) {
const value = e.target.value.replace(/[ぁ-ゖ]/g, (chr) =>
String.fromCharCode(chr.charCodeAt(0) + 0x60)
);
this.props.onChange(e, value);
}
Slide 20
Slide 20 text
͍͋͠ڍಈʹͳΔ
Slide 21
Slide 21 text
ΧʔιϧҐஔͷ੍ޚ͍͠
w ຊޠೖྗ͕བྷΉ߹ͷڍಈ͕͋͘͠ͳΔ
w มޙʹจࣈ͕มΘΔ߹ʹΑ͘Θ͔Μͳ͘ͳΔ
w ఘΊͱ͍ͨ΄͏͕ແ
w Χʔιϧ͕͋Δͱ͖ม͠ͳ͍Ͱ͓͘
w ͬͱଞʹؤுΓ͍ͨ͜ͱͨ͘͞Μ͋Δ
Slide 22
Slide 22 text
CMVSͰม͞ΕΔ
Slide 23
Slide 23 text
class CoolKatakanaInput extends React.Component {
constructor(props) {
super();
this.state = { showValue: props.value };
}
render() {
return(
);
}
componentWillReceiveProps(props) {
const element = ReactDOM.findDOMNode(this);
if (element !== document.activeElement) {
this.setState({ showValue: props.value});
}
}
͞ΕͨQSPQTΛTUBUFʹίϐʔ
දࣔʹTUBUFͷ΄͏Λ͏
ϑΥʔΧεͯ͠ͳ͍࣌ͷ
QSPQTͷมԽදࣔʹଈ࣌ө
Slide 24
Slide 24 text
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Λ࠶ద༻
Slide 25
Slide 25 text
CMVSͰม͞ΕΔ
Slide 26
Slide 26 text
ؾͷར͍ͨײ͡ʹ͢ΔͨΊʹ
w Ͱ͖Δ͔͗Γػցతʹม͢ΔʢͨΓલʣ
w ೖྗϑΟʔϧυͷϥϕϧͰཉ͍͠ܗࣜΛ͑Δ
w ࢯ໊ʢΧφʣʹΧλΧφͰೖΕͯ΄͍͠ؾ࣋ͪΛࠐΊΔ
w αʔϏεͰೖྗܗࣜ౷Ұ͓ͯ͘͠
w ֯ɺಡΈԾ໊શ֯ΧλΧφͳͲ
w Ͳ͏ͯ͠มͰ͖ͳ͍߹ͳͲଈ࣌ʹڭ͑ͯ͋͛Δ
w ૹ৴͔ͯ͠ΒʮΤϥʔͰ͢ʯͰ͗͢
Slide 27
Slide 27 text
͔ͤͬ͘ྑ͍αʔϏε࡞ͬͯΔͷͳΒ
ࡉ͔͍ͱ͜ΖؾΛར͔͍͖͍ͤͯͨͰ͢Ͷ