インターフェイス再考 ユースケースから考える これからのWordPressサイト

WordBench 5/5
岡本秀高

Transcript

1. ΠϯλʔϑΣΠε࠶ߟ Ϣʔεέʔε͔Βߟ͑Δ ͜Ε͔ΒͷWordPressαΠτ WordBench 5/5 Ԭຊलߴ
2. ࣗݾ঺հ • Digitalcube Co. Ltd. • WordCamp Kyoto 2017࣮ߦҕ һ௕ • ྲྀ͠ͷJAWS-UGӡӦϝϯόʔ H i d e t a k a O k a m o t o
3. Alexa Skills Kit޲͚ͷ΋Ζ΋ΖΛ࡞ͬͨΓ https://www.npmjs.com/package/ask-util
4. CloudFrontͷΩϟογϡ؅ཧϓϥάΠϯ https://www.npmjs.com/package/ask-utils
5. Shifter: WordPressͰ੩తαΠτδΣωϨʔλʔ https://getshifter.io
6. AMIMOTO: CDN / WAFඪ४ରԠWPϗεςΟϯά https://amimoto-ami.com/
7. ࠓ೔͢Δ࿩ • ࠓى͖͍ͯΔʮෆՄආͳྲྀΕʯ • WordPressͰͰ͖Δ͜ͱɺ͢΂͖͜ͱ • ͜ͷઌੜ͖ͷ͜Δʹ͸
8. ͦΖͦΖ ը໘ͷͳ͍ੈք΋ ߟ͑Δ೔͕དྷͨ
9. ϘλϯΛԡͤ͹ɺ঎඼͕ಧ͘࢓૊ΈɿAmazon μογϡϘλϯ https://www.amazon.co.jp/Amazon-Dash-Button-μογϡ-Ϙλϯ/
10. ̏εςοϓͰ४උͯ͠ɺ͋ͱ͸ԡ͚ͩ͢ https://www.amazon.co.jp/Amazon-Dash-Button-μογϡ-Ϙλϯ/
11. ʮཉ͍͠ʯͱࢥͬͨ࣌ʹ͙͢ΞΫγϣϯͰ͖Δ https://www.amazon.co.jp/Amazon-Dash-Button-μογϡ-Ϙλϯ/
12. ੠Ͱ঎඼Λ஫จ͢Δ࢓૊ΈɿAmazon Alexa https://amzn.to/2I8kt3V
13. ഑ૹঢ়گ΍Ϧετͷ࡞੒΋੠ͰͰ͖Δ https://amzn.to/2I8kt3V
14. Ϣʔβʔͱͷ”઀఺”͕ࠓٸ଎ʹ޿͕͍ͬͯΔ • ࠓɿʮPC͚ͩʯ͔ΒʮεϚϗ͕ϝΠϯʯ΁ͷҠߦ • ͜Ε͔ΒɿʮGUIʯ͔ΒʮGUIҎ֎ʯ΁ͷҠߦ • ʮͳͥͦ͏ͳΔͷ͔ʁʯΛߟ͑Δඞཁ͕͋Δ • ʮΑΓ؆୯ɺΑΓखܰʹ໨తΛୡ੒͍ͨ͠ʯ
15. ͔ͭͯͷwebͷݰؔޱ https://www.yahoo.co.jp/
16. ʮ౴͑Λ஌Γ͍ͨʯͱ͍͏໨తʹಛԽͨ݁͠Ռ https://www.google.co.jp/
17. ΑΓ؆୯ɺΑΓखܰɺΑΓศརʹ • ࠓɿʮPC͚ͩʯ͔ΒʮεϚϗ͕ϝΠϯʯ΁ͷҠߦ • ͜Ε͔ΒɿʮGUIʯ͔ΒʮGUIҎ֎ʯ΁ͷҠߦ • ʮͳͥͦ͏ͳΔͷ͔ʁʯΛߟ͑Δඞཁ͕͋Δ • ʮΑΓ؆୯ɺΑΓखܰʹ໨తΛୡ੒͍ͨ͠ʯ
18. WordPressͱ ࠓى͖ͭͭ͋ΔྲྀΕ΁ͷ ޲͖߹͍ํΛߟ͑Δ
19. WordPress https://wordpress.org/
20. – h t t p s : / / w o rd p re s s . o rg / “WordPress is open source software you can use to create a beautiful website, blog, or app.”
21. – h t t p s : / / w o rd p re s s . o rg / “WordPress is open source software you can use to create a beautiful website, blog, or app.”
22. – h t t p s : / / w o rd p re s s . o rg / “WordPress is open source software you can use to create a beautiful website, blog, or app.”
23. Ͳ͏΍ͬͯ create app͢Δʁ
24. /wp-json
25. – h t t p s : / / d e v e l o p e r. w o rd p re s s . o rg / re s t - a p i / “The WordPress REST API makes it easier than ever to use WordPress in new and exciting ways, such as creating Single Page Applications on top of WordPress.”
26. Client libs • JavaScript: node-wpapi • JavaScript: ember-wordpress • Ruby: wp-api-client • C#: WordPress PCL
27. େ੾ͳ͜ͱ
28. – h t t p s : / / w w w. g o o g l e . c o m / i n t l / j a / a b o u t / p h i l o s o p h y. h t m l “Ϣʔβʔʹয఺ΛߜΕ͹ɺ ଞͷ΋ͷ͸Έͳޙ͔Β͍ͭͯ͘Δ”
29. ໨తͱखஈ͕ࠞ͟ΔͱͭΒΈ͕૿͢ • ʮPWAͱ͔Alexaͱ͔ྲྀߦͬͯΔ͔Β͏ͪ΋΍Δʂʯ • ʮͲ͏ͤόζϫʔυͰ͠ΐɺεϧʔͰ͍͍Αʯ • ʮϏδωενϟϯε͔΋͔ͩΒɺϓϩτͭͬͯ͘ΈΑʯ • ʮ͜ͷϢʔεέʔεɺ͏ͪͷސ٬ʹ͸߹Θͳ͍͔΋ʯ
30. WordPressΛ࢖͍ଓ͚͍ͯΔ ڧΈͬͯͳΜͩΖ͏
31. WordPress is Publishing platform • ʮ৘ใΛൃ৴͢Δʯ͜ͱʹ௕͚ͨCMS • ಛʹϒϩάɾχϡʔεͳͲͷϑϩʔίϯςϯπʹڧ͍ • ϓϥάΠϯɾςʔϚͰͷ༰қͳػೳ֦ு΋௕ॴ • ͳʹΑΓʮϓϨΠϠʔ͕ଟ͍ʯ
32. WordPressͰPodcast https://wordpress.org/plugins/amazon-polly/
33. WordPress౤ߘͷԻ੠ϑΝΠϧΛࣗಈੜ੒ https://blogs.wp-kyoto.net/archives/223/
34. WordPress x Amazon Alexa https://voicewp.com
35. WordPress x Amazon Alexa https://voicewp.com
36. WordPressͷίϯςϯπΛ Ի੠Խ͢Δࡍͷ஫ҙ఺
37. ʮಡΈݴ༿ʯͱʮ࿩͠ݴ༿ʯ͸ҧ͏ • WordPressͰॻ͔Εͨهࣄ͸ʮಡΈݴ༿ʯ • ಡΈ΍͍͢ॻ͖ํͱɺฉ͖΍͍͢࿩͠ํ͸ҟͳΔ • VUIͩͱʮ࿩ऴΘΔ·Ͱ଴ͨͳ͍ͱʯͱ͍͏ετϨε΋ • Ի੠ԽΛߟ͑Δ৔߹ɺҰ౓੠ʹग़ͯ͠ಡΈ্͛ͯΈΑ͏
38. AlexaͰͷԻ੠σβΠϯΨΠυʢҰ෦ʣ https://developer.amazon.com/ja/designing-for-voice/what-alexa- says/
39. ͜ͷઌੜ͖ͷ͜Δʹ͸
40. ࣗ෼ͷڧΈɾ޷͖ͳ෼໺Λ Ͳ͏৽͍͠ྖҬʹ݁ͼ͚ͭΔ͔
41. ࣮ళฮʹECͷϊ΢ϋ΢Λ࣋ͪࠐΉɿAmazon GO https://www.slideshare.net/hide69oz/20180424-jp- stripeskyotoamazongo
42. Amazon GO͸”ແਓίϯϏχ”Ͱ͸ͳ͍ https://www.slideshare.net/hide69oz/20180424-jp- stripeskyotoamazongo
43. AWS TechΤόϯδΣϦετ͕େ੾ʹ͍ͯ͠Δ͜ͱ https://aws.amazon.com/jp/blogs/news/jaws-days-2018-technical- evangelist/
44. ΈΜͳશྗͷૉৼΓ΍Ζ͏ͥ
45. Full swing !