CSSアニメの記事修正と「1文字ずつ表示」

CSSアニメの記事修正

現在作成中のスマホアプリ(後述)が実機テスト段階でアニメが再生されない問題に
ぶつかりました。先週追加したCSSアニメのテクニックを利用したのに何故?
 
原因はCSSアニメのtransitionはiOS6ではベンダープリフィックス-webkit-が
必要なためでした。CSSアニメの記事2ページ目では動画で動作していることが
確認できますが、これはiOS7のシミュレーションのため-webkit-が無くても
機能したようです。私の実機はiOS6のためアニメしなかったので問題が発覚。
 
ということでCSSアニメの記事とサンプルで、transitionの部分にすべて
-webkit-を追加しました。これだけでは記事が寂しいので、以下の記事を追加。
 
 

フェードを使わない1文字ずつ表示

今作成しているアプリで長文を表示する箇所があり、読みやすくするために
1文字ずつ表示数仕組みを作成しました。
googleで検索するとプラグインやサンプルが結構見つかるのですが、
スマートフォン用なのでフェードは使わない方向で自作することにしました。
→サンプル:1文字ずつ表示する
 
startボタンをクリックすると表示がはじまります。即興で作成したので
説明ページは作成していません(この先作成するかも分かりません…)。
しかし、ソース内に説明を書いておきました。
 
仕組みとしては「typeRoutine」内で文字を追加、このときテキストをグレー
に設定するクラス(spanタグ)を付けることで、最初は半透明っぽく表示します。
 
その後「spanRemoveFunc」でspanタグを削除してグレーを解除します。
つまりグレー→黒の2段階だけなのですが、実際に確認するとフェードっぽく
なっているのではないでしょうか?
 
スクリプトも初心者には難しい正規表現は使っていないので解読しやすいと思います。
文字中の「@」で「改行と待ち」、「$」だけだと「待ち」だけをするようになっています。
 
 

七並べ占い

でもって、これを利用するのが以下のアプリ。「七並べ占い」です。実は10年ほど前に
趣味で作成したコンテンツの焼き回しです。占いの結果に上記の仕組みを利用します。
今、こんな感じになっています。↓(クリックで拡大)
nana
 
上図左で出すことのできるカードをcss3のドロップシャドーで光らせているのですが、
PCのブラウザだと問題ないのにシミュレータ/実機だとカード全体がぼやけてしまいます。
さらに動作がとても重くなってしまい実用的でありません…。
光らすのはやめよう…。
 
 
 

2048リリース完了

iOS版がやっと受け入れて貰えました。
CSSアニメを利用しているので古い機種でもアニメはスムーズだと思います。でも、
パネル絵が切り替わる部分(背景位置の移動)や新しいパネルの追加(showメソッド)
はcssアニメではないので、その部分はすこし重いかも。比較してCSSアニメの軽さを確認
してみてください。無料です。

ゲームの遊び方は説明サイトを見てください。
→SmartPhoneApp:練金パズル2048

jQueryサイト:チュートリアルの追加

cssアニメとjQueryの連携をまとめました

スマートフォンアプリの作成でjQueryのanimateメソッドが使いものにならない
(動作が重い)のを受けてcssアニメを学びました。cssアニメといっても色々あって
混乱したのでチュートリアルにまとめることにしました。
 
PCのコンテンツ作成では使わないと思いますがスマートフォン用のサイトを
作成していて「animateメソッドが重い」と感じたら、このテクニックを
利用してみてください。
→使い方:研究「cssアニメとの連携(1)
→使い方:研究「cssアニメとの連携(2)
→使い方:研究「cssアニメとの連携(3)
 
 

生成後すぐにはアニメできない

すでに新たなスマートフォンアプリの作成に入っているのですが、そこでcssアニメの不具合?
を発見。jQueryのappendメソッドで要素を配置した後ですぐにアニメを実行すると
アニメせずに直接指定座標に移動してします。
これもブラウザの仕様のような感じなので、setTimeoutを利用して生成したあと少し間を
開けてからアニメするようにしました。
形になったら、またブログで報告します。
 
 
 

