O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
石田 憲幸
Próximos SlideShares
Carregando em…5
×

RettyアプリのWeb/Native連携

Retty Tech Cafe #3 の資料です

  • Entre para ver os comentários

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 石田 憲幸

×