オシャレなユニバーサル アプリの作り方 – その2

連載記事の一回目を翻訳してしまったので、パート2も翻訳しました。

Sencha 公式ブログの How to Build a Great Looking Universal App with Ext JS – Part 2 | Sencha の翻訳になります。

ユニバーサル アプリを構築する際のキモとなる、2つのツールキット。そして双方にまたがるコードはどこに置くのか。2つのツールキットで作成したアプリは、実行時にどのように選択されるのか。

といった、「ユニバーサル アプリ」と聞いて、湧いてくる疑問に答えてくれています。

著者は Lee Boonstra です。彼女のブログは翻訳しやすくて、内容も整っているので大好きです。

ではご覧ください。

この連載の パート1 では、 ユニバーサル アプリとは何かということと、Ext JS 6 で作成する方法について解説しました。 ここでは、アプリケーションを構築する方法をお見せしましょう。

フォルダ構造

ハイパフォーマンスの Ext JS 6 ユニバーサル アプリを作るために、Sencha Cmd を使います。 フォルダ内にパッケージやフレームワークを共有する、アプリケーションの複数バージョン(フリーと商用)を配置するため、まず、ワークスペースを生成します。

ワークスペースを生成するには、ダウンロード済みの Ext JS 6 の SDK にカレントディレクトリを移して、そこから次のコマンドを実行します。

[bash] sencha generate workspace ../spotifinderworkspace6 [/bash]

これで次のファイル構造が生成されます。

Generate workspace

次に、アプリケーションを生成します。 _engine と名付けました。 なぜかというと、動作やブランディングの違うカスタムバージョンのアプリを作成することができるからです。 例えば、Pandora の曲を再生する音楽アプリです。 そのため、Ext.Application を拡張して、特定の要素をオーバーライドする必要があります。

ここでのアプリケーションの生成方法は次の通りです。

[bash] cd spotifinderworkspace6/ext sencha generate app Engine ../_engine [/bash]

Generate application

Toolkits

classic フォルダは、classic ツールキットのフォルダ構造です。 デスクトップ (またはタブレット) に最適なリッチなコンポーネントが含まれます。 また、従来のブラウザもサポートします。

classic ツールキットのアプリは次のようになります。

App in Classic
toolkit

Spotify の一種のように見えます。 伝統的なデスクトップ コンポーネントにカスタム スタイルシートを設定して使っています。 アプリケーションは大きなスクリーンに表示されるので、アルバムのアートワークや、追加情報、設定画面 (横にドッキングした) などの情報を表示するスペースがあります。

独自のビューを作成しました。 その中には独自のロジックを必要とするものがあります。 そのため、classic ツールキットのフォルダ構造は次のようになります。

Folder structure in Classic toolkit

modern フォルダには、軽量なタッチ コンポーネントが含まれます。 スマホ (またはタブレットの場合も) などのタッチデバイスに最適です。 これらのコンポーネントは、マウスやキーボードではなくタッチ操作に最適化されています。 コンポーネントは軽量ですので、性能の低いモバイル デバイス上でも快適に動作します。

App in Modern toolkit

画面が小さいので、必要なコンポーネントだけが表示されています。 設定ビューを開くには、歯車ボタンをタップします。 すると、設定画面がアニメーションしながらスライドインしてきます。

Folder structure is small

コンポーネントが沢山あるわけではないので、フォルダ構造も小さくなっています。 ここでも、このビューで必要とされる、ビューや動作のコードだけがユニークです。 他のものはすべて、ツールキットをまたいで共有されます。

共通のコードは、app フォルダにあります。

Shared code in app folder

Tip: ビュー コントローラ (VC) を継承することもできます。

例えば、動作のほとんどを記述したビューポートの VC を作ります。 classic ツールキットと modern ツールキットのフォルダには、自身のコンポーネントに必要なコードだけを記述します。

次がそのサンプルです。 次のものは、 app/main/ フォルダに配置されたビューポートの VC の一部です。 ご覧の通り、Ext.app.ViewController を継承しています。 クラス自身の名前は、 Engine.view.main.MainController です。

Snippet of Viewport VC

さて、次が classic フォルダ内のビューポート VC のコードです。 classic/src/main/ フォルダ内にあって、こちらは 共有の VC である Engine.view.main.MainController を継承しています。 このクラスに alias を設定する事を忘れないようにしてください。 これにより、この classic のビュー コントローラが、classic のメイン ビューwにリンクされます。

