Getting Started

更新 2020/11/01

Piece をテストして申請

どうも、こんにちは！JellyWareです。

Getting Started!! Riiiver tutorialの第14弾となります。

このシリーズは、Riiiverやプログラミングを学び、初心者の方でもEco-Drive Riiiverを活用したオリジナルアプリを理解して作れるようになることを目指します。

今回は、前回作った Piece のテストを行います。また、Piece の申請(アップロード)方法を説明します。この Piece は既に Riiiver に申請済のため、皆さんが申請するのは控えてもらえればと思います。

今後、オリジナルのPieceを作成された際にこの手順を参考にしてもらえればと思います。

目次

Piece Test

それでは、作成した Piece のテストを行います。以下の2点を確認します。

  • PieceJSON のフォーマットが正しいかどうか
  • PieceFunc が正しく動作するかどうか

まずは、PieceJSON からチェックします。

PieceJSON

PieceJSON のフォーマットの確認には、Riiiver が用意する Piece Debugger を使用します。

それでは、前回作成した PieceJSON が問題ないか確認しましょう。

まずは、Piece Debugger に PieceJSON をアップロードします。前回作成した PieceJSON はこちらからダウンロードできます。(JSON のコピー＆ペーストでも大丈夫です。)

左上のFile>Openをクリックして、ダウンロードした piece.jsonを選択します。

次に、フォーマットをチェックします。

Debug>Check Piece Format をクリックします。

フォーマットが正しければ、ページ下部に... PieceJSON is perfect!.と表示されます。

フォーマットがおかしい場合は、間違えている行数などが表示されるので、それにしたがって修正しましょう。

次にpreferences箇所の確認を行います。

textやdrumrollなど、指定した入力フォーマットが問題ないか、実際のUIに近い画面で操作して確認できます。

Preview>Japanese をクリックします。(英語版を確認したい方は、Englishをクリックしてください。)

ページ右側にこのように表示されます。実際にテキストを入力したりすることもできます。

実際に皆さんがこの Piece を使う側として一度入力してみると、どの入力フォーマットが適切なのか分かると思います。(正しいデータを入力する必要はありません。xxxxxxなどで試してみましょう。)

また、ここで入力されたデータがどのようなJSONデータになるのかも確認できます。

データを入力したら、Debug>Check Preference をクリックします。

クリックすると、今回の場合、ページ下部に以下のような JSONデータが表示されます。

preferences: {"opernWeatherMapAPIKey":"xxxxxxx","gasURL":"https://script.google.com/macros/s/xxxxxx/exec","prefecture":"1850147"}

このデータが PieceFunc に渡されます。({ }内のmemberの順番は異なっている場合がありますが、特に問題はありません。)

prefectureの箇所は、プルダウンに表示されている都道府県名ではなく、ちゃんと対応するIDになっていますね。

以上で、PieceJSON のテストは終わりです。

PieceFunc

PieceFunc のテスト方法は、2通りあります。

  1. 実際にLambdaを使用する
  2. Lambda の動作に近いプログラムを用意してテストする

どちらも Lambda の動作で PieceFunc をテストするという点で同じですが、方法1の場合は AWS に登録する必要があるため本コンテンツでは方法2を採用します。

もちろん、AWS にすでにアカウントをお持ちの方や Lambda に詳しい方は、方法1で動作確認をしていただいても問題ありません。

それでは、前回作成した PieceFunc のテストを行います。テストには、glitch を使用します。今回は、こちらで用意したプロジェクトを使用します。

プロジェクトには、以下のファイルがあります。

ファイル名 役割
piece.json PieceJSON
riiiver_getting_started.js PieceFunc
event.json PieceFunc に渡されるeventデータ
lambda.js Lambda の動作に近いプログラム
README.md 本プロジェクトについての説明
その他(server.jsなど) PieceFunc Test アプリを作成するプログラム

プロジェクトを開くと、以下のように PieceFunc をテストするアプリが表示されます。

このアプリを皆さんのプロジェクトにコピーして、実行してテストをします。コードは変更しないようにお願いします。

まずは、赤枠のRemix Your Ownボタンを押します。これで自動的にプロジェクトが作成されてコピーされます。

