October 29, 2013

CordovaのInAppBrowserを使うメモ

メモです。

ドキュメント:
http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

Cordovaアプリの作成
$ cordova create 
$ cd test/
$ cordova platform add ios
index.htmlに適当な内容を記述
document.addEventListener ("deviceready", function() {
    var ref = window.open("http://apache.org", "_blank", "location=yes");
    ref.addEventListener("exit", function() {
        alert("InAppBrowser closed.");
    });
});
InAppBrowserのインストールとiOSエミュレータでの確認
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova build
$ cordova emulate ios

VagrantのWEB(Apache)にAndroidの実機からアクセスするメモ

ローカル上のVagrantのWEB(Apache)にAndroidの実機からアクセスしてみました。PCとAndroidは同じWi-Fi上の前提です。

適当な場所で vagrant init します。
$ mkdir xxx
$ cd xxx/
$ vagrant init
Vagrantfileの以下を有効にします。Apacheは直接あるいはレシピでインストールして下さい。
config.vm.network :public_network
vagrant upします。"Available bridged network interfaces"で"Wi-Fi"を選びます。
$ vagrant up
...
[default] Available bridged network interfaces:
1) en0: Ethernet
2) en1: Wi-Fi (AirPort)
3) p2p0
What interface should the network bridge to? 2
vagrant sshでログインしてWi-FiのIPアドレスを確認します。
$ vagrant ssh
$ ifconfig

Androidのブラウザからアクセスしてみます。

スマホアプリでAPIサーバが必要になった時、開発環境のネタにできるかなー。

October 28, 2013

weinreでCordovaアプリをiOSシミュレータとAndroid実機でデバッグしてみる

Homebrewとios-simのインストール
* ios-simをインストールしておくとcordovaコマンドからiOSシミュレータを起動できるようになります。
$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
$ brew install ios-sim
weinreのインストールと起動
$ sudo npm -g install weinre

# Androidの実機でも確認したいので、PCのWiFiのIPアドレスを指定する
# ファイアウォールでポートを閉じていないか注意
$ weinre --boundHost 192.168.xxx.yyy --httpPort 9090
Cordovaアプリの作成
$ cordova create weinre com.example.weinre "Weinre Test"
weinre/www/index.htmlに以下を追記
<script src="http://192.168.xxx.yyy:9090/target/target-script-min.js#anonymous"></script>
プラットフォームの追加 〜 確認
$ cd weinre/
$ cordova platform add ios
$ cordova platform add android
$ cordova build
$ cordova emulate ios # iOSシミュレータの場合
$ cordova run android # USB & WiFi接続しているAndroid実機の場合
Chromeから http://192.168.xxx.yyy:9090/client/#anonymous にアクセスして、"Targets"からiOSシミュレータ/Android実機をそれぞれ選択すると、いつもの感じでデバッグできるようになりました。

参考:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Weinre_As_Remote_Debugger
http://gihyo.jp/dev/serial/01/phonegap2/0003
http://stackoverflow.com/questions/16507430/debugging-web-page-in-android-app-using-weinre-cannot-find-debug-target

October 26, 2013

Steroidsのチュートリアルを試してみる

Steroidsプロジェクトルートで以下のコマンドを実行します。
$ steroids generate tutorial begin
config/application.coffeeのsteroids.config.locationを変更して画面を確認します。
$ steroids.config.location = "tutorial.html"
色々と書かれているので、気が向いた時に見てみます。。。

SteroidsアプリにAndroid端末からアクセスしてみる

Steroids公式:
http://www.appgyver.com/steroids

Steroidsアプリを、試しにAndroid端末で動かしてみたのでメモしておきます。

--

Node.jsをインストールしておきます。

手元のAndroid端末に https://play.google.com/store/apps/details?id=com.appgyver.android をインストールしておきます。

Android端末をWi-Fiで接続しておきます。このネットワークは、使用しているPCと同じネットワークでないといけません。また、Steroidsはlocalhostの4567ポートを使用するので、ファイアウォールの設定に注意して下さい。(少しハマってしまった。。。)

以下のコマンドを実行します。
# Steroidsをインストールしてアプリケーションを生成
$ sudo npm install steroids -g
$ steroids create myapp
$ cd myapp

# ローカルでSteroidsサーバを起動して接続?
$ steroids login
$ steroids connect
ブラウザにQRコードが表示されるので、予めインストールしておいたアプリで読み取り、Welcome画面が表示されればOKと思います。

文言を適当に変更してエンターキーを押すと、端末側も自動でリロードされました。

helpコマンドの実行結果は以下のとおりです。
AppGyver Steroids command  help

 Command          Shortcut      Description
------------------------------------------------------------------------------
 push             <enter>       Push code to connected devices

 sim <device>     s             Launch iOS Simulator; <device> can be:
                                 iphone, iphone_retina_3_5_inch, iphone_retina_4_inch
                                 ipad, ipad_retina

                                Optionally, append @<iOS-version> to launch with a specific iOS
                                version; e.g. iphone@5.1

 qr               -             Show the QR code for connecting devices

 edit             e             Launch editor (set in application.coffee), defaults to subl

 debug <path>     d             Open Safari debugger for matching path in URL location
                                Note: Enable Develop menu in: Safari -> Preferences -> Advanced

 quit             q             Exits connect. Also: exit
以下、関連するドキュメント等です。
http://academy.appgyver.com/courses/2/lessons/32
http://academy.appgyver.com/courses/2/lessons/4
http://guides.appgyver.com/steroids/guides/steroids_npm/troubleshooting-connectivity/

次はiOS(iPod touch)とiOSシミュレータで確認してみたいと思います。

iOSシミュレータは "s" で起動しました。要Xcodeです。iPod touchとかiPhoneは未確認ですが、Android端末と同じ要領でOKなんだと思います。

CordovaでAndroidアプリを作成してみる

Node.jsやAndroid SDKはインストールされている前提です。

手順は、公式ドキュメントだと
http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface
http://cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide
あたりになります。

尚、Android StudioだとAndroid SDKは
/Applications/Android Studio.app/sdk/tools
に有りました。

以下、ドキュメントそのままですが、コマンド例です。
$ sudo npm install -g cordova
$ cordova create hello com.example.hello "HelloWorld"
$ cd hello
$ cordova platform add android
$ cordova build
Android Studioの"Import Project"からplatforms/androidディレクトリを選択してエミュレータで実行します。


P.S.
iOS用のドキュメントは
で、要Xcodeです。


October 12, 2013

「FuelPHP & CodeIgniter ユーザの集い」でFuelPHPとRatchetについてお話させて頂きました

FuelPHPユーザの方とCodeIgniterユーザの方を対象にしたイベント「FuelPHP & CodeIgniter ユーザの集い」 http://atnd.org/events/43750 にて、以前に調べていたFuelPHPとRatchet http://madroom-project.blogspot.jp/2013/06/fuelphpwebsocket.html についてお話させて頂きました。

使用したスライドは http://mamor.github.io/reveal-fuel-ratchet です。

ZeroMQ不要の簡易版があると、ぐっと敷居が下がりそうなので、そのうち作りたいなと思いました。

LTの中には、当パッケージを実際に使用したお話もあり、参考になりました。