著者アーカイブ 村上

村上 著者:村上

【Java】「java.io.IOException: read failed, socket might closed or timeout, read ret: -1」エラー【未解決】

まだ未解決ですが、途中経過をメモとしてまとめ。
Android 端末と Bluetooth デバイスを接続しようとした際に発生した、java.io.IOException: read failed, socket might closed or timeout, read ret: -1 というエラーについてです。
デバイスの検出までは問題なく実装出来ましたが、ここからどハマりしています。

このエラーについて参考にさせていただいた記事はこちらから。

IOException: read failed, socket might closed – Bluetooth on Android 4.3
– Stack Overflow

https://stackoverflow.com/questions/18657427/ioexception-read-failed-socket-might-closed-bluetooth-on-android-4-3

Bluetooth の概要|Android デベロッパー|Android Developers
https://developer.android.com/guide/topics/connectivity/bluetooth.html

 

1つ目の記事によると、BluetoothSocket での接続に失敗した際、try/catchcatch の中で、再接続をするという投稿が一番有益なようでしたが、別のエラーが発生し、アプリがクラッシュしました…。
また、InputStreamOutputSteram を閉じていないということも原因として考えられるとのことでしたが、そもそも呼び出していないからこちらは該当せず。

また、2つめの Android Developers のページによると、Android 端末と Bluetooth デバイスを接続する前に、必ず Bluetooth デバイス検知の処理を終了させるようにとの記述がありました。
デバイスの検出を実行していると、接続の試行処理が大幅に遅くなり、失敗する可能性があります、とのことです。
自分のコードを確認したところ、その辺りの処理がちょっと怪しかったので修正し、きちんと Bluetooth デバイスの検出を終了させてから、接続を行うようにしました。
が、それでもだめでした!もう嫌!

 

自分で 1から書いているのが悪いのかと、接続の部分の処理で下記のライブラリを利用したりもしてみましたが、エラー文は全く同じでした。

GitHub – OmarAflak/Bluetooth-Library: Bluetooth client library for Android.
https://github.com/OmarAflak/Bluetooth-Library

Cordova アプリでは、接続からデータ取得まで何の問題もなく行えたので、端末自体に問題はないということは分かっているのですが…。
時間が許せば、上記ライブラリを使って最初から書き直してみようかなと思います。

 

以上、Android 端末と Bluetooth デバイスを接続しようとした際に発生するエラー「java.io.IOException: read failed, socket might closed or timeout, read ret: -1」についてでした。
早く解決させたい!

村上 著者:村上

【JavaScript】Promiseオブジェクトを使った非同期処理

久々に使うことになってほとんど忘れかけていたので、備忘録としてまとめ。
JavaScript で Promise オブジェクトを使った非同期処理の書き方についてです。
現在開発しているプロジェクト内で、データを送信する際に送るデータの一部が壊れるという現象が発生しているため、怪しいところを全部直すところ、非同期処理を実装したほうが良さそうだということで追加しています。

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

【JavaScript】非同期処理/Promise/asyncと聞くとビビっちゃう人を救う – Qiita
https://qiita.com/miyarappo/items/dbe1a9bad36c5e35b623

Promise – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

プログラムの文法はこちら。

const sample = () => {
  return new Promise((resolve, reject) => {
    // 実行したい処理を記述
    // 正常終了する処理の最後で、resove(); を実行する
    // エラー終了する処理の最後で、reject(); を実行する
  })
}

// 非同期処理関数を呼び出す
sample().then(() => {
    // 正常終了した場合の処理を記述
  }).catch(() => {
    // エラー終了した場合の処理を記述
  });

非同期処理の関数については、下記のように書いてもOKです。

const sample = new Promise(function(resolve, reject) {
  // 実行したい処理を記述
  // 正常終了する処理の最後で、resove(); を実行する
  // エラー終了する処理の最後で、reject(); を実行する
});

sample.then(function() {
    // 正常終了した場合の処理を記述
  }).catch(function(){
    // エラー終了した場合の処理を記述
  });

基本的な書き方は上記のとおりです。
書き方については、特に問題がなければお好きな方をご利用ください。

Qiita の記事によると、async/await と併せて使えば then()catch() を使わない書き方ができるとのことです。
が、今回は特に複雑な記述にはならなかったので使用していません。
今後もっと処理が複雑化したら導入しようと思います。

 

