新卒一年目エンジニアがSDK開発から学んだテストの重要性と設計

<html><head></head><body>こんにちは、エンジニアの中間です。 
普段はKARTEのネイティブアプリ向けSDKの開発をしています。
React Nativeで遊んでみたことを紹介します。 
こちらの投稿は<a href="https://qiita.com/advent-calendar/2018/plaid" target="_blank" rel="noreferrer">PLAID Advent Calendar 2018</a>の6日目の記事でもあります。
KARTEではWebサイトやアプリを通してユーザ一人一人に合わせたコミュニケーションをリアルタイムに取ることを大事にしています。 
例えばKARTEのSDKは、管理画面でHTML/CSS/JavaScriptで記述されたアクションをアプリ内メッセージ（ポップアップやバナー、アンケート等）として表示する機能を持っています。 
アプリ内メッセージの見た目や挙動を柔軟にカスタマイズできるので、様々な訴求を行えます。
今回は、よりリッチでネイティブライクな見た目のメッセージを出せないか、という可能性を探るために、React Nativeを使いアプリ内メッセージのような機能の実装・実験をします。 
ポイントは以下の点です。
<ul>
<li>主となるアプリ上に、アプリ内メッセージを模した第二のアプリを読み込み表示できるか</li>
<li>第二のアプリをリアルタイムに（アプリアップデートの必要なく）変更できるかどうか</li>
</ul>
<h2 id="概要">概要</h2>
以下の構成のサンプルアプリを作り正常に起動・表示できるかを試します。
<ul>
<li>メインのReact Nativeアプリの上にサブのReact Nativeアプリを表示する。サブのアプリではサーバからfetchしたbundleを使う（プロダクションを想定し、DeveloperSupportは使わない）</li>
</ul>
通常React Nativeのアプリをリリース用にビルドするとassetsにbundleファイルが配置されますが、<code>ReactInstanceManager.setBundleLoader</code>によりbundleの読み込み方法は自由に指定できるようです。
メインのアプリは通常通りassetsに配置し、サブのアプリはサーバからInternal Storageにダウンロードしたbundleを使います。
今回はAndroidのみで試しました。
<h2 id="React Nativeプロジェクト">React Nativeプロジェクト</h2>
以下のようにプロジェクトを用意し、index.jsをメインのアプリ、index.sub.jsをサブのアプリとします。
<pre><code class="language-plaintext hljs">├── android/ (Androidのプロジェクト)
├── index.js
├── index.sub.js
├── node_modules/
└── package.json
</code></pre>
index.jsは<code>Main App</code>の文字列を中央に表示するだけのアプリです。index.sub.jsも同じように、少しだけ見た目を変えたものを用意します。
<pre><code class="language-jsx hljs">class HelloWorld extends React.Component {
 render() {
 return (
 &lt;View style={styles.container}&gt;
 &lt;Text style={styles.hello}&gt;Main App&lt;/Text&gt;
 &lt;/View&gt;);
 }
}

var styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 },
 hello:{
 fontSize: 30,
 textAlign: 'center',
 },
});
</code></pre>
<h2 id="設定">設定</h2>
<code>build.gradle</code>の<code>project.ext.react.entryFile</code>に<code>index.js</code>を指定します。これによりindex.jsのビルドファイルがassets/下にindex.android.bundleとして配置されます。
<pre><code class="language-jsx hljs">project.ext.react = [ 
 entryFile: "index.js", 
 bundleInDebug: true, 
 bundleAssetName: "index.android.bundle"
] 
</code></pre>
<code>index.sub.js</code>は手動でビルドし、サーバから配布します。ビルドファイルは<code>index.sub.bundle.js</code>という名前にします。
<pre><code class="language-shell hljs">&gt; react-native bundle --platform android --entry-file index.sub.js --bundle-output index.sub.bundle.js --dev false
&gt; http-server ./ #https://www.npmjs.com/package/http-server
</code></pre>
<h2 id="Androidアプリの実装">Androidアプリの実装</h2>
Androidアプリは単一のActivityを持ち、Activity上に二つの<code>ReactRootView</code>と<code>ReactInstanceManager</code>を保持して、二つのReactNativeアプリを読み込む構成にします。サブアプリはメインアプリの上に小さく重ねて表示させます。
<pre><code class="language-java hljs">public class TopActivity extends AppCompatActivity {
 public static final String SUB_BUNDLE_URL = "http://172.16.1.58:8080/index.sub.bundle.js";

 private ReactRootView mainReactRootView;
 private ReactRootView subReactRootView;

 private ReactInstanceManager mainReactInstanceManager;
 private ReactInstanceManager subReactInstanceManager;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_top);
 final FrameLayout rootLayout = findViewById(R.id.root_layout);

 //mainReactInstanceManagerのセットアップ
 mainReactRootView = new ReactRootView(this);
 mainReactInstanceManager = ReactInstanceManager.builder()
 .setApplication(getApplication())
 .setBundleAssetName("index.android.bundle")
 .addPackage(new MainReactPackage())
 .setCurrentActivity(this)
 .setInitialLifecycleState(LifecycleState.RESUMED)
 .build();

 mainReactRootView.startReactApplication(mainReactInstanceManager, "MainReactNativeApp");
 //メインAppは全画面表示
 rootLayout.addView(mainReactRootView, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));


 //index.sub.bundle.jsをダウンロードし、subReactInstanceManagerをセットアップ
 new AsyncTask&lt;Void, Void, Boolean&gt;() {

 @Override
 protected Boolean doInBackground(Void... voids) {
 return fetchSubBundle();
 }

 @Override
 protected void onPostExecute(Boolean isSuccessful) {
 if (!isSuccessful) return;

 subReactInstanceManager = ReactInstanceManager.builder()
 .setApplication(getApplication())
 .setJSBundleFile(getSubAppBundleFile().getAbsolutePath())
 .addPackage(new MainReactPackage())
 .setCurrentActivity(TopActivity.this)
 .setInitialLifecycleState(LifecycleState.RESUMED)
 .build();

 //サブAppは画面上部に小さく表示
 FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 600);
 params.gravity = Gravity.TOP;
 params.setMargins(30, 30, 30, 0);

 subReactRootView = new ReactRootView(TopActivity.this);
 subReactRootView.startReactApplication(subReactInstanceManager, "SubReactNativeApp");
 subReactRootView.setLayoutParams(params);

 rootLayout.addView(subReactRootView);
 }
 }.execute();
 }

 private File getSubAppBundleFile(){
 return new File(TopActivity.this.getFilesDir(), "index.android.sub.bundle");
 }

 private boolean fetchSubBundle() {
 try { 
 ResponseBody body = new OkHttpClient()
 .newCall(new Request.Builder().url(SUB_BUNDLE_URL).build())
 .execute()
 .body();
 if (body == null) return false;

 BufferedInputStream input = new BufferedInputStream(body.byteStream());
 OutputStream output = new FileOutputStream(getSubAppBundleFile());

 byte[] data = new byte[1024];
 int count;
 while ((count = input.read(data)) != -1) {
 output.write(data, 0, count);
 }

 output.flush();
 output.close();
 input.close();
 } catch (IOException e) {
 return false;
 }
 return true;
 }

 @Override
 protected void onPause() {
 super.onPause();
 mainReactInstanceManager.onHostPause(this);
 if (subReactInstanceManager != null) {
 subReactInstanceManager.onHostPause(this);
 }
 }

 //onResume, onDestroyも同様に両方のmanagerにdispatchする
</code></pre>
アプリを起動すると、正しくメインアプリの上にサブアプリが重なって表示されるのを確認できました。
<img width="300" src="https://ik.imagekit.io/newt/61b151f921640c0018173598/3cfc0dba-9117-46c2-b6fd-b0c7f884420f/screenshot-1543926720606.jpg">
<code>ReactInstanceManager</code>のインスタンス毎にJSのコンテキストが作られるようで、実際、index.jsでglobalに定義した変数をindex.sub.jsからは参照できませんでした。
実際に活用するためには考えるべきことがまだまだ沢山ありますが、複数のReactNative アプリの共存を動かして試すことができました！
今回作ったサンプルアプリは以下にあげました。 
<a href="https://github.com/takaaki7/MultiReactNativeApp" target="_blank" rel="noreferrer">https://github.com/takaaki7/MultiReactNativeApp</a>
<h2 id="最後に">最後に</h2>
CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。 
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！
<div class="wantedly-visit-button" data-visit-button-id="lyE
_IgY4VF5ukBo_EUKZLg&quot; data-width=&quot;300&quot; data-height=&quot;60&quot;></div>
<script>
 (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = " https:="" platform.wantedly.com="" visit_buttons="" script.js";="" fjs.parentnode.insertbefore(js,="" fjs);="" }(document,="" "script",="" "wantedly-visit-buttons-wjs"));="" <="" script="">
</div></body></html>

React Nativeで複数のアプリを共存させられるか試してみた