カテゴリーアーカイブ Android

asaba 著者:asaba

【androidjava】プログレスバーとonResumeを組み合わせてみる

一般的なandroidアプリはページの移動や更新にはプログレスバーを

使います。

 

今回は、読み込んでいる最中のみプログレスバーを出して、

読み終わったら次のページに飛ぶという流れをandroidの

ライフサイクルであるonResumeと組み合わせて作りました。

 

onResumeは、androidのactivityが戻るボタンによって再度呼ばれた時に

呼ばれるメソッドで、これが呼ばれる頃にはもうactivity内のuiは

触れる状態になっています。つまりこれが呼ばれた時には

プログレスバーが消えていてほしいので、onResumeの役割として

プログレスバーの管理を任せていることにしています。

 

考えていることは、プログレスバーをデフォルトでinvisibleにしておいて

次ページを読み込むときのみグルグル回す。移動した後は

プログレスバーをinvisibleにしてまた使えるようにスタンバらせる。

といった感じです。

 

このように実装してみました。

 

</pre>
<pre><RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"></pre>
<pre><ProgressBar
        style="?android:attr/progressBarStyleLarge"
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="invisible"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        />
</RelativeLayout></pre>
<pre>

 

styleは大きめで設定しております。

この他にもProgressBar.Small(小さいプログレスバー)や普通サイズの

ProgressBarも用意されておりアプリに合わせて最適な大きさを

選ぶことができます。

 

真ん中に設置しようとしてandroid:gravity=”center”を書くも

効かなかったのでcenterHorizontalとcenterVerticalで

真ん中寄せをしました。

 

続いてonResume内です。

 

</pre>
@Override
protected void onResume() {
super.onResume();
progressBar.setVisibility(android.widget.ProgressBar.INVISIBLE);
}
<pre>

こちらはactivityが呼ばれた時にsetVisibilityを返すのみ。
 

後はコード側で好きなタイミングでvisibleに変えてあげればかっこよく

なれそうですね。

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

【androidjava】パーミッションをonStartメソッド内に書く

意図的にパーミッションをoffにしたときの対策として

パーミッションを再度促す処理を作りました。

 

アプリで設定したパーミッションは設定から簡単に変えられるのですが、

offにされてしまうとアプリを使う上で困ってしまう理由上onStart

で再許可をして許可しなければ機能を使うことができなくするように

しました。

 

onstartは、アプリがバックグラウンドに移った後にまたそのアプリに

復帰するときに呼ばれるライフサイクルのことです。

 

 

 

 

これが呼ばれている間はユーザーはアプリのアクティビティが

見えていない状態になります。その中でパーミッション許可を

させようという訳です。

 

