Ionicで簡単なメモ帳アプリ(データの登録・保存)を作成する方法についてまとめました。
## 【はじめに】メモ帳アプリ
Ionicで次のようなメモ帳アプリを作ってみます。
事前準備として、データ保存用に「cordova-sqlite-storage」というプラグインをインストールしてきおきます。
$ ionic cordova plugin add cordova-sqlite-storage $ npm install --save @ionic/storage
## 【作成】ホーム画面
ホームテンプレートを次のように編集します。
■src/pages/home/home.html
<ion-header> <ion-navbar color="primary"> <ion-title> メモ帳 </ion-title> <ion-buttons end> <button ion-button icon-only (click)="createItem()"> <ion-icon name="add"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item *ngFor="let item of items" (click)="editItem(item)"> {{item.title}} <button ion-button color="danger" item-end (click)="deleteItem(item)"> <ion-icon name="trash"></ion-icon> </button> </ion-item> </ion-list> </ion-content>
■src/pages/home/home.ts
import { Component } from '@angular/core'; import { NavController, ModalController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { InputItemPage } from '../input-item/input-item'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public items = []; constructor(public navCtrl: NavController, public modalCtrl: ModalController, private storage: Storage) { } ionViewDidLoad() { this.storage.get('items').then((items) => { this.items = items ? items : []; }); this.storage.ready().then(() => { }); } createItem() { let addModal = this.modalCtrl.create(InputItemPage); addModal.onDidDismiss((item) => { if(item) { // 入力があれば追加 this.items.push(item); this.updateStorageData(); } }); // モーダルの表示 addModal.present(); } editItem(item) { const index = this.items.indexOf(item); // モーダルの生成 let editItem = this.modalCtrl.create(InputItemPage, { item: item }); // 閉じられた時の処理 editItem.onDidDismiss((item) => { if(item) { this.items[index] = item; this.updateStorageData(); } }); // モーダルの表示 editItem.present(); } deleteItem(item) { const index = this.items.indexOf(item); this.items.splice(index, 1); this.updateStorageData(); } updateStorageData() { // ストレージのデータ更新 this.storage.set('items', this.items).then(() => { }); } }
項目 | 概要 |
---|---|
ionViewDidLoad | ・ページが読み込まれた時のイベント ・itemsプロパティ(タイトル・メモが保存された配列)を更新するのに使用(ホーム画面上のメモ一覧も更新) 【参考】NavController – Ionic API Documentation – Ionic Framework |
onDidDismiss | モーダルで表示したデータ入力画面から、入力されたデータが帰ってきた時にitemsプロパティに追加 |
ViewController | 表示されるViewを管理・操作 【参考】ViewController – Ionic API Documentation – Ionic Framework |
## 【作成】データ登録画面
① 以下のコマンドでメモを登録する画面(ページ)を作成します。
$ ionic generate page InputItem
② テンプレートを次のように編集します。
■src/pages/input-item/input-item.html
<ion-header> <ion-navbar color="primary"> <ion-navbar> <ion-title>データ登録</ion-title> </ion-navbar> <ion-buttons end> <button ion-button icon-only (click)="close()"> <ion-icon name="close"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>タイトル</ion-label> <ion-input type="text" [(ngModel)]="title"></ion-input> </ion-item> <ion-item> <ion-label floating>メモ</ion-label> <ion-input type="text" [(ngModel)]="memo"></ion-input> </ion-item> </ion-list> <button full ion-button color="primary" (click)="saveItem()">保存</button> </ion-content>
■src/pages/input-item/input-item.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-input-item', templateUrl: 'input-item.html', }) export class InputItemPage { public title: string; public memo: string; constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) { } ionViewDidLoad() { let item = this.navParams.get('item'); if (item) { this.title = item.title; this.memo = item.memo; } } saveItem() { let inputItem = { title: this.title, memo: this.memo }; // 入力された値を閉じる際に返す this.viewCtrl.dismiss(inputItem); } close() { this.viewCtrl.dismiss(); } }
## 【コンポーネント編集】データの新規登録
■app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { IonicStorageModule } from '@ionic/storage'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { InputItemPage } from '../pages/input-item/input-item'; @NgModule({ declarations: [ MyApp, HomePage, InputItemPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, InputItemPage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
– | 参考文献・関連記事 |
---|---|
参考 | ■[Ionic3] Storageを使ったTODOアプリの作成 |
関連 | ■【Ionic入門】Android・iPhoneアプリ開発編 |
コメント