Tech Sketch Bucket of Technical Chips by TIS Inc.

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

Pocket

前回 はBackbone.jsとjQuery Mobileを組み合わせることで、ネイティブアプリのような見た目のWebアプリを作成しました。
しかし、Backbone.jsとjQuery Mobileを組み合わせるためにjQuery Mobileの一部機能を止めているため、「画面遷移時のトランジション」や「1つのHTMLファイルに複数のページ情報を持たせる」ことを実現しようとするとJavaScript実装が増えてしまうという問題がありました。そこで、今回はこれらを解決する「jqmized-backbone」について解説します。 


はじめに

今まで3回にわたりBackbone.jsとjQuery Mobileを組み合わせたWebアプリ作成方法を見てきました。
しかし、Backbone.jsとjQuery Mobileを一緒に使う場合、jQuery Mobileの一部機能を止めていることによる弊害(...はイイスギかもしれませんが)があることがわかりました。

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

jqmized-backboneは「jQuery Mobileでできていた画面遷移関係の機能補完」の他にも、「ダイアログなどの画面を共通化する機能」や「バリデーションチェックの重複」など、あると便利な機能も追加実装してあります。

そこで、Backbone.js + jQuery Mobileの最終回として、 前回 作成したWebアプリをjqmized-backboneを利用し修正していきながら、このライブラリでできることを見ていきたいと思います。

環境構築

プロジェクトのコピー

前回作成したWebアプリであるbackbonejqmSampleをコピーして新しくjqmized-backboneSampleを作成します。

いつもどおり、/etc/nginx/nginx.confに設定を追加してUnicornも起動しておいてください。
*詳細は サーバ構築編 をご参照ください。

jqmized-backboneのダウンロードと配置

jqmized-backboneをダウンロードします。
また、jqmized-backboneを使うには backbone.validation が必要なので、合わせてダウンロードしておきましょう。

application.jsに今回追加したJavaScriptを読み込む設定を追記しておきます。
backbone.jsを読み込む設定の下に以下の2行を追記します。
app/assets/javascripts/src/application.js

これで準備は完了です。

実装

それでは実装を見ていきましょう。
今回は以下の3点について解説します。

  • 画面遷移に関する機能
  • 画面の共通化
  • 項目単位でのバリデーション

画面遷移に関する機能

jqmized-backboneは、「画面遷移に関する機能」や「リンクを書くだけでダイアログを表示する機能」を持っているため、以下のような記載で画面遷移やダイアログ表示をさせることが可能です。

画面遷移するためのコード例

(前回のコード)

(今回のコード)

前回 のソースコードと比較すると、とてもすっきりしていることがわかると思います。

ダイアログを表示するためのコード例

次はダイアログを表示するためのコード例です。

(前回のコード)
[html]

[JavaScirpt]

(今回のコード)
[html]

前回は、ダイアログを表示させるためにrenderの中に画面遷移させるためのコードを書いていましたが、それが不要になっているため簡単になっていますね。

このように、jqmized-backboneを使用するとjQuery Mobileの機能を止めて使えなくなっていた画面遷移の機能をjQuery Mobileっぽく使うことが可能です。

しかも、 前回 では実装できなかった、データ保存後のTransition設定も、以下のように遷移前の画面の情報を持たせてあげるだけで実装できます。

遷移元の画面を渡してあげるだけで、遷移先の画面から戻ってくる場合に遷移時と逆方向のTransitionが動作します。このように、前回JavaScriptで頑張っていた部分をjqmized-backboneが処理してくれるため、画面遷移関係のコードがすっきりしていることがわかると思います。

画面の共通化

次に画面の共通化を見ていきます。
例えば、データ削除ボタン押下時に確認用のダイアログを表示することはよくあります。確認用のダイアログを表示する場合、テンプレートごとにに同一のダイアログ用HTMLを記載することになります。
今回のWebアプリ程度の規模では気になりませんが、大規模なWebアプリではダイアログが必要な個所すべてにHTMLを記載するのは大変なうえに、もし変更があった場合を考えるとやる気がしません。

