Recommended
More Related Content
What's hot
What's hot (13)
Similar to CodePushとReact Nativeで緊急OTAリリース！了解！
Similar to CodePushとReact Nativeで緊急OTAリリース！了解！ (20)
Recently uploaded
Recently uploaded (8)
CodePushとReact Nativeで緊急OTAリリース！了解！
- 3. 自己紹介 岩井雅幸@myb モバイル・アプリケーション・エンジニア at Unity Technologies Japan 以前はWebデザイン・開発、Flashコンテ ンツ制作、iOSアプリ、ゲーム制作など 著書に「uGUIではじめるUnityUIデザイン の教科書」
- 4. 自己紹介 岩井雅幸@myb モバイル・アプリケーション・エンジニア at Unity Technologies Japan 以前はWebデザイン・開発、Flashコンテ ンツ制作、iOSアプリ、ゲーム制作など 著書に「uGUIではじめるUnityUIデザイン の教科書」 🆕
- 6. Unity Meetup • Unityユーザーのためのイベントアプリ イベント検索、タイムテーブル、参加申し 込み、チェックイン、アンケート回答機能 • フルReact Native 導入の経緯は昨年のiOSDC 2017 Reject Conf での発表を参照 https://www.slideshare.net/MasayukiIwai/ react-native-110226150
- 7. トラブルが…
- 8. 2018年5月
- 10. Unite Tokyo 2018での出来事 • 毎年開催しているUnity公式のカンファレンス • 今年は5月に3日間開催、2000人以上参加 • このイベントに合わせてチャット機能を実装 • 海外チームが開発しているAPIを利用する必要があり、 連携を依頼していたがギリギリになってしまった • 前バージョンでパフォーマンスが悪かったのでリファクタリング
- 11. Unite Tokyo 2018での出来事 • イベント3日前に新バージョン完成、申請→翌朝審査通過😅 • イベント前日の夜、新機能の表示系バグを発見、修正→翌未明審査通過😨 • イベント初日の夜、重大なバグを発見😱 →特急審査を依頼して4時間で審査通過😵
- 12. 正直しんどかった😵
- 16. 後悔先に立たず
- 17. 時すでにお🍣
- 19. の前に
- 20. ざっくりReact Native
- 21. ざっくりReact Native • Reactベースでネイティブアプリ開発のためのフレームワーク • React由来のコンポーネントベースで、reduxとも親和性が高い • JavaScript（JSX）で記述、JavaScriptCore上で動作 https://facebook.github.io/react-native/
- 22. ざっくりReact Native UIKitなど React Native Library JavaScriptCore React JS アプリケーションコード React Native JS Library
- 23. ざっくりReact Native UIKitなど React Native Library JavaScriptCore React JS アプリケーションコード React Native JS Library jsbundle
- 25. What is CodePush? • Microsoft製のクラウドサービス • React NativeやCordovaのJSコードをホットパッチング可能 • ウェブ、SDK、CLIが提供されている • 以前は独立したサービス →現在はVisual Studio App Centerに統合 https://github.com/Microsoft/code-push
- 26. What is CodePush? UIKitなど React Native Library JavaScriptCore React JS アプリケーションコード React Native JS Library jsbundle ここの部分 を配信🚀
- 27. Visual Studio App Center • CodePushの他にも CI、テスト、Analytics、 Push通知など多機能 • 無料から利用可能 (ビルド回数や時間に制限有) • CodePushは無料で無制限に 利用可能 https://appcenter.ms
- 28. Visual Studio App Center • CodePushの他にも CI、テスト、Analytics、 Push通知など多機能 • 無料から利用可能 (ビルド回数や時間に制限有) • CodePushは無料で無制限に 利用可能 https://appcenter.ms
- 29. Fantastic🤩
- 30. でも…
- 32. 終わりなきリジェクト との戦い💥
- 34. Appleのガイドラインを振り返る 2.7 Apps that download code in any way or form will be rejected 2.8 Apps that install or launch other executable code will be rejected App Store Review Guidelines (2015)
- 35. Appleのガイドラインを振り返る 2.7 Apps that download code in any way or form will be rejected 2.8 Apps that install or launch other executable code will be rejected App Store Review Guidelines (2015)
- 36. Appleのガイドラインを振り返る 2.5.2 Apps should be self-contained in their bundles, and may not read or write data outside the designated container area, nor may they download, install, or execute code which introduces or changes features or functionality of the app, including other apps. (抜粋) App Store Review Guidelines (2016)
- 37. Appleのガイドラインを振り返る 2.5.2 Apps should be self-contained in their bundles, and may not read or write data outside the designated container area, nor may they download, install, or execute code which introduces or changes features or functionality of the app, including other apps. (抜粋) App Store Review Guidelines (2016)
- 38. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
- 39. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
- 40. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
- 41. Appleのガイドラインを振り返る 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. Apple Developer Program License Agreement (2016)
- 42. Appleのガイドラインを振り返る • アプリは、機能を変えるようなコードをダウンロード、インストール、 実行してはならない • インタープリテッドコードは、すべてのスクリプトがアプリに含まれて いる必要がある • 唯一の例外は、WebKitやJavaScriptCoreによってダウンロード、実行 される場合のみ
- 44. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
- 45. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
- 46. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
- 47. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
- 48. 現在のAppleのガイドライン 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may be downloaded to an Application but only so long as such code: (a) does not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store, (b) does not create a store or storefront for other code or applications, and (c) does not bypass signing, sandbox, or other security features of the OS. Apple Developer Program License Agreement (Current)
- 49. 現在のAppleのガイドライン • App Storeに申請されたのと違う機能を提供して、アプリの主目的を 変えない • 他のコードやアプリのストアやストアフロントを作成しない • 署名やサンドボックスその他OSのセキュリティ機能を迂回しない →以上の条件を満たして入れば、実行可能なコードをダウンロードする ことはOK
- 51. 同様のサービスは？🤔
- 52. 同様のサービスは？🤔 • Rollout.io、JSPatch →2017年3月、これらを使用していた開発者にAppleから警告 Apple Developer Program License Agreementと App Store Review Guidelinesに抵触 →リジェクト対象に😢 https://forums.developer.apple.com/thread/73640
- 53. 同様のサービスは？🤔 “This includes any code which passes arbitrary parameters to dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
- 54. 同様のサービスは？🤔 “This includes any code which passes arbitrary parameters to dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
- 55. 同様のサービスは？🤔 “This includes any code which passes arbitrary parameters to dynamic methods such as dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations(), and running remote scripts in order to change app behavior or call SPI, based on the contents of the downloaded script. Even if the remote resource is not intentionally malicious, it could easily be hijacked via a Man In The Middle (MiTM) attack, which can pose a serious security vulnerability to users of your app.” https://forums.developer.apple.com/thread/73640
- 56. セキュリティの 観点からダメ🙅
- 57. ホットパッチング自体は合法🙌
- 58. CodePushを使ってみよう
- 59. CodePushを使ってみよう 1. App Centerでアプリを登録する 2. App Center CLIをインストール 3. React Native Client SDKをインストール 4. アプリケーションコードの修正
- 71. 2. App Center CLIを インストール
- 72. 2. App Center CLIをインストール $ brew install node $ npm install -g appcenter-cli
- 73. 2. App Center CLIをインストール $ appcenter login Opening your browser... ? Visit https://appcenter.ms/cli-login?hostname=xxx.local and enter the code: ? Access code from browser: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Logged in as xxxxxxxx
- 74. 2. App Center CLIをインストール $ appcenter codepush deployment list -a <ORG>/<APP> !""""""""""""#"""""""""""""""""""""""""""""""""""""""$ % Name % Key % &""""""""""""'"""""""""""""""""""""""""""""""""""""""( % Staging % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx % &""""""""""""'"""""""""""""""""""""""""""""""""""""""( % Production % xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx % )""""""""""""*"""""""""""""""""""""""""""""""""""""""+
- 75. 3. React Native Client SDKを インストール
- 76. 3. React Native Client SDKをインストール $ cd /path/to/project $ npm install --save react-native-code-push
- 77. 3. React Native Client SDKをインストール $ react-native link react-native-code-push ... ? What is your CodePush deployment key for Android (hit <ENTER> to ignore) ... ? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)
- 78. 4.アプリケーションコードの修正
- 79. 4. アプリケーションコードの修正 App.js export default class App extends React.Component<Props, State> { // ... }
- 80. 4. アプリケーションコードの修正 App.js import codePush from ‘react-native-code-push’ class App extends React.Component<Props, State> { // ... } App = codePush(App) export default App
- 81. 4. アプリケーションコードの修正 App.js import codePush from ‘react-native-code-push’ class App extends React.Component<Props, State> { // ... } App = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME, )(App) export default App
- 82. That’s it!
- 83. CodePushで配信してみよう
- 84. CodePushで配信してみよう $ appcenter codepush release-react -a <ORG>/<APP> -d Staging
- 86. まとめ • CodePushの導入は簡単！デプロイも簡単！ • Appleのガイドライン的にもOKなので安心して使える！ （ガイドラインに従って適切に使いましょう） • JavaScript部分のみの配信なので、適用できるところは限られる （既存アプリへの導入も可能）
- 87. Thank you!