質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.85%

  • Monaca

    891questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    299questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

onsenUIを使った スライダーから値を取得したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 116

fuji0130

score 1

 前提・実現したいこと

Monaca上でアプリを作ろうとしています。
Onsen UIの機能の一つである ons-range を使って、
スライダーを操作したときの、スライダーの値を取得したいと考えています。
Arduino と通信させて、LEDの調光操作をできればと考えています。
Lチカまでは出来ました

 発生している問題・エラーメッセージ

スライダーを付ける事は出来たのですが、
スライダーの現在の位置から値を取得しようと試みましたが、できませんでした
onsenUIのrangeの説明ページに書いてあったコードですが、これをどの部分にいれればいいのかがわかりませんでした
※参考URL   https://ja.onsen.io/v2/api/js/ons-range.html

var range = document.getElementById('range-1');
ons.notification.alert('Value is ' + range.value);

 該当のソースコード (作成途中ですが・・・。)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
//ここからはデバッグ用の関数部分 変数の中身を確認するための関数
ons.bootstrap();
ons.ready(function(){
    var log = function(message){
        if (typeof message == "object") message = JSON.stringify(message);
        $("#log").append(message + "<br />");
    };
    setInterval(function(){
        ble.scan([],5, function(device){
            if (device.name === "RN363A") {
                ble.connect(device.id,function(device){
                   $("#led1").change(function(){
                    var led1 = $("#led1").prop("checked") ? 1 : 0;   
                    ble.write(device.id,"D8FB2E3A-E180-49E5-98EC-0596B05F5DF2","F8C75AF6-4AAA-11E8-842F-0ED5F89F718B",new Uint8Array([led1]).buffer);                             
                    });

            });
           }
        });
    },3000); 
  });
    </script>
</head>
<body>
<!--  この部分は変数の中身確認用の出力エリア-->
    <br />
<ons-page>
  <ons-toolbar>
    <div class="center">Switches</div>
  </ons-toolbar>

  <ons-list>
    <ons-list-header>Settings</ons-list-header>
    <ons-list-item>
      <div class="center">
        LED 1
      </div>
      <div class="right">
        <ons-switch id ="led1"></ons-switch>
      </div>
    </ons-list-item>
   <!--ここからスライダー部分-->
   <ons-list-item>
        <ons-row>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-lightbulb"></ons-icon>
      </ons-col>
      <ons-col>
        <ons-range id ="led1-range" style="width: 100%;" value="25"></ons-range>
      </ons-col>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-twitter"></ons-icon>
      </ons-col>
    </ons-row>
    </ons-list-item>
       <ons-list-item>
      <div class="center">
        LED 2
      </div>
      <div class="right">
        <ons-switch id ="led2"></ons-switch>
      </div>
    </ons-list-item>
    <ons-list-item>
        <ons-row>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-lightbulb"></ons-icon>
      </ons-col>
      <ons-col>
        <ons-range style="width: 100%;" value="25"></ons-range>
      </ons-col>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-twitter"></ons-icon>
      </ons-col>
    </ons-row>
    </ons-list-item>
  </ons-list>
</ons-page>
</body>
</html>

 試したこと

<body>部分に、onsenUIのrange説明ページに書かれてあったコードをいれたり、
してみましたが駄目でした

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

Led2こんな感じで取れるかと思います(monaca環境で確認)
(id="led2range"定義&Javascript部分調整)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
//ここからはデバッグ用の関数部分 変数の中身を確認するための関数
ons.ready(function(){
    setInterval(function(){
      var led2 = $("#led2range > .range__input");
      console.log(led2.prop('value'));
    },3000); 
  });
    </script>
</head>
<body>
<!--  この部分は変数の中身確認用の出力エリア-->
    <br />
