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

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

新規登録して質問してみよう
ただいま回答率
85.49%
Bluetooth

Bluetoothとは短距離の間でデータを交換するための無線通信規格である。固定・モバイル両方のデバイスから、短波の電波送信を行うことで、高いセキュリティをもつパーソナルエリアネットワーク(PAN)を構築する。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3303閲覧

ReactNativeのBLEManagerを使ってBLEデバイスと接続したい

takk_014

総合スコア53

Bluetooth

Bluetoothとは短距離の間でデータを交換するための無線通信規格である。固定・モバイル両方のデバイスから、短波の電波送信を行うことで、高いセキュリティをもつパーソナルエリアネットワーク(PAN)を構築する。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/11/02 03:03

前提・実現したいこと

表題の通り、BLEManagerを使ってBLEデバイスに接続をしたいです
環境はMacOS CatalinaでReact Nativeを使っています
作ろうとしているアプリはiOS用アプリです

試したこと

現在、BLEManagerのインストールができ、BluetoothのON・OFFの状況の把握までできました
https://github.com/innoveit/react-native-ble-manager#basic-example
こちらのBLEManagerの公式サイトを見ながらやっています
接続するには接続先となるBLEデバイスのMACアドレスが必要とのことですがMACアドレスの取得方法がわかりません...
海外のプログラミング交流サイトによると「iOSの場合、デバイスのMACアドレスを取得することはできず、代わりにランダムなUUIDを取得する」という話ですが、もしそれが本当だとしたらどのようにして接続するのでしょうか?

こちらが現在のコードになります

javascript

1import React, { Component } from 'react';//コンポーネントをインストール 2import { NativeModules, NativeEventEmitter } from 'react-native'; 3import { Text, View, Image, StyleSheet } from 'react-native'//コンポーネントを指定してインストール 4import styles from './styles'//スタイルシートを読み込み 5import BleManager from 'react-native-ble-manager';//ble-managerをインストール 6 7const BleManagerModule = NativeModules.BleManager; 8const bleManagerEmitter = new NativeEventEmitter(NativeModules.BleManager); 9 10class MainScreen extends React.Component { 11 12 state = {//bt_statusオブジェクトをon 13 bt_status: 'off', 14 } 15 16 componentDidMount() { 17 BleManager.start({showAlert: false})//BleManagerを起動 18 .then(() => {//正常に起動できたら 19 console.log('BleManager initialized');//consoleに左記を表示 20 bleManagerEmitter.addListener(//リスナー(イベント時に発動する関数)の登録 21 'BleManagerDidUpdateState',//BLEの状態を変化させる 22 (args) => { 23 this.setState({bt_status: args.state})//引数をもとにbt_statusを変更 24 } 25 ); 26 BleManager.checkState()//モジュールにBLEの状態をチェックさせ、 27 //BleManagerDidUpdateStateイベントをトリガーする 28 //トリガーとは任意のタイミングでイベント処理を実行させること 29 30 }) 31 .catch((error) => {//起動できなかったら 32 console.log(error)//コンソールにエラーを表示 33 }); 34 } 35 36 render() { 37 //stateのbt_statusを表示 38 return ( 39 <View style={styles.container}> 40 <Text style={styles.welcome}> 41 Bluetooth: {this.state.bt_status} 42 </Text> 43 </View> 44 ); 45 } 46} 47 48export default MainScreen;

本来ならばお金を払って教えてもらうような内容になるため教えていただければ本当に感謝致します
詳しくない方でも何か知っていることがあれば教えていただきたいです
どうかご教授よろしくお願い致します。。。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Wind

2020/11/05 01:04

>「iOSの場合、デバイスのMACアドレスを取得することはできず、代わりにランダムなUUIDを取得する」という話ですが、もしそれが本当だとしたらどのようにして接続するのでしょうか? iOSは持っておらずAndroidでのBLE知識ですので、雑談程度に。 Appストアで「nRF Connect」などのBLEアプリを使用してみてはどうでしょうか? フリーのアプリでMacアドレスが取得出来れば、少なくともiOSの問題では無くなります。 取得せず何らかの方法で識別していれば、その挙動が参考になるかと思います。
guest

回答1

0

自己解決

なんとか自己解決しました
以下がコードになります

javascript

