著者アーカイブ 村上

村上 著者:村上

【Android】「Only the original thread that created a view hierarchy can touch its views.」の対処法

今日の記事は、Androidアプリ開発中に遭遇したエラーについてです。
修正はそこまで大変ではなかったのですが、使用頻度が低く、忘れそうだったので備忘録としてまとめます。

エラーは「Only the original thread that created a view hierarchy can touch its views.」というもので、こちらはメインスレッド以外で、TextView などの UI を変更しようとすると発生するエラーです。
シンタックスエラーとは違い、ビルドは通ってしまうので要注意ですね。

 

では、早速対処法についてご紹介。
今回参考にさせていただいたサイトはこちらです。

メインスレッド以外でUIを変更する方法 – Accele Biz IT開発技術 調査報告書
http://accelebiz.hatenablog.com/entry/2016/09/01/061934

エラーが発生したコードはこちら。

TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    textView = findViewById(R.id.[ID名]);
    showMessage();
}

private void showMessage(){
    try {
        /* 処理 */
        textView.setText("[表示したい文字列]");
    } catch (JSONException e) {
        e.printStackTrace();
    }
}

一部改変していますが、だいたいこんな感じ。
で、問題は、showMessage() 内の try/catch で指定した、setText() です。
やった事がなかったので知らなかったのですが、このようにメインスレッド以外で UI を操作することはできないようでした。

ですが、対処法もちゃんと用意されていました。
参考サイトそのままですが、Handler を使用して、別スレッドからメインスレッドに処理を依頼する方法です。
具体的には下記のとおりです。

private void showMessage(){
    final Handler mainHandler = new Handler(Looper.getMainLooper());
    try {
        /* 処理 */
        mainHandler.post(() -> {
            textView.setText("[表示したい文字列]");
        });
    } catch (JSONException e) {
        e.printStackTrace();
    }
}

2行目に Handler を宣言し、TextView の操作の記述を mainHandler.post() で囲うだけです。
これを追加したところ、問題なく TextView の操作を行うことができました。

 

以上、TextView などの UI の操作をメインスレッド以外から行う方法でした。
今回の解決策は、例えば何らかの処理を別スレッド&非同期で行っていて、結果が返ってきたタイミングで UI を変更したい、等の場合にも使えるかと思います。
もし、同じエラーでお困りの場合は、是非参考にしていただければと思います。

村上 著者:村上

【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 プラグインでトークンが取得できない時の対処法でした。
同じことにお困りの方は、是非お試しください。

村上 著者:村上

【PHP】FireBase Cloud Messagingを利用したプッシュ通知をPHPから送る方法

今日は、FireBase Cloud Messaging を利用したプッシュ通知を PHP から送付する方法についてです。
思ったより簡単に実装できたので、自分の備忘録(または困ったときのコピー元)としてまとめました。
なお、こちらは送信方法のみです。
FireBaseのアカウント作成等は飛ばしておりますので、その点はご了承ください。

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

WebAPIを叩く(curl) – Qiita
https://qiita.com/re-24/items/bfdd533e5dacecd21a7a

WebAPIの実行には、curl を使用しています。

 

早速ですが、コードはこちら。

$token = '[firebaseのトークン]';
$base_url = 'https://fcm.googleapis.com/fcm/send';

$data = array(
  "to" => "[送付先のデバイストークン]",
  "priority" => "high",
  "notification" => array(
    "title" => "[タイトル]",
    "body"  => "[メッセージ]",
    "sound" => "default",
    "click_action" => "FCM_PLUGIN_ACTIVITY"
  )
);

$header = array(
  'Authorization: key='.$token,
  'Content-Type: application/json'
);

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $base_url);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'POST'); // post
curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data)); // jsonデータを送信
curl_setopt($curl, CURLOPT_HTTPHEADER, $header); // リクエストにヘッダーを含める
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, true);

$response = curl_exec($curl);

$header_size = curl_getinfo($curl, CURLINFO_HEADER_SIZE); 
$header = substr($response, 0, $header_size);
$body = substr($response, $header_size);
$result = json_decode($body, true); 

curl_close($curl);

接続先だったり、送付するデータを変更しただけで、ほぼ参考にさせていただいた記事に書かれていたコードそのままです。
変数 $data 内に指定しているデータは、通知の内容によって変更してください。
FCMの詳細については、下記の公式サイトのガイドを参考にしてください。

Firebase Cloud Messaging|FireBase
https://firebase.google.com/docs/cloud-messaging/?hl=ja

 

以上、FireBase Cloud Messaging で プッシュ通知をPHPで送信する方法でした。
他の WebAPI を PHP で実行するときにも使えますので、参考にしていただければと思います。

村上 著者:村上

【PHP】XMLファイルのエラー「Parse error: syntax error, unexpected T_STRING」の対処法

今日は、XMLを扱ったときに遭遇したエラーについて。
エラーの全文はこちら。

Parse error: syntax error, unexpected T_STRING in [ファイル名] on line 1.

「予期しないT_STRING がある」というシンタックスエラーです。
シンタックスエラー=構文エラーということでしたが、参考にしたサンプルと見比べても、間違いはないし…何故?と少しだけ焦りました。
そもそも、xml ファイルを開いているのに、何故 PHP のエラーが発生するのかも最初は分かりませんでした。

 

こちらのエラーは、原因としては下記の1行目が、PHP と誤認識されるために発生するエラーとのことでした。

<?xml version="1.0" encoding="utf-8"?>

確かに、PHPって <?php ~処理~ ?> だけでなく、省略形として <? ~処理~ ?> とも書けましたね…。

こちらの誤認識を防ぐために、下記のように、PHPの echo を使って1行目を記述すると、問題なく動作するとのことでした。

<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>

試したところ、確かに問題なく動作しました!

他にも、.htaccess に「AddType text/html .html」もしくは「php_flag short_open_tag Off」を追加するという方法もあるようでしたが、対処が簡単だったこちらの方法を採用しました。

ちなみに、今回参考にさせていただいたサイトはこちらから。

「syntax error, unexpected ‘version’・・・」 エラーの対処方法 – Project Group
https://www.projectgroup.info/tips/php/comm_0004.html

 

以上、XMLファイルが正常に読み込めない・開けない時の対処法でした。
思ったよりもあっさり解決できたので良かったです。
もし同じところで躓いていらっしゃる方がいましたら、参考にしていただければと思います。

村上 著者:村上

【Android】Mapboxで表示した地図の中心を変更する方法

昨日の予告通り、今回はMapboxの地図の中心位置を変更する方法についてです。
前回の記事については、下記から確認頂けます。

【Android】Mapboxを使って地図上にピンを立てる方法
https://cpoint-lab.co.jp/article/201810/【android】mapboxを使って地図上にピンを立てる方法/

 

では早速実装方法について。
なお、今回のコードは Mapbox が導入済みであることを前提に進めています。

まず onCreate() 内に、下記のコードを追加します。

mapView.getMapAsync(this);

ちなみに、この時、Android Studioでは、this の部分がエラーになり、赤い波下線が引かれますので、そこにカーソルを合わせて Alt + Enter を押します。
表示される対処法の項目中に、OnMapReadyCallbackimplements するというような内容の候補があるので、こちらを選択します。
すると、onMapReady() という関数がオーバーライドされるので、その中に下記のコードを追加します。

@Override
public void onMapReady(MapboxMap mapboxMap) {
    CameraPosition position = new CameraPosition.Builder()
            .target(new LatLng(lat, lng)) // Sets the new camera position
            .zoom(11) // Sets the zoom to level 10
            .tilt(0) // Set the camera tilt to 0 degrees
            .build(); // Builds the CameraPosition object from the builder

    mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), 1000);
}

ズームレベルや、傾きなどは適宜変更してください。
こちらを実行すると、起動後、カメラの位置が上記で指定した位置が中心になるように移動します。
処理としては以上で完了です。

 

意外と回りくどい方法だな…と思うのは私だけでしょうか…?
レイアウトファイルのXMLでは、地図の初期位置を簡単に指定できるので、コード上でも簡単にできてほしいですね。
ですが、意図していたことは実現できたので問題なし!
もし、同じことに取り組んでいる方は、参考にしていただければと思います。

