現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

  1. フロントエンド
  2. 880 view

ハイブリッドアプリ開発チュートリアル【Ionic4＋OnsenUI】

最終更新日:2019/07/03

アプリを作って行こうではないか！
ということで、今回はIonic4でOnsenUIを利用しながらアプリを開発していこうと思います。
OnsenUIを使ってアプリ開発をしたい人もいるかもしれない？＆公式のドキュメントだけだと軽くつまづいたので備忘録程度に記事にしておきます。

公式で詰まった時の補助になればなと。

対象読者
Angularが少しできる人。

今回記事では実機確認を省くので、実機確認は以下の記事を参考にしてください。

Ionic開発環境構築【Ionic DevAppでの実機確認まで】
angularさえできれば、Ionicで秒速でアプリとか作れるらしいよ？？？卍という噂を聞いたのでIonicについて少しまとめ＋tutorial+実機確認をやってみました。Ionicとは開発にはIonic CLIを用いるHTML5を用いたハイブリッドアプリができる。iOS・Android・windowsのク...

OnsenUIとは

モバイルアプリに特化した、ネイティブのようなパフォーマンスに優れたUIコンポーネントが自慢です。タブ、サイドメニュー、ナビゲーションといった共通デザインだけでなく、リストやフォームといった様々なデザインを網羅しています。すべてのコンポーネントでiOSとAndroidマテリアルデザインに対応し、実行する端末にあわせて自動的にスタイルを切り替えます。Onsen UIを使うことで、AndroidとiOS向けアプリのソースコードが遂に共通化されます。

スマホアプリのデザインガイドラインに準拠したマテリアルデザインフレームワークということで使わない手はありません。
最初はAngularMaterialでやろうと思っていたのですが、スマホアプリに特化したCSSフレームワークを利用すべきというのは当たり前でしたね……

Ionic4+Angular Materialの始め方【Ionic事前調査兵団】
どうもぞえです。今日はIonic4でAngular　Materialを利用する方法をご紹介しようと思います。とはいっても基本的にはGetting Started with Angular Material in Ionic 4の内容と同じですので、英語が好きな方はそちらからどうぞ。公式サイトAngular Material以前の記...

Onsen UIの詳細についてはこちら
OnsenUIとは？

OnsenUI　＆　Ionic４の進め方

Ionicアプリを作成してからドキュメントを参考にOnsenUIを利用していく。
日本語ドキュメントなので安心。

https://ja.onsen.io/v2/guide/angular2/

Ionicアプリの作成

ionic start project-name blank
cd ~/project-name
ionic serve

Ionicのスターターテンプレートは以下の通りですが、今回は何もないblankを利用します。

OnsenUIを早速使用していく

npm install onsenui ngx-onsenui --save

app.module.tsの内容変更

import { OnsenModule } from 'ngx-onsenui';
//BrowserModuleのあとでimport

imports: [
   BrowserModule,
   OnsenModule,
],

CUSTOM_ELEMENTS_SCHEMA の読み込み

これによりタグで警告が消える

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
 ],

現在のapp.module.ts

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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OnsenModule } from 'ngx-onsenui';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,OnsenModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
 ],
  bootstrap: [AppComponent]
})
export class AppModule {}

cssの読み込み

global.scssにて以下のコードを追加

@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';

はいこれでOnsenUIを使う準備は完了です。
app.component.htmlにOnsenコンポーネントのボタンを置いてみましょう。
を削除して以下のコードを貼り付けると。

<ons-button>Click Me</ons-button>

画面はば100%のons-buttonを配置することができました。

ここからはより本格的にOnsenUIを使っていきます。

OnsenUIを利用した画面遷移をマスターする

ngx-onsenui はモバイルライクな画面遷移を実現するための特殊なコンポーネント（ページマネージャ）として ons-navigator, ons-splitter, ons-tabbar の3つを提供しています。
ページマネージャを利用すると複数の ons-page を自動的に生成・破壊したり、アニメーションさせたりすることができます。

とのことなので、早速やっていきます。

コンポーネントの作成

CLIでコンポーネント作成。
今回はtimelineという名前で作りました。

ng g component timeline

timeline.component.htmlでOnsenUIを適当に使う
中身を以下に変更

<ons-toolbar>
    <div class="center">First</div>
  </ons-toolbar>
  <div class="background"></div>
  <div class="content">
    First page<br>
    <ons-button (click)="push()">Push</ons-button>
  </div>

セレクターの変更とapp.component.htmlでnavigatorを利用

ページマネージャを利用するにはページを Angular コンポーネントとして定義する必要があります。
ページコンポーネントは以下のように、selector に ons-page[適当な名前] を指定し、その中身を template に記述することで定義します。

timeline.component.tsでセレクターを変更

@Component({
  selector: 'ons-page[timeline]',//ここだけ
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.scss'],
})

ルートモジュール(app.module.ts)の entryComponents に上記で作ったページコンポーネントを追加
declarationsを忘れるとエラーがでます。

差分

import { TimelineComponent } from'./timeline/timeline.component';
entryComponents: [
    TimelineComponent
  ],
declarations: [AppComponent,TimelineComponent],

app.component.htmlの変更

<ons-navigator [page]="initialPage"></ons-navigator>

app.component.tsでrootPageを定義

import { TimelineComponent } from './timeline/timeline.component';
initialPage = TimelineComponent;

見てみると

OnsenUIでページ遷移

ons-navigator はページをスタック状に重ねて管理することのできるコンポーネントです。 ページを画面手前側に追加することを push と言い、一番手前にあるページを取り除くことを pop と言います。 では、初期ページの上に別のページを push してみましょう。

まずは、遷移先のページを作成

ng g component eventpost

先ほどと同様に
eventpost.component.tsでセレクター名を変更

selector: 'ons-page[eventpost]',

app.module.tsでdeclaration,entrycomponentに追加importを行う

import { EventpostComponent } from'./eventpost/eventpost.component';

declarations: [AppComponent,TimelineComponent,EventpostComponent],
entryComponents: [
    TimelineComponent,
    EventpostComponent
  ],

timeline.component.tsで依存性注入pushの処理の実装。

import { EventpostComponent } from'../eventpost/eventpost.component';
constructor(private navigator: OnsNavigator) {
  }

  push() {
    // `ons-navigator` に SecontPageComponent を push
    this.navigator.element.pushPage(EventpostComponent);
  }

はい。ページ遷移ができました。
なんかgifがバグってる、、

まとめ

OnsenUIで謎のエラーが出てたのですが、ゲームしてたら治りました。
とりあえず、まだページ遷移まではやってないですが、随時更新していこうかなと思います。

The following two tabs change content below.
WINDII

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る

  2. IOSアプリをAppStoreに公開する手順書（Ionic）

  3. IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ

  4. Ionic4＋firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  5. ハイブリッドアプリ開発チュートリアル【Ionic4＋OnsenUI】

関連記事

  1. Nuxt.js + Contentful。HeadlessC…

  2. IOSアプリをAppStoreに公開する手順書（Ionic）…

  3. Angular Materialの導入方法【日本語訳】

  4. IonicAcademyでIonic＆Angularでのアプ…

  5. 実務で役立つjQueryのコツ。サクッと実装【逆引きレシピ不…

  6. Ionic4＋firebaseで認証をする方法【ログイン、ロ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP