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. Introduction Kiharu Sasaki Web Designer System Engineer https://www.facebook.com/ kiharu.sasaki @bump_of_kiharu

    http://bump.hatenablog.com/ ࣗݾ঺հ ϑϦʔϥϯεͰ΢ΣϒσβΠϯ΍ γεςϜ։ൃͷ͓࢓ࣄΛ͍ͯ͠·͢ɻ
  2. Site overview ιʔγϟϧϩάΠϯ ධՁ ΫΠζͷ౤ߘ ΫΠζͷճ౴ Facebook / Twitter ΞΧ΢ϯτͰͷձһొ࿥ɾ

    ϩάΠϯ ౤ߘ͞ΕͨΫΠζʹରͯ͠ ʮ೉қ౓ʯʮ໘ന͞ʯΛධՁ ΫΠζը૾ͷ౤ߘɺ ώϯτ΍ճ౴ظݶͷઃఆͳͲ •  ճ౴ऀϥϯΩϯά •  ਓؾΫΠζϥϯΩϯά ਖ਼ղ͢Δ͜ͱͰϙΠϯτ֫ಘ ਖ਼ղॱʹΑͬͯ֫ಘϙΠϯτ ͕มಈ ि1ճͷϝϧϚΨൃߦ NAZOPLAͷओͳػೳ ϥϯΩϯά ϝʔϧϚΨδϯ αΠτͷ঺հ
  3. 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ϲ݄ αΠτͷ঺հ
  4. Point of difference Webͱͷҧ͍ ΦϑϥΠϯͰ΋ ར༻Մೳ ϞόΠϧಛ༗ͷػೳ ʢGPS / ܏͖ɾۙ઀ηϯαʔͳͲʣ

    ϚωλΠζ ʢ༗ྉެ։ɾΞϓϦ಺՝ۚʣ WebΫϦΤΠλʔ͕ɺ͍ͭݟམͱ͕ͪ͠ͳ ϞόΠϧΞϓϦͱWebΞϓϦͷେ͖ͳҧ͍ɻ
  5. iOS / Android / WindowMobile ͳͲɺϓϥοτϑΥʔϜผʹ։ൃ͕ඞཁɻ(※) ͞Βʹόʔδϣϯผʹܧଓͨ͠Τϯϋϯε΋ඞཁɻ ʢ※ϋΠϒϦουΞϓϦͱ͍͏બ୒ࢶ΋͋Δʣ ϢʔβʔχʔζΛ೺ѲͰ͖Δͱ͍͏ྑ͍໘΋͋Γ·͕͢… ΞϓϦͷެ։ɾߋ৽ʹ͸৹͕ࠪඞཁɻ

    ·ͨɺόʔδϣϯΞοϓͷ൓ө͸Ϣʔβʔ࣍ୈͳͷͰɺมߋΛ׬શʹίϯτϩ ʔϧग़དྷͳ͍ɻ ެ։ɾߋ৽λΠϛϯά ։ൃίετ ϢʔβʔʹΑΔධՁ੍౓ ΞϓϦԽͷσϝϦοτ Demerit
  6. ϋΠϒϦουΞϓϦ ΞϓϦԽ͢Δํ๏ ωΠςΟϒίʔυʹΑΔ։ൃ 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
  7. ϋΠϒϦου ΞϓϦ •  σόΠεͷػೳΛ࠷େݶʹར༻Մೳ •  ॲཧ଎౓͕ૣ͍ •  ϫϯιʔεɾϚϧνσόΠεͷͨΊอ कੑ͕ྑ͍ • 

    ֶशίετ͕௿͍ •  ϓϥοτϑΥʔϜ͝ͱͷ։ൃ͕ඞཁͳ ͨΊɺֶशίετɾ։ൃίετ͕ߴ͍ •  OS͝ͱʹҟͳΔΤϯϋϯε͕ඞཁͳͨ Ίอकੑ͕ѱ͍ •  ॲཧ଎౓΍ϨϯμϦϯάͳͲͰωΠς ΟϒʹྼΔ •  ϑϨʔϜϫʔΫʹΑͬͯ͸ɺར༻Ͱ͖ ͳ͍σόΠεͷػೳ΍੍ݶ͕͋Δ ϝϦοτ σϝϦοτ ϝϦοτ σϝϦοτ ΞϓϦԽ͢Δํ๏ Development ωΠςΟϒ ΞϓϦ
  8. WebViewϕʔεΞϓϦ •  ΞϓϦ಺ʹϒϥ΢βΛຒΊࠐΜͰදࣔͤ͞Δ •  ϝΠϯίϯςϯπ͸ΞϓϦ಺ϒϥ΢βͰWebϖʔδΛදࣔ •  σόΠεػೳͷݺͼग़͠ͳͲɺҰ෦ωΠςΟϒͰ࣮૷ WebView-based app • 

    WebView෦෼͸ଈ࣌൓өͰ͖Δɻ ৹ࠪ΋ෆཁͳͷͰɺߋ৽ͷ൓өͱλΠ ϛϯάΛ׬શʹίϯτϩʔϧͰ͖Δ •  ωΠςΟϒͰ͸දݱग़དྷͳ͍ɺࡉ͔͍ σβΠϯͷ࣮ݱ͕ՄೳʹͳΔ ϝϦοτ ʲࢀߟʳhttp://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html ୈ3ͷબ୒ࢶ: WebView •  ΦϑϥΠϯͰ͸࢖͑ͳ͍ •  Appleͷ৹͕ࠪݫ͘͠ͳΔ ʢ͔΋͠Εͳ͍ʣ σϝϦοτ ΫοΫύουΞϓϦʢAndoroid൛ʣͳͲ࠷ۙ͸ଟ͍
  9. WebͰ࣮ݱ͍ͯ͠Δػೳ •  ϝΠϯίϯςϯπͷදࣔશൠ •  αʔόʔ΁ͷσʔλΞΫηε Native WebView NativeͰ࣮ݱ͍ͯ͠Δػೳ •  ശͷ֎ଆʢφϏήʔγϣϯόʔ

    / λϒόʔʣ •  ΦϑϥΠϯঢ়ଶͷݕ஌ͱ௨஌ •  σόΠεػೳͷݺͼग़͠ ʢϝʔϥʔͷىಈɺSNS΁ͷϙετʣ •  Cookieͷอଘ / ഁغ •  UserAgentͷ௥Ճ •  ޿ࠂදࣔʢࠓճ͸ iAd Λར༻ʣ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
  10. 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