村上 著者:村上

【Android】Mapboxを使って地図上にピンを立てる方法

今回は、Mapboxを使って、Androidアプリで地図を表示する方法について。
導入は簡単でしたので、今回はそれプラス、地図にマップピンを立てたいと思います。

導入は本家サイトをご参考ください。
なお、マップの表示にはアクセストークンが必要なため、ユーザー登録を行ってください。

Install Maps SDK for android|Mapbox
https://www.mapbox.com/install/android/

上記で紹介している手順通りにSDKの導入やPermissionの設定、MapViewの指定を行えば、問題なく地図が表示できるはずです。
で、地図が表示されたら、いよいよマップピン表示!

コードは下記のとおりです。
重複している箇所があるので、必要なところのみコピー&ペーストしてください。

private MapView mapView;
private MapboxMap mapboxMap;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Mapbox.getInstance(this, "[access_token]");
    setContentView(R.layout.activity_map);

    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(this);

    Double lng = [緯度];
    Double lat = [経度];
    mapView.getMapAsync(mapboxMap -> mapboxMap.addMarker(new MarkerOptions()
            .position(new LatLng(lat, lng))
            .title("写真を撮影した場所")));
}

こちらを実行すると、下の写真のようにマップピンが地図上に表示されます。

会社で撮影した写真の位置情報を使用したので、若干の誤差はあれど、ほぼあっていますね!

 

以上、地図上にピンを立てる方法でした。
しかしこれだけだと、マップの中心位置≠マップピンが立っている場所、なので、マップの中心位置やピンの場所によっては、地図をかなりスワイプしたりドラッグする必要がある場合があります。
次回は、こちらを解消すべく、地図の中心位置をコード上で操作する方法についてご紹介できればと思います。

村上 著者:村上

【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 という記述を忘れそうだと思ったので、こうしてまとめました。
うっかり忘れたときの自分のためのコピー元ですね。
もし、同じことをやりたいと思っている方がいらっしゃれば、参考にしていただければと思います。

村上 著者:村上

【Android】「Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.」の対処法

今回も、Android Studioでアプリを開発中に遭遇したエラーについてです。
最近、何だかエラー遭遇率が妙に高い気が…。
特に、変なところをいじってはいないはずなので、気のせいだと良いのですが。

さて、今回のエラーはこちら。

Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.

先日まで動いていはずなのですが、今日起動してビルドしようとしたところ、上記のようなエラーが出ました。
こちらをGoogle翻訳に掛けた結果は、「Gradleバージョン4.6以上を使用しているため、Android Gradleプラグインの現在のバージョンではオンデマンドでの設定はサポートされていません。」とのこと。
どうやらサポートされてない設定を使っているようでした。
…なぜ急に?

 

で、調べたところ下記の記事がヒットしました。

Configuration on demand is not supported by the current version of the Android Gradle plugin – Stack Overflow
https://stackoverflow.com/questions/49990933/configuration-on-demand-is-not-supported-by-the-current-version-of-the-android-g

この記事によると、まず、gradle.properties で指定している「org.gradle.configureondemand」という記述を削除します。
が、上記に該当する記述は見つからず…一旦、置いておくことに。

そして次に、Setting から、Build, Execution, Deployment > Compiler を開きます。

そうすると、下の方に「Configure on Demand」という箇所があるので、ここのチェックを外します。
上の画像だと、赤枠で囲っている場所です。
あとは、Apply を押してから、OKを押せば設定は完了です。
その後、いつも通りビルドを行ったところ、問題なくビルドが成功し、無事にアプリも実行できました。

 

以上、「Configuration on demand is not supported by the current version of the Android Gradle plugin since you are using Gradle version 4.6 or above.」エラーの対処法でした。
エラー文だけでは意味が分からなかったのですが、案外あっさりと解決できたので良かったです。
自分が書いたコード以外のところでエラーが出ると若干ヒヤッとしますね…。
もし同じエラーでお困りの方がいらっしゃいましたら、参考にしていただければと思います。