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の味方!スタートアップのアジャイルを加速するADR
kawauso
3
390
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
560
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
540
.NET開発者のためのAzureの概要
tomokusaba
0
230
Claude Code x Androidアプリ 開発
kgmyshin
1
590
見てわかるテスト駆動開発
recruitengineers
PRO
5
470
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
240
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
人を動かすことについて考える
ichimichi
2
330
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.5k
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
140
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
620
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Git: the NoSQL Database
bkeepers
PRO
431
65k
For a Future-Friendly Web
brad_frost
179
9.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.8k
Building an army of robots
kneath
306
46k
Building Applications with DynamoDB
mza
96
6.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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