Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rettyアプリの
Web/Native連携
Retty Tech Cafe #3
Noriyuki Ishida
1
ごあいさつ
- 自己紹介 -
石田 憲幸 (27)
会社では のりP と呼ばれてます
前職: 赤いRで競馬やってました
2014年11月にRettyにJOIN
2
ごあいさつ
- Rettyの紹介 -
Rettyとは
「食を通じて世界中の人々をHappyに」
グルメサービスをやってます
Webとアプリでサービス展開中
3
ごあいさつ
- Rettyの紹介 -
最近のRetty
4
ごあいさつ
- 本日のお話 -
RettyのiOSアプリの特徴
随所でサーバ側のリソース(Web)とアプリ内のリソー
ス(Native)を連携しています
→ ここがRettyアプリで最も重要なところ
5
Rettyにおけるアプリ開発の考え方
- Rettyの開発スタイル -
RettyWebは日々更新されています
施策をやるときも、まずは小さくサクッと
うまくいきそうならもっとがんばる
→ PDCAいっぱいまわしたい
アプリもWebと同じくらい...
Rettyにおけるアプリ開発の考え方
- RettyiOSアプリの構成 -
そこでWebViewを多用した構成に
NativeView: 25枚くらい
Storyboard使ってるやつ
NativeWebView: 20枚くらい
APIをコール...
Rettyにおけるアプリ開発の考え方
- RettyiOSアプリのWebView -
RettyアプリのWebViewに求められること
アプリ申請を挟まなくてもある程度更新できる
WebViewとNativeViewを行ったり来たりできる
ただ...
RettyアプリのWeb/Native連携
- WebViewに必要な要件を満たす -
要件を満たすためにやっていること
URLSchemeを使ったViewの遷移
サーバ側JavaScriptの読み込み
JavaScriptとObjective...
RettyアプリのWeb/Native連携
- URLSchemeを使ったViewの遷移 -
遷移系のSegueは使わない
URLSchemeのmanagerを用意して、全て任せる
Viewの遷移はすべてURLSchemeを使って制御
例) r...
RettyアプリのWeb/Native連携
- URLSchemeを使ったViewの遷移 -
全ての遷移の方法に対してURLSchemeが割り
当てられる
どこからどこへでも好きなように遷移できる
11
NativeWeb
Native
Web
RettyアプリのWeb/Native連携
- サーバ側JavaScriptの読み込み -
WebViewを使った構成→JavaScriptが重要
コアライブラリ(アプリ内のJS)
ネイティブコールの仕組み
JS組み込み関数のOverride ...
RettyアプリのWeb/Native連携
- サーバ側JavaScriptの読み込み -
WebViewを使った構成→JavaScriptが重要
サーバ側のJS
Viewごとに動的に

読み込まれる
一時的な施策テスト用
13
RettyアプリのWeb/Native連携
- JavaScriptとObjective-Cのやりとり -
Obj-CからJSの関数を実行する
stringByEvaluatingJavaScriptFromString:
APIの返り値をwe...
RettyアプリのWeb/Native連携
- JavaScriptとObjective-Cのやりとり -
JSからObj-Cの関数を実行する
iframeに関数コール用のURLSchemeを渡す
window.alertでUIAlertVie...
RettyアプリのWeb/Native連携
- JavaScriptとObjective-Cのやりとり -
JSからObj-Cの関数を実行する
JSからObj-Cを実行したあと、またJSに戻りたい
stringByEvaluatingJavaS...
RettyアプリのWeb/Native連携
- JavaScriptとObjective-Cのやりとり -
JSからObj-Cの関数を実行する
jQuery.Deferredをwindowオブジェクトに保管
windowオブジェクトにjQuer...
まとめ
Rettyのアプリ開発では更新性が大事
こまめに変更したいところはどんどんサーバに逃がす
やっていること
URLSchemeで全てのViewを好きなように表示
サーバ側JSの読み込み
JavaScript Objective-Cの連携
...
ご清聴ありがとうございました!
19
Contact: noripi@retty.me
石田 憲幸
Upcoming SlideShare
Loading in …5
×

RettyアプリのWeb/Native連携

4,432 views

Published on

Retty Tech Cafe #3 の資料です

Published in: Technology
  • Be the first to comment

