HOME > 開発者向けBLOG > Sencha Blog >  Ext JS アプリをタッチデバイスに最適化する

Technology Note 開発者向けBLOG

Sencha Blog

Ext JS アプリをタッチデバイスに最適化する

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Optimizing Your Ext JS Apps for Touch and Tablets を翻訳したものです。

Optimizing Your Ext JS Apps for Touch and Tablets 今、話題のExt JS 5。なぜアップグレードしなくてはならないのかと疑問に思っている人がいるかもしれません。既存の Ext JS 4 アプリケーションをアップグレードしたくなるような理由はもちろん沢山ありますが、その中でも一番重要なのは、タッチ操作やタブレットデバイスをサポートするようにアプリケーションを最適化するということです。

現代社会では、みんなが「モバイル」デバイスでアプリケーションを使っています。そして我々はマルチデバイスの社会に生きています。私はほとんどのメールを携帯電話で読みます。PDF を見たり Web サイトを見る場合はいつもタブレットを使用します。タブレットのおかげで、ドキュメントをプリントすることもなくなりました。モバイルに移行することはものすごく大事です。それ故に、多くの企業は自社のアプリがタッチデバイスで機能することを望んでいます。

どんな Web サイトや Web アプリも iPad で開く事ができますし、既存の Ext JS 4 アプリも普通に使えるかもしれません。しかし多くの場合、誤作動が起きてしまったり、見た目に異常があったりする場合があります。これはタッチサポートに最適化されていないからです。

詳しくは、近々開催されるウェビナーにご参加ください。

(既存の Ext JS アプリをタッチやタブレットに最適化するには)

Thursday, 9/25 at 9:00am PDT (日本時間 9/26 AM2:00)

次のスクリーンショットをご覧ください。このアプリは iPad Retina で起動しています。見ての通りですが、グラフを表示するスペースがなく、グリッドの行は小さすぎ、ボタンの周りにはスペースもなく、全体的に正しく表示されていないようです。これでは、間違えて他のボタンをタップしてしまう可能性もあります。

また、タブレットは右クリックやマウスホバーなどのマウスとキーボードを使用した機能には対応していません。

Band Manager App

往年の名ラッパーMCハマーの曲にあるように “U can’t touch this!” これには触れません。

こういったことが起きるので、タッチ操作に最適化しなければいけません。Ext JS 5 は、HTML5 がベースになったフレームワークであるため、Ext JS 5 にアップグレードするだけでアプリを最適化することができます。では、Sencha Touch、もう1つのフレームワークはどうなるのでしょうか?

Hammer Time

Sencha Touch と Ext JSの違い

Sencha Touch は、スマートフォンのためにデザインされた軽量なフレームワークです。全てのデバイス毎 (iOS、Android、Tizen、Blackberry そして Windows Phone) のテーマを同梱しています。また、Sencha Touch にはプラットホームスイッチャーがついていて、オフラインモードでも実行することができます。

「タブレットには Sencha Touch が使用できるなら、その代わりに Ext JS 5 を使う必要はあるだろうか?」と疑問に思うかもしれません。Ext JS 5 は、マウスとキーボードへのサポートもあるため、アプリをデスクトップとタッチデバイス両方で実行することができます。また、Ext JS 5 は Internet Explorer 8 と 9も変わらず、サポートしています。そして、Ext JS 5 は沢山のコンポーネントを持っていて、大きなデータセットを扱うように設計、開発されています。大きなエンタープライズ アプリケーションを作るのであれば、Ext JS 5 を使う方が間違いありません。また、すでに Ext JS 4 アプリケーションを持っている場合、Ext JS 5 にアップグレードするほうが、新たに Sencha Touch アプリを開発するより簡単でメンテナンスもしやすいでしょう。

機能解説

ここで Ext JS 5 を使ってタッチアプリケーションを作る場合に使える機能やコンポーネントについて解説したいと思います。

  • 新しいイベントシステムとタッチジェスチャー
  • タッチテーマ
  • レスポンシブ コンフィグ
  • タッチ コンポーネント

イベントシステムとタッチジェスチャー

Ext JS 5 のイベントシステムは、過去のリリースから大きなパラダイムシフトを起こしました。直接アタッチされた DOM リスナーから、委譲イベントモデル (Sencha Touch で最初に実装された) に移行しました。これにより、古いブラウザではコストが高くなってしまう、DOM との相互作用を減らすことができます。また、タッチジェスチャーを有効化するため、スワイプ、ピンチ、回転させることなどができるようになります。

つまり、各イベント (マウスダウン、タッチスタート、など) ごとに、単一のリスナーが DOM 階層の一番上 (window オブジェクト) にアタッチされます。DOM エレメントがイベントを発火すると、一番上までのぼってからハンドルされます。

つまり、いつでもすぐに使えるイベントシステムが準備できてきます。これ以上タッチの最適化のために我々には何ができるでしょうか? まず、Ext JS 5 には、アプリ内で直接使える、新しいタッチに最適化されたテーマが用意されています。

タッチテーマ

Ext JS 5 は タッチデバイスのために開発された新しいテーマが同梱されています。ボタン、コンポーネント、アイコンはより大きくなっていて、ミスタップを防ぐために余白も大きくなっています。

以下のスクリーンショットをご覧ください。

Neptune Touch Theme

Neptune Touch テーマは、高レベルにカスタマイズできます。このテーマは Neptune の現代的で簡素なルックアンドフィールを与え、タップできるエレメントのサイズを大きくしたりと、テーマをよりタッチフレンドリーに適応させています。

