Titanium Mobileで開発したiPhoneアプリをリリース（その2）

前回に引き続き、今回はTitanium Mobileで開発している時に調べたこと、教えていただいたこと等をご紹介したいと思います。

まずアプリの基本的な部分はgihyo.jpの連載を参考にさせていただきました。UIがツイッタークライアントと似ている部分も多く、大変参考になりました。

その他に開発過程で挙がった課題について書いて行きます。
・日本語のアプリ名
・ImageViewの画像リサイズとデフォルト設定
・Safariで開く
・admobを仕込む
・ビルド


日本語のアプリ名
Titanium Developerでプロジェクトを作成する際にアプリ名を英語で付けていましたが、最終的にはAndroid版と同じ「ぐぐっと！急上昇ワード」としてリリースしたいと思いました。

titanium-mobile-doc-jaに
iOS系の場合はbuildフォルダに生成されたInfo.plistを加工後、プロジェクト直下に配置しておけばOK。
との記述が

Info.plist（一部抜粋）

 CFBundleDevelopmentRegion
 Japanese
 CFBundleDisplayName
 ぐぐっと！
 ...

1行に入るように「ぐぐっと！」だけ入れてますが、これで日本語アプリ名が表示されるようになりました。

また、Titanium BBS(JP unofficial)によるとAndroidでも可能なようです。



ImageViewの画像リサイズとデフォルト設定
キーワードに合わせてサムネール画像を取得している関係で、都度画像サイズが異なります。
そこで画像取得後リサイズしたいのですが、その方法とデフォルト画像を設定するとさらに良いのではと思います。

app.js （一部抜粋）

var thumb_img = Ti.UI.createImageView({
  defaultImage:'./images/default_image.png', //デフォルト画像を指定
  image:encodeURI(画像ファイルのURL),
 width:'auto',
 height:'auto'
});
// 画像読み込み完了時のイベント
thumb_img.addEventListener('load', function(e){
  // height 170以上の場合縮小
  if(.height>170){
    thumb_img.width = thumb_img.width*(170/thumb_img.height);
    thumb_img.height = 170;
  }
});
view.add(thumb_img);

読み込み完了後にリサイズ処理が走りますので、画面表示後、縮小された画像が表示されるまで多少タイムラグがあったりします。
なので実際に表示したい画像が表示されるまでのつなぎ、および最終形に近いサイズでの領域確保の意味合いもあります。
また、デフォルト画像を指定すると、画像の取得に失敗してもデフォルト画像が表示されているので、ごまかせたりもします。
今回のアプリでは画像があるというのがわかるようなデザインにしていますが、背景色と同じ画像を使ってもいいと思います。



Safariで開く
アプリ内でWebViewを使ってWebページを表示させ、ユーザーの任意の操作によってSafariを開きページを引き継ごうとした際に、すでにページ遷移している場合も考えて、現在表示されているページのURLを取得する必要があります。

app.js （一部抜粋）

// WebViewで現在表示しているページのURLを取得
webView.addEventListener('load', function(e){
  currentUrl = e.url;
});
// Safariで開く
btn_safari.addEventListener('click', function(){
  Titanium.Platform.openURL(currentUrl); //Safariで開く
});

WebView内でページがロードされるたびに、URLを取得しておきます。そいつを渡してやればOK！



admobを仕込む
Titaniumの開発元であるAppceleratorよりadmobモジュールが公開されたことで、Titanium Mobileで開発したアプリにも広告を掲載することが可能になりました。
モジュールの使い方がよくわからないので、Twitter経由で質問したところ、親切にもブログで解説していただいたので、参考にさせていただきました。

AdMobモジュールの設置方法

ダウンロードしてきたadmobモジュールを解凍しると、そのまま使える状態（ビルド済み）だったので、指定されたディレクトリにそのままコピーしました。
/Library/Application Support/Titanium/modules/iphone/ti.admob/......
↑こんな感じのパスになるように
※私が組み込んだ時点ではビルド不要だったのですが、今はビルドが必要との情報もあり

あとは、指定されたコードを追加します。
app.js （一部抜粋）

// admob
Titanium.Admob = require('ti.admob');
var adview = Titanium.Admob.createView({
  bottom:0,
  left:0,
 width:320,
  height:48,
 publisherId:'admobのパブリッシャーID'
});
win.add(adview);

tiapp.xml（一部抜粋）

  ...
 
    ti.admob
 

tiapp.xmlでは、最後あたりに追加すれば良いみたいです。

これで広告が表示されると思います。もうモジュールも怖くありません。

しかしadmobモジュールでハマった点がありました。何故か一番上（最初）のWindowでないと広告がタップできないのです。
アプリの作りが［リスト＞詳細］となっていて、最初その詳細画面に設置していました。そうすると、広告は表示されるのですがタップできないという現象が…
回避方法が見つけられなかったので、一番上 のWindowにadmobを移動させました。何が悪いの？



