2013-12-17

iOS WebViewアプリ勉強会の資料と補足 #vgadvent2013

この記事はVOYAGE GROUP エンジニアブログ: Advent Calendar 2013の15日目です。

先日社内で行なった勉強会の資料をSlide Shareにアップしました。口頭で説明した内容を追加してあります。


補遺

前提としてiOSのWebView(ハイブリッド)アプリでネイティブアプリになるべく近いLook and Feelを実現する際の話です。

ネイティブとの連係

直近のプロジェクトではコードベースを最小にしたかったので、PhoneGapを使わなかったのですが、最新のPhoneGapは必要な機能を切り出してビルドして使えるみたいですね。素晴らしい。あまり自分で実装したくない所なので、既存で使える物をなるべく使いましょう。

なるべくブラウザ(Chrome)でデバッグする理由

iPhoneシミュレーター、実機ではデバッグしづらいからです。

touchendとclickイベント

clickイベントが遅延する対策としてtouchendを使っても良いと説明しましたが、touchendイベントとclickイベントは発動条件が異なります。具体的にはタッチした後に別の要素まで指を動かして離すとtouchendはFireするが、clickイベントは飛びません。タップしたけどやっぱ辞めた、という動きはclickイベントを使った方が意図した通りになります。
私はFastClick.jsを有効にして、タッチの処理はclickイベントをハンドルしています。

パフォーマンス周り

最後のまとめで覚悟が必要とさらっと書いてありますが、どういう事かと言うと。ネイティブであればiOS SDKが標準で用意してくれる、少ないメモリ、貧弱なCPUでUIを構築するための仕組み、例えばUITableCellの再利用やGrand Central Dispatch(GCD)がHTML5/JavaScriptには無いです。独自で実装したり、WebWorkerを利用してバックグラウンドプロセスで動かすという手もありますが面倒な事に変りはありません。そのあたりをカバーしつつ、レンダリングエンジンの気持ちになって考え、DOM操作を最適化していくという覚悟が必要、という意味です。Androidに比べればWebViewがサクサク動いてくれる、というのが唯一の救い。
初回リリース時は工数のかかるパフォーマンス、アニメーションのチューニングを潔く諦めるのもアリかなと思ってます。いつでも直せるのがメリットなので。

それ以外に大変な事

やった事はありませんが、オリエンテーション対応が必要という場合はもうSencha Touchを使った方が良いと思います。2.3でiOS 7のスタイルも追加されました。個人的にはjQuery mobileよりもおすすめ。学習コスト高いけど。

Advent Calendar明日の担当は@shinbashiさんです。既に記事が公開済みという手筈の良さ、流石ですね。

このエントリーをはてなブックマークに追加

2013-11-30

wheelを使ってPythonのC拡張モジュールを本番デプロイする

Pythonの話。wheelを使ってC拡張モジュールをデプロイする仕組みが上手く稼動したのでメモ。

依存パッケージの本番デプロイ

アプリケーションが依存しているPythonパッケージをどうやって本番サーバーにデプロイするか。大抵はrequirements.txtにpip freezeで吐いた内容を保存しているだろう。とすると、本番サーバーでpip install -r requirements.txtすれば良いんだが、githubが落ちてたりPyPIが落ちてたりすると、外部要因でデプロイスクリプトが途中でコケる、というダサい事態になる。それを避けるために事前にパッケージを固めて各サーバーに配布する仕組みが必要になる。C拡張モジュールを使いたいけど本番サーバーでCコンパイラが自由に使えない、という時も同様で、事前にコンパイル済みの物を配布する必要がある。

pip bundleを使う場合 (deprecated)

Pure Pythonなパッケージだけを使っている場合はこれで十分だろう。
$ pip bundle -r requirements.txt myproduct.bundle
で、myproduct.bundleを作成しておいて、デプロイ先で
$ pip install myproduct.bundle
とする。しかし、C拡張モジュールがあると、デプロイ先でもりもりコンパイルが始まってしまって非効率なのと、そもそもpip 1.5でpip bundle自体が削除予定なので今後は忘れても良い機能だ。

pip wheel でコンパイル済みC拡張モジュールをデプロイする

これが本命、wheelというフォーマットでパッケージを配布する方式。
私はCIサーバーでwheelを作って本番サーバーに転送して使っている。手順は、まず事前に各サーバーでwheelを導入しておく。
$ pip install --upgrade pip        # 1.4以上が必要
$ pip install --upgrade setuptools # 0.8以上が必要
$ pip install wheel
wheelの作成は次の通り。慣例的にwheelhouseというディレクトリ名が使われる様だ。
# requirements.txtがこんな内容だとする
$ cat requirements.txt
MySQL-python==1.2.4
python-memcached==1.53
boto==2.14.0
simplejson==3.3.1

