iPhone(iPod touch)用のWebアプリっぽいモノをHTML5で作ってみた

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

iPhone(iPod touch)用のWebアプリ

Webアプリっぽいモノを作ってみたといっても、以前の『アナログ時計をJavaScriptで作ってみた』という記事を元に HTML5でコーディングしただけです。 🙂
でも、一応 iPhone(iPod touch)での使用を考えていますので、画面サイズなどそれなりに最適化しているつもりです。
それにそのままじゃ、Wi-Fi などのネットワークに接続していないと『ページを開けません。インターネットに接続していません。』と iPod に怒られてしまいます。
iPhone だと3G回線に接続するので問題ないのでしょうけど、私の持っているのは画像を見れば一目瞭然 iPod touch です。
となると、Wi-Fi 環境から外れると上記のアラートが表示されてしまう。
それでは使い勝手が悪いですよね。

とうわけで、オフラインでも使えるようにしました。
ホーム画面のアイコンからフルスクリーン(ツールバーが非表示)で起動します。
画像を見てもらえばわかると思いますが、左上の iPod の文字の横にネットワーク接続アイコンが表示されていません。
Wi-Fi をオフにしても動いています。(といっても静止画じゃわからないでしょうが…)
ご存知の方も多いと思いますが、HTML5で導入されたアプリケーションキャッシュを使っています。
ただ、Mobile Safari の場合は、キャッシュマニフェストによるキャッシュがかなり強力らしく、キャッシュが消去されないとかキャッシュマニフェストファイルに変更があってもキャッシュが更新されないらしい。
JavaScript でキャッシュを更新する方法があるので取りあえず記述していますが、よくわからないというのが正直なところ…

なので、URL を公開するのも気が引けますので、今のところナイショ 😀
もっとアプリケーションキャッシュについて調べないとね。
仮に公開するにしても単純なアナログ時計ではなく、せめてこのブログのサイドバーにある Flash 版や Adobe® AIR® 版のようにアラーム機能くらい搭載してからじゃないと…
あっ、Webアプリケーションってバックグラウンドでも動作し続けるのかなぁ。
バックグラウンドで動作しないとなるとアラーム機能がぁぁぁ… 🙁
やはり、Webアプリケーションじゃなく、ネイティブアプリケーションで作らないとダメなのかなぁ。

まぁ、それ以前にこれを欲しがる人がいるかどうかですけどね。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。