以上、JavaScript の Promise オブジェクトで非同期処理を実行する方法でした。
ご参考になれば幸いです。

村上 著者:村上

【Java】Android端末とBluetoothデバイスを接続する

昨日、「【Java】Android端末でBluethoothデバイスを検出する方法」という記事を投稿しましたが、今日はその続きで、検出した Bluetooth デバイスと Android 端末を接続する方法についてです。
ただし、実はまだ動いていません…。

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

03.Bluetoothデバイスとの接続・切断の処理を作る
https://www.hiramine.com/programming/bluetoothcommunicator/03_connect_disconnect.html

AndroidからBluetooth機器にSPP (Serial Port Profile) で接続する|d.sunnyone.org
http://d.sunnyone.org/2013/09/androidbluetoothspp-serial-port-profile.html

 

実装にはまず、BluetoothService という Class を定義します。

static public class BluetoothService {
    // 定数(Bluetooth UUID)
    private static final UUID UUID_SPP = UUID.fromString( "00001101-0000-1000-8000-00805F9B34FB" );

    // 定数
    static final int MESSAGE_STATECHANGE    = 1;
    static final int STATE_NONE             = 0;
    static final int STATE_CONNECT_START    = 1;
    static final int STATE_CONNECT_FAILED   = 2;
    static final int STATE_CONNECTED        = 3;
    static final int STATE_CONNECTION_LOST  = 4;
    static final int STATE_DISCONNECT_START = 5;
    static final int STATE_DISCONNECTED     = 6;

    // メンバー変数
    private int              mState;
    private ConnectionThread mConnectionThread;
    private Handler          mHandler;

    // 接続時処理用のスレッド
    private class ConnectionThread extends Thread {
        private BluetoothSocket mBluetoothSocket;
        // コンストラクタ
        ConnectionThread(BluetoothDevice bluetoothdevice) {
            try {
//                    mBluetoothSocket = bluetoothdevice.createRfcommSocketToServiceRecord(UUID_SPP);
                mBluetoothSocket = bluetoothdevice.createInsecureRfcommSocketToServiceRecord(UUID_SPP);
            } catch( IOException e ) {
                Log.e( "BluetoothService", "failed : bluetoothdevice.createRfcommSocketToServiceRecord( UUID_SPP )", e );
            }
        }

        // 処理
        public void run() {
            while( STATE_DISCONNECTED != mState ) {
                switch( mState ) {
                    case STATE_NONE:
                        break;
                    case STATE_CONNECT_START:    // 接続開始
                        for (int i = 0; ; i++) {
                            try {
                                mBluetoothSocket.connect();
                            } catch (IOException ex) {
                                if (i < 5) {
                                    Log.d("BluetoothService","Failed to connect. Retrying: " + ex.toString());
                                    continue;
                                }
                                Log.d("BluetoothService", "Failed to connect: " + ex.toString());
                                setState(STATE_DISCONNECT_START);
                                return;
                            }
                            break;
                        }
                        // 接続成功
                        setState( STATE_CONNECTED );
                        break;
                    case STATE_CONNECT_FAILED:        // 接続失敗
                        Log.d("BluetoothService", "STATE_CONNECT_FAILED");
                        // 接続失敗時の処理の実体は、cancel()。
                        break;
                    case STATE_CONNECTED:        // 接続済み(Bluetoothデバイスから送信されるデータ受信)
                        break;
                    case STATE_CONNECTION_LOST:    // 接続ロスト
                        // 接続ロスト時の処理の実体は、cancel()。
                        break;
                    case STATE_DISCONNECT_START:    // 切断開始
                        // 切断開始時の処理の実体は、cancel()。
                        break;
                    case STATE_DISCONNECTED:    // 切断完了
                        // whileの条件式により、STATE_DISCONNECTEDの場合は、whileを抜けるので、このケース分岐は無意味。
                        break;
                }
            }
            synchronized( BluetoothService.this ) {    // 親クラスが保持する自スレッドオブジェクトの解放(自分自身の解放)
                mConnectionThread = null;
            }
        }

