こんにちは、初めての方は初めまして。
AstCrowと申します。
タイトルのとうりですが、この回ではionicでの制作でAst（このブログ主が作ったアプリ）の仕組み部分をざっくり書いていこうかなと思います。実際のソースとか具体的なものでなくざっくりとした形、仕組みの制作流れといった感じです。
何か登録アプリを作りたくてテンプレになりそうなソース自体を探している方にはすみません、ここには概要とか文章なのでない感じです…
今回は
- Astのざっくりな仕組み
- 仕組みを作るのに使ったコンポーネントやライブラリ等
- やってみて失敗、反省点
あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。
大まかな仕組みと作るための手順分け、でそれらを形にするために使ったコンポーネントやライブラリを少し紹介できたらなと思います。あと、知識不足兼想定不足で失敗したことも。
Astのざっくりな仕組み
まずはどんなアプリを作るのか。
私の場合は、まずはどんなアプリにしたいか→それを形にするために必要な機能→さらにその機能を細かく具体的に、また追加で必須となる機能がれば追加
といった感じで作業を小分けに考えるようにして作成を進めていました。
例えばAstの場合は対戦ゲーム等で分析したいデータをもとにデータを登録するためのテンプレート（チェックリストみたいなもの）を作成し、あとは試合結果データをひたすら登録。登録したデータをもとに勝率や平均値等グラフを出すことが出来て、それをもとに分析して練習したり武器やキャラ、立ち回りを変えてみたり…強くなるためにユーザーは役立てる、といった感じです。
どんなアプリか上記説明ではわかりづらい方、もしよろしければAstはAndroid/iOSのストアで公開されていますのでインストールしてみて下さい。ちなみに無料です。インストールすると私は喜びます（笑）。
▼iOS
▼Android
ざっくりいうとそれを形にするためにAstの場合大まかに三つの機能に分けられると思います。
- 分析したいデータのテンプレートを登録する
- 試合結果を登録する
- 試合結果のデータをもとに計算しグラフ等を出す
登録が多いですね…。登録データがややこしいのですが、テンプレート・試合結果の二つが登録できるようにすることが必須なことがわかります。
さらにこれを、さらにその機能を細かく具体的に、また追加で必須となる機能があれば追加していきます。
初めてのアプリ制作なので、最初は最低限の機能を考えて小分けにして考えていました。
分析したいデータのテンプレートを登録する
- テンプレートのデータを画面の入力フォームから受け取る
- テンプレートのデータを登録する（storage? database?）
- 登録したものを画面確認・変更できるようにテンプレートの登録データを読み込む
- 登録データを削除
- 試合結果の登録・分析画面で使うテンプレートデータの選択変更
試合結果を登録する
- 試合結果を登録するためにテンプレートのデータを読み込む
- テンプレートのデータをもとに試合結果登録用の入力フォームを生成
- 上記入力フォームからデータを受け取る
- 試合結果のデータを登録する（storage? database?）
- 登録したものを画面確認・変更できるように試合結果データを読み込めるように
- 試合結果を削除
- 試合結果を一括で削除
試合結果のデータをもとに計算しグラフ等を出す
- グラフ表示
- 分析のために選択しているテンプレートのデータを読み込む
- 分析のために選択しているテンプレートで登録された試合データを読み込む
- 勝率や平均値の計算
- 検索機能をつける場合の検索内容の入力フォームからデータを受け取る
- 検索データをもとに試合データを絞り込み
すんごくざっくりですがこんな感じでしょうか…。グレーの部分は必須かと言われればそうじゃないかもだけれど、出来たら欲しい機能（要は後回しにできる部分）といった感じです。
ちなみに実際に作成したアプリ（Ast）は上記だけでなくもっと機能やらが盛り付けられていて、勝敗ではなくランキング等の試合結果用のテンプレートや分析結果のグラフが用意されていたり、一括削除も選択削除だけでなく期間を選択して削除する機能があったり、もっと細かいところだと試合結果画面では削除や変更毎に画面上部にスクロールするような快適性の調整を入れたり、データの上順/下順変えられたり……やっている内にランナーズハイならぬクリエーターズハイになっていたかもしれないです。
こういった感じで作業を小分けにしながら作成を進めていました。
こんがらがる方は箇条書きにするといいと思います！私は難しい、もしくはわかりずらいと思ったことは箇条書きにするようにしています。
でないと、私の場合はアプリ制作なんてしたことなく当然知識がなかったため調べることがわんさか…どこから手をつければ自分の思うような形にできるか迷ってしまうためです。（というか分からなくなってしまう…）
作業を小分けにしておくと、今日は●●と●●の機能を追加する！とか1日の制作目標も立てやすくておすすめです！
仕組みを作るのに使ったコンポーネントやライブラリ等
上記仕組みを作るにあたり制作で使ったものをいくつか紹介してみようと思います。実際にはもっと色々入れていますが、大まかな機能はこの子達のおかげでどうにかなった感じです。
storage
こちら簡単にデータの登録ができる優れもの！実装がすごく楽。呼び出しもすごく簡単です。
Astではテンプレートとかの登録とか、多量ではないけれどちょっとしたもののデータ登録で使っている箇所があります。
使用している環境によってデータの保存場所が変わり基本的にSQlite > ndexedDB > WebSQL > localstorageといった感じでデータベースが使えればそちら優先で保存されるよう。
Amdroid/iOSのアプリにする場合はcordova-sqlite-storageのプラグインが必須です。（要はアプリ内ではブラウザではないしndexedDB、WebSQL、localstorageが使えないので、SQliteのプラグイン入れてSQliteに保存できるようにさせているらしい）
さらにこいつはデータをキー(key)、バリュー(value)で保存します。jsonの形ですね。
最初私はこいつを使えばデータが登録できる…！と、そこまではまあ良いのですが、なんと全部の登録系データをこれで登録しようとしていました（！）
ええ…、とアプリ作ったりプログラム書いている方だと思うかと思います。
本当にお恥ずかしいのですが、私はアプリ制作経験もなくまたプログラマでもなかったためにデータベースについて詳しくなく…SQliteの使い方やコマンドや関数等々も全くわからなかったため、現状簡単に実装出来たstorageさんでどうにか作ってみようと、そんなとんでもない考えで途中まで作成していました。
SQlite
ionicではSQliteというデータベースがフレームワーク入れて使うことが出来ます。
今思えばstorageでなく最初からこいつ勉強して、こいつ一本で制作すればより良かったかも…とたまに思いますが、storageはstorageでいいところがあるのでまあいいかな…。
こちらはstorageと違いキー(key)、バリュー(value)ではなくデータベースで一般的なテーブルの形でデータを保存することが出来ます。
結構多量なデータを保存できるようです。
フレームワークではデータの保存、削除のほかにSQliteのその他のコマンドや関数が色々使えます。
例えばあるテーブルのカラム（テーブルの中のデータのひとまとまり）内の全データの合算や平均値を簡単にしかも高速で出せたり（さすがデータベース）、一部の数値がどれだけあるのかデータの絞り込みができたり…。
ionicで多量のデータを保存する、もしくは保存したデータを何か絞り込みして数値を出す、なんてことをするアプリを作りたい方は是非この子を！
chart.js
これはionicのフレームワークではないです。jsのライブラリです。
グラフをサイト等で画像でなく出したい場合（例えばjsonやらcsvの大元データをある場所に格納するだけでサイトのグラフがそれを読み込んで常に最新で簡単に更新や運用を楽にしたり）なんかによく使われるオープンソースのライブラリで、この子をAstでは分析結果のグラフで一部使用しています。
ionicはtypescriptを使っているので、jsのライブラリとかも使えちゃったりします。
jsのライブラリは豊富で色々なものがあるので何か面白いエフェクトとかのjsライブラリを調べてマークしておくと制作で使えていいかも！
やってみて失敗、反省点
上記読んでもうお気づきかと思いますが……データ保存でやらかしています。全部の登録系データをstorageで登録しようとして途中まで制作してしまいました。
でどこで一体気がついたのかというと分析で勝率出したり数値まで出せるようにして、やった！ここまでできた！！！じゃあいざデータ負荷テスト！です…。
storageではSQliteのように高速で中のデータの合算や平均値を出す関数なんてないですし、そもそもデータをキー(key)、バリュー(value)で保存するので全データから一旦個々に必要なデータをキーバリューから抜き出して、さらに絞り込んだり…それからやっと合算やらこちらで計算式書いて数値出す…といった感じで当然スピードはデータが増えれば遅く……とても素晴らしい静止画がそこにはありました（笑）。
本当に…アホですね。そもそもそこまで作る前に気がつけよ、と…。
当然試合結果の登録から分析データを表示する仕組みの所は作り直し、というかSQlite使うように書き換え。
SQliteはここでやっと勉強に本腰入れて習得。おかげでSQliteのコマンドや関数がわかるようになり、結果絞り込み検索の機能が後々追加ができました。
ちなみにstorageがではデータ保存で使うにはダメなのか、と思う方もいるかもですがそんなことはなく要は向き不向きの問題だと思っています。
storageは多量のデータを保存する、もしくは保存した多量のデータを何か絞り込みして数値を出す、みたいなことはやりづらいのです。その代わりキー(key)、バリュー(value)でデータを保存するため、データの取り出しやそのまま突っ込んで色々使える場面が多く（要は余計なデータの成形が減ったり）、上記のことが該当しなければ非常に使い勝手が良いのではと思います。
ちょっとした簡易的なゲームなんかだったらstorageの方が楽なんじゃないでしょうか。
今回の失敗ですが仕組み云々というよりは、知識不足からくる無知が主な原因です。
知らないって怖い…せめてもっと調べて学習すれば良かったなと反省です…。
おかげで再度データ負荷テストするまでに一ヶ月近くかかった気がします…。
最後に
私のアホさ軽率さがよく出た記事になってしまいました…。本当知らないって恥ずかしいし悲しい…。
次回は上記データ保存で色々あって深く印象に残ったstorageやSQliteの使い方を書いてみようかなと思います。
ionicでのデータの保存で、storageもしくはSQlite使いたい方向けな内容になる予定です。
