WordPress サイトを iPhone アプリにしてみた

Slide 1

Slide 1 text

2014.07.09 WordPressαΠτΛiPhoneΞϓϦʹͯ͠Έͨ ɹ―ߏஙࣄྫͷ঺հ― Kiharu Sasaki

Slide 2

Slide 2 text

Introduction Kiharu Sasaki Web Designer System Engineer https://www.facebook.com/ kiharu.sasaki @bump_of_kiharu http://bump.hatenablog.com/ ࣗݾ঺հ ϑϦʔϥϯεͰ΢ΣϒσβΠϯ΍ γεςϜ։ൃͷ͓࢓ࣄΛ͍ͯ͠·͢ɻ

Slide 3

Slide 3 text

Overview ࠓճ͓࿩͢Δ಺༰ WordPressͰߏஙͨ͠ NAZOPLA(Ṗϓϥ)ͱ͍͏ ΫΠζͷϙʔλϧαΠτΛ iPhoneΞϓϦʹ͠·ͨ͠ɻ ΞϓϦԽͨ͠ࡍͷ৭ʑΛ ࠓճ͓࿩͠·͢ɻ NAZOPLA – Ṗϓϥ – http://nazopla.jp

Slide 4

Slide 4 text

ܦҢ΍എܠ How it started ?

Slide 5

Slide 5 text

Site overview ࣗ࡞ΫΠζΛ1ຕͷը૾ʹͯ͠౤ߘ͢Δɺը૾ ౤ߘαΠτɻ ౤ߘ͞ΕͨΫΠζʹରͯ͠ɺճ౴ͨ͠Γɺώ ϯτΛݟͨΓɺධՁΛ෇͚ͯϥϯΩϯάΛָ ͠Ή͜ͱ͕ग़དྷ·͢ɻ NAZOPLA : ΫΠζΛ౤ߘͨ͠ΓɺΫΠζʹճ ౴Ͱ͖ΔṖͷϓϥοτϑΥʔϜɻ αΠτͷ঺հ

Slide 6

Slide 6 text

Site overview ιʔγϟϧϩάΠϯ ධՁ ΫΠζͷ౤ߘ ΫΠζͷճ౴ Facebook / Twitter ΞΧ΢ϯτͰͷձһొ࿥ɾ ϩάΠϯ ౤ߘ͞ΕͨΫΠζʹରͯ͠ ʮ೉қ౓ʯʮ໘ന͞ʯΛධՁ ΫΠζը૾ͷ౤ߘɺ ώϯτ΍ճ౴ظݶͷઃఆͳͲ •  ճ౴ऀϥϯΩϯά •  ਓؾΫΠζϥϯΩϯά ਖ਼ղ͢Δ͜ͱͰϙΠϯτ֫ಘ ਖ਼ղॱʹΑͬͯ֫ಘϙΠϯτ ͕มಈ ि1ճͷϝϧϚΨൃߦ NAZOPLAͷओͳػೳ ϥϯΩϯά ϝʔϧϚΨδϯ αΠτͷ঺հ

Slide 7

Slide 7 text

Site overview ϞόΠϧʢλϒϨοτؚʣͷΞ Ϋηε͸50%ɺ಺60%͕iOSσ όΠε͔ΒͷΞΫηε αʔϏε։࢝1೥൒Ͱɺձһ ਺ɾPVͱ΋ʹॱௐʹ৳ͼ͍ͯ Δ͕ɺߋͳΔ޲্Λ໨ࢦ͍ͨ͠ Year- Month PV 2014 – 01 130,000 2014 – 02 110,000 2014 – 03 130,000 2014 – 04 120,000 2014 – 05 150,000 2014 – 06 170,000 Mobileɿ 50% iOSɿ 60% ฏۉ݄ؒPV ձһ਺ αʔϏεظؒ 13ສPV 7,000 16ϲ݄ αΠτͷ঺հ

Slide 8

Slide 8 text

