すると、次のような画面が表示されます。ビューの使い方はいたって簡単です。テンプレートファイル内では、controllerでActionContext(controller内のac変数)のdoneメソッドに渡したオブジェクト内の変数(プロパティ)を表示できます。上記の例で使用した表示方法は次の通りです。変数名を波括弧2つでくくる例えば、companyを使いたいなら、{{company}}とします。この場合、変数を自動的にエスケープしてくれます。XSS対策にはもってこいの機能です。変数名を波括弧3つでくくるエスケープなしで表示します。HTMLタグを表示できます。上記の例では、img_htmlを{{{img_html}}}として出力しています。繰り返し構造を使用する波括弧2つと、#と/を使います。employees配列を表示する場合、{{#employees}}〜{{/employees}}の間では、各要素の変数を順番に使用できます(forやforeachと同じ)。切替ビューをかなり簡単に作れることが分かったと思います。Mojitoではデバイス毎のビュー切替にも対応しています。index.mu.hmlをコピーしてindex.iphone.mu.htmlを作ってみましょう。これでiPhoneからアクセスすると、index.iphone.mu.htmlが使用されます。Mojitoでは、デバイスの認識に2つの方法を提供しています。ユーザエージェントとGETクエリです。ブラウザから確認する場合には後者の方法を使います。GETクエリにdevice=iphoneと入れると、iphoneのテンプレートを使用してくれます。index.iphone.mu.htmlとindex.mu.htmlを区別するために、何らかの文字(iPhoneなど)を追加しておきます。アクセスしてみましょう。iPhoneという文字が表示されていると思います。実際にiPhoneで接続できるなら、接続してみましょう。このビュー切替はファイル名により制御されています。ファイルの命名規則は次の通りです。{コントローラのメソッド名}.[{デバイス名}].{レンダリングエンジン名}.htmlindex.mu.htmlのmuはMustasheの頭文字2つです。デバイス名は省略可能です。指定できるデバイス名は現在のところ以下の通りです(サポートデバイス)。index.blackberry.mu.htmlHTMLFrameMojit上記のテンプレートでは、HTMLの一部のみを記述し、実際にそれだけを出力しています。実際にHTMLのソースを見ると、DIVタグとその中身だけが表示されます。class="employees">...</div></div>HTMLタグ、BODYタグ、必要なJavascriptファイルなどをテンプレートに記述することも可能です。Mojitoではもっと便利な機能を提供してくれています。HTMLFrameMojitを使えば、HTMLの大枠や、javascriptファイル、clientへのスクリプトファイルのデプロイなどを実行できます。HTMLFrameMojitとは、Mojitoにデフォルトで組み込まれているmojitの1つです。HTMLの大枠を提供するという意味で、Frameという単語を使用しています(frameやiframeタグは使っていません、念のため)。applicationでHTMLFrameMojitを使用する際には、application.jsonでHTMLFrameMojitをインスタンスとして登録します。HTMLFrameMojitの子インスタンスとして、他のmojitを登録します。mojitをHTMLFrameMojitの子として登録してみます。]routes.jsonや他のファイルは一切編集しません。サーバを再起動し、再度http://localhost:8666ヘアクセスします。出力内容は表面上は変化しませんが、HTMLソースを確認するとずいぶんと異なります。</div></body></html>また、HTMLFrameMojitを使うことにより、client側へJavascriptファイルをダウンロードさせることも可能になります。Mojitoではデプロイといいます。デプロイの設定には、application.jsonでdeployプロパティをtrueとします。application.jsonの一部を抜粋します。"Sample"これでcontrollerなどもclient側へダウロードされるようになります。実際にHTMLソースを確認すると、多数のJavascriptファイルを読み込ませるようになっています。</script></body></html>作り方によっては、危険にもなりますが(セキュリティホールがある場合)、アプリの軽量化に資する仕組みでもあります。Binder機能HTMLFrameMojitを使うと、binder機能も楽に使用できます。Mojitoでは、DOMへのイベントリスナー登録や、DOMを変更する仕組みを、controllerやviewから切り離す構造があります。これがbinderです。mojits/Sample/binder/index.jsを編集し、アシアル取締役、社員をクリックすると、各々「取締役:名前」「社員:名前」と表示してみます。'mojito-client']});このファイルでは、bindメソッド内に必要な処理を記述します。bindメソッドに渡されるnodeオブジェクトはYUIのNodeオブジェクトです。YUIでDOMをラッパーしたものとなります。ご覧の通り、使い方は結構簡単です(通常のDOMやjQueryなどに似ているので)。まとめアプリの作り方を工夫すれば、最初の画面のみWeb上から表示し、残りはclient側で実行させることも出来そうです。ユーザ体験を向上させ、使いやすいアプリを実現できると、なお面白いですね。PhonGap1.8.0でエラーが発生しています。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。