RettyアプリのWeb/Native連携

  1. 1. Rettyアプリの Web/Native連携 Retty Tech Cafe #3 Noriyuki Ishida 1
  2. 2. ごあいさつ - 自己紹介 - 石田 憲幸 (27) 会社では のりP と呼ばれてます 前職: 赤いRで競馬やってました 2014年11月にRettyにJOIN 2
  3. 3. ごあいさつ - Rettyの紹介 - Rettyとは 「食を通じて世界中の人々をHappyに」 グルメサービスをやってます Webとアプリでサービス展開中 3
  4. 4. ごあいさつ - Rettyの紹介 - 最近のRetty 4
  5. 5. ごあいさつ - 本日のお話 - RettyのiOSアプリの特徴 随所でサーバ側のリソース(Web)とアプリ内のリソー ス(Native)を連携しています → ここがRettyアプリで最も重要なところ 5
  6. 6. Rettyにおけるアプリ開発の考え方 - Rettyの開発スタイル - RettyWebは日々更新されています 施策をやるときも、まずは小さくサクッと うまくいきそうならもっとがんばる → PDCAいっぱいまわしたい アプリもWebと同じくらい更新したい でも申請∼公開まで1週間かかるのが課題 6
  7. 7. Rettyにおけるアプリ開発の考え方 - RettyiOSアプリの構成 - そこでWebViewを多用した構成に NativeView: 25枚くらい Storyboard使ってるやつ NativeWebView: 20枚くらい APIをコールしてアプリ内にあるテンプレートを展開 WebView: 20枚くらい? Webコンテンツをそのまま表示 7
  8. 8. Rettyにおけるアプリ開発の考え方 - RettyiOSアプリのWebView - RettyアプリのWebViewに求められること アプリ申請を挟まなくてもある程度更新できる WebViewとNativeViewを行ったり来たりできる ただのWebViewだけど、アプリっぽく
 例) window.alert 8
  9. 9. RettyアプリのWeb/Native連携 - WebViewに必要な要件を満たす - 要件を満たすためにやっていること URLSchemeを使ったViewの遷移 サーバ側JavaScriptの読み込み JavaScriptとObjective-Cのやりとり JavaScriptでObjective-Cのコードを実行する Objective-CからJavaScriptのコードを実行する 9
  10. 10. RettyアプリのWeb/Native連携 - URLSchemeを使ったViewの遷移 - 遷移系のSegueは使わない URLSchemeのmanagerを用意して、全て任せる Viewの遷移はすべてURLSchemeを使って制御 例) retty://?page=hoge&create_view=push&... → 遷移先、開き方、その他必要なパラメータを含める 10
  11. 11. RettyアプリのWeb/Native連携 - URLSchemeを使ったViewの遷移 - 全ての遷移の方法に対してURLSchemeが割り 当てられる どこからどこへでも好きなように遷移できる 11 NativeWeb Native Web
  12. 12. RettyアプリのWeb/Native連携 - サーバ側JavaScriptの読み込み - WebViewを使った構成→JavaScriptが重要 コアライブラリ(アプリ内のJS) ネイティブコールの仕組み JS組み込み関数のOverride (window.alertなど) サーバ側のJSを動的にロードする Rettyでよく使われる関数(行きたい、行ったなど) 12
  13. 13. RettyアプリのWeb/Native連携 - サーバ側JavaScriptの読み込み - WebViewを使った構成→JavaScriptが重要 サーバ側のJS Viewごとに動的に
 読み込まれる 一時的な施策テスト用 13
  14. 14. RettyアプリのWeb/Native連携 - JavaScriptとObjective-Cのやりとり - Obj-CからJSの関数を実行する stringByEvaluatingJavaScriptFromString: APIの返り値をwebViewに渡したり、JS内でよく使う 定数を宣言したりする $(document).trigger()を使ってJSイベントを追加する 例) scrollViewDidScroll: で rettyScrollViewDidScroll イベ ントを発火させて、JS側でのDOM制御に使う 14
  15. 15. RettyアプリのWeb/Native連携 - JavaScriptとObjective-Cのやりとり - JSからObj-Cの関数を実行する iframeに関数コール用のURLSchemeを渡す window.alertでUIAlertViewが出るように ページ遷移やpopup表示も 15
  16. 16. RettyアプリのWeb/Native連携 - JavaScriptとObjective-Cのやりとり - JSからObj-Cの関数を実行する JSからObj-Cを実行したあと、またJSに戻りたい stringByEvaluatingJavaScriptFromString:を使えば できるが、thisとか変数の値を引き継げない → jQuery.Deferredをwindowオブジェクトに保管して無理 やり引き継ぐ 16
  17. 17. RettyアプリのWeb/Native連携 - JavaScriptとObjective-Cのやりとり - JSからObj-Cの関数を実行する jQuery.Deferredをwindowオブジェクトに保管 windowオブジェクトにjQuery.Deferredを保存 終わったらObj-CからJSをコールする Obj-Cの結果にあわせてjQuery.Deferredをpromise/ rejectする → thenブロックとかdoneブロックが実行されます 17
  18. 18. まとめ Rettyのアプリ開発では更新性が大事 こまめに変更したいところはどんどんサーバに逃がす やっていること URLSchemeで全てのViewを好きなように表示 サーバ側JSの読み込み JavaScript Objective-Cの連携 → 今やJavaScriptで色々できるようになってます 18
  19. 19. ご清聴ありがとうございました! 19 Contact: noripi@retty.me 石田 憲幸

×