HOME > 開発者向けBLOG > Ext JS >  Sencha Ext JSとSencha Touchの統合

Technology Note 開発者向けBLOG

Ext JS

Sencha Ext JSとSencha Touchの統合

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

今月末(2015年6月末)にSencha Ext JSのメジャーバージョンアップが予定されています。
Sencha Ext JS5が出てから1年ちょっとですね、早いですね。
現時点では、Beta版をダウンロードして試すことが可能になっているので、是非とも落としてみてください。
7月1日にSencha Ext JS6のリリースがされ、Beta版はなくなりました。
お試し版をダウンロードできるので、そちらから落としてみてください。
※ダウンロードは以下のサイトから登録するとメールが来るので、そこから落とす流れになります。

Ext JS6になることで色々とアップデートはされているのですが、今回の目玉はやはりSencha Ext JSとSencha Touchの統合です。今回はこれについて簡単にご紹介したいと思います。

これまでは、PCをターゲットにしたシステム構築をするときにSencha Ext JSを使用しタブレットやスマホ向けのシステム構築をするときにSencha Touchを使用していました。同じ設計思想で作られているため、全く別々のアーキテクチャを使用して個々に開発するよりはやりやすかったのですが、共通のロジックを、Touch と Ext JS 両方に書く必要がある場合もあり、どこか無駄に感じることも多かったと思います。

今回のメジャーアップデートによって、これら2つのフレームワークは統合されて1つのフレームワークになります。これにより、PC・タブレット・スマホを1つのコードベースで記述することが可能となります。

例えば、ユーザ登録するようなフォーム画面や、登録情報を表示するような検索画面など、サーバ側のロジックはPCとタブレットで分けることはなく、APIとしても1種類で用意することが多いと思います。 画面の入力制御処理やチェック処理、サーバとの通信やデータ構造の定義については、デスクトップとモバイルで共通な部分が多いにもかかわらず、これまではフレームワークが分かれていたので、個々にコーディングする必要がありました。このような部分をコーディングするときに、重複するコードにもどかしさを感じていたユーザは少なくないと思います。
※マルチデバイスのアプリを開発した場合ですが、下図(Sencha ExtJS5とSencha Touch)の同じ色の部分に対してフレームワーク毎に似たような処理を実装していました。

  • Sencha ExtJS5とSencha Touch

Sencha Ext JS5とSencha Touch

画面そのものはUI/UXやユーザビリティを考えると、PC・タブレット・スマホといったデバイスによって最適なものは変わるのでそれぞれに合わせて設計した方がいいと思いますが、それ以外の部分はなるべく共通化することで開発コストを下げ、ソースのリソース管理も楽になり結果として保守性が高まります。
※下図(Sencha Ext JS6)は、Sencha Ext JS6を使用した開発の例です。画面だけは個々に作成して、それ以外は共通化していく実装になります。

  • Sencha Ext JS6

Sencha Ext JS6

以下のURLにPCやタブレットでアクセスしてみてください。

Sencha Cmdというツールで自動生成したプロジェクト(※1)のメニュー画面が表示されるはずです。結構綺麗でセンスが良くないですか(笑)? PCとタブレットまたはスマホでそれぞれを見てもらうと分かりますが、画面のレイアウトが全く違って表示されています。スマホやタブレットで表示するときには、アプリっぽいデザインで表示されているはずです。

僕が Sencha を使っていて一番気持ちよく感じるところは、洗練されまくったUIなんですが、今回のアップデートでそれをフル活用できる環境になることがとても嬉しく楽しみに感じています。これまでSencha Ext JSを使ってWebアプリを作っていて、タブレット・スマホ対応などを検討されている方にとっても、中々の朗報ではないでしょうか?
少しでも気になって頂けた方は落として頂ければ、僕としても嬉しいです!

(※1)Sencha Cmdを使ってプロジェクト自動生成するのは、また別のBlogでまとめます。

PAGETOP