febc技術メモ

Japanese version of http://febc-yamamoto.hatenablog.com

javascriptMVC入門 その1

 

javascriptMVCとはクライアントサイドでのMVC開発を強力にサポートしてくれるフレームワーク+ツールセットです。

http://javascriptmvc.com/

 

javascriptMVCの主な構成要素は以下5つ

 ・javascriptMVC本体

 ・StealJS:本家によると「A code manager」とのこと。依存性管理やコードクリーニング、デプロイなど

 ・jQueryMXjQueryの拡張

 ・FuncUnit Webテストフレームワーク

 ・DocumentJS ドキュメンテーションエンジン。javadocrdocみたいな感じ

 

なにぶん日本語の解説が少ない+本家のドキュメントが若干散らかっている部分があるんで、

チュートリアルαとして本家のTODOアプリみたいなのを作りながら解説します。

 

 

<作るアプリの概要>

 ・短い文章をメモとして登録/更新/削除/一覧ができる

 ・メモはセッションストレージに保存

 ・jQueryMobileを利用してモバイル用UIとして作成

 

実はCRUDをするだけならscaffold出来るんですが、、わかりやすさの為にあえて作ります。

また、javascriptMVCLESSCoffeeScriptもサポートしているんですが、

今回はシンプルにするために使いません。

 

<インストール&環境準備>

zipをダウンロードするか、gitで取得してくるか。

今回はお手軽にzipをダウンロードします。

http://javascriptmvc.com/

の画面右上の方の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.

 

この説明でキャメルケース渡す方が悪いっちゃ悪いと思いますが、、

うまいこと対応してほしいもんです。

 

という訳で、名前に気をつけつつアプリ作成に入ります。

 

1:アプリケーションのひな形作成

まずはappジェネレータを使ってひな形を作ります。

先ほども触れた通り、指定するアプリ名は「simple_memo」とし、以下のコマンドを実行します。

 

$./js jquery/generate/app simple_memo

 

出来上がるファイルは、、

simple_memo/             // アプリのディレクト

  simple_memo.css        // 当アプリのcssファイル

  simple_memo.html       // 当アプリのメインhtmlファイル

  simple_memo.js     // 当アプリのメインjsファイル。主に他のファイルの読み込みを行う

  docs/                  // APIドキュメントの生成先ディレクト

  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のグローバル設定の為に、

1:jQuery本体の読み込み

2:jQueryMobileのグローバル設定用イベントを登録

3: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をブラウザで開いて、cssjsが読み込めているか確認しておきます。

 

<余談>

なお、simple_memo.html中の※1の部分ですが、これがないと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"のエレメントを追加しておけば大丈夫だったんで、後で調査してみます。

 

長くなりそうなんで、続きは次回。