# wheelの作成
$ pip wheel --wheel-dir=./wheelhouse -r requirments.txt
Downloading/unpacking MySQL-python==1.2.4 (from -r requirements_prod.txt (line 1))
  Downloading MySQL-python-1.2.4.zip (113kB): 113kB downloaded
  Running setup.py egg_info for package MySQL-python
    Downloading http://pypi.python.org/packages/source/d/distribute/distribute-0.6.28.tar.gz
    Extracting in /tmp/tmpKuwtk2
    Now working in /tmp/tmpKuwtk2/distribute-0.6.28
    Building a Distribute egg in /web/httpd_spc/chatparty_api/python/build/MySQL-python
    /web/httpd_spc/chatparty_api/python/build/MySQL-python/distribute-0.6.28-py2.6.egg
Downloading/unpacking python-memcached==1.53 (from -r requirements_prod.txt (line 2))
  Downloading python-memcached-1.53.tar.gz
  Running setup.py egg_info for package python-memcached
    warning: no files found matching '*.rst'
    warning: no files found matching '*.txt'
    warning: no files found matching 'MakeFile'
    warning: no previously-included files matching '*.pyc' found anywhere in distribution
    warning: no previously-included files matching '.gitignore' found anywhere in distribution
    warning: no previously-included files matching '.DS_Store' found anywhere in distribution
Downloading/unpacking boto==2.14.0 (from -r requirements_prod.txt (line 3))
  Downloading boto-2.14.0.tar.gz (1.1MB): 1.1MB downloaded
  Running setup.py egg_info for package boto
    warning: no files found matching 'boto/mturk/test/*.doctest'
    warning: no files found matching 'boto/mturk/test/.gitignore'
Downloading/unpacking simplejson==3.3.1 (from -r requirements_prod.txt (line 4))
  Downloading simplejson-3.3.1.tar.gz (67kB): 67kB downloaded
  Running setup.py egg_info for package simplejson
Building wheels for collected packages: MySQL-python, python-memcached, boto, simplejson
  Running setup.py bdist_wheel for MySQL-python
  Destination directory: /web/httpd_spc/chatparty_api/wheelhouse
  Running setup.py bdist_wheel for python-memcached
  Destination directory: /web/httpd_spc/chatparty_api/wheelhouse
  Running setup.py bdist_wheel for boto
  Destination directory: /web/httpd_spc/chatparty_api/wheelhouse
  Running setup.py bdist_wheel for simplejson
  Destination directory: /web/httpd_spc/chatparty_api/wheelhouse
