みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

オフラインでもイエローカードを出せるようにする

つくったもの HTML

先日つくって一部でそれなりに好評いただいた、 jsrun.it と jsrun.it ですが、1つ大きな問題点を抱えていました。

そう。それはオンライン環境でないとカードを切れないということです。

これは由々しき自体ですね。
オフライン環境でカードを切りたくなることもありますからね。

で、その問題を書いけるしたのがこちら。

新 Yellow Card と、新 Red Card です。

ソース

HTML

<!DOCTYPE HTML>
<html lang="ja" manifest="manifest.appcache">
<head>
    <meta charset="UTF-8" />
    <title>イエローカード</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="iPhoneをイエローカードっぽくつかえます。" />
    <meta name="viewport" content="minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="appicon.png" />
    <style>
        html {
            height: 100%;
            background: -webkit-gradient(linear, left top, left bottom, from(#ffee61), color-stop(0.2, #f4dd1b), to(#f4dd1b));
        }
    </style>
    <script>
        document.querySelector("title").innerText = "Yellow";
    </script>
</head>
</html>

マニフェストファイル

CACHE MANIFEST
# 2013-06-22:0.0.3

CACHE:
index.html
appicon.png
favicon.ico

ソースはこんな感じです。
アプリケーションキャッシュに保存しているので、オフラインでも観覧できます。
これで一安心ですね。