実践ionicアプリ 25日目 LocalStorageの使用と背景の(ちょっとした)デザイン
表題、おさまりが悪い気もしますが、良い案を思いつくまでこれで行きます。
さて機能の少ないアプリでもLocalStorageにデータを記録すると便利な事は多いと思います。
ゲームブックであれば、コンティニュー機能は欲しい所ですね。
ionicアプリには、後付けでLocalStorageを利用できるようになっています。
コマンドプロンプトで機能のインストールを行い、2つのファイルに数行の追加修正で出来ます。
ただ先にお断りしますと、コードを書く事自体は難易度が高いわけでは無いのですが、少々クセがあります。
その点は、後程実践コードでご説明しますので、まず機能設定を行いましょう。
いつものように"C:\MyTest"に"teststorage"と言うプロジェクトを作ってみましょう。
コマンドは以下の通りです。
------------------------------------------
"cd c:\MyTest"
"ionic start teststorage blank --type=angular" ←新規プロジェクト作成
"cd c:\MyTest\teststorage"
"npm i cordova-sqlite-storage" ← 新たなインストール①
"npm install @ionic/storage-angular" ← 新たなインストール②
"ionic serve" ← どうせ確認するので先に立ち上げておきました------------------------------------------
これでLocalStorageを使う環境が"c:\MyTest\teststorage"内に整いましたので、ソースコードを変更していきます。
VisualStudioCodeで"c:\MyTest\teststorage"を開いて下さい。
"src\app\app.module.ts"でLocalStorageを使用するという宣言をします。
以下のように、import部分に一行、@NgModuleのimportsに一項目追加します。
（@NgModuleのimportsは読みやすいように改行を入れました）
"src\app\app.module.ts"の一部分
---------------------------------------------------------------
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage-angular'; // 追加
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicStorageModule.forRoot(), // 追加,
IonicModule.forRoot(),
---------------------------------------------------------------
これでアプリ内でLocalStorageを使用してデータの読み書きを行う準備が整いました。
今回は、次のようなアプリを作ります。
・アプリを起動するごとにログイン日時をLocalStorageに記録。
・起動回数により背景の変更
・起動回数と日時の一覧を表示
変更するファイルは、以下の(そしていつもの)三つです。
・"src\app\home\home.page.ts" ← javascriptに相当
・"src\app\home\home.page.ts" ← cssに相当
・"src\app\home\home.page.html" ← htmlに相当
実の所、チュートリアル的には欲張った機能だったりします。
(少なくとも私のつまづいた点の解決と言う意味で)
まず、第一に起動した時にLocalStorageを読み込むことはともかく、デザインを変えられるのか？と言う問題があります。
別の所(下記リンクを参照してください)にも書きましたが、アプリ起動時に最初に動くconstructor内でデザインをいじるのは、余り推奨できません。(LocalStorageと組み合わせると成功する事もあるのですが確実と言えるかは不明？)
補記⑤ionic使用の場合、constructor()（コンストラクタ―）内でHTMLいじれません
https://ncode.syosetu.com/n5283hn/92/
そしてもちろん、LocalStorageの扱いもあります。
また見栄え的に背景デザインの動的変更も少々苦労しました。
さて役に立たない苦労話は置いて、プログラミングの話に戻ります。
(コードは次ページに記載予定)
===== 初期デザイン変更 =====
ionicアプリの起動時の処理の順番は、まず"constructor()"と言う名前の関数を実行します。
（なお終了時に最後に走る"デストラクタ関数"はTypeScriptに無いようです。）
ただし、この時点ではHTMLの各要素(例えばチェックボックスなど)は作られていないようです。
(すなわちアクセスできない)
ですので、そのような(表示前にHTML要素に何らかの処理をしたい)場合、Angularで用意されている関数、"ngOnInit()"を使用します。
この関数を使用する場合、"src\app\home\home.page.ts"にいくつか手を加える必要があります。
①先頭のImport部分
②クラス宣言部分
③クラス内に関数定義
それぞれ、以下のような修正を行います。
①先頭行修正
import { Component, OnInit } from '@angular/core'; //修正
今までは、"Component"のみの読み込みでしたが、"OnInit"を追加します。
②クラス宣言部分
export class HomePage implements OnInit {
"implements OnInit"で"OnInit"を実装しますよ！と言う宣言をします。
③クラス内関数定義
ngOnInit(){ }
Angularの機能を使っているので、この名前で関数を定義します。
実際の中身は、次のページで紹介ですが、今回は"・起動回数により背景の変更"と言う目的ですので、ここでLocalStorageへの読み書きをしています。
===== LocalStorageの使用 =====
まず、先にも書きましたがLocalStorageを使用すると、JavaScriptは上から順番にコードを実行するという"普通"の感覚から離れる必要があります。
同じPCなりスマートフォンなりにデータベースがある場合は気にも留めないでしょうが、仮にデータベースが火星に(極端ですが)あったとしたら、応答が返るまでに相当な時間がかかる事は想像に難くないと思います。
そして、その間、プログラムが完全に停止するのも問題が多いとご理解いただけるのではないでしょうか？
ですので、今回使うionicのLocalStorageでもデータベースに問い合わせた後は、プログラムは応答を待たずに先に進みます。
一例：LocalStorageのあるデータを返す関数fnGetDB()があるとして
-----------------------------------------
let SampleData = fnGetDB();
alert(SampleData);
-----------------------------------------
上記のコードは"undifine"を返す。
LocalStorageとのやり取りは、お使いを頼むというイメージで良いと思います。
お使いがいつ帰るか判らない以上、それ以外の処理をしつつ、お使いが成功した場合と失敗した場合の二種類の対処を用意する事になります。
基本的なLocalStorageの使用例を以下に記します。
--------------------------------------------------------------
this.storage.get(this.keyArrLoginHistory)
.then((t)=>{
//以下、ストレージの内容読み込み成功の処理
})
.catch((err)=>{
//以下、ストレージでエラーがあった場合の処理
});
--------------------------------------------------------------
※※ 重要 ※※
上記のコードは、成功・失敗が判明する前に速やかに次のコードを実行します。
ここで入手できるであろうデータを元にしたコードを、その次に書いてはいけません。
その場合、上の例で言えば読み込み成功の処理の箇所に書かなければいけません。
失敗は、・・・何らかの形で再起動を促すとか位しかないかもしれません。
※※ ※※ ※※
===== 背景デザインの動的変更 =====
見た目は大事だと思いますが、上手にデザインの動的変更できないか？と考えて以下の方法に落ち着きつつあります。
(我流なので、もっと良い方法もあるかも？)
"src\app\home\home.page.scss"に色々なクラス別デザインパターンを用意しておき、適宜、HTMLElementのクラスを変更するだけです。
------------------------------------------
let el = document.getElementById('container');
el.className="clsMetal";
------------------------------------------
余力があるならば"className"ではなくて"classList"を使用する手もありますが、そこまで制御する自信はちょっと無いです。
次ページのソースコードでは、
背景の全画面表示(スクロール時に移動しない)と見た目の派手さでグラデーションカラーを実現しています。
(私の様な)CSS初心者には参考になるかも？
Ionic:
Ionic CLI : 6.19.0 (C:\Users\aticltd\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.7
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
npm : 8.3.1
OS : Windows 10
