カテゴリーアーカイブ JavaScript

村上 著者:村上

【Cordova】プラグイン「cordova-plugin-fcm」のgetTokenでnullが返ってくるときの対処法

現在進行形で格闘中のアプリの修正の中で、解決したものがあったのでそれをご紹介。
タイトル通り、「cordova-plugin-fcm」で端末の一意のトークンを取得する getToken() で、なぜか取得した値が null になる時の対処法です。
他にも同じエラーに悩んでいる人はいたようだったので、ある程度簡単に情報はヒットしました。
で、今回参考にしたサイトはこちら。

getToken() returns ‘null’ only after install・Issues #104・fechanique/cordova-plugin-fcm・GitHub
https://github.com/fechanique/cordova-plugin-fcm/issues/104

 

解決策としましては、もしトークンが取得できなかった場合は、onTokenRefresh() を使って、トークンを再取得しなおす方法が良いとのこと。
実際のコードはこちら。

FCMPlugin.getToken(
    (token) => {
        if(token == null){
            FCMPlugin.onTokenRefresh(function(token){
                // onTokenRefresh() でトークンを取得時の処理
            });
        } else {
            // getToken() でトークンを取得した時の処理
        }
    },
    (err) => {
        // エラー時の処理
    }
);

こんな感じです。
もし、getToken() で取得したトークンが null だったら、onTokenRefresh() でトークンを再取得しています。
現時点では、問題なくトークンが取得できました!
取得できたトークンはデータベースに保存なりして、プッシュ通知の送付に使います。

…が、なぜか今度はプッシュ通知が送れず…。
Androidだと、上記のトークンが取得できない問題もなく、あっさりとプッシュ通知送付まで実装できたのですが、まさかiOSでつまづくとは…。
一難去ってまた一難という感じですが…引き続き頑張ります。

 

ということで、cordova-plugin-fcm プラグインでトークンが取得できない時の対処法でした。
同じことにお困りの方は、是非お試しください。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】プラグインについての豆情報(二つあります)

今日はお題は二つの小ネタです。一つ目はcameraプラグインについてです。

 

cordova-camera-pluginとphonegap-camera-pluginはコルドバでカメラを使うことができるプラグインです。

自分のファイルの中にこの両方が入っており、どちらか消しても問題ないだろうと思いcordova-camera-pluginを削除したのですが

動かなくなりました。慌てて入れ直すとあっさりと元通り。なんでニコイチやねんと思いました。

米国のサイトまでいって調べたのですが、原因は分からずじまいです。

 

二つ目はプラグインを入れるタイミングの話です。

cordova platform rm androidした後にプラグインを入れてadd platformすると下記の画像のように怒られます。

原因は確信ではないのですが、直前に入れたプラグインを記憶できないためだと思われます。

なので必ず新しいplatformを入れてからプラグインを導入してくださいね、という感じです。赤文字は怖いですが大抵グレイドルか

プラグイン関係なので恐れることはないと思います。

以上小ネタでした。

 

  • この記事いいね! (0)
著者:杉浦

Pythonやjavascriptで現れる__の通称

 Double UNDERsocoreを略してdunderと読みます。発端は How do you pronounce “__” (double underscore)?らしいです。発端はどうあれ今はgoogleで`dunder __`と検索すると10万件以上ヒットするほど使われています。
 Pythonやjavascriptには__で囲われた変数が現れます。

__name__

__proto__

などです。この__は予約された変数で、プログラムを実行した時点ですでに中身が設定されている変数です。必然、中身を調べるわけですが、検索エンジンによっては__を読み取ってくれないことがあります。dunderはそのような時に助けなってくれる呼び方です。
 javascriptでは__proto__以外で__の絡んだ値をそうそう扱わないですが、pythonはまま使います。その中でもよく使うのは以下のあたりです。

class hogehoge
	def __init__(self, hoge, fuga):
		#コンストラクタ定義
if __name__ == '__main__':
	# メイン実行の関数呼び出し

 __init__はコメントの通りclassのコンストラクタ定義。if __name__ == ‘__main__’:は直接実行(__name__ = __main__)されているか、他ファイルから呼び出されてい実行(__name__ = ファイル名)されているかで場合分けです。過去のプログラムの一部を使いたい時はよくありますので、その時に備えて書いたりするわけです。

  • この記事いいね! (0)
村上 著者:村上

【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を有効にする方法でした。

  • この記事いいね! (0)
村上 著者:村上

【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との距離を計算する方法でした。

  • この記事いいね! (0)
村上 著者:村上

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

  • この記事いいね! (0)
asaba 著者: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の使い方が分からないという方はこれをひな型にしてみてください。それでは。
 

  • この記事いいね! (0)
村上 著者:村上

【React】「react-router」でLinkタグを使わないページ遷移の方法

