- pixelfactory トップ
- HTML5特設サイト HTML5 Lab.
iPad向けオフラインコンテンツを作る
2010.08.23
今、一番お問い合わせの多いのが、iPad向けのオフラインコンテンツ制作に関するものです。
iPadでオフラインコンテンツとしてHTMLを使う場合、
safariでCache Manifest、Key-Value Storage、Relational Databaseを使う方法が考えられますが、
Cache Manifestは、更新時などの動作が不安定な事がある、
Key-Value Storageだと上限が5MBまで、
などの問題があるので、Relational Databaseを今回使いました。
データは、base64エンコードしたテキストでDBに保存、
表示の際には、dataスキームで表示します。
ファイルをbase64エンコード
この処理はPHPで行ないました。(base64.php)
<?php
$file_name = $_GET["data"];
if(file_exists($file_name)){
$file64 = base64_encode(file_get_contents($file_name));
}
header("Content-type: text/plain; charset=UTF-8");
echo $file64;
データの格納
javascriptでDBへデータを格納します。
base64エンコードしたデータは、jQueryのajaxで呼び出しました。
var file = "hoge.jpg";
var db = window.openDatabase(image, "2.0", "Image Data", "5242880");
if(navigator.onLine){
try {
if (window.openDatabase) {
if (!db) {
alert("データベースストレージが使えません。");
}
$.ajax({
url: 'base64.php',
async: true,
cache: false,
data: 'data=' + file,
dataType: "text",
success: function(text){
db.transaction(
function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS imagedata(name CLOB, data CLOB);');
tx.executeSql('SELECT name FROM imagedata WHERE name = ?;', [file], function(tx, rs) {
if(rs.rows.length){
tx.executeSql("UPDATE imagedata SET data = ? WHERE name = ?;", [text,file] );
} else {
tx.executeSql("INSERT INTO imagedata (name, data) VALUES (?, ?);", [file,text] );
}
});
},
function(error) {
alert( 'transaction error : ' + error.message);
}
);
}
});
} else {
alert('データベースストレージはサポートされていません。');
}
} catch (error) {}
}
データの呼び出し
呼び出しはこのような感じで呼び出せます。
(例:idが"dbimg1"のimgタグに1つ目のデータを書き出す場合)
var db = window.openDatabase(image, "2.0", "Image Data", "5242880");
db.transaction(
function(tx) {
tx.executeSql('SELECT * FROM imagedata;', [], function(tx, rs) {
var db_data = rs.rows.item(0).data;
var source = document.getElementById('dbimg1');
var data = 'data:image/jpeg;base64,' + db_data;
source.src = data;
});
});
ちなみに、この方法では動画をiPadに表示することは出来ませんでした。
(PC版safariなどでは表示可能です)
動画コンテンツは、アプリなどでまるごと保存する形がベストかと思います。
- iPad向けオフラインコンテンツを作る
（2010.08.23） - HTML5 Lab. スタートします！
（2010.06.14）
