Getting Started

2019/10/4

アプリを使って時計をカスタマイズ!

どうも、こんにちは!JellyWare株式会社です。

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

本サービス『Riiiver』のチュートリアルとなるこのシリーズでは

『Riiiver』がどういったものであるのか、どのように『Riiiver』を使用するのかを学べたり、『Riiiver』と連携する時計『Eco-Drive Riiiver』の活用方法をお伝えしていきます。

最終的には『自作スマートフォンアプリ』に『Riiiver』を組みこむところまでご紹介する予定です。

第二弾では、『Eco-Drive Riiiver』という時計をカスタマイズしていきます。

時計を持ってらっしゃる方は、実際に手に取りながら進めていきましょう。
持っていらっしゃらない方は、想像の中で楽しんで頂ければと思います。


【目次】

  • 必要なモノ
  • それぞれの役割と関係
  • Riiiverアカウントの作成と設定
  • アプリと時計の連携
  • iiideaのダウンロード
  • iiideaの実行
  • オリジナルiiideaの作成

必要なモノ

今回は以下の3つを触っていきます。

Eco-Drive Riiiver

見た通りですが、左から順に『時計』『スマートフォンアプリ』『スマートフォンアプリ』となります。

また、アプリに関してはOS/Bluetoothのバージョン制限があります。
実行や接続が上手くいかない場合は、バージョンに問題がないか下記をご確認ください。

アプリ 対応するバージョン
CITIZEN Eco-Drive Riiiver iOS12以上・Android 8.0以上、Bluetooth 4.2以上
Riiiver iOS12以上・Android 4.1以上

それぞれの役割と関係

Eco-Drive Riiiver


『IoT』の『thing(モノ,コト)』にあたります。『Riiiver』に対応していて『iiidea』の中心人物となります。

CITIZEN Eco-Drive Riiiver


『Eco-Drive Riiiver』専用アプリで、Bluetoothを使って時計とスマートフォンを繋げます。

Riiiver


『Riiiver』専用アプリとなります。直接的に『Eco-Drive Riiiver』の時計とは連動しませんが、『iiidea』をダウンロードしたり作ったりできるので間接的に関係します。

おおよそ、それぞれの役割が分かったと思いますので
関係性を含めてざっくり図にしてみました。

2つのアプリを使うので、どっちがどっちか混合しないように注意しましょう!


それでは、アプリの操作説明に移りたいと思います。

以下、躓いたところや気になる箇所をご覧ください。ボタンを押すとページが開くようになっています。

Riiiverアカウントの作成と設定

早速アプリを使って色々していきたいと思うのですが、この2つのアプリを使用するにはアカウントが必要となります。

以下、3つのアカウントのうちどれかがあれば大丈夫です。

  • Riiiverのアカウント
  • Googleのアカウント
  • Facebookのアカウント

Google,Facebookアカウントの作成方法は割愛させていただき、Riiiverのアカウント作成方法を説明します。

「Riiiverのアカウントなんかいらないよ!」って方は悲しいですが、ここのところは読み飛ばして頂いて大丈夫です…


それでは、「Riiiver」か「CITIZEN Eco-Drive Riiiver」のアプリを立ち上げてみましょう。

初めてアプリを開いた場合は、ログイン画面が表示されると思います。
※以降はスマートフォンの画面の画像とともに解説していきます。

この画面では、5つできることがあります。

  1. Riiiverアカウントでのログイン
  2. Googleアカウントでのログイン
  3. Facebookアカウントでのログイン
  4. Riiiverアカウントの作成
  5. パスワードの再発行

今回は4番目の「Riiiverアカウントの作成」を解説します。
まずは、赤枠のところのDoesn’t have an account? Create Accountというところをタッチします。

すると、次の画面に移ります。

ここでは、『利用する地域』を決めます。
素直に選択した方が本サービスを十分に楽しめると思います。

入力が終わったら、Nextの『→』ボタンをタッチすればオッケーです。次の画面に移ります。


ここでは、『使用するメールアドレス』と『パスワード』を決めます。ログインする際に必要なので、『パスワード』は忘れないようにどこかにメモなどをしましょう。

また、サービス利用規約のチェックボタンも忘れてはいけません。入力、チェックが終わったらSign Upの『→』ボタンをタッチすれば次の画面に移ります。

この画面になれば、順調に登録できています。
先ほど登録した『メールアドレス』にメールが届いていると思います。