</pre>
<pre>@Override
protected void onStart() {
    super.onStart();
    if (Build.VERSION.SDK_INT >= 23) {
        if (ActivityCompat.checkSelfPermission(this,
                android.Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED
                && ActivityCompat.checkSelfPermission(this, android.Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {
            userSetting();
        }else {
            requestPermission();
        }
    }else{
        userSetting();
    }
}

private void requestPermission() {
    String[] permissions = { Manifest.permission.CAMERA,
            Manifest.permission.WRITE_EXTERNAL_STORAGE };
    ActivityCompat.requestPermissions(this, permissions, REQUEST_PERMISSION);
}</pre>
<pre>@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    if (requestCode == REQUEST_PERMISSION) {
        // 使用が許可された
        if (grantResults[0] == PackageManager.PERMISSION_GRANTED && grantResults[1] == PackageManager.PERMISSION_GRANTED) {
            // 許可された
            userSetting();
        } else {
            Toast.makeText(this, "許可されませんでした。", Toast.LENGTH_SHORT).show();
            userSetting();
        }
    }
}</pre>
<pre>

 

ここで、offにしたパーミッションをonにすることで直ちにアプリを

正常に使うことができるようになります。

 

 

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

【androidjava】textviewを入れ子にしてフォームっぽいtextviewを作る

一般的なサイトやアプリでよく見るテキストの中にテキストを

埋め込むことができるビューをandroidでも出してみたいと思い

力技で作ってみました。

 

</pre>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp">
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_marginTop="22dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:paddingBottom="10dp"
android:paddingStart="70dp"
android:paddingTop="10dp"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="名前"
android:layout_marginTop="22dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="20dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="10dp"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
<pre>

 

実際に見てみる↓

 

 

こちらが一行分のコメントをtextviewに書いた結果です。この場合

は文字数が一定の数を超えていないので一行で表示されます。

続いて二行以上の多めの分↓

 

文字数が多めなのでテキスト内でちゃんと自動で

改行されて表示されていますね!

 

javascriptではcssを使ってどうにでもなるのですが、

androidはそうはいかないので中々苦労しました。

 

ここでもrelativeRayoutが活躍しますので、正しい使い方を

マスターしているとさくっとできます。

とりあえず何かのビューを重ねたい時はrelativeRayoutって

覚えておくと幸せになれるかも。

 

レイアウトの順番は、テキストに書き記したいtextview・

目印のテキストのみを書き記すtextviewにすると

いい感じに仕上がります^^

 

最後にpadingとmarginをお好みで修正して完了となります!

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

【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 デバイスを接続する方法(途中)でした。
解決方法が分かったら、またまとめたいと思います。

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

【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 デバイスを検出する方法でした。
デバイスとの接続とデータ通信については、でき次第記事にしたいと思います。
参考になれば幸いです。

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

【androidjava】intentでFileを送りたい時の注意点

intentで、Fileをそのまま送ろうとするとヌルポを返されて

クラッシュ。

 

スタックオーバーフローによると、fileは

そのままアクティビティに入れる・データベースに格納

しようとするとディレクトリの複製をを拒むため参照元が

全部リセットされて何もない状態で送られること

になり、遷移先でfileを開けようとして実行ができないために起きるみたいですね。

なので、intentで何かのfileを渡すときはUriに加工して送りましょう。

uriの加工はfileproviderで簡単にできるのでそちらを使用。。。

 

サンプルで簡単に書くとこのようになります。

送る側

 

</pre>
Uri intentUri = FileProvider.getUriForFile(this, getPackageName() + ".provider",photoFile);
entryintent.putExtra("uri", intentUri);
startActivity(entryintent);
<pre>

 

受け取る側

 

</pre>
Intent intent = getIntent();
Uri uri = intent.getParcelableExtra("uri");
<pre>

 

これでどこのアクティビティでもUriを使うことができるので

お試しください。

 

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

【androidjava】xmlレイアウトの非表示プロパティについて

androidでは、レイアウトを非表示にしたい場合はinvisibleを使います。

これとinvisibleを組み合わせることで融通の利くUIを作ることが出来る

便利なやつなのですが、最近になってgoneプロパティの存在と

使い方を知りました。

 

どんな役割を持っているかというとまずinvisibleは、

レイアウトを見えなくするだけで実際にはそのレイアウトには

存在するのですが、goneはレイアウトそのものを消しています。

つまり消えた領域にはgoneになったレイアウトの

次のレイアウトが表示させることになります。

xmlではこのように記述します。

</pre>
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/image"
android:visibility="gone"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_marginStart="80dp"
android:layout_marginEnd="80dp"
android:src="@drawable/image_icon" />
</RelativeLayout>

&nbsp;

//この後ろのレイアウトが押し出されて表示される
<pre>

今開発しているアプリはimageviewは真ん中

に置いているのですが、普段何もしない場合は表示しないようにしています。

view.invisibleを使うことでimageviewを消すことは

できるのですが、そのimageviewが見えなくなることで

スペースに不自然な空白が生まれ、アプリとしては

かなり不細工な出来になってしまいます。

ここでinvisible以外のプロパティであるgoneを指定すると

imageviewの次のレイアウトが押し込まれて隙間がなくなり

すっきりした見た目にすることができるのです。

 

ただしデカいandroidで表示させると灰色の余白ができるので

背景色を余白と一緒にするなど工夫も必要になってきます。

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

【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 の参考記事そのままなので、こちらを参考にして頂いても大丈夫です。

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

【androidjava】picassoライブラリについておさらい

androidの画像処理系ライブラリにpicassoというものがあります。

 

何が良いかというと

・画像を無理のないサイズ・プロパティを設けるだけで簡単に調整する

・画像をキャッシュに保存する

これらの課題を短いコードで書くだけで処理をすることができます。

最近になってandroidのライブラリを色々使ってみたいと思っていたので

ネットとpicassoの公式のサンプルを見て簡単なコードを作りました。

 

まずgradleにpicassoの最新バージョンを記述します。


dependencies {
implementation 'com.squareup.picasso:picasso:2.5.2'
}

 

記述はシンプルにimageviewに表示させるのみの機能になります。

 

</pre>
public class MainActivity extends Activity {

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

ImageView imageView = findViewById(R.id.image_view);

int imgId = "http://DCIM/sample.png";

// drawable
Picasso.with(this)
.load(imgId)
.into(imageView);
}
}
<pre>

 

これでandroidで扱うには重い画像も、picassoがちょうどいいサイズで

表示させることができます。

 

androidのカメラで撮った画像は機種に依っては4000*4000とかで

平気で出てくる場合もあるので、重すぎてアプリが落ちたり

表示に時間がかかる場合はpicassoの力を借りた方がよさそうです。

 

一つのアクティビティに複数の加工していない画像を扱う時に

輝きそうです。

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

【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」というエラーが発生した時の対処法でした。
ご参考になれば幸いです。

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