プラグインの開発はほぼ完了しています。残っているのは Android の実装だけです。
前提条件: 続ける前に Capacitor Custom Native Android Code documentation のドキュメントをよく理解してください。
Android Studio で
npx cap open android
を実行し、Capacitor アプリケーションの Android プロジェクトを開いてください。
app モジュールと
java フォルダーを展開し、アプリの Java パッケージを右クリックします。コンテキストメニューから
New -> Package を選択し、plugins という名前のサブパッケージを作成します。
plugins パッケージを右クリックし、前述のプロセスを繰り返して、ScreenOrientationという名前のサブパッケージを作成します。
次に、
ScreenOrientation パッケージを右クリックし、コンテキストメニューから
New -> Java File を選択して、新しい Java ファイルを追加します。このファイルの名前を
ScreenOrientationPlugin.java
とします。また、同様にこの作業を行い、ScreenOrientation.java
という名前の新しいファイルを作成します。
次のコードを
ScreenOrientationPlugin.java
に貼り付けます:
package io.ionic.cap.plugin.plugins.ScreenOrientation;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;
@CapacitorPlugin(name = "ScreenOrientation")
public class ScreenOrientationPlugin extends Plugin {
@PluginMethod()
public void orientation(PluginCall call) {
call.resolve();
}
@PluginMethod()
public void lock(PluginCall call) {
call.resolve();
}
@PluginMethod()
public void unlock(PluginCall call) {
call.resolve();
}
}
Java と JavaScript の橋渡しをするために、プロジェクトの MainActivity の中にプラグインクラスを登録します。 MainActivity.java
を開き、プラグインを登録するための
onCreate()
メソッドを追加してください。
package io.ionic.cap.plugin;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import io.ionic.cap.plugin.plugins.ScreenOrientation.ScreenOrientationPlugin;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(ScreenOrientationPlugin.class);
}
}
iOS と同様に、まず現在の画面の向きを取得することに取り組みます。
ScreenOrientation.java
を開いてクラスを設定し、現在の向きを取得するメソッドを書きます。
package io.ionic.cap.plugin.plugins.ScreenOrientation;
import android.view.Surface;
import androidx.appcompat.app.AppCompatActivity;
public class ScreenOrientation {
private AppCompatActivity activity;
public ScreenOrientation(AppCompatActivity activity) {
this.activity = activity;
}
public String getCurrentOrientationType() {
int rotation = activity.getWindowManager().getDefaultDisplay().getRotation();
return fromRotationToOrientationType(rotation);
}
private String fromRotationToOrientationType(int rotation) {
switch (rotation) {
case Surface.ROTATION_90:
return "landscape-primary";
case Surface.ROTATION_180:
return "portrait-secondary";
case Surface.ROTATION_270:
return "landscape-secondary";
default:
return "portrait-primary";
}
}
}
次に、ScreenOrientationPlugin.java
に
orientation
メソッドを配置して、実装クラスのメソッドを呼び出すようにします:
package io.ionic.cap.plugins.ScreenOrientation;
import com.getcapacitor.JSObject;
/* Remaining imports omitted for brevity */
@CapacitorPlugin(name = "ScreenOrientation")
public class ScreenOrientationPlugin extends Plugin {
private ScreenOrientation implementation;
@Override
public void load() {
implementation = new ScreenOrientation(getActivity());
}
@PluginMethod()
public void orientation(PluginCall call) {
JSObject ret = new JSObject();
String type = implementation.getCurrentOrientationType();
ret.put("type", type);
call.resolve(ret);
}
/* Remaining code omitted for brevity */
}
load()
メソッドは、Capacitor ブリッジオブジェクトで ScreenOrientation
クラスのインスタンスを初期化するのに適切な場所です。
Android Studio 内で、実際のデバイスまたは Android エミュレーターでアプリを実行します。Logcat** を開くと、呼び出しがログに記録されているのが確認できるはずです:
V/Capacitor/Plugin: To native (Capacitorプラグイン): callbackId: 89582874, pluginId: ScreenOrientation, methodName: orientation
注意: ログの正確な値は、あなたにとって異なるものになります。この例では、
115962915
はプラグインから呼び出されたメソッドに割り当てられた任意の ID です。
Android はデバイスの回転を実行時の設定変更と見なします。したがって、プラグインが 設定変更を処理する 方法が必要です。
Capacitor はオーバーライド可能なメソッド
handleOnConfigurationChanged()
を提供しており、これを使用して実行時の設定変更に対応することができます。
まず、ScreenOrientationPlugin
クラスに以下のインポートを追加してください:
import android.content.res.Configuration;
次に、ScreenOrientationPlugin
クラスに以下のメソッドを追加します:
@Override
public void handleOnConfigurationChanged(Configuration newConfig) {
super.handleOnConfigurationChanged(newConfig);
this.onOrientationChanged();
}
private void onOrientationChanged() {
JSObject ret = new JSObject();
String type = implementation.getCurrentOrientationType();
ret.put("type", type);
notifyListeners("screenOrientationChange", ret);
}
Android がアプリケーションに設定変更を通知する際、新しい設定オブジェクト全体を返すため、2 つの課題があります:
これらの課題を解決するために、プラグインが以前の
newConfig.orientation
値を追跡し、その後の設定変更と比較する必要があります。
ScreenOrientation
クラスに以下の追加を行います:
@Nullable private int configOrientation;
public boolean hasOrientationChanged(int orientation) {
if (orientation == configOrientation) {
return false;
} else {
this.configOrientation = orientation;
return true;
}
}
ScreenOrientation.java
に androidx.annotation.Nullable
をインポートすることを忘れないでください。
そして、ScreenOrientationPlugin.java
の
handleOnConfigurationChanged()
メソッドを更新してください:
@Override
public void handleOnConfigurationChanged(Configuration newConfig) {
super.handleOnConfigurationChanged(newConfig);
if(implementation.hasOrientationChanged(newConfig.orientation)) {
this.onOrientationChanged();
}
}
このプラグインは、実行時の設定変更がオリエンテーションの変更に関係する場合にのみ、リスナーに通知するようになりました。
iOS の実装で見たように、JavaScript の OrientationType を対応するネイティブの列挙型値にマッピングするヘルパーメソッドが必要になります。Android では、OrientationType を ActivityInfo 列挙型の値に対応付けます。以下のメソッドを
ScreenOrientation
クラスに追加してください:
private int fromOrientationTypeToEnum(String orientationType) {
switch (orientationType) {
case "landscape-primary":
return ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
case "landscape-secondary":
return ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE;
case "portrait-secondary":
return ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT;
default:
// Case: portrait-primary
return ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
}
}
ScreenOrientation.java
に android.content.pm.ActivityInfo
がインポートされていることを確認してください。
次に、ScreenOrientation
クラスに
lock()
メソッドを追加してください:
public void lock(String orientationType) {
int orientationEnum = fromOrientationTypeToEnum(orientationType);
activity.setRequestedOrientation(orientationEnum);
}
このメソッドは ScreenOrientationPlugin
クラスから呼び出される必要があります:
@PluginMethod()
public void lock(PluginCall call) {
String orientationType = call.getString("orientation");
if(orientationType == null) {
call.reject("Input option 'orientation' must be provided.");
return;
}
implementation.lock(orientationType);
call.resolve();
}
lock()
メソッドに orientation
という入力パラメータを与えない呼び出しに対して、ガードしていることに注意してください。
画面の向きをロック解除するには、アクティビティのオリエンテーション・タイプを未指定の列挙型値に設定します。以下のメソッドを
ScreenOrientation
クラスに追加してください。
public void unlock() {
activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
}
そして、 ScreenOrientationPlugin
クラスから実装メソッドを呼び出します。
@PluginMethod()
public void unlock(PluginCall call) {
implementation.unlock();
call.resolve();
}
Android Studio で、端末またはエミュレーターでアプリを実行します。「Rotate My Device」ボタンを押すと、画面の向きが横向きに回転し、さらに回転させると、画面の向きがロックされていることが確認できます。「Confirm Signature」を押すと、画面の向きがロック解除されます。
注意: プラグインをテストする前に、 自動回転 デバイスの設定が オン になっていることを確認してください; そうでない場合は、機能しません。
おめでとうございます!ウェブ、iOS、Android で動作する Capacitor プラグインが完成しました。👏 👏 👏
現状では、ScreenOrientation
プラグインはローカルプラグインであり、このアプリケーションだけが使用することができます。そして、それは OK です! 多くの場合、プラグインは特定のアプリケーションの中だけで使いたいものです。しかし、複数のアプリでプラグインを再利用したい場合は、最後のステップであるプラグインのパッケージングでその方法を確認します。