Successfully built MySQL-python python-memcached boto simplejson
Cleaning up...
生成されたファイル名を見ればわかる様に、wheelはPythonバージョンとアーキテクチャ毎に作られる。
$ ls -l wheelhouse/
boto-2.14.0-py26-none-any.whl
MySQL_python-1.2.4-cp26-none-linux_x86_64.whl
python_memcached-1.53-py26-none-any.whl
simplejson-3.3.1-cp26-none-linux_x86_64.whl
wheelを使ったインストールはpip installでwheelの場所を指定するだけ。一瞬で終って気持ちがいい。依存関係は既に解決済みなので --no-deps オプションを使う。
$ pip install --no-deps wheelhouse/*
Unpacking ./wheelhouse/MySQL_python-1.2.4-cp26-none-linux_x86_64.whl
Unpacking ./wheelhouse/boto-2.14.0-py26-none-any.whl
Unpacking ./wheelhouse/python_memcached-1.53-py26-none-any.whl
Unpacking ./wheelhouse/simplejson-3.3.1-cp26-none-linux_x86_64.whl
Cleaning up...



このエントリーをはてなブックマークに追加

2013-11-24

DjangoでMySQLにunicode絵文字を登録できるようにする(utf8mb4対応)

Djangoを使っているプロジェクトでMySQLにunicode絵文字を投入したくなったので。

Unicode絵文字

iOSで使える絵文字キーボードに含まれる絵文字はUTF-8で符号化した時に4バイトになる。UTF-8で符号化した時に4バイトになるのは一部も漢字もそうだが具体的にはこのあたり。
MacOSXだとことえりで「ハート」を変換すると1F493のBEATING HEARTあたりが出せる。Pythonでコードポイントを表示してみると次の通り。
(MySQL以前にUSC2だとサロゲートペアになるのでPythonを --enable-unicode=ucs4 でコンパイルしてないとおかしな結果になるかも。)

MySQLのcharcter setのutf8は3バイトまでの文字しか扱えないため、MySQL5.5で4バイトの文字を扱えるようにしたutf8mb4というcharcter setが追加された。

データベースのdefault charsetをutf8mb4にする

python manage.py syncdb
によって生成されるCREATE文はDEFAULT CHARSET指定が無い、よってデータベース作成時に指定しておくのが良いだろう。python Djangoチュートリアルを例にすると
mysql> create database django_tutorial default charset utf8mb4;
Query OK, 1 row affected (0.00 sec)

settings.pyのDB接続オプションでutf8mb4を指定する

DATABASES = {
            'default': {
                'ENGINE': 'django.db.backends.mysql',
                'NAME': 'mydatabase',
                'USER': 'root',
                'PASSWORD': 'password',
                'HOST': 'localhost',
                'PORT': '3306',
                'TIME_ZONE': '+09:00',
                'OPTIONS': {
                    'charset': 'utf8mb4'
                }
            }
}
これでunicode絵文字のINSERT、SELECTが上手くいくようになる。
Djangoチュートリアルで試すとこの通り。


このエントリーをはてなブックマークに追加

2013-11-22

QiitaにPythonネタをいくつか投稿してみた

MacのmarkdownメモクライアントのKobitoを使ってると圧倒的使い易さ。Bloggerもこういうの欲しい。



このエントリーをはてなブックマークに追加

2013-10-05

botoを使ってAWS SNSのMobile Pushを利用する (APNs編)

boto自体使うのが初めてだったので、おかしい所があるかもしれないが動作はした。APNsのSSL証明書作成等は毎度の事なので省略。Application ARNはAWS Consoleから既に作成してあるとする。

デバイス指定でメッセージ送信する

# -*- coding: utf-8 -*-

import boto.sns

AWS_ACCESS_KEY = 'xxxx'
AWS_SECRET_ACCESS_KEY = 'yyyyyyyy'
APPLICATION_ARN = \
    'arn:aws:sns:ap-northeast-1:0000:app/APNS_SANDBOX/aaaa'

# SNSに接続
sns_connection = boto.sns.connect_to_region('ap-northeast-1',
        aws_access_key_id=AWS_ACCESS_KEY,
        aws_secret_access_key=AWS_SECRET_ACCESS_KEY)

# 送信先デバイスを指定してendpointを作成
res = sns_connection.create_platform_endpoint(
        platform_application_arn=APPLICATION_ARN,
        token='xxxxxxxx')
endpoint = res.get('CreatePlatformEndpointResponse')\
              .get('CreatePlatformEndpointResult').get('EndpointArn')

# endpointに送信
sns_connection.publish(target_arn=endpoint, message=u"Hello World")
endpointは一度作成したら、保存しておけば再度 create_platform_endpoint する必要は無い。

Topic経由でメッセージ送信する

Topicをsubscribeしているデバイスに一斉送信するパターン、Topicをsubscribeする際の第二引数はbotoのソースを読んでもわからなかったが、AWSコンソールのTopic管理画面から推測すると "application" を指定したら良い気がする。そして実際に動作する。
# -*- coding: utf-8 -*-

import boto.sns

AWS_ACCESS_KEY = 'xxxx'
AWS_SECRET_ACCESS_KEY = 'yyyyyyyy'
APPLICATION_ARN = \
    'arn:aws:sns:ap-northeast-1:0000:app/APNS_SANDBOX/aaaa'

# SNSに接続
sns_connection = boto.sns.connect_to_region('ap-northeast-1',
        aws_access_key_id=AWS_ACCESS_KEY,
        aws_secret_access_key=AWS_SECRET_ACCESS_KEY)

# 送信先デバイスを指定してEndpointを作成
res = sns_connection.create_platform_endpoint(
        platform_application_arn=APPLICATION_ARN,
        token='xxxxxxxx') 
endpoint = res.get('CreatePlatformEndpointResponse')\
              .get('CreatePlatformEndpointResult').get('EndpointArn')

# Topicを作成
res = sns_connection.create_topic('test_topic')
topic = res.get('CreateTopicResponse')\
           .get('CreateTopicResult').get('TopicArn')

# TopicをSubscribe
sns_connection.subscribe(topic, 'application', endpoint)

# Topicに送信
sns_connection.publish(topic=topic,
                       message=u"Hello World for Topic subscriber")

Topicにぶらさげるデバイスの数は1万が上限との事なので、アプリのユーザー全員に送信するといった場合にはTopicを分けるか、全てのEndpointに送信するかどちらかになる。あまり楽させてはくれない様だ。Endpointを削除した場合、Topicから勝手にunsubscribeされると思いきやそうでもなかった。

JSON形式でbadgeやalertを送る

    # Payloadの中身
    message = json.dumps({
        "aps": {
            "alert": {
                "body": "Hey Hey",
                "action-loc-key": None
                },
            "badge": 100
            }
        })

    # Payloadの長さチェック
    if len(message) > 255:
        raise "APNs payload over 255 bytes!!!!"

    # 送信先プラットフォームの指定、本番であればAPNS
    # Android向けのPushもここで同時に指定できる
    data = json.dumps({"APNS_SANDBOX": message})

    # message_structure='json'を指定してPublish
    try:
        sns_con.publish(
                target_arn=endpoint,
                message=data,
                message_structure='json')
    except BotoServerError, e:
        logger.warn(
            "BotoServerError status:%s %s %s",
            e.status, e.reason, e.error_message)

Payloadを一度作った後、文字列にして再度JSONにつっこむという面倒な事が必要。

APNsのFeedback Serviceはいつ呼ばれるか

SNSの内部でよろしくやってくれてるようだが、その結果をboto経由で参照する方法は見つからなかった。Feedback Serviceの結果から、どの程度アプリがデバイスから削除されたかモニタリングしたいといった場合にはSNSは使えないだろう。

このエントリーをはてなブックマークに追加