iOSの練金パズル2048

またして練金パズル2048がリジェクトされました。前回は名前が良くないといわれ
名前を修正しましたが、今度はアイコンがダメといわれました。
まぁアイコンに大きく2048って書いてあるから当然といえば当然なのかも。
でも、他にも2048と大きく記述したクローンアプリは沢山あるのに・・・。
たくさん有りすぎるから条件が厳しくなったのかな?
 
ということで、今回は2048が大きく記述されている部分を「練金パズル」に変更して
再投稿します。そして、ついでにAndroid版で学んだcssアニメを導入してみました。
 
iOSはjQueryのanimateでも十分だったのですが、cssアニメに切り替えたら
実感できるほど動きがスムースになりました。シミュレータでも以下の通り
ハードウェアアクセラレーションが効いていることが確認できます。
→参考:casemobile様「ハードウェアアクセラレーションが効いている部分を確認する
スクリーンショット 2014-06-18 17.23.20
 

今週末にcssアニメのページを追加します

これから作成するアプリもcssアニメを利用するので、少しずつ今回学んだcssアニメ
とjQueryの連携をまとめています。今週末にはjQuery入門講座のチュートリアルに
2〜3ページ追加できると思います。
 
 
 

練金2048の英語版

毎回少しずつ新しいことに挑戦していこうと思っているので
練金2048では英語バージョンを作ることにしています。
 

翻訳業者に依頼

私の英語力はとても低いので英語でアプリの説明などすることは
できません。なので以下の法人向けサービスを利用してみました。
利益の見込めないことに経費を使うことになりますが何事も経験です。
→参考:gengo 法人向けサービス
1文字7円の「プロ」を選択してみました。その一部が以下。
クリックで拡大。
04_howto 
はてさて
翻訳は1日で届いたのですが、そもそも英語力がないので
翻訳された英文が妥当なのかよく分かりません…。
予算があれば複数の業者に頼んで比較できるのですが、検索データベースにも
載せて貰えないコンテンツだし…。
 
 

広告にはAdmob

すでに利用しているNendは国内には強いけれど国外は弱そうなので
googleのadmobを利用することにしました。
導入には以下のサイトを参考にしました。
→参考:@IT様「金欠時の救世主!? AdMobのアフィリエイト…
 
 

英語版も検索されません

英語版は公開地域を日本以外のすべてにしようと思っていたのですが
日本語版が検索されないので、英語版は日本を含めた全世界に公開してみました。
しかし、やはり検索されません。日本語板同様に会社名ですらダメです。
スクリーンショット 2014-06-14 0.27.06
 
 

次は

2048が検索されない問題はgoogleさんに任せて、次のコンテンツ作成を開始
しようと思います。次のコンテンツはトランプを利用したソリティア風の占い
なのですが、スマホの狭い画面に分かりやすくたくさんのカードをレイアウト
するのが大変そう。ちょっと時間がかかるかも。
 
 
 

「練金パズル」をgoogle playに登録したものの…

6/9に登録完了

練金パズル2048は月曜日(6/9)に登録が済んでいるのですが
google playで検索しても何故か表示されない状態になっています…。スクリーンショット 2014-06-12 19.02.17
 

会社名で検索しても出てこない

さらに会社名「designdrill」で検索しても表示されません。
jQuery問題集は表示されるのに。
device-2014-06-11-151336
 

なのでgoogleに問い合わせてみた

というわけでgoogleのdeveloper向けの窓口に問い合わせてみました。
webサイトには2週間くらいかかるかもと書いてありましたが、なんと
その日のうちにメールが到着。手短に言うと以下の様な内容。
——————————————–
うちの環境ではきちんと表示されているよ。
だから利用している環境の詳細を教えてね。
——————————————–
というわけで、本日情報を提供して結果待ち。
どうなることやら。
 

検索には掛からないけれど

検索しても出てこないけれど、google playでjQuery問題集を検索して、
そのページの「このデベロッパーの他のアプリ」から見つけることが出来ます。
 