使用しているメールアプリによっては表示が異なると思います。ちなみにメールアドレスは、『no-reply@verificationemail.com』です。明らかに返信に対応していなさそうですね。

メールが届かない方は、迷惑メールと間違えられていないか、もしくは迷惑メールフィルターの設定を変更して再度試してみましょう。

返信は不要なので、そのままリンクのところをタッチしましょう。


すると、こういうサイトに繫ると思います。
URLは、
https://str.riiiver.com/api/confirmUser?code=xxxxx&user=xxxxx&action=signUp
となります。「xxxxx」の部分は人によって違います。

これでメールアドレスの確認は終わりです。一般的なサービスと同じ登録手順ですね。それでは、赤枠内のリンクを押しましょう。アプリが自動で開くと思います。

すると、こういう画面に移っていると思います。

各項目を入力して、Doneをタッチすればオッケーです。『Postal code』は見慣れない英語ですが郵便番号のことです。

というわけで、これで無事アカウント作成は終了です。晴れて、Riiiverの世界に入ることができました!

次にRiiiverアプリで使用する『プロフィール』と『1日の目標歩数』の設定をします。こちらはまた後で変更することも可能です。

まずはプロフィールの設定ですね。

入力が終わったらSetボタンを押します。

押すと、『1日の目標歩数』の設定ができます。

こちらも目標歩数を設定したら、Setボタンを押せばオッケーです。

長かったですが、これでRiiiverアカウントの作成と設定は終わりです。

おそらく『時計とスマホを繋げましょう』という画面に移っていると思いますが、そのままで大丈夫です。次で説明します。


アプリと時計の連携

次にアプリと時計の連携を行います。

さきほどのアカウントの設定を終えるとこういった画面に移ったと思います。

Bluetoothをオンにしていない人は、次のようになっていると思うので、操作している端末のBluetoothをオンにしてください。

時計をまだ持っていないけど、先にアプリの操作を予習したい!って人はSKIPボタンを押せば大丈夫です。また後で時計と接続することができます。

では、画面にしたがって2つのボタンを同時に押しましょう。

(あまりないと思いますが、Eco-Drive Riiiverが何個もあるところで接続しようとすると、別の時計と接続してしまう場合があるので気をつけてください。)

押すボタンは、この2箇所です。

動画も撮ってみました。

時計の針がグルグル回って『Activate』を指せば、接続成功です!

接続ができたら、自動で次の画面に移ります。

この画面がホーム画面となります。まずは、念のため接続ができているかを確認しましょう。

右上のハンバーガーアイコンをクリックします。

私の時計というところをクリックします。

『No Connected』はダメですね。繋がってません。もう一度接続を行ってください。

この画面のようにバッテリー残量が表示されていたら、接続できています。
残量は時計毎に違うので、画像のように90%じゃなくても問題ないです。

これでアプリと時計を繋げられているのを確認できました。この画面は左上の×ボタンを押せば閉じることができます。

次に、お楽しみのiiideaを実行していこうと思います。


iiideaのダウンロード

長かったですが、これで諸々の設定は終わりです。

それでは、iiideaを実際に使っていきたいと思います。まずは、iiideaをダウンロードしていきましょう。

まずは使用するアプリですが

こちらです。他の人が作ったiiideaであればこのアプリだけで大丈夫です。

アプリを開くと、次のような画面になると思います。(ログイン画面が出た方は再度ログインしてください)そして、iiideaを増やすという赤枠の箇所をタッチします。

すると、Riiiver Storeに移ります。こちらで『iiidea』をダウンロードすることができます。

気になるiiideaを検索するのも良いですが

『ジャンル特集』や『カテゴリー』や『新着iiidea』など、Riiiverさんの方でまとめていたりもしますので、是非ご覧ください。

こういった感じにiiideaがいっぱいまとめられてます。どれか一つ選んで、タッチしてみましょう!

するとiiideaの説明ページへと移ります。

改めて説明を読んで問題なければ、黄色のDOWNLOADボタンを押しましょう。

ボタンが青色になってDOWNLOADEDになっていればダウンロード完了です!


iiideaの実行

それでは、iiideaをダウンロードできたので実行してみたいと思います。

まずダウンロードされたiiideaの行く先ですが

引き続き、時計と連携するこのアプリですね。

