モバイルAPPにモデルを直接埋め込む

モバイルAPPにモデルを直接埋め込む

最終更新日：2020年6月12日 06:46

マーターポートモデルをシェアする方法は3つあります：

 

１．ソーシャルメディアやemail、メール、また一般的な共有方法では、
単純にリンクをシェアするだけです。
 
２．ウェブページの場合は、＜iframe＞HTMLタグと共にページに埋め込みます。
 
３．3DショーケースプレーヤーをアンドロイドかiOS appに直接埋め込みます。

 

三番目の選択肢は、この記事で後ほど触れるような、

マーターポート3Dショーケースを含むappを作成できるソフトウェアエンジニア向けのものです。

 

アンドロイド（WebView）

最初に、AndroidManifest.xmlから、インターネットにアクセスする許可を申請します。

 

<uses-permission android:name="android.permission.INTERNET"/>
 

次に、レイアウトにWebViewを追加します。

 

<WebView
  android:id="@+id/webView"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

最後に、ウェブビューのWebGLを有効にして、URLをロードします。


 final WebView webView = (WebView) findViewById(R.id.webView);
// enable WebGL
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
// show the WebGL player
webView.loadUrl(“https://my.matterport.com/show/?m=fZKxJgeSWQZ%E2%80%9D);

VRリンクのハンドラを必ず追加します。

// handle VR links
webView.setWebViewClient(new WebViewClient() {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(url.contains("matterport.com/vr/show")) {
    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
    return true;
  }
return false;
}
}); 

アンドロイド（Chrome Custom Tabs） 

前述の方法は、WebKitからWebViewを使用します。

その他に、Chrome Custom Tabsを使用することもできます。

 

どちらの方法も作動するとはいえ、どちらにも長所と短所が存在します。

 

 

WebView

Chrome Custom Tabs

埋め込み形式

どこにでも、任意の大きさで埋め込むことが可能です。

URLトップバーを含まないフルスクリーンも可能です

「ブラウザータブ」にしかなれません。フルスクリーンモードには対応していません（URLバーを非表示にはできない）。

アプリケーションUl内にビューとして埋め込み不可です
（ListView要素）。

読み込み時間

若干遅い

若干早い

（Chrome Docsを参照）

カスタム化

より完全に対応

（分析、キャプチャ事象、
アクション生成等）

制限あり

（タイトル
バーの色の変更、
アクションアイテムの追加等）

WebVR

サポートされていません

サポートされています

出力



 

 その他の情報や、実行方法に関しては、Chrome Docsを参照して下さい。

 

iOS（アップル製iPhone、iPad等）

方向性は似ていますが、Swift／Objective－CからUIWebViewを使用することになります。

UIWebViewに関する文献をお読みください。