あ、もしよろしければデザイニウム年賀プレゼント企画をやっていますので、気軽にどうぞ☆
（クイズに正解した方にプレゼントする日本酒などを用意しております）

さて、去年の暮れにiPadを対象としたオフライン動作が可能なWEBアプリを作成したので、
少し遅くなりましたが、その際のTipsやアプリケーションキャッシュを用いたiOS用WEBアプリのポイントなどをまとめて公開したいと思います。

※この記事を読んでいる人に説明は必要ないと思いますが、アプリケーションキャッシュとは必要なファイルをローカルに保存するHTML5で追加された仕組みのことです。

0.アプリケーションキャッシュ無しでの開発
1.manifestファイルを用意
2.manifestファイルチェック用のスクリプトを用意
3.開発Tips集

0.アプリケーションキャッシュ無しでの開発

アプリケーションキャッシュを用いた開発は普通のWEB開発に比べて非常に手間がかかります。
今まではファイルをアップロードしてブラウザでテスト…としていたものも、manifestファイルと呼ばれるキャッシュするファイルの一覧を用意してバージョンが上がるたびに、そのファイルを更新したり…。
間違ってキャッシュしてしまったファイルを消すのにも、また手間がかかります。

なので、開発の効率を上げるためにもまずはアプリケーションキャッシュを用いずに開発を開始しましょう。

1.manifestファイルを用意

前述したmanifestファイルについては、以下の記事にわかりやすくまとめられています。
http://dev.classmethod.jp/smartphone/off-line-application-use-application-cache/

なお、文字コードと改行コードは、文字コードUTF-8N、改行コードCRLFで問題なく動作しました。

2.manifestファイルチェック用のスクリプトを用意

これを用意せずにmanifestファイルを定義してしまうと悲惨です。
iOS系端末では設定画面からキャッシュは消せますが、定義されたmanifestファイル自体を消す機能はありません。

どういうことかというと、チェック機能を実装前にそのページにアクセスするとmanifestファイルを一生更新できなくなるということです。

まぁ、iTunes経由で「復元」して出荷状態に戻せば消せるんですけど、そうすると強制的にOSは最新バージョンにされてしまうのでテスト機のバージョンを上げたくない時などは困りますよね。そもそも、めんどくさすぎますし(笑)

チェック用のスクリプトは全体の流れも説明してくれていることもあり、
http://news.mynavi.jp/special/2009/html5-2/002.html
を参考にするのがオススメです。

3.開発Tips集

とまぁ、ただ単にアプリケーションキャッシュを利用するだけなら、そこまで複雑な作業は必要としません。
ですが、開発を進める上でいくつか発生した問題・課題などがありますので、それをTipsという形で共有させていただこうと思います。

●iOS系デバイスでローカルストレージを増やした際のエラー
iOS系デバイスではキャッシュに必要な容量が多くなると、ストレージを増やすかどうかを聞かれます。
増やすを押そうが、キャンセルを押そうが、どちらにしろそのダイアログが出た時点で次のファイルのキャッシュ作業はエラーとなり、そこでキャッシングは終了します。何だソレっていう感じですが仕様なので仕方ありません。

なので、、エラー発生時にキャッシュをやり直す作業が必要となりますので、
appCache.addEventListener(‘error’, handleCacheError, false);
というようなイベントリスナーを用意し、エラーが発生した時点でキャッシュ作業をやり直す指定が必要です。

●PCとiPad(iPhone)で一番違うのはエラーが発生した後の処理。
iPad1はエラーが発生した時点で処理が止まる（以降のファイルはキャッシュされない）ので特に注意が必要です。
manifestファイルに記述したパスに404が含まれるとそれがエラーの原因となるため、大量のファイルを管理するコストを考えると出来る限りCSS SPRITESなどのテクニックを利用してファイル数を少なくするのがオススメです。

ちなみにPCはエラーはエラーとして、その後の処理が止まることはありません。少なくとも404では止まりませんでした。
※PC版safariは定義していなくても勝手にファビコンをキャッシュしようとします。で、ファビコンが無かったらエラーを返してくるという。。。まさに大きなお世話。

●2重にかかったBASIC認証では不明なエラーが発生する
これは自分のミスから発生したエラーなのですが、
sample.com/AAA/
sample.com/BBB/
の二つにそれぞれ.htaccessでBASIC認証がかかっていてAAAのファイルからBBBのファイルを参照している場合、当然ながらBASIC認証が二重に発生します。