jQueryとcss3のアニメで作成したコンテンツに興味のある方は
遊んでみてください(無料です)。
以下の画像をクリックするとブラウザでgoogle playを開きます。
スクリーンショット 2014-06-12 19.12.53
 
 
 

iOS:アプリがリジェクトされました

アップルに申請していた「練金2048」がリジェクトされました…。スクリーンショット 2014-06-10 16.00.31
 
理由は以下の通り。
——————————————————-
Reasons
22.2: Apps that contain false, fraudulent or misleading
representations will be rejected
 
We recommend adjusting the title of your application so that the misleading element is used as a descriptor, not as part of the product name. For example, the following styles are acceptable formats for names:
GreatApp – with tagline “for 2048″
GreatApp – with tagline “2048 edition”
GreatApp – with tagline “2048 version”
——————————————————-
アプリケーションのタイトルが問題になっているらしいです。
でもAppStoreには2048の名前を利用したたくさんのアプリがあるのに何故?
taglineには2048を含んでも良いようなことが書いてあるけれど
タグラインって何?どの部分?
 
とりあえずアプリの名前を「練金パズル 2048 edition」にして
もう一度申請してみようと思います。
 
 

2048:androidアプリでのトラブル

現在Appleにアプリ申請している練金2048はjQueryで作成されているので
簡単にAndroidに移植できると思ったら、早速躓いた!
 

Androidではデフォルト設定でローカルストレージが使えない

練金2048のhtmlデータをAndroidで表示したのですが機能しません。
jQuery問題集と練金2048の異なる部分はローカルストレージを利用しているか
否かなので、その部分をコメントアウトしたら機能しました。
 
私のis11T(Android2.3)ではローカルストレージは利用できないのかな?
としらべたのですが、対応しているそうです。
以下サイトのチェックプログラムでも対応していることが確認できました。
→参考:Which minimum version of Android supports HTML5 Local storage?
 
対応しているのに機能しないのは何故?と調べを進めていくと、
デフォルトではローカルストレージが利用できず、セッティングを変更する
必要があるとのこと。
以下のページで回答されているようにsetDomStorageEnabledをtrueに
することで無事にローカルストレージが利用できるようになりました。
→参考:Android webview & localStorage
 
なんだかgoogleやfacebookのコンテンツでローカルストレージを利用している
ページがあり、その様なサイトをwebview上で利用する場合は必須な設定の
ようです。
あとis11tだとPCのeclipseから起動すると毎回ローカルストレージがリセット
される(nexus7は問題ない)。でもis11t単体での起動では問題ないので
多分大丈夫。いざとなったらjQuery問題集と同じようにeclipse側で記憶
するようにしよう。
 
 

nexus7でjQueryのアニメが激重

is11tでは古いiPodTouchと同じくらいのパフォーマンスがでているのですが
nexus7では逆にアニメがカクカクで使い物になりません…。
調べてみると、少ないですが同じ現象が報告されています。
All Visual Effect Slow/Chuggy Android Nexus 7
 
解決法としてはcssのアニメーションに頼るしかなさそうなので
調べてみたらjQueryでcssアニメが利用できるプラグインがあるそうです。
CSS3アニメーションとjQueryの利点を組み合わせたスクリプト
jQueryを使って、超スムーズなCSS3アニメーションを実装する
 
しかしカクカクのままです。上記のプラグインは両方ともcssアニメが
利用できない場合はjQueyアニメを利用するのですが、どうやらcssアニメ
になっていないようです。
 
次は以下のサイトを参考にして、jQuery内に直接cssアニメを記述することに
しました。この方法は効果覿面!スムースにアニメが再生されます。
しかし、この方法だと最初に配置した場所が座標系の原点となるようで、
プログラムを結構変更するはめに…。
jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
 
そして、また別の問題に直面することに…。
上記のテクニックを利用する場合はアニメ終了のイベントとして
webkitTransitionEndを利用するのですが、is11tで発生しない場合があるのです。
→google検索「webkittransitionend 発生しない
 
アニメの終了する時間は固定なので、代わりにsetTimeoutを利用することで
問題を回避することができました。
 