Conclusion εϚϗΞϓϦԽͷݕ౼ ϞόΠϧ͔ΒͷΞΫηε͕5ׂΛ઎ΊΔ͕ɺϞόΠϧʹ࠷దԽ ͨ͠ϖʔδද͕ࣔग़དྷ͍ͯͳ͍ɻ ϖʔδ਺͕๲େͰɺϨεϙϯγϒରԠʹ޻਺͕͔͔Δɻ ϞόΠϧͷಛੜΛ׆༻ͨ͠৽ͨͳར༻๏Λ໛ࡧ͠ɺαʔϏεͷ ֦ॆΛ͸͔Γ͍ͨɻ What is the problem? ϞόΠϧରԠͷ՝୊

Slide 9

Slide 9 text

As for mobile app ΞϓϦԽʹ͍ͭͯ

Slide 10

Slide 10 text

Point of diﬀerence Webͱͷҧ͍ ΦϑϥΠϯͰ΋ ར༻Մೳ ϞόΠϧಛ༗ͷػೳ ʢGPS / ܏͖ɾۙ઀ηϯαʔͳͲʣ ϚωλΠζ ʢ༗ྉެ։ɾΞϓϦ಺՝ۚʣ WebΫϦΤΠλʔ͕ɺ͍ͭݟམͱ͕ͪ͠ͳ ϞόΠϧΞϓϦͱWebΞϓϦͷେ͖ͳҧ͍ɻ

Slide 11

Slide 11 text

ϓογϡ௨஌Λར༻ͯ͠ɺϢʔβʔͷೳಈతΞΫ ηεΛଅͤΔ ϞόΠϧʹಛԽͨ͠ϢʔβϏϦςΟΛఏڙ͢Δ͜ͱ ͰUXΛߴΊɺճ༡཰ɾ࿈ଓར༻࣌ؒͷ޲্΍ɺα ʔϏεࣗମͷܧଓར༻͕ݟࠐΊΔ ݕࡧΤϯδϯ͔Β͚ͩͰͳ͘ɺApp Store / Google Play͔Βͷྲྀೖ͕ظ଴Ͱ͖Δ ৽نϢʔβʔͷ֫ಘ ΞΫηεස౓ͷ޲্ ܧଓར༻ͷଅਐ ΞϓϦԽͷϝϦοτ Merit

Slide 12

Slide 12 text

iOS / Android / WindowMobile ͳͲɺϓϥοτϑΥʔϜผʹ։ൃ͕ඞཁɻ(※) ͞Βʹόʔδϣϯผʹܧଓͨ͠Τϯϋϯε΋ඞཁɻ ʢ※ϋΠϒϦουΞϓϦͱ͍͏બ୒ࢶ΋͋Δʣ ϢʔβʔχʔζΛ೺ѲͰ͖Δͱ͍͏ྑ͍໘΋͋Γ·͕͢… ΞϓϦͷެ։ɾߋ৽ʹ͸৹͕ࠪඞཁɻ ·ͨɺόʔδϣϯΞοϓͷ൓ө͸Ϣʔβʔ࣍ୈͳͷͰɺมߋΛ׬શʹίϯτϩ ʔϧग़དྷͳ͍ɻ ެ։ɾߋ৽λΠϛϯά ։ൃίετ ϢʔβʔʹΑΔධՁ੍౓ ΞϓϦԽͷσϝϦοτ Demerit

Slide 13

Slide 13 text

ϋΠϒϦουΞϓϦ ΞϓϦԽ͢Δํ๏ ωΠςΟϒίʔυʹΑΔ։ൃ HTML5 / CSS / JavaScriptΛར༻ͨ͠ ϑϨʔϜϫʔΫͰͷ։ൃ ωΠςΟϒΞϓϦ Android Java (C / C++ ଞ) iOS Objective-c / Swift (C / C++ ଞ) Windows Mobile 7 XNA / Silverlight BlackBerry Java •  PhoneGap •  Titanium Mobile •  MonacaɹͳͲଞଟ਺ ※ͦͷଞήʔϜܥͷΞϓϦ։ൃͰ͸ Unity / Cocos2d / Adobe Air ͳͲͷϑϨʔϜϫʔΫ΋༗ ໊ Development

