Slide 1

Slide 1 text

Heineken Inside KMC nonylene

Slide 2

Slide 2 text

ࣗݾ঺հ • nonylene (ͷʹΕΜ) • KMC 4ճੜ • ΧʔϏΟͰ͢ • root

Slide 3

Slide 3 text

ࣗݾ঺հ • nonylene (ͷʹΕΜ) • εϚϗΞϓϦɾαʔόʔ • Twitter / GitHub etc • http://nonylene.hatenablog.jp/

Slide 4

Slide 4 text

ۙگ • OCaml ೖ໳ͱ͔ • ศར

Slide 5

Slide 5 text

ຊ୊

Slide 6

Slide 6 text

Heineken

Slide 7

Slide 7 text

What is Heineken? • ෦಺υΩϡϝϯτߴ଎ݕࡧγεςϜ

Slide 8

Slide 8 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 9

Slide 9 text

͖͔͚ͬ • nonylene ʮͳΜ͔ KMC ͷπʔϧͰͭΒ͍ͱ ͋͜Δʁʯ • kebus ʮݕࡧʂʂʂʯ • nonylene ʮ͔֬ʹ…ʯ

Slide 10

Slide 10 text

PukiWiki ݕࡧΊͬͪΌ஗͍ • PukiWiki ݕࡧߴ଎Խͯ͠༏উ͢Δ͔͠ͳ͍

Slide 11

Slide 11 text

໨࣍ 1. PukiWiki ͷ࿩ 2. ߴ଎Խ͢Δʹ͸ 3. Elasticsearch ಋೖ 4. Elasticsearch ݕࡧ 5. Heineken ( React ) 6. ੒Ռɾײ૝

Slide 12

Slide 12 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 13

Slide 13 text

1. PukiWiki ֓આ

Slide 14

Slide 14 text

PukiWiki ͱ͸ʁ • PHP ੡ͷ Wiki • ୭Ͱ΋ࣗ༝ʹฤूͰ͖Δ • ؆୯ʹઃఆͰ͖Δ • ๛෋ͳϓϥάΠϯ

Slide 15

Slide 15 text

PukiWiki ͱ͸ʁ • ͭΒ͍ͱ͜Ζ • ݹ͍ʢ7೥΄Ͳ։ൃࢭ·͍ͬͯͨʣ • ڈ೥ลΓ͔Β࠶։͖͍ͯͯ͠Δ • ϖʔδͷσʔλ͕ϑΝΠϧʢޙड़ʣ • εϚϗ޲͚ UI ͸·ͩͳ͍

Slide 16

Slide 16 text

• 2003/11 ຤ࠒʹಋೖ͞Εͨ໛༷ • ݱࡏ͸ apache2 Ͱಈ͍͍ͯΔ PukiWiki at KMC

Slide 17

Slide 17 text

• euc-jp Λ࢖͍ͬͯΔ • Wiki ؔ܎ͷॲཧΛ͢Δͱจࣈίʔυ͕େม • PukiWiki ࣗମ͸ UTF-8 ΋Մೳ PukiWiki at KMC ͷͭΒ͍ͱ͜

Slide 18

Slide 18 text

• όʔδϣϯ͕ݹ͍ • 1.4.8_alpha2 ( 2006 ೥ ) • Slack ͷ౤ߘͳͲඍົʹվ଄͍ͯ͠Δ PukiWiki at KMC ͷͭΒ͍ͱ͜

Slide 19

Slide 19 text

• PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ ls /…/pukiwiki/wiki/ 28A1A6A1FEA1A629.txt 31B6A6A5D0A5EAA5B1A1BCA5C9A5BFA5EFA1BCA5C7A5A3A5D5A5A7A5F 3A5B9A5B2A1BCA5E0.txt 323034384149A5B3A5F3A5C6A5B9A5C8.txt 3332A5ADA5C3A5C1A5F3C0B0C8F7B7D7B2E8.txt … PukiWiki ͷσʔλ ※ λΠτϧΛ euc-jp ͰΤϯίʔυͨ͠όΠτྻͷ Hex ͕ϑΝΠϧ໊ʹͳΔ