ビルド
Titaniumでビルドするととても時間が掛かるようです。（私は途中でキャンセルしました）Titaniumで書き出されたXcodeのプロジェクトファイルをダブルクリックしてXcodeを起動してビルドした方が早いですし、実機転送やオーガナイザでの画面キャプチャなど、その後の作業がスムースに運んで幸せになれると思います。

ビルドやテスト、リリースについては、ネイティブ（というか通常のiPhone開発ですねw）での情報が入手しやすいです。
開発効率でTitanium mobileを選択したならば、いいとこ取りでいきましょー


開発中は必須のページ
下記は特にお世話になりました。
・titanium-mobile-doc-ja
・API Reference Guide
上記に書いてないことは、“titanium　○○○　×××”見たいな感じでググって、根気よく探しています。
今後は、Titanium BBS辺りに集約されていくのかな？


以上、大したことない内容ですが、誰かのお役に立てば嬉しいです。


「ぐぐっと！急上昇ワード 」

Titanium Mobileで開発したiPhoneアプリをリリース（その1）

リリース後2週間以上経ってしまいましたが、iPhoneアプリをリリースしたので、少々書き記しておきたいと思います。

アプリ名：ぐぐっと！急上昇ワード
価格：無料アプリ
動作環境：iOS3.1以降
リリース：3/27
対象地域：日本




去年リリースしたAndroidアプリ「ぐぐっと！急上昇ワード」が順調にDL数を伸ばし、「来月には5万DL突破だな」といった2月中旬「無料のAndroidアプリ（途中から広告入り）を開発＆リリースし、運用してみて色々勉強になったけど、ここらで一段落かな。」と感じるようになり、「iPhoneアプリをやるしかない！」とiPhoneアプリ開発を決意しました。

実はTitanium Mobileを昨年末ぐらいにいじっていて、「ぐぐっと...」を途中まで作っていたのですが投げ出していて、今回iPhoneアプリを開発するにあたってはObjective-C（俺のC言語のスキルはさわり程度しかない）でやる！と意気込み、入門書を購入し、サンプルコードを参考に「ぐぐっと...」iPhone版を作り始めました。
ある程度まで進んだところで（偶然にもTitaniumで投げ出したのと同じようなところまでだった(^_^;)）さて次はどうやるんだろうと試行錯誤モードの時に、気まぐれでTitaniumではどうやるんだろうとやってみると。。。アレ？なんか続きが出来たぞ！「このままTitanium Mobileで開発しよう」と、当初の意気込みは何処へやら、Titanium MobileのiPhoneアプリと相成ったという訳です。（Titaniumをいじろうと思ったのは、hidev勉強会でTitaniumやってる人が意外に多かったてのもあります）

その後はいくつかつまずくところがあったものの、比較的スムースに完成したのではないかと思います。
機能的にはAndroid版と同じものを目指しているので、粛々と実装をしていくだけだったのですが、INTENTでブラウザに処理を投げる＆Backキーで戻るというAndroid的な処理ができないので、iPhone版はまずアプリ内ブラウザ（WebView）で見せて、Safariに引き継げるようにしたり、ナビゲーションをどのように実現するか（戻るキーとメニューキーの偉大さを実感）を考えないといけなかったりしたところが最大の課題だったともいえます。
※Titanium Mobileの開発で調べたことやTwitterで教えてもらったことは別途書こうと思います。

Developer登録でよくある問題に陥ったり、Reviewに時間がかかったり、といったことも経験しましたが、ググれば山のように出てくる話なので、ここでは割愛します。

余談ですが、Android版「ぐぐっと...」をリリースした時は、このジャンル（Google急上昇ワードのマッシュアップ）のアプリはiPhoneアプリの「トレ○ドなう」ぐらいだったと記憶していて、「ぐぐっと」はAndroidでは少なくとも先行者であると自負しています。今回iPhoneアプリを調べてみると、いくつかの類似アプリがリリースされていて、ひとつのジャンルが形成されていると感じました。（つまり、ニーズがあるということ）

iTunes Connectの見方がイマイチ分かりづらく、数字を読み間違えていないならば、リリース後2週間程で約5,000DLされた模様です。
この数字が多いのか少ないのかさえ分からない位、iPhoneアプリのノウハウを持ってないのですが、元々Long Termを狙ったアプリなので、今はあまり気にしないことにします。

今後もアプリの小さいアップデートを計画していますが、Android版も含めアプリとしての基本形は出来ていると思っています。
このアプリというかこのサービスを進化させていくためには、今後別のサービスとの連携が必要かなと思っていて、今それについて考えているところです。

とりあえず、技術的な話のない第一弾ということで。

