Cordova アプリの Android 実機確認

cordova android

実機の準備

USBデバッグモードにして、Mac に USB で接続する

開発者向けオプションが表示されない場合は以下の方法で設定する

Nexus 7 Android 4.2で消えた開発者向けオプションを表示させる方法。 - Android(アンドロイド)おすすめアプリ・カスタムニュース|AndroidLover.Net

アプリの実機転送

cordova run android --device

おわり

エミュレータより全てが全然速い

Mac での Apache Cordova (PhoneGap) はじめの一歩

cordova ios android

Mavericks で Cordova の HelloWorld を Android / iOS シミュレータ確認するまでの流れ

tmux だからハマったり Mavericks だからハマったりするところがちょいちょいある

インストール

npm install cordova -g

node.js をインストールしていない場合は brew install node とかでインストールしておく

プロジェクト作成

cordova create hello com.example.hello HelloWorld -d

成功したらカレントディレクトリに hello って名前のディレクトリが作成されるのでそこに移動する

各プラットフォームライブラリインストール

Android

Android SDK インストール

brew install ant
brew install android-sdk

インストールされたか確認 実行できたらOK

android -h
adb version

Android コンポーネント追加

cordova platform add android

Android を add しようとしてもできない場合は、 以下のコマンドで Android SDK Manager を起動してエラーメッセージに表示された不足ライブラリをインストールする

android

今回は最新の Android API 一式と Tools/Android SDK Platform-tools, Android SDK Build-tools をインストールした

Android SDK Manager

エミュレータの準備

確認のために自分でエミュレータを作成する必要がある

Android再入門 - エミュレータの作成 - Qiita

高速エミュレータを利用できるように Intel HAXM を導入する

Mavericks の場合は起動しても必ずフリーズしてしまうので以下の hotfix 版をインストールする

Mac OS X 10.9 Mavericks で Intel HAXM を使用した x86 Android Emulator を起動するとシステムがハングする - Xamarin 日本語情報

インストールしたら以下のコマンドで Android Virtual Device Manager を開いて AVD を作成する

android avd

今回の設定項目は以下

Android Vurtual Device Manager.png)

作成したら一覧から選択して「Start」で起動してみる。

しばらく(結構)待って Android のホーム画面が表示されたら成功。

エミュレータ起動

先ほど起動したエミュレータを一回終了して以下のコマンドを実行する

cordova emulate android -d

ビルド後しばらく待ってアプリケーションが起動すれば成功

iOS

シミュレータのインストール

brew install ios-sim

XCode インストールしてない場合は AppStore とかからインストールしておく

iOS コンポーネントの追加

cordova platform add ios

シミュレータの起動

cordova emulate ios -d

これでシミュレータ上で動作確認ができる

tmux を利用している場合

tmux 上だとシミュレータを起動しようとしても session timed out 的なエラーが発生してうまく動かないので追加で設定が必要

reattach-to-user-namespace のインストール

brew install reattach-to-user-namespace

.tmux.conf に以下を追記

set-option -g default-command "reattach-to-user-namespace -l zsh"

tmux のセッションを全て終了して再起動

シミュレータの起動コマンドでちゃんと動作するようになる

サーバの状態を監視してサーバおじさんに HipChat で怒ってもらう

shell hipchat

踏み台サーバを起動して作業し終わったら落とすって運用をしてるけど、 ときどき落とし忘れているときがあってよくない。

なので対象サーバのポートを一定間隔で確認して HipChat に投げることにした。 これでサーバが起動しっぱなしになっていてもすぐ把握することができる。

Token の取得

通知には対象 Room の ID と Token が必要。

Token は、HipChat にログインして Rooms > 対象Room > Tokens と移動、「Room Notification Tokens」の作成で取得する。 このときに指定した「Label」が HipChat での名前になる。

Room ID もここで参照できるので控えておく。

シェルスクリプトの準備

netcat でポートスキャンして curl で API に投げているだけのベタ書きスクリプト

取得した HipChat の情報を入れて crontab に設定して完了

gist9876555

HipChat への通知

指定ホストの指定ポートが開いていると通知が飛ぶ。 実際の通知はこんな感じ

通知内容を変えたいとき

通知内容をカスタムしたい場合は以下を参照して json の内容を変えればよい

zsh-notify x Growl

zsh mac

導入した

Macで時間のかかるコマンドが終わったら、自動で通知するzsh設定 - Qiita http://qiita.com/kei_s/items/96ee6929013f587b5878

