つくったPieceをアップロードする

目次

Pieceの作成・デバッグが終わったら、自作Pieceのアップロードを行い、Riiiverに公開しましょう。 ここでは、アップロードの方法についてご説明します。

アップロード前の準備

以下の２つの方法のうち、いずれかの方法でPieceを作成されたかと思います。方法別にアップロード方法をご説明しますので、対応する方をご確認ください。

Riiiverが準備するLambda環境を利用してS/A Pieceを作成した場合

作成したPieceは以下の様なフォルダ構成になっていると思います。

SampleCode
├── .vscode
├── kicker_on_lambda.js
└── YourCode
    ├── JSON
    │   └── pieceJson_Sample.json
    ├── ProxyCore
    │   ├── pieceCore_Sample.js      ☆
    │   ├── pieceCore_divieded_A.js  ☆
    │   ├── pieceCore_divieded_B.js  ☆
    │   ├── node_modules             ☆ (including all files under this folder)
    │     .... 沢山のnodeモジュール ....
    │   │   
    │   └── package-lock.json
    └── event.json

作ったPieceは1つのzipファイルに圧縮してアップロードします。zipファイルにする対象がとても重要なので、しっかりとご確認ください。zipで圧縮する対象のファイルは「☆」で示しているファイル/フォルダです。

Core部分だけでPieceJSONは含めません。皆さまが利用したnodeモジュールが含まれるnode_modulesフォルダも忘れずにzip化の対象に入れてください。

気をつけたいポイントとして、「ProxyCore」フォルダを指定してzip圧縮しないことが挙げられます。☆がついたファイルやフォルダを複数選択して、1つのzipファイルとしてください。

上記のzipファイルを作る際にフォルダの階層関係が崩れると、Lambda上で動作しなくなる恐れがありますのでご注意をお願いします。

zip化したファイルの名前は、Lambdaから呼ばれるhandlerが格納されている.jsファイルと同じにしてください。上記サンプルの場合はpieceCore_Sample.jsから処理が開始されるので pieceCore_Sample.zipという名前にします。

準備が整いましたので、続いてPieceBuilderでアップロードするをご覧ください。

SDKを利用してネイティブPieceCoreを作成した場合

SDKを利用してPieceを作成している場合は、zipで圧縮する作業は必要ありません。

ただし、SDKを利用したPieceをアップロードする際はPieceBuilderの「企業アカウント管理」から企業アカウント情報をご登録のうえ、「ベンダーID」を取得してください（また、Riiiver本番環境に接続する際には、SDK利用料金のお支払い情報をご登録いただく必要があります）。

企業アカウント情報のご登録が済みましたら、続けてPieceBuilderでアップロードするをご覧ください。

PieceBuilderでアップロードする

Riiiver Developers上にPieceをアップロードする仕組みをご用意しています。その仕組みをPieceBuilderと呼びます。まず、PieceBuilderを起動する画面に行きます。Riiiver Developersにログインし、下の図の黄色い枠で囲まれている「Piece一覧」をクリックしてください。

すると以下のような画面が出ます。この画面は皆さまが作ったPieceを管理する画面です。まだPieceをアップロードしたことがない場合は、以下のような空白だらけの画面になっています。 新しくPieceをアップロードするには「PieceJSONを登録」という黄色い枠で囲ったボタンをクリックしてください。

すると、以下のような画面に切り替わります。次に「アップロード」ボタンをクリックします。

ローカルにあるファイルをアップロードするダイアログが表示されます。 ここで、皆さまが作成したPieceJSONファイルをアップロードしてください。サンプルコードのフォルダ構成だと、「SampleCode/YourCode/JSON」フォルダの中にPieceJSONがあるはずです。正しいJSONファイルがアップロードできた場合、以下のような画面になります。

pieceJSONファイルを解析し、画面に表示されます。エラーが出る場合はPieceJSONに問題があります。必要な情報が足りていないか、構造が崩れている可能性があるので、ここで仕様を確認し、JSONファイルを修正してください。 

この画面がPieceBuilderです。下に並んでいる４つのボタンでPieceに必要なファイルを更にアップロードすることや設定することができます。「アイコンを指定」以外のボタンは必須ではありません。順番に説明します。

ServiceProxyCore（zipファイル）を指定

アップロード前の準備で作成したzipファイルをここから指定します。SDKを利用してPieceを作成している場合は、このファイルを指定（してアップロード）する必要はありません。ボタンをクリックして、作成したzipファイルをアップロードしてください。ここでアップロードされたファイルは、RiiiverのLambda環境の関数として取り込まれる仕組みになっています。

