Ionic(Drifty Co.)チームが開発している、Webテクノロジー(HTML、CSS、JavaScript)を使って、モバイルとデスクトップアプリケーションをつくるためののUIフレームワーク。
現在、AngularとReactを公式サポートしており、Vueのサポートも開発中。
- React Native
- Created by Facebook
- Reactで記述
- NativeScript
- Created by Progress
- JavascriptまたはTypescriptなどのAltScriptで記述
- Flutter
- Created by Google
- Dartで記述
※ iOSにはJavaScriptCore.frameworkがSDKで提供されている ※ FacebookがAndroid用にポートしたライブラリ facebook/android-jsc
AngularCLIで新規プロジェクトを作成
npx -p @angular/cli ng new ionic-angular
Ionic追加
npx ng add @ionic/angular
# Build app
npm run build
# Add capacitor
npx ng add @capacitor/angular
# Init
npx cap init
# Edit capacitor.config.json
{ ..., "webDir": "dist/appName" }
# Add iOS option
npx cap add ios
# Open Xcode
npx cap open ios
# Add Android option
npx cap add android
# Open Android Studio
npx cap open android
- Convert Java to Kotlin
Right click on MainActivity file and select convert
- Create GreetPlugin
@NativePlugin
class GreetPlugin : Plugin() {
@PluginMethod
fun greet(call: PluginCall) {
val value = call.getString("value")
val result = JSObject().apply { put("value", "Hello, $value") }
call.resolve(result)
}
}
- Register Plugin
class MainActivity : BridgeActivity() {
public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Initializes the Bridge
init(savedInstanceState, listOf(GreetPlugin::class.java))
}
}
- Call greet function
import { Component, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { GreetPlugin } = Plugins;
@Component({
selector: 'app-root',
template: `
<h1>{{message}}</h1>
`
})
export class AppComponent implements OnInit {
message = '';
async ngOnInit() {
const result = await GreetPlugin.greet({ value: "Yukiya"});
this.message = result.value
}
}
- Create FullscreenPlugin
@NativePlugin
class FullscreenPlugin : Plugin() {
@PluginMethod
fun fullscreen(call: PluginCall) {
bridge.executeOnMainThread {
activity.window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_FULLSCREEN
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
)
call.resolve()
}
}
}
- Register Plugin
class MainActivity : BridgeActivity() {
public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Initializes the Bridge
init(
savedInstanceState,
listOf(GreetPlugin::class.java, FullscreenPlugin::class.java)
)
}
}
- Call fullscreen function
import { Component, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { GreetPlugin, FullscreenPlugin } = Plugins;
@Component({
selector: 'app-root',
template: `
<h1>{{message}}</h1>
<button (click)="fullscreen()">fullscreen</button>
`
})
export class AppComponent implements OnInit {
message = '';
async ngOnInit() {
const result = await GreetPlugin.greet({ value: "Yukiya"});
this.message = result.value
}
fullscreen() {
FullscreenPlugin.fullscreen();
}
}