ハイブリットアプリでのDBへのアクセス方法

ハイブリッドアプリを制作してAppStoreなどに公開しようと思っています。
サーバを使わないようなアプリで、iPhone内のストレージやDBのみで完結させようと思っています。

Monacaと呼ばれる開発環境があるそうで、ここで作られたTodoアプリなどあるのですが、それはインターネット常にあるサーバのDBへアクセスしてデータの保存や抽出を行っています。

作りたいアプリは完全オフラインでもデータ（テキストや画像）の保存ができ、出力ができるものです。
そこで一つ疑問なのですが、iPhoneなどの内部ストレージなどに保存することはできるのでしょうか？ハイブリットアプリで（JavaScript)

DBをiPhone内部に持っていると思うのですが、サンプルなど見つからないので、どうやって作っていくのかわかりません。

行動規範の内容に同意します

回答3件

monacaで開発をおこなっている者です。

monacaではlocalStorageが使用できます。
文字列と画像(canvasタグ)の保存/取得方法↓↓

■文字列
保存方法は

javascript
1localStorage.setItem('Key', 'value');

取得方法は

javascript
1var str = localStorage.getItem('Key');

ちなみに削除方法は

javascript
1localStorage.removeItem('Key');

■画像(canvasタグ内の画像の場合)
保存方法は

javascript
1var canvas = document.getElementById(canvasタグのid);
2
3var base64 = 	canvas.toDataURL();
4
5localStorage.setItem('Key', base64);

取得方法は

javascript
1var base64 = localStorage.getItem('Key');
2
3var image = new Image();
4	
5image.src = base64;
6 	
7var ctx = document.getElementById(canvasタグのid).getContext("2d");
8
9ctx.drawImage(image, 0, 0);

こんな感じで保存/取得ができるかと思いますよ＾＾

投稿2016/04/07 07:47

esora

総合スコア21

どうも。phonegapを使ってハイブリットアプリ開発をしているものです。
ハイブリットアプリの開発はPhonegapでの経験しかないのでPhonegap
のお話をさせていただきます。ざっくりですみませんが、回答させていただきます。

**>そこで一つ疑問なのですが、iPhoneなどの内部ストレージなどに保存することはできるのでしょうか？ハイブリットアプリで（JavaScript) **

可能です。元々ブラウザにもWebViewにも内部ストレージに保存できる
APIが用意されているのでそれを使う感じです。
SQLを使いたければSQLiteベースのWeb SQL Databaseが使えます。
わたしも今これを使っています。
補足ですが、Web SQL Databaseは2010年にW3Cより正式に廃止されて
いるのでもしかしたら今後使えなくなるかもしれませんが、2016年の
今でも使えているので人気があるんでしょうね。
もし完全に使えなくなったらIndexedDBというやつを使わないといけなく
なりますが、それは触ったことありません。

使いかたはとても簡単です。ブラウザでも動きます。
詳細は、下記ページを読んでみてください。
http://www.tohoho-web.com/html5/web_sql_db.html

簡単なソースも載せておきます。ブラウザでも使えるのでもしよければ試してみてください。
ブラウザでのデータベースに値が書き込まれたかの確認は
Google chromeなら表示→開発/管理→デベロッパーツールのResouseタブ
で確認できます。

javascript
1///// sql.js /////
2//データベースをオープン
3var db = openDatabase('sample.db', '1.0', 'sample', 1048576);
4//テーブル作成
5db.transaction(
6  function(tx) {
7    tx.executeSql('CREATE TABLE IF NOT EXISTS address(name, address)');
8  },
9  function(error){console.log('失敗')},
10  function(){console.log('成功')}
11);
12
13//値追加
14db.transaction(
15  function(tx) {
16    tx.executeSql(
17      'INSERT INTO address VALUES (?,?)',
18      ['山田さん','東京都'],
19      function(){console.log('成功')},
20      function(){console.log('失敗')}
21    );
22  },
23  function(error){console.log('失敗')},
24  function() {console.log('成功')}
25);
26
27//値を読み込み
28db.transaction(
29  function(tx) {
30    tx.executeSql('SELECT * from address',
31    null,function(rt,rs){
32      if(rs.rows.length === 0) return;
33      console.dir(rs.rows);
34    },function(){console.log('失敗')});
35  },
36  function(error){console.log('失敗')},
37  function() {console.log('成功')}
38);

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4<head>
5<title>SQL TEST</title>
6<meta charset="utf-8">
7</head>
8<body>
9<script src="sql.js"></script>
10</body>
11</html>

※ Web SQL Database 開発のポイント ※
・iOSのiCloud Storage Apiを使う場合はデータベースの容量が大きいとリジェクトされます。
・コールバック地獄になりやすいのでJqueryを使える環境であれば$.Deferredを
うまく使うといい感じです。
・もしPhonegapで開発する場合はCordova-sqlite-storageを使うといいです。
データベースのオープン以外はWeb SQL Databaseと同じ使い方です。

>画像の保存について
Phonegapの場合、画像はFile APIというものを使います。
iOSもAndroidもカメラロールの画像の直リンクができないので一時保存
ディレクトリに保存して、それをユーザーディレクトリに移動して、そのパス
をWeb SQL Databaseに保存するみたいな感じでやることが多いので結構しんどい
ですが頑張ってください。

※ Phonegap 開発のポイント ※
・英語を軽くでも読めないとしんどいです。
・やることにもよりますが、プラグインがない場合や古すぎる場合も
あるのでObjective-CもJAVAも書かないといけないこともあります。
・初めてのPhonegap且つクライアント案件は死亡フラグなのでやめた方がいいです。
・ゲームは無理です。

投稿2016/04/06 18:33

編集2016/04/06 18:51

IShix

総合スコア1724

manabufukai

2016/04/07 03:43

確かに、・webSQLのほうが使い勝手のよいところも多い・IndexedDBはまだ不安定さがあるというところはありますがこれから始めようという方に対して、いつ使えなくなるかも分からないものを勧めるのはどうかと思います。 WebSQL自体、Web Application Working Groupが「今後管理を続けていく意向を持っていない」と明示しています。 https://www.w3.org/TR/webdatabase/

行動規範の内容に同意します

ハイブリッドアプリでは