Ext JSでレスポンシブを試してみる

####前置き

昨年に続き2015年もSencha Advent Calenderに参加します、佐藤です。北海道はとうとう長い冬が到来し、これから半年間は寒さとの戦いです。自分のMac BookをEl Captitanに上げたんですがまだ入力時の予測変換に慣れません。。
仕事用のPCはMac OS Xだからこっちに慣れてもあっちに慣れずって感じなんですけどね。

今年のSencha Advent CalenderはSenchaに関するすべての話題を初歩的な情報からマニアックな手法まで何でもOKという事で何にしようか考えたんですが、個人的にインパクトを受けたのはやはりデスクトップ・モバイル両対応という点だと感じまして、これからどんどん出番が増えてくるのではないかと思い、サクッと簡単にレスポンシブについて書きたいと思います。
今更って思われるかもしれませんがお付き合いくださいm<_ _>m

####レスポンシブ
レスポンシブとは色々なブラウザもあるしデバイスもあるのでそれぞれを個別に対応して作るのではなく、1つのコードでそれぞれのブラウザ、デバイス用のレイアウトを柔軟に対応させるための手法です。
webデザインをレスポンシブで実現するためにはHTMLファイルとCSS3を使って異なる画面サイズに応じたスタイルを適用したりしてページのレイアウトを作ると思いますが、Senchaではどう実現させるかという点が今回紹介したい所になります。
実際に試していきますが、Sencha Cmdとextjs6のsdkは、自身の環境に揃っている前提で話を進めます。
新しくプロジェクトを作る場合はgenerateからですが、もうお馴染みなので
generateの手順はSencha cmd Generateを参照してください。

####コード
レスポンシブはプラグインになっているのでdefaultでは使用できません。なので定義したクラス下に「 plugins: 'responsive'」と記載します。

Ext.define('MyApp.view.chart.Chart', {
extend: 'Ext.Panel',
xtype: 'pie3d',
plugins: 'responsive',
controller: 'pie-3d',
〜省略〜

宣言はこんな感じですね。
後はどういう条件でレスポンシブさせたいかという設定が必要になります。
これには「responsiveConfig」を使って設定します。

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

構文は慣れて頂くとして、このように設定を記載します。上の設定ですと、幅が768未満であれば画面上に表示し768以上であれば表示させないといった動きをさせることができます。(※visibleは表示/非表示のプロパティです）デバイスでは表示させたいけどPCでは表示させたくない場合に使えそうです！

もちろん条件のwidthをheightにすることも可能ですし、表示/非表示ではなく、regionを指定してレイアウトを変更させることもできます。
responsiveConfigにどういう設定が可能かはresponsive Ruleを参照して下さい。

generateしてできたプロジェクトの機能に対してレスポンシブのデモをするのは寂しいので以前、サンプルで作ったExt Js6の新機能であるPie3Dをさりげなく見せながらデモを作りました。
git上に公開してますので興味がある方はcloneしてみて下さい。

git clone https://github.com/toshimitsu-sato/extjs6-sample.git

[実行手順]

sdkをcloneしたディレクトリ直下にコピー sencha app build sencha web startでwebサーバ起動しアクセス

これでデモページが表示されるはずです。

このレスポンシブは実際に自分の環境で色々な設定値やパターンを試してみてブラウザやデバイスでサイズ変更させながら動きを確認すると面白いと思います。動きが出るものはやっぱり達成感じゃないですけどオォーって感じになります、僕は。

以上でざっくりでしたがレスポンシブの説明を終わります。超サラッと書きましたが、比較的簡単ですresponsiveConfigは。Senchaのweb docsにも記事がありますので見てみてください。

次は12月9日に再登場する予定です。
以上、佐藤でした。