Tech Sketch Bucket of Technical Chips by TIS Inc.

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ③Backbone.js + jQuery Mobile編 ~

Pocket

前回 はBackbone.jsを使ったWebアプリを作ってみました。
ただ、見た目に関することを何もしていなかったのでいまいち(?)見た目が美しくありませんでした。

というわけで、今回はBackbone.jsで作成したWebアプリにjQuery Mobileを組み合わせることでネイティブっぽい見た目にしていきたいと思います。


はじめに

Webページの見た目を簡単にモバイル対応させるためにはCSSフレームワークであるbootstrapや
JavaScirptフレームワークであるjQuery MobileやSencha Touchなどを使うことが多いと思います。

本稿では、ネイティブっぽいWebアプリを作成することを目標にしているため、
ネイティブに近いUIツールを使えるjQuery Mobileを用いて画面の見た目を変更していきたいと思います。

アーキテクチャ

Backbone.jsとjQuery Mobileを組み合わせた場合のアーキテクチャは以下のようになります。

Backbone-jqm_architecture_3.png

前回 作成したBackbone.jsのみを使用した場合と比べると、描画する部分にjQuery Mobileを使っている点が異なります。URLの検知やDB連携などは、前回同様Backbone.jsを用います。

Backbone.jsとjQuery Mobileを一緒に使う方法については、jQuery Mobileの 公式サイト をご参照ください。

環境構築

それでは、環境を構築していきましょう。

ライブラリの配置

前回作成したbackboneSampleをコピーして新たにbackbonejqmSampleを作っていきましょう。

前回同様、backbonejqmSampleにアクセスできるようにnginxに設定を追加しておいてください。
jQuery Mobileを使うために必要なファイルをダウンロードします。

次に、必要なファイルを配置していきます。

各種設定

jQuery Mobileの公式サイトに、Backbone.jsとjQuery Mobileを連携させる方法の記載があります。

http://view.jquerymobile.com/1.3.1/dist/demos/examples/backbone-require/index.html

上記サイトに記載のとおりjQuery Mobileの機能を一部を停止します。jquery.mobile-init.jsというファイルを新しく作成し、そこにjQueryMobileの一部機能を停止するコードを書いておきます。

jQuery Mobileの機能を停止するためのスクリプト(jquery.mobile-init.js)の作成

jquery.mobile-init.js

application.jsの修正

必要なライブラリやスクリプトをapplication.jsから読み込まれるようにします。

/var/www/develop/backbonejqmSample/app/assets/javascripts/src/application.js

以下の二行をbackboneの下に追加

動作確認

以下のページにアクセスすると、必要なライブラリが読み込まれていることが確認できます。

jqmLibrary.png

/app/assets/stylesheets/libs/ 配下に格納したjquery.mobile-1.3.2.cssは、
Asset pipelineで自動的に読み込まれています。

実装

では実際に実装を進めていきましょう。
機能や画面遷移は前回作成したbackboneSampleと同じものを使い、
jQuery Mobileで見た目を変えていきます。

そのため、RouterとTemplateが主な変更点になります。

Router

まずはRouterを見ていきましょう。

BackboneSampleからの変更点

Backbone.jsのみを使用したアプリケーションからの変更点は以下のとおりです。

  • UIをjQuery Mobileライクにするために、$.mobile.changePage()を呼び出す

jQuery Mobile公式サイトによると
Routerの中で「$.mobile.changePage()」を呼び出すことで
jQuery MobileのUIを利用した画面を表示させることが可能になります。
公式サイトから抜粋したものは以下のとおりです。

今回はjQuery Mobileの機能である「linkBindingEnabled」や「hashListeningEnabled」機能を
止めているため、URLの変更をBackbone.jsのRouterで検知し画面の表示機能を呼び出すようにします。

blogs_router.js

全体は以下のようになります。
UIをjQuery Mobileライクにする$.mobile.changePage()や不要なDOM要素を削除するロジックなどが増えていることがわかると思います。

Template

次は、Templateです。
Templateに実際のHTMLコードが記載されているため、
ここをjQuery Mobileの形式にしていきます。

今回はindex.jst.ejsとedit.jst.ejsを見ていきましょう。

index.jst.ejs

edit.jst.ejs

基本的にはHTMLをjQuery Mobile用のタグに置き換えているだけで機能などはほとんど追加していません。
ただ、edit.jst.ejsの一番下に削除確認用のダイアログをjQuery Mobileの形式で作成してありますが、これを表示する場合だけはJavaScriptにロジックを追加する必要があります。

edit.js

jQuery Mobile単体で使用している場合は、aタグを記載するだけでダイアログページにページ遷移してくれますが、今回jQuery Mobileの機能を止めてしまっているため、JavaScript側で対応が必要になってしまいました。

動作確認

完成したものの動作確認をしてみましょう。前回作成した装飾なしのWebアプリと見た目を比較してみましょう。

(Backbone.jsのみ)
backbone-gamensenni.png

(Backbone.js + jQuery Mobile)
backbonejqm-gamensenni.png

Backbone.jsのみ装飾なしで作ったWebアプリと比べるとかなりネイティブっぽい感じになっていることがわかると思います。
(ネイティブっぽいというよりjQuery Mobileっぽいかもしれませんが。。)
このようにテンプレートを書き換えとちょっとしたJavaScriptコードの追加でjQuery Mobileっぽい見た目にすることができました。

おわりに

今回はBackbone.jsとjQuery Mobileを組み合わせたWebアプリの作成手法してみました。
この場合、Backbone.jsでDBとのやり取りやViewのロジックを記載し、jQuery Mobileで見た目の変更ができます。これにより構造を持たせた状態でネイティブのような見た目をもつWebアプリを作成することが可能です。

しかし、jQuery Mobile単体では実現できていたことがBackbone.jsを組み合わせることによって実装が大変になる機能もありました。例えば、以下の点については実現するためにJavaScriptに手を入れる必要があります。

  • 同一DOM要素を増やさないために消去を行うDOM操作が必要になる
  • 画面遷移時のtransition設定を入れる場合は画面遷移前の状態を保持しておく必要がある
  • 1つのページで複数の画面を持つ(ダイアログなど)場合、Viewに処理を書く必要がある。

上記の課題については、今回のような小規模なアプリであればあまり問題にはなりませんが、大規模なアプリを作成する場合は共通して修正できる箇所については共通のライブラリにまとめておく方がよいと思われます。

そこで、Backbone.jsとjQuery Mobileの橋渡しをしてくれるライブラリである「 jqmized-backbone 」を作成しました!

このライブラリを使用することで、jQuery Mobileの使用感はそのままにBackbone.jsを組み合わせたWebアプリを作成することが可能になります。

最終回である次回は、この「 jqmized-backbone 」の使い方について解説します!

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