        // キャンセル(接続を終了する。ステータスをSTATE_DISCONNECTEDにすることによってスレッドも終了する)
        void cancel() {
            try {
                mBluetoothSocket.close();
            } catch( IOException e ) {
                Log.e( "BluetoothService", "Failed : mBluetoothSocket.close()", e );
            }
            setState( STATE_DISCONNECTED );
        }
    }

    // コンストラクタ
    BluetoothService(Context context, Handler handler, BluetoothDevice device) {
        mHandler = handler;
        mState = STATE_NONE;
        // 接続時処理用スレッドの作成と開始
        mConnectionThread = new ConnectionThread(device);
        mConnectionThread.start();
    }

    // ステータス設定
    private synchronized void setState( int state ) {
        mState = state;
        mHandler.obtainMessage( MESSAGE_STATECHANGE, state, -1 ).sendToTarget();
    }

    // 接続開始時の処理
    synchronized void connect() {
        if( STATE_NONE != mState ) {    // 1つのBluetoothServiceオブジェクトに対して、connect()は1回だけ呼べる。
            // 2回目以降の呼び出しは、処理しない。
            return;
        }
        // ステータス設定
        setState( STATE_CONNECT_START );
    }

    // 接続切断時の処理
    synchronized void disconnect() {
        if( STATE_CONNECTED != mState ) {    // 接続中以外は、処理しない。
            return;
        }
        // ステータス設定
        setState( STATE_DISCONNECT_START );
        mConnectionThread.cancel();
    }
}

この関数内で、BluetoothSocket の設定から接続時の処理などを指定します。

次に、BluetoothService から情報を取得するためのハンドラを定義します。

// Bluetoothサービスから情報を取得するハンドラ
@SuppressLint("HandlerLeak")
private final Handler mHandler = new Handler() {
    // ハンドルメッセージ
    // UIスレッドの処理なので、UI処理について、runOnUiThread対応は、不要。
    @Override
    public void handleMessage( Message msg ) {
        if (msg.what == BluetoothService.MESSAGE_STATECHANGE) {
            switch (msg.arg1) {
                case BluetoothService.STATE_NONE:            // 未接続
                    break;
                case BluetoothService.STATE_CONNECT_START:        // 接続開始
                    Log.d("MainActivity", "STATE_CONNECT_START");
                    break;
                case BluetoothService.STATE_CONNECT_FAILED:            // 接続失敗
                    Toast.makeText(MainActivity.this, "Failed to connect to the device.", Toast.LENGTH_SHORT).show();
                    Log.d("MainActivity", "STATE_CONNECT_FAILED");
                    break;
                case BluetoothService.STATE_CONNECTED:    // 接続完了
                    Log.d("MainActivity", "STATE_CONNECTED");
                    break;
                case BluetoothService.STATE_CONNECTION_LOST:            // 接続ロスト
                    //Toast.makeText( MainActivity.this, "Lost connection to the device.", Toast.LENGTH_SHORT ).show();
                    break;
                case BluetoothService.STATE_DISCONNECT_START:
                    break;
                case BluetoothService.STATE_DISCONNECTED:            // 切断完了
                    mBtAdapter = null;    // BluetoothServiceオブジェクトの解放
                    break;
            }
        }
    }
};

なお、こちらもサンプルコードからほぼそのままコピーしてきたものですが、ボタンの無効化などの一部不要な処理を削除しておりますので、ご注意ください。

そして、デバイスと接続/切断するための関数を定義します。

// 端末と接続
private void connectDevice(BluetoothDevice device) {
    Log.d("MainActivity","device.name : "+device.getName()+", device.address : "+device.getAddress());
    if( null != mBluetoothService ) {    // mBluetoothServiceがnullでないなら接続済みか、接続中。
        return;
    }
    // 接続
    BluetoothDevice connectDevice = mBtAdapter.getRemoteDevice(device.getAddress());
    mBluetoothService = new BluetoothService(this, mHandler, connectDevice);
    mBluetoothService.connect();
}

// 端末との接続を切断
private void disconnectDevice() {
    if( null == mBtAdapter ) {    // mBluetoothServiceがnullなら切断済みか、切断中。
        return;
    }
    // 切断
    mBluetoothService.disconnect();
    mBluetoothService = null;
}

なお、これらを追加すると恐らく変数などの定義でエラーが発生するため、onCreate よりも上の階層で下記を定義してください。

private BluetoothService mBluetoothService;