Slide 20

Slide 20 text

• PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ nkf /…/pukiwiki/wiki/BFB7B4BFA5B3A5F3A5D132303137.txt [[৽׻ίϯύ]] ~&size(25){ͲΜͲΜࢀՃ͍ͯ͜͠͏ͳ}; *໨࣍ [#jfaa7b62] #contents ~৽ೖੜͷ͔ͨ͸΋ͪΖΜɺ্ճੜ΍OBͷํʑ΋Ұॹʹָ͠Έ·͠ΐ͏ʂ … ※ euc-jp ͳͷͰ nkf Ͱม׵͍ͯ͠Δ PukiWiki ͷσʔλ

Slide 21

Slide 21 text

KMC PukiWiki ͷ  ݕࡧ͸ ͳͥ஗͍ʁ

Slide 22

Slide 22 text

PukiWiki ͷݕࡧ͸ͳͥ஗͍ • /…/pukiwiki/ ͕ NAS (ϑΝΠϧαʔόʔ) ্ • ωοτϫʔΫӽ͠ͳͷͰ஗͍ • Ωϟογϡʹ৐Ε͹ૣ͘ͳΔͷͰೋճ໨͸ૣ͍

Slide 23

Slide 23 text

PukiWiki ͷݕࡧ͸ͳͥ஗͍ • PukiWiki ͕ݕࡧ͢Δ࣌… • PHP Ͱຖճશͯͷ Wiki ϑΝΠϧͷ಺༰Λऔಘ • lib/func.php ͷ do_search ࢀর • औಘͨ͠จࣈྻʹରͯ͠શจݕࡧ

Slide 24

Slide 24 text

PukiWiki ΛϓϩϑΝΠϦϯά • ϓϩϑΝΠϦϯάͯ͠Έͨ • xdebug ʢPHP ͷϓϩϑΝΠϥʣ • webgrind (݁Ռදࣔ͢Δ΍ͭ) • SVG ʹ݁ՌΛग़ྗͰ͖Δ

Slide 25

Slide 25 text

• ϑΝΠϧΩϟογϡ͕ͳ͍࣌ • 24.54 sec • php::fread Ͱ 62% ΋औ͍ͬͯΔ

Slide 26

Slide 26 text

• ϑΝΠϧΩϟογϡ͕͋Δ࣌ʢೋճ໨ʣ • 9.24 sec • php::fopen ΍ ﬂock ͕ࢧ഑తʹ

Slide 27

Slide 27 text

PukiWiki ͷݕࡧ͕஗͍ݪҼ • read ͕஗͍ • ﬂock ͕஗͍ • open ͕஗͍

Slide 28

Slide 28 text

PukiWiki ͷݕࡧ͕஗͍ݪҼ • ͱʹ͔͘ϑΝΠϧಡΉͷ͕஗͍ • PukiWiki ͸ѱ͘ͳ͍ʂʂ • จࣈྻݕࡧʹ͔͔ͬͯΔͷ͸ 2 sec ͙Β͍

Slide 29

Slide 29 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 30

Slide 30 text

2. ߴ଎Խ

Slide 31

Slide 31 text

ݕࡧߴ଎Խͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ผͷϚγϯͱ͔ • ϝϞϦʹࡌͤΔ • MySQL ͱ͔

Slide 32

Slide 32 text

ݕࡧߴ଎Խͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ࠓߟ͑ͨΒ͜Ε͕ࡶͰָͰ͋Δ • MySQL ͱ͔࢖͏ • ಠࣗʹͳΜ͔࡞Δ͜ͱʹͳΔ • ͦΕͳΒ΋ͬͱݕࡧʹ࠷దԽ͍ͨ͠Ͷ… →

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Elasticsearch • ෼ࢄܕ RESTful ݕࡧɾ෼ੳΤϯδϯ • Φϥϯμͷ elastic ͕ࣾ։ൃ • Φʔϓϯιʔε • Java

Slide 35

Slide 35 text

Elasticsearch • ௒ૣ͍ • > Elasticsearch͸଎͍ɻͱʹ͔͘଎͍ɻ • શจݕࡧɾϩάղੳ౳ • GitHub / Facebook etc… https://www.elastic.co/jp/products/elasticsearch

Slide 36

Slide 36 text

Elasticsearch Ͱ଎͍ݕࡧ 1. Elasticseach ʹ PukiWiki ͷσʔλΛೖΕΔ 2. ͍͍ײ͡ʹղੳ͞ΕΔ 3. ௒ૣ݁͘Ռ͕ग़Δ ✨༏উ✨

Slide 37

Slide 37 text

Elasticsearch Ͱ଎͍ݕࡧ • ·͋ཁ͢Δʹ Elasticsearch ࢖͍͔ͨͬͨ • MySQL Ͱ΋े෼଎͍ͱࢥ͏  • ͜ͷݕࡧΛ࢖ͬͨΞϓϦΛ࡞Δ

Slide 38

Slide 38 text

Elasticsearch Ͱ଎͍ݕࡧ • ͔ͤͬ͘ͳͷͰ໊લΛ͚ͭΑ͏ • ଎͍ݕࡧ → Hayaken →Heineken

Slide 39

Slide 39 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 40

Slide 40 text

3. Elasticsearch ಋೖ

Slide 41

Slide 41 text

3-1. Elasticsearch ͷղੳ

Slide 42

Slide 42 text

Elasticseach Ͱղੳ • จষͷղੳͷ࢓ํΛܾఆ͢Δඞཁ͕͋Δ

Slide 43

Slide 43 text

Elasticseach Ͱղੳ • Analyzer ͷߏ੒ • Char Filter Ͱਖ਼نԽ౳ • Tokenizer Ͱ෼ׂʢ͕͜͜େࣄʣ • Token Filter Ͱਖ਼نԽ౳

Slide 44

Slide 44 text

Char Filter • จࣈؒͷҧ͍Λٵऩ͢Δ • ͂ʢ̴͉̺̰̺̽̈́ʣ → s (hankaku) • ᶨ → ϔΫλʔϧ • Tokenizer ʹೖΕΔલʹෆཁͳจࣈΛআ͘

Slide 45

Slide 45 text

Char Filter • ICU Analysis Plugin • ެࣜϓϥάΠϯ • ྑ͍ײ͡ʹਖ਼نԽͯ͘͠ΕΔ • શ֯ˠ൒֯ɺه߸෼ղɺେจࣈˠখจࣈ౳ • ౉ᬒˠ౉ลͱ͔͸΍Βͳ͍

Slide 46

Slide 46 text

Char Filter • HTML Strip Char Filter • ࠷ॳ͔Β͋ΔϑΟϧλ • HTML λάΛআ͍ͯ͘ΕΔ • ͱ͔

Slide 47

Slide 47 text

Tokenizer • จষΛ͍͍ײ͡ʹ۠੾Δ • ۠੾ͬͨޠ۟ͷҐஔΛه࿥ ( Index ) ͢Δ → ݕࡧޠ͕۟͋Δ৔ॴ͕͙͢෼͔Δ → શจݕࡧΑΓ΋଎͍ʂ

Slide 48

Slide 48 text

• ྫ: εϖʔε۠੾Γ • “͜Μʹͪ͸ KMC Hello!” → Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’, 6),   (‘Hello!’, 10)] Tokenizer

