カテゴリーアーカイブ 言語

著者:村上

【Cordova】Bluetoothをアプリから有効にする方法

今回は、Corodvaのプラグイン「BluetoothSerial」についてです。
こちらのプラグインは、iBeaconのプラグインを利用するために、インストールしました。

GitHubはこちらから。

GitHub – don/BluetoothSerial: Cordova (PhoneGap) Plugin for Serial Communication over Bluetooth
https://github.com/don/BluetoothSerial

現在、開発中のアプリに Beaconの受信機能を実装していますが、このBeaconを使うときは、BluetoothがONになっている必要があります。
ですが、人によっては、スマートフォンの Bluetooth を、使うときはONにして、いつもはOFFにしている場合もあるかと思います。
というか、まさに私がそのタイプ。
なので、アプリを起動したタイミングで、BluetoothがONになっているかを確認し、もしOFFだったら、ユーザーに確認してONにする、ということをやりました。

インストール方法については、下記のコマンドを実行するだけです。

cordova plugin add cordova-plugin-bluetooth-serial

さて、BluetoothをONにするためのコードはこちら。

bluetoothSerial.enable(function() {
    // Bluetoothが有効
    // その時の処理
}, function() {
    // ユーザーがBluetoothを有効にしなかった
    // その時の処理
});

こちらを実行すると、BluetoothがOFFの場合は、下の画像のようなダイアログが表示されます。

こうしておけば、Bluetoothの有効化を促すことができますね。
なお、既にONのときには何も起こりません。

ちなみに、ただONかOFFかだけを確認したい場合は、isEnabled を使います。
書き方は、下記のとおりです。

bluetoothSerial.isEnabled(function() {
    // BluetoothがON
    // その時の処理
}, function() {
    // BluetoothがOFF
    // その時の処理
});

メッセージでBluetoothの有効化を促したい場合などは、こちらの方法が使えると思います。

以上、Corodvaアプリから Bluetoothを有効にする方法でした。

著者:村上

【Cordova】iBeaconとの推定距離を取得する方法【JavaScript】

試して分かりましたが、これは一筋縄ではいかないやつですね。
これに関しては、私にBeaconの知識がないのも原因でしょう。

ということで、早速本題へ。
今回、参考にさせていただいたサイトはこちらです。

RSSI と TxPower からビーコンとの距離および近接度（Proximity）を推定する – Qiita
https://qiita.com/shu223/items/7c4e87c47eca65724305

まず、ビーコンの信号から TxPower と RSSI という値を取得します。
ちなみに、それぞれの値は下記のようなものです。

• TxPower：ビーコンが発する信号の強さ
• RSSI：デバイス（AndroidやiOS端末）が受信した電波の強度

で、これらの値と距離との関係は、下記のような式で表すことができるとのこと。
なお、d は距離を表しています。

RSSI = TxPower - 20 * lg(d)

で、こちらの式から、距離 d の計算式は下記のとおりです。

 
d = 10 ^ ((TxPower - RSSI) / 20)

こちらの式をJavaScriptで書くとこうなります。

var d = Math.pow(10.0, (TxPower - RSSI) / 20.0

これで一応は、距離が取得できました。

こちらを実際に cordova-plugin-ibeacon に導入すると、下記のようになります。

delegate.didRangeBeaconsInRegion = function(pluginResult) {
    var beaconData = pluginResult.beacons[0];
    console.log("d = "+((Math.pow(10.0, (beaconData.tx - beaconData.rssi) / 20.0))));
}

ビーコンの信号が取得されている間、定期的に呼ばれる関数内で使用しています。
ちなみに、実際に取得できるデータはこちら。

{
    "eventType":"didRangeBeaconsInRegion",
    "region":{
        "identifier":"[ビーコンの名前]",
        "uuid":[ビーコンのUUID],
        "major":"1",
        "minor":"3",
        "typeName":"BeaconRegion"
    },
    "beacons":[
        {
            "uuid":[ビーコンのUUID],
            "major":"1",
            "minor":"3",
            "proximity":"ProximityNear",
            "rssi":-67,
            "tx":-58,
            "accuracy":1.7
        }
    ]
}

こちらを実行すると、ビーコンの信号を受信している間ずっと定期的に計算したビーコンとの距離が出力されていました。

が、参考にした記事によると、この値は「自由空間」という「障害物がない空間」での測定を前提とした計算方法らしいです。
障害物などの有無によって、電波の受信強度が変わるので、実際にはそのあたりも考慮する必要があるとのこと。
…はい、だんだん分からなくなってまいりました！

ということで、本日はいったんここまでとしたいと思います。
実際に取れた値も、やけに振れ幅が多いし…実際に使うにはまだまだでしょう。
もう少し、Beaconについての学習も進めていきたいと思います。

以上、Beaconとの距離を計算する方法でした。

著者:村上

【React】外部関数の定義方法とその呼び出し方法

特に難しいことではないのですが、忘れそうなので備忘録として。
タイトル通り、Reactで関数を別ファイルで定義する方法と、その関数を呼び出す方法についてです。

参考にさせていただいたサイトはこちらから。

JavaScript – react 共通で使いたい関数(112279)｜teratail
https://teratail.com/questions/112279

似たようなことを質問している方がいらっしゃったので、助かりました。

さて、まず関数の定義方法ですが、下記のように記述すると、外部から呼び出すことができます。

export default function [関数名]() {
  // 処理
}

なおこの時、1関数 1ファイルにしておくと、関数＝ファイルとしてディレクトリで管理できるので便利とのことでした。

で、この関数を呼び出し、実行するときは、下記のとおりです。

// 関数の読み込み
import [任意の関数名] from '[ファイルの場所]'

// 関数の実行
[関数名]();

方法としては以上です！
あとは、指定した箇所で関数が実行されます。

簡単ですが、以上、関数の定義方法とその呼び出し方法でした。
export default という記述を忘れそうだと思ったので、こうしてまとめました。
うっかり忘れたときの自分のためのコピー元ですね。
もし、同じことをやりたいと思っている方がいらっしゃれば、参考にしていただければと思います。

著者:asaba

【react-cordova】selectタグの使い方

selectタグを使ってsetstateで値を渡す方法を見つけたので、備忘録として残します（あんまり情報がなかったので探している方は参考にしてみてください！）

this.watch = this.watch.bind(this);

watch() {

var months = this.state.months;

$.ajax({
url: "test.html",
contentType: 'application/json; charset=UTF-8',
data : {

months,

},
success: function(data, textStatus){
console.log(months);

},
error: function(xhr, textStatus, errorThrown){
console.log("ban");
}
});
}

render下にコンポーネントを追加

<select
value={this.state.months}
onChange={ e => this.setState({months: e.target.value}) };
<option value="1"></option>;

</select>;

ES6で書いています。

まずrender内を見ると、valueでthis.state.monthsがデフォルトで最初に生成されています。

下のonchangeを踏むごとに発火してsetstateでajaxで値を飛ばしています。

option valueでは、表示したい値を設定しています。この時に一番上でbindするのを忘れないでください。

jsx内の関数は、html経験者が見るとうわってなると思いますが、stateの流れを理解すれば簡単に実装することができます。

reactで何すればいいの、stateとかpropの使い方が分からないという方はこれをひな型にしてみてください。それでは。