こんにちは、初めての方は初めまして。
AstCrowと申します。寒くなってきましたね。
タイトルのとうりですが、この回ではionicでの制作で使ったデータの保存、主にSQLiteについて書いていこうかなと思います。
前回の分けた記事の後半分になります。
ionicで何かデータを保存させるようなアプリを作りたい方は是非是非。私が制作したアプリのAstでは入力フォームからの数値や文字列、チェックの可否を登録しているため、主にテキストと文字列の保存がメインとなっております。
今回は
- SQLiteについて
- データベースとテーブルについて
- SQLiteの準備
- SQLiteの使い方
あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。
データベースとは、テーブルとはなんぞや？てな方向けにも項目分けて書いています。知っている方はすっ飛ばしてくださいませ。
前前回もSQLiteは軽く紹介していますが、再度まとめておこうともいます。内容が被っている箇所がありすみません…。
ここらへんはやっていないとどうも忘れやすいのでしっかり書いておこうと思います。
ちなみにソース等ですが、この記事では4系以降を扱っています。またAngularで書いています。veu.jsの場合はインストールするフレームワークや記述が異なる場合があります。
SQLiteについて
前前回でも軽く紹介しておりますが、ionicではSQLiteというデータベースがフレームワーク入れて使うことが出来ます。
こちらはstorageと違いキー(key)、バリュー(value)ではなくデータベースで一般的なテーブルの形でデータを保存することが出来ます。前に少し調べたのに忘れてしまったのですが…一つのテーブルに結構多量なデータを保存できるようです。
このフレームワークではデータの保存、削除のほかにSQLiteのその他のコマンドや関数が色々使えます。
例えばカラム内のデータ合算や平均値の計算、条件でデータの絞り込みだったり。
上記をデータベースの方で高速で数値を出してくれます。さすがデータベースといったところ。
ionicで多量のデータを保存する、もしくは保存したデータを何か絞り込みして数値を出す、なんてことをするアプリを作りたい方は是非この子を！
データベースとテーブルについて
使ったことある方にはいらない内容ですが…知っている方はすっ飛ばしてくださいませ。
私はほとんどデータベース使ったことがなく、正直初心者でした。アプリAstの制作でがっつり触って覚えた感じです。
そんな初心者な私でも6ヶ月ほどで（実際はLPサイトの制作や公開準備で7ヶ月ほどかかっていますが）こういったデータベース使ったアプリを作れたので、使ったことない方でも大丈夫です！
アプリ作ったことない方、データベース触ったことない方向けにものすごくざっくりですが説明しますと。
まずはデータベース。単刀直入にいうと整理されたデータの塊のことです。
ネット上にもいろんな親切で素敵な記事がいっぱいありますので、ちょっといくつかリンクを上記に貼ってみましたので、参考にどうぞ。
テーブルとはカラムとはなんぞや？ですがすんごくざっくりにいうと表と列です。エクセルの表とかイメージするとわかりやすいかもです。
テーブルという大きないろんなデータを保存する箱にカラムという1件のデータの中のさらに細かい詳細データのカテゴリを分ける小箱なり仕切り版があります。
そこに1件、2件…とデータを入れていきます（登録）。1件のデータの中の詳細データはカテゴリと、何件目のデータなのかが分別されて入っている感じです。
htmlいじったりそれ関連のお仕事している方ならhtmlのテーブルをイメージの方がわかりやすいかも。横、縦のdtがデータ件数かカラム（カテゴリ）な感じのhtmlのテーブルまんまです。
上記文章ではイメージがしずらい方はもっと物理的な物として薬箱をイメージするとわかりやすいかなと思います。
下記にわかりやすいように薬箱のイメージを載せてみました。
上記をテーブルに例えると、この薬箱自体が一個のテーブル（データの塊）。
朝・昼・夜に分けられた横のカテゴリ、分別がカラム。
この薬箱にはルールがあり、朝は丸、昼は六角、夜は四角と箱に入る薬の形を決めています（この薬箱の場合カラムのデータ型を決めている）。
1日目、2日目…と割り振られた縦軸が1件あたりのデータの塊です。必要な分だけその日の体調を想定した薬を選び、必要な分だけ日数に薬を入れています（登録）。
ざっくりこんな感じでしょうか。
データベースでどんな感じでデータを分けて保存しようか…となった際は上記薬箱でどうカテゴリ分けしてデータを格納するのか考えるといいかなと思います。（紙で上記のような図とか書いてイメージ固めるのもいいかも！）
SQLiteの準備
まずはフレームワークのインストール。
最初にインストールするアプリのデータを開いて
cd ●●インストールするフォルダ名のファイルパス●●〜
を入力してエンターで開く。
まずはSQLiteのフレームワークを追加。
npm install cordova-sqlite-storage
を入力してエンター。私はcapacitorを入れているので上記ですが入っていない、cordovaを使っている方は『ionic cordova plugin add cordova-sqlite-storage』を入れてエンターで追加。
npm install @ionic-native/sqlite
を入力してエンター。最新のものかどうか気になる方は
ionic cap sync
入力してエンターで更新かけてもいいかなと思います。
これで必要なものはインストールされています。
ここからSQLiteを使うための記述をtsファイルに追加していきます。
app.module.tsに追加
import { ~~} from '~~/~~';
import { SQLite } from '@ionic-native/sqlite/ngx';
@NgModule({
declarations: [ ~~ ],
imports: [ ~~ ],
providers: [ ~~,
SQLite ],
~~ })
export class AppModule {}
フレームワークの追加状況によって皆差異があると思いますが、上記の赤字を該当箇所に追加する感じです。
後ろに追加する際は前文後ろの「,」を忘れないように！（私はよく忘れます…）
次に使用するページのtsファイルに下記を追加
使用ページのtsファイル
import { ~~} from '~~/~~';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';
@Component({ ~~ })
export class ●ページ名● {
constructor(~~, ~~, private sqlite: SQLite) { ~~ }
db: SQLiteObject = null;
////////// ここにSQLiteの登録やら削除やら記述を行う //////////
}
ここまで入れたら使用準備OK!です。実際のデータを保存するソースを上記青の箇所にゴリゴリ書いていきます。
SQLiteの使い方
上記で書いた使用ページのtsファイル内に記述を書いていきます。
いろんなことや指定、設定ができるのですがものすごく長くなってしまうため、こちらではテーブルの作成、削除、カラム追加やデータの登録、変更、削除のみの、シンプルかつ必要最低限な内容だけ載せようと思います。
SQLiteはテーブル作る際にカラムというカテゴリも一緒に設定することができます。
ここでカラムのデータ型（文字列なのか、整数なのか等）を設定できますが、SQLiteの場合は指定しなくても使用は可能です。
指定しない場合はいろんな型のデータが入りますが、一応SQLite側で登録されたデータが何の型なのか区別しているようです。
面倒かもですが、ここでデータの型を指定することでSQLiteがそのカラムに入ったデータが数値なのか文字列なのか等認識することができ、絞り込み検索やらカラムの合算やらが的確にできるので指定しておいた方がいいかなとは思います。
ちなみにカラムの型を決めた場合でも、そのデータ型でないものを登録することが可能です（SQLiteめっちゃ自由）。ですがデータの組み合わせによっては値の変換が勝手に行われるそうなので、当然ですが変な挙動やおかしなバグを生むようなことはしない方がいいかなと思います。
カラムはできればデータ型を指定し、データを登録する場合は、そのデータベースのカラムのデータ型にあった形でデータを加工なりして登録、といった感じが良いかなと。
データの区別がどんな感じで分けられているのか等詳しく知りたい方はこちらの素敵なページをどうぞ。
データベースの作成またはロード
db_create_load(){ //何かデータベース作成する際のイベント
this.sqlite.create({
name: '●任意のデータベース名●.db', //※nameのデータベースが作成されている場合は作成されず読み込まれるだけ
location: 'default'
}).then((db: SQLiteObject) => {
this.db = db; //準備で書いていたdb: SQLiteObject = null;に格納させて他登録やら絞り込み検索やらでデータベース呼ぶ際に使いまわせるようにしている
});
}
テーブルとカラム作成
create_table(){ //何かテーブル作成する際のイベント
this.db.executeSql('CREATE TABLE IF NOT EXISTS ●任意のテーブル名● (●任意のカラム名とデータ型の設定●)', []).catch(e => console.log(e));
}
テーブル名は任意のものをどうぞ。
カラムとデータ型の設定ですが、『●任意のカラム名● ●データ型●』といった形で入力します。（カラム名とデータ型の間は半角アキ）
半角開けて,をつけることで複数のカラムを指定可能です。
データの型を入れない場合はなしで大丈夫です。
データ型ですがSQLiteでは5種類のデータの型が使用できます。
TEXT： 文字列
INTEGER： 数値（整数）。符号付整数。1, 2, 3, 4, 6, or 8 バイトで格納。
REAL： 数値（小数：真数）。浮動小数点数。8バイトで格納。
BLOB： エンコードされない文字列。
NULL： NULL値。0すらない空。
例えばテーブル名『cat』でカラムを2つ指定するとして。1つ目のカラム名を『moyou』、データ型を『TEXT』、2つ目のカラム名を『kazu』、データ型を『INTEGER』にする場合は
this.db.executeSql('CREATE TABLE IF NOT EXISTS cat (moyou TEXT , kazu INTEGER)', []).catch(e => console.log(e));
といった感じです。
IDのような個々データにしか割り振られない値が入るカラムには半角あけてPRIMARY KEYを記述すると、データ登録で間違って被って登録しようとした場合にエラーになり登録することができないようにすることができます。
テーブルの削除
delete_table(){ //何かテーブル作成する際のイベント
this.db.executeSql('DROP TABLE ●削除するテーブル名●');
}
カラムの追加
add_column(){ //何かカラム追加する際のイベント
this.db.executeSql('ALTER TABLE ●使用するテーブル名● ADD COLUMN ●任意のカラム名とデータ型の設定●');
}
任意のカラム名とデータ型の設定はテーブルとカラムの作成のところと記述は同じです。
追加したカラムはテーブルの一番後ろに追加されます。
任意の場所に追加したいかもしれませんが、SQLite実はできる関数や文がなく…ですがやろうと思えば任意の場所に入れることはできなくはないです。
やる場合は
- 変更テーブルの名前をリネーム
- 新規で変更テーブル名で、カラムも追加カラムが任意の順番になった状態で作成。
- リネームしたテーブルのデータを2で作成したテーブルに移動
- リネームしたテーブルを削除
ちなみにこのカラムの追加ですが実は制約があります。
- PRIMARY KEY や UNIQUE 制約は指定できない。
- DEFAULT 制約を設定する時は、CURRENT_TIME/CURRENT_DATE/CURRENT_TIMESTAMP は指定できない
- NOT NULL 制約を設定する時は、NULL以外のデフォルト値の設定が必要
データの保存
save(){ //何かデータ登録する際のイベント
this.db.executeSql('INSERT INTO ●使用するテーブル名● VALUES (●登録するデータ●)').catch(e => console.log(e));
}
登録するデータはそのテーブルのカラムの数どうり指定して格納します。
複数カラムがある場合は半角空けて,で複数指定します。
そのカラムに0でもない完全にデータ自体が存在しない場合はnullを指定してあげます。カラムと登録するデータの数が合わないとエラーになります。
データの順番ですが、テーブル作成した際のカラム追加順どうりにデータを登録させます。
例えばテーブルとカラム作成の例で出したテーブルにデータを保存する場合。
登録するデータはmoyou⇒『kuroneko』、kazu⇒『2』の場合。
this.db.executeSql('INSERT INTO cat VALUES ("kuroneko" , 2)').catch(e => console.log(e));
例えばデータを保存する場合で値が0でもない完全にない場合。
登録するデータはmoyou⇒『kijitora』、kazu⇒値が0でもない完全にない場合。
this.db.executeSql('INSERT INTO cat VALUES ("kijitora" , null)').catch(e => console.log(e));
ままこんな感じです。文字列を入れる場合は""を忘れずに。
データの変更
rev(){ //何かデータ変更する際のイベント
this.db.executeSql('UPDATE ●使用するテーブル名● SET ●変更するデータのカラム名● = ●変更値● WHERE ●変更データの条件式●;’).catch(e => console.log(e));
}
WHEREの後ろに変更するデータの条件式（絞り込みするための式）を書きます。
複数のデータが該当する場合はそれぞれ変更されます。
例えば上記データ保存で出した例で登録したものを変更する場合。
変更はmoyou：kuroneko、kazu：2、をkazuを変更してkazu⇒『1』にする場合。
this.db.executeSql('UPDATE cat SET kazu = 1 WHERE moyou = "kuroneko";’).catch(e => console.log(e));
とまあこんな感じです。
データの削除
delete(){ //何かデータ削除する際のイベント
this.db.executeSql('DELETE FROM ●使用するテーブル名● WHERE ●削除データの条件式●;').catch(e => console.log(e));
}
WHEREの後ろに削除するデータの条件式（絞り込みするための式）を書きます。
複数のデータが該当する場合はそれぞれ削除されます。
最後に
すんごく長くなってしまいました…。
本当は絞り込みだとか、合算の出し方、データの取り出し方なりもっと書きたかったけれど体力がもたない…（どうも文章書くのが苦手で記事一個書くのに一時間〜二時間くらいかかってしまう為）。
ほんとはSQLiteここで全部片付けるつもりだったのですが、次もSQLiteについて書けなかった部分書いていこうと思います。