Code of Viewport VC in Classic
folder

マイクロローダー

マイクロローダーは、実行環境を検出して、適切な体験を提供します。 これは、デスクトップ上でアプリケーションをロードした場合には、Spotify テーマのデスクトップ バージョンのアプリが表示され、iPhone 上でアプリケーションを開いたら、iOS テーマのスマホ インターフェースのものが利用できます。

この仕掛けは Ext.platformTags にあります。 既存の Ext JS 6 アプリでブラウザのコンソールからこのコマンドを実行できます。 実行しているブラウザのバージョン、OS、デバイスの種類などの、全ての種類の情報を持ったオブジェクトが提供されます。

アプリを設定して、適切な経験を提供することができます。 秘密は app.json ファイルにあります。 ビルド プロファイルを生成し、それぞれの app.json 設定を、ツールキット (コンポーネント セット) やテーマなどのビルド プロファイルにバインドできます。

[js] "builds": { "classic": { //name of the build profile "toolkit": "classic", //component set "theme": "theme-spotifext", //name of the theme }, "modern": { "toolkit": "modern", "theme": "theme-cupertino", } } [/js]

体験の切替は、 index.html で処理されます。 Sencha Cmd でアプリケーションを生成すると、スタブ アウトされます。

Index.html file

MVVM パターン

Ext JS 6 では MVVM パターンが使えます。

MVVM pattern

View – 画面上の全てのコンポーネント
ViewController – ビューのロジック
ViewModel – ビューにバインドするデータ

data model – エンティティの構造
data record – 実際のデータ
data store – クライアントサイドのキャッシュ

Ext JS のビューはネストでき、同様に ViewModel や ViewController もネストできます。

Nested views, view models, and view controllers

このパターンの利点は、コードが読みやすく保守が容易であるという点です。 コードとクラスは一貫したファイル構造にあり、コードの再利用が容易になります。

なぜオープンソースじゃなくて Ext JS なの?

Ext JS 6 では、オールインワンのソリューションが得られます。 いくつもの依存関係を管理し、 協働する必要があるいくつもの異なるテクノロジーの致死行きを持つ必要がありません。

私の作ったアプリケーションは、次の Ext JS 6 のソリューションを使いました。

Ext JS 6

オープンソースでの例

Sencha クラス システム ECMAScript 6 Classes
Border レイアウト JS + CSS
MVVM アーキテクチャ Angular JS
デスクトップ App Bootstrap / Responsive CSS
モバイル App jQuery Mobile / Ionic
Promise ECMAScript 6
グリッド jQuery Plugin
Touch ジェスチャー / イベント JS
ルーティング AngularJS Plugin
オフライン キャッシュ HTML5 / JS
テーマ Sass / CSS
Sencha Cmd Grunt + Yeoman + Bower

オープンソースのソリューションを採用することもできましたが、 そうしていたらあるものの上に技術を積み重ねる必要があったでしょう。 例えば、ECMAScript 6 はインターネット エクスプローラではまだサポートされていません。 Bootstrap やレスポンシブ ウェブ デザインでは、 より大きなコードをダウンロードする必要があり、 (この前のブログ記事で言及したように) それぞれのデバイスに最適化されていません。 jQuery プラグインのグリッド コンポーネントがありますが、 それは半分程度の性能で、大きなデータセットでは充分なパフォーマンスを得られません。 また、ブラウザが最新に更新されたときに、AngularJS プラグインが突然動作しなくなったら誰に連絡すれば良いのでしょうか?

このアプリケーションは単純なアプリですが、すでに 10 におよぶ依存関係を持っています。 50倍ものコードベースを持つ実際のエンタープライズ アプリではどうでしょうか? これらのいくつものツールの知識を持ち、それらの技術が上手く一緒に動きますように、機能が (ブラウザをアップデートしても) 5年から10年年後も使えますようにと神頼しなくてはなりません。

まとめ

これらが、正に Ext JS 6 を選択した理由です。 全てが同じ方法で設定され、全ての部品が協働し、同じように見えるオールインワンのソリューションです。 そして、Sencha は営利企業ですので、サポートの連絡先があり、アプリは将来にわたって動作することが保証されます。

リソース

ウェビナーをご覧ください: Secrets to Building a Great Looking Universal App (オシャレなユニバーサル アプリを作る秘訣) 音楽アプリを作る時に使った、多くのトピックを公開しています。

その他の便利なリンク:
Getting Started with Ext JS 6
How to Create a Dark Ext JS Theme