読者です 読者をやめる 読者になる 読者になる

モロ屋

アキバではたらくWebエンジニア。JavaScript / AWS / Mac

Titanium Mobileでアプリ開発するときに気をつけること(+インターンの話)

やってみた

こんにちは、もろへいやです!

8月から1ヶ月半ほど、同人ダウンロード販売最大手のDLsite.comを運営する株式会社エイシスにインターンシップに行ってました!


この話は最後に書くとして、そこでTitanium mobileを使ったiPhone・Androidアプリケーションの開発をしました。

最近、知名度がじわじわ上がってきてるTitanium mobileですが、まだまだ発展途上で悩まされることも多いです。

Titaniumでのアプリ開発の方法は、各ブログや書籍で解説されていますので、ここでは細かいノウハウを書いてみます。


作ったアプリ



DLsite 壁紙


DLsite.comのスマートフォン対応にあわせて、毎月更新される壁紙アプリをリリース


f:id:Molokheiya:20111004154217j:image:w320


Android Marketでダウンロード


App Storeでダウンロード


f:id:Molokheiya:20111004154221j:image:medium:left

f:id:Molokheiya:20111004154220j:image:medium:left

f:id:Molokheiya:20111004154219j:image:medium:left

f:id:Molokheiya:20111004154218j:image:medium


トップ絵のイラストレーターrefeiaさんをはじめ、複数の作家さんの書きおろしイラストを毎月更新するアプリです。

ほのぼのイラストから、ちょっとエッチなイラスト(この苦労はあとで…)さらにニコニコ静画とのコラボイラストなども多数掲載されています!


ちなみに、今回はTitanium mobile初挑戦で約2週間ほどで完成までこぎつけました。



企画段階


前提条件として、ざっと以下のものがありました。

  • iPhoneにもAndroidにも対応するアプリ
  • 機種ごとに解像度の違うAndroidにも、ちょうどいい大きさで壁紙を設定させる
  • Androidのスクロール壁紙にも対応させる
  • イラストギャラリーは、1枚1枚が大きく見れるものを
  • イラストは更新するためアプリ内に含めない(でも、3G回線でも大丈夫なようにする)

まずiPhoneでもAndroidでも使えるアプリということで、簡単なアプリをサクッと作れるというTitanium mobileを利用することになりました。

壁紙の解像度の差は、サーバーサイドで吸収することに。(端末解像度情報を送信して、ちょうどいいサイズの画像を取得する)


しかしまぁTitanium mobileを使ってアプリを開発するのは初めてだったので、最初は手探りな部分がありました。

特に今まではTitanium Developerというソフトでの開発だったのですが、

Aptanaと統合されたTitanium Studioという統合開発環境になったので、細かいノウハウが少ないので要注意です。



設計について


まず、Titanium mobileでどこまでのことができるのかを把握したほうが良いです。

そのために、Kitchen Sinkというテストアプリをビルドしてください。


appcelerator/KitchenSink ? GitHub


これで、Titaniumでできることが感覚的に分かります。

おおよそ標準UIはほぼ全て対応しているのですが、逆にそれ以外のことをしようとすると重くなる傾向があるようです。


ちなみにDLsite壁紙アプリは、Titanium mobileが苦手とする特殊なUIを採用してしまったため、チューニングに難航したり

パフォーマンスに影響が出ることになってしまいました。

(もちろん、ありきたりなUIでは表現出来ない「美術館のギャラリーのような」ものは実現できたのですが)


特にiPhoneでなんとかなっても、Androidではうまくいかないことが本当によくあります。

もし本当にiPhoneでもAndroidでも最高のアプリをつくろうと考える場合は、MVCモデルのようにUIの表示部分は分離すべきだと思います。


どちらにしてもワンソースで両方に対応というのは難しく、あちこちに「if(iPhone==true)」のような分岐が入ることになるので、

コードの量は増えますがUIデザインから分けてしまい、ロジックだけ使いまわすようにした方が上手く出来るように思います!




エラーの対処について


Titaniumはじゃじゃ馬なので、意味の分からないエラーがガンガン出ます。

でもここで瞬時にTitaniumたんはドジっ娘なんだろうな… という想像をすると心が落ち着きます。