Slide 49

Slide 49 text

• Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’,   6), (‘Hello!’, 10)]  • ‘KMC’ Ͱݕࡧ → ʮ 6 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ Tokenizer

Slide 50

Slide 50 text

• Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’,   6), (‘Hello!’, 10)]  • ‘KM’ Ͱݕࡧ → ʮͦΜͳ΋ͷ͸ͳ͍ʯ Tokenizer

Slide 51

Slide 51 text

• ೔ຊޠ͸େม • εϖʔεͰ۠੾Εͳ͍ɾෳࡶͳจ๏ • จষͷ۠੾ΓΛ໌֬ʹ͠ʹ͍͘  • ྫ:ʮ͜Μʹͪ͸͜Μʹͪ͸ʯ → ?????????? Tokenizer

Slide 52

Slide 52 text

• ํ๏ᶃ n จࣈ͝ͱʹ۠੾Δ ( N-Gram )  • “͜Μʹͪ͸ɺࠓ೔΋͍͍ఱؾͰ͢Ͷ” → Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’,   2), (‘ͪ͸’,3), … , (‘͢Ͷ’, 14)] Tokenizer

Slide 53

Slide 53 text

Tokenizer • Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 2), (‘ͪ͸’,3), … , (‘͢Ͷ’, 14)]  • ‘͜Μʹͪ’ Ͱݕࡧ → ‘͜Μ’ ͕ 0 ൪໨ʹώοτ → ͦͷޙ΋ਖ਼ͦ͠͏ → ʮ 0 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ

