はじめに
もともとはネイティブアプリ開発のエンジニアだったのですが、
そろそろハイブリッドもやりたいなと思っていたところで業務でチャンスがあり、Ionicを触るようになりました。
とはいえ業務だとなかなか好きに触る時間がないので、家で遊んでみることにしました。
Ionicとは
Apache Cordovaベースのハイブリットアプリのフレームワークです。
ベースとなっているCordovaはAdobeのPhoneGapという製品が元になっており、
HTML/CSS/JavaScriptなどのWeb技術でネイティブアプリの開発が可能です。
IonicはAngularがベースとなっており、HTML/SCSS/TypeScriptでネイティブアプリが作れてしまいます。
ちなみに、IonicとAngularのバージョンは下記。
Ionic4.1ではAngular7.2.2が採用されているようです。
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/in-app-browser": "^5.5.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
2019/04/27時点でのGitHubでのスター数はこんな感じ。
- Ionic : 37,811
- React Native : 76,451
- Flutter : 61,418
こうやって見るとあまり人気がないようにも見えますが、
WebViewベースのハイブリッドアプリフレームワークとしては人気があるように思います。
まだまだ日本語のドキュメントや記事が少ないのが難点です。
InAppBrowserとは
Ionicで利用できる、Webブラウザです。
アプリ内で任意のWebページを開きたいときに利用します。
Ionic自体もWebViewベースなので、構造的にはWebViewがWebViewを開いている形になります。
※2019/05/01追記：この記事のとおりに記述すると、WebViewが既定のWebブラウザを開く形になります。
体感としては遅延を感じませんが、端末・OSによってはもっさりした感じがするかもしれません。
Ionicでモバイルアプリを動かす
ionic/cordovaをインストールします。
npm install -g ionic cordova
プロジェクトを作成します。
今回はInAppBrowserでWebViewを開くことがメインなのでblankを選択しましたが、
tabsやsidemenuを選択すると最初からモバイルアプリっぽいテンプレートでプロジェクトを作成してくれます。
ionic start myApp blank
作成したプロジェクトに移動して、アプリをブラウザで起動します。
cd myApp
ionic serve
この画面が出ればOKです。
InAppBrowserを使う
まずはInAppBrowserのモジュールをインストールします。
npm install --save @ionic-native/in-app-browser
次にプラグインを追加します。
ionic cordova plugin add cordova-plugin-inappbrowser
app.module.tsでインポートしてprovidersに追加します。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; // 追加
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
InAppBrowser, // 追加
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
（後略）
今回は、Ionicプロジェクトを始めるとデフォルトで作成されているhome.pageのコンポーネントに追加してみます。
home.page.tsを下記のように書き換えます。
なお、ionViewWillEnter()というのはIonicのライフサイクルです。
iOSの viewWillAppear 、Androidの onStart と同じです。
下記で詳しく説明してくれています。
import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; // モジュールをインポート
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
constructor(private inAppBrowser: InAppBrowser) {}
ionViewWillEnter() {
const browser = this.inAppBrowser.create('https://ionicframework.com/'); // 表示させたいURLでInAppBrowserを作成して
browser.show(); // 表示させる
}
}
上記のコードを記述すると、 ionic serve したままの状態だと自動でコンパイルが走ります。
コンパイルが完了すると、最初に開いたIonicアプリの画面の他に別タブでIonicのTopページが開きます。
Webで確認すると別タブが開いてしまって分かりづらいかもしれませんが、
ネイティブだとこれでデフォルトのブラウザで指定したWebサイトを開くことができます。
https://ionicframework.com/ のURLを入れ替えると、好きなサイトを表示することができます。
Webでアプリを作ったことがある場合は、それをそのまま表示すればすぐにモバイルアプリが作れます。
（ストアに公開するためには、Apple/Googleのディベロッパーライセンスが必要になります）
おわりに
今回はIonicでプロジェクトを作成し、InAppBrowserで表示するところまで試してみました。
IonicはAdmobプラグインもあるようなので、
次回は以前レスポンシブデザインで作ったWebアプリを広告付きでストア公開してみようかなと思います。