Slide 14

Slide 14 text

ϋΠϒϦου ΞϓϦ •  σόΠεͷػೳΛ࠷େݶʹར༻Մೳ •  ॲཧ଎౓͕ૣ͍ •  ϫϯιʔεɾϚϧνσόΠεͷͨΊอ कੑ͕ྑ͍ •  ֶशίετ͕௿͍ •  ϓϥοτϑΥʔϜ͝ͱͷ։ൃ͕ඞཁͳ ͨΊɺֶशίετɾ։ൃίετ͕ߴ͍ •  OS͝ͱʹҟͳΔΤϯϋϯε͕ඞཁͳͨ Ίอकੑ͕ѱ͍ •  ॲཧ଎౓΍ϨϯμϦϯάͳͲͰωΠς ΟϒʹྼΔ •  ϑϨʔϜϫʔΫʹΑͬͯ͸ɺར༻Ͱ͖ ͳ͍σόΠεͷػೳ΍੍ݶ͕͋Δ ϝϦοτ σϝϦοτ ϝϦοτ σϝϦοτ ΞϓϦԽ͢Δํ๏ Development ωΠςΟϒ ΞϓϦ

Slide 15

Slide 15 text

WebViewϕʔεΞϓϦ •  ΞϓϦ಺ʹϒϥ΢βΛຒΊࠐΜͰදࣔͤ͞Δ •  ϝΠϯίϯςϯπ͸ΞϓϦ಺ϒϥ΢βͰWebϖʔδΛදࣔ •  σόΠεػೳͷݺͼग़͠ͳͲɺҰ෦ωΠςΟϒͰ࣮૷ WebView-based app •  WebView෦෼͸ଈ࣌൓өͰ͖Δɻ ৹ࠪ΋ෆཁͳͷͰɺߋ৽ͷ൓өͱλΠ ϛϯάΛ׬શʹίϯτϩʔϧͰ͖Δ •  ωΠςΟϒͰ͸දݱग़དྷͳ͍ɺࡉ͔͍ σβΠϯͷ࣮ݱ͕ՄೳʹͳΔ ϝϦοτ ʲࢀߟʳhttp://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html ୈ3ͷબ୒ࢶ: WebView •  ΦϑϥΠϯͰ͸࢖͑ͳ͍ •  Appleͷ৹͕ࠪݫ͘͠ͳΔ ʢ͔΋͠Εͳ͍ʣ σϝϦοτ ΫοΫύουΞϓϦʢAndoroid൛ʣͳͲ࠷ۙ͸ଟ͍

Slide 16

Slide 16 text

iOSͬΆ͘ͳ͍ΞϓϦ ͦΕ΢ΣϒͰ͍͍͡ΌΜɺ ͳΞϓϦ ༗༻ੑ΍ಠࣗੑ͕ͳ͍ΞϓϦ ୯ʹ΢ΣϒαΠτΛόϯυϧͨ͠΋ͷ σόΠεͷػೳΛ׆͔͍ͯ͠ͳ͍΋ͷ ػೳ͕୯७ɺίϯςϯπ͕গͳ͍΋ͷ Ӭଓͨ͠Ձ஋Λఏڙ͠ͳ͍ͱ൑அ͞ΕΔ΋ͷ UI͕ΨΠυϥΠϯʹै͍ͬͯͳ͍΋ͷ ʢϘλϯͷߴ͞ͳͲࡉ͔͘ࢦఆ͋Γʣ WebViewϕʔεͷΞϓϦʹ͢Δ৔߹ʹ ৹͕ࠪݫ͍͠AppleΛج४ʹͯ͠ɺ ΞϓϦԽ͕ෆద੾ͳέʔεΛߟ͑Δɻ ΞϓϦԽʹ޲͔ͳ͍έʔε Not suitable case