Crisp Touch Theme

Crisp Touch テーマは、iOSのようなタッチフレンドリーな機能を生かしながらも Neptune Touch のデフォルトカラー、アイコンなどを変更しています。

theme プロパティを myapp/app.json に加える事でテーマ間の切り替えを行えます:

"theme": "ext-theme-neptune-touch", //or "ext-theme-crisp-touch"

技術的には、タッチに最適化したアプリを実行しているにも関わらず、まだ違和感を感じるかもしれません。それはタブレットのために開発をするということは、デザイナーの気持ちでいなければいけないからです。Sencha は、全てのツールを提供してくれますが、既存のアプリの一部分については再考、再デザインする必要があるかもしれません。

例えば、デスクトップ上ではコンポーネントを隣同時にレイアウトできるかもしれませんが、タブレット上ではコンポーネントを互いの下にドッキングさせるべきかもしれません。非表示にしたくなるコンポーネントも存在するかもしれません。これらのことは、Ext JS のレスポンシブデザイン機能を使えばできてしまいます。 

レスポンシブデザイン

Ext JS 5 のリリースにより、Sencha は、レスポンシブデザインをサポートします。レンスポンシブデザインを実装するには、CSS 内でメディアクエリをコードする必要などはなく、慣れ親しんだ Sencha のコンフィグを書けばいいだけなんです。

plugins: ['responsive'],
responsiveConfig: {
    portrait: {
        dock: 'bottom'
    },
    landscape: {
        dock: 'right'
    }
}

詳しくはこちらまで: http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.plugin.Responsive

Responsive Theme Ex

レスポンシブデザインとは別に、現在のビューコンポーネントを見直す必要があるかもしれません。Ext JS 5 にアップグレードした場合、全てのコンポーネントはタッチサポートに最適化されます。例えば、グリッドはタブレットの上でも正常に表示されます。グリッドヘッダーを長押しすると、ドロップダウンの並び替えを表示します。しかし、コンポーネントによっては変更を加えたい場合があるかもしれません。

タッチコンポーネント > フォーム

Ext JS 5 は HTML5 の doctype を使用しています。つまり、HTML5 のフォームを使用して、フォームタイプをセットすることができます。そういったフォームタイプは特定のデバイスにおいて強制的にキーボードが正しく表示されるようにすることができます。例えば email、search、file、url、number、datetime、などなど。

次のコードは、Ext JS でのフォームタイプの設定の仕方です。

{
    xtype: 'textfield',
    inputType: 'email',
    name: 'email',
    fieldLabel: 'Email'
}

iPad上では email アドレスを入力するためのキーボードが表示されています (@キーが表示されています) 。

ipad Display

タッチコンポーネント > タブ

Sencha Touch では、Ext.tab.Panel をスクリーンの下に、アイコンを配置し中央そろえに配置できました (タブレットインターフェースでは定番のデザインです) 。Ext JS 5 の Ext.tab.Panel でもそのように設定できるようになりました。

Ext.create('Ext.tab.Panel', {
    title : 'Bands',
    renderTo : Ext.getBody(),
    height : 500,
    width: 400,
    layout : 'hbox',
 
    tabBar: {
        layout: {
            pack: 'center'
        }
    },
    tabPosition: 'bottom',
 
    defaults: {
        iconAlign: 'top',
        bodyPadding: 15
    },
 
    items : [{
        title: 'The Ramones',
        glyph: '117@Pictos',
        html: 'Blitzkrieg Pop'
    }, {
        title: 'Billy Idol',
        glyph: '117@Pictos',
        html: 'White Wedding',
    }, {
        title: 'Rolling Stones',
        glyph: '117@Pictos',
        html: 'Paint it, Black'
    }]
});

Touch Tabs

タッチコンポーネント > チャート

チャートコンポーネントは、Sencha Touch と同じチャートパッケージが使用できます。これらのチャートは SVG または、HTML5 の canvas ベースのもので、モバイルデバイスでより良いパフォーマンスを発揮します。この強化されたチャートパッケージのおかげで、沢山の新しい機能がExt JS 5 には備わっています:

  • パン、ズーム、クロスヘア インタラクション
  • ローソク足、OHLCシリーズ
  • フローティングアクシス
  • 複数アクシス
  • より高いカスタマイズ性

Touch Charts はフレームワークに含まれていませんが、別のパッケージで用意されています。つまり、使用するにはパッケージを有効化する必要があります:

"requires": [
    "sencha-charts" // ext/packages/sencha-charts
]

新しいチャートパッケージを使用する場合、一部のチャートの構文に変更があることをご了承ください。詳しくは、チャートの API ドキュメントやガイドを参照してください。

Touch Charts

まとめ

Ext JS 5 には、マルチデバイスな現代社会にぴったりはまるような技が他にも備わっています。「デバイスと機能のチェック」「オフライン プロキシー」など沢山あります。今すぐにこれを使用し、タッチデバイスでテストすることもできます。

もしExt JS 5 へのアップグレードや、既存のタブレット用のアプリへの最適化に興味があればトレーニングコースを受講してください:Upgrade to Ext JS 5 & Optimize for Tablets

また、オンライン、オンサイト、世界中のロケーションで様々な トレーニングコース も用意していますので気になる方は、お申し込みください。

訳注: まもなく日本でも Ext JS 5 のトレーニングコースが開催できます。 株式会社ゼノフィまでお問い合わせ下さい。

PAGETOP