JavaScriptについてのよくある質問 

ミニアプリのリソースとページルートが正しく読み込まれません。原因は何ですか？ 

一部のJavaScriptフレームワークまたはビルドツールのデフォルト設定では、スクリプトとcssリソースの読み込みやページルーティングで問題が発生することがあります。通常は次の2つのことを行うことで解決できます。 

• ページのベースURLを相対化します。フレームワークによってはベースURLがデフォルトで「/」に設定されますが、ミニアプリではこれを「./」に設定する必要があります。例：<base href="./"> 

• "history"ではなく"hash"ベースのページルーティングを使用する。現在のところ、ミニアプリでは"history"ベースのページルーティングはサポートされません。ほとんどのフレームワークでは、ルーター構成から設定を変更できます。 

各フレームワークにおける具体的な修正方法については以下に記載しています。 

ReactJS and react-router

ミニアプリ内の特定ルートへの直接連携をサポートしたい場合は、 HashRouter コンポーネントを使用してルーティングを行ってください。

create-react-app場合は PUBLIC_URL 環境変数を単一ドットに設定しなおしてください。以下は、ローカルの環境変数設定またはCIの環境設定での例です。 

            
        
PUBLIC_URL=.
        
    

NuxtJS と vue-router

 nuxt.config.js ァイルに以下の記述を追加してください

            
        
                                    

	

		

			

			
router: {

			
  base: './',

			
  mode: 'hash'

			
}
			
		
	


                                        
    

iOSについてのよくある質問 

ミニアプリの上部コンテンツがホストアプリのナビゲーションバーで隠れてしまいます。原因は何ですか？ 

iPhone X以降、AppleはWebKitに viewport-fit のコンセプトを導入することで、四隅に丸みのある画面へのウェブコンテンツ表示に対応しています。デフォルトにより、コンテンツはsafe area コンセプトに従って表示されます。ミニアプリiOS SDKもWebKitコンポーネントでミニアプリを表示させているため、同じルールが適用されます。このため、ミニアプリビューの実装方法に応じて表示は次のようになるはずです。 

この問題を解消するには、ミニアプリのviewport-fitデスクリプタをviewport-fit=coverに設定してください。 

            
        
                                    

	

		

			

			
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>