Ionic Framework の紹介

ionic-framework.md

Ionic Framework の紹介

Ionic Framework とは

Ionic(Drifty Co.)チームが開発している、Webテクノロジー（HTML、CSS、JavaScript）を使って、モバイルとデスクトップアプリケーションをつくるためののUIフレームワーク。

現在、AngularとReactを公式サポートしており、Vueのサポートも開発中。

Other Major Cross-Platform Frameworks

• React Native
  • Created by Facebook
  • Reactで記述
• NativeScript
  • Created by Progress
  • JavascriptまたはTypescriptなどのAltScriptで記述
• Flutter
  • Created by Google
  • Dartで記述

How it Works

※ iOSにはJavaScriptCore.frameworkがSDKで提供されている ※ FacebookがAndroid用にポートしたライブラリ facebook/android-jsc

How Ionic Works

プロジェクト作成

AngularCLIで新規プロジェクトを作成

npx -p @angular/cli ng new ionic-angular

Ionic追加

npx ng add @ionic/angular

iOSプロジェクトの追加

# 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

Androidプロジェクトの追加

# Add Android option
npx cap add android

# Open Android Studio
npx cap open android

プラグインの作成 (Android編)

GreetPlugin

1. Convert Java to Kotlin

Right click on MainActivity file and select convert

2. 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)
  }
}

3. Register Plugin

class MainActivity : BridgeActivity() {
  public override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Initializes the Bridge
    init(savedInstanceState, listOf(GreetPlugin::class.java))
  }
}

4. 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
  }
}

FullscreenPlugin

1. 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()
    }
  }
}

2. 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)
    )
  }
}

3. 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();
  }
}