Slide 54

Slide 54 text

• ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ར఺ • ඞͣώοτ͢ΔʢऔΓ͜΅͕͠ͳ͍ʣ • ۠੾ͬͨจࣈҎ্ͷ৔߹ʹݶΔ • ؆୯ Tokenizer

Slide 55

Slide 55 text

• ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ܽ఺ • Index ͕ංେԽ͠΍͍͢ • ෆཁͳ΋ͷʹϚον͠΍͍͢ • ྫ: ’͍ఱ’ → ‘͍͍ఱؾ’ Tokenizer

Slide 56

Slide 56 text

• ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ Tokenizer Tokenized by kuromoji: http://www.atilika.org/

Slide 57

Slide 57 text

• ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ݱࡏͰ΋֤ॴͰݚڀ͞Ε͍ͯΔ • kuromoji ͕༗໊ http://www.atilika.org/ • mecab ͱ͔ Tokenizer

Slide 58

Slide 58 text

• ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ར఺ • Index ͕ංେԽ͠ʹ͍͘ • ϊΠζ͕গͳ͍ Tokenizer

Slide 59

Slide 59 text

• ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ܽ఺ • औΓ͜΅͕͠ଟ͍ • ଟݴޠରԠ͠ʹ͍͘ Tokenizer

Slide 60

Slide 60 text

• ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ࡶͳݴ༿ͩͱղੳͮ͠Β͍ • ྫ • ‘Ί͏Ί͏Ί͏Ί͏’ Tokenizer Tokenized by kuromoji: http://www.atilika.org/

Slide 61

Slide 61 text

• Heineken Ͱ͸… • 2-Gram Λ࠾༻ • ݕࡧ࿙Εͨ͘͠ͳ͍ • ه߸΍Ṗͷݴ༿͕ଟ͍ΆΑʙʙ • ͦΜͳʹྔ͕ଟ͘ͳ͍ Tokenizer

Slide 62

Slide 62 text

Token Filter • Tokenize ޙͷޠ۟ʹର͔͚ͯ͠ΔϑΟϧλ • ྨޠɾ-ed / -s ͷ౷ҰͳͲ • ͜͜ͰେจࣈখจࣈΛἧ͑Δ৔߹΋  • Heineken Ͱ͸࢖͍ͬͯͳ͍

Slide 63

Slide 63 text

3-2. Elasticsearch ઃఆ

Slide 64

Slide 64 text

Elasticseach ͷσʔλߏ଄ Cluster: KMC Index: hoge Index: piyo Type: page Type: relation Type: item Typ Field: title Field: body Field: modiﬁed Field: from Field: to Field: price Field: name Field: desc Field: available Fiel Fiel