次にevent.jsonに「GASのURL」「OpenWeatherのAPI Key」を記入します。

最後に、左上のShowをクリックしIn a New Windowをクリックします。

新しく開いたページのPieceFuncボタンを押します。テストが実行され、Piece の出力結果が表示されます。 下記のように表示されれば成功です！

{"status":500,"body":{"successFlag":false}}の場合は、失敗しているので、「API Key」 と 「GASのURL」が正しいか見直しましょう。

また、実際にスプレッドシートにもデータが記入されているかも確認しましょう。

テストが終わったらプロジェクトを削除しましょう。ログインした状態glitchのトップページに行くとダッシュボードページに自動で切り替わります。ここのプロジェクト一覧から、作成したプロジェクトをアーカイブにします。

Piece Upload

PieceJSON, PieceFunc の2つとも問題ないことを確認できたので、いよいよ Piece の申請を行います。

Piece の申請は、Riiiver のサイトに以下のデータをアップロードする必要があります。

  1. PieceJSON
  2. PieceFunc
  3. PieceFunc で使用するモジュール

1と2は既に作成しているので、3のモジュールを取得します。今までは glitch を通してモジュールを使っていましたが、今回は皆さんのPCにモジュールを入れます。

※Node.jsをインストールしておく必要があります。インストール方法は、第5弾を参照ください。

モジュールの取得と準備

まずは、皆さんのデスクトップにriiiver_pieceという名前のフォルダを作成します。

次に、こちらから PieceJSON(piece.json)を、こちらから PieceFunc(riiiver_getting_started.js)をダウンロードし、フォルダに入れます。

次に、Windowds の方はコマンドプロンプトを、Mac / Linux の方はターミナルを開いてください。

開いたら、まずはcd と入力します。cdの後に半角スペースが必要なので注意してください。

打ち込んだら、コマンドプロンプト / ターミナル に先ほど作成したriiiver_pieceフォルダをドラッグ&ドロップします。

Windowds の場合：

cd C:¥xxxxxxx¥xxxxxx¥Desktop¥riiiver_piece

Mac / Linux の場合：

cd /xxxxxx/xxxxxx/Desktop/riiiver_piece

のように表示されます。xxxxxxの箇所はユーザー名などで人によって異なっています。

次に、Enterを押して実行します。

何をしたか簡単に説明すると、先ほどデスクトップに作成したriiiver_pieceフォルダ内への移動を行いました。

無事移動できたか確認するために、フォルダ内のファイル一覧を表示させます。

Windowds の場合：

dir /b

Mac / Linux の場合：

ls

と打ちEnterを押して実行します。

piece.json
riiiver_getting_started.js

このように、先ほどフォルダに移した2つのファイル名が表示されれば問題ありません。

もし何も表示されていない方は、フォルダ移動が上手くいっていないか、フォルダにファイルを入れ忘れているので見直してください。

最後にモジュールを用意します。用意するモジュールはaxios です。

npm install axios

Windowds / Mac / Linux 関係なく、上記をコピー&ペーストしEnterを押します。後は、自動でモジュールがダウンロードされます。

WARNなどが表示されますが、特に気にする必要はありません。

ダウンロードが終わったら、riiiver_pieceのフォルダを開いてみましょう。

このようにnode_modules package-lock.jsonの2つが追加されています。

大事なのはnode_modulesで、こちらに先ほどダウンロードしたモジュールが入っています。(package-lock.jsonは削除しても大丈夫です。)

  1. PieceJSON
  2. PieceFunc
  3. PieceFunc で使用するモジュール

これで必要な3つが揃いました。最後にアップロードするための前準備を行います。

モジュールが入っている「node_modulesのフォルダ」と「PieceFunc のファイル」の2つをzip形式に圧縮します。圧縮したファイル名は、PieceFunc と同じ名前にしてください。(拡張子は不要です。)

最終的にこのようになれば問題ありません。

※Riiiver のデベロッパーサイトでは、zip形式に圧縮した PieceFunc をアップロードすると、Riiiver のLambda環境の関数として取り込まれる仕組みになっています。

登録と申請

これで準備ができました。Riiiver に作成した Piece を申請しましょう。