エラった

brew install terminal-notifier してほぼ元記事のままでいけるけど、source で zsh-notify を読みこんだところで以下のエラーが発生した

/Users/moqada/.zsh.d/zsh-notify/notify.plugin.zsh:55: command not found: add-zsh-hook

解決した

まずこいつを zshrc に追記する必要があったらしい

autoload -Uz add-zsh-hook

通知先を Growl にする

まずインストールして

brew cask install growlnotify

.zshrc に以下を追記する

GROWL_NOTIFIER=`which growlnotify`

Brewfile

mac

巷の流れに乗っかってちょっと前に作ってた

dotfiles/Brewfile at master · moqada/dotfiles

参考

AquaSKK とかフォントとか MacVim-Kaoriya とかもちゃんと揃ってて楽だった

本家にプルリした

足りなかった分は自分で Cask 書いて本家リポジトリに追加してもらったりした。簡単で良い

ついでに

Cask 以外の App Store や直インストール分もまとめたくなっちゃったので一応別のテキストに書いた

dotfiles/MacApplications.md at master · moqada/dotfiles

Cask は手軽に色々できて便利すなー

uWSGI x Nginx でユーザをトラッキングする

nginx python

nginx で lighttpd のようにユーザーをトラッキングする方法 - unknownplace.org

uWSGI でこれをやりたいときは proxy_hide_header じゃなくて uwsgi_hide_header を使う。

こんな感じ。

location / {
    include           uwsgi_params;
    uwsgi_proxy_pass  127.0.0.0:5000;
    uwsgi_hide_header X-MyApp-User;
}

HttpUwsgiModule - Nginx Community

uWSGI モジュールとか特にそんなん気にせず使ってた。。

勉強なりました。

スタイルガイドに KSS を導入

grunt css

StyleDocco より kss のほうがナウそうなので使ってみる

インストール

npm install grunt-kss

Gruntfile.js の設定例は以下

kss: {
  options: {
    includeType: 'css',
    includePath: 'path/to/style.css'
  },
  dist: {
    files: {
      'docs/styleguide': ['path/to/source_dir']
    }
  }
}

意味はこんな感じ

  • path/to/source_dir 以下のスタイルシート(scssとか)をパース
  • docs/styleguide ディレクトリにスタイルガイド用の HTML などを生成
    • 自動生成されないので事前に対象ディレクトリを作成しておくこと (2014/06/19追記)
  • path/to/style.css を生成したHTMLで読み込む

kss-node のバグなのか知らんけど .scss なファイルを --sass オプションで指定しても 0バイトな css が生成されてどーにもならなかったのでとりあえず .css を使うことにした

grunt.registerTask('styleguide', ['compass', 'kss']);

Sass にスタイルガイド用のコメントを書く

kss はコメントの記述をパースしてスタイルガイドを生成するらしい

以下、記述例

// A button suitable for giving stars to someone.
//
// description desu yo
// description desu ze
//
// :hover             - Subtle hover highlight.
// .stars-given       - A highlight indicating you've already given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
// .disabled          - Dims the button to indicate it cannot be used.
//
// Markup:
// <button class="button {$modifiers}">Button (button.button)</button>
// <a href="#" class="button {$modifiers}">Button (a.button)</a>
//
// hogefugahogefuga
//
// Styleguide 1.1.
html {
    .button {
        background-color: #CCC;
        &:hover {
            font-weight: bold;
        }
        &.stars-given {
            color: #FFFFCC;
            &:hover {
                color: white;
            }
        }
        &.disabled {
            color: #AAA;
        }
    }
}

スタイルガイド用コメントのルールはなんとなく以下な感じ

  • コメント1行目はタイトルになる
  • タイトルの下に1行開けて文を書くと説明文になる
  • :hover とか .class-name とかを1行ずつ書くとスタイルガイドにHTMLが生成される
  • Markup:: :hover とかで指定した要素を HTML として書き出し
    • {$modifiers} を指定すると指定した .class-name とかが挿入される
  • Styleguide <ref>.: Styleguide の後ろに数字+.を繋げると章番号になる
    • ex. Styleguide 1.2. == Chapter 1.2
  • タイトルや説明文などのセクション？は空行で区切る

grunt-kss は内部で kss-node を実行しているらしいので記法とかの詳細は以下を参照

hughsk/kss-node

実行

grunt styleguide