実践ionicアプリ 25日目のソースコード
よく使う3つのファイルのソースコードに今回は"src\app\app.module.ts"が加わります。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"と"src\app"です。
src\app\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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage-angular'; //LocalStorageの使用のために追加
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicStorageModule.forRoot(), //LocalStorageの使用のために追加
IonicModule.forRoot(),
AppRoutingModule
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
---------------------------------------------------------------
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="fullfull"><!--背景デザイン用(中身は無い)-->
</div>
<div id="container" class="clsDefault">
<ion-textarea [(ngModel)] = "TextAreaValue" readonly="true" rows="30"></ion-textarea>
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { Component, OnInit } from '@angular/core'; //修正
import { Storage } from '@ionic/storage'; //追加
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
//以下全面修正
export class HomePage implements OnInit {
//ログイン回数
intLoginCount:number;
//今回ログイン日時
txtThisloginDateTime:string;
//ログイン履歴配列
arrLoginHistory=[];
//配列読み込み書き出しキー
keyArrLoginHistory = "keyArrLoginHistory";
txtJson:string;
//配列文字列表示用
TextAreaValue:string
//デザイン用配列
objCssForID=['fullfull']; //複数のHTMLElementの修正が必要なら追加
objCssUsedCls=['clsMeadow','clsDesertSunshine','clsMarine']; //定義済みのCSS
constructor(public storage: Storage) {
//ストレージを利用するために作成
this.storage.create();
}
ngOnInit(){ //初期デザイン等の設定を行っています。
//Date.Now()で取得できるのは、下記の日時からの経過ミリ秒
//（UTC (協定世界時) での 1970 年 1 月 1 日 0 時 0 分 0 秒）
//これをDateオブジェクトにして文字列変更
//それを文字列として表示させているのですが
//今回のやり方は(理解が不足しているため)こういう方法があるとしか言えません。
const testDate = new Date(Date.now());
testDate[Symbol.toPrimitive]('string');
this.txtThisloginDateTime= String(testDate);
this.storage.get(this.keyArrLoginHistory)
.then((t)=>{
//ストレージの内容読み込み成功
this.txtJson = t;
if(this.txtJson==undefined){ //初回はデータが無いので"undefined"が返ってくる
this.intLoginCount=1;
this.arrLoginHistory=[];
}else{
this.arrLoginHistory=JSON.parse(JSON.stringify(this.txtJson));
this.intLoginCount=this.arrLoginHistory.length+1;
}
let objTemp={};
objTemp["回数"]=String(this.intLoginCount);
objTemp["ログイン日時"]=this.txtThisloginDateTime;
//初回も含め、ログイン記録を配列に追加。それをLocalStorageに書き込む
this.arrLoginHistory.push(objTemp);
this.storage.set(this.keyArrLoginHistory,this.arrLoginHistory);
this.TextAreaValue=JSON.stringify(this.arrLoginHistory,null,2);
//ログイン回数ごとに背景デザインを変える
let useCss = this.intLoginCount%3; //3つデザインがあるので3で割った剰余で使用デザインを決める
for(let i=0;i<this.objCssForID.length;i++){ //今回は背景のみだが複数のHTMLElementの変更が必要な事を考慮
let el = document.getElementById(this.objCssForID[i]);
el.className=this.objCssUsedCls[useCss];
}
})
//ストレージでエラーがあった場合
.catch((err)=>{
this.txtJson = `Error ${err}`;
});
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
//グラデーション系背景デザイン3種類
.clsMarine{
position: fixed;/*固定配置*/
top: 0; left: 0;/*左上に固定*/
background: linear-gradient(#05FBFF, #1d91f0 ) fixed;}
.clsDesertSunshine{
position: fixed;/*固定配置*/
top: 0; left: 0;/*左上に固定*/
background: linear-gradient(0deg, rgb(250, 250, 16), rgb(232, 230, 0) 10%,
rgb(125, 120, 11) 60%,rgb(235, 240, 210) 70%, rgb(6, 26, 255) 71%,rgb(156, 86, 255));}
.clsMeadow{
position: fixed;/*固定配置*/
top: 0; left: 0;/*左上に固定*/
background: linear-gradient(0deg, rgb(2, 100, 16), rgb(32, 230, 89) 10%,
rgb(5, 180, 20) 60%,rgb(235, 240, 210) 70%, rgb(6, 26, 255) 71%,rgb(156, 86, 255));}
#fullfull{ //これを全画面背景として使用(上記の３種類のクラスを入れ替えて使用)
width: 100vw;
height: 100vh;
background-color: brown; //デザイン変更失敗の時の背景
}
#container {
background-color: aqua; //デザイン変更失敗の時の背景
color:red; //デザイン変更の成功失敗に関わらず使用される
text-align: left;
width: 80%;
margin: 0 auto;
}
---------------------------------------------------------------
