開発ガイド
ミニアプリの開発が簡単になりました。開発者向けの情報はこちらです。
開発ガイド

よくある質問


https://developers.rakuten.net/hc/en-us

開発者以外の方へ


Mini App Editor! の利用をご検討ください。Mini App Editorを使用すれば、コードの知識がなくても美しいミニアプリを作成することができます。はじめてミニアプリでコンテンツを公開する場合にご利用ください。開発者向けの情報については以下読み進めてください。

SDKについて


Android SDKiOS SDK,  JS SDKs がGitHubにホストされています。これらSDKには、SDKそのものの他にデモアプリケーションのソースも含まれています。このソースはサンプル統合用としても、ミニアプリのテストツールとしてもご利用いただけます。JavaScript SDKには、ミニアプリをホストアプリにリンクするためのJSライブラリが含まれています。その他、SDKの機能をデモンストレーションしたサンプルミニアプリも含まれています。SDKのインストール、ミニアプリのテストに使用できるデモ版モバイルアプリのビルドについてはGitHubをご確認ください。

Android SDK

iOS SDK

JS SDK

フレームワークとテクノロジー


一般的にはクライアント側のJavaScriptウェブフレームワークを用いてミニアプリを生成することが可能です。

クライアント側フレームワークの例

  • React JS
  • AngularJS
  • Angular
  • Vue JS
  • ELM Transpiled to JS

独自のライブラリを使用したり、別のフレームワークと併用することも可能です。

React、Vue、Angularのいずれかの利用を推奨します。

これまでうまく機能していないフレームワーク.

Nuxt - 生成機能や動的リンクでいくつか問題が生じています。静的コンテンツであればこのフレームワークでも問題ありませんが、対処法を検討するよりはVueJSに立ち戻った方が効率的です。

Next JS -Nuxt同様、トラブルへの対処法を検討するよりは別のワークフレームを採用した方が効率的と思われます。

 

相対パス相対パスは先頭に「/」を付けないでください。これを入れるとミニアプリがロードされなくなります。Reactについては、package.jsonのhomepageフィールドを「.」に設定することで簡単に修正できます。Angularの場合はベースのhrefを「/」から「.」に変更します。

 

ウェブパックを使用する複雑なミニアプリをホストアプリで作動させるには、 output.publicPath to "." に設定する必要があります。

 

ミニアプリの準備

ウェブアプリをビルドする場合と同様、ミニアプリを生成する際にもビルドパイプラインを構成することができます。

 

過去の事例に基づく事項

  • ミニアプリ内のページに静的URLを使用しない(機能しない)。
  • 画像およびJSONの読み込みには静的URLを利用可能。
  • アプリがミニアプリの要求事項を満たしていることを確認する。 Mini App Requirements
  • ビルドプロセスで「dist」フォルダを作成する場合

サーバー側のレンダリング

サーバー側でのレンダリングは明示的なサポート対象ではありませんが、サーバーからコンテンツを出せないということではありません。コンテンツ(パンフレット側など)を直接すべて事前生成しておくか、CMSからエクスポート出力を生成してコンテンツをインポートすることが可能です

サポートされる機能


SDKの資料、ユーザーガイドをご確認ください

 

技術的注記


SDKを使用してホストアプリ内でミニアプリをホストする方法

ミニアプリのアセットはfile:// URIやhttp://localhost/からは読み込まれません。アセットは、デバイスのファイルシステム上のミニアプリアセットにリダイレクトされる設定のカスタムURLから読み込まれます。これにより、ミニアプリはそれぞれ個別のドメイン(例:https://mini-app-id.miniapps.androidplatform.net/)として認識されるようになるので、ミニアプリごとに個別のデータストレージを保持することができます。現在のところ、当社ではカスタムスキームを用いています。これについてはCORSポリシーに関わるいくつかの課題があります。詳しくは CORS Guidelines をご覧ください。

ミニアプリの要求事項


ミニアプリをプラットフォームで機能させるためには特定の要求事項・制限事項を守る必要があります。ミニアプリには必ずアップロードのルートディレクトリにindex.htmlファイルが格納されていなければなりません。

フォルダ

フォルダ構成は必要に応じて設定できます。これについてプラットフォームによる要求事項はありません

ZIPファイルのアップロード

ミニアプリはZIPファイル形式でアップロードする必要があります。ミニアプリをアップロードする際に表示されるアップロードダイアログの指示に従ってください。以下の点に留意してください。OSによって作成される.DS_Storeなどの特殊ファイル、非表示ファイルが意図せずZIPプロセスに入り込む場合があります。これを回避するため、コマンドラインでコードベースをZIP化することをお勧めします。必ず、親ディレクトリではなくコードベースの内容をZIP化してください。例

  • dist
    • folder 1
    • folder 2
    • folder 3
    • index.html

Acceptable Zip contents must look like

  • folder 1
  • folder 2
  • folder 3
  • index.html

The following is also accepted, but not preferred:

  • dist
    • folder 1
    • folder 2
    • folder 3
    • index.html

ZIPのクリーンアップ

Macをご利用の場合はTerminalから以下のコマンドを実行してください。zip -d "<ZIP NAME HERE>" "__MACOSX*" *DS_Store*

 

            
        
                                    

zip -d "" "__MACOSX*" *DS_Store*

ファイルのタイプ

対応するファイルタイプは以下の通りです。

TYPE

EXTENSION

MimeTypes

Web HTML

text/html

Web CSS text/css
JS

JS

application/javascript

text/javascript

application/x-javascript

Data JSON application/json
Data XML

application/xml

text/xml

Image PNG image/png
Image

JPEG

image/jpeg
Image JPG  
Image SVG image/svg+xml
Image GIF image/gif
Audio MP3 audio/mp3
Audio MPEG audio/mpeg
Web PLIST

-

JS MAP -
ZIP ZIP

application/x-compressed

application/x-zip-compressed

application/zip

multipart/x-zip

Icon ICO  

 

過去の事例に基づく慣行として、アプリケーションで開く必要のあるアセットがない場合はリモートロケーションからランタイムに読み込むようにしてください。除外されるファイルタイプその他のファイルタイプについてのご要望は受け付けていますが、すべての要望を承認しているわけではありません。以下のファイルタイプについては明示的にサポート対象外としておりますのでご留意ください。

All fonts (.ttf, .woff, etc)

Text Files (.txt, .rtf, etc)

合計アップロードサイズ

必ず、アップロードファイルとミニアプリ(圧縮前)の合計ディスク容量は30MBを超えないようにしてください。これは、プラットフォームとホストモバイルアプリケーションの双方を考慮したものです。ランタイムに必要な追加コンテンツは外部ソース、CDN、APIなどを介して読み込むようにしてください

 

 

 

主なSDK対応機能


すべての機能一覧については当該SDKのユーザーガイドをご覧ください。

Android SDK User Guide

iOS SDK User Guide

JS SDK User Guide

アナリティクス


サービスに利用できる成熟したアナリティクスソリューションは数多く存在しています。ここでは参考までにその一部をご紹介します。ミニアプリまたはホストアプリにアナリティクスが必要になった場合は、次に示すようなサービスが利用可能です。

Googleアナリティクス

認知度の高い成熟したプラットフォームです

https://analytics.google.com/analytics/web/provision/#/provision

Adjust

マーケティング&コホート指向のアナリティクスプラットフォーム

https://www.adjust.com

MixPanel

成熟度、安定性の高いアナリティクスプラットフォーム。

https://mixpanel.com

move to top