weinreでスマートフォンをデバッグする

スマートフォンアプリ開発時のデバッグは大変。
iOSならXcodeのconsole log、AndroidならEclipseのLogCat。
JavaScriptで開発していると、エラーの内容とかがほんと微々たる情報しかでないのでカオスです。

そこで、ブラウザからスマートフォンのリモートデバッグができる「weinre」がとても便利!

スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマホの開発が超絶楽に! weinreでスマートフォンをPCでリモートデバッグ!

ダウンロード

アプリ版があるけどアプリは動作確認できなかったので、今回はjarファイルを実行する形式で。
http://phonegap.github.com/weinre/Installing.html

実行

ダウンロードしたファイルを伸張して、フォルダの中にあるweinre.jarを実行します。

実行できたら、weinre:HTTP server started atに載っているURLにブラウザでアクセスします。
今回ならhttp://localhost:8080です。

タグの埋め込み

開いたページの「Target Script」に載っているURLのファイルを、アプリ(index.htmlなど)で読み込みます。
僕の環境ではhttp://localhost:8080/target/target-script-min.js#anonymousです。

コンソールを開いてデバッグ開始

以上で設定は終わりです。簡単。
あとは先ほどのhttp://localhost:8080ページの「Access Points」→「debug client user interface」に載っているURLを開くとデバッガにアクセスできます。
Consoleタブでalert(“Hello World”);ってするとアプリ上でダイアログボックスがでたりします。

詳しくは公式をみたりしてください。

おわり。

Pocket

Posted in Android, iPhone, JavaScript.

PhoneGap×Sencha TouchでMVC(の記事を紹介)

Sencha Touch やってみて、1つの.jsファイルにMVCすべてを格納しなくちゃいけないのかな?と疑問に思った。
で、聞いてみたところ MVCモデルで書くには?的な記事が公式にのっているということ。

A Sencha Touch MVC application with PhoneGap

ということで、英語なんてほとんどできないけど、やってみた。
・・・よくわかんなかったので、記事のチュートリアルはほどほどに、それまでに作ってたやつを MVCモデルに移植してみた。

移植はできたものの、controller と view に関しては何となく理解できたが、model だけよくわからず。
proxy と store の使い方がなんかあれなので、もう少し試行錯誤せねば。

ドキュメントとは少し仲良くなれた気がする。
Sencha Touch Documentation

今回は面倒なのでコードとかの説明はなしなので、気になる人はこれやってください。

おわり。

Pocket

Posted in iPhone.

PhoneGap×Sencha Touchことはじめ

PhoneGapプロジェクトでSencha Touchを導入するには?という内容です。

PhoneGapについての説明はありません。

Sencha Touchとは?

iPhoneおよびAndroidのようなタッチ端末で利用できるWebアプリ、それもネイティブアプリのような操作性を持つWebアプリを開発するための世界初のHTML5対応JavaScriptフレームワーク。
(公式ページから引用)

Sencha Touchライブラリをダウンロードする
ダウンロードページからライブラリをダウンロードします。
商用版とオープンソース版があるので用途によって適宜選択します。
今回はバージョン1.1のオープンソース版をダウンロードしました。

PhoneGapプロジェクトに追加する

ダウンロードしたファイルからsencha-touch-1.1.0ディレクトリを取り出して、プロジェクトのwwwディレクトリ以下に置きます。

 

 

 

 

 

index.htmlにsenchaライブラリを読み込むようにします。
head要素に以下を追加します。

Sencha Touchライブラリは、テストやデバッグ環境で動かすときは sencha-touch-debug.js を使い、リリース時には sencha-touch.js を使うようです。

あと、 body 要素無いの記述を消しておきます。

アプリケーションをつくる

wwwディレクトリ以下に index.js を作ります。
index.js に次のコードを書きます。

Twitter で「ポケモン」という単語が入っているツイートを取得して、表示するだけのコードです。
コードの詳細はこちらを参考にしてください。

コードが書き終わったらビルドして実行しましょう。

こんな感じでツイートが表示されれば成功です。

Pocket

Posted in iPhone.