Slide 1
Slide 1 text
Shifterͷجຊͱ
࠷৽Ξοϓσʔτͷ͝հ
[8/5 Zoom։࠵] Shifter ΦϯϥΠϯϛʔτΞοϓʂਅՆͷ Shopify ಛूʙ
Seiji Aakatsuka
Slide 2
Slide 2 text
Who I am
● Name: Seiji Akatsuka
● Work for: DigitalCube
● Job: Customer Success Manager
● SNS: @seijiakatsuka
Slide 3
Slide 3 text
Agenda
● σδλϧΩϡʔϒʹ͍ͭͯ
● Shifter ͱʁ
● ࠷৽Ξοϓσʔτ
Slide 4
Slide 4 text
ABOUT DIGITAL CUBE
Slide 5
Slide 5 text
About DigitalCube
● AWS Advanced Technology Partner
● WordPress ϗεςΟϯά, ੍࡞, อक, ίϯαϧςΟϯά
● OSS ͷߩݙͱίϛϡχςΟͷࢀՃɾࢧԉ
○ ఏڙ WordPress ϓϥάΠϯɿ100+
○ ϓϥάΠϯμϯϩʔυɿ200ສ+
○ WordCampͰͷొஃɿ70+
○ Shifter ίϛϡχςΟΠϕϯτࢧԉϓϩάϥϜɿ14
Slide 6
Slide 6 text
● ίϛϡχςΟ
● Ϗʔϧ
● ͨ·ʹࣄ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Your success is our mission
Slide 9
Slide 9 text
ABOUT SHIFTER
Slide 10
Slide 10 text
Shifter Static
● WordPressαΠτΛಠࣗͷελςΟοΫαΠ
τ δΣωϨʔλʔͰ੩తԽ
● WordPressཧը໘ඞཁͳͱ͖͚ͩىಈ
● ੈք100ڌҎ্ͷάϩʔόϧCDNܦ༝Ͱ
ߴɾηΩϡΞʹ৴Ͱ͖ΔΦʔϧΠϯ
ϫϯڥ
Slide 11
Slide 11 text
Shifter Headless
● WebϑϩϯτΛWordPressςʔϚҎ֎Ͱߏஙɺ
CMSֶशίετͷ͍WordPressΛ׆༻
● ϔουϨεCMSʹ࠷దԽࡁΈɾϝϯςϑϦʔͳ
ৗ࣌ىಈͷWordPressڥΛࣗಈηοτΞοϓ
● WAFMediaCDN (ϝσΟΞϑΝΠϧͷ
Amazon S3ͷΦϑϩʔυػೳ)Λඪ४උ
Slide 12
Slide 12 text
খֶੜͰ͑·͢
https://blue7010.com/
Looks bit difficult? Even elementary school student can use Shifter easily!
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
ί ʔϙ Ϩ ʔ ταΠ τ
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Shift Your WordPress Site to Jamstack
Slide 18
Slide 18 text
https://jamstack.org/
Slide 19
Slide 19 text
https://jamstack.org/
The Jamstack is not about specific technologies. It’s a
new way of building websites and apps that delivers better
performance, higher security, lower cost of scaling, and a
better developer experience.
Slide 20
Slide 20 text
Monolithic
Search
Database
Comments
Authentication
e-commerce
Forms
Slide 21
Slide 21 text
JavaScript
API
API
API
Jamstack
API
Slide 22
Slide 22 text
• ύϒϦογϟʔɿΑΓྑ͍ίϯςϯπΛϑΝϯʹಧ͚Δ
• ։ൃऀɿSREʢSite Reliability EngineeringʣʹϑΥʔΧε
• ϚʔέολʔɿΧελϚʔαΫηεʹϑΥʔΧε
ΑΓՁͷ͋Δ׆ಈʹϑΥʔΧε
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
UPDATE
Slide 25
Slide 25 text
1. Shifter Static Ͱ Media CDN ػೳ͕GAͱͳΓ·ͨ͠
● ϝσΟΞϑΝΠϧΛՄ༻ੑ 99.999999999% ͷ
Amazon S3 ʹࣗಈͰอଘ
● WebP ϑΥʔϚοτͷϝσΟΞϑΝΠϧʹΑΔϢʔ
βʔମݧͷ্
● ϝσΟΞͷΫΦϦςΟΛམͱͣ͞ CDN సૹྔΛѹॖ
● Shifter WordPress ཧը໘ͷύϑΥʔϚϯε্
● Netlify ͳͲ֎෦ڥͱͷ࿈ܞ࣌ʹը૾ͷύε͕อ
͍࣋͢͠
Slide 26
Slide 26 text
2. Shifter Static Ͱ ༧ެ։͕ՄೳʹͳΓ·ͨ͠
● ࠷৽ͷϓϨεϦϦʔεΛ࣮֬ʹࢦఆ࣌ʹެ։
● Ұ࣌తʹಛԽͨ͠ϖʔδաڈهࣄΛظؒݶఆͰެ։
● Artifact ͷΓସ͑ʹΑΔ؆қతʹA/Bςετ
Slide 27
Slide 27 text
1. ੩తԽࡁΈͷ Artifact ΛϓϨϏϡʔ 2. ެ։࣌Ληοτ
Slide 28
Slide 28 text
Shifter Gatsby Recipe ͕ެࣜʹ Gatsby CLI ͷҰ෦ʹͳΓ·ͨ͠
● Shifter Headless ͷͨΊͷ ެࣜ Gatsby Recipe
● Shifter Headless Ͱ Gatsby αΠτΛ੍࡞͢Δ
ࡍͷλεΫΛࣗಈԽ
● Webϑϩϯτ Gatsby Cloud ʹߴσϓϩΠ
● νϡʔτϦΞϧͰଈτϥΠΞϧՄೳ
https://youtu.be/b02kzF2ZrrM
Slide 29
Slide 29 text
Check our blog!
https://www.getshifter.io/ja/blog
Slide 30
Slide 30 text
NEXT EVENT
Slide 31
Slide 31 text
[8/26 ZOOM ன։࠵] Shifter ΦϯϥΠϯ ͘͘ձ #4ʂ
Slide 32
Slide 32 text
[9/9 Zoom։࠵] Shifter Headless ͱ Algolia ׆༻ज़ʂ
Slide 33
Slide 33 text
Thanks!