Ext JS でレスポンシブアプリケーションをデザインする

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

この記事は、US Sencha社ブログ Designing Responsive Applications with Ext JS を翻訳したものです。

現在では、ユーザーは Web アプリケーションを使う時には、デスクトップパソコンだけではなく、様々な大きさ、様々な形をしたモバイルデバイス上でも使える事を期待しています。アプリケーションをそこまで適応するという要件は膨大なことと感じるかもしれません。幸いなことに、Ext JS 5 では、アプリケーションがあらゆる画面の大きさ、形、向きなどに対応するためのツールを全て提供しています。

responsiveConfig の導入

Ext JS 5 の新機能であるタブレットのサポートで “responsiveConfig” が登場しました。画面のサイズや向きの変更にアプリケーションが動的に反応できる、強力な新機能です。 responsiveConfig は、次の二つのクラスのうちの一つを使うと、有効になります。

Ext.plugin.Responsive: Ext.Component にレスポンシブな機能を追加します
Ext.mixin.Responsive: 他のクラスにレスポンシブな機能を追加します

コンポーネントをレスポンシブにする

パフォーマンスの面から、Ext JS のコンポーネントはレスポンシブな機能をデフォルトでは有効にしていません。そのため、コンポーネントをレスポンシブにするためには、responsive プラグインを使う必要があります。クラスボディーに responsive プラグインを追加すると、全てのインスタンスがレスポンシブになります。またはコンポーネントの単一のインスタンスをレスポンシブにするには responsive プラグインをインスタンスのコンフィグに追加します。

plugins: 'responsive'

コンポーネントのコンフィグに responsive プラグインを追加すると、コンポーネントは、”responsiveConfig” コンフィグオプションが使えるようになります。 responsiveConfig は、単純なオブジェクトで、条件を表すキーの中にその条件の時に適用されるコンフィグを指定します。例えば、アプリケーションにタブパネルがあるとして、タブバーはは横向きの時には左寄せのままで、縦向きの場合に上部に揃えたいとしましょう。 responsiveConfig オブジェクト内で “landscape” と “portrait” をキーにして、デバイスの向きの変更に反応するように、パネルの tabPosition コンフィグを動的にセットできます。

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    plugins: 'responsive',
    responsiveConfig: {
        landscape: {
            tabPosition: 'left'
        },
        portrait: {
            tabPosition: 'top'
        }
    },
    items: [
        { title: 'Foo' },
        { title: 'Bar' }
    ]
});

ルール

responsiveConfig オブジェクトの各キー、または「ルール」は、単純な JavaScript の式です。次の変数が、responsiveConfig ルールで使用可能です。

'landscape' – デバイスの向きが横向きであれば true (デスクトップデバイスでは常に true になります)
'portrait' – デバイスの向きが縦向きであれば true (デスクトップデバイスでは常に false になります)
'tall' – デバイスの種類に関わらず、幅が高さより小さい場合には true
'wide' – デバイスの種類に関わらず、幅が高さより大きい場合には true
'width' – ビューポートの幅
'height' – ビューポートの高さ

この変数を様々な方法で組み合わせて、複雑なレスポンシブルールを生成することができます。例えば、次の responsiveConfig は、ビューポートの幅が 768 ピクセル以下で、ビューポートの高さが幅より大きい場合、コンポーネントを非表示にします。 (訳注: 原文のまま訳しましたが、次のコードとは動作が逆になっています)

responsiveConfig: {
    'width < 768 && tall': {
        visible: true
    },
    'width >= 768': {
        visible: false
    }
}

どのコンフィグをレスポンシブにできるか？

内部的には、サイズ変更や向き変更の検出をするためにフレームワークがビューポートを監視し、どちらかのイベントが起こった場合、レスポンシブルールを全て再評価します。一致するルールの、全てのコンフィグのセッターが呼び出されます。このため、responsiveConfig の中でコンフィグオプションを指定するためには、セッターが必要です。上記の例では、Ext.Component には setVisible() メソッドがあるので、”visible” を responsiveConfig の中で使用できます。

クラスをレスポンシブにする

responsiveConfig はコンポーネントにおいて最も便利ですが、時には他のクラスも画面のサイズに反応するようにしたい場合もあるかもしれません。 Ext.Component 以外のクラスには、Ext.mixin.Responsive をミックスインすると、それが可能なります。例えば、次のクラスのインスタンスでは、画面の形が “wide” から “tall”、”tall” から “wide” に変更した時に”foo” コンフィグも更新されます。

Ext.define('MyClass', {
    mixins: ['Ext.mixin.Responsive'],
    config: {
        foo: null
    },
    responsiveConfig: {
        wide: {
            foo: 1
        },
        tall: {
            foo: 2
        }
    },
    constructor: function(config) {
        this.initConfig(config);
    },
    updateFoo: function(foo) {
        console.log(foo); // 画面の縦横が変わると"1"か"2"がログされる
    }
});

お試し下さい

Ext JS の新しいレスポンシブデザイン機能が実際のアプリケーションでも成功する事を試したいと考えました。そこで、デスクトップとタブレットで、幅広い画面サイズや向きをサポートするために、responsiveConfig を活用するアプリケーションを作成しました。そのアプリケーションはこちらにあります。

デスクトップブラウザのウィンドウのサイズを変更したり、タブレットの向きを変えたりして、アプリケーションの表示とレイアウトが次ように変わることを確認してください。

メインのナビゲーションは “wide” モードでは左寄せで、”tall” モードでは上部に配置されます。
タブのアイコンは、”tall” モードでは上揃えで、”wide” モードでは、左揃えです。
タブのテキストは、”tall” モードでは中央揃えで、”wide” モードでは左揃えです。
“tall” モードで、画面の横幅が狭くなってくると、オーバーフローメニューツールが表示され、ナビゲーション項目がそのメニュー内に表示されるようになります。

この Ext JS 5 の新機能で、複数プラットフォームのアプリケーション開発がより簡単になると思います。是非、試して、楽しんで下さい！

Sencha Blog