<ons-page>
  <ons-toolbar>
    <div class="center">Switches</div>
  </ons-toolbar>

  <ons-list>
    <ons-list-header>Settings</ons-list-header>
    <ons-list-item>
      <div class="center">
        LED 1
      </div>
      <div class="right">
        <ons-switch id ="led1"></ons-switch>
      </div>
    </ons-list-item>
   <!--ここからスライダー部分-->
   <ons-list-item>
        <ons-row>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-lightbulb"></ons-icon>
      </ons-col>
      <ons-col>
        <ons-range id ="led1-range" style="width: 100%;" value="25"></ons-range>
      </ons-col>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-twitter"></ons-icon>
      </ons-col>
    </ons-row>
    </ons-list-item>
       <ons-list-item>
      <div class="center">
        LED 2
      </div>
      <div class="right">
        <ons-switch id ="led2"></ons-switch>
      </div>
    </ons-list-item>
    <ons-list-item>
        <ons-row>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-lightbulb"></ons-icon>
      </ons-col>
      <ons-col>
        <ons-range style="width: 100%;" value="25" id="led2range"></ons-range>
      </ons-col>
      <ons-col width="40px" style="text-align: center; line-height: 31px;">
        <ons-icon icon="fa-twitter"></ons-icon>
      </ons-col>
    </ons-row>
    </ons-list-item>
  </ons-list>
</ons-page>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/03 13:05

    ご回答いただきまして、誠にありがとうございます
    教えて頂いたものをmonacaに組み込み、
    スライダーの現在位置を画面に数字で表示させようとしたのですが、
    <div id = "led2"></div> と書いたのですがうまくいきませんでした
    何か書き方がありましたら教えて頂けるとありがたいです

    キャンセル

  • 2018/05/03 13:06

    自分で新たに調べてみた結果、
    <input type="range" value="1" min="1" max="10" step="1"
    oninput="document.getElementById('output1').value=this.value">
    <output id="output1"></output>
    のように<body>部分に書いた所、一応はできるようになったのですが、
    onsenuiを使った方法も知りたいなと思っています

    キャンセル

  • 2018/05/27 13:19

    もうしばらくたったので見て頂けないかもしれませんが、
    ダメもとで質問させてください
    あれからしばらく別にやらなければいけない事があり、
    最近ようやく再開できたのですが、
    console.log?が動いていないのか
    値を取得できているのかどうかがわかりません
    教えて頂いた内容をそのままmonacaでビルドして、実行しましたが駄目でした
    何がいけないのかが自分ではわかりません
    教えて頂けないでしょうか??
    何卒宜しくお願い致します

    キャンセル

  • 2018/05/27 13:19

    consolelogpluginというのも入れてみましたが駄目でした

    キャンセル

  • 2018/05/28 18:49

    ChromeブラウザのF12ボタン表示時に出てくるchrome developer toolsで出てくるのは確認してます。

    キャンセル

  • 2018/05/30 09:59

    下記サンプルページのons-range部分を参考に値を取得していました。
    私はAngular1の勉強を多少した後ではないと理解ができなかったです。
    https://ja.onsen.io/playground/?framework=angular1&category=getting%20started&module=data%20binding

    キャンセル

  • 2018/05/31 07:12

    rururu3 様
    回答有難うございます
    調べて少し触ってみました
    watchという所で変数を見れると書いてあったのを見たのですが
    どこ見たらいいかわからないままで
    rururu3様の教えて下さった内容が理解できませんでした・・・

    tsuno_ai 様
    とてもわかりやすいサンプルを教えて頂きありがとうございます
    一度、試してみようと思います
    ありがとうございました

    キャンセル

check解決した方法

0

OnsenUIで設定したスライダーから値を表示する事ができました
ご教示下さった皆様、ありがとうございました
解決方法はこちらになります
led2スイッチの動作部分の中に下記内容を書き込んで、
androidのデバッガーで操作した際に数字が画面に表示されるのを確認してOKとなりました

var range = document.getElementById('led2range');
ons.notification.alert('Value is ' + range.value);
var led2 = document.getElementById('led2range').value;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Monaca

    891questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    299questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。