Getting Started

2020/3/31

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

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

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

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

第2弾では、『Eco-Drive Riiiver』という時計をカスタマイズしていきます。時計を持ってらっしゃる方は、実際に手に取りながら進めていきましょう。


目次


必要なモノ

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

Eco-Drive Riiiver

アプリにはそれぞれOS/Bluetoothのバージョン制限があります。実行や接続が上手くいかない場合は、バージョンに問題がないか下記をご確認ください。※バージョンは 2020/3/31 時点のものです。

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

それぞれの役割と関係

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」のアプリを立ち上げてみましょう。

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

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

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

今回は4番目の「Riiiverアカウントの作成」を解説します。まずは、赤枠のところの会員登録はこちらをタップします。

次に、「利用する地域」を決めます。入力が終わったらボタンをタップします。

登録するメールアドレスとパスワードをそれぞれ入力し、各種規約とプライバシーポリシーを確認のうえ、規約への同意チェックボックスにチェックをしたら、ボタンをタップします。

これで登録の準備は終わりです。先ほど入力した「メールアドレス」にメールが届きます。

リンクをクリックすると登録が完了されます。(使用しているメールアプリによって表示は異なると思います。)

送信元メールアドレスは、「support@riiiver.com」です。メールが届いていない方は、迷惑メールと間違えられていないか、もしくは迷惑メールフィルターの設定を変更して再度試してみましょう。

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

これで登録は完了です。「Riiiver」アプリに戻って、ログインしましょう。

ログインをすると、プロフィールを入力する画面になります。各項目を入力して、完了をタップします。

これでアカウント作成は終了です。


アプリと時計の連携

次にアプリと時計の連携を行います。「Eco-Drive Riiiver」アプリを開き、先ほど登録したアカウントでログインします。

次へを押すとアプリの説明を見れます。最後のスライドになると、プロフィールを設定するボタンが現れるのでそちらをタップしてください。(今すぐ開始をタップしても問題ありません。)

OKを押してください。

次にプロフィールを設定します。設定したら、Setをタップします。

次に目標歩数を設定します。設定したら、Setをタップします。

次に時計とスマートフォンをペアリングさせます。イラストの通り、2つのボタンを同時に押しましょう。時計を持っていない方は、SKIPを押してください。

動画もあるのでご参考ください。

時計の針がグルグル回って「ACTIVATE」を指せば、接続成功です!

その他、通知設定などのポップアップが表示されます。ご使用に合わせて設定してください。他のアプリ同様、後で変更できます。

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

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

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

「No Connected」の場合、繋がってません。もう一度接続を行ってください。

この画面のようにバッテリー残量が表示されていたら、接続できています。

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


iiideaのダウンロード

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

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

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

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

iiideaを検索したり、「スタートパック」などの公式がまとめたiiideaを確認することができます。

それでは、iiideaをダウンロードします。まずは、「メールを送る」で検索し出てくるiiideaをタップしましょう。

iiideaの説明ページへと移ります。黄色のダウンロードボタンを押しましょう。

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


iiideaの実行

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

アプリを再度開くかストアを閉じるとダウンロードしたiiideaが表示されます。

iiideaを増やすの隣に追加されます。まずは、iiideaの設定を行います。使いたいiiideaをタップすると

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

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

などを、こちらのページで操作することができます。xボタンを押すと、入力した内容を保存したうえで、このページを閉じることができます。

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

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

このようなポップアップが表示されます。続けるをタップします。

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

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

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

連携に成功すると、連携中に切り替わります。

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

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

セットしたいiiideaのアイコンをタッチし続けます。指で掴むイメージです。すると、iiideaを移動できるようになるので、矢印箇所に移動させます。

移動させると、時計にiiideaが送信されます。この画面が続く場合は、時計とアプリの接続が切れている可能性がありますので再接続しましょう。赤枠箇所が画像のようなアイコンになっている時は、接続が切れています。

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

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

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

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

この針が何を表しているのかを説明したいと思います。

上から順に「1」「2」「3」を指しています。装飾のブロック数と一致するデザインになっています。

そして、この「1」「2」「3」が何を表しているかというと

iiideaをセットした上部にある数字と対応しています。つまり、針が1を指している時は、「iiidea 1」を選択していることになります。

以下、「iiidea 1」の場合の「時計」と「アプリ」の画像です。

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

最後にiiideaの実行方法について説明します。

「iiidea」の実行タイミングは「T Piece」に応じてそれぞれ異なります。「T Piece」が何かを忘れた方はiiideaの説明ページを見て再確認しましょう。ちなみに、「ボタンを押す」ときの「ボタン」は下記画像の赤枠箇所となります。

それでは、ボタンを押してみましょう。

以上で、「iiideaの実行」は終わりです。次は、「オリジナルiiideaの作成」について説明したいと思います。


オリジナルiiideaの作成

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

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

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

こちらが最初の画面になると思います。
今回は「オリジナルiiideaの作成」なので、画面上側の「New iiidea 新しいiiideaをつくる」を選びます。

まずは、どのデバイスに対応したiiideaとするのかを選びます。今回は「cal.w510(=Eco-Drive Riiiver)」を選びます。

次に、「T」「S」「A」の3つのPieceを選びます。

順番は特に決まっていませんが、今回は「T Piece」から選びます。さきほどの画面から、Tをタップし、もう一度タップします。

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

今回は、左上の『ボタン押し』というのを選びます。(他の「Piece」を選んでいただいても大丈夫です。)

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

赤枠の選択ボタンをタップすると選択完了です。左上の戻るボタンを押せば前の画面に戻ります。

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

次に、「S Piece」を選んでいきます。操作方法は同じです。

Sをタップし、もう一度タップします。

Pieceを選ぶ画面に移ります。今回は赤枠のPieceを選びました。

Pieceの説明画面に移ります。選択ボタンをタップすると選択完了です。

セット終了です。

最後に「A Piece」となりますが、これも操作は全く同じなのでキャプチャ画像のみとします。

これで「A Piece」のセットは終わりです。

T, S, A の全てのPieceを選択し終えると、作成というボタンが現れますのでタップしてください。

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

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

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

入力すると、ボタンが現れます。タップして次に進みましょう。

『公開』『非公開』を選ぶことができます。『公開』を選ぶと、Riiiver Store に公開され他の人がダウンロードできるようになります。

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

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

アイコンを設定できたら、画面下側のボタンをタッチします。

次はフィルターを選びます。設定できたら、画面下側のボタンをタッチします。

最後に『iiidea』の説明を記入し、カテゴリーを選択します。みんなに使ってもらうためにも分かりやすく説明文を書きましょう。

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

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

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

自分が作成した『iiidea』のストア画面に移ります。DOWNLOADボタンを押すと、iiideaをダウンロードできます。ダウンロードされたiiideaは、CITIZEN Eco-Drive Riiiverアプリのホーム画面に表示されるようになります。

長かったですがこれで、『オリジナルiiideaの作成』は終わりです。お疲れ様でした。


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

様々なPieceを組み合わせて、iiideaを作ってみましょう。

また、オリジナル Piece の作成方法も今後解説していきます。

ご覧くださいましてありがとうございました。