ツールPieceの作成・デバッグが終わったら、自作Pieceを公開しましょう。Pieceの公開は開発者サイトから行います。ここでは、アップロードの方法を紹介します。アップロード前の準備みなさんは以下2つの方法でPieceを作成したと思います。方法別に説明しますので、対応する方をご覧ください。作成したPieceは以下の様なフォルダ構成になっていると思います。event.json作ったPieceは一つのzipファイルに圧縮してアップロードします。zipファイルにする対象がとても重要ですので、しっかり確認して圧縮作業をしましょう。zipで圧縮する対象のファイルは「☆」で示しているファイル/フォルダです。Core部分だけでPieceJSONは含めません。みなさんが利用したnodeモジュールが含まれるnode_modulesフォルダも忘れずにZip化の対象にいれてください。☆がついたファイルやフォルダを複数選択して、一つzipファイルとしてください。上記のzipファイルを作る際にフォルダの階層関係が崩れると、うまくLambda上で動作しなくなりますので十分注意願います!Zipしたファイルの名前はLambdaから呼ばれるhandlerが格納されている.jsファイルと同じにして下さい。pieceCore_Sample.zipという名前にします。準備が整いましたので続いてPieceBuilderでアップロードするをご覧下さい。Coreを作成した場合SDKを利用してPieceを作成している場合はzipで圧縮する作業は必要ありませんので、続けてPieceBuilderでアップロードするをご覧下さい。PieceBuilderでアップロードする開発者サイト上にPieceをアップロードする仕組みがあります。その仕組みをPieceBuilderと呼ぶ事にします。PieceBuilderを起動する画面に行きます。開発者サイトにログインし、↓の図の黄色い枠で囲まれている「piece一覧」をクリックしてください。すると以下の様な画面が出ると思います。この画面はみなさんが作ったPiece達を管理する画面になります。Pieceをアップロードしたことがないので以下の様な空白だらけの画面になっています。JSONを登録」という↓の画像で黄色い枠で囲ったボタンをクリックして下さい。すると、↓の様な画面に切り替わります。余白があるページになりますが心配しないでください。次に「アップロード」ボタンをクリックします。ローカルにあるファイルをアップロードするダイアログが表示されたと思います。ここで、みなさんが作成したpieceJSONファイルをアップロードしてください。サンプルコードのフォルダ構成ですとSampleCode/YoueCode/JSONフォルダの中にpieceJSONがあるはずです。正しいJSONファイルがアップロードできますと、以下の様な画面になります。pieceJSONファイルを解析し、画面に表示されます。エラーが出る場合はpieceJSONに問題があるからです。必要な情報が足りていないか、構造が崩れている可能性があります。ここで仕様を確認し、JSONファイルを修正してください。この画面がPieceBuilderです。下に並んでいる4つのボタンでPieceに必要なファイルを更にアップロードや設定することができます。「アイコンを指定」以外のボタンは必須ではありません。ServiceProxyCore(zipファイル)を指定アップロード前の準備で作成したzipファイルをここから指定します。SDKを利用してPieceを作成している場合はこのファイルを指定(してアップロード)する必要はありません。ボタンをクリックして、作成したzipファイルをアップロードしてください。Lambdaの関数として取り込まれる仕組みになっています。(必須)みなさんのPieceの顔となるアイコンを指定します。アイコンは以下2つの方法で指定できます:用意した画像ファイル(.png形式のみ)をアップロードする。PieceBuilder上でFontAwesomeのフォントからアイコンを作る。用意した画像ファイルをアップロードするアップロードできる画像ファイルは以下の通りです。PNG形式の画像ファイルであること。「アイコンを指定」ボタンをクリックした後に続いて「アップロード」ボタンを押して対象ファイルを選択してアップロードしてください。PieceBuilder上でFontAwesomeのフォントからアイコンを作る簡単なアイコンはPieceBuilder上で作成できます。アイコンはFontAwesomeのフォントの色を変えるだけですが、簡単なものをWeb上で生成し、これを皆さまのアイコンとして利用できます。以下に方法を説明します:「アイコンを指定」ボタンをクリックする。↓のWindowが表示されます。「アイコンを選ぶ」のキーワード検索部分にみなさんの作成したキーワードを入力してみましょう。サンプルコードの場合、現在の気温を数字で出力するPieceなので検索キーワードとしてtempと入力してみます。(英語で入力してください。日本語ですとほとんどアイコンが引っかかりません。)すると、下の様なアイコンが選択肢として表示されます。黄色い丸で囲んだ左右の矢印ボタンでスクロールし、他のアイコン候補を確認できます。気に入ったものがあれば、そのアイコンをクリックしてみてください。プレビュー画面にそのアイコンが抽出されて表示されます。「アイコンの色」を変更することができます。お好きな色に変更してみてください。絵と色が決まったら「決定」ボタンをクリックしてアイコンを設定してください。さりげないですが、↓の画面の様に選んだアイコンの画像が表示されていればOKです。イラストファイルを指定イラストファイルはアイコンとは異なり、Pieceの説明画面に出てくる絵のことを言います。Pieceの説明では以下の様な画面になっています。↑ピンク矢印で指している「時計の挿絵」をイラストファイルと呼んでいます。指定できるのは1枚のみです。イラストファイルとして指定できる画像の制約は以下の通りです。PNG形式のみ512x512px〜1200x1200pxのサイズであることユーザーはiiideaを作成するときにPieceの説明を読んでiiideaを組み上げます。一目でわかる絵があると理解と色々な発想に結びつきますので、ぜひ作成してみてください。(説明文+絵だと、とてもいいかもしれません!)スマートフォンからみる部分ですのでレイアウトも工夫してみてください。OAuthファイルを指定PieceでOAuthを利用して外部APIにログインする必要がある場合に利用します。※詳細説明ページは、鋭意作成中です。今しばらくお待ちください。必要なファイルの指定やアップロードが終了したらPieceBuilder画面右下の「確認」ボタンを押して下さい。pieceJSON、アイコンファイルの指定等全ての設定が正しければ以下の画面が表示されます。この時にエラーが出ている場合は、原因が表示されていると思います。一度確認の上、再度トライしてみて下さい。一度、PieceをアップロードしたらそのPieceはRiiiver側で審査させていただきます。以下の画面のように、「piece一覧」画面の審査ステータスがアップロード直後は「審査待ち」になります。審査が終了するまで、ビジネスデーで数日お待ちください。これでPieceのアップロード作業は完了です。