申請するには、Riiiver の Developerサイトに登録し、先ほど準備したデータをアップロードする必要があります。

こちらから登録を行います。

まずは利用する地域を選びます。

次に、「メールアドレス」と「パスワード」を入力し、「利用規約とプライバシーポリシーに同意する」にチェックします。

→ボタンをクリックすると、登録したメールアドレスに riiiver からメールが届きます。

リンクをクリックして登録を終了させ、改めてログインしましょう。

ログインしたら、ヘッダ―メニューのpiece一覧をクリックします。

次に、PieceJSON を登録ボタンをクリックします。

ここで Piece を登録します。まずは、PieceJSON をアップロードします。

アップロードボタンをクリックし、riiiver_pieceフォルダ内のpiece.jsonを選択します。

アップロードに成功するとページ下部に4つのボタンが現れます。(PieceJSON のフォーマットが間違えている場合はアップロードに失敗します。)

まずはServiceProxyCoreボタンを押して、先ほど圧縮したzipファイルのriiiver_geting_started.zipを選択します。

これで PieceFunc とモジュールのアップロードは終了です。

次に、Piece のアイコンを指定します。

アイコンを指定をクリックします。

自分で用意した画像を使用する場合は、アップロードボタンを押してその画像を選んでください。

2つ制限があるのでご注意ください。

  • PNG形式
  • 画像ファイルサイズは512 x 512 px 以上

もしくは、Font Awesomeというサービスが提供しているアイコンを利用できます。

アイコンを選ぶの右隣にある検索バーでアイコンを検索すると、アイコン選択の右隣に表示されます。また、アイコンの色から色を選ぶことができます。

最後に決定ボタンを押せば、アイコンの登録はおしまいです。

残りのイラストファイルを指定とOAuthファイルを指定の2つは、Piece の申請に必要ではないので簡単に説明します。

イラストファイルを指定は、アイコンとは別に画像を1つ登録できます。登録した画像は、Piece の説明ページで使用されることになります。

OAuthファイルを指定は、OAuthという仕様のセキュリティを採用したサービスを活用する場合に使用する、OAuthファイルを指定できます。(具体的な解説は割愛します。)

それぞれ詳細はドキュメントをご確認ください。

それでは、「zipファイル(PieceFunc と モジュール)」 「アイコン」の登録が済んだら右下の確認ボタンを押します。

無事にアップロードができたら、このような画面が表示されます。どこか間違えている場合はエラーが表示されますので、そちらを参考に修正しましょう。

アップロードに成功したらこのようにテスト中となりますが、これはRiiiver SDKを使用した場合なので特に関係ありません。再度、編集ボタンを押しましょう。

最後に審査を出すボタンを押して完了です！

　

これで、Pieceの審査が通れば使用することができます。審査には時間がかかるので待ちましょう。

アップロードしたPiece の状態や編集は、piece一覧から確認できます。

iiidea

それでは、最後に オリジナル Piece を実行してみましょう！

iiidea のダウンロードと実行方法は第2弾を参照ください。

第13弾で解説した 「GASを利用して天気情報を管理する iiidea」 をダウンロードしましょう。iiidea 名は、「GAS × 天気」です。

ダウンロードして、セットしたら iiidea にデータを入力していきましょう。

「GAS の URL」,「Open Weather の API Key」を入力し、「都道府県」を選びましょう。

準備ができたら、最後に 時計のボタンを押して実行してみてください。スプレッドシートに天気情報が自動で記入されて、成功した証としてビープ音がなります。

以上で、Piece のテストとアップロードは終了です。

別の Piece で同様のテストなどを行う場合、PieceJSON のファイルなどを差し替えるだけで問題ありません。

11 ~ 14弾にわたって解説しましたが、これで1つの Piece の作成は終わりです。その他の Trigger Piece, Action Piece と組み合わせて iiidea として活用してみましょう！

もしくは、今回のソースコードを改良して色々な Piece を自作してみましょう！

最後まで、ご覧くださりありがとうございました。「Eco-Drive Riiiverを使ってゼロから学ぶ Riiiverチュートリアル」はこれで終了です。

お疲れ様でした！