次回に続く

TwitterとGoogle App Engineの自分用Webアプリケーション「TwitMail」（ソース）

先月つくったTwitMail（TwitterとGoogle App Engineの自分用Webアプリケーション）、未だTaskQueueの実装が済んでいないですが、現状のもののソースを公開しておきます。

app.yaml

application: アプリ名
version: 1

runtime: python
api_version: 1

handlers:
- url: /main
  script: get_timeline.py

- url: /send
  script: send_tweet.py

- url: /db/delete
  script: db_delete.py

- url: .*
  script: default.py

cron.yaml

cron:

- description: Get Timeline job
  url: /main
  schedule: every 10 minutes

- description: Send Tweet job
  url: /send
  schedule: every 15 minutes

- description: DB Delete job
  url: /db/delete
  schedule: every 60 minutes

get_timeline.py

# -*- coding: utf-8 -*-
import sys, os, re, urllib, urllib2
import simplejson
import tweepy
from datetime import *
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext import db


#OAuth
CONSUMER_KEY        = 'CONSUMER_KEY'        #自分で取得した値を入れる
CONSUMER_SECRET     = 'CONSUMER_SECRET'     #自分で取得した値を入れる
ACCESS_TOKEN        = 'ACCESS_TOKEN'        #自分で取得した値を入れる
ACCESS_TOKEN_SECRET = 'ACCESS_TOKEN_SECRET' #自分で取得した値を入れる


#データモデルの定義
class TimelineData(db.Model):
    icon_url   = db.StringProperty()                   #アイコン画像URL
    scr_name   = db.StringProperty()                   #スクリーン名
    usr_name   = db.StringProperty()                   #ユーザ名
    tweet      = db.StringProperty(multiline=True)     #ツイート
    status_id  = db.StringProperty()                   #ステータスID
    reply_id   = db.StringProperty()                   #リプライID
    created_at = db.StringProperty()                   #ツイートされた日時
    ds_created = db.DateTimeProperty()                 #DataStoreに登録された日時
    sent       = db.IntegerProperty()                  #送信済みフラグ
    schema_ver = db.IntegerProperty()                  #スキーマ・バージョン



# メイン処理
class GetTimeline(webapp.RequestHandler):
  def get(self):
    #HomeTimelineの取得    
    auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
    auth.set_access_token(ACCESS_TOKEN, ACCESS_TOKEN_SECRET)
    api = tweepy.API(auth)
    home_timeline = api.home_timeline(count=50)
    
    #TimeLineの並び順を逆順に変更
    home_timeline.reverse()
    
    for tw in home_timeline:
      try:
        #同じステータスIDが登録されているかCheck
        registed_check_query = TimelineData().all().order('-ds_created').filter('status_id =', str(tw.id).encode("UTF-8")).get()
        
        print registed_check_query
        
        #登録がなければ、登録
        if None == registed_check_query:
          #データストアに登録
          td = TimelineData()
          td.icon_url   = tw.user.profile_image_url                         #アイコン画像URL
          td.scr_name   = tw.user.screen_name                               #スクリーン名
          td.usr_name   = tw.user.name                                      #ユーザ名
          td.tweet      = tw.text                                           #ツイート
          td.status_id  = str(tw.id).encode("UTF-8")                        #ステータスID
          td.reply_id   = str(tw.in_reply_to_status_id).encode("UTF-8")     #リプライID
          td.created_at = str(tw.created_at).encode("UTF-8")                #ツイートされた日時
          td.ds_created = datetime.utcnow() + timedelta(hours=9)            #DataStoreに登録された日時
          td.sent       = 0                                                 #送信済みフラグ、0は未送信
          td.schema_ver = 2                                                 #スキーマ・バージョン
          td.put()
          
          print "▼Check Status"
          
          print td.icon_url.encode("UTF-8")
          print td.scr_name.encode("UTF-8")
          print td.usr_name.encode("UTF-8")
          print td.tweet.encode("UTF-8")
          print td.status_id.encode("UTF-8")
          print td.reply_id.encode("UTF-8")
          print td.created_at.encode("UTF-8")
          print str(td.ds_created).encode("UTF-8")
          print str(td.sent).encode("UTF-8")
          print str(td.schema_ver).encode("UTF-8")
          
          print "△Save DataStore\n"
          
        else:
          print "△Skip DataStore\n"
          
      except:
        print "△NG DataHandling\n"



application = webapp.WSGIApplication(
                                [
                                  ('/main', GetTimeline),
                                ],
                                debug=True)

def main():
  run_wsgi_app(application)

if __name__ == "__main__":
    main()

send_tweet.py

# -*- coding: utf-8 -*-
import sys, os, re, urllib, urllib2
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext import db
import base64
from google.appengine.api import mail
from dateutil import parser
from dateutil import relativedelta


