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

WordBench TOKYO の2014年7月に発表した内容です

Transcript

1. 2014.07.09 WordPressαΠτΛiPhoneΞϓϦʹͯ͠Έͨ ɹ―ߏஙࣄྫͷ঺հ― Kiharu Sasaki
2. Introduction Kiharu Sasaki Web Designer System Engineer https://www.facebook.com/ kiharu.sasaki @bump_of_kiharu http://bump.hatenablog.com/
   ࣗݾ঺հ ϑϦʔϥϯεͰ΢ΣϒσβΠϯ΍ γεςϜ։ൃͷ͓࢓ࣄΛ͍ͯ͠·͢ɻ
3. Overview ࠓճ͓࿩͢Δ಺༰ WordPressͰߏஙͨ͠ NAZOPLA(Ṗϓϥ)ͱ͍͏ ΫΠζͷϙʔλϧαΠτΛ iPhoneΞϓϦʹ͠·ͨ͠ɻ ΞϓϦԽͨ͠ࡍͷ৭ʑΛ ࠓճ͓࿩͠·͢ɻ NAZOPLA – Ṗϓϥ – http://nazopla.jp
4. ܦҢ΍എܠ How it started ?
5. Site overview ࣗ࡞ΫΠζΛ1ຕͷը૾ʹͯ͠౤ߘ͢Δɺը૾ ౤ߘαΠτɻ ౤ߘ͞ΕͨΫΠζʹରͯ͠ɺճ౴ͨ͠Γɺώ ϯτΛݟͨΓɺධՁΛ෇͚ͯϥϯΩϯάΛָ ͠Ή͜ͱ͕ग़དྷ·͢ɻ NAZOPLA : ΫΠζΛ౤ߘͨ͠ΓɺΫΠζʹճ ౴Ͱ͖ΔṖͷϓϥοτϑΥʔϜɻ αΠτͷ঺հ
6. Site overview ιʔγϟϧϩάΠϯ ධՁ ΫΠζͷ౤ߘ ΫΠζͷճ౴ Facebook / Twitter ΞΧ΢ϯτͰͷձһొ࿥ɾ ϩάΠϯ ౤ߘ͞ΕͨΫΠζʹରͯ͠ ʮ೉қ౓ʯʮ໘ന͞ʯΛධՁ ΫΠζը૾ͷ౤ߘɺ ώϯτ΍ճ౴ظݶͷઃఆͳͲ •  ճ౴ऀϥϯΩϯά •  ਓؾΫΠζϥϯΩϯά ਖ਼ղ͢Δ͜ͱͰϙΠϯτ֫ಘ ਖ਼ղॱʹΑͬͯ֫ಘϙΠϯτ ͕มಈ ि1ճͷϝϧϚΨൃߦ NAZOPLAͷओͳػೳ ϥϯΩϯά ϝʔϧϚΨδϯ αΠτͷ঺հ
7. 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ϲ݄ αΠτͷ঺հ
8. Conclusion εϚϗΞϓϦԽͷݕ౼ ϞόΠϧ͔ΒͷΞΫηε͕5ׂΛ઎ΊΔ͕ɺϞόΠϧʹ࠷దԽ ͨ͠ϖʔδද͕ࣔग़དྷ͍ͯͳ͍ɻ ϖʔδ਺͕๲େͰɺϨεϙϯγϒରԠʹ޻਺͕͔͔Δɻ ϞόΠϧͷಛੜΛ׆༻ͨ͠৽ͨͳར༻๏Λ໛ࡧ͠ɺαʔϏεͷ ֦ॆΛ͸͔Γ͍ͨɻ What is the problem? ϞόΠϧରԠͷ՝୊
9. As for mobile app ΞϓϦԽʹ͍ͭͯ
10. Point of difference Webͱͷҧ͍ ΦϑϥΠϯͰ΋ ར༻Մೳ ϞόΠϧಛ༗ͷػೳ ʢGPS / ܏͖ɾۙ઀ηϯαʔͳͲʣ ϚωλΠζ ʢ༗ྉެ։ɾΞϓϦ಺՝ۚʣ WebΫϦΤΠλʔ͕ɺ͍ͭݟམͱ͕ͪ͠ͳ ϞόΠϧΞϓϦͱWebΞϓϦͷେ͖ͳҧ͍ɻ
11. ϓογϡ௨஌Λར༻ͯ͠ɺϢʔβʔͷೳಈతΞΫ ηεΛଅͤΔ ϞόΠϧʹಛԽͨ͠ϢʔβϏϦςΟΛఏڙ͢Δ͜ͱ ͰUXΛߴΊɺճ༡཰ɾ࿈ଓར༻࣌ؒͷ޲্΍ɺα ʔϏεࣗମͷܧଓར༻͕ݟࠐΊΔ ݕࡧΤϯδϯ͔Β͚ͩͰͳ͘ɺApp Store / Google Play͔Βͷྲྀೖ͕ظ଴Ͱ͖Δ ৽نϢʔβʔͷ֫ಘ ΞΫηεස౓ͷ޲্ ܧଓར༻ͷଅਐ ΞϓϦԽͷϝϦοτ Merit
12. iOS / Android / WindowMobile ͳͲɺϓϥοτϑΥʔϜผʹ։ൃ͕ඞཁɻ(※) ͞Βʹόʔδϣϯผʹܧଓͨ͠Τϯϋϯε΋ඞཁɻ ʢ※ϋΠϒϦουΞϓϦͱ͍͏બ୒ࢶ΋͋Δʣ ϢʔβʔχʔζΛ೺ѲͰ͖Δͱ͍͏ྑ͍໘΋͋Γ·͕͢… ΞϓϦͷެ։ɾߋ৽ʹ͸৹͕ࠪඞཁɻ ·ͨɺόʔδϣϯΞοϓͷ൓ө͸Ϣʔβʔ࣍ୈͳͷͰɺมߋΛ׬શʹίϯτϩ ʔϧग़དྷͳ͍ɻ ެ։ɾߋ৽λΠϛϯά ։ൃίετ ϢʔβʔʹΑΔධՁ੍౓ ΞϓϦԽͷσϝϦοτ Demerit
13. ϋΠϒϦουΞϓϦ ΞϓϦԽ͢Δํ๏ ωΠςΟϒίʔυʹΑΔ։ൃ 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
14. ϋΠϒϦου ΞϓϦ •  σόΠεͷػೳΛ࠷େݶʹར༻Մೳ •  ॲཧ଎౓͕ૣ͍ •  ϫϯιʔεɾϚϧνσόΠεͷͨΊอ कੑ͕ྑ͍ •  ֶशίετ͕௿͍ •  ϓϥοτϑΥʔϜ͝ͱͷ։ൃ͕ඞཁͳ ͨΊɺֶशίετɾ։ൃίετ͕ߴ͍ •  OS͝ͱʹҟͳΔΤϯϋϯε͕ඞཁͳͨ Ίอकੑ͕ѱ͍ •  ॲཧ଎౓΍ϨϯμϦϯάͳͲͰωΠς ΟϒʹྼΔ •  ϑϨʔϜϫʔΫʹΑͬͯ͸ɺར༻Ͱ͖ ͳ͍σόΠεͷػೳ΍੍ݶ͕͋Δ ϝϦοτ σϝϦοτ ϝϦοτ σϝϦοτ ΞϓϦԽ͢Δํ๏ Development ωΠςΟϒ ΞϓϦ
15. WebViewϕʔεΞϓϦ •  ΞϓϦ಺ʹϒϥ΢βΛຒΊࠐΜͰදࣔͤ͞Δ •  ϝΠϯίϯςϯπ͸ΞϓϦ಺ϒϥ΢βͰWebϖʔδΛදࣔ •  σόΠεػೳͷݺͼग़͠ͳͲɺҰ෦ωΠςΟϒͰ࣮૷ WebView-based app •  WebView෦෼͸ଈ࣌൓өͰ͖Δɻ ৹ࠪ΋ෆཁͳͷͰɺߋ৽ͷ൓өͱλΠ ϛϯάΛ׬શʹίϯτϩʔϧͰ͖Δ •  ωΠςΟϒͰ͸දݱग़དྷͳ͍ɺࡉ͔͍ σβΠϯͷ࣮ݱ͕ՄೳʹͳΔ ϝϦοτ ʲࢀߟʳhttp://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html ୈ3ͷબ୒ࢶ: WebView •  ΦϑϥΠϯͰ͸࢖͑ͳ͍ •  Appleͷ৹͕ࠪݫ͘͠ͳΔ ʢ͔΋͠Εͳ͍ʣ σϝϦοτ ΫοΫύουΞϓϦʢAndoroid൛ʣͳͲ࠷ۙ͸ଟ͍
16. iOSͬΆ͘ͳ͍ΞϓϦ ͦΕ΢ΣϒͰ͍͍͡ΌΜɺ ͳΞϓϦ ༗༻ੑ΍ಠࣗੑ͕ͳ͍ΞϓϦ ୯ʹ΢ΣϒαΠτΛόϯυϧͨ͠΋ͷ σόΠεͷػೳΛ׆͔͍ͯ͠ͳ͍΋ͷ ػೳ͕୯७ɺίϯςϯπ͕গͳ͍΋ͷ Ӭଓͨ͠Ձ஋Λఏڙ͠ͳ͍ͱ൑அ͞ΕΔ΋ͷ UI͕ΨΠυϥΠϯʹै͍ͬͯͳ͍΋ͷ ʢϘλϯͷߴ͞ͳͲࡉ͔͘ࢦఆ͋Γʣ WebViewϕʔεͷΞϓϦʹ͢Δ৔߹ʹ ৹͕ࠪݫ͍͠AppleΛج४ʹͯ͠ɺ ΞϓϦԽ͕ෆద੾ͳέʔεΛߟ͑Δɻ ΞϓϦԽʹ޲͔ͳ͍έʔε Not suitable case
17. ࣮૷ฤ Start making app
18. App overview ΞϓϦ঺հ
19. Native WebView Native WebView Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ Native
20. WebͰ࣮ݱ͍ͯ͠Δػೳ •  ϝΠϯίϯςϯπͷදࣔશൠ •  αʔόʔ΁ͷσʔλΞΫηε Native WebView NativeͰ࣮ݱ͍ͯ͠Δػೳ •  ശͷ֎ଆʢφϏήʔγϣϯόʔ / λϒόʔʣ •  ΦϑϥΠϯঢ়ଶͷݕ஌ͱ௨஌ •  σόΠεػೳͷݺͼग़͠ ʢϝʔϥʔͷىಈɺSNS΁ͷϙετʣ •  Cookieͷอଘ / ഁغ •  UserAgentͷ௥Ճ •  ޿ࠂදࣔʢࠓճ͸ iAd Λར༻ʣ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
21. ωΠςΟϒ͔ΒɺWordPressϖʔδʹ࣮૷͞Εͨ JavaScriptϑΝϯΫγϣϯΛίʔϧ͍ͯ͠Δ෦෼ɻ ωΠςΟϒଆͰϝιου͕༻ҙ͞Ε͓ͯΓɺ؆୯ʹ ࣮ݱͰ͖Δɻ Native → Web(JS) Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
22. ϝχϡʔΞΠίϯΛΫϦοΫͨ࣌͠ͷಈ࡞ɻ CSS3ͷΞχϝʔγϣϯػೳΛར༻͢Δ͜ͱͰ ΞϓϦͬΆ͍ಈ͖Λԋग़͢Δ͜ͱ΋Մೳɻ ʢλοϓΠϕϯτݕ஌ͷΈJavaScriptΛ࢖༻ʣ Web͔ΒωΠςΟϒΛίʔϧ͍ͯ͠Δ෦෼ɻ λοϓ͢ΔͱɺσόΠεͷϝʔϥʔ͕ىಈ͢Δɻ ϦϯΫઌʹΧελϜεΩʔϜΛࢦఆ͢Δํ๏Ͱ࣮ݱɻ CSS3 Animation Web → Native ※ΧελϜURLεΩʔϜͱ͸ “mailto:” ΍ “tel:” ͳͲҰൠతʹ΋Α͘࢖ΘΕΔ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
23. 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
24. WebViewϕʔεͷΞϓϦͷ৔߹ɺʮωοτϫʔΫʹ઀ଓ͞Ε͍ͯͳ͍ͱར༻͕ग़ དྷͳ͍ʯ͜ͱΛ໌֬ʹ௨஌͠ɺΦϑϥΠϯঢ়ଶΛৗ࣌ݕ஌͢ΔΑ͏ʹ͢Δɻ ΦϑϥΠϯ࣌ͷߟྀ ࣮૷࣌ʹߟྀ͢΂͖఺ Native PCͱҧ͍ɺ௨৴؀ڥɾ଎౓͕සൟʹมԽ͢ΔͨΊɺը໘ભҠͳͲαʔόʔͱͷ ௨৴͕ൃੜ͢Δ࣌͸ɺϩʔμʔΛදࣔ͠ʮॲཧ͍ͯ͠ΔײʯΛࣔ͢Α͏ʹ͢Δɻ ϩʔμʔͷදࣔ Native URLͷϦΫΤετ࣌͸ωΠςΟϒଆͰΦϯϥΠϯঢ়گΛ֬ೝ͢Δ͕ɺWebଆͰ׬݁ ͢ΔAjax΍APIͳͲͷ௨৴ॲཧ࣌͸ɺΦϑϥΠϯ࣌ͷߟྀʢλΠϜΞ΢τ౳ͷΤϥʔ ϋϯυϦϯάʣΛ๨Εͣʹߦ͏ɻ Ajax΍APIίʔϧ࣌ͷߟྀ Web Attention
25. WebViewͰදࣔͨ͠ը໘ͷΩϟογϡ͸ͳ͔ͳ͔ফ͑ͳ͍ɻ ωΠςΟϒଆͰը໘ಡΈࠐΈલʹΫϦΞ͢ΔɺݩʑΩϟογϡͤ͞ͳ͍Α͏ʹ͢Δ ͳͲߟྀ͕ඞཁɻ ελΠϧγʔτ΍JSͷมߋ൓өͷͨΊʹ͸ɺಡΈࠐΈ࣌ʹόʔδϣϯ৘ใΛ෇Ճ͠ ͨURLʹ͢ΔͳͲͷରԠ͕ඞਢɻ Ωϟογϡ໰୊ Web Native Ϣʔβʔొ࿥ͯ͠ར༻͢ΔΞϓϦͷ৔߹ɺͦͷ··Ͱ͸ΞϓϦΛऴྃ͢ΔͱϩάΠ ϯঢ়ଶ͕อ࣋͞Εͳ͍ɻWordPressͷϩάΠϯঢ়ଶΛอ࣋͢ΔͨΊʹ͸ɺωΠςΟ ϒଆͰCookieͷอଘΛߦ͏ɻʢϩάΞ΢τ࣌ʹ͸ഁغ͢Δ͜ͱ΋๨Εͣʹʣ ʲࢀߟʳhttp://tech-gym.com/2011/10/objective-c/506.html ϩάΠϯঢ়ଶͷอ࣋ Native ࣮૷࣌ʹߟྀ͢΂͖఺ Attention
26. ͘͞ΒΠϯλʔωοτͷ ʮࠃ֎IPͷΞΫηε੍ݶʯʹ͍ͭͯ ͜ͷઃఆ͕༗ޮʹͳ͍ͬͯΔͱɺWordPressͷϩ άΠϯॲཧ෦෼Ͱɺࠃ֎͔ΒͷΞΫηε࣌ʹ404 Τϥʔ͕ൃੜ͠·͢ɻ ॳظઃఆ͕ʮ༗ޮʯͱͳ͍ͬͯΔͨΊɺ WordPressͰձһ੍αΠτʹ͍ͯ͠Δํ͸ɺແޮ ʹ͠·͠ΐ͏ɻ ※AppleͷϨϏϡΞʔ͸ࠃ֎Ͱ͢ʂʂ ͓·͚ Postscript