SvelteからIonicを経由でネイティブ操作してみた！
はじめに
みなさん初めまして
株式会社ネクストビートでアプリエンジニアとして働いている福本と申します。
主にiOS / Androidのアプリ開発を担当しています。
現在ネクストビートでは、SvelteとIonicを使用したモバイルアプリ開発を行なっています。
業務でCapacitorプラグインを使用している中で、どのようにSvelte側からnative側の処理を呼んでいるか気になり、自身でSvelte側からnative側の処理を呼び出すプラグインを作成してみようと思います。
この記事では、Svelte側から文字列を受け取り、Nativeのダイアログを表示する処理を記載していきます。
プロジェクト作成部分については、前回の記事『Svelte×Ionicでモバイルアプリのプロジェクトを作成してみた』をご確認ください。
Native側の処理の記載
この記事では、文字列を受け取りダイアログを表示します。
Xcodeで開くため、npx cap open ios を実行します。実行後、APPグループで右クリックを行い、「New File…」を選びファイルを作成します。
@objc(ShowDialog)
public class ShowDialog : CAPPlugin {
@objc public func show ( _ call : CAPPluginCall ) {
let title = call.getString( "title" ) ?? ""
let message = call.getString( "message" ) ?? ""
letalert = UIAlertController (タイトル: タイトル、メッセージ: メッセージ、preferredStyle: .alert)
alter.addAction( UIAlertAction (タイトル: " OK"), style: .default, handler: nil))
DispatchQueue.main.async {
UIApplication.shared.delegate?.window??.rootViewController?.present(alert, animated: true, completion: nil)
}
}
}Capacitorにプラグインを登録
CapacitorがSwift側とTypeScript間で値を受け渡せるように登録します。
CAP_PLUGIN (ShowDialogPlugin,"ShowDialog",
CAP_PLUGIN_METHOD(show,CAPPluginReturnPromise);
)次にAndroid Studioでプロジェクトを開くため、npx cap open androidを実行します。javaフォルダを展開し右クリックを行い、「New -> Java Class」を選択しファイルを作成します。
@CapacitorPlugin(name = "ShowDialog")
public class ShowDialogPlugin extends Plugin {
@PluginMethod()
public void show(PluginCall call) {
String title = call.getString("title");
String message = call.getString("message");
new AlertDialog.Builder(getActivity())
.setTitle(title).
setMessage(message)
.setPositiveButton("OK", null)
.show();
}
}Capacitorプラグインを定義
こちらもCapacitorがJava側とTypeScript間で値を受け渡せるように登録します。
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
registerPlugin(ShowDialogPlugin.class);
super.onCreate(savedInstanceState);
}
}Nativeプラグインにリンクしたオブジェクトを作成
TypeScriptでインターフェースを定義し、リンク先のオブジェクト型を定義します。
export interface ShowDialog {
show(options: { title: string, message: string }): Promise<void>;
}
const ShowDialog = registerPlugin<ShowDialog>('ShowDialog');
export default ShowDialog;プラグインを使用
Svelte側でボタンタップ時にネイティブのダイアログを表示するようにします。
<h1>Svelte</h1>
<div class="card">
<button on:click={() => ShowDialog.show({title: "テストダイアログ", message: "Svelteからの値"})}>
Tap!!
</button>
</div>iOSでアプリを起動します。
npm run dev :ios任意のデバイスを選択し、ボタンをタップするとダイアログにSvelte側から渡した値が表示されました！
次にAndroidでアプリを起動します。
npm run dev :androidこちらも任意のデバイスを選択し、ボタンをタップするとiOS側と同様に、Svelte側から渡した値がダイアログで表示されました！
作成を終えて
今回の記事では、文字列を渡してダイアログを表示するという既存のプラグインと同様のものになりますが、SvelteからIonicを経由してネイティブ操作するプラグインを作成することは、予想以上にシンプルで直感的でした。
Ionic側からネイティブ側への橋渡し部分も特に難しいことはありませんでしたので、今後はネイティブ側で処理を記載する必要があった際には、この方法を使用していこうと思います。
最後まで読んでいただきありがとうございました。
私達は雇っています！
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
