iOS:html5のサウンド機能を利用

広告の登録に時間がかかっています

今作成しているアプリには広告を入れようと思っているのですが、アップルの用意しているiAdは
日本向けの広告が少ないようなのでNendを利用してみようと思います。
→参考:Nend
でもって申請したのですが、登録/審査に3営業日かかるそうなのです。
 
アプリはデバッグも完了しアイコンも作成したのでほとんどすることが
ありません。なので当初付ける予定ではなかった効果音を付けようと思います。
 

iOSでもhtmlのサウンド機能が利用できました

BGMはすでに付けており、複数のhtmlを跨いで管理する必要からxcode側で操作しています。
しかし効果音はhtmlを跨いで管理する必要はないのでローカルストレージと同じように
html側で付けることに挑戦しました。
 
以前、挑戦して出来なかったのですが再挑戦です。
結果としては出来ました。以前出来なかったのはxcodeのリソースにサウンドデータを
登録し忘れていた貯めたと思われます。xcodeのややこしい所で、リソースフォルダに
入れただけではxcodeに登録されず、手動で登録しなければならないのです。
スクリーンショット 2014-05-31 18.33.00
 
html上でも確認できるサンプルを用意しました。
前回の記事で作成したローカルストレージのサンプルに組み込んでいます。
サウンドを再生する方法は2つあり1つはhtmlのaudioタグを利用するもの。
もう1つはaudioオブジェクトを利用するものです。
→参考:ローカルストレージのサンプル「サウンド再生のボタンが2つ追加されています」
ローカルストレージ同様にシンプルに機能が実現できているので
ソースを確認してみてください。
 
html5のaudioタグはDOM要素として操作しなければならないので
アプリではaudioオブジェクトを使ってみようと思います。
 
 

追伸:結局はSEもxcodeで

実際にアプリに組み込んでみたのですが、音が鳴るのにワンテンポ遅れます…。
(シミュレータでは問題ないのですが、実機の古いiPodTouchで遅れます)
 
audioタグを利用する方法ではプリロードの設定が出来るので、プリロードする
設定にしたのですが、やはり遅れます。
ということで結局、効果音もxcodeで再生すようにしました。
 
 
 

2048:進捗具合

まとまった時間が取れたので平日だけどブログ更新。
今週学んだ新しいこと等
長々と書いていますが、最後の「ローカルストレージ」だけでも読んでみてください。
 

複数のhtmlを利用する時の注意点

jQuery問題集はhtmlの構成がシンプルだったので、htmlはindex.htmlだけだったのですが、
今回は構成要素が多いため、複数のhtmlを用意しました。
スクリーンショット 2014-05-29 20.00.14
しかし心配事が1つありました。全てのデータをローカルに置くとはいえ、ページ移動の際に
ページの構成要素がすぐに表示されないのでは?ということです。機能的には問題ないし
webサイトでは当たり前なのですが、アプリとしては格好が悪いと思うのです。

プリロード

実際に何も対策をしないとページ移動の際にwebサイトと同じように直ぐにはコンテンツが
表示されません。ということで最初にアプリで利用する画像をすべてプリロードすることに
しました。上図のindex.htmlはプリロード用のhtmlで読込が完了(jQueryのloadイベント)
したらメニューのあるmenu.htmlに移動するようにしました。
 
しかし上手くいくこともあれば、上手くいかないこともあり結果が安定しません。
アプリの画像データは5MBなので、キャッシュから溢れてしまっているのかな?
キャッシュのキャパシティを変更できないか調べたのですが、Macアプリの場合は
できそうなのですが、iOSではできなさそう?
→参考:Macアプリのリファレンス「NSURLCache Class
→参考:iOSアプリのリファレンス「 NSURLRequestCachePolicy
 

解決法