1import React, { Component } from 'react';//コンポーネントをインストール 2import { NativeModules, NativeEventEmitter } from 'react-native'; 3import { Text, View, Image, StyleSheet,Button,FlatList } from 'react-native'//コンポーネントを指定してインストール 4import styles from './styles'//スタイルシートを読み込み 5import BleManager from 'react-native-ble-manager';//ble-managerをインストール 6 7const BleManagerModule = NativeModules.BleManager; 8const bleManagerEmitter = new NativeEventEmitter(NativeModules.BleManager); 9var connectflag = new Boolean(true); 10 11class MainScreen extends React.Component { 12 13 //bt_statusオブジェクトとperipheralListオブジェクトの初期値割当 14 state = { 15 bt_status: 'off', 16 peripheralList: [], 17 } 18 19 constructor(){ 20 super() 21 this.handleDiscoverPeripheral = this.handleDiscoverPeripheral.bind(this); 22 } 23 24 //コンポーネント(アプリの部品)がマウント(操作可能な状態)された直後に発動するクラス 25 componentDidMount() { 26 BleManager.start({showAlert: false})//BleManagerを起動 27 .then(() => {//正常に起動できたら 28 console.log('BleManager initialized');//consoleに左記を表示 29 30 bleManagerEmitter.addListener(//リスナー(イベント時に発動する関数)の登録 31 'BleManagerDidUpdateState',//BleManager(Blutooth)のon/off状態が変化した時 32 (args) => { 33   //setStateで更新して再レンダリングしてBluetoothの状態表示を更新 34 this.setState({bt_status: args.state}) 35 } 36 ); 37 38 bleManagerEmitter.addListener(//リスナー(イベント時に発動する関数)の登録 39 'BleManagerDiscoverPeripheral',//BLEデバイスを発見した時 40 (args) => { 41 /*peripheralオブジェクトのidとnameプロパティに発見したBLEデバイスのidと名前を入れる*/ 42 //idはUUIDが入ってるがnameは未定義 43 peripheral = { 'id': args.id, 'name': args.name }; 44 //peripheralListにperipheralオブジェクトを要素として追加する 45 this.state.peripheralList.push(peripheral); 46 //setStateで更新して再レンダリングしてリストを更新 47 this.setState(this.state.peripheralList); 48 49 } 50 ); 51 52 //handleDiscoverPeripheralに処理が飛ぶ 53 this.handlerDiscover = bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', this.handleDiscoverPeripheral ); 54 55 BleManager.checkState()//モジュールにBLEの状態をチェックさせ、 56 //BleManagerDidUpdateStateイベントをトリガーする 57 //トリガーとは任意のタイミングでイベント処理を実行させること 58 59 }) 60 .catch((error) => {//起動できなかったら 61 console.log(error)//コンソールにエラーを表示 62 }); 63 } 64 65 //クラス名は任意、BLEデバイスをスキャンする処理 66 scanBLED() { 67 //BleMnagerを使ってBLEデバイスをスキャンする 68 //第二引数がスキャンする秒数となる 69 BleManager.scan([], 5, false) 70 .then(() => {//スキャンに成功したら 71 console.log('Scan started');//コンソールに左記を表示する 72 this.setState({peripheralList: []});//BLEデバイスリストを初期化する 73 connectflag=true; 74 }) 75 .catch((error) => {//スキャンに失敗したら 76 console.log(error);//コンソールにエラーを表示する 77 }); 78 } 79 80 //ここでスキャンしたデバイスに接続する 81 handleDiscoverPeripheral(peripheral){ 82 //if(connectflag){ 83 //peripheralの持ってるデータの確認 84 //console.log(JSON.stringify(peripheral)); 85 alert(JSON.stringify(peripheral.id));//接続したBLEデバイスのUUIDを表示 86 87 //androidはmacID, iosはserviceUUIDが取得できる 88 BleManager.connect(peripheral.id); 89 console.log(peripheral.id); 90 connectflag=false; 91 //} 92 } 93 94 //クラス名は任意、BLEデバイスリストを構成する処理 95 //引数itemは固定で使う(idとnameは引数itemとしてperipheralオブジェクトが入って定義される?) 96 //FlatListに渡すstyle名とItemキーを定義する 97 //Htmlで画面を構成するオブジェクトに対してidとnameを記述するのと同じ 98 renderPeripheral({ item }) { 99 return ( 100 <View style={styles.peripheralList}> 101 <Text style={styles.id_text}>{item.id}</Text> 102 <Text style={styles.id_text}>{item.name}</Text> 103 </View> 104 ); 105 } 106 107 108 render() { 109 //stateのbt_statusを表示 110 //scanボタンの設置 111 //periphera(BLEデバイス)のリストを表示(FlatListはデータソースとstyle名&Itemキーが必要) 112 //this.scanBLED.bind(this)でscanBLEDをscanボタンにバインド(関連付ける) 113 //this.renderPeripheral.bind(this)でrenderPeripheralをBLEDリストにバインド(関連付ける) 114 return ( 115 <View style={styles.container}> 116 <Text style={styles.welcome}> 117 Bluetooth: {this.state.bt_status} 118 </Text> 119 <Button title="Scan" onPress={this.scanBLED.bind(this)} /> 120 <FlatList data={this.state.peripheralList} renderItem={this.renderPeripheral.bind(this)} /> 121 </View> 122 ); 123 } 124 125} 126 127export default MainScreen;

やはりMACアドレスの取得はしないようです
BleManagerDiscoverPeripheral(BLEデバイス発見)トリガーが発動した時にargsというBLEManagerが管理しているであろう謎の引数からUUIDを取得できます
その後、connectメソッドにこのUUIDを渡すことによって接続ができます
コメントをくださったWindさんありがとうございます
確かにMACアドレスを取得するだけなら他にも方法はありそうですね
react-nativeのさらにBLEManagerとなるとマニアックな内容になリます
そのため情報量が少なく大変になると思うので、この回答が誰かの手助けになれば幸いです

投稿2020/11/10 23:44

takk_014

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問