[WebApp][AngularJS] Twitter BootstrapをAngularJS上でdirectiveとして使うライブラリ

Angular JS上で使えるUIライブラリとしてAngular UIというプロジェクトがあるのですが、その中にTwitter Bootstrapの一部ををAngularJSのdirectiveとして使えるようにしたものがあり、便利そうだったので導入してみました。

Angular directives for Twitter's Bootstrap

自分はYeomanを用いて環境を構築していたので、Bowerでインストールしました。
その際の手順を以下に記しておきます。

1. bower.jsonのdependenciesに"angular-bootstrap": "*"を追加

   "dependencies": {
       "angular": "~1.0.7",
       "..,
       "angular-bootstrap": "*"
     },

2. bower installを実行

$ bower install

3. index.htmlでjavascriptファイルを読み込む
   

   <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

4. 'ui.bootstrap'モジュールをインポート
   

   angular.module('HogeApp', ['ui.bootstrap'])

タブやプログレスバーといったよく使うUIパーツがdirectiveとして利用できるので、素早くUIを構築する際には重宝しそうですね。

[Android] AdMobライブラリをアップデートしたらClassNotFoundException

少し前にAndroid4.3が発表され、開発環境も新しくなっているだろうと思い久しぶりにAndroid SDK Managerを立ち上げて最新の状態にしたところ、アプリが起動直後にエラーで落ちるようになってしまいました。

LogCatを見てみるとこんなログが(パッケージ名などは伏せてあります)。

java.lang.ClassNotFoundException: Didn't find class "aaa.bbb.ccc.XyzActivity" on path: DexPathList[[zip file "/data/app/aaa.bbb.ccc-1.apk"],nativeLibraryDirectories=[/data/app-lib/aaa.bbb.ccc-1, /vendor/lib, /system/lib]]

調べてみると、どうやらこれはSDKと一緒にアップデートしたAdMobのライブラリが関係していることがわかりました。

実はこれ、以前にもはまったことがあり、自分への備忘録として解決方法を書いておきます。

AdMobライブラリのアップデート手順

AdMobのライブラリはバージョンが上がる度にjarのファイル名も変更されるため、その都度Java Build Pathも変更しなくてはなりません。

1. Eclipse上でProject - Properties - Java Build PathでLibrariesのタブを選択
2. 古いjarをRemove, そしてAdd External jars...で新しいjarを指定

これでビルドは通るようになるのですが、このままだと上記のエラーが発生してしまいます。

1, 2の手順に加えて、

3. Librariesの隣のOrder and Exportタブを選択
4. 2.で追加したjarのチェックボックスをON

を行うことでエラーが解決しました。

理由はよくわかっていないのですが、AdMobに限らずjarを追加する際は同様の現象が起こると思われますので、次回以降は気をつけようと思います。

[Mac][WebApp] HomebrewからのYeoman環境構築

前回の更新からかなり間が空いてしまいましたが、最近WebAppに興味を持ち始めていて、備忘録の意味も込めて環境構築について書いてみようと思います。

WebAppを開発するにあたっては、ライブラリ・フレームワークの導入や雛形の作成など面倒なことが多々あるのですが、それらを自動化してくれるYeomanというツールがあると知りました。(公式サイトによると、ツールではなくワークフローなんだそうです)

このYeomanを導入するためにはrubyやnodeなどいくつかのソフトウェアが必要で、自分のMacBook Airには導入されていなかったりバージョンが古かったりしたので、最初にHomebrewを用いて必要なソフトウェアの導入から始めました。

その際の手順やはまりポイントなどを以下に書いていこうと思います。
ちなみにOSのバージョンはMountain Lion(10.8.2)です。

Homebrewの導入

HomebrewとはUbuntuにおけるaptみたいなもので、様々なオープンソースソフトウェアのインストール/アンインストールを管理してくれます。

Macでは同様のツールとしてMacPortsというものがあり、自分の環境にも入っていたのですが、最近はHomebrewが流行ってきているらしいので乗り換えてみました。

MacPortsのアンインストール

こちらのページを参考にさせていただきました。

$ sudo port -f uninstall installed
$ sudo rm -rf \
  /opt/local \
  /Applications/DarwinPorts \
  /Applications/MacPorts \
  /Library/LaunchDaemons/org.macports.* \
  /Library/Receipts/DarwinPorts*.pkg \
  /Library/Receipts/MacPorts*.pkg \
  /Library/StartupItems/DarwinPortsStartup \
  /Library/Tcl/darwinports1.0 \
  /Library/Tcl/macports1.0 \
  ~/.macports

Homebrewのインストール

公式ページには最初にいくつかの手順がありましたが、僕の環境ではいきなり下記のコマンドでいけました。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Homebrewでは/usr/local/binの下に実行ファイルがインストールされるので、.bashrcに下記を追加してPATHを通します。

export PATH=/usr/local/bin:$PATH

Yeomanの導入

Yeomanを導入する準備として、Nodeのパッケージ管理システムであるnpm、CSSフレームワークのCompassが必要となります。

Ruby, Nodeのインストール

先ほど導入したHomebrewを用いてインストールします。

rubyは元々入っていましたが、Homebrewで最新のバージョンにしました。

$ brew install ruby
$ brew install node

Compassのインストール

こちらのページを参考にさせていただきました。
Rubyのパッケージ管理システムであるRubyGemsを利用します。

$ sudo gem update --system
$ sudo gem install sass
$ sudo gem install compass

Yeoman環境構築

こちらのページを参考にさせていただきました。

npmを用いて3つのパッケージをインストールします。

$ sudo npm install -g yo grunt-cli bower

Yeomanにはテンプレートがいくつもあるのですが、今回はAngularJSのテンプレを導入しました。

$ sudo npm install -g generator-angular

そして適当なディレクトリを作成し、プロジェクトの雛形を作成します。

$ mkdir <dir>
$ cd <dir>
$ yo angular

いくつか質問されますが、とりあえずどう答えても構いません。

実行してみる

さて、環境が整ったので、試しにアプリを起動してみます。

$ grunt server

しかし、下記のようなWarningが出て失敗してしまいました。

Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.

調べてみたら、どうやらcompassにパスが通っていないということがわかりました。

gemでインストールされるコマンドのパスは下記のようにして調べられました。

$ gem env

この結果の"EXECUTABLE DIRECTORY"にcompassが存在していたので、パスを通して再び grunt server を実行してみると、無事に起動しました。

YeomanはLiveReloadやファイルの圧縮など、便利な機能がたくさんありそうなので、これから色々と試してみようと思います。