javascriptMVC入門 その１
javascriptMVCとはクライアントサイドでのMVC開発を強力にサポートしてくれるフレームワーク＋ツールセットです。
javascriptMVCの主な構成要素は以下５つ
・javascriptMVC本体
・StealJS：本家によると「A code manager」とのこと。依存性管理やコードクリーニング、デプロイなど
・jQueryMX：jQueryの拡張
・FuncUnit ：Webテストフレームワーク
・DocumentJS ：ドキュメンテーションエンジン。javadocやrdocみたいな感じ
なにぶん日本語の解説が少ない+本家のドキュメントが若干散らかっている部分があるんで、
チュートリアル＋αとして本家のTODOアプリみたいなのを作りながら解説します。
＜作るアプリの概要＞
・短い文章をメモとして登録/更新/削除/一覧ができる
・メモはセッションストレージに保存
・jQueryMobileを利用してモバイル用UIとして作成
実はCRUDをするだけならscaffold出来るんですが、、わかりやすさの為にあえて作ります。
また、javascriptMVCはLESSやCoffeeScriptもサポートしているんですが、
今回はシンプルにするために使いません。
＜インストール＆環境準備＞
zipをダウンロードするか、gitで取得してくるか。
今回はお手軽にzipをダウンロードします。
の画面右上の方のDownloadから取得します。
zipをダウンロードしたら展開し、そのディレクトリへ移動。
/jmvcに配置
ついでにApacheのドキュメントルートにシンボリックリンクを作成しておきます。
これで「http://localhost/jmvc/」でjavascriptMVCを配置したディレクトリが参照できる。
$ cd /var/www/
$ sudo ln -s /jmvc jmvc
＜アプリ作成＞
今回作るアプリの名前は「SimpleMemo」とします。
これにより、
・アプリのルートディレクトリ名は「simple_memo」
・モデルやコントローラなどの属するルート名前空間は「SimpleMemo」
となります。
この後使う「app」ジェネレータが「SimpleMemo」みたいな
キャメルケースを渡すことが出来ないため、注意が必要です、、
本家ドキュメントにもちょっとだけ注意事項が触れられていますが、
この現象、バグっぽいんですよね。
引用：本家ドキュメント
http://javascriptmvc.com/docs.html#!steal.generate
app
Creates a JavaScriptMVC application structure.
js jquery/generate/app path/to/app [OPTIONS]
- path/to/app - The lowercase path you want your application in. Keep application names short because they are used as namespaces. The last part of the path will be taken to be your application's name.
この説明でキャメルケース渡す方が悪いっちゃ悪いと思いますが、、
うまいこと対応してほしいもんです。
という訳で、名前に気をつけつつアプリ作成に入ります。
１：アプリケーションのひな形作成
まずはappジェネレータを使ってひな形を作ります。
先ほども触れた通り、指定するアプリ名は「simple_memo」とし、以下のコマンドを実行します。
$./js jquery/generate/app simple_memo
出来上がるファイルは、、
simple_memo/ // アプリのディレクトリ
simple_memo.css // 当アプリのcssファイル
simple_memo.html // 当アプリのメインhtmlファイル
simple_memo.js // 当アプリのメインjsファイル。主に他のファイルの読み込みを行う
fixtures/ // AJAXリクエストのシミュレーション用js
funcunit.html // FuncUnitを使ったテストの実行用ページ
models/ // モデル＆データレイヤ
qunit.html // qunitによるテスト実行用ページ
scripts/ // コマンドライン用スクリプト(中身の説明は省略)
test/ // テスト用js
確認のため「http://localhost/jvmc/simple_memo/simple_memo.html」をブラウザで確認。
念のためリンク切れなどないかFireBugなどで確認しておく。
まずはsimple_memo.htmlを開いて、不要なものを消しちゃいます。
今のところ重要なのは以下のscriptタグ。
<script type='text/javascript'
src='../steal/steal.js?simple_memo'>
</script>
以外は消しちゃいましょう。こんな感じになってればOK。
ちなみにlang="en"になってるんで"ja"に変更しましょう。ついでにcharsetも追加します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>simple_memo</title>
</head>
<body>
<div data-role="page"></div> <!-- ※１ -->
<script type='text/javascriptpt'
src='../steal/steal.js?simple_memo'>
</script>
</body>
</html>
気になる'steal.js?simple_memo'ですが、?以降をアプリケーション名として解釈し、
メインのjsファイルを読み込んでくれます。
読み込み対象はアプリケーション名.jsファイルです。
今回読み込まれるのは「simple_memo.js」となります。
ではsimple_memo.jsをのぞいてみましょう。
steal(
'./simple_memo.css', // application CSS file
'./models/models.js', // steals all your models
'./fixtures/fixtures.js', // sets up fixtures for your models
function(){ // configure your application
})
steal関数にファイルパスと関数を渡しています。
このsteal関数は単純に、渡されたパスのファイル読み込み＋渡された関数処理を行うだけです。
読み込み順序なんかがある場合は以下のように書きます。
steal(
// ファイルパスや関数・・・(1)
).then(
// (1)が完了した後に実行される。
// (1)と同じくファイルパスや関数を渡す ・・・(2)
).then(
// (2)が完了した後に実行される。
// (1)と同じくファイルパスや関数を渡す
)
現状のsimple_memo.jsではCSSファイルやその他のJSファイルなんかを読み込んでいますね。
今回jQueryMobileを使うため、必要ファイルを追記します。
jQueryMobileのグローバル設定の為に、
１：jQuery本体の読み込み
２：jQueryMobileのグローバル設定用イベントを登録
３：jQueryMobileの読み込み
となるようにします。
steal(
'./simple_memo.css', // application CSS file
'./models/models.js', // steals all your models
'./fixtures/fixtures.js', // sets up fixtures for your models
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css', // jQueyMobile用CSS
'http://code.jquery.com/jquery-1.7.2.min.js', // jQuery本体
function(){ // configure your application
}
).then( // グローバル設定用イベント
function(){
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = '読み込み中';
$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
$.mobile.selectmenu.prototype.options.closeText= '閉じる';
$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
$.mobile.page.prototype.options.backBtnText = '戻る';
});
}
).then(
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css', // jQueryMobile本体
)
確認のためsimple_memo.htmlをブラウザで開いて、cssやjsが読み込めているか確認しておきます。
＜余談＞
なお、simple_memo.html中の※１の部分ですが、これがないとdev.jsの読み込みエラーが発生します。
このエラーについてgoogle先生に聞いてみると、、、
http://forum.javascriptmvc.com/topic/integration-jquery-mobile-js-mvc
http://forum.javascriptmvc.com/topic/jquery-mobile-or-zeptojs
こんなのが。おんなじ症状っぽいですね。
何らかの条件下でjqueryMobileの初期化処理が行われるとエラーになるっぽい。
とりあえずdata-role="page"のエレメントを追加しておけば大丈夫だったんで、後で調査してみます。
長くなりそうなんで、続きは次回。
