SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
Ionicアプリのデータ管理
わたしは誰ですか?
本田 克己(ほんだ かつみ)
@kponda
おんせん県おおいた県
株式会社クオックス
GDG九州 コ・オーガナイザ(買い出し係)
日本Androidの会 大分支部(休眠中)
Ionicとの出会い
以前はネイティブアプリ開発メインでHTTPとの付き合いはAPIや管理画面
2013年にMeteorに触れて衝撃を受ける
-> はじめてのリアクティブ開発
-> Cordova使ったモバイルアプリ対応
Meteor-Angularでのモバイルアプリチュートリアル
-> Ionicと出会う
(Meteorからの影響でGraphQLにも興味をしめす)
https://pixabay.com/ja/%E6%B5%81%E6%98%9F-%E7%81%AB%E7%81%BD-%E5%BD%97%E6%98%9F-%E5%9C%B0%E7%90%83-
%E3%82%AE%E3%83%A3%E3%83%A9%E3%82%AF%E3%82%B7%E3%82%A2-1420503/
Ionicアプリの実行形態
・ハイブリッドアプリ:Cordova・Capacitor
・Webアプリ : PWA的な
データの保存先
オフライン
アプリケーション
オフラインでも動作する
オンライン
アプリケーション
オンライン
アプリケーション
アプリで管理したいデータ例
ローカルデータ オフラインサポート オンラインデータ
アプリの設定 SNSとか
他のユーザと共有する
複数の端末で共有する
とか色々
オンラインデータの
キャッシュ
未反映の書込みデータ
ユーザデータ
辞書データ
マスターデータ
Ionicで使えそうな保存先
ローカルデータ オフラインサポート オンラインデータ
SQLite Firebase Cloud Firestore
localStorage
IndexedDB
PouchDB
Firebase
Realtime Databaseとか
クラウドDB色々
各種APIとか色々
CouchDB
Ionicで使えそな保存先
名称 特徴 容量 Native
SQLite
モバイルアプリ開発でよく使われる RDB。SQLが使え
る。TypeORM等のORマッパーも使える。
○ ✔
LocalStorage
お手軽、簡単、KVS。文字列しか保存できないので、
JSON.stringifyとかする。大きいデータは保存できな
い。
5MB
IndexedDB
大体のブラウザで使えるようになっているデータベー
ス。操作の仕方がちょっと独特。
○
PouchDB
CouchDB互換のJSで動くDB。データの保存は
IndexedDBを使っている。リモートの DBと同期が取れ
たりする。
○
Cloud Firestore
みんなだいすきFirebase
オフラインサポート機能もあってステキ
○
Realtime Database
iOS/Android用SDKにはオフラインサポート機能がある
けど、JS SDKにはないのが残念
Realm JavaScriptは使うことができない
ネイティブ開発でのDBにRealmもよく使っていました
Realm JavaScriptという製品がでてIonicからも使えるかも♡と期待しましたが
残念ながらReact NativeとNode.jsからだけしか使えません
https://realm.io/docs/javascript/2.2.0/api/index.html
ローカルデータの保存先
事が足りればLocalStorage
簡単、お気楽
事が足りない場合にどうするか
LocalStorageじゃ事足りない場合
ハイブリッドアプリ Webアプリ
ネイティブ開発の延長で SQLite使っていた
IndexedDB
将来PWA対応するかもしれないから
IndexedDBを使ったほうがいいかも
PouchDBの機能も気になる
Offline First
オフラインサポート
ローカルデータ オフラインサポート オンラインデータ
Firebase Cloud Firestore
PouchDB CouchDB
独自に作る
基本オンラインでオフラインサポートを行う -> Firestoreがお気軽でよさそう
完全にオフラインでも使いたい -> PouchDBか独自に作るしか
Firebaseで気をつけないといけないこと
・無料枠を超えるともちろん有償
・中国本土からは繋がらない(台湾、香港は大丈夫)
余談:グレートファイアウォールはホスト名を元にブロックしているっぽい?
Firebaseホスティングでカスタムドメイン設定していたら繋がりました
(ページは表示されるけどFirestoreに繋がらないのでデータは読めない😥)
とりあえずの結論
ハイブリッドアプリ
ネイティブプラグインを色々
使ったりしてPWA対応しなさ
そうなやつ
PWAにも対応するアプリの
オフラインデータ
オンラインデータ
localStorage
PouchDB
Cloud Firestore
CouchDB
SQLite
雰囲気だけで選んでいたので実験
色々な利用ケースを想定した実験をしたかったのですが準備間に合わなかった
多めのデータをデータベースに登録してみた
気象庁のホームページからダウンロー
ドしたCSVファイルを各種DBに追加す
る時間を計測
大分市の最低、最高気温16年間分
5840件
https://www.data.jma.go.jp/gmd/risk/obsdl/index.php
思ってたのと全然違う結果
実験前の雰囲気予想
時間が短い順に
1. localStorage
2. SQLite
3. IndexedDB
4. PouchDB
5. Firebase RealtimeDatabase
6. Firebase Cloud Firestore
計測端末 Xperia XZ (2年以上前のポンコツ)
1件づつの書き込みが完了するのを待つようにしている
(バルク処理していない)
1回目 2回目 3回目 平均 最小
localStorage 1.03 0.815 1.062 0.97 0.82
SQLite 101.906 110.103 106.832 106.28 101.91
IndexedDB 6.831 5.575 6.181 6.20 5.58
PouchDB 160.171 152.194 113.276 141.88 113.28
RealtimeDB 30.042 28.808 30.735 29.86 28.81
Firestore 30分以上まっても終わらず
Firestore遅すぎじゃね?
無料プランだと速度でるはずがない
https://firebase.google.com/docs/firestore/quotas?hl=ja
Realtime Databaseは無料プラン
での書き込み制限はないみたい
従量課金に切り替えて再実行
してみたけど直ぐには反映されな
い?
計測間に合いませんでした。ごめんなさい。
計測結果
時間が短い順に
1. localStorage
2. IndexedDB
3. Firebase RealtimeDatabase
4. PouchDB
5. SQLite
6. Firebase Firestore?
とはいえバルクインサートで計測しただけなので色々なパターンを試して判断しようと思います。
今の所の結論
事が足りるのであれば LocalStorage
事が足りなければ IndexedDB
Firestoreは課金設定忘れずに
とはいえバルクインサートで計測しただけなので色々なパターンを試して判断しようと思います。
ご清聴ありがとうございました

