橋本商会

PhoneGapでAndroidのNFCを使えるpluginを作った。

• shokai/phonegap-plugin-nfc – GitHub

JavaScriptから簡単にNFCタグのIDが読める。

<script src='./phonegap.nfc.js' type='text/javascript' />

document.addEventListener('deviceready', function(){

    window.plugins.nfc.id(

        function(tag){

            var id = tag.id; // get Tag ID;

        },

        function(e){

            log(e);

        });

}, true);

インストール方法はgithubに書いた。サンプルプロジェクトもある。
普通のPhoneGap pluginと同じく、phonegap.nfc.jsとNfcPlugin.javaを所定の場所に置くのだけど、NFCを使うためにguava librariesとAndroidManifest.xmlの修正も必要。

とりあえず、NFCでタグのIDを読むだけしか機能は無い。もちろん他にも色々データは取れるんだけど、どこまでwrapしたらいいのかよくわからないのと俺がIDしか使う予定が無いので、とりあえずIDだけにしておいた。（要望あれば追加する）




PhoneGap pluginの作り方は、phonegap / PhoneGap Pluginsが参考になった。JavaScriptからJavaのコードを呼びだす方法が書かれている。


既に公開されているプラグインがいくつかあって、それも参考になった。

• borismus/phonegap-plugins – GitHub
• WebIntent, an Android PhoneGap Plugin | Boris Smus

ふつうに最初からEclipseで開発したプロジェクトのディレクトリ内で、

android update project --path `pwd`

してから

ant debug

adb install -r bin/YourApp.apk

でインストールできる。


android updateでantビルドに必要なbuild.xmlとlocal.propertiesが生成される。
local.propertiesにはandroid sdkの絶対pathが含まれているので、この2つはリポジトリに含めない方が良いみたいだ

targetはAndroid2.3.4、API 10向けにビルドして試した。

参考：

• 黒点観測記: AndroidのHttpのPostでもはまる
• HTTP Post通信での文字化け – 日本Androidの会 | Google グループ

<uses-permission android:name="android.permission.INTERNET" />

import java.io.*;

import java.util.*;

import org.apache.http.*;

import org.apache.http.client.HttpClient;

import org.apache.http.client.entity.UrlEncodedFormEntity;

import org.apache.http.client.methods.HttpPost;

import org.apache.http.impl.client.DefaultHttpClient;

import org.apache.http.message.BasicNameValuePair;

HttpClient client = new DefaultHttpClient();

HttpPost httppost = new HttpPost("http://localhost:8080");

List<NameValuePair> params = new ArrayList<NameValuePair>();

params.add(new BasicNameValuePair("message", "ほむ"));

try{

    httppost.setEntity(new UrlEncodedFormEntity(params, "UTF-8"));

    HttpResponse res = client.execute(httppost);

    ByteArrayOutputStream os = new ByteArrayOutputStream();

    res.getEntity().writeTo(os);

    Log.v("result", os.toString());

    Log.v("status", res.getStatusLine().getStatusCode());

}

catch(Exception e){

    e.printStackTrace();

}

リクエストができているかの確認は、EM::HttpServerで見た

gem install eventmachine_httpserver

#!/usr/bin/env ruby

require 'rubygems'

require 'eventmachine'

require 'evma_httpserver'



class Handler  < EM::Connection

  include EM::HttpServer

 

  def process_http_request

    res = EM::DelegatedHttpResponse.new(self)

    puts "request_method : #{@http_request_method}"

    puts "path_info : #{@http_path_info}"

    puts "query_str : #{@http_query_string}"

    puts "post_content : #{@http_post_content}"

    res.status = 200

    res.content = "こんにちは"

    res.send_response

  end

end



EM::run do

  EM::start_server("0.0.0.0", 8080, Handler)

  puts "http server start, prot 8080"

end

Nexus SのNFCでFelicaのIDを読む – 橋本詳解の時に、Android 2.3 GingerBread NFCをやってみる – TOPGATE Google関連技術サイトのTagWrapper.javaを使わせてもらってたんだけど先日のNexus Sのandroid2.3.4へのアップデートで動かなくなったので少しやり方変えた。
TagWrapper.javaの中でやってる事を参考にさせてもらった。


ただFelicaのユニークなIDだけが必要だったらこれでいい
（先に橋本詳解の方に書いたManifestとかguavaとかを設定しておく必要はある）

import java.lang.reflect.*;

import java.util.*;



import com.google.common.primitives.UnsignedBytes;



import android.app.Activity;

import android.content.Intent;

import android.nfc.NfcAdapter;

import android.os.Bundle;

import android.os.Parcelable;

import android.util.*;

たくさんのimportが必要。

    public void onCreate(Bundle savedInstanceState) {        

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        resolveIntent(this.getIntent());

    }



    void resolveIntent(Intent intent) {

        if (NfcAdapter.ACTION_TAG_DISCOVERED.equals(intent.getAction())) {

            try{

                Parcelable tag = intent.getParcelableExtra("android.nfc.extra.TAG");

                Field f = tag.getClass().getDeclaredField("mId");

                f.setAccessible(true);

                byte[] mId = (byte[]) f.get(tag);

                StringBuilder sb = new StringBuilder();

                for (byte id : mId) {

                    String hexString = Integer.toHexString(UnsignedBytes.toInt(id));

                    if (hexString.length() == 1) sb.append("0");

                    sb.append(hexString);

                }

                String id = sb.toString();

                Log.v("TAG", id);

            }

            catch(Exception e){

                e.printStackTrace();

            }

        }

    }