あとは任意のタイミングで、connectDevice(BluetoothDevice) を呼び出せば、接続処理が実行されます。
私は、デバイスが見つかったタイミングで実行しています。
そのタイミングでなら、デバイス情報も取得できますしね。

…が、こちらを実行すると、java.io.IOException: read failed, socket might closed or timeout, read ret: -1 というエラーが発生しました…。
ソケットが閉じているか、接続にかかる時間が長すぎてタイムアウトしているようですが、どう直せばいいのかまだわかっていません。
エラーメッセージで検索しているのですが、有益な記事にはたどり着けずにいます。
UUID が悪さをしているのかもしれませんので、このあたりから攻め直してみたいと思います!

 

以上、まだ完成していませんが、Android 端末と Bluetooth デバイスを接続する方法(途中)でした。
解決方法が分かったら、またまとめたいと思います。

村上 著者:村上

【Java】Android端末でBluethoothデバイスを検出する方法

大分久しぶりの Java に関する投稿です。
今回は、Android 端末で Bluetooth デバイスを検出する方法です。
最終的には、Bluetooth デバイスからデータを取得したいのですが、まだそこまでできていないので、とりあえず検出まで。

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

BLUETOOTHで通信を行う(1)|TechBooster
https://techbooster.org/android/application/5191/

Bluetoothを使ってAndroidアプリ同士で通信するには (1/2):Androidで動く携帯Javaアプリ作成入門(35) – @IT
https://www.atmarkit.co.jp/ait/articles/1209/12/news136.html

 

プログラムの流れとしては、下記のような感じです。

  1. 端末が Bluetooth に対応しているか確認する
  2. 端末の Bluetooth が ON になっているか確認する(OFFだったらONにするように促すダイアログ表示)
  3. Bluetooth デバイスを検索する

ですが、まずは AndroidManifest.xml に下記の3行を追加しましょう。

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

これがないとそもそも Bluetooth 使えないので、忘れずに。

では、サンプルコードです。
まず、1. 端末が Bluetooth に対応しているか確認する と、2. 端末の Bluetooth が ON になっているか確認する(OFFだったらONにするように促すダイアログ表示)のコードはこちら。

mBtAdapter = BluetoothAdapter.getDefaultAdapter();
if (mBtAdapter != null){
    // Bluetooth 対応端末の場合の処理
    Log.d("MainActivity","Bluetoothがサポートされてます。");
    boolean btEnable = mBtAdapter.isEnabled();
    if (!btEnable){
        // OFFだった場合、ON にすることを促すダイアログを表示する画面に遷移
        Intent btOn = new Intent(BluetoothAdapter.ACTION_REQUEST_ENABLE);
        startActivityForResult(btOn, REQUEST_ENABLE_BLUETOOTH);
    } else {
        Log.d("MainActivity","BluetoothはONです。");
    }
} else {
    // Bluetooth 非対応端末の場合の処理
    Log.d("MainActivity","Bluetoothがサポートされていません。");
}
@Override
    protected void onActivityResult(int requestCode, int ResultCode, Intent date){
        if(requestCode == REQUEST_ENABLE_BLUETOOTH){
            if(ResultCode == Activity.RESULT_OK){
                // Bluetooth が ONにされた場合の処理
                Log.d("MainActivity","BluetoothはONです");
            }else{
                Log.d("MainActivity","BluetoothはOFFです");
            }
        }
    }

なお、onCreate よりも上の階層で、下記の2行も宣言しておきます。

int REQUEST_ENABLE_BLUETOOTH = 3;
BluetoothAdapter mBtAdapter;

コメントもかいてあるのでわかると思いますが…もしBluetooth に対応していて、Bluetooth の設定が OFF だったら Bluetooth のオンを促すダイアログを表示しています。
元々 Bluetooth が ON の場合や、そもそも Bluetooth に対応していない場合は、その旨をログで表示して終了しています。

次に、3. Bluetooth デバイスを検索する 方法です。
私も今回初めて使ったのですが、BroadcastReceiver というのを利用します。
サンプルコードは下記のとおりです。

