connvoiのブログ

前だけ向いていけばいい。

Mojitoのチュートリアルやってみたよー

おもしろそうなのでついカッとなってやってみました。


内容はほとんどこれです。
「Creating Views for Different Devices」
http://developer.yahoo.com/cocktails/mojito/docs/code_exs/views_multiple_devices.html
スクリーンショット 2012-04-05 22.10.14
iphone,ipadなどのデバイス別に表示を変更する物をやります。

インストールと設定

$npm install mojito -g
$mojito create app device_views
$cd device_views
$mojito create mojit device

この作業でインストール、ひな形が出来上がりです。

設定ファイル

//application.json
[
  {
    "settings": [ "master" ],
    "specs": {
      "device" : { 
        "type": "device"
      }   
    }   
  }
]
//route.json
[{
    "settings": [ "master" ],
    "_device_view":{
      "verb":["get"],
      "path":"/",
      "call": "device.index"
    }   

}]

application.jsonにspec、
route.jsonにpathとactionのひも付けを書きます

controller.server.js

次にindexをチュートリアルの通り書き換えます。

    Y.mojito.controllers[NAME] = {

        init: function(config) {
            this.config = config;
        },

        /**
         * Method corresponding to the 'index' action.
         *
         * @param ac {Object} The ActionContext that provides access
         *        to the Mojito API.
         */
        index: function(ac) {
                ac.done({title: 'Device Views' });
               }

    };

}, '0.0.1', {requires: ['mojito', 'deviceModelFoo']});

deviceごとのview設定

mojit/device/view以下にデバイス用のhtmlを書いていきます。
対応しているデバイスリストはこんな感じ。
http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.html#views

Opera Mini  index.opera-mini.mu.html
iPhone      index.iphone.mu.html
iPad        index.ipad.mu.html
Android     index.android.mu.html
Windows Mobile  index.iemobile.mu.html
Palm        index.palm.mu.html
Kindle      index.kindle.mu.html
Blackberry  index.blackberry.mu.html

ipad用だったら、index.ipad.mu.htmlのファイルをviews以下に作ります。

<html>
  <head>
    <style type="text/css">
    h2 {
         border-style: solid;
         border-width: 2px;
         border-color: #8BB381;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
         margin: 10px 0px;
         padding: 10px 0px;
         background-color: #41a317;
         text-align: center;
         font-weight: bold;
         font-size:2.0em;
         color: #FFF;
         width: 100%;
       }
    </style>
  </head>
  <body>
    <div id="{{mojit_view_id}}" class="mojit">
      <h2>hogehogeだよー</h2>
    </div>
  </body>
</html>

こんな感じで書いていきます

起動

mojito start

mojitoでひな形を作ったディレクトリに移動して、startコマンドをうちます。
これで起動完了

動作確認

ブラウザで確認する場合は確認したいデバイスをgetパラメタでくっつけます。
http://localhost:8666/?device=iphone
のような感じです。


DSC00311
もちろん、それぞれのデバイスでアクセスするとちゃんと表示されます。
UserAgentからの判定をほぼ意識しないでmojito内でやってくれます。


対応しているデバイスを見ると
もうPCを持たないでタブレット、スマフォをいまのPCの代替として
使われる時代が目の前なんだなーと。