PhoneGap + MiddlemanでサクサクiOSアプリを開発する方法

Pocket

最近HTML5の技術でスマホアプリを開発する試みをしています。

  • 開発時にはブラウザで動作確認したい(簡易サーバを立ち上げておきたい)。
  • コマンド一発でビルドしたい。
  • 開発にはお気に入りのエディタを使いたい。
  • Railsと簡単に連携できると良い。
  • などなど・・・

といった要件で環境の整備を進めているのですが、PhoneGap + Middlemanの組み合わせがなかなか良い感じなので、ご紹介したいと思います。

PhoneGapとは?

HTMLをスマートフォンのアプリとしてビルドしてくれるフレームワークです。

iOS向け、Android向け、WindowsPhone向けなど、様々なプラットフォーム向けにビルドすることができます。

これがあれば一つのソースコードでマルチプラットフォームにアプリを配信することができるんですね!(理論上は)

Middlemanとは?

いくらHTMLでアプリを作るといっても、直にHTMLを書いたり、CSSを書いたり、JavaScriptを書いたりする、ということは、最近はありません。

HTMLの代わりにHaml、CSSの代わりにSass、JavaScriptの代わりにCoffeeScriptを使うなどして、生産性を上げるのが常識ですよね。

とはいえ、こういった開発環境をRailsなどを使うのでなしに0から立ち上げるのはなかなか面倒です。

Middlemanはこういった開発環境構築の面倒を見てくれる便利なツールです。

Middlemanはプラグインを追加することで、よりニッチな構成にも耐えうることができるのが特徴です。今回はmiddleman-phonegapという、そのままズバリなプラグインを使って、サクっと環境をたちあげたいと思います。

準備

前提条件

  • Ruby1.9.3が適切にインストールされていること
  • XCodeの最新版がインストールされていること
    • もしインストールされていない場合は、AppStoreからダウンロードしてインストールしてください。

PhoneGapのインストール

こちらのリンクからPhoneGapの最新版をダウンロードして、~/phonegapといったディレクトリに展開してください。

すると~/phonegap以下に、バージョン付きのphonegap-2.6.0といったディレクトリができるはずです。

PhoneGapのインストールはこれでオッケーです。

Middlemanのインストール

以下のコマンドでGemを入れればオッケーです。

ios-simのインストール

middleman-phonegapから呼び出すので、Homebrewを利用してインストールしておきましょう。

middleman-phonegapのインストール

以下のコマンドを実行して、Middlemanのプラグインディレクトリにmiddleman-phonegapをインストールしましょう。

PhoneGapプロジェクトを作成する

ここまでの準備が終わったら、早速PhoneGapプロジェクトを作成しましょう。プロジェクトを作成するディレクトリまで移動して、以下のコマンドを実行します。

※ サンプルっぽい記述をしている場所は適切な名前に変更して下さい。

middleman-phonegapを導入する

以下のコマンドを実行すると、Middlemanが一気に環境を用意してくれます。

実行時のログは以下のようなかたちです。

middleman server

middleman serverを実行すると、簡易的なWebサーバが立ち上がります。

http://0.0.0.0:4567をブラウザで開くと、source/index.hamlの内容が表示されます。

sourceディレクトリ内の変更を監視してくれるので、sourceディレクトリのファイルを変更しながらリアルタイムで変更を確認できるのが便利ですね。

さらにLiveReloadの仕組みを導入すると、ファイルを変更すると勝手にブラウザも更新してくれるようになります。

LiveReloadのセットアップの仕方は、こちらを参考におこなってみてください。

middleman build

middleman buildを実行すると、sourceディレクトリ内のファイルがiOSアプリとしてビルドされ、iOSシミュレータ上でアプリを確認できます。

iOSアプリとしてAppStoreに公開するためにはXCode上でArchiveとしてビルドする必要がありますが、開発しながらの確認としては、これで十分でしょう。

さらにアプリとしての体裁を整えるために

よりアプリっぽいUIとしてjQuery Mobile、アプリの骨組みとしてbackbone.jsなどを導入していく必要があるでしょう。

なんにせよ、お手軽にスマートフォンアプリ開発環境が手に入るのは、とても嬉しいですね。

こんな感じの試みをされている方が他にもいらっしゃったら、ぜひご連絡を! 一緒に勉強会をやりましょうー!

おまけ:なぜYeomanではなくMiddlemanなのか

Middlemanと似たようなジェネレータとして、node.js上で動作するYeomanがありますが、Middlemanには既にPhoneGapと連携できるプラグインがあったのと、僕がRubyの方が得意なので、Middlemanを採用しました。

何かあっても自分でどんどん手を入れられますからね。