Elasticsearch で部内 Wiki 検索高速化

Transcript

1. Heineken Inside KMC nonylene

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

   root

3. ࣗݾ঺հ • nonylene (ͷʹΕΜ) • εϚϗΞϓϦɾαʔόʔ • Twitter / GitHub

   etc • http://nonylene.hatenablog.jp/

4. ۙگ • OCaml ೖ໳ͱ͔ • ศར

5. ຊ୊

6. Heineken

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

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

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

   • nonylene ʮ͔֬ʹ…ʯ

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

11. ໨࣍ 1. PukiWiki ͷ࿩ 2. ߴ଎Խ͢Δʹ͸ 3. Elasticsearch ಋೖ 4.

    Elasticsearch ݕࡧ 5. Heineken ( React ) 6. ੒Ռɾײ૝

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

13. 1. PukiWiki ֓આ

14. PukiWiki ͱ͸ʁ • PHP ੡ͷ Wiki • ୭Ͱ΋ࣗ༝ʹฤूͰ͖Δ • ؆୯ʹઃఆͰ͖Δ

    • ๛෋ͳϓϥάΠϯ

15. PukiWiki ͱ͸ʁ • ͭΒ͍ͱ͜Ζ • ݹ͍ʢ7೥΄Ͳ։ൃࢭ·͍ͬͯͨʣ • ڈ೥ลΓ͔Β࠶։͖͍ͯͯ͠Δ • ϖʔδͷσʔλ͕ϑΝΠϧʢޙड़ʣ

    • εϚϗ޲͚ UI ͸·ͩͳ͍

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

17. • euc-jp Λ࢖͍ͬͯΔ • Wiki ؔ܎ͷॲཧΛ͢Δͱจࣈίʔυ͕େม • PukiWiki ࣗମ͸ UTF-8

    ΋Մೳ PukiWiki at KMC ͷͭΒ͍ͱ͜

18. • όʔδϣϯ͕ݹ͍ • 1.4.8_alpha2 ( 2006 ೥ ) • Slack

    ͷ౤ߘͳͲඍົʹվ଄͍ͯ͠Δ PukiWiki at KMC ͷͭΒ͍ͱ͜

19. • PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ ls /…/pukiwiki/wiki/ 28A1A6A1FEA1A629.txt 31B6A6A5D0A5EAA5B1A1BCA5C9A5BFA5EFA1BCA5C7A5A3A5D5A5A7A5F 3A5B9A5B2A1BCA5E0.txt 323034384149A5B3A5F3A5C6A5B9A5C8.txt

    3332A5ADA5C3A5C1A5F3C0B0C8F7B7D7B2E8.txt … PukiWiki ͷσʔλ ※ λΠτϧΛ euc-jp ͰΤϯίʔυͨ͠όΠτྻͷ Hex ͕ϑΝΠϧ໊ʹͳΔ

