Mobile 5‎ > ‎

Application Cache


本サンプルはOS2.1, OS 2.2以降での実行が必要です。

実行結果


HTML5のApplication Cacheの仕組みと、GoogleのGoogle Font API ( http://code.google.com/apis/webfonts/ ) を使用した実験をしました。

Application Cacheを有効にするにはindex.htmlの<html>タグを

<html manifest="droidget.manifest">

としてdroidget.manifestで、1行目にCACHE MANIFEST と記載し、キャッシュしたいファイル名を列挙していきます。

CACHE MANIFEST
index.html
http://fonts.googleapis.com/css



<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>

とする事で、Web FONTを取り込みます。


一度取り込んだWeb APIは、ローカルにキャッシュされますので、次回からはWebへの問い合わせせず使用する事ができるようになります。

configの編集

src/config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="UAAgent_1281148337204" version="1.0" width="300" height="200">
<content src="index.html" type="text/html"/>
<name>Font API Test</name>
<description>Application Cache Test</description>
<author url="http://www.gclue.com"></author>
<icon src="icon.png"/>
<access uri="http://googleapis.com" subdomains="true" />
<access uri="http://googleusercontent.com" subdomains="true" />
<license>(C)2010 GClue K.K</license>
</widget>

indexの編集


src/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html manifest="droidget.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
</head>
<body>
FONT API TEST
</body>
</html>

Manifestの作成


src/droidget.manifest
CACHE MANIFEST
index.html
http://fonts.googleapis.com/css


Comments