Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kiharu sasaki
February 09, 2015

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

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

kiharu sasaki

February 09, 2015
Tweet

More Decks by kiharu sasaki

Other Decks in Technology

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