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
290
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
12k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
kiharu
9
5.2k
15分で分かったつもりになるAngular 2 概要/angular2
kiharu
23
20k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
8.8k
Other Decks in Technology
See All in Technology
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
エンジニア向け会社紹介資料
caddi_eng
14
230k
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
The Invisible Side of Design
smashingmag
294
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Designing Experiences People Love
moore
136
23k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Facilitating Awesome Meetings
lara
46
5.8k
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