Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPress サイトを iPhone アプリにしてみた
Search
kiharu sasaki
February 09, 2015
Technology
6
1.5k
WordPress サイトを iPhone アプリにしてみた
WordBench TOKYO の2014年7月に発表した内容です
kiharu sasaki
February 09, 2015
Tweet
Share
More Decks by kiharu sasaki
See All by kiharu sasaki
マルチクラウドナイト/multicloud-night-panel-discussion
kiharu
1
310
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
13k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.3k
15分で分かったつもりになるAngular 2 概要/angular2
kiharu
23
20k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
9k
Other Decks in Technology
See All in Technology
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
670
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
300
Pwned Labsのすゝめ
ken5scal
2
440
クラウド食堂とは?
hiyanger
0
120
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
290
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
JavaにおけるNull非許容性
skrb
2
2.6k
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
Охота на косуль у древних
ashapiro
0
110
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Visualization
eitanlees
146
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Writing Fast Ruby
sferik
628
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Your Own Lightsaber
phodgson
104
6.2k
Transcript
2014.07.09 WordPressαΠτΛiPhoneΞϓϦʹͯ͠Έͨ ɹ―ߏஙࣄྫͷհ― Kiharu Sasaki
Introduction Kiharu Sasaki Web Designer System Engineer https://www.facebook.com/ kiharu.sasaki @bump_of_kiharu
http://bump.hatenablog.com/ ࣗݾհ ϑϦʔϥϯεͰΣϒσβΠϯ γεςϜ։ൃͷ͓ࣄΛ͍ͯ͠·͢ɻ
Overview ࠓճ͓͢Δ༰ WordPressͰߏஙͨ͠ NAZOPLA(Ṗϓϥ)ͱ͍͏ ΫΠζͷϙʔλϧαΠτΛ iPhoneΞϓϦʹ͠·ͨ͠ɻ ΞϓϦԽͨ͠ࡍͷ৭ʑΛ ࠓճ͓͠·͢ɻ NAZOPLA –
Ṗϓϥ – http://nazopla.jp
ܦҢഎܠ How it started ?
Site overview ࣗ࡞ΫΠζΛ1ຕͷը૾ʹͯ͠ߘ͢Δɺը૾ ߘαΠτɻ ߘ͞ΕͨΫΠζʹରͯ͠ɺճͨ͠Γɺώ ϯτΛݟͨΓɺධՁΛ͚ͯϥϯΩϯάΛָ ͠Ή͜ͱ͕ग़དྷ·͢ɻ NAZOPLA : ΫΠζΛߘͨ͠ΓɺΫΠζʹճ
Ͱ͖ΔṖͷϓϥοτϑΥʔϜɻ αΠτͷհ
Site overview ιʔγϟϧϩάΠϯ ධՁ ΫΠζͷߘ ΫΠζͷճ Facebook / Twitter ΞΧϯτͰͷձһొɾ
ϩάΠϯ ߘ͞ΕͨΫΠζʹରͯ͠ ʮқʯʮ໘ന͞ʯΛධՁ ΫΠζը૾ͷߘɺ ώϯτճظݶͷઃఆͳͲ • ճऀϥϯΩϯά • ਓؾΫΠζϥϯΩϯά ਖ਼ղ͢Δ͜ͱͰϙΠϯτ֫ಘ ਖ਼ղॱʹΑͬͯ֫ಘϙΠϯτ ͕มಈ ि1ճͷϝϧϚΨൃߦ NAZOPLAͷओͳػೳ ϥϯΩϯά ϝʔϧϚΨδϯ αΠτͷհ
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ϲ݄ αΠτͷհ
Conclusion εϚϗΞϓϦԽͷݕ౼ ϞόΠϧ͔ΒͷΞΫηε͕5ׂΛΊΔ͕ɺϞόΠϧʹ࠷దԽ ͨ͠ϖʔδද͕ࣔग़དྷ͍ͯͳ͍ɻ ϖʔδ͕େͰɺϨεϙϯγϒରԠʹ͕͔͔Δɻ ϞόΠϧͷಛੜΛ׆༻ͨ͠৽ͨͳར༻๏Λࡧ͠ɺαʔϏεͷ ֦ॆΛ͔Γ͍ͨɻ What is the
problem? ϞόΠϧରԠͷ՝
As for mobile app ΞϓϦԽʹ͍ͭͯ
Point of difference Webͱͷҧ͍ ΦϑϥΠϯͰ ར༻Մೳ ϞόΠϧಛ༗ͷػೳ ʢGPS / ͖ɾۙηϯαʔͳͲʣ
ϚωλΠζ ʢ༗ྉެ։ɾΞϓϦ՝ۚʣ WebΫϦΤΠλʔ͕ɺ͍ͭݟམͱ͕ͪ͠ͳ ϞόΠϧΞϓϦͱWebΞϓϦͷେ͖ͳҧ͍ɻ
ϓογϡ௨Λར༻ͯ͠ɺϢʔβʔͷೳಈతΞΫ ηεΛଅͤΔ ϞόΠϧʹಛԽͨ͠ϢʔβϏϦςΟΛఏڙ͢Δ͜ͱ ͰUXΛߴΊɺճ༡ɾ࿈ଓར༻࣌ؒͷ্ɺα ʔϏεࣗମͷܧଓར༻͕ݟࠐΊΔ ݕࡧΤϯδϯ͔Β͚ͩͰͳ͘ɺApp Store / Google Play͔Βͷྲྀೖ͕ظͰ͖Δ
৽نϢʔβʔͷ֫ಘ ΞΫηεසͷ্ ܧଓར༻ͷଅਐ ΞϓϦԽͷϝϦοτ Merit
iOS / Android / WindowMobile ͳͲɺϓϥοτϑΥʔϜผʹ։ൃ͕ඞཁɻ(※) ͞Βʹόʔδϣϯผʹܧଓͨ͠Τϯϋϯεඞཁɻ ʢ※ϋΠϒϦουΞϓϦͱ͍͏બࢶ͋Δʣ ϢʔβʔχʔζΛѲͰ͖Δͱ͍͏ྑ͍໘͋Γ·͕͢… ΞϓϦͷެ։ɾߋ৽ʹ৹͕ࠪඞཁɻ
·ͨɺόʔδϣϯΞοϓͷөϢʔβʔ࣍ୈͳͷͰɺมߋΛશʹίϯτϩ ʔϧग़དྷͳ͍ɻ ެ։ɾߋ৽λΠϛϯά ։ൃίετ ϢʔβʔʹΑΔධՁ੍ ΞϓϦԽͷσϝϦοτ Demerit
ϋΠϒϦουΞϓϦ ΞϓϦԽ͢Δํ๏ ωΠςΟϒίʔυʹΑΔ։ൃ 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
ϋΠϒϦου ΞϓϦ • σόΠεͷػೳΛ࠷େݶʹར༻Մೳ • ॲཧ͕ૣ͍ • ϫϯιʔεɾϚϧνσόΠεͷͨΊอ कੑ͕ྑ͍ •
ֶशίετ͕͍ • ϓϥοτϑΥʔϜ͝ͱͷ։ൃ͕ඞཁͳ ͨΊɺֶशίετɾ։ൃίετ͕ߴ͍ • OS͝ͱʹҟͳΔΤϯϋϯε͕ඞཁͳͨ Ίอकੑ͕ѱ͍ • ॲཧϨϯμϦϯάͳͲͰωΠς ΟϒʹྼΔ • ϑϨʔϜϫʔΫʹΑͬͯɺར༻Ͱ͖ ͳ͍σόΠεͷػೳ੍ݶ͕͋Δ ϝϦοτ σϝϦοτ ϝϦοτ σϝϦοτ ΞϓϦԽ͢Δํ๏ Development ωΠςΟϒ ΞϓϦ
WebViewϕʔεΞϓϦ • ΞϓϦʹϒϥβΛຒΊࠐΜͰදࣔͤ͞Δ • ϝΠϯίϯςϯπΞϓϦϒϥβͰWebϖʔδΛදࣔ • σόΠεػೳͷݺͼग़͠ͳͲɺҰ෦ωΠςΟϒͰ࣮ WebView-based app •
WebView෦ଈ࣌өͰ͖Δɻ ৹ࠪෆཁͳͷͰɺߋ৽ͷөͱλΠ ϛϯάΛશʹίϯτϩʔϧͰ͖Δ • ωΠςΟϒͰදݱग़དྷͳ͍ɺࡉ͔͍ σβΠϯͷ࣮ݱ͕ՄೳʹͳΔ ϝϦοτ ʲࢀߟʳhttp://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html ୈ3ͷબࢶ: WebView • ΦϑϥΠϯͰ͑ͳ͍ • Appleͷ৹͕ࠪݫ͘͠ͳΔ ʢ͔͠Εͳ͍ʣ σϝϦοτ ΫοΫύουΞϓϦʢAndoroid൛ʣͳͲ࠷ۙଟ͍
iOSͬΆ͘ͳ͍ΞϓϦ ͦΕΣϒͰ͍͍͡ΌΜɺ ͳΞϓϦ ༗༻ੑಠࣗੑ͕ͳ͍ΞϓϦ ୯ʹΣϒαΠτΛόϯυϧͨ͠ͷ σόΠεͷػೳΛ׆͔͍ͯ͠ͳ͍ͷ ػೳ͕୯७ɺίϯςϯπ͕গͳ͍ͷ Ӭଓͨ͠ՁΛఏڙ͠ͳ͍ͱஅ͞ΕΔͷ UI͕ΨΠυϥΠϯʹै͍ͬͯͳ͍ͷ ʢϘλϯͷߴ͞ͳͲࡉ͔͘ࢦఆ͋Γʣ
WebViewϕʔεͷΞϓϦʹ͢Δ߹ʹ ৹͕ࠪݫ͍͠AppleΛج४ʹͯ͠ɺ ΞϓϦԽ͕ෆదͳέʔεΛߟ͑Δɻ ΞϓϦԽʹ͔ͳ͍έʔε Not suitable case
࣮ฤ Start making app
App overview ΞϓϦհ
Native WebView Native WebView Native / Webview ωΠςΟϒͷൣғ / Webͷ
ൣғ Native
WebͰ࣮ݱ͍ͯ͠Δػೳ • ϝΠϯίϯςϯπͷදࣔશൠ • αʔόʔͷσʔλΞΫηε Native WebView NativeͰ࣮ݱ͍ͯ͠Δػೳ • ശͷ֎ଆʢφϏήʔγϣϯόʔ
/ λϒόʔʣ • ΦϑϥΠϯঢ়ଶͷݕͱ௨ • σόΠεػೳͷݺͼग़͠ ʢϝʔϥʔͷىಈɺSNSͷϙετʣ • Cookieͷอଘ / ഁغ • UserAgentͷՃ • ࠂදࣔʢࠓճ iAd Λར༻ʣ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
ωΠςΟϒ͔ΒɺWordPressϖʔδʹ࣮͞Εͨ JavaScriptϑΝϯΫγϣϯΛίʔϧ͍ͯ͠Δ෦ɻ ωΠςΟϒଆͰϝιου͕༻ҙ͞Ε͓ͯΓɺ؆୯ʹ ࣮ݱͰ͖Δɻ Native → Web(JS) Native / Webview
ωΠςΟϒͷൣғ / Webͷ ൣғ
ϝχϡʔΞΠίϯΛΫϦοΫͨ࣌͠ͷಈ࡞ɻ CSS3ͷΞχϝʔγϣϯػೳΛར༻͢Δ͜ͱͰ ΞϓϦͬΆ͍ಈ͖Λԋग़͢Δ͜ͱՄೳɻ ʢλοϓΠϕϯτݕͷΈJavaScriptΛ༻ʣ Web͔ΒωΠςΟϒΛίʔϧ͍ͯ͠Δ෦ɻ λοϓ͢ΔͱɺσόΠεͷϝʔϥʔ͕ىಈ͢Δɻ ϦϯΫઌʹΧελϜεΩʔϜΛࢦఆ͢Δํ๏Ͱ࣮ݱɻ CSS3 Animation Web
→ Native ※ΧελϜURLεΩʔϜͱ “mailto:” “tel:” ͳͲҰൠతʹΑ͘ΘΕΔ Native / Webview ωΠςΟϒͷൣғ / Webͷ ൣғ
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
WebViewϕʔεͷΞϓϦͷ߹ɺʮωοτϫʔΫʹଓ͞Ε͍ͯͳ͍ͱར༻͕ग़ དྷͳ͍ʯ͜ͱΛ໌֬ʹ௨͠ɺΦϑϥΠϯঢ়ଶΛৗ࣌ݕ͢ΔΑ͏ʹ͢Δɻ ΦϑϥΠϯ࣌ͷߟྀ ࣮࣌ʹߟྀ͖͢ Native PCͱҧ͍ɺ௨৴ڥɾ͕සൟʹมԽ͢ΔͨΊɺը໘ભҠͳͲαʔόʔͱͷ ௨৴͕ൃੜ͢Δ࣌ɺϩʔμʔΛදࣔ͠ʮॲཧ͍ͯ͠ΔײʯΛࣔ͢Α͏ʹ͢Δɻ ϩʔμʔͷදࣔ Native URLͷϦΫΤετ࣌ωΠςΟϒଆͰΦϯϥΠϯঢ়گΛ֬ೝ͢Δ͕ɺWebଆͰ݁
͢ΔAjaxAPIͳͲͷ௨৴ॲཧ࣌ɺΦϑϥΠϯ࣌ͷߟྀʢλΠϜΞτͷΤϥʔ ϋϯυϦϯάʣΛΕͣʹߦ͏ɻ AjaxAPIίʔϧ࣌ͷߟྀ Web Attention
WebViewͰදࣔͨ͠ը໘ͷΩϟογϡͳ͔ͳ͔ফ͑ͳ͍ɻ ωΠςΟϒଆͰը໘ಡΈࠐΈલʹΫϦΞ͢ΔɺݩʑΩϟογϡͤ͞ͳ͍Α͏ʹ͢Δ ͳͲߟྀ͕ඞཁɻ ελΠϧγʔτJSͷมߋөͷͨΊʹɺಡΈࠐΈ࣌ʹόʔδϣϯใΛՃ͠ ͨURLʹ͢ΔͳͲͷରԠ͕ඞਢɻ Ωϟογϡ Web Native Ϣʔβʔొͯ͠ར༻͢ΔΞϓϦͷ߹ɺͦͷ··ͰΞϓϦΛऴྃ͢ΔͱϩάΠ ϯঢ়ଶ͕อ࣋͞Εͳ͍ɻWordPressͷϩάΠϯঢ়ଶΛอ࣋͢ΔͨΊʹɺωΠςΟ
ϒଆͰCookieͷอଘΛߦ͏ɻʢϩάΞτ࣌ʹഁغ͢Δ͜ͱΕͣʹʣ ʲࢀߟʳhttp://tech-gym.com/2011/10/objective-c/506.html ϩάΠϯঢ়ଶͷอ࣋ Native ࣮࣌ʹߟྀ͖͢ Attention
͘͞ΒΠϯλʔωοτͷ ʮࠃ֎IPͷΞΫηε੍ݶʯʹ͍ͭͯ ͜ͷઃఆ͕༗ޮʹͳ͍ͬͯΔͱɺWordPressͷϩ άΠϯॲཧ෦Ͱɺࠃ֎͔ΒͷΞΫηε࣌ʹ404 Τϥʔ͕ൃੜ͠·͢ɻ ॳظઃఆ͕ʮ༗ޮʯͱͳ͍ͬͯΔͨΊɺ WordPressͰձһ੍αΠτʹ͍ͯ͠Δํɺແޮ ʹ͠·͠ΐ͏ɻ ※AppleͷϨϏϡΞʔࠃ֎Ͱ͢ʂʂ ͓·͚
Postscript