[ERROR] Error: Traceback (most recent call last):
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 691, in main
    provisioning_profile = read_provisioning_profile(pp,o)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 216, in read_provisioning_profile
    f = open(f,'rb').read()
IOError: [Errno 2] No such file or directory: u'/Users/Minami/Library/MobileDevice/Provisioning Profiles/9090CD12-8984-4597-8A1D-14D9C4E*****.mobileprovision'

テストビルドや、デプロイ時にたまに発生するエラー。

見ての通り「No such file or directory」なので、このパスに指定されたファイル名にリネームしたprovisionファイルを配置すれば通ります。

なんらかの理由で、自動でコピーされてないみたいですね。

このあたり、Xcodeにきちんと登録していなからとかいろいろ理由はあるっぽいですが手動でコピーしたほうが早いです。


これに近い問題として、

Traceback (most recent call last):
(省略)
  File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/codecs.py", line 865, in open
    file = __builtin__.open(filename, mode, buffering)
IOError: [Errno 2] No such file or directory: u'/Users/Minami/Documents/Titanium Studio Workspace/DLsite/build/iphone/tiapp.xml'

というエラーもあります。これも同じく「tiapp.xml」を所定の場所にコピーすれば通ります。


[ERROR] Error: Traceback (most recent call last):
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 1305, in main
    execute_xcode("iphoneos%s" % iphone_version,args,False)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 1066, in execute_xcode
    output = run.run(args,False,False,o)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/run.py", line 39, in run
    sys.exit(rc)
SystemExit: 65

エラーログを見ても、よくわかりませんね…

こういうときは、詳細なビルドエラーをbuild.logから確認して対処します。


Traceback (most recent call last):
(省略)
  File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/codecs.py", line 351, in write
    data, consumed = self.encode(object, self.errors)
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3 in position 106: ordinal not in range(128)
Command /bin/sh failed with exit code 1

UnicodeDecodeErrorが発生しています。

つまり「ファイル名に日本語を利用しているとビルドエラー」というのがわかるわけですね。


コンソールに意味不明なエラーログが出てきた場合は、とりあえずbuild.logを確認してみましょう。



まぁTitaniumはエラーログもスタックトレースすら吐かずに落ちることがよくあるんですが…



とにかくおかしくなったら、まずbuildフォルダを削除してビルドし直します。

これでキャッシュビルドではなく、フルビルドになります。




Appleの審査はまだまだ厳しい


すっごいリジェクトされました。2回や3回じゃない程度には…


どうやら、露出がアウトというよりも「性的な部分を連想させるような」ものがアウトっぽいです。

まぁこのあたりは、レビュアーがどういう風に判断しているかどうかということも関係するんでしょうが…


おかげでiOSは、リジェクトされればアウトな画像をひたすら削除して、またリジェクト。と繰り返しがあったので、

制限のないAndroid版と掲載されている画像を比較すると、Appleの審査基準を実際に体感することが出来るかも? ですw



ちなみにAndroidのスクロール壁紙に対応させるためにはAndroidの横幅2倍の画像が必要で、

あらゆる解像度に対応して画像を吐き出す為には既存の壁紙のフォーマットを、横幅を広く取った画像に変える必要がありました。


そこでpsdファイルを編集してレイヤーだけ移動させようと思っていたんですが、かなり結合されてしまっていたので、ほとんど作り直しています。

既存の壁紙のデザインに沿うように何十枚もの画像をデザインし直したんですが、それぞれ違う技やノウハウが勉強できて楽しかったです。

どのイラストもかわいいので目が疲れませんね!




最後にインターンの小話



エイシス社の入り口では、等身大のディルちゃん(右)エルちゃん(左)が出迎えてくれます。


f:id:Molokheiya:20110929000956j:image:w320


エンジニアのSさん曰く「等身大POPがあると毎朝の出勤で癒される」とのことですので、

かわいい二人に出迎えられたい方は社員・アルバイトに応募してみたらいいんじゃないかと思います!!


最後に、まずインターンにお誘い下さった開発マネージャーのMさん、イジら愛されキャラのSさん、最初から全力全開だったKさん(餞別は、いま半分くらいです)、最初と最後の印象が一番違ったFさん。

また、エイシス社員の皆さまに、この場を借りてお礼申し上げます。ありがとうございました!!