2ヶ月ぐらい前に作った。blog書くのめんどくさくて放置してた。

http://glitchtweet.com


俺がやっているような素敵な装飾がついたツイートがだれでもできるwebサービスです。しかも気に入ったのがでるまで何度でもやりなおせる。
iPhoneやAndroidから使うことを想定している。



ライブラリ以外のコードを数えたら、286行しかなかった。
その他は以前作ったテキストに文字装飾を行うglitchtext.jsが500行ぐらい。sinatra、haml、jqueryのおかげでシンプルに書けた。

ソースはここにある
shokai/glitchtweet-web-app – GitHub



以下細かいことなどを書く

■ファイルサイズ
でかい。glitchtext.jsが辞書が巨大すぎて300kb以上ある。けどしょうがないし、まあキャッシュ効くからいいか


■サーバー
さくらVPSのdev.shokai.orgに、virtualhostでglitchtweet.com割り当てて使ってる。


■開発環境
まずglitchtext.jsはv8とRakeで単体でテストをしている。前に書いた。
glitchtweet.comのwebアプリ自体はローカルでwebrickで起動して、chromeの開発パネルでjsなどのデバッグをした。あとはiPhoneとAndroidのsafariのブラウザで開いて、見た目を調整した。


■なるべく画面遷移しない
jquery mobileやjQTouchを使うとネイティブアプリ風に外見で、横にスライドして表示を切り替えるwebアプリを作れるけど
面倒だったので使わなかった。visibleをon/offしてtweetボタンを表示したりしなかったり等している。
なのでviewのテンプレートは1つしかない。


■twitterログイン
生成したglitchテキストはoAuthでログインしてtweetされるが、ユーザ情報管理にDBは使っていない。
cookieにtwitterのoauth tokenとsecretを保存している。
最初の画面でログイン済みかどうかは、haml template上でtokenとsecretがあるかどうかだけで表示を分岐しているので、実際glitchtweet.com側では誰がどんなtweetをしているかは把握していない（しようと思えばできる）


■cookieでsession
sinatraでcookieベースのsessionを使うようにしている。
Rack::Session::Cookieを使う – 橋本詳解に書いた。
glitchtweet.comでは2週間cookieで保存するようにしている。
use Rack::Sessioin::Cookieしたらsinatraのsession関数がcookieを使うようになってくれた。
（これで大丈夫ですよね？）


■ホーム画面アイコン

<link href='http://glitchtweet.com/img/icon.png' rel='apple-touch-icon' />

これをheadに書いておくと、iPhoneのホーム画面にブックマーク保存するとアイコンが付く。
Android2.3でもホーム画面にブックマークショートカットを作ったらアイコンが出るようになった。しかも角丸化される。apple-touch-iconって名前なのに処理してくれるAndroidえらい。


■テスト環境にwebrick使うようにした
開発中にSinatra1.2.1が出たのでupdateしたら、thinを使うとhttpリクエスト送った瞬間に問答無用で強制終了するようになった。
webrick使うようにした。
Sinatra1.2.1とthin1.2.10を同時に使うと死ぬ – 橋本詳解


■viewport
@hitoriblogさんに教えてもらった。
適当なhtml/cssを書いていてもiPhoneではそれなりに正しいサイズで表示されるんだけど、Androidではテキストエリアをクリックした瞬間にものすごいズームをされてしまう。
これはviewportをheadに指定しておくとなんとかなる。Androidはデバイスがたくさんあるので、画面サイズが微妙に違うのでwebサービス作ってる人は大変そう。

<meta content='width=device-width, user-scalable=no' name='viewport' /> 

このへんも参考になる。

• Togetter – 「Android Viewportとの戦い」
• 2. ウェブアプリの画面対応 – ソフトウェア技術ドキュメントを勝手に翻訳

■shakeイベント
ネイティブアプリではshakeのイベント、つまりiPhone本体を振ったイベントを取得して、undoに使われている。
全く、操作と実行内容の関連付けが最も意味不明な機能だと思う。

でもiOS4.2からsafariでも加速度センサーが使えるようになったので、せっかくだからshakeイベントを取れるjsライブラリを作った。
shokai/js-iphone-shake-event – GitHub

glitchtweet.comでも使っている。tweet後に、もう一度同じソースからglitchしたい時にshakeすると消えた文字が復元される。

これについてはあとで書く。


■iphone-js-console
shokai/iphone-js-console – GitHub
iphone-shake-event.jsを作っている時に、iPhone実機でのデバッグをする為に作った。
パソコンのterminal上でjsを書くと、iPhone上で実行されたり、パソコン上でiPhoneのブラウザ上のjsの値を読み出したりできて便利。

これについてもあとで書く。