2020/3/31
アプリを使って時計をカスタマイズ!
どうも、こんにちは!JellyWareです。
Getting Started!! Riiiver tutorialの第2弾となります。
このシリーズは、Riiiverやプログラミングを学び、初心者の方でもEco-Drive Riiiverを活用したオリジナルアプリを理解して作れるようになることを目指します。
第2弾では、『Eco-Drive Riiiver』という時計をカスタマイズしていきます。時計を持ってらっしゃる方は、実際に手に取りながら進めていきましょう。
目次
必要なモノ
今回は以下の3つを触っていきます。
アプリにはそれぞれ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つできることがあります。
- Riiiverアカウントでのログイン
- Googleアカウントでのログイン
- Facebookアカウントでのログイン
- Riiiverアカウントの作成
- パスワードの再発行
今回は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 の作成方法も今後解説していきます。
ご覧くださいましてありがとうございました。