#データモデルの定義
class TimelineData(db.Model):
    icon_url   = db.StringProperty()                   #アイコン画像URL
    scr_name   = db.StringProperty()                   #スクリーン名
    usr_name   = db.StringProperty()                   #ユーザ名
    tweet      = db.StringProperty(multiline=True)     #ツイート
    status_id  = db.StringProperty()                   #ステータスID
    reply_id   = db.StringProperty()                   #リプライID
    created_at = db.StringProperty()                   #ツイートされた日時
    ds_created = db.DateTimeProperty()                 #DataStoreに登録された日時
    sent       = db.IntegerProperty()                  #送信済みフラグ
    schema_ver = db.IntegerProperty()                  #スキーマ・バージョン


#メイン処理
class SendTweet(webapp.RequestHandler):
  def get(self):
    
    not_send = TimelineData().all().order('ds_created').filter('sent =', 0).fetch(limit=200)
    #print not_send
    
    count = 0   #ツイート数
    start = ""  #最初のツイート
    body = ""   #ツイートの要約
    #"http://twitter.com/#!/"
    
    if not_send:
      for ns in not_send:
        #時刻を変換
        d = parser.parse(ns.created_at)
        jst = d + relativedelta.relativedelta(hours=+9)
        #print jst
        
        try:
          
          body += '
' + "\n"
          body += '
' + "\n"
          body += '
' + ns.scr_name.encode("UTF-8") + ' (' + ns.usr_name.encode("UTF-8") + ')' + '
' + "\n"
          body += '
' + str(jst).encode("UTF-8") + '
' + "\n"
          body += ''
          body += '
' + ns.tweet.encode("UTF-8") + '
' + "\n"
          body += 'http://mobile.twitter.com/' + ns.scr_name.encode("UTF-8") + '/status/' + ns.status_id.encode("UTF-8") + '' + "\n"
          
          if 'None' != ns.reply_id:
            body += '
└ http://mobile.twitter.com/' + ns.scr_name.encode("UTF-8") + '/status/'  + ns.reply_id.encode("UTF-8") +  '
'
          
          body += '
' + "\n"
          body += '
' + "\n"
          body += "\n"
          
          
          count += 1
          if count == 1 :
            #start = ns.created_at.encode("UTF-8")
            start = str(jst).encode("UTF-8")
          
          ns.sent = 1  #送信済みフラグの変更
          ns.put()
          print str(ns.sent).encode("UTF-8")
        except:
          print count
          print ns.sent

      #print body
      
      subject = start + "　から　" + str(count).encode("UTF-8") + "件";
      print subject
      
      fromAddr = "from: メールアドレス";
      toAddr   = "to: メールアドレス";
      
      html_h = "\n\n"
      
      html_f = "" + "\n"
      
      html_body = ""
      html_body += html_h
      html_body += body
      html_body += html_f
      
      #print html_body
      mail.send_mail(fromAddr, toAddr, subject, body=" ", html=html_body)
      
    else:
      print "No Data"


application = webapp.WSGIApplication(
                                [
                                  ('/send', SendTweet),
                                ],
                                debug=True)

def main():
  run_wsgi_app(application)

if __name__ == "__main__":
    main()

db_delete.py

# -*- coding: utf-8 -*-
import sys, os, re, urllib, urllib2
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext import db


#データモデルの定義
class TimelineData(db.Model):
    icon_url   = db.StringProperty()                   #アイコン画像URL
    scr_name   = db.StringProperty()                   #スクリーン名
    usr_name   = db.StringProperty()                   #ユーザ名
    tweet      = db.StringProperty(multiline=True)     #ツイート
    status_id  = db.StringProperty()                   #ステータスID
    reply_id   = db.StringProperty()                   #リプライID
    created_at = db.StringProperty()                   #ツイートされた日時
    ds_created = db.DateTimeProperty()                 #DataStoreに登録された日時
    sent       = db.IntegerProperty()                  #送信済みフラグ
    schema_ver = db.IntegerProperty()                  #スキーマ・バージョン



#メイン処理
class DeleteDS(webapp.RequestHandler):
  def get(self):
    # DataStoreの削除
    deleteCheck = TimelineData.all().filter('sent =', 1).fetch(limit=500)
    
    if deleteCheck :
      for dc in deleteCheck:
        try:
          db.delete(dc)
          print "deleted"
        except:
          print "no delete"
    else:
      print "no delete data"


application = webapp.WSGIApplication(
                                [
                                  ('/db/delete', DeleteDS),
                                ],
                                debug=True)

def main():
  run_wsgi_app(application)

if __name__ == "__main__":
    main()

default.py

print "Content-Type: text/plain"
print ""
print "TwitMail"

まだまだ見直す必要があるコードですが、参考になれば。