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

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

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

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

PhoneGapとは？

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

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

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

Middlemanとは？

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

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

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

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

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

準備

前提条件

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

PhoneGapのインストール

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

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

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

Middlemanのインストール

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

gem install middleman

ios-simのインストール

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

brew install ios-sim

middleman-phonegapのインストール

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

git clone git://github.com/pixelsonly/middleman-phonegap.git ~/.middleman/middleman-phonegap

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

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

~/phonegap/phonegap-2.6.0/lib/ios/bin/create new_phonegap_project com.example.cordova_project_name PhonegapProjectName

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

middleman-phonegapを導入する

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

$ cd new_phonegap_project
$ middleman init . --template=middleman-phonegap

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

      create  Gemfile
         run  bundle install --without development test from "."
Fetching gem metadata from http://rubygems.org/........
Fetching gem metadata from http://rubygems.org/..
Resolving dependencies...
Using i18n (0.6.1)
Using multi_json (1.7.2)
Using activesupport (3.2.13)
Using bundler (1.3.2)
Using chunky_png (1.2.8)
Using coffee-script-source (1.3.3)
Using execjs (1.4.0)
Using coffee-script (2.2.0)
Using fssm (0.2.10)
Using sass (3.2.8)
Using compass (0.12.2)
Using tilt (1.3.7)
Using haml (4.0.2)
Using hike (1.2.2)
Using rack (1.4.5)
Using url_mount (0.2.1)
Using http_router (0.10.2)
Using listen (0.7.3)
Using syntax (1.0.0)
Using maruku (0.6.1)
Using rack-test (0.6.2)
Using rb-fsevent (0.9.3)
Using thor (0.15.4)
Using middleman-core (3.0.13)
Using rack-protection (1.5.0)
Using sinatra (1.3.6)
Using padrino-core (0.10.7)
Using padrino-helpers (0.10.7)
Using uglifier (1.2.7)
Using middleman-more (3.0.13)
Using sprockets (2.9.3)
Using sprockets-sass (0.9.1)
Using middleman-sprockets (3.0.11)
Using middleman (3.0.13)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
      create  .gitignore
       exist
      update  .gitignore
      create  README.md
      create  config.rb
      create  phonegap.rb
      create  source/index.haml
      create  source/javascripts/application.coffee
      create  source/javascripts/lib/app.coffee
      create  source/javascripts/lib/config.coffee
      create  source/javascripts/vendor/cordova-2.3.0.js
      create  source/javascripts/vendor/cordova-2.4.0.js
      create  source/javascripts/vendor/cordova-2.6.0.js
      create  source/javascripts/vendor/fastclick.js
      create  source/javascripts/vendor/jquery-1.9.1.js
      create  source/layouts/layout.haml
      create  source/res/icon/ios/icon-57-2x.png
      create  source/res/icon/ios/icon-57.png
      create  source/res/icon/ios/icon-72-2x.png
      create  source/res/icon/ios/icon-72.png
      create  source/res/screen/ios/screen-ipad-landscape-2x.png
      create  source/res/screen/ios/screen-ipad-landscape.png
      create  source/res/screen/ios/screen-ipad-portrait-2x.png
      create  source/res/screen/ios/screen-ipad-portrait.png
      create  source/res/screen/ios/screen-iphone-landscape-2x.png
      create  source/res/screen/ios/screen-iphone-landscape.png
      create  source/res/screen/ios/screen-iphone-portrait-2x.png
      create  source/res/screen/ios/screen-iphone-portrait.png
      create  source/stylesheets/application.sass
      create  source/stylesheets/lib/_mixins.sass
      create  source/stylesheets/lib/_variables.sass
      create  source/stylesheets/lib/common.sass
      create  source/stylesheets/vendor/.gitkeep

middleman server

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

$ middleman server
== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567

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を採用しました。

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