試行錯誤の後、解決したのですが力業です。現在のhtmlで移動先ののhtmlのデータを
プリロードすることで、ページ移動の際に瞬時にコンテンツが表示できるようになり
ました。具体的にはindex.htmlでmenu.htmlの画像データをプリロードし、
menu.htmlでは移動する可能性のあるgame.html/collection.html/help.html
のデータをプリロードすると行った具合です。
jQueryでプリロードするのは面倒なので、以下のページの前半のテクニックを
応用してプリロードしました(display:noneのdiv内に画像を配置)。
→参考:to-R様「cssで画像をプリロードする方法(改
 

アプリ内のhtmlで:active

htmlではボタンクリックの演出で:hoverや:activeを利用しますが、iOSアプリでは機能しません。
なのでjQuery問題集ではjQueryを利用してタップされた時にボタンの演出を実行しています。
 
このことを忘れて2048では:activeでボタンの演出を設定していたのですが、何故か利用できます。
原因を調べるとボタンの先祖要素にtouchstartのイベントが設定されていると利用できる
ようです。例えばcollection.htmlで:activeを利用できるように以下の処理が追加されています。
——————————–
$(“#collect”).on(“touchstart”,function(){});
——————————–
イベントが設定されているだけでよいのでfunctionは空です。
※こういうときに$.noopを利用するのかもしれませんね。
 

ローカルストレージの利用

これは勉強になりました。
jQuery問題集ではデータの保存はxcodeとjavaScriptの連携によって実現しており
これには同時に保存しようとすると最初の命令が無視されるという問題がありました。
→参考:ブログ「iOS:問題集アプリの途中経過(2)
上記の記事ではsetTimeoutを利用すれば連続下処理も問題なさそうと書いていますが
それはjQuery問題集が、あまり頻繁にデータをやり取りしないからでした…。
 
今回のアプリでは色々なタイミングで色々なデータを保存しているのですが
簡単に動作確認しただけで、色々データが保存されてないバグを見つけました。
データ保存のタイミングをまとめるようにすれば回避できると思うのですが
大変そうなので、html5のローカルストレージを利用することにしました。
→参考:google検索「html5 ローカルストレージ
 
アプリで利用する前にhtml上でサンプルを作成しました。
→参考:ローカルストレージのサンプル
上記のページで文字入力に好きな文字を入力して「set」ボタンをクリックすると
ローカルストレージにデータが保存されます。そのあとで「load.htmlへ移動」リンクを
クリックして移動すると、そこで入力されたデータが表示されているのが確認できます。
サンプルのソースを確認してください。非常にシンプルです。html5の機能ですが
iOS6でも問題なく利用できました。
これからはアプリのデータ保存にはこれを利用しよう!。と思った次第。
 
 
 

2048:デザイン

ゲームに関連する主だったプログラムは完成したのでデザインの作成に入りました。
他の2048クローンと差別化するため、アンティークな感じにしました。
02_main-のコピー
 
ゲームには「コレクション」ページを用意し、作成されたパネルがコレクションできるように
します。魔法のおかげで最終的には誰でも「65536」までの16枚のパネルを集めることが
できます。パネルは奇天烈な進化を遂げるようにしました。下のキャプチャでは3種類だけ
ですが、すでに16種類のデザインは完成しています。
03_collection-のコピー
ちなみに現実世界では、紫水晶は「SiO2」なので、どんなに圧力をかけても
ダイヤモンド「C」には変化しません。あくまでもフィクションです。
この先も物理法則を無視した進化を遂げていきます。
 

技術的なメモ

すでに部分的にプログラムにデザインを適用しているのですが、そこで学んだことを
メモしておきます。

CSSによるイベントの透過

パネルの上からposition:fixでフレーム(四隅の飾り)を被せているのですが、
このせいでパネルをタップできなくなってしまいました。
(魔法を実行する際にパネルをタップする必要があるのです)
しかしcssでイベントに反応しないようにできることを知り解決できました。
→参考:CSSでJavaScriptのClickイベントやリンククリック時の動作などを禁止する方法
 
 
 

jQueryサイト:SEO

SEOには余り興味が持てない(変に頑張っても効果がないと思っている)のですが、
時々思いつきでページランクが上がりそうなことを試しています。
 
最近googleで「jQuery」と検索した際に表示されるページが4ページ目から
2ページ目に上がったので、これまで試したことをメモしておこうと思います。
なんで上がったのかは分かりません。また直ぐに下がるのかもしれません…。
 

失敗例

リファレンスの和訳を載せているサイトは沢山あるのですが、最新のv1.11に対応した
サイトは多くありません。そこでリファレンスに「v1.11」とバージョンを入れたのですが
1ヶ月位してもページランクは上がりません。それどころか少しページビューが下がりました。
 
v1.11という番号は「ぱっと見」でv1.1と見えてしまい、凄く古い情報なのかな?
と勘違いさせてしまっているような気がしたので、v1.11の表記は削除しました。
 

今日から試すこと

GoogleでjQueryと入力した時の検索候補で「使い方」というのが表示されるのをみて、
この言葉を使ったらページランクが上がるかな?と思ったので
「チュートリアル」を「使い方」に変更してみました。
 
バッチをかけてから「チュートリアル」を「使い方」に変換すると、文章が変に
つながって意味が通らなくなりそうと思い立ち、ログから変換された場所(220箇所)を
手動で確認することに…。
 
でも思ったほど問題はなく、問題のあるところは「使い方」のように前後に「」を
付けることでコンテンツとして理解できるようにしました。
はてさて、ページビューは上がるかな?
 
 

2048:途中経過

2048の仕組みの大半が完成したのでxcodeに組み込んでみました。
画面をスワイプすることにより、パネルを上下左右に移動させることができます。
 
動画から微かに確認できるのですが、マジックポイントの表記があります。
つまり作成中の2048は魔法を利用してゲームを有利に進めることができるのです。
そして前回の記事にある「ログインボーナス」の仕組みによって、毎日少しずつ
利用できる魔法が増えていき、だれでもクリアできるようにしていく予定なのです。

画面に表示する要素が多くなったため3.5inchの機種ではタイトルすら表示するスペースが
ありませんが、4inchの機種ではタイトルが表示される予定です。
今回のアプリは無料で、かわりに一番下に広告を付けます。

 
2048のアプリの中には、少しでもナナメにスワイプすると反応してくれないものが
幾つかあり、これらは寝転がりながら操作する時になかなか反応してくれず
ストレスになたので、このアプリでは30pxの距離をスワイプしたら、ナナメでも
一番近い角度の操作をしてくれるようにしました。
大夫操作感が良くなったと思います。
 
来週はプログラムからは離れてデザインを作成していこうと思います。
2048のクローン達はミニマルなデザインがほとんどなので、逆にコテコテに
書き込んでいこうと思います。アンティークな雰囲気になる予定。
パネルも数字ではなく、変化が楽しめるモチーフにする予定です。
 
 
 

スマホゲーム:にゃんこ大戦争

前回の記事で2048の運任せの部分を減少させると書きましたが、その方法は
ログインボーナスで「毎日少しずつゲームが有利」になる仕組みにする予定です。
 

既存のゲームから学ぶ

iOSアプリ作成の勉強を始めた去年の夏くらいから、いろいろとスマホゲームを
ダウンロードしてきたのですが、その中でも一番長く続けているのが
にゃんこ大戦争です。
 
このアプリを長く続けている理由は毎日ログインボーナスが貰えるからです。
無課金でも、毎日続けることでゲームが有利になるのです。
写真
ということで、現在作成している2048をアレンジしたゲームにもログインを続けることで
ゲームを有利にしていきます。
 

収集欲をかき立てる

2048の亜種にはパネルに絵柄を利用したものがありますが、私の知る限り絵柄は適当な
チョイスで連続性がありません。例えば「2048-doge ver」ですが、絵柄からパネルの
得点を想像することはできません。やはり得点の多いパネルほどレア感が欲しいと思うのです。
なので、現在作成しているアプリではパネルに進化的な連続性を付けて、得点が上がる
ごとにレア感が増すようなデザインにする予定です。
あとクッキークリッカーのAchievementsのような達成目標のようなのも付ける予定です。
 

課金したけど

スマホゲームをよく知るために課金もしたのですが、自分には合わないなと感じる
事が多いです。課金してもあまり有利な展開にならず、あまりメリットを感じられません。
しかも、キャラがダブることも多く悲しいです。以下の画面にある
「双剣ネコ魔剣士」は3回ダブって、左隣の「ネコラマンサー」は2回出ています。
写真
 
でもって、このアプリは色々なタイミングで課金しなくてもレアガチャを引けるのですが
無課金でも以下の様なゲームに役立つ「激レアキャラ」を引き当てることがあります。
写真2
課金した時にキャラが沢山ダブって、無課金の時に激レアとか出るというタイミングの
問題もあり、課金は(私には)合わないなぁと感じてしまったわけです…。
 

招待コード

あと、このゲームは福岡県をクリアすると「招待コード」を入力でき
招待する側もされる側もプレゼントが貰えます。
ということで、最後に私の招待コードを貼っておきます。
もしよかったら使ってください。
——————————————-
kcegmo0
——————————————-
 
 
 

次なるスマホアプリ

問題集系アプリは当分お休み

以前はjQuery問題集の後はcssやjavascriptの問題集をリリースしようと思っていたの
ですが、jQuery問題集を通して「問題作成の大変さ」を実感してから
問題集系のアプリは当分やめようと思いました。
 

仕事の息抜きにできる簡単アプリ

その代わり、仕事の息抜き/気分転換に利用できるようなソリティア系のアプリを作ろうと
思います。そこで、少し前にハマっていた「2048」を「アレンジ」したゲームを
作成しようと思います。
 
↓8192のパネルができた記念に録画したムービー

 
このゲームは攻略方法を理解していても、ランダム要素(パネルの出現位置)があるため
ゲームが進行するほど運まかせになっていきます。この運まかせの部分を少し減少させる
ようなアレンジを加えたいと思います。
 
とはいえランダム要素を無くしてしまうと攻略法により100%クリアできてしまうので
どのようにアレンジするかがポイントになりそうです(おぼろげなアイデアはすでに有り)。
ともあれ、自分が楽しめるアプリにしようと思います。
 

凄い数のクローン

2048はjavaScriptゲームなのでソースが丸見えです。なので、そのソースを利用した
スマホアプリが大量にリリースされています(Android/iOSとも)。
※AppStoreなどで2048で検索すると大量に出てきます。
 
色々確認したのですが余り大きなアレンジは加えられず、5x5等のサイズの変更や
パネルの図柄の変更、Undo機能の追加などだけです。私が「おぼろげ」に考えている
アレンジのアプリは無かったので、自分で作ろうと思ったわけです。
※あと何故かflappy birdとの組合せが多かったです。
 

とりあえず作成開始

オリジナルのソースを解読しようと思ったのですが、私より数段上の技術を持っている
方のプログラムなので解読するのは大変そう…。その分、勉強にはなるのでしょうが
jQuery問題集の校正疲れで、解読する気になれません。

ということで気の向くまま作成したら、とてもレベルが低い感じになりました…
とはいえ、これが初めの1歩。ここからブラッシュアップしていきましょう。
※画像をクリックするとコンテンツが開きます。
スクリーンショット 2014-05-10 14.16.17

下にある「left」「right」でパネルを左右に移動できます。まだ上下はできません。
演出もダメダメですし、ソースもダメダメです。でも来週にはマシになる予定。
問題集の校正よりも楽しい作業なのでペースも速くなりそう。

その他

これまでは最低でも週1回はjQuery系の記事を書くようにしていたのですが
興味の対象がスマホアプリに移動したため、jQuery系の記事は少なくなる予定です。
それに合わせて、jQuery入門サイトのトップにあった、最低でも週1回は更新します
の文言を削除しました。
 
 
 

Android版 jQuery問題集のリリース

jQuery問題集のリリース

これまでブログでAndroidアプリの学習状況を書いてきましたが、やっとアプリを
リリースすることができました。iOSの時と同じようにリリース記念価格で300円の
ところを200円で販売中です。無料のLite版もあるので、まずはそちらで動作確認や
内容確認をしてください。
banner_android
Androidではメールのアプリ側で送信確認ができないので、メールを起動した時点で
復習データを削除しています。メーラを起動したら破棄せずきちんと送付してください。
 

登録に関するメモなど

アプリの登録はiOSよりもはるかにラクでした。ここで備忘録的にメモ。

Google playへの登録

apple storeへの登録に比べるととっても簡単でビックリ。
クレジットカードがあれば1日で登録できます。
以下のサイトが詳しいです。
→参考:Developers.IOさま「Android アプリのリリース手順のまとめ

Appleとの違い

・検索タグを設定できない。説明文を上手く作成しないといけないのかな?
・販売地域を限定できる(jQuery問題集は日本のみにしました)
・価格も販売地域ごとに変更できる。
 

ベータテスト

最終的な動作検証はgoogle playからダウンロードしたアプリで行いたい。
googleではベータテスト用のアプリをアップできるので便利。
ただしベータ版のみを無料にはできないところは不便。
appleにあるようなプロモートコードがありません。
 

今回躓いた所

電子著名が正しくないと怒られる。これに引っかかる方は多いのでは?
住所にカンマを利用してはいけません。
→参考:ボクノライフ様「Androidアプリに電子署名をしてapkを書き出す際にkeytoolエラー
 

アプリの権限

Androidアプリってインストールする際に、インターネットへのアクセスや
GPSへのアクセスなどの権限への同意が表示され、なんか怖いって思うのですが
jQuery問題集は何の権限も必要ありません。
権限を何も必要としない場合は下図の右のように表示されます。
aaa
でもLite版では有料版へのリンクを貼っており、これはインターネット接続の権限が
必要そうなのに権限を得なくてもリンクできてます。ちょっと不思議。