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.6k
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
320
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
9.1k
Other Decks in Technology
See All in Technology
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
170
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
340
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
550
型システムを知りたい人のための型検査器作成入門
mame
15
3.8k
産業機械をElixirで制御する
kikuyuta
0
170
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
160
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
330
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.4k
IIWレポートからみるID業界で話題のMCP
fujie
0
210
“プロダクトを好きになれるか“も QAエンジニア転職の大事な判断基準だと思ったの
tomodakengo
0
140
Tenstorrent 開発者プログラム
tenstorrent_japan
0
310
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
How GitHub (no longer) Works
holman
314
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
We Have a Design System, Now What?
morganepeng
52
7.6k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cult of Friendly URLs
andyhume
79
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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