スワイプが反応しない

そして、アニメ以外でも問題が発生しました。is11tは問題ないのにnexus7では
スワイプの反応が極端に悪いのです。簡単なサンプルを作成して確認したら、
touchendのイベントがほとんど発生しません…。
 
調べたらAndroid4からの問題らしいです。以下サイトの方法で問題を
回避することが出来ましたが、代わりにスワイプするエリアの上に
配置されているボタンやパネルのクリック出来なくなりました…。
なので、プログラムで必要に応じてスワイプエリアの有効/無効を
切り替えるように変更。
→参考:Android爆発しろ
 
何だかんだでiOS版から結構な変更を余儀なくされました。
ともあれ、これでアンドロイド版もリリースできそう。
あとは広告を入れる方法を学んでいきます。
 

追加

nexus7で長時間デバッグしていたのですが、cssアニメが稀に再生の
タイミングが遅れることがありました。
タイルの移動は全て同時なのに、ごく稀に1つだけ遅れて移動するのです。
ゲームに支障はないのですが、不思議な感じ。
 
 
 
 

アプリの売上を公開してみる

Android版の売上

先月末でAndroid版の特別価格期間が終わりました。が、ビックリするほど
売れないので、記念?に売上を公開してみようと思います。
(期間は4/30〜6/3の約1ヶ月)
以下の様にたったの3件です…。無料版ですら15件です。
ちなみにアンインストールの1件は私のis11T。
スクリーンショット 2014-06-03 22.51.27
 

iOS版の売上

iOS版の売上はAndroid版の10倍以上。でも有料版の内の1つは私が購入したので実質37件。
Android版よりは売れていますが、5ヶ月で約6千円とは寂しい限り…。
スクリーンショット 2014-06-03 22.50.21
 

web業界の方はiPhone派?

期間が異なるので純粋な比較は出来ませんが、iOS版は最初の週に40件に達しています。
やはりweb業界の方はiPhone派が多いようですね。
でも、無料版と有料版の比率を見るとAndroid版では有料版を購入して下さった方の
割合が高くなっています。これはどう判断したらよいのだろう。
 

売れなくても続けるよ

アプリ作成は会社の業務として経費を使っているので、利益が出ないのも困るのですが
まだ始めたばかりですし、アプリの作成も楽しいので他に興味の対象ができるまで
続けようと思います。というわけで、本日新たなアプリ「練金2048」をアップルに
送付。現在審査待ち(Waiting For Review)です。
スクリーンショット 2014-06-03 23.24.06
これは無料ですが広告を入れてみました。とはいえ2048のクローンアプリは
星の数ほど有るので、このアプリの利益も期待できないでしょう…。
 
でも次に作成するアプリはオリジナルで類似のアプリもないので頑張ろうと思う!
最近、色々なアプリを見ているのですがFacebookやtwitterのボタンを付けている
アプリがほとんど、なので次はSNSまわりのことも学ぼうと思っています。
 
 

自分用のメモ:躓いた部分

5ヶ月ぶりなので、すっかり登録の方法を忘れてしまいました。
今回、参考になったサイトをメモしておこうと思います。
→参考:よくわかるiOSアプリのリリース手順のまとめ
 
xcodeでアーカイブメニューが選択できない
ターゲットを実機ではなく「iOS device」にすればOK
スクリーンショット 2014-06-03 23.40.40
 
Provisioning Profileをxcodeに登録できない
developerサイトで作成したProvisioning Profileをダウンロードして
ダブルクリックするだけ!。
スクリーンショット 2014-06-03 23.43.17
 
スキームをreleaseに
メニュー「product/edit scheme」でアーカイブの設定「Buikd Config」を
releaseにする。
スクリーンショット 2014-06-03 23.46.09
 

昨日のWWDCに関連して

アプリ開発言語swiftが紹介された。以下のサイトが詳しいです。
Objective-Cに違和感を感じまくりなので、これは嬉しいかも。
→参考:新言語SwiftがObjective-Cよりも良いところ
以上