アイコンを指定 (必須)

皆さまのPieceの顔となるアイコンを指定します。アイコンは以下２つの方法で指定できます。

  1. 皆さまが用意した画像ファイル(.png形式のみ)をアップロードする。
  2. PieceBuilder上でFont Awesomeのフォントからアイコンを作る。
皆さまが用意した画像ファイルをアップロードする

アップロードできる画像ファイルは以下の通りです。

  • PNG形式の画像ファイルであること。
  • 画像ファイルサイズは512x512px以上であること。

「アイコンを指定」ボタンをクリックした後に続いて「アップロード」ボタンを押し、対象ファイルを選択してアップロードしてください。

PieceBuilder上で、Font Awesomeのフォントからアイコンを作る

簡単なアイコンはPieceBuilder上で作成できます。アイコンは、Font Awesomeのフォントの色を変えるだけですが、簡単なものをWeb上で生成し、これを皆さまのアイコンとして利用できます。以下が手順になります。

1. 「アイコンを指定」ボタンをクリックすると、下記のようなWindowが表示されます。

2. 「アイコンを選ぶ」のキーワード検索部分に、皆さまが作成したPieceを表すようなキーワードを入力します。サンプルコードの場合、現在の気温を数字で出力するPieceなので検索キーワードとして「temp」と入力してみます。すると、下のようなアイコンが選択肢として表示されます。

英語を入力してください。
日本語ではアイコンがほとんど見つかりません。

3. 黄色い丸で囲んだ左右の矢印ボタンでスクロールし、他のアイコン候補を確認できます。 気に入ったアイコンをクリックすると、プレビュー画面にそのアイコンが抽出されて表示されます。またアイコンの色も変更することができます。絵と色が決まったら「決定」ボタンをクリックして、アイコンを設定します。

4. 下の画面のように選んだアイコンの画像が表示されていればOKです。

イラストファイル指定

イラストファイルはアイコンとは異なり、Pieceの説明画面に出てくる絵のことを指します。例えば、シチズンのEco-Drive Riiiver時計のAction Pieceの説明では、以下のような画面になっています。

ピンクの矢印で指している「時計の挿絵」がイラストファイルです。指定できるのは１枚のみです。

イラストファイルとして指定できる画像の制約は以下の通りです。

  • PNG形式のみ
  • 512x512px～1200x1200pxのサイズであること

ユーザーはiiideaを作成するときにPieceの説明を読んで、iiideaを組み上げます。一目でわかる絵があると理解の補助とさまざまな発想にも結びつきますので、ぜひ作成してみてください。スマートフォンから見る部分なので、レイアウトにも工夫ができればベターです。

OAuthファイルを指定

OAuth認可によるサービス連携が必要な外部APIを使用するPieceを作成した場合、こちらからOAuthに関する必要事項を記載したJSONファイルをアップロードします。それ以外の場合は指定不要です。OAuthファイルの詳細については「OAuthによる認可が必要な外部サービスとの連携Pieceを作る」をご覧ください。

アップロード完了

必要なファイルの指定やアップロードが終了したら、PieceBuilder画面右下の「確認」ボタンを押して下さい。PieceJSON、アイコンファイルの指定など、全ての設定が正しければ以下の画面が表示されます。

このときにエラーが出ている場合は、原因が表示されます。エラーの説明はこちらに記載しています。もう一度確認の上、再度トライしてみてください。

アップロードしていただいたPieceは、安全確保のためRiiiver側で審査させていただきます。「Piece一覧」画面の審査ステータスは、アップロード直後「テスト中」と表示されますので、Pieceの「編集」ボタンを押してください。

企業アカウントに紐づけられているテストアカウントであれば、「テスト中」にPieceを試すことができます。
例えば、RiiiverSDKを利用したT Pieceを開発している場合には、PieceJSONにvendorId、deviceIdを記載することで、Riiiverアプリからテスト中のT Pieceを選択してiiideaを作成することができます。

Testing

次に表示された画面右下の「審査に出す」ボタンを押してください。

submit review

審査に出されたPieceの審査ステータスは「審査待ち」と表示されます。審査が終了するまで、数営業日ほどお待ちください。

これでPieceのアップロード作業は完了です。審査結果は、Riiiver Developersにアカウント登録したメールアドレスにメールが届きますので、それまでしばしお待ちください。

この記事は役に立ちましたか？