開発ガイド

よくある質問

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

開発者以外の方へ

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

SDKについて

Android SDK, iOS 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を利用可能。
アプリがミニアプリの要求事項を満たしていることを確認する。
ビルドプロセスで「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)