Weitere ähnliche Inhalte

Ähnlich wie Ionicアプリのデータ管理

IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1Koyo Takenoshita
 
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209Yoichiro Shiba
 
Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013Takashi EGAWA
 
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」Nobutaka OSHIRO
 
Dynamic frameworks tips
Dynamic frameworks tipsDynamic frameworks tips
Dynamic frameworks tipsSyo Ikeda
 
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)オラクルエンジニア通信
 
知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界Tatsuya Kobayashi
 
ラジコンがネットと出会ったら
ラジコンがネットと出会ったらラジコンがネットと出会ったら
ラジコンがネットと出会ったらTakuya Andou
 
スマートフォン市場動向 110525
スマートフォン市場動向 110525スマートフォン市場動向 110525
スマートフォン市場動向 110525Naoto Takeda
 
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)icchiman
 
人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-Takashi Yamanoue
 
androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社Katsuaki Sato
 
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)Yukihiro Kimura
 
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングxR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングShinya Tachihara
 
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コトDaiyu Hatakeyama
 
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説光吉 浜谷
 

Ähnlich wie Ionicアプリのデータ管理 (20)

IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1
 
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
 
Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013
 
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
 
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
 
Dynamic frameworks tips
Dynamic frameworks tipsDynamic frameworks tips
Dynamic frameworks tips
 
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
 
知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界
 
ラジコンがネットと出会ったら
ラジコンがネットと出会ったらラジコンがネットと出会ったら
ラジコンがネットと出会ったら
 
スマートフォン市場動向 110525
スマートフォン市場動向 110525スマートフォン市場動向 110525
スマートフォン市場動向 110525
 
Mobile first
Mobile firstMobile first
Mobile first
 
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
 
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-
 
androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社
 
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
 
Why android 2011
Why android 2011Why android 2011
Why android 2011
 
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティングxR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
 
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
 
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
 

Mehr von Katsumi Honda

Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかAngularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかKatsumi Honda
 
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) IonicのススメKatsumi Honda
 
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンMeteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンKatsumi Honda
 
はじめてのMeteor
はじめてのMeteorはじめてのMeteor
はじめてのMeteorKatsumi Honda
 
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Katsumi Honda
 
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会Katsumi Honda
 
イマドキのWebアプリの作り方
イマドキのWebアプリの作り方イマドキのWebアプリの作り方
イマドキのWebアプリの作り方Katsumi Honda
 
はじめてのPython
はじめてのPythonはじめてのPython
はじめてのPythonKatsumi Honda
 
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacはじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacKatsumi Honda
 
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsはじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsKatsumi Honda
 
冬だからAndroid再入門
冬だからAndroid再入門冬だからAndroid再入門
冬だからAndroid再入門Katsumi Honda
 
Osc2012 appinventor のその後
Osc2012 appinventor のその後Osc2012 appinventor のその後
Osc2012 appinventor のその後Katsumi Honda
 
秋だからEclipse再入門
秋だからEclipse再入門秋だからEclipse再入門
秋だからEclipse再入門Katsumi Honda
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門Katsumi Honda
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 AndroidハンズオンKatsumi Honda
 
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組みKatsumi Honda
 
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみたKatsumi Honda
 
はじめてのAndroid開発
はじめてのAndroid開発はじめてのAndroid開発
はじめてのAndroid開発Katsumi Honda
 

Mehr von Katsumi Honda (18)

Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととかAngularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
 
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ
 
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョンMeteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョン
 
はじめてのMeteor
はじめてのMeteorはじめてのMeteor
はじめてのMeteor
 
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発
 
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会
 
イマドキのWebアプリの作り方
イマドキのWebアプリの作り方イマドキのWebアプリの作り方
イマドキのWebアプリの作り方
 
はじめてのPython
はじめてのPythonはじめてのPython
はじめてのPython
 
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for MacはじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for Mac
 
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for WindowsはじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for Windows
 
冬だからAndroid再入門
冬だからAndroid再入門冬だからAndroid再入門
冬だからAndroid再入門
 
Osc2012 appinventor のその後
Osc2012 appinventor のその後Osc2012 appinventor のその後
Osc2012 appinventor のその後
 
秋だからEclipse再入門
秋だからEclipse再入門秋だからEclipse再入門
秋だからEclipse再入門
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 Androidハンズオン
 
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み
 
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた
 
はじめてのAndroid開発
はじめてのAndroid開発はじめてのAndroid開発
はじめてのAndroid開発
 

Ionicアプリのデータ管理