Pieceをアップロードする

Pieceの作成・デバッグが終わったら、自作Pieceを公開しましょう。
Pieceの公開は開発者サイトから行います。ここでは、アップロードの方法を紹介します。

アップロード前の準備

みなさんは以下2つの方法で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             ☆ (フォルダの中も全て)
    │      .... 沢山のnodeモジュール ....
    │   │   
    │   └── package-lock.json
    └── event.json

作ったPieceは一つのzipファイルに圧縮してアップロードします。zipファイルにする対象がとても重要ですので、しっかり確認して圧縮作業をしましょう。zipで圧縮する対象のファイルは「☆」で示しているファイル/フォルダです。Core部分だけでPieceJSONは含めません。みなさんが利用したnodeモジュールが含まれるnode_modulesフォルダも忘れずにZip化の対象にいれてください。ここで重要なのは「ProxyCore」フォルダを指定してZIP圧縮しないことです! ☆がついたファイルやフォルダを複数選択して、一つzipファイルとしてください。

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

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

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

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

SDKを利用してPieceを作成している場合はzipで圧縮する作業は必要ありませんので、続けてPieceBuilderでアップロードするをご覧下さい。

PieceBuilderでアップロードする

開発者サイト上にPieceをアップロードする仕組みがあります。その仕組みをPieceBuilderと呼ぶ事にします。
まず、PieceBuilderを起動する画面に行きます。開発者サイトにログインし、↓の図の黄色い枠で囲まれている「piece一覧」をクリックしてください。

piece一覧画面へ

すると以下の様な画面が出ると思います。この画面はみなさんが作ったPiece達を管理する画面になります。まだPieceをアップロードしたことがないので以下の様な空白だらけの画面になっています。
新しくPieceをアップロードするには「piece JSONを登録」という↓の画像で黄色い枠で囲ったボタンをクリックして下さい。
pieceJSONを登録

すると、↓の様な画面に切り替わります。さらに余白があるページになりますが心配しないでください。次に「アップロード」ボタンをクリックします。

uploadPiece.png

ローカルにあるファイルをアップロードするダイアログが表示されたと思います。
ここで、みなさんが作成したpieceJSONファイルをアップロードしてください。サンプルコードのフォルダ構成ですとSampleCode/YoueCode/JSONフォルダの中にpieceJSONがあるはずです。正しいJSONファイルがアップロードできますと、以下の様な画面になります。

pieceBuilder.png

pieceJSONファイルを解析し、画面に表示されます。エラーが出る場合はpieceJSONに問題があるからです。必要な情報が足りていないか、構造が崩れている可能性があります。ここで仕様を確認し、JSONファイルを修正してください。
この画面がPieceBuilderです。下に並んでいる4つのボタンでPieceに必要なファイルを更にアップロードや設定することができます。「アイコンを指定」以外のボタンは必須ではありません。順番に説明します。

ServiceProxyCore(zipファイル)を指定

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

アイコンを指定 (必須)

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

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

用意した画像ファイルをアップロードする

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

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

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

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

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

  1. 「アイコンを指定」ボタンをクリックする。↓のWindowが表示されます。
    selectIcon.png

  2. 「アイコンを選ぶ」のキーワード検索部分にみなさんの作成したキーワードを入力してみましょう。サンプルコードの場合、現在の気温を数字で出力するPieceなので検索キーワードとしてtempと入力してみます。(英語で入力してください。日本語ですとほとんどアイコンが引っかかりません。)
    すると、下の様なアイコンが選択肢として表示されます。

    selectIcon.png

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

  4. さりげないですが、↓の画面の様に選んだアイコンの画像が表示されていればOKです。

    selectIcon.png

イラストファイルを指定

イラストファイルはアイコンとは異なり、Pieceの説明画面に出てくる絵のことを言います。例えば、CITIZENのEco-drive Riiiver時計のAction Pieceの説明では以下の様な画面になっています。

illust.jpg

↑ピンク矢印で指している「時計の挿絵」をイラストファイルと呼んでいます。指定できるのは1枚のみです。

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

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

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

OAuthファイルを指定

PieceでOAuthを利用して外部APIにログインする必要がある場合に利用します。

※詳細説明ページは、鋭意作成中です。今しばらくお待ちください。

アップロード完了

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

selectIcon.png

この時にエラーが出ている場合は、原因が表示されていると思います。もう一度確認の上、再度トライしてみて下さい。

一度、PieceをアップロードしたらそのPieceはRiiiver側で審査させていただきます。以下の画面のように、「piece一覧」画面の審査ステータスがアップロード直後は「審査待ち」になります。審査が終了するまで、ビジネスデーで数日お待ちください。

pieceListWaiting.png

これでPieceのアップロード作業は完了です。承認されたらベンダー登録したアドレスにメールが届きますので楽しみにお待ちください!!