Slide 17

Slide 17 text

࣮૷ฤ Start making app

Slide 18

Slide 18 text

App overview ΞϓϦ঺հ

Slide 19

Slide 19 text

Native WebView Native WebView Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ Native

Slide 20

Slide 20 text

WebͰ࣮ݱ͍ͯ͠Δػೳ •  ϝΠϯίϯςϯπͷදࣔશൠ •  αʔόʔ΁ͷσʔλΞΫηε Native WebView NativeͰ࣮ݱ͍ͯ͠Δػೳ •  ശͷ֎ଆʢφϏήʔγϣϯόʔ / λϒόʔʣ •  ΦϑϥΠϯঢ়ଶͷݕ஌ͱ௨஌ •  σόΠεػೳͷݺͼग़͠ ʢϝʔϥʔͷىಈɺSNS΁ͷϙετʣ •  Cookieͷอଘ / ഁغ •  UserAgentͷ௥Ճ •  ޿ࠂදࣔʢࠓճ͸ iAd Λར༻ʣ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ

Slide 21

Slide 21 text

ωΠςΟϒ͔ΒɺWordPressϖʔδʹ࣮૷͞Εͨ JavaScriptϑΝϯΫγϣϯΛίʔϧ͍ͯ͠Δ෦෼ɻ ωΠςΟϒଆͰϝιου͕༻ҙ͞Ε͓ͯΓɺ؆୯ʹ ࣮ݱͰ͖Δɻ Native → Web(JS) Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ

Slide 22

Slide 22 text

ϝχϡʔΞΠίϯΛΫϦοΫͨ࣌͠ͷಈ࡞ɻ CSS3ͷΞχϝʔγϣϯػೳΛར༻͢Δ͜ͱͰ ΞϓϦͬΆ͍ಈ͖Λԋग़͢Δ͜ͱ΋Մೳɻ ʢλοϓΠϕϯτݕ஌ͷΈJavaScriptΛ࢖༻ʣ Web͔ΒωΠςΟϒΛίʔϧ͍ͯ͠Δ෦෼ɻ λοϓ͢ΔͱɺσόΠεͷϝʔϥʔ͕ىಈ͢Δɻ ϦϯΫઌʹΧελϜεΩʔϜΛࢦఆ͢Δํ๏Ͱ࣮ݱɻ CSS3 Animation Web → Native ※ΧελϜURLεΩʔϜͱ͸ “mailto:” ΍ “tel:” ͳͲҰൠతʹ΋Α͘࢖ΘΕΔ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ

Slide 23

Slide 23 text

Twitter Bootstrap http://getbootstrap.com/ ϨεϙϯγϒσβΠϯΛ؆୯ʹ࣮૷Ͱ͖ΔɺCSSϑϨʔϜϫʔΫɻ ͓ੈ࿩ʹͳͬͨ΋ͷͨͪ compass http://compass-style.org/ SASSར༻ͷ΄͔ɺදࣔ଎౓޲্ͷͨΊɺը૾ͷCSSεϓϥΠτԽʹར༻ɻ Multi Device Switcher http://wordpress.org/plugins/multi-device-switcher/ σόΠεΛ൑அͯ͠දࣔ͢ΔςʔϚΛ੾ସ͑Δ͜ͱ͕ग़དྷΔϓϥάΠϯɻ ࠓճɺPCαΠτͱ͸σβΠϯ͕·ͬͨ͘ҟͳΔͨΊɺϞόΠϧ༻ʹผςʔϚΛ࡞੒ɻ ΞϓϦ͔ΒͷΞΫηεͷ൑ผͷͨΊʹಠࣗͷUserAgentΛ௥Ճ͠ɺΞϓϦͷ৔߹ͷΈ ֘౰ςʔϚΛදࣔ͢ΔΑ͏ઃఆͨ͠ɻ Plugin & more

Slide 24

Slide 24 text

