Tech Sketch Bucket of Technical Chips by TIS Inc.

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ①環境構築&サーバ側の実装編 ~

Pocket

HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。
本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。

まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。


はじめに

「スマートフォンやタブレット用のWebアプリを作りたい!!...でも、なにで作ればいいのかわからない。。」

こんなこと思ったことありませんか?

最近は、HTML5 + JavaScript + CSS3を使うことでネイティブっぽくてリッチなスマートフォン用Webアプリを作ることが可能になりつつあります。しかし、「JavaScriptフレームワークやライブラリ、CSSフレームワークなどは何を使えばいいのか?」や、「クライアント側にどのような機能を持たせるべきか?」など、考え始めると頭が痛くなりそうです。
また、JavaScriptフレームワークについても、2013年7月時点では「Webアプリならこれ!」という組み合わせは(タブン)存在していないため、各々のアプリケーションの特性に合わせてフレームワークを選ぶ必要があるのが現状です。
また、Webアプリを作る際にはクライアントMVCっぽい仕組みを持たせたいけど、世の中に出回っているJavaScriptフレームワークを比較/検討するほど時間はない。。という人もいると思います。

そんなみなさまのために、比較的有名なJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を組み合わせたネイティブっぽいWebアプリの作成方法をお伝えしたいと思います。
今回の組み合わせが一番というわけでは(タブン)ないのですが、Webアプリ作成手法の選択肢の1つになると思います。

Webアプリのアーキテクチャ

今回作成するWebアプリのアーキテクチャは以下のとおりです。

Backbone-jqm_architecture.png

サーバ側はRESTfulなAPIを用意しJSON形式のデータを出力できるようにします。
クライアント側にはJavaScriptフレームワークのBackbone.jsを導入します。これによりModelとViewが分離可能になり、
Modelでサーバとのデータのやり取りを、ViewでDOMの構築を実施するようになります。また、画面の表示にはjQuery Mobileを用いることでネイティブアプリのような見た目にしました。完成したWebアプリはレスポンシブWebデザインになっており、iPhoneでもiPadでも画面サイズに最適化された形で表示されます。また、Webアプリケーションなので更新を即時反映することが可能です。

ちょっと長くなってしまうのですが、以下の4回に分けて実装方法を解説していきます。

第1回 環境構築&サーバ側の実装

今回の記事です。Ruby on Railsを使ってRESTfulなサーバを構築します。

Backbone_Server.png

今回のように「Backbone.js」や「jQuery Mobile」などクライアント側で画面の見た目を制御するようなフレームワークを採用した場合、サーバ側では見た目(HTMLやDOMの構築)を定義せずRESTfulなAPIを用意しデータのやりとりをする機能のみ用意すればよくなります。
そのため、今回は簡単にRESTfulなAPIが作成できるRuby on Railsを選択しました。

第2回 Backbone.jsを使ってWebアプリを作ってみる

Backbone.jsを使って典型的なCRUD機能を持つブログっぽいものを作ってみます。

画面遷移.png

Backbone.jsだけで作っているのと、CSSをまったくいじっていないため、UIが残念なのはご愛嬌ということで。

第3回 Backbone.jsとjQuery Mobileを組み合わせてWebアプリを作ってみる

UIの部分にjQuery Mobileを適用してみました。

backbone-jqm-2.png

jQuery Mobileっぽさが全面に出ていますが、
ネイティブっぽい見た目になっていることがわかると思います。

backbone-jqm-3.png

レスポンシブWebデザインにも対応しているため、幅を縮めると上記のように見た目も変わります。

第4回 Backbone.jsとjQuery Mobileの組み合わせをもうちょっと使い込んでみる

Backbone.jsとjQuery Mobileを単純に組み合わせるだけだと、jQuery Mobileの機能の一部が使えなくなってしまいます。(詳細は第3回で解説します)
そのため、Backbone.jsとjQuery Mobileを橋渡しするライブラリである「jqmized-backbone」を作成しました!
最終回はこの「jqmized-backbone」について解説します。

jqmized-backboneを使うことで、jQuery Mobileのアニメーションなどを簡単に実装できるようになります。
Backbone.jsの実装方法とほぼ同じ方法で作成できることがわかると思います。

以下にサンプルソースがありますので、「記事はいいからソースはよ!」という方はご参照ください。
今回作成したサンプルは こちら
公開しているjqmized-backboneは こちら

使用したミドルウェア/ソフトウェア

今回作成したWebアプリで使ったミドルウェア/ソフトウェアは以下のとおりです。

ミドルウェア/ソフトウェア/ライブラリ バージョン 備考
Nginx 1.2.9 Webサーバ
Unicorn 4.6.3 アプリケーションサーバ
Ruby 1.9.3p448 Ruby本体
rbenv 0.4.0-49-g8b04303 Rubyのバージョン管理ツール
Ruby on Rails 3.2.13 Ruby用フレームワーク
sqlite3 1.3.7 sqliteを使うためのGem
Backbone.js 1.0.0 JavaScriptフレームワーク。第2回で使用
Underscore.js 1.5.1 Backbone.jsを使うために必要なJavaScriptユーティリティライブラリ。第2回で使用
backbone-on-rails 1.0.0.1 Rails上でBackbone.jsを使うためのGem。第2回で使用
jquery-rails 3.0.4 Rails上でjQueryを使うためのGem。第2回で使用
jQuery Mobile 1.3.1 JavaScript UI用フレームワーク。第3回で使用
jqmized-backbone 0.1 Backbone.jsとjQuery Mobileの橋渡し用ライブラリ。第4回で使用

