PhoneGapでカラーコード変換アプリを作成

単なる宣伝なんですが、アプリ登録の全体の流れを知るためにPhoneGapですげー適当に作ったカラーコード変換アプリがAppStoreで公開されました。

↓ついでにAndroid版も公開しました。全く同じコードで吐き出せるかと思いきや、Andoroidではなぜか navigator.notification.alert が上手く働かないため、jsの alert() をそのまま使ってます。あとグラデーションが妙に汚い。また、Andoridエミュレータで見たら重かったのでjQueryのアニメーションをカットした他、細かい部分を調整してあります。


Android app on Google Play

(さらに…)

【忘備録】PhoneGap2.9.0 + Xcode4.6.3 でarchiveしようとしたらエラー

しょうもないiPhoneアプリがある程度完成したので、AppStoreに登録してみるかと思ったわけですが、まず登録用のバイナリの吐き出し方が分からない。

調べたところ、どうやらXcodeで[Product]-[Archive]を実行すればいいらしいと判明したため早速実行。(※前提条件として本番用のProvisionigプロファイルは生成済みです。)

しかし、PhoneGap2.9.0 + Xcode4.6.3でarchiveを実行したところ以下のエラーが発生。※既にPhoneGap3.0がリリースされているのでバージョンアップ後は関係無いかもしれません。

〜/Applications/libCordova.a
clang: error: linker command failed with exit code 1 (use -v to see invocation)

事前にBundle identifierを変更したのでそのせいかとも思ったがググったら以下の対処法を発見。

phonegap v2.9でxcodeの4.6のリリースのために、アーカイブを構築できない

↑恐らくどこからかの転載である上に日本語訳がすげー怪しいが気にしない。

上記のURLを参考に修正を実施。以下の手順で書き換えを行えば良いらしい。もっとも参照元では以下の手順だけでは上手く行かなかったようですが。

Found a fix.

    1.In your Target's Build Settings,
      find Other Linker Flags
    2.Change $(TARGET_BUILD_DIR)/libCordova.a
    3.To $(BUILT_PRODUCTS_DIR)/libCordova.a

図解すると以下のような感じで修正を行う。

この状態で再度[Product]-[Archive]を実行したところ上手く行った模様。

しかし、参照元サイトでは以下の気になる一文が・・・

With the above trick, I can achieve the app and submit to App Store with no issue. But I found out in the iTune Connect that it shows "Invalid binary".

App Storeにsubmitは出来たけどInvalid binaryで突っ返されたって書いてあるんだが大丈夫なんだろうか。

一応、上記の手順でバイナリを作成後、苦行に近い行程を経てなんとかAppStoreに申請しました。何かあればまた次回。

Xcodeで再ビルドしても実機のアイコンが変わらないときのメモ

必要なアイコンは用意しているし、iOSのシミュレータでは上手く行ってんだけど実機に転送するとアイコンが以前のままになるという場合は、Xcodeの[Product]-[Clean]を一度実行してから再度ビルドしてやると上手く行くかもしれません。

PhoneGapでiPhoneアプリのアイコン反射を止める

PhoneGapに限った事じゃ無さそうですが、初期状態だとiPhoneアプリのアイコンに勝手に光沢が入ります↓

こいつを何とかしたいと思ってネットを駆け巡ったらStack Overflowで見つかったのでメモしておきます。

また、アイコンの制作には以下のPhotoshopテンプレートとアクションを使いました。これすげー便利。

http://appicontemplate.com

【PhoneGapでアイコンの光沢を無効にする】

PhoneGapのプロジェクトディレクトリにある「xxx-info.plist(xxxにはプロジェクト名が入る)」に以下の記述を追加。

<key>UIPrerenderedIcon</key>
<string>true</string>

Xcodeでplistを開いた場合は以下の記述を追加すれば良いらしい。

 Icon already inculdes gloss effect  ※YESにセット

こんな感じ↓

これで行けるかと思い気やどうやらiOS5以上だと?駄目らしい。Xcodeでビルドする際にTARGETSのSummaryタブで「Prerendered」という部分にチェックを入れる必要があるようです。(もしかしたらこれだけでも良いのかもしれない)

スクリーンショット 2013-07-16 22.22.55

この状態でビルドすればアイコンに光沢が表示されません↓

【参考】

Icon already includes gloss effects – Stack Overflow

お願いだから輝かないでくれ!!! | MOL

PhoneGapでiOSのソフトウェアキーボード上のDoneボタン等を日本語化する

PhoneGapの日本語Googleグループに同様の質問があったので私なりに調べた対応方法を記載しておきました。

ソフトキーボードの日本語表示 –
PhoneGapファン (phonegap-fan.jp)

【対応方法】

以下の図のように言語環境設定が日本語であるにもかかわらず英語表記になっている。

これを日本語に変えるにはプロジェクトディレクトリ内の「xxx-info.plist」に以下の記述を追加すれば良いらしい。

<key>CFBundleAllowMixedLocalizations</key>
<string>true</string>

上記の設定を追加するとiPhoneの言語環境に合わせて文字列の表示が変わるので、日本語環境で利用しているiOSでは日本語表記のものに変わる模様。

【参考】

Change the language of iOS virtual keyboard “previous”, “next”, “done” buttons – Stack Overflow

PhoneGapで画面を固定化する

PhoneGapで制作していて速攻で気になるのが画面のスクロール。以下の図の様に画面の上下が画面外にスクロールできる。

スクロール

これを固定化するにはどうすれば良いかというと、Stack Overflow に対応方法が載っていた。

Phonegap vertical scroll – Stack Overflow

・CSSの追加

念のためCSSに以下の記述を追加。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

・metaタグのviewportを変更

viewportを以下の様に変更する。

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />

・config.xmlを変更

プロジェクトディレクトリ内にある「config.xml」を開き、DisallowOverscrollをtrueに書き換える。

<preference name="DisallowOverscroll" value="true" />

以上で画面外にスクロールできないようになる。

PhoneGapでiPhoneアプリ開発②

開発するアプリの概要

PhoneGapの開発環境が整ったので早速アプリの開発を開始する。なるべく簡単に作れそうなアプリが良いため、巷にあふれてる「カラーコード変換」アプリを作成する事にした。以下はその概要図。

(さらに…)

PhoneGapでiPhoneアプリ開発①

PhoneGapをいじってみたくなったのでまず開発環境の構築を行った。以下はそのメモ。(前提条件としてxcodeとCommand Line Toolsは既にインストール済)

(さらに…)

IT起業アカデミア