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
330
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
13k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.4k
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
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
380
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1.3k
ClaudeCodeにキレない技術
gtnao
1
870
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
Featured
See All Featured
Designing for Performance
lara
610
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How GitHub (no longer) Works
holman
314
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Faster Mobile Websites
deanohume
308
31k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Why Our Code Smells
bkeepers
PRO
337
57k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
184
16k
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