実装

環境構築

早速環境を構築していきましょう。今回はAWS EC2の「Amazon Linux AMI 2013.03.1」に環境を構築していきます。
何も設定していない状態からインストールする手順を記載しているので、細かい部分も多いと思います。
環境構築なんて知ってるからいらないよ!って人は飛ばしてください。

必要なモジュールのインストール

今回、サーバ側はRuby + Ruby on Railsで作成しますが、
バージョン管理ツールにはrbenvを使いました。これらを使うために必要な、gitやgccなど必要なものは最初にインストールしておきます。

rbenvのインストール

次はrbenvをインストールします。

/etc/profile.d以下に「rbenv.sh」を作成

rbenv.sh

・ruby-buildのインストール

これでrbenvが動作するようになっているはずです。
以下のコマンドを実行すると、rbenvでインストールできるモジュールの一覧が出力されます。

Rubyのインストール

次に、Rubyをインストールしましょう。

上記コマンドで確認してみたところ、デフォルトでもRubyはインストールされているようです。
ただ、今回はバージョン1.9系を使いたいので新たにインストールを実施します。

1.9系では「1.9.3-p448」が一番新しいようなので、これをインストールしたいと思います。
インストールは「rbenv install XX」というコマンドを実行するだけで簡単にインストールすることができます。

Rubyのインストールはかなりの時間がかかるため、可能であれば、インスタンスのTypeを「T1.small」や「T1.middle」にあげておくと作業がスムーズに進むと思います。

インストールが完了したら、通常使用するRubyを
1.8.7から1.9.3に変更しておきましょう。

rbenvで新しいバージョンのrubyをインストールする場合や、
コマンド付きのgemをインストールする場合は「$rbenv rehash」を実行する必要があります。
バージョンを確認すると、1.9.3が使用されていることがわかると思います。
これで、rubyのインストールが完了です。

Ruby on Railsのインストール

Ruby on Railsをインストールしましょう。
今回はRuby on Railsのバージョン3.2.Xを使いたいので、バージョンを指定しています。

プロジェクトの作成と関連するGemのインストール(Ruby on Rails, therubyracer, sqlite, unicorn)

Railsのインストールが終わったら、プロジェクトの作成をしておきましょう。
今回は /var/www/develop/ 配下にプロジェクトを作成します。
権限などはプロジェクトに合わせて適切に付与してください。

次にGemをインストールします。
プロジェクト直下に「Gemfile」というファイルがあるのでこれを修正しましょう。

therubyracerはJavaScriptのv8エンジンをRubyから使えるようにするgemです。
Gemfileを修正したら以下のコマンドを実行します。

これで、プロジェクトの作成と必要なGemのインストールは終了です。

Nginxのインストール

WebサーバはNginxを使いました。
インストールはyumで一発です。

簡単ですね。

設定ファイルが、/etc/nginx/nginx.conf にあるので、これを編集しておきましょう。

Nginxを起動しておきます。

Nginx と Unicornを連携させる

NginxとUnicornを連携させます。
/var/www/develop/restTest/config 配下に unicorn.rb というファイルを作成し、
Unicornに関する設定を記載します。

今回の設定は、以下のサイトを参考にさせていただきました。
ありがとうございます。

http://blog.livedoor.jp/sasata299/archives/51810645.html
http://qiita.com/y_uuki/items/118bce7b3a4acb545d79

次に、サブディレクトリでサービスを提供できるようにしましょう。
/var/www/develop/restTest/config.ruを編集します。

config.ru

ブラウザで先ほど作成したプロジェクトにアクセスしたときに以下のような画面が表示されれば
正しく設定できています。
URL:http://example.com/restTest
nginx_unicorn.png

サーバ側の実装

Ruby on Railsを使って、サーバ側の実装を進めていきます。

RESTful APIの実装

先ほど作成したプロジェクトにRESTful APIを実装していきます。
scaffoldを使うと、CRUD機能を持つシンプルなWebアプリケーションが作成できます。
作成されたWebアプリケーションがRESTfulなAPIを持っているため、不要なファイルを削除することで、
簡単にRESTful APIを持つサーバの実装することが可能です。

以下のようにCRUD機能を持ったWebアプリが作成されています。

blogs2.png

不要なファイルの削除

scaffoldで作成されたファイルの中で今回使用しないものを削除します。

動作確認

scaffoldによって、RESTfulなAPIが実装されているため、
「http://example.com/restTest/blogs.json」等でJSONが返戻されることが確認できます。

restJson.png

おわりに

どうでしたか?
Ruby on Railsは本来画面を作成するためのフレームワークですが、scaffoldを使うととても簡単にRESTfulなAPIが実装できるためサーバ側の実装に使用しました。
純粋にRESTfulAPIを実装したい場合は sinatra などを使用するのもよいでしょう。
また、今回作成するアプリケーションは、クライアント側にデータの処理やDOMの構築を任せているためサーバ側の実装がとてもシンプルになっています。

次回は、Backbone.jsを使ったクライアント側の実装を進めていきます。

おたのしみに!

エンジニア採用中!私たちと一緒に働いてみませんか?