

onsen-UI使っています。  
Visualstudioを使っています。  
UIのスライドメニューというか、ハンバーガー？のアイコンの動きとページ偏移は、正常にできます。

でも、下記のソースのように、clickの動作とセンサーの部分が動きません。

色々ネット検索して試行錯誤していますが、解決できず困っています。  
ご教授頂けましたら幸いです。

onclickのイベントは使えます。

`<ons-button modifier="large" (click)="mytest()">開始</ons-button>`

このclickの部分をonclickに書き換えて回避しました。  
でも、加速度センサーが動かないので、色々と調べていました。  
すると、センサーを使うようにコードを書きましたが、動いていない様子です。

[code]

    var watchID = null;
    
    //cordova 読み込みまで待つ
    document.addEventListener("deviceready", onDeviceReady, false);
    
    //加速度センサー　更新時間
    var options = { frequency: 1000 };  // 1秒ごとに更新
    
    //センサー戻り値
    watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    
    alert(watchID);
    
    // イベント発生
    function onSuccess(acceleration) {
    
        // x軸
        var x = acceleration.x;
        // y軸
        var y = acceleration.y;
        // z軸
        var z = acceleration.z;
    
        document.getElementById('xDir').innerHTML = x;
        document.getElementById('yDir').innerHTML = y;
        document.getElementById('zDir').innerHTML = z;
    
[/code]

このソースで、デバッグの為に入れた  
`alert(watchID);`  
が動かないのです。

センサーのX,y,zの値も、返ってきません。

画像のようにJavaScriptのファイルを配置しています。  
[![Visualstudioのファイル配置](https://i.stack.imgur.com/TfgNM.png)](https://i.stack.imgur.com/TfgNM.png)

HTMLのヘッダーは、このように書いています。

[code]

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'  data: gap: https://ssl.gstatic.com https://unpkg.com ; style-src 'self' 'unsafe-inline'; media-src *">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/onsenui.css" />
    <link rel="stylesheet" type="text/css" href="css/onsen-css-components.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
    <!--
        <script src="js/angular-onsenui.min.js"></script>
        <script src="js/angular.min.js"></script>
    -->
    <script src="js/onsenui.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/onsen_tp.js"></script>
    
[/code]

angularをコメントにしているのは、競合するのか確認するためです。  
コメントにする前も、コメントにしてからもonsen-UIのAPIやイベントは、起きていないです。

プラグインは、インストールしています。  
[![Visualstudioのプラグイン画面](https://i.stack.imgur.com/peVdB.png)](https://i.stack.imgur.com/peVdB.png)

[2](https://i.stack.imgur.com/peVdB.png):
<https://i.stack.imgur.com/Jxbec.png>

このソースを書き加えてテストしましたが、アラートがうごかないです。

ons.ready(function () {  
// CordovaのAPIを呼び出す準備が整った  
console.log(window.device);  
alert("ok");  
});

再度試したところ、ちゃんとOKが返ってきました。  
これから、clickのイベントを確かめます。  
また、センサーは、動きません。  
今、実機デバッグしています。  
このアプリは、ウェブアプリで作ったときは、正常に動作しています。  
デバッグで使っているスマホでも、センサー使うことが出来ました。。

実機デバッグでも、センサーとclickが反応しません。

ons.readyから返事があったので、センサーを、このイベントが起きたら設定する様に書いてみましたが、状況は変わりませんでした。

ons.ready(function () {  
// CordovaのAPIを呼び出す準備が整った

[code]

    //加速度センサー　更新時間
    var options = { frequency: 1000 };  // 1秒ごとに更新
    
    //センサー戻り値
    watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    
[/code]

});

Cordovaのテンプレートの最後の方に、大事なスクリプト3行を見つけました。  
これをコピペして、試しているところです。  
ブラウザのエミュレータでは、変化なかったので、実機デバイスでの確認を試みています。

2018/04/11追記  
先日Cordovaのテンプレートの下の方に見つけたJavaScriptの3行をコピペしてビルドまでしましたが変化ありませんでした。

2018/04/12自己解決しました。  
  
clickのイベントは、onclickしかないようですね。  
Monacaにログおインして、テンプレートを見たら、onclickが使われていました。

それからセンサーに関しては、下記のコードを書いたら、できました。

[code]

        function onDeviceReady(){
            console.log("センサーが使えるようになりました！");
        }
    
[/code]

(click)は、無いみたいですね、  
今日Monacaにログインして、テンプレートを確認したら、onclickが使われていました。

Visualstudioのブラウザのエミュレーションでも、センサーを使うことが出来ました。  
[![ブラウザのエミュレーションのモーションセンサーの値](https://i.stack.imgur.com/peVdB.png)](https://i.stack.imgur.com/peVdB.png)  


CC BY-SA 3.0
2018-04-10T05:40:48.970
43116
2020-09-05T11:00:50.150
2018-04-12T09:53:14.330
28084
28084
question
javascript android onsen-ui visual-studio
onsen-UIが読み込まれていない？


clickのイベントは、onclickしかないようですね。  
Monacaにログおインして、テンプレートを見たら、onclickが使われていました。

それからセンサーに関しては、下記のコードを書いたら、できました。

[code]

    function onDeviceReady(){
        console.log("センサーが使えるようになりました！");
    }
    
[/code]

(click)は、無いみたいですね、  
今日Monacaにログインして、テンプレートを確認したら、onclickが使われていました。

Visualstudioのブラウザのエミュレーションでも、センサーを使うことが出来ました。  
自己解決しましたので、改めて回答として書きました。  
使い方に慣れていないため、申し訳ありません。


CC BY-SA 3.0
2018-04-13T11:05:58.853
43213
2018-04-13T11:05:58.853
28084
43116
answer