20. • PukiWiki ͷσʔλ͸શͯςΩετϑΝΠϧ $ nkf /…/pukiwiki/wiki/BFB7B4BFA5B3A5F3A5D132303137.txt [[৽׻ίϯύ]] ~&size(25){ͲΜͲΜࢀՃ͍ͯ͜͠͏ͳ}; *໨࣍ [#jfaa7b62]

    #contents ~৽ೖੜͷ͔ͨ͸΋ͪΖΜɺ্ճੜ΍OBͷํʑ΋Ұॹʹָ͠Έ·͠ΐ͏ʂ … ※ euc-jp ͳͷͰ nkf Ͱม׵͍ͯ͠Δ PukiWiki ͷσʔλ

21. KMC PukiWiki ͷ
 ݕࡧ͸ ͳͥ஗͍ʁ

22. PukiWiki ͷݕࡧ͸ͳͥ஗͍ • /…/pukiwiki/ ͕ NAS (ϑΝΠϧαʔόʔ) ্ • ωοτϫʔΫӽ͠ͳͷͰ஗͍

    • Ωϟογϡʹ৐Ε͹ૣ͘ͳΔͷͰೋճ໨͸ૣ͍

23. PukiWiki ͷݕࡧ͸ͳͥ஗͍ • PukiWiki ͕ݕࡧ͢Δ࣌… • PHP Ͱຖճશͯͷ Wiki ϑΝΠϧͷ಺༰Λऔಘ

    • lib/func.php ͷ do_search ࢀর • औಘͨ͠จࣈྻʹରͯ͠શจݕࡧ

24. PukiWiki ΛϓϩϑΝΠϦϯά • ϓϩϑΝΠϦϯάͯ͠Έͨ • xdebug ʢPHP ͷϓϩϑΝΠϥʣ • webgrind

    (݁Ռදࣔ͢Δ΍ͭ) • SVG ʹ݁ՌΛग़ྗͰ͖Δ

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

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

27. PukiWiki ͷݕࡧ͕஗͍ݪҼ • read ͕஗͍ • flock ͕஗͍ • open

    ͕஗͍

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

    sec ͙Β͍

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

30. 2. ߴ଎Խ

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

32. ݕࡧߴ଎Խͷखஈ • ϑΝΠϧΞΫηεૣ͍ͱ͜Ζʹஔ͘ • ࠓߟ͑ͨΒ͜Ε͕ࡶͰָͰ͋Δ • MySQL ͱ͔࢖͏ • ಠࣗʹͳΜ͔࡞Δ͜ͱʹͳΔ

    • ͦΕͳΒ΋ͬͱݕࡧʹ࠷దԽ͍ͨ͠Ͷ… →
33. None

34. Elasticsearch • ෼ࢄܕ RESTful ݕࡧɾ෼ੳΤϯδϯ • Φϥϯμͷ elastic ͕ࣾ։ൃ •

    Φʔϓϯιʔε • Java

35. Elasticsearch • ௒ૣ͍ • > Elasticsearch͸଎͍ɻͱʹ͔͘଎͍ɻ • શจݕࡧɾϩάղੳ౳ • GitHub

    / Facebook etc… https://www.elastic.co/jp/products/elasticsearch

36. Elasticsearch Ͱ଎͍ݕࡧ 1. Elasticseach ʹ PukiWiki ͷσʔλΛೖΕΔ 2. ͍͍ײ͡ʹղੳ͞ΕΔ 3.

    ௒ૣ݁͘Ռ͕ग़Δ  ✨༏উ✨

37. Elasticsearch Ͱ଎͍ݕࡧ • ·͋ཁ͢Δʹ Elasticsearch ࢖͍͔ͨͬͨ • MySQL Ͱ΋े෼଎͍ͱࢥ͏
 •

    ͜ͷݕࡧΛ࢖ͬͨΞϓϦΛ࡞Δ

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

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

40. 3. Elasticsearch ಋೖ

41. 3-1. Elasticsearch ͷղੳ

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

43. Elasticseach Ͱղੳ • Analyzer ͷߏ੒ • Char Filter Ͱਖ਼نԽ౳ •

    Tokenizer Ͱ෼ׂʢ͕͜͜େࣄʣ • Token Filter Ͱਖ਼نԽ౳

44. Char Filter • จࣈؒͷҧ͍Λٵऩ͢Δ • ͂ʢ̴͉̺̰̺̽̈́ʣ → s (hankaku) •

    ᶨ → ϔΫλʔϧ • Tokenizer ʹೖΕΔલʹෆཁͳจࣈΛআ͘

45. Char Filter • ICU Analysis Plugin • ެࣜϓϥάΠϯ • ྑ͍ײ͡ʹਖ਼نԽͯ͘͠ΕΔ

    • શ֯ˠ൒֯ɺه߸෼ղɺେจࣈˠখจࣈ౳ • ౉ᬒˠ౉ลͱ͔͸΍Βͳ͍

46. Char Filter • HTML Strip Char Filter • ࠷ॳ͔Β͋ΔϑΟϧλ •

    HTML λάΛআ͍ͯ͘ΕΔ • <script> ͱ͔

47. Tokenizer • จষΛ͍͍ײ͡ʹ۠੾Δ • ۠੾ͬͨޠ۟ͷҐஔΛه࿥ ( Index ) ͢Δ →

    ݕࡧޠ͕۟͋Δ৔ॴ͕͙͢෼͔Δ → શจݕࡧΑΓ΋଎͍ʂ

48. • ྫ: εϖʔε۠੾Γ • “͜Μʹͪ͸ KMC Hello!” → Index: [(‘͜Μʹͪ͸’,

    0), (‘KMC’, 6), 
 (‘Hello!’, 10)] Tokenizer

49. • Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’, 
 6), (‘Hello!’, 10)]
 •

    ‘KMC’ Ͱݕࡧ → ʮ 6 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ Tokenizer

