Sencha Touch 2.3 MVC 2 – プロファイル機能 | Sencha Advent Calendar 2013 – 3日目

この記事は、 Sencha Advent Calendar 2013 の3日目の記事です。

前回に引き続きMVCベースでSencha Touchのアプリケーション作成を学んでいきましょう。

今回は、プロファイル機能です。

コントローラー設置

まずは、前回設置しなかったコントローラーを設置してみましょう。

Sencha Cmdを利用して、Mainコントローラーを生成します。

sencha generate controller Main

1 2	sencha generate controller Main

app/controller/Main.jsが生成されていることを確認します。

スクリーンショット 2013-11-27 16.52.54

生成されたMain.jsの中身は、以下のようになります。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {

        },
        control: {

        }
    },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    }
});

Ext.define('MyApp.controller.Main', {

extend: 'Ext.app.Controller',

config: {

refs: {

control: {

}

//called when the Application is launched, remove if not needed

launch: function(app) {

}

});

Mainコントローラーが動作していることを確認するために、Mainコントローラーのlaunchメソッドにalertメッセージを入れておきましょう。

...
launch: function(app) {
    alert("Mainコントローラーのlaunchメソッドです。");
}
...

...

launch: function(app) {

alert("Mainコントローラーのlaunchメソッドです。");

}

...

このコントローラーが、動作するように、Ext.applicationに設定を記述します。

Ext.application({
    ...
    controllers: [
        'Main'
    ],
    ...

Ext.application({

...

controllers: [

'Main'

...

viewsのように、配列をcontrollersに設定します。

これでアプリケーションを実行してみてください。きっと、alertメッセージが表示されるはずです。

iOSシミュレータのスクリーンショット 2013.11.27 17.01.49

プロファイル機能

今回は、ここで紹介するプロファイル機能についてがメインなので、コントローラーの使い方はやりません。

コントローラーの記述の仕方は、上記のように生成したあとrefsなどコンポーネントクエリー駆使してイベント捕まえてハンドラガシガシ書いていけば、アプリケーションはできあがあります（そんな簡単なもんじゃないって？w）。

上記のように、Ext.applicationに直接controllersを指定して、コントローラーを登録し実行することはできました。

しかし、「iPhoneの時は、こっちのコントローラー動かしたいし、iPadの時は、こっちのコントローラー使いたいなぁ」ってことがあります。あるんです。

もちろん、一つのコントローラーで次に紹介するプラットフォーム藩邸を用いて、if文羅列してもいいのですが、スマートに記述したいですよね？

プラットフォーム判定

Sencha Touchでは、動作している環境を判定することが簡単にできるクラスが用意されており、これらのプロパティを参照して判定を行うと便利です。

Ext.osクラス

APIドキュメンテーションをみれば、一目瞭然ですね。

if (Ext.os.is.Windows) {
    // Windows specific code here
}

if (Ext.os.is.iOS) {
   // iPad, iPod, iPhone, etc.
}

if (Ext.os.is.Windows) {

// Windows specific code here

}

if (Ext.os.is.iOS) {

// iPad, iPod, iPhone, etc.

}

プロファイル機能は、この判定を利用しながら、どのクラスを利用するかを動的に切り替えることができる機能です。

実行クラスの動的変更

では、早速「Phone環境」なのか「Tablet環境、またはデスクトップ」なのかを判定して、ビューとコントローラーを切り替えてみましょう。

まず、「Phone環境」の判定

Ext.os.is.Phone

1 2	Ext.os.is.Phone

を利用します。

「Tablet環境、またはデスクトップ」は、

Ext.os.is.Tablet || Ext.os.is.Desktop

1 2	Ext.os.is.Tablet \|\| Ext.os.is.Desktop

とします。

では、これをどこに記述するのか？

Sencha Cmdで生成したディレクトリに、app/profileというディレクトリがあります。

ここに、Phone.jsとTablet.jsを作成します。

Phone.js

Ext.define('MyApp.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
    },

    isActive: function() {
        return Ext.os.is.Phone;
    },

    launch: function() {

        var me = this;

        me.callParent();
    }
});

Ext.define('MyApp.profile.Phone', {

extend: 'Ext.app.Profile',

config: {

isActive: function() {

return Ext.os.is.Phone;

launch: function() {

var me = this;

me.callParent();

}

});

Tablet.js

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
    },

    isActive: function() {
        return Ext.os.is.Tablet || Ext.os.is.Desktop;
    },

    launch: function() {

        var me = this;

        me.callParent();
    }
});

Ext.define('MyApp.profile.Tablet', {

extend: 'Ext.app.Profile',

config: {

isActive: function() {

return Ext.os.is.Tablet || Ext.os.is.Desktop;

launch: function() {

var me = this;

me.callParent();

}

});

もちろん、作っただけでは動きませんので、Ext.applicationに設定を記述します。

Ext.application({
    ...
    profiles: [
        'Tablet',
        'Phone'
    ],
    ...

Ext.application({

...

profiles: [

'Tablet',

'Phone'

...

先ほど記述した、controllersは削除してください。

profilesに、配列でクラス名を指定すると、自動的に読み込みが行われます。

さて、このままPCブラウザで実行するとどうなるでしょうか？

答えは、「Tablet.jsのlaunchが実行される」です。

Phone.jsのlaunchは実行されません。

なぜでしょうか？

各プロファイルクラスの、「isActive」メソッドに注目してください。プロファイルクラスは、このisActiveメソッドオーバーライドし、その戻り値によって実行するプロファイルを内部で切り替えています。

今度は、2個コントローラーを用意して、コントローラーも切り替わるようにしましょう。

Sencha Cmdを利用してコントローラーを生成します。

sencha generate controller phone.Main
sencha generate controller tablet.Main

sencha generate controller phone.Main

sencha generate controller tablet.Main

app/controller/phone/Main , app/controller/tablet/Main クラスが生成されていることを確認し、先ほどのようにalertメッセージを設定して、どこが動いているのかわかるようにします。

Ext.define('MyApp.controller.phone.Main', {
    ...
    launch: function(app) {
        alert("Phone用Mainコントローラーのlaunchメソッドです。");
    }
});

Ext.define('MyApp.controller.phone.Main', {

...

launch: function(app) {

alert("Phone用Mainコントローラーのlaunchメソッドです。");

}

});

Ext.define('MyApp.controller.tablet.Main', {
    ...
    launch: function(app) {
        alert("Tablet用Mainコントローラーのlaunchメソッドです。");
    }
});

Ext.define('MyApp.controller.tablet.Main', {

...

launch: function(app) {

alert("Tablet用Mainコントローラーのlaunchメソッドです。");

}

});

さて、ここまででコントローラーは、用意できましたが利用するための宣言ができていません。もちろんExt.applicationからcontrollersを外したので。

今度は、それぞれのコントローラーを設定するために、Ext.applicationのコンフィグオプションに直接記述するのではなく、各プロファイルのconfigに記述します。

Phone/Tabletそれぞれ設定を行うと次のようになります。

Ext.define('MyApp.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Main']
    },

Ext.define('MyApp.profile.Phone', {

extend: 'Ext.app.Profile',

config: {

controllers: ['Main']

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Main']
    },

Ext.define('MyApp.profile.Tablet', {

extend: 'Ext.app.Profile',

config: {

controllers: ['Main']

こう設定することで、実行環境によって動的に実行されるコントローラー、また、コントローラー以外にもビューやストア、モデルも切り替えることができます。

デバイスタイプ指定

動作確認をするのに、ほとんどの場合PCブラウザで開発を行うと思います。

そのときに、この動作環境をプログラムレベルで修正するのではなく、簡単に切り替えることができます。

URLに?deviceType=プロファイル名をつける。

1 2	URLに?deviceType=プロファイル名をつける。

です。

具体的には、

?deviceType=Phone

1 2	?deviceType=Phone

のようにクエリーストリングに記述すれば、プロファイルが切り替わって実行させることが可能です。

まとめ

Sencha Touchは、ワンソースマルチデバイスがキーワードです。

もちろん、Sencha Touch SDKが対応していますが、開発を行うにあたり動作環境においてUIを切り替えたり、その振る舞い（コントローラー）を切り替えたりできる「MVC + プロファイル機能」は、最初の段階で仕込んでしまう、おきまりの実装になるのではないでしょうか。

プロファイルって出てきて、よくわからんなぁと使ってなかった人は、是非試してみてください。

Sencha Touch 2.3 MVC 2 – プロファイル機能 | Sencha Advent Calendar 2013 – 3日目

Sencha Touch 2.3 MVC 2 – プロファイル機能 | Sencha Advent Calendar 2013 – 3日目

コントローラー設置

プロファイル機能

プラットフォーム判定

実行クラスの動的変更

Phone.js

Tablet.js

デバイスタイプ指定

まとめ

One thought on “Sencha Touch 2.3 MVC 2 – プロファイル機能 | Sencha Advent Calendar 2013 – 3日目”

カテゴリー