認証が2重の場合、一回目の認証は問題ないのですが二回目の認証はダイアログが出た時点でエラーとなり、処理が止まってしまうようです。
さらに、このエラーの場合、iPad1ではキャッシュをクリアしても消えないファイルが発生しました（詳細な発生条件は不明）。
そのファイルにBBBのファイルを参照しているHTMLが含まれていた場合、強制的に2重認証が発生します（2重認証が発生=キャッシュ作業は必ずエラー）。

とりあえず、一度AAA,BBB共に認証を外し、キャッシュを消せる範囲で消してからリロード・キャッシュを再度行ったら直りました。
再現性が低いけれど、エラーの原因がわからなかったら、一度BASIC認証を外してみるというのは対処方法の一つとして試してみる価値はあるかもしれないです。

まとめ
iPhoneやiPadなどの携帯端末・タブレットに搭載されているブラウザは全てHTML5に対応しているため、しばらくの間は、まだブラウザごとの実装状況に大きな差のあるPCよりもスマートフォンなどの方がHTML5の恩恵を受けるのではないかと思います。
ただ、端末自体の処理性能はまだまだ発達途中なので、大容量のファイルのキャッシュには向かないという印象です。

実装方針としては、都度HTMLを更新するのは大変なので、フレームだけHTMLで用意しデータ自体はajaxを利用して通信が行える時に更新するような設計にしておくとmanifestファイルの更新などを考えなくて良いので運用は楽になるんじゃないかと思います。

ということで、HTML5のアプリケーションキャッシュについて、でした。
本年もよろしくお願いします！

主なルールについて

※上記追加ルールが適用された状態のものになっています走行結果と順位発表

企画概要&コンセプト
「Kumamaru’s Labyrinth」は可愛いキャラクターのくままるが
16のステージをクリアしていくゲームです。
端末本体を傾けていくつもの障害をすり抜けていく
直感的なバランスゲームなので、
普段ゲームをしない方や小さいお子様でも楽しめます。

URL: http://itunes.apple.com/jp/app/kumamarus-labyrinth/id479818210?mt=8