WebViewϕʔεͷΞϓϦͷ৔߹ɺʮωοτϫʔΫʹ઀ଓ͞Ε͍ͯͳ͍ͱར༻͕ग़ དྷͳ͍ʯ͜ͱΛ໌֬ʹ௨஌͠ɺΦϑϥΠϯঢ়ଶΛৗ࣌ݕ஌͢ΔΑ͏ʹ͢Δɻ ΦϑϥΠϯ࣌ͷߟྀ ࣮૷࣌ʹߟྀ͢΂͖఺ Native PCͱҧ͍ɺ௨৴؀ڥɾ଎౓͕සൟʹมԽ͢ΔͨΊɺը໘ભҠͳͲαʔόʔͱͷ ௨৴͕ൃੜ͢Δ࣌͸ɺϩʔμʔΛදࣔ͠ʮॲཧ͍ͯ͠ΔײʯΛࣔ͢Α͏ʹ͢Δɻ ϩʔμʔͷදࣔ Native URLͷϦΫΤετ࣌͸ωΠςΟϒଆͰΦϯϥΠϯঢ়گΛ֬ೝ͢Δ͕ɺWebଆͰ׬݁ ͢ΔAjax΍APIͳͲͷ௨৴ॲཧ࣌͸ɺΦϑϥΠϯ࣌ͷߟྀʢλΠϜΞ΢τ౳ͷΤϥʔ ϋϯυϦϯάʣΛ๨Εͣʹߦ͏ɻ Ajax΍APIίʔϧ࣌ͷߟྀ Web Attention

Slide 25

Slide 25 text

WebViewͰදࣔͨ͠ը໘ͷΩϟογϡ͸ͳ͔ͳ͔ফ͑ͳ͍ɻ ωΠςΟϒଆͰը໘ಡΈࠐΈલʹΫϦΞ͢ΔɺݩʑΩϟογϡͤ͞ͳ͍Α͏ʹ͢Δ ͳͲߟྀ͕ඞཁɻ ελΠϧγʔτ΍JSͷมߋ൓өͷͨΊʹ͸ɺಡΈࠐΈ࣌ʹόʔδϣϯ৘ใΛ෇Ճ͠ ͨURLʹ͢ΔͳͲͷରԠ͕ඞਢɻ Ωϟογϡ໰୊ Web Native Ϣʔβʔొ࿥ͯ͠ར༻͢ΔΞϓϦͷ৔߹ɺͦͷ··Ͱ͸ΞϓϦΛऴྃ͢ΔͱϩάΠ ϯঢ়ଶ͕อ࣋͞Εͳ͍ɻWordPressͷϩάΠϯঢ়ଶΛอ࣋͢ΔͨΊʹ͸ɺωΠςΟ ϒଆͰCookieͷอଘΛߦ͏ɻʢϩάΞ΢τ࣌ʹ͸ഁغ͢Δ͜ͱ΋๨Εͣʹʣ ʲࢀߟʳhttp://tech-gym.com/2011/10/objective-c/506.html ϩάΠϯঢ়ଶͷอ࣋ Native ࣮૷࣌ʹߟྀ͢΂͖఺ Attention

Slide 26

Slide 26 text

͘͞ΒΠϯλʔωοτͷ ʮࠃ֎IPͷΞΫηε੍ݶʯʹ͍ͭͯ ͜ͷઃఆ͕༗ޮʹͳ͍ͬͯΔͱɺWordPressͷϩ άΠϯॲཧ෦෼Ͱɺࠃ֎͔ΒͷΞΫηε࣌ʹ404 Τϥʔ͕ൃੜ͠·͢ɻ ॳظઃఆ͕ʮ༗ޮʯͱͳ͍ͬͯΔͨΊɺ WordPressͰձһ੍αΠτʹ͍ͯ͠Δํ͸ɺແޮ ʹ͠·͠ΐ͏ɻ ※AppleͷϨϏϡΞʔ͸ࠃ֎Ͱ͢ʂʂ ͓·͚ Postscript