そこで、jqmized-backboneでは、テンプレートに<%= this.partial("XXX/XXX", dialog)%> と記載をすることで、外部テンプレートファイルを読み込めるようにしました。

これにより、共通画面を作ることが可能になります。
では早速やってみましょう。

共通のテンプレート作成

まずは、共通なテンプレートを格納する場所を作成します。

作成したcommonフォルダの配下にconfirm.jst.ejsを作成します。

Templateの修正

編集画面(edit.jst.ejs)でcommon/confirm.jst.ejsを呼び出します。

*backbonejqmSampleでダイアログのHTMLを記載していた部分は削除しておきます。

Viewにてダイアログに値を設定する

ダイアログのテンプレートを標準化したため、タイトルやメッセージなどを設定する必要があります。
これは、Viewのrenderメソッドに記述します。

app/assets/javascripts/src/views/blogs/edit.js

このようにView側に表示する文言やClass、IDを渡してあげるだけで、
ダイアログを表示することが可能になります。

jqmized-backbone-dialog.png

上図のようにViewで設定した文言がダイアログに表示されています。

項目単位でのバリデーション

PC用のWebサイトでは登録ボタン押下時にエラーチェックを実施し、エラーがあった場合は指摘箇所にエラーを表示、修正を促すようなUIはよくありますが、スマートフォンのように画面に情報量をあまり表示できないようなデバイスでは、登録ボタン押下後にエラーを指摘されたのでは入力する気が失せてしまうかもしれません。

jqmized-backboneは各項目ごとにバリデーションチェックが簡単に実装できますので、最後にこの方法を見ておきましょう。

Modelにバリデーションを追加

まずは、Modelにバリデーションを追加しておきましょう。
今回は、Author, Title, Bodyすべてに入力必須(required:true)をつけてみました。

app/assets/javascripts/src/models/blog.js

Viewにeventを追加

バリデーションチェックなので、編集画面にチェックロジックを追加していきましょう。
まずは、フォーカスアウト時のイベントを拾えるようにしておきます。

app/assets/javascripts/src/views/blogs/edit.js

次に、changeメソッドです。

これで、フォーカスアウト時にバリデーションチェックを実施し、条件を満たしてなければエラーを表示できるようになりました。

jqmized-backbone-validation.png

最後に「保存」ボタン押下時にも同じくエラーメッセージを削除しておきましょう。

保存ボタン押下時には、自動的に全項目のバリデーションが行われるため、
エラーが発生している場合はエラーを表示、エラーが発生していなければ全てのエラーが消えるようになります。
これで、フォーカスアウト時とボタン押下時にバリデーションチェックを実施し、エラーが発生している項目が赤く表示され、ツールチップでエラー内容が表示されるようになります。

おわりに

ここまで4回に分けてBackbone.jsとjQuery Mobileを組み合わせたWebアプリ作成方法を解説をしましたが、ようやくそれっぽいWebアプリを作成することができました。
今回はBackbone.jsとjQuery Mobileの組み合わせてWebアプリを作成してみましたが、各フレームワークを使うことは簡単でも、「フレームワークを組み合わせる」ことは思っていた以上に大変でした。

大規模なWebアプリの開発があればJavaScirptフレームワークを検討することもあると思います。場合によっては、複数のフレームワークを組み合わせることもあると思います。この時、流行っているからという理由だけでJavaScriptフレームワークを決定すると痛い目を見る可能性があります。そのため、JavaScriptフレームワークを使うべきなのか、使うとしたらどれを使うのかはできるだけ事前に調査しておく必要があるでしょう。

JavaScriptフレームワークは多数公開されており、それぞれ特徴がありとても魅力的です。
今回の連載がJavaScriptフレームワークを使った開発の一助になれば幸いです。

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