尚、「Kumamaru’s Labyrinth」は「corona(http://jp.anscamobile.com/corona/)」で
制作しました。

企画概要&コンセプト
WallPapers by wevyは180個ものムービーから、
あなたの好きなシーンを保存し壁紙にできる
アプリケーションです。
ポップやシュール、ダークな作品と幅の広いラインナップなので、
あなたのお気に入りがきっとみつかることでしょう。

URL: http://itunes.apple.com/jp/app/id468338424?mt=8&ign-mpt=uo%3D4

企画概要&コンセプト
「漢のダイエット」はtwitterと連動した漢(オトコ)のための
究極のダイエットアプリです。
漢には、カロリー計算や運動量登録なんて面倒くさい。
単純に、昨日より痩せればよし。
逆に太れば黙って責めを受ける。
それを繰り返せば、必ず痩せていく。
それをサポートするダイエットアプリです。

URL: http://itunes.apple.com/jp/app/id470548755?mt=8

依然として部員３人のアプリ量産部、第２弾のアプリがリリースされました。
諸事情により、今回のアプリ発表は自分のみです。他２人の部員の作品は今月末に完成予定なのでちょっとだけお待ちください。

というわけで孤立無援で作り上げた今回のアプリ。
発売直後のゲームにハマってしまい時間が足りず、大急ぎで作り上げたのは秘密です。制作期間は２日ちょっと。
基本的にはCoronaの公式ページにあるサンプルコードを改変して作っています。

iTunesの紹介ページはこちら。

以下、紹介文をそのまま抜粋です。
———-
書いてある数字の順に星をタッチ!
タッチされた星はどんどん消えていきます。

全ての星を消し終わったらステージクリア。
あなたの動体視力と反射神経を駆使して、最短タイムに挑んでください。

レベルが上がると星の数と、それぞれの星が動くスピードが増加していきます。
MAXレベルでは画面内がすごいことに・・・・?

どのレベルまでついてこれるかな？
———-

個人的には前回のだるま落としより面白い気はしています。BGMとかちゃんと入ってるし。
ちょっと試してやってもいいかなと思う方はダウンロードしてみてください。有料ですが。

以下、前回と同じように制作途中で気が付いたことや役に立ちそうなことを書き留めておきます。

——————————–

▼オブジェクトの重なり順変更

テキストや画像などのオブジェクトは基本的に、描画された順にレイヤーを追加するようなイメージで上に上にと重なっていきます。
その重なり順を変えたいときに使う関数が「toBack()」と「toFront()」。表示順を変えたいオブジェクトに対して
object:toFront()
のように使います。
普段そんなに使うこともないんですが、たまに順番を入れ替えたいときなどは便利です。

——————————–

▼回転対応してなくてもStore審査は通過できる

以前作っただるま落としを見直していて気付いたんですが、実はこのアプリ、本体の回転に全く対応していません。（今回のアプリは上下対応していますが）
普通、本体を上下逆さまにすれば表示もそれに合わせて逆さまになるものが多いですが、だるま落としは逆さまにしても表示が変わりません。

前に「回転対応しないと審査に通らない」とどこかで聞いた気もするのですが、実際だるま落としは対応しなくても通ってしまったので、必ずしも回転対応しなくてもいいということかもしれません。
（ただしこの先、規約が変われば分かりません。あくまで現時点の事実ということで）

——————————–

制作者の方は参考までに。

今回の種目は長谷川さんが考案したオリジナルゲーム「型抜きポーカー」です。

さて、この型抜きポーカーがどの様なゲームかというと

１.　オリジナルの役表に沿って型抜きの板でポーカーを行う。
２.　順位を出した後に型抜きスタート
３.　役と型抜きの正否によって順位決定。

というものです。
実際はこれに加えて、ハンマーで相手の型抜きを壊すルールがあったりなど無駄に複雑なルールになっていました。
このあたりはよく覚えていないので割愛します。

ポーカーの役が良ければ型抜きは棄権できるというルールがあったため、
圧倒的によい役だった僕はみんなの必死な型抜きを眺めていました。

今回のゲームでは、運に大きく勝敗が左右されるかと思いましたが、型抜きの腕も関わっていたので
運の良さが勝敗を決定付けることはなかったように見えました。
(それでも、僕ほどの運があれば型抜きなど面倒くさいことなどせずに勝てましたが)

上の画像の通りの順位です。
ホワイトボードには早々に型抜きに失敗した人たちの暇つぶしの落書きが書かれています。

次回のゲームは、今回のゲームでは運がなかった生亀さんが決めるそうですので
期待して次回もチャレンジしたいと思います。

ちなみに下の画像は自分が終わった後、手だけでくり抜いた模様たちです。
もし運がなくとも、この型抜きの腕があれば勝っていたでしょう。

企画概要&コンセプト
NHKラジオ「入門ビジネス英語」(2011年4~9月)の内容を
再構成し、iPhone&Androidアプリとしてリリース。

ビジネスシーンですぐに使え、成果をうみだす101語の意味や
事例を音声とともにマスター出来るアプリです。

iPhone版
URL: http://itunes.apple.com/jp/app/id468616401?mt=8

Android版
URL: https://market.android.com/details?id=jp.or.nhk.NHKBusinessEnglish

そんな僕の最近の悩みは肥満。
社内の人間にも、クライアントにも、実家に帰れば家族にも「デブ」と罵られる毎日。
そろそろ生きるのが辛くなってきたので、自分が痩せるためにダイエットアプリを作りました。

その名も

カロリー計算が重要とか、朝バナナとか、ロデオマシンとか、マイクロダイエットとか…
そんな面倒なダイエットは俺みたいなものぐさな漢には向かないんです。

要は「前日より痩せるのを続ければ痩せる」んですよ。

ということで、このアプリ。
特徴は3つ。

１　とにかくシンプル！

基本的には毎日、体重を入力するだけ。
超シンプル！これぞ漢のダイエット！
（※初期登録の時だけは身長と目標体重も入れてくださいね）

ちなみに、入力していくだけなら、それってただのレコーディングダイエットですよね。
もちろん、それだけじゃありません。

２　一人で続かないなら皆で！

きっと、このアプリに手を出す人はダイエットを挫折した経験があるんじゃないでしょうか？
なぜ、挫折してしまったのか？簡単です。

「一人でやったから」

誰かに励まされ、褒められ、叱られ…一人で行うと辛いダイエットも周りの叱咤激励があると、なんとやりがいが出る事でしょうか！

漢のダイエットはtwitterと連動し、前日より体重が増えた場合、強制的に反省tweetが流れます。

反省tweetには、ちょっと恥ずかしいものや、その場で運動宣言、根性試し、罰ゲーム、その他いろいろな文章が用意されており、体重の増加量によって過激さが変化します。
そのtweetを見たフォロワーが楽しみながらも積極的にあなたのダイエットに協力してくれるはずです。たぶん！

３　激燃え！のナビゲーションキャラ

そして、もう一人。このアプリのナビゲーションキャラ「番長」

萌えと対極の存在。まさに漢の中の漢です。

この番長が時に優しく、

時に厳しく、

貴方のダイエットをサポートします。

その他、グラフ機能なども搭載。
僕も今日からこのアプリ使ってダイエットするので漢の皆さん！このアプリで一緒に痩せましょう！

itunes storeへのリンクはこちら。無料です。

※ちなみに、このアプリはtitanium studioというSDKを使用しています。その辺りの技術的な話は次回。