Slide 65

Slide 65 text

• Index ͱ Type Λఆٛ • Type ʹ Field Λઃఆ • Analyzer / Datatype ͳͲ • Index ʹ Type Λઃఆ  (mapping) Elasticseach ͷσʔλߏ଄ Index: pukiwiki Type: page Field: title Field: body Field: modiﬁed

Slide 66

Slide 66 text

• Analyzer ఆٛ { "settings": { "analysis": { "analyzer": { "jp_analyzer": { "tokenizer": "jp_tokenizer", "char_ﬁlter":  [ "html_strip", “icu_normalizer" ], … } }, "tokenizer": { "jp_tokenizer": { "type": “ngram", … , "token_chars":  [ "letter", "digit", "symbol", "punctuation" ] }}}}, … }

Slide 67

Slide 67 text

• Mapping ఆٛ { … , "mappings": { "page": { … "properties": { "title": { … }, "title_url_encoded": { … }, "body": { "type": "text", "analyzer": "jp_analyzer", "term_vector" : "with_positions_offsets" }, "modiﬁed": { "type": "date", "format": "strict_date_optional_time||epoch_millis" } }}}} Index: pukiwiki Type: page Field: title Field: body Field: modiﬁed Field: title_url_encoded

Slide 68

Slide 68 text

• Elasticsearch is RESTful • جຊతʹશͯ JSON Ͱ΍ΓऔΓ͢Δ • Elasticsearch Λىಈ͢Δͱ Web αʔόʔཱ͕ͭ • ͦ͜ʹ Python ౳Ͱ JSON ͷ  Index ఆٛΛ౤͛ͯઃఆ Elasticseach ͷઃఆ

Slide 69

Slide 69 text

3-3.   Elasticsearch ͷαʔόʔ

Slide 70

Slide 70 text

Elasticseach Clusterʢࢀߟʣ Cluster: KMC Node: foo Node: bar Replica: hoge3 Shard: hoge1 Replica: piyo1 Replica: piyo2 Shard: hoge3 Replica: hoge1 Sha Rep

Slide 71

Slide 71 text

Elasticseach ಋೖ • Elasticsearch ͸ෛՙ͕େ͖͍ • ϝϞϦ୔ࢁ৯͏ • ϑΝΠϧΞΫηε΋୔ࢁ͢Δ • ͱ͍͏͜ͱͰ৽͍͠෺ཧϚγϯΛஔ͘͜ͱʹ • ࠓճ node ͸ 1 ୆ͷΈ

Slide 72

Slide 72 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 73

Slide 73 text

3-4.   Heineken-crawler

Slide 74

Slide 74 text

Heineken-crawler • Python3 Ͱॻ͔Εͨ PukiWiki ͷΫϩʔϥ • จࣈίʔυΛ UTF-8 ʹม׵ • λΠτϧऔಘɾม׵ • PukiWiki σʔλΛ Elasticsearch ʹ౤͛Δ

Slide 75

Slide 75 text

Heineken-crawler • ๭ cron Ͱ 10 ෼ʹҰճಈ͍͍ͯΔ • ߋ৽͞Εͨϖʔδͱ࡟আ͞ΕͨϖʔδͷΈಉظ

Slide 76

Slide 76 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 77

Slide 77 text

4. Elasticsearch ݕࡧ

Slide 78

Slide 78 text

Elasticsearch ݕࡧ • Elasticsearch ͸ଟछଟ༷ͳݕࡧ͕Մೳ • جຊతʹ֤ର৅ͷ ‘είΞ’ Λܭࢉ • είΞॱʹฒ΂Δ • είΞͷௐ੔͕େࣄ

Slide 79

Slide 79 text

Heineken ͰͷείΞ • ᶃ λΠτϧʹॏΈΛஔ͘ • λΠτϧͷείΞΛ 5 ഒॏཁʹ͢Δ • ಺෦Ͱ͍͍ײ͡ʹͳΔΒ͍͠ • ["title^5", "body"]

Slide 80

Slide 80 text

Heineken ͰͷείΞ • ᶄ ߋ৽೔࣌ʹॏΈΛஔ͘ • ݱࡏ͔Βԕ͘ͳΔ΄Ͳ exp Ͱ৐ࢉ https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html

Slide 81

Slide 81 text

Heineken ͰͷείΞ • ᶄ ߋ৽೔࣌ʹॏΈΛஔ͘ • ௚ײͰௐ੔ • origin -> ݱࡏ • offset -> 150೔ • scale -> 500೔ • decay -> 0.75 https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html

Slide 82

Slide 82 text

Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • Wiki ͷλΠτϧ͸֊૚ߏ଄ • ྫ: ‘NF2017/४උ’ • ୹͍΄͏͕ॏཁͳ܏޲ʹ͋Δ

Slide 83

Slide 83 text

Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • ࡉ͔͘ௐ੔͠ͳ͕ΒϕετΛ୳Δ • sqrt ͱ͔ log ͱ͔ • ݁ہ࠾༻ͨ͠ͷ͸…

Slide 84

Slide 84 text

Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • "_score / Math.sqrt(Math.log1p(doc[‘title.keyword']. value.length()))" score ⇤ 1 p log ( title.length + 1)

Slide 85

Slide 85 text

Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • + 1 ʹ͍ͯ͠Δͷ͸ 1 จࣈͷ࣌ରࡦ • log ͸ͳΜͱͳ͘ • sqrt ͸ͳΜͱͳ͘ score ⇤ 1 p log ( title.length + 1)

Slide 86

Slide 86 text

Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘

Slide 87

Slide 87 text

Heineken ͰͷείΞ • είΞ࠷ڧ͸ NF ʹͳͬͨ

Slide 88

Slide 88 text

ଞͷػೳ • ݕࡧޠ͔۟Β͍͍ײ͡ͷ৔ॴΛநग़Ͱ͖Δ • ϋΠϥΠτ༻ͷ HTML λάૠೖ΋Ͱ͖Δ "fields": { "body": { "pre_tags": [""], "post_tags": [""], "fragment_size": 220, …, } }

Slide 89

Slide 89 text

pukiwiki /wiki/*.txt Heineken-crawler Heineken σʔλొ࿥ ݕࡧ Link ղੳ

Slide 90

Slide 90 text

5. Heineken ( React )

Slide 91

Slide 91 text

Heineken ΞϓϦ࣮૷ • Elasticsearch ͸ RESTful • શ෦ JSON Ͱฦͬͯ͘Δ → Elasticsearch Ҏ֎ʹσʔλ͸ෆཁ → શ෦ JavaScript Ͱ΍Ε͹ྑ͍

Slide 92

Slide 92 text

Heineken ΞϓϦ࣮૷ • Rails ͳͲͷαʔόʔͰಈ͘ΞϓϦ͸࢖Θͳ͍ • Nginx ͸੩తϑΝΠϧΛฦ͚ͩ͢ • ฦ͢ HTML ΋ JS ͱ CSS ಡΈࠐΉ͚ͩ

Slide 93

Slide 93 text

React

Slide 94

Slide 94 text

React ུ֓ • UI Λߏ੒͢ΔͨΊͷ JS ϥΠϒϥϦ • Facebook ੡ • ֤ॴͰ࢖ΘΕ͍ͯΔ • UI ͷ֤෦඼Λ Component ͱͯ͠ߏ੒͍ͯ͘͠

Slide 95

Slide 95 text

React ུ֓ - Virtual DOM • Virtual DOM ͰԾ૝తʹ DOM Λอ࣋ • σʔλͷมߋ࣌ʹ͸ Virtual DOM Λมߋ • ͦͷޙ࣮ࡍͷ DOM ͱͷࠩ෼Λ൓ө • DOM ͷมߋΛ཈͑ΒΕͯޮ཰త ৄࡉ: http://qiita.com/mizchi/items/4d25bc26def1719d52e6

Slide 96

Slide 96 text

React ུ֓ - JSX • JSX Ͱ JS ্ʹ HTML Λॻ͚Δ • ςϯϓϨʔτΤϯδϯͬΆ͘ॻ͚ͯศར const element = (

Hello, {username}!

);

Slide 97

Slide 97 text

React ։ൃ؀ڥ • create-react-app • Facebook ੡ͷ؆୯ React ߏ੒πʔϧ • ։ൃ؀ڥ • Ϗϧυ؀ڥ • ςετ؀ڥ https://github.com/facebookincubator/create-react-app

Slide 98

Slide 98 text

React ։ൃ؀ڥ • ES6 ( ECMA Script 6 ) • JavaScript ͷ৽͍͠ඪ४ • class / Arrow function / const / Promise etc.. ৄࡉ: https://www.slideshare.net/1000ch/begin-ecmascript6

Slide 99

Slide 99 text

React ։ൃ؀ڥ • Babel • ES6 Λ ES5 ʹม׵ͯ͘͠ΕΔϥΠϒϥϦ • ES5 ͸ଟ͘ͷϒϥ΢βͰ࢖͑ΔͷͰ҆৺

Slide 100

Slide 100 text

ͦͷଞͷύʔπ • React Router v4 • JavaScript ͰϧʔςΟϯά • URL ʹΑͬͯ Component Λग़͠෼͚Δ

Slide 101

Slide 101 text

ͦͷଞͷύʔπ • Bootstrap • Twitter ࣾ੡ CSS / JS   ϑϨʔϜϫʔΫ • ෦һ໊฽ɾ  ਆֆΞοϓϩʔμ ͳͲ

Slide 102

Slide 102 text

Heineken ։ൃ 1. create-react-app Ͱͻͳܗ࡞੒ 2. ྑ͍ײ͡ʹ Component ࡞Δ • Elasticsearch ͷ API Λୟ͍ͯ൓өͤ͞Δ 3. BabelɾWebpack ͰίϯύΠϧ 4. αʔόʔʹஔ͘

Slide 103

Slide 103 text

Heineken ։ൃ • ໘౗ͩͬͨͱ͜Ζ • ϖʔδϟ • ஸೡʹ෼ذ ↓ ↓

Slide 104

Slide 104 text

Heineken ։ൃ • ໘౗ͩͬͨͱ͜Ζ • λΠτϧิ׬ • ຖ౓ API Λଧͭ

Slide 105

Slide 105 text

6. ੒Ռɾײ૝

Slide 106

Slide 106 text

౰ࣾൺ 1 / 500 • 25000 ms -> 50 ms 0 7500 15000 22500 30000 PukiWiki Heineken 50 25,000

Slide 107

Slide 107 text

ଞʹ΋ศར • ॊೈʹݕࡧͰ͖ΔΑ͏ʹͳͬͨ • ॱংͱ͔ • ߋ৽೔࣌ߜࠐͱ͔ • λΠτϧͷΈͰݕࡧͱ͔

Slide 108

Slide 108 text

༧ఆ • ϝʔϧରԠ • SPAM ରԠΛߟ͑ͳ͍ͱ͍͚ͳ͍ • rubwiki ͱ͔

Slide 109

Slide 109 text

ײ૝ • Elasticsearch ͍͢͝ • ͱʹ͔͍͍͘ײ͡ʹͳΔ • React ศརɾES6 ָ͍͠ • αʔόʔͰԿ΋ಈ͔͞ͳ͍ͷ͸ָ • ΍Γ͔ͨͬͨ͜ͱ͕ग़དྷͨͷͰྑ͔ͬͨ

Slide 110

Slide 110 text

Thank you for listening!