昨日の記事に引き続き、今回もReactでのページ遷移の方法について。
前回は、Linkタグでのページ遷移について書きましたので、今回は関数内でのページ遷移方法についてです。

ちなみに、前回の記事はこちらから。

【React】「react-router」でのページ遷移の実装方法

 

今回参考にさせていただいた記事はこちらから。

react-routerのページ遷移をhandleで行う時にはwithRouterを使う – Qiita
https://qiita.com/junara/items/a4a98c27dc23fd53ebb9

ベースとなるページは前回の記事で作成したものを、ほぼそのまま流用します。

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Detail from './Detail'
 
const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
                <li><Link to='/detail'>Detail</Link></li>
            </ul>
            <hr />
 
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
            <Route path='/detail' component={Detail} />
        </div>
    </BrowserRouter>
  );
}
 
const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

追加しているのは、Detailページとそのページへのリンクです。

そして、そのDetailのページがこちら。

import React from 'react';
import { withRouter } from 'react-router';

class Detail extends React.Component {
  handleToAboutPage = () => {
    this.props.history.push('/about')
  }

  render() {
    return (
      <div>
        <button onClick={this.handleToAboutPage}>
          aboutページへ
        </button>
      </div>
    )
  }
}

export default withRouter(Detail)

こちらはAboutページへ遷移するためのボタンが表示されたページです。

上記のコード通り、関数でページ遷移を行うときは、6行目の this.props.history.push([遷移先ページ]) を使います。
ポイントは、最後のexport defaultで指定している Detail を withRouter で囲っている点です。
ページ遷移を実装するときには、こちらの処理が必要になります。
なお、今回別ファイルでDetailページを作成したので、ベースとなるページの3行目にある通り、Detailページを import する作業をお忘れなく。

 

以上、Linkタグを使わずに、関数内でページ遷移を行う方法でした。
ただ、サンプルコードをそのままコピーしただけなので、ベースのページとは少し書き方が違っています。
ベースページでは、const を使っていますが、Detailページでは class を使っているんですよね。
Detailページもベースに合わせたいのですが、書き方が違うのか、const で宣言すると、エラーになってしまい…只今修正中です。
それとも、この書き方でなければいけない何かがあるのかも?
とりあえず、引き続き調査したいと思います。

  • この記事いいね! (0)
村上 著者:村上

【React】「react-router」でのページ遷移の実装方法

今回はタイトルにもある通り、CordovaとReactで作成しているアプリにページ遷移を導入する方法についてです。
流石に1ページだけではアプリらしくないですからね。

なお導入方法について、参考にさせていただいた記事はこちら。

react-router@v4を使ってみよう:シンプルなtutorial – Qiita
https://qiita.com/m4iyama/items/b4ca1773580317e7112e

 

さて、導入ですが、まずは下記のコマンドで react-router-dom をインストールします。

npm install react-router-dom

事前準備はこれだけ。
あとは、実際にコードを書いていきます。

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
            </ul>
            <hr />

            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
        </div>
    </BrowserRouter>
  );
}

const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

ちなみに、上記のファイルを実際に画面に表示しているのはこちらのコードです。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';  // 上記のコードが書かれたjsファイル

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

ほぼサンプルコードのままですが、動作を理解するにはぴったりです。
まず、 BrowserRouterタグで一番外側を囲い、Routeタグで表示させたいページとそのURLを指定しています。
リンクについては、Linkタグを使います。
こちらは、HTMLのaタグとイメージが近いと思います。

また、ページ遷移をした際、値を渡すことも可能です。
11行目のfriendsページへのリンク先のように、ページ名の後に /[値] と指定します。
また、16行目のように、URLから値を受け取れるようにします。
そして、受け取った値は、34行目からのFriendsページで取得・表示をしています。
今回は、値を表示させているだけですが、値によって表示するデータを変えるなどの処理が行えます。

基本的なことは、以上が分かっていれば問題なく実装できるかと思います。

 

以上、react-routerでページ遷移を実装する方法でした。
次回は、Linkタグを使わずに、関数内でページ遷移する方法についてご紹介できればと思います。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova react】index.htmlをいじってヒヤッとなった話

jqueryを入れたくてpublic内のindex.htmlをいじっていたのですが、中々上手く導入いかずタグら辺をころころいじっていたら

Parse error:syntax errorというエラーに遭遇。

本来はphpでみるタイピングミスの際に吐かれるエラーみたいです。

どうやら、index.html内のや

http://src/jquery.3.3.1.jsの上に

持ってきてしまい、タグを読み込めなくなったのが原因みたいです。

jqueryを中々読み込めないからとむやみにタグを動かすと思わぬエラーに遭遇するので、これからjquery系を入れようとする人は

上記のことを意識しながらjqueryやzepto.jsを入れてみてください。

 

  • この記事いいね! (0)