//インテントフィルターとBroadcastReceiverの登録
IntentFilter filter = new IntentFilter();
filter.addAction(ACTION_DISCOVERY_STARTED);
filter.addAction(ACTION_FOUND);
filter.addAction(ACTION_NAME_CHANGED);
filter.addAction(ACTION_DISCOVERY_FINISHED);
getBaseContext().registerReceiver(mReceiver, filter);
//デバイスを検索する
if(mBtAdapter.isDiscovering()){
    //検索中の場合は検出をキャンセルする
    mBtAdapter.cancelDiscovery();
}
//一定時間の間検出を行う
mBtAdapter.startDiscovery();
private final BroadcastReceiver mReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        String action = intent.getAction();
        BluetoothDevice device;
        switch (action) {
            case ACTION_DISCOVERY_STARTED:
                Log.d("MainActivity", "ACTION_DISCOVERY_STARTED");
                break;
            case ACTION_FOUND:
                Log.d("MainActivity", "ACTION_FOUND");
                // デバイスが見つかった場合、Intent から BluetoothDevice を取り出す
                device = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
                Log.d("MainActivity","device.name : "+device.getName()+", device.address : "+device.getAddress());
                break;
            case ACTION_NAME_CHANGED:
                Log.d("MainActivity", "ACTION_NAME_CHANGED");
                device = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
                Log.d("MainActivity","device.name : "+device.getName()+", device.address : "+device.getAddress());
                break;
            case ACTION_DISCOVERY_FINISHED:
                Log.d("MainActivity", "ACTION_DISCOVERY_FINISHED");
                // デバイス検出が終了した場合は、BroadcastReceiver を解除
                context.unregisterReceiver(mReceiver);
                break;
        }
    }
};

IntentFilter で、デバイス検出の開始時・デバイス検出時・デバイス名の判明時・デバイス検出終了時 の利用をそれぞれ宣言し、BroadcastReceiver の関数内で、それぞれが発火したタイミングで実行する処理を定義しています。
今回は、デバイスを検出したタイミングで、そのデバイス情報を表示しているだけです。
接続とデータ通信を行うことになったら、それらの情報の保存を行う必要があるのかな?

なお、こちらの処理で躓いたのがデバイスの検出で、ACTION_FOUND のタイミングでデバイス情報を取得しようとしても、それが出来ませんでした。
で、試しに ACTION_NAME_CHANGED のタイミングでもデバイス情報を取得したところ…こちらでは取得できました!
ACTION_FOUND という名前が付いてはいますが、端末情報の取得は ACTION_NAME_CHANGED で行えるみたいで…ちょっとネーミングどうにかして、という気持ちになりましたね。
でも、とりあえず、デバイスの名前とアドレスは取得できました!

 

以上、Android アプリで Bluetooth デバイスを検出する方法でした。
デバイスとの接続とデータ通信については、でき次第記事にしたいと思います。
参考になれば幸いです。

村上 著者:村上

【Cordova】create-react-appコマンドでCordovaアプリの開発環境を作る

今更感はありますが…備忘録としてまとめ。
タイトル通り、create-react-app コマンドと cordova のコマンドを使って、Cordova アプリの開発環境を作る方法です。
色々な記事がありましたが、個人的に一番良いと思ったのがこちらの Qiita の記事です。

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点 – Qiita
https://qiita.com/bathtimefish/items/113154e89650b351b5b7

 

作成方法ですが、まずは create-react-appcordova をインストールします。

npm install -g create-react-app
npm install -g cordova

インストールが終わったら、任意の場所で下記のコマンドを実行します。

create-react-app [プロジェクト名]
cd [プロジェクト名]
npm run eject 

こちらのコマンドを実行すると、Create React App プロジェクトが作成できます。

3行目のコマンドは、react-scripts をディレクトリに展開するとのことでしたが…よく分かりませんでした。
なお、こちらを実行すると、? Are you sure you want to eject? This action is permanent. (y/N) と聞かれるので、問題なければ y を入力します。

上記のコマンドが完了したら、config/paths.js を開きます。
こちらのファイルに、appBuild: resolveApp('build') という記述があるので、ここを appBuild: resolveApp('www') に変更します。
次に package.json を開き、"homepage": "./", を追加します。
追加する場所は、"dependencies": { …… }, のすぐ上あたりです。

上記が全て完了したら、一旦一つ上のディレクトリに戻り、下記コマンドで cordova の環境を作成します。

cordova create [ディレクトリ名] [Bundle identifier/アプリケーションID] [プロジェクト名]