アプリを再度開くかストアを閉じるとダウンロードしたiiideaが姿を現していると思います。
見つからない!って方は一度アプリを落として更新すると姿を現すと思います。

このように、最初は何もなかったと思いますが、ひっそりとiiideaが追加されていると思います。

まずは、iiideaの設定を行います。使いたいiiideaをタップすると

iiideaの説明ページが表示されます。

  • iiideaを使用する上での必要な連携の設定
  • 各Pieceの説明
  • 各Pieceの設定

などなどがこちらのページで操作することができます。必要なところを入力し終えたら、左の✖️ボタンを押せばこのページを閉じることができます。

今回は試しにGmailの設定を行ってみましょう。まずは、1枚目の画像赤枠の連携するボタンをタップします。

すると、このようなポップアップが表示されます。連携するをタップします。

また、ポップアップが表示されます。続けるをタップします。

すると、アプリ内でブラウザが立ち上がりこのような画面に移ります。連携したいGoogleアカウントを選択しましょう。

ポップアップが表示されます。許可をタップします。

このような画面に移ります。赤枠の許可ボタンをタップします。

最後にこの画面が移れば、連携成功です。ブラウザを閉じてアプリに戻りましょう。

確かに連携中と表示されていますね

次に、赤枠内を設定していきます。こちらのPieceでは、順に『メール本文』『メールタイトル』『送り先』の3点を設定できます。

設定が済んだら、iiideaを時計にセットしていきましょう。

まずは、セットしたいiiideaのアイコンを長くタップします。指で掴むイメージです。するとiiideaを動かせるようになるので、画面の上側に移動させます。画像の矢印箇所に移動させると、ちょうどハマる場所があります。

こちらが時計にiiideaを送信している様子です。この画面が続く場合は、時計とアプリの接続が切れている可能性がありますので再接続しましょう。

少し待って、こちらの画面のようになればiideaのセットは終了です。次に、iiideaの実行をしていきましょう。

後はアプリは不要です。アプリを落とさずにスマートフォンは脇に置いて、Eco-Drive Riiiverを取り出しましょう。

まずは、実行する『iiidea』を選択します。赤枠の4時位置のボタンを押します。すると、左下の小さな針が動き出します。

まだ一度も押していなければ、画像のようになると思います。既に一度押されていた方は、もう一度ボタンを押すと針がまた動くので、画像のようになるように調整してください。

さて、この針が何を表しているかのを説明したいと思います。
(取扱説明書を既に読まれた方はご存知かと思われますが)

実はシンプルに上から順に『1』『2』『3』を指しています。
よくみれば、それぞれ装飾のブロック数が違っていて直感的に分かるデザインになっていますね。

そして、この『1』『2』『3』が何を表しているかというと…

先ほど行った、iiideaのセットした画面上部にある数字と対応しています。

コトバだけだと分かりにくいと思いますので、『iiidea 1』の場合の『時計』と『アプリ』の写真を載せます。

これで『iiidea』の選択は終わりです。どこにどのiiideaをセットしたのか忘れないように気を付けましょう。

最後に肝心の実行です。
確認となりますが、『iiidea』の実行タイミングは『T Piece』に応じてそれぞれ異なっていますので気を付けてください。

忘れた方はiiideaの説明ページを見て再確認しましょう。ちなみに、『ボタンを押す』の『ボタン』は下記画像の赤枠箇所となります。

それでは、選んだ『T Piece』の条件を満たすようにしてみましょう!

それぞれみなさんが体験した方が面白いと思いますので、ここでは特にデモはお見せしません!

以上で、『iiideaの実行』は終わりです。

みなさん色々な『iiidea』をダウンロードして実行して
思う存分『Riiiver』を楽しんでください!

次は、『オリジナルiiideaの作成』について説明したいと思います。


オリジナルiiideaの作成

はい、それでは『オリジナルiiideaの作成』について説明していきたいと思います。

使用するアプリはこちらです。

アプリを開いてログインをしてください。一度ログインをしていれば、ログインは不要かと思います。

こちらが最初の画面になると思います。
今回は『オリジナルiiideaの作成』なので、画面上側の『New iiidea 新しいiiideaをつくる』を選びます。ボタンを押せばオッケーです。

まずは、どのデバイスのiiideaとなるのかを選んでいきます。

このコンテンツを作成している段階では、まだ『calw510』というのしかないです。
他のデバイスが増えるのを期待しましょう!(もしくはみなさん自身が開発してアプリに乗せてもらえるように頑張りましょう)

