Tag Archives: Ipad

JavaScript Advent Calendar 2011 (フレームワークコース) 21日目の記事です。

Sencha Touchを初めて使った時の話で、あまり実用的な内容ではないですが、
これからSencha Touchを使う人に何かしら参考になればと思います。

Sench TouchでiPadモック

Sencha Touchとは…という話は恐らく聞いたことがある人は多いと思うので省きますが、
iOSとAndroid(要はWebkit系)をサポートしたスマートフォン向けのWebアプリケーションフレームワークです。

最近はObjective-CでiPhoneアプリを書いている事が多いのですが、
今回、問診票iPadアプリを作成する事になり、それ向けに動くモックが一週間後ぐらいに必要となりました。
まだiPad向けのアプリは作成した事はなかったので時間的な心配と、 Sencha Touch ちょっと触ってみた所感などを読んでSencha Touchが気になっていたので、
Sencha Touchでモックを作って見ることにしました。

Sencha Touchを初めて3日ほどかかって、かろうじて動く感じのモックができました。

  • http://azu.github.com/SenchTouchiPadMock/www/
    Webkit系のブラウザならiOSじゃなくても見られます
    全然Sencha Touchのルールに則ってない書き方をしてるのでソースは参考にしてはいけない

NewImage

iPadアプリでいうUISplitViewController な感じで、それぞれの項目に入力欄や選択肢が出るような感じのモックです。

NewImage

デザイン的なモックでは無いので、フォントサイズを自由に変更できるスライダーを載せて、サイズをいじりながら見られるようにしていました。

NewImage

このSencha Touchの入力部品(テキストエリアやチェックボックス)は、以下のようなJSONオブジェクト的なものを書くだけで作成できるので、かなり手間を省いてできるのでとりあえず並べるものを作るにはとても便利です。入れ子のような構造もちゃんとUIに反映されるのでかなり便利でした。

var data = [{
        title:"年齢",
        instructions:"あなたの年齢を入力してください",
        xtype:'fieldset',
        id:'yearsold',
        items:[
            {
                xtype:"textfield",
                inputType:"number",
                name:'yearsold',
                label:'年齢',
                placeholder:"年齢を入力"
            }
        ]
    },
    {
        title:"一日に吸うタバコの本数",
        instructions:"一日にタバコを吸う本数(禁煙中ならば、以前は何本くらいすっていましたか?)
" + "今まで、合計で何年間くらいタバコを吸っていましたか?", xtype:'fieldset', id:'cigarettes', items:[ { xtype:"textfield", inputType:"number", label:"一日の喫煙本数", name:"cigarettesPerDay" }, { xtype:"textfield", inputType:"number", label:"喫煙年数", name:"yearsOfSmoking" } ] }, { title:"体重・身長", instructions:"あなたの体重と身長を入力してください", xtype:'fieldset', items:[ { xtype:"textfield", inputType:"number", label:"体重", name:"bodyWeight", placeHolder:"体重を入力" }, { xtype:"textfield", inputType:"number", label:"身長", name:"bodyHeight", placeHolder:"身長を入力" } ] }, { title:"チェックシート", instructions:"それぞれの項目に対して該当するものをチェックしてください", xtype:'container', cls:'checksheet', // heightがたりないので無理やり100%に id:'checksheet', scroll:'vertical', items:[ // それぞれの問題 { title:"天候により、せきがひどくなることがありますか?", xtype:'fieldset', defaultType:"radiofield", items:[ { name:'tmp_seki', label:'はい(天候によりひどくなる)', value:'3' }, { name:'tmp_seki', label:'いいえ(天候は関係ない)', value:'0' }, { name:'tmp_seki', label:"せきは出ない", value:'0' } ] }, { title:"風邪をひいていないのにたんが絡むことがありますか?", xtype:'fieldset', defaultType:"radiofield", items:[ { name:'kaze_tan', label:'はい', value:'3' }, { name:'kaze_tan', label:'いいえ', value:'0' } ] }, { title:"朝起きてすぐにたんがカラムことがよくありますか?", xtype:'fieldset', defaultType:"radiofield", items:[ { name:'tan_karamu', label:'はい', value:'0' }, { name:'tan_karamu', label:'いいえ', value:'3' } ] }, { title:"喘鳴(ゼイゼイ、ヒューヒュー)がよくありますか?", xtype:'fieldset', defaultType:"radiofield", items:[ { name:'zenmei', label:'いいえ、ありません', value:'0' }, { name:'zenmei', label:'時々、もしくはよくある', value:'4' } ] }, { title:"今現在(もしくは今まで)アレルギーの症状はありますか?", xtype:'fieldset', defaultType:"radiofield", items:[ { name:'allergy', label:'はい', value:'0' }, { name:'allergy', label:'いいえ', value:'3' } ] }, ] } ];

モックからネイティブアプリに

上記のSencha Touchで作成したモックも参考にしつつ、Objective-CでネイティブのiPadアプリとして作りなおしています。
まだ作成中な感じですが、なんとなく雰囲気だけ残っています…

ネイティブの場合も同じように、JSONで質問項目やメタデータの一覧を書いて、そのJSONを元にUIを作るコード書いて作成しました。
Sencha Touchの場合だと既にJSONからUI(フォーム系)を作るものが用意されているので、この辺がかなり簡略化できていたんだなとObjective-Cで書いてて思いました。

NewImage

NewImage

 

Sencha Touchの感想

Sencha TouchはMVCなど書き方に一見つかみにくい要素があるので少し学習する時間がかかると思いますが、
その辺が上手くつかめるようになれば、jQuery Mobileなどよりもいろいろな事がやりやすかったり、ガッチリしたものも作成できると思います。

Sencha Touch2ではもう少しコードがすっきりしたり、PhoneGapのようなネイティブアプリへのパッケージング機能を持ったり、
よりスマートフォン向けアプリが書きやすくなると思うので、触る機会が増えるかもしれません。

今回のモックを作るにおいて参考したサイトなど

Sencha Touchのインターフェースのレイアウトについてのスクリーンキャスト。
layoutの値による違いを視覚的に把握できるので見ておくべき。
SenchはLearn Sencha Touch | Learn | Senchaなどにスクリーンキャスト等がいろいろあるが、
この中でも特にDrew Neilによるスクリーンキャストはとても解りやすくできているため見ておいて損はない。
スクリーンキャストとしての出来がとても良い感じ Learn Sencha Touch w/ Drew Neil on Vimeo

まだ発売前の書籍ですが、サンプルコードも置かれているのでコンポーネントの表示を確認するのに便利。
ただ、実際のコードはExt.setupなど最低限な構成なため実際に使うときはコピペなどをしないほうがいいと思います。
(後、ライブラリのパスとかがまちまちなので自分で調整しないとまともに見えないサンプルも多い) 
サンプルで公開されているIntroducing Sencha Touch (Green Paper – PDF)には、Sencha Touchにおける構成部品の名前などの図が乗っているので、結構参考になる。

Sencha Touchを使ってノートアプリの作成チュートリアル
モックデザインなど図も多くあり、かなり細かく解説している。(書籍も出してるみたい)

その他の参考になるもの