なお、ディレクトリ名は create-react-app コマンドで指定したプロジェクト名とは異なるものを指定してください。

こちらを実行したら、このプロジェクト内の config.xml を、上で作成した Create React App プロジェクトのディレクトリの直下にコピーします。

public/index.html を開き、下記の 3行を head 内に追加します。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

なお、1行目の meta http-equiv="Content-Security-Policy" は環境にあわせて適宜変更してください。

そして、同じく Create React App プロジェクト の src/index.js を下記のように修正します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
};

if(window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

なおこのままビルドすると、上記のコードにある registerServiceWorker.js がなくてエラーになるので、src ディレクトリ内に下記の内容で作成します。

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

作成が終わったら、Create React App プロジェクトのディレクトリに移動し、npm run build を実行します。
エラーが出なければビルド成功です!

あとは、任意のプラットフォームを、下記のコマンドを使って追加してください。

cordova platforms add browser
cordova platforms add android
cordova platforms add ios

もちろん全部追加しなくてもOKです。

あとは cordova のコマンドを使ってプロジェクトを実行してください。
下記のコマンドを実行すると、ブラウザで実行できます。

cordova run browser

 

以上、create-react-app コマンドを使って Cordova アプリの開発環境を作る方法でした。
ほぼ Qiita の参考記事そのままなので、こちらを参考にして頂いても大丈夫です。

村上 著者:村上

【Webサービス】日本の伝統色の一覧が載っているサイト「和色大辞典」

今日はアプリのボタン色などを決めるときに参考にさせていただいているサイト「和色大辞典」のご紹介です。
ひと口に「」や「」と言っても色々あるので、こう言った色見本がずらっと並んだサイトは非常に重宝しています。
で、その中でも個人的に気に入っているのが、今回紹介する「和色大辞典」というサイトです。

サイトは下記からご確認ください。

日本の伝統色 和色大辞典 – Traditional Colors of Japan
https://www.colordic.org/w

 

サイトにアクセスすると、色見本がずらりと並んでいるのですが、色の名前が色々あって面白いんですよね。
中には全く聞いたこともないような名前もあって、伽羅色(きゃらいろ)とか初めて聞きました…。

また、色を選択すると、その色の配色パターンを確認することもできます。
パッと目についた「桔梗色」の配色パターンを見てみるとこんな感じ。

彩度を変更した色一覧や、明度を変更した一覧のほかに、色相環を元にした配色パターンも表示されています。
色相環の反対にある補色や、隣り合う類似色等も掲載されているので、アクセントカラーを選んだりするときにもちょうど良いですね。

こちらのサイトでは、和色の他にも洋色やパステルカラー、ビビットカラーの一覧も載っています。
また、今日のラッキーカラーなんてページもあるので、この中から色を選んでみるのも面白いかもしれません。

 

以上、WEB色見本のサイト「和色大辞典」のご紹介でした。
色を選ぶのって結構難しいので、こういったサイトで色の名前も含めて探してみるのも面白いと思います。

村上 著者:村上

【iOS】MacからiPhoneに写真を転送する方法

iPhone から Mac に写真を転送するのは特に難しくなかったのですが、その逆が少しややこしかったので、備忘録としてまとめ。
いくつか方法があるようでしたが、転送ソフトとかをわざわざ入れるのは面倒だったので、今回紹介するのは iTunes を利用する方法についてです。

今回参考にした記事はこちらから。

【完全版】迅速にMacからiPhoneに写真を転送する7つの方法
https://www.imobie.jp/support/transfer-mac-photos-to-iphone.htm

 

まず、事前準備として、転送したい写真を一つのディレクトリに格納し、分かりやすい場所に置いておきます。
ディレクトリの名前は日本語でも問題なく、場所もデスクトップとかでOKです。

次に iPhone と Mac を接続し、iTunes を起動します。

上のスクリーンショットの通り、接続した iPhone を選択してから、サイドバーメニューから「写真」を選択します。
次に、「写真を同期」にチェックを入れ、すぐ下の欄の「写真のコピー元」から、先程作成したディレクトリを選択します。
あとは、右下の「適用」ボタンを選択すれば、iPhone に写真が転送されます。

操作としては以上です!
「写真のコピー元」を選択する際には写真ファイル自体は選択できないので、ディレクトリに写真を格納するのがポイントですね。
転送ソフトを使わないと手順が多くて面倒になるかと思いましたが、思ったよりも簡単でした。

 

以上、Mac から iPhone に写真を転送する方法でした。
ご参考になれば幸いです。

村上 著者:村上

【Android】「java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper」エラーの対処法

今回は Android Studio で発生したエラーの対処法についてです。
エラーメッセージは「java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper」で、Cordova プラグインの「phonegap-plugin-csdk-image-editor」を実行したタイミングで発生し、アプリが落ちました。

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

android – java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper
– Stack Overflow

https://stackoverflow.com/questions/42987363/java-lang-noclassdeffounderror-failed-resolution-of-landroid-support-v4-animat

エラーメッセージを検索したら、一番上に表示された記事です。

 

掲載されていた対処法をいくつか試したところ、有効だったのは下記のコードです。

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'

build.gradle に記述されている上記コードのバージョンを同じにするという方法です。
が、そもそも私の環境には上記の記述がなかったので、こちらを追加して Build → Run したところ、アプリがクラッシュすることなく、問題なく画像加工の機能を使うことができました。

なお、対処法は他にも記載がありましたので、今回私が採用した方法では解決できない場合は、そちらをお試しいただければと思います。

 

以上、Android Studio で「java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper」というエラーが発生した時の対処法でした。
ご参考になれば幸いです。

村上 著者:村上

【Cordova】「deviceready has not fired after 5 seconds.」エラーの対処法

昨日まで動作していたアプリで翌日エラーが発生するという状況に遭遇しました。
Cordova で開発していたアプリで、プラットフォームは Android です。

なお、エラー文はこちらです。

deviceready has not fired after 5 seconds.
Channel not fired: onFileSystemPathsReady

 

エラーメッセージで検索してみましたが有益な記事にはたどり着けず、コードも確認してみましたが、特に変な処理は追加しておりませんでした。
というか、昨日動いてて何故急にエラーが…。

で、物は試しということで、思いついた下記のコマンドを実行。

cordova platform rm android
cordova platform add android

Android プラットフォームを削除し、再インストールしています。
この対処法、実は Cordova 開発では意外とよく見る方法です。
Android Studio 上で追加した設定等がなかったことになるので、たまに面倒なことになったりしますが、大体はこれで何とかなります。

上記コマンドを試してみたところ、問題なく動作するようになりました!
根本的な解決になったのかどうかは分かりませんが、とりあえず解決できたので良しとしましょう。

 

以上、Cordova アプリで発生した「deviceready has not fired after 5 seconds.」の対処法でした。
ご参考になれば幸いです。

村上 著者:村上

【GoogleChrome】検証ツールで要素のhoverを確認する方法

今まであまり :hover を使う機会が無いため知らなかったのですが、Google Chrome の検証ツールで要素が :hover の時の確認をする方法です。
:hover はマウスカーソルが要素に合わせられているときの疑似クラスですが、これが有効なときの CSS を調整しようとしても、カーソルを外すと :hover の時に表示される要素が消えてしまい、CSS を調節できない…という状況になりました。
CSS を一部修正して、強制的に常に表示されるようにしても良かったのですが、出来れば他の方法を…と思っていたところ、検証ツールにありました。

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

chromeのデベロッパーツールでcssのhoverを調べる方法 – Qiita
https://qiita.com/blue_camel/items/ab3d03aca7add473c329

 

上記の記事によると、Google Chrome の検証ツールで hover 疑似クラスを強制的に有効にする方法があるとのことです。
スクリーンショットはこちら。

まずは Chrome 検証ツールを開き、検証したい要素を選択します。
そして Elements タブを開き、下部に表示されるウィンドウから Styles を選択します。
すると、:hov という項目があるのでこちらを選択し、:hover の項目のチェックボックスにチェックを入れるだけ!
そうすると、選択した要素が hover の状態を維持してくれるので、あとはいつも通りに CSS を調整すればOKです。

そして、上記の操作をやったのに hover 状態が維持されない場合、指定している要素が間違っている可能性があります。
CSS のコードを確認して、選択している要素が正しいかどうか確認してください。
私も全く同じミスをやらかしましたので、皆様もご注意ください。

 

以上、Google Chrome の検証ツールで要素の :hover を確認する方法でした。
ご参考になれば幸いです。