50. • Index: [(‘͜Μʹͪ͸’, 0), (‘KMC’, 
 6), (‘Hello!’, 10)]
 •

    ‘KM’ Ͱݕࡧ → ʮͦΜͳ΋ͷ͸ͳ͍ʯ Tokenizer

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

    Tokenizer

52. • ํ๏ᶃ n จࣈ͝ͱʹ۠੾Δ ( N-Gram )
 • “͜Μʹͪ͸ɺࠓ೔΋͍͍ఱؾͰ͢Ͷ” →

    Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 
 2), (‘ͪ͸’,3), … , (‘͢Ͷ’, 14)] Tokenizer

53. Tokenizer • Index: [(‘͜Μ’, 0), (‘Μʹ’, 1), (‘ʹͪ’, 2), (‘ͪ͸’,3),

    … , (‘͢Ͷ’, 14)]
 • ‘͜Μʹͪ’ Ͱݕࡧ → ‘͜Μ’ ͕ 0 ൪໨ʹώοτ → ͦͷޙ΋ਖ਼ͦ͠͏ → ʮ 0 ൪໨ʹ͋Δʯͱ͙͢෼͔Δ

54. • ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ར఺ •

    ඞͣώοτ͢ΔʢऔΓ͜΅͕͠ͳ͍ʣ • ۠੾ͬͨจࣈҎ্ͷ৔߹ʹݶΔ • ؆୯ Tokenizer

55. • ํ๏ᶃ n จࣈ͝ͱʹه࿥͢Δ ( N-Gram ) • ܽ఺ •

    Index ͕ංେԽ͠΍͍͢ • ෆཁͳ΋ͷʹϚον͠΍͍͢ • ྫ: ’͍ఱ’ → ‘͍͍ఱؾ’ Tokenizer

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

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

    • mecab ͱ͔ Tokenizer

58. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ར఺ • Index ͕ංେԽ͠ʹ͍͘ •

    ϊΠζ͕গͳ͍ Tokenizer

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

    Tokenizer

60. • ํ๏ᶄ จষΛղੳͯ͠෼ׂ ʢܗଶૉղੳʣ • ࡶͳݴ༿ͩͱղੳͮ͠Β͍ • ྫ • ‘Ί͏Ί͏Ί͏Ί͏’

    Tokenizer Tokenized by kuromoji: http://www.atilika.org/

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

    • ͦΜͳʹྔ͕ଟ͘ͳ͍ Tokenizer

62. Token Filter • Tokenize ޙͷޠ۟ʹର͔͚ͯ͠ΔϑΟϧλ • ྨޠɾ-ed / -s ͷ౷ҰͳͲ

    • ͜͜ͰେจࣈখจࣈΛἧ͑Δ৔߹΋
 • Heineken Ͱ͸࢖͍ͬͯͳ͍

63. 3-2. Elasticsearch ઃఆ

64. Elasticseach ͷσʔλߏ଄ Cluster: KMC Index: hoge Index: piyo Type: page

    Type: relation Type: item Typ Field: title Field: body Field: modified Field: from Field: to Field: price Field: name Field: desc Field: available Fiel Fiel

65. • Index ͱ Type Λఆٛ • Type ʹ Field Λઃఆ

    • Analyzer / Datatype ͳͲ • Index ʹ Type Λઃఆ
 (mapping) Elasticseach ͷσʔλߏ଄ Index: pukiwiki Type: page Field: title Field: body Field: modified

66. • Analyzer ఆٛ { "settings": { "analysis": { "analyzer": {

    "jp_analyzer": { "tokenizer": "jp_tokenizer", "char_filter":
 [ "html_strip", “icu_normalizer" ], … } }, "tokenizer": { "jp_tokenizer": { "type": “ngram", … , "token_chars":
 [ "letter", "digit", "symbol", "punctuation" ] }}}}, … }

67. • Mapping ఆٛ { … , "mappings": { "page": {

    … "properties": { "title": { … }, "title_url_encoded": { … }, "body": { "type": "text", "analyzer": "jp_analyzer", "term_vector" : "with_positions_offsets" }, "modified": { "type": "date", "format": "strict_date_optional_time||epoch_millis" } }}}} Index: pukiwiki Type: page Field: title Field: body Field: modified Field: title_url_encoded

68. • Elasticsearch is RESTful • جຊతʹશͯ JSON Ͱ΍ΓऔΓ͢Δ • Elasticsearch

    Λىಈ͢Δͱ Web αʔόʔཱ͕ͭ • ͦ͜ʹ Python ౳Ͱ JSON ͷ
 Index ఆٛΛ౤͛ͯઃఆ Elasticseach ͷઃఆ

69. 3-3. 
 Elasticsearch ͷαʔόʔ

70. Elasticseach Clusterʢࢀߟʣ Cluster: KMC Node: foo Node: bar Replica: hoge3

    Shard: hoge1 Replica: piyo1 Replica: piyo2 Shard: hoge3 Replica: hoge1 Sha Rep

71. Elasticseach ಋೖ • Elasticsearch ͸ෛՙ͕େ͖͍ • ϝϞϦ୔ࢁ৯͏ • ϑΝΠϧΞΫηε΋୔ࢁ͢Δ •

    ͱ͍͏͜ͱͰ৽͍͠෺ཧϚγϯΛஔ͘͜ͱʹ • ࠓճ node ͸ 1 ୆ͷΈ

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

73. 3-4. 
 Heineken-crawler

74. Heineken-crawler • Python3 Ͱॻ͔Εͨ PukiWiki ͷΫϩʔϥ • จࣈίʔυΛ UTF-8 ʹม׵

    • λΠτϧऔಘɾม׵ • PukiWiki σʔλΛ Elasticsearch ʹ౤͛Δ

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

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

77. 4. Elasticsearch ݕࡧ

78. Elasticsearch ݕࡧ • Elasticsearch ͸ଟछଟ༷ͳݕࡧ͕Մೳ • جຊతʹ֤ର৅ͷ ‘είΞ’ Λܭࢉ •

    είΞॱʹฒ΂Δ • είΞͷௐ੔͕େࣄ

79. Heineken ͰͷείΞ • ᶃ λΠτϧʹॏΈΛஔ͘ • λΠτϧͷείΞΛ 5 ഒॏཁʹ͢Δ •

    ಺෦Ͱ͍͍ײ͡ʹͳΔΒ͍͠ • ["title^5", "body"]

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

81. Heineken ͰͷείΞ • ᶄ ߋ৽೔࣌ʹॏΈΛஔ͘ • ௚ײͰௐ੔ • origin ->

    ݱࡏ • offset -> 150೔ • scale -> 500೔ • decay -> 0.75 https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-function-score-query.html

82. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • Wiki ͷλΠτϧ͸֊૚ߏ଄ • ྫ:

    ‘NF2017/४උ’ • ୹͍΄͏͕ॏཁͳ܏޲ʹ͋Δ

83. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • ࡉ͔͘ௐ੔͠ͳ͕ΒϕετΛ୳Δ • sqrt ͱ͔

    log ͱ͔ • ݁ہ࠾༻ͨ͠ͷ͸…

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

    score ⇤ 1 p log ( title.length + 1)

85. Heineken ͰͷείΞ • ᶅ λΠτϧͷ୹͞ʹॏΈΛஔ͘ • + 1 ʹ͍ͯ͠Δͷ͸ 1

    จࣈͷ࣌ରࡦ • log ͸ͳΜͱͳ͘ • sqrt ͸ͳΜͱͳ͘ score ⇤ 1 p log ( title.length + 1)

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

87. Heineken ͰͷείΞ • είΞ࠷ڧ͸ NF ʹͳͬͨ

88. ଞͷػೳ • ݕࡧޠ͔۟Β͍͍ײ͡ͷ৔ॴΛநग़Ͱ͖Δ • ϋΠϥΠτ༻ͷ HTML λάૠೖ΋Ͱ͖Δ "fields": { "body":

    { "pre_tags": ["<mark>"], "post_tags": ["</mark>"], "fragment_size": 220, …, } }

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

90. 5. Heineken ( React )

91. Heineken ΞϓϦ࣮૷ • Elasticsearch ͸ RESTful • શ෦ JSON Ͱฦͬͯ͘Δ

    → Elasticsearch Ҏ֎ʹσʔλ͸ෆཁ → શ෦ JavaScript Ͱ΍Ε͹ྑ͍

92. Heineken ΞϓϦ࣮૷ • Rails ͳͲͷαʔόʔͰಈ͘ΞϓϦ͸࢖Θͳ͍ • Nginx ͸੩తϑΝΠϧΛฦ͚ͩ͢ • ฦ͢

    HTML ΋ JS ͱ CSS ಡΈࠐΉ͚ͩ

93. React

94. React ུ֓ • UI Λߏ੒͢ΔͨΊͷ JS ϥΠϒϥϦ • Facebook ੡

    • ֤ॴͰ࢖ΘΕ͍ͯΔ • UI ͷ֤෦඼Λ Component ͱͯ͠ߏ੒͍ͯ͘͠

95. React ུ֓ - Virtual DOM • Virtual DOM ͰԾ૝తʹ DOM

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

96. React ུ֓ - JSX • JSX Ͱ JS ্ʹ HTML

    Λॻ͚Δ • ςϯϓϨʔτΤϯδϯͬΆ͘ॻ͚ͯศར const element = ( <h1> Hello, {username}! </h1> );

97. React ։ൃ؀ڥ • create-react-app • Facebook ੡ͷ؆୯ React ߏ੒πʔϧ •

    ։ൃ؀ڥ • Ϗϧυ؀ڥ • ςετ؀ڥ https://github.com/facebookincubator/create-react-app

98. React ։ൃ؀ڥ • ES6 ( ECMA Script 6 ) •

    JavaScript ͷ৽͍͠ඪ४ • class / Arrow function / const / Promise etc.. ৄࡉ: https://www.slideshare.net/1000ch/begin-ecmascript6

99. React ։ൃ؀ڥ • Babel • ES6 Λ ES5 ʹม׵ͯ͘͠ΕΔϥΠϒϥϦ •

    ES5 ͸ଟ͘ͷϒϥ΢βͰ࢖͑ΔͷͰ҆৺

100. ͦͷଞͷύʔπ • React Router v4 • JavaScript ͰϧʔςΟϯά • URL

     ʹΑͬͯ Component Λग़͠෼͚Δ

101. ͦͷଞͷύʔπ • Bootstrap • Twitter ࣾ੡ CSS / JS 


     ϑϨʔϜϫʔΫ • ෦һ໊฽ɾ
 ਆֆΞοϓϩʔμ ͳͲ

102. Heineken ։ൃ 1. create-react-app Ͱͻͳܗ࡞੒ 2. ྑ͍ײ͡ʹ Component ࡞Δ •

     Elasticsearch ͷ API Λୟ͍ͯ൓өͤ͞Δ 3. BabelɾWebpack ͰίϯύΠϧ 4. αʔόʔʹஔ͘

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

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

105. 6. ੒Ռɾײ૝

106. ౰ࣾൺ 1 / 500 • 25000 ms -> 50 ms

     0 7500 15000 22500 30000 PukiWiki Heineken 50 25,000 

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

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

109. ײ૝ • Elasticsearch ͍͢͝ • ͱʹ͔͍͍͘ײ͡ʹͳΔ • React ศརɾES6 ָ͍͠

     • αʔόʔͰԿ΋ಈ͔͞ͳ͍ͷ͸ָ • ΍Γ͔ͨͬͨ͜ͱ͕ग़དྷͨͷͰྑ͔ͬͨ

110. Thank you for listening!