それでは赤枠部分のcalw510をタッチして、次に進みましょう。


するとこういった画面に移ります。

『T』『S』『A』の3つのアルファベットが目立ちますね。

そうです、ここでは『Piece』を選んでいきます。『T』『S』『A』で選ぶ順番は特にないので、好きな順番に選んで頂いて大丈夫です。

『Piece』によっては、組み合わせられないものもあるので注意してください。

今回は、『T』『S』『A』の順に選んでいきます。操作方法は全て同じとなりますが念のため全部の画面を説明したいと思います。

まずは『TPiece』。

さきほどの画面から、Tのところを押すと『T』の部分が広がります。赤枠を押して進んでいきましょう。

早速『Piece』を選ぶことができます。

画面右上の>を押すと他のジャンルの『Piece』を見ることができます。

自分は、左上の『ボタン押し』というのを選びましたが、みなさんは他の好きな『Piece』を選んでいただいても大丈夫です。

すると、Pieceの説明画面に移ります。

説明を読んでお気に召さなかった場合は、左上のBackボタンを押せば前の画面に戻ります。お気に召した場合は、赤枠のsetボタンを押してください。

最初の画面に戻ります。画像のように『チェックマーク』がついていれば『TPiece』のセットは終了です。

次に、『S Piece』を選んでいきます。操作方法は全く一緒です。

『S』のところを押して>を押します。

同じように、『Piece』を選ぶ画面に移り、同じように、右上の>を押すと他の『Piece』をみることができます。

自分は赤枠の『Piece』を選びました。

同じように『Piece』の説明画面に移ります。
お気に召さなかったらBackボタンを、お気に召したらSetボタンを押してください。

セット終了です。

最後に『A Piece』となりますが、これも操作は全く同じなので
キャプチャ画像のみとします。しつこい人は嫌われると聞きますので。

はい、これで『APiece』のセットは終わりです。

『S』『T』『A』の全ての『Piece』を選択し終えると、作成というボタンが現れます。

後悔ないように『Piece』を選べた方は作成ボタンを押してください。


次に、iiideaに関する設定を行っていきます。設定する内容は以下の通りです。

  • iiideaの名前
  • iiideaのアイコン
  • iiideaの説明

作成ボタンを押すとこの画面に移ります。
まずは『iiideaの名前』を決めます。日本語と英語の2種類決める必要があるので注意しましょう。

入力すると、ボタンが現れます。満足する名前を決められた方は、このボタンを押して次に進みましょう。

公開を選択していきます。
審査が済まないと公開されないので、恥ずかしい方はそれまでに『iiidea』を削除すれば大丈夫です。

次にアイコンを選んでいきます。RGBで色を設定したり、Pixaby画像を使うボタンをタップするとRiiiverが用意した画像を自由にアイコンにすることができます。

iiideaに合う画像を探して選んでいきましょう。

オシャレな感じにアイコンを設定できたら、画面下側に隠れている『→』ボタンを押していきましょう。

次はフィルターです。好きな色を選んでください。

選んだら下の方にあるボタンを押してください。

最後に『iiidea』の説明とカテゴリーになります。

審査の基準にもなりますが、みんなに使ってもらうためにも分かりやすく説明文を書きましょう。

説明文を記入して、カテゴリーを選択したら
画面下の完了ボタンを押します。

これで完成です!!
お疲れ様でした。このままこのiiideaをダウンロードしていきましょう。

現状、このページを逃すとダウンロードするタイミングがないようです…アップデートを待ちましょう。

このページの下にいくと、ストアからダウンロードというボタンがあるので押しましょう。

すると、自分が作成した『iiidea』のストア画面に移ります。
後は同じでDownloadボタンを押せばダウンロードできます。

上手くいけば、Eco-Drive Riiiverアプリの方にも反映されているはずです。

長かったですがこれで、『オリジナルiiideaの作成』は終わりです。お疲れ様でした。
実行方法は、同じなので前のところを参照して実行してみてください!


以上で、『まずはRiiiverのAppを使って時計をカスタマイズ!』は終わりとなります。

初めて、Riiiverに触れてみた感想はどうでしょうか?
もっといろいろと自分で作りたくなってきましたでしょうか?

徐々に解説していきますのでお待ちください。

それでは、ご覧いただきありがとうございました。