Ext JS 6 の最大の「売り」は、デスクトップとモバイルのアプリを1つのコードベースで記述できるという点です。Sencha ではそうしたアプリのことをユニバーサル アプリと呼んでいます。 とはいえ、これまで Ext JS と Sencha Touch で、重複するコードを書かされてきた我々としては、実際にどうやれば1つのコードベースに統一できるのか、というところが見えてきません。

Sencha の公式ブログで、ユニバーサル アプリの作り方について書かれた記事が掲載されました。それを翻訳してみましたので、ご覧ください。

元記事: How to Build a Great Looking Universal App with Ext JS – Part 1

背景

去る 2011年、私はあるアプリを作ろうとしていました。 私は音楽が好きで、Spotify の大ファンです。 たくさんデータベースから曲を聴けるのが好きでした。 手動で検索しなければならないのが、玉に瑕でした。 ノートパソコンを使っていると気には問題はありませんが、 歩いている時や自転車に乗っているときに、Spotify を携帯電話で使う時はあまりよくありませんでした。 仮想キーボードで文字を入力するのは面倒です。

そこで、私は、私の LastFm アカウント (“scrobble” ができ聴いた音楽を保存できるオンライン データベース) に接続する Sencha touch アプリを作りました。

Sencha Touch はこのアプリを作るのに最適でした。 パワフルでスムースなスクロールリストと、iPhone で綺麗に表示されるスタイルシートがあります。 すぐに作って使えるようになりました。

私はこのアプリがとても気に入ったので公開することにしました。 私はアプリを Cordova でラッピングして Apple の App Store に公開しました。 その後、私はそれをデスクトップでも使っていることに気付きました。 曲の選択が非常に簡単なそのアプリを、私の Web サーバーにデプロイして、Google Chrome Web Store にホストしました。

一週間後、Chrome Web Store のレビューをチェックしました。 私は、酷評ばかりのレビューを見て心が折れました。 「なんておかしな見た目なんだ」とか 「どうして、マウスホイールでスクロールしないんだ」

それは全く仰るとおりでした。 このアプリは iPhone 用にデザインされてました。 スタイルシートのおかげで iPhone アプリに似ていますし、 タッチイベントやジェスチャーを使う Sencha Touch で作りましたから、 タッチアプリと同様の動作をしました。 音楽リストをスクロールさせるには、リストをタップして上下にドラッグしなければなりません。 これはタッチ デバイスではすばらしいのですが、デスクトップではおかしな動作です。 私はアプリのデスクトップ バージョンも作らなければならないことに気付きました。

これが Ext JS を使ってみた最初でした。 Ext JS はデスクトップ アプリケーションを作るすばらしいフレームワークです。 グリッドなどの高速なデスクトップ コンポーネントがあり、Sencha Touch 2 と同様の MVC アーキテクチャやクラス システムがありました。 私は、デスクトップ バージョンを作成し、後に Ext JS 4 から Ext JS 5 に更新しました。 Ext JS 5 を選んだのは、コードをクリーンアップし、新しい MVVM パターンが使いたかったのと、タッチイベント、レスポンシブ デザイン、タブレットバージョン用のスタイルが使いたかったからです。 しかし、2つのフレームワークによる2つの違ったコードベースを保守する必要があることに気付いたとき、Ext JS 6 に切り替えました。

現在では、Ext JS 6 を使うことで、胸痛のアプリを作成できます。 1つのコードベースで、アプリはサポートされているあらゆるデバイス上で動作します。

アプリケーションの仕様

始める前に、アプリの動作に関するいくつかの技術的仕様を示します。

• Spotify の曲を再生する為に、URLスキームを使います。
• LastFm からデータを取得するために、 外部の JavaScript API を使います。 これはパッケージの一部にカスタム プロキシーを書く必要があります。
• LastFm のユーザー名は、HTML5 ブラウザのローカルストレージに保存します。
• スマホでは iOS 表示のような modern タッチ コンポーネントを使います。
• タブレットとデスクトップでは、Spotify のルック＆フィールの リッチな classic デスクトップ コンポーネントを使います。
• MVVM パターンを使います。

ユニバーサル アプリとレスポンシブ Web デザイン

Sencha フレームワークでのユニバーサル アプリの動作と、 特定の環境に対応するモバイル ウェブサイトに使われる「レスポンシブ デザイン」 の動作には、違いがあります。

レスポンシブ デザインは、 特定の HTML エレメントを並べ替えたり、表示／非表示したりするために、 関連するユニット、パーセンテージの値、ブレークポイント (メディアクエリー) を使って、スタイルシート内で実施されます。

次のコードをご覧ください。

このサンプルにはいくつかのブレークポイントがあります。 ビューポートの幅が 799px 以下の小さなスクリーン、 800px から 1024px の幅のスクリーン、 そして 1025px 以上の幅がある大きなビューポートです。 大きなスクリーンでは、list エレメントは、それぞれ 25%の幅で、並びます。 中間のスクリーンでは、50%になり、小さなスクリーン (スマホなど) では、リストは表示されません。

このテクニックは、ウェブサイトにはピッタリですが、 実際のアプリケーションではあまりよくありません。 なぜでしょう。

• スマホで使う時、ネットワークが遅かったり、 (高価な) データプランを使うことになります。 これらのエレメントやデータは見ることはないのに、コストがかかります。

• また、小さなスクリーンサイズでの表示テキストを変更したいこともあるでしょう。 私は多くのコピーライターと仕事をしましたが、 彼らはスマホでの文字はデスクトップと違うものを表示すべきだと考えています。 小さなスクリーンで本全体を読む気にはなれません。

• レスポンシブ ウェブデザインを使うだけだと、1つのコードベースを提供するだけなので、内容をリファインしたり、デバイスの特徴を働かせる多くの機会を逃しているのではないでしょうか。 たとえば、あなたのファンシーなフローティングのカレンダーコンポーネントはデスクトップで大きく見えますが、スマホではうまく動作しません。 マウスでアプリを操作していると、文字のハイパーリンクは問題なく動作しますが、小型のタッチ デバイスでタップするのに苦労することでしょう。 ユーザーは、ネイティブ アプリケーションふるまい（例えばiPhoneのビルトインデートピッカーや大きなボタンのリンク）に慣れています。 多くの場合、レスポンシブなモバイルウェブサイトは、ネイティブ アプリケーションと同じユーザー経験を用意していません。

そういうわけで Sencha のアプローチはこれとは違って、よりよくなっています。 Ext JS 6 の一般的なアプリは、単なるレスポンシブ デザインをはるかに越えています。 私たちは、要素の順番を変えたり表示を切り替えたりするだけではなく、UI をよりコントロールしたいということを理解しています。 いろいろなアプローチがあって、そのほとんどは単に見た目に限ったものではありません。 データや動作もコントロールすることができます。

ツールキット / ユニバーサル アプリのアプローチ: フレームワークがダウンロードされる前に、ユーザー体験が選択されます。

どのように動作するか: タッチ (modernツールキット) とデスクトップ (classic ツールキット) のコンポーネント セットで、違うビューを作成できます。 マイクロローダーがデバイス、OS、ブラウザーを検出して、ビルド プロファイルをロードすることで適切なコンポーネントを提供します。 ビルド プロファイルには特定のテーマを適用できます。 いくつものビルド プロファイルを好きなだけ作成できますし、 それはビューに限らずデータ ストアや動作に関するコードも変更できます。

次のスクリーンショットでは、 アプリがデスクトップではどのように表示され、iPhone ではどう表示されるのかを確認できます。

デバイス固有のスタイルシート: スタイルシートはフレームワークがダウンロードされる前に選択されます。

どのように動作するか: Ext JS 6 には、classic ツールキット用、 (iOS、Android、Windows Phone のルック＆フィールを持った) タッチ インターフェース用のテーマ (Sass のスタイルシート) や、両方のツールキットで使えるスタイルシートが同梱されています。 マイクロローダーは、環境を検出し適切なテーマを提供します。

デバイス プロファイル: アプリケーションの起動時に各ユーザーのプロファイルが選択されます。

どのように動作するか: デバイスのプロファイルを作成し、それぞれのコードやコンポーネントの位置を変更することができます。 例えば、メールアプリをスマホで開いたときには、全てのメールの概要のリストが表示され、項目をタップするとメールが開きます。 しかし、メールアプリをタブレットで開いた場合は、リストは左側にドッキングして、メールの本体はスクリーンの右側に位置します。 このようなレイアウトをデバイス プロファイルで実現できます。 これは単にあるコンポーネントの位置を変えている (リストがドッキングしているかどうか) だけではありません。 その背後での、動作も変更されます。 (メールをタップしたときに、別なウィンドウが開くのか、リストの横にロードするのかの違い)

JavaScript によるレスポンシブ デザイン: コードが実行時に指定した条件に応じた動きをします。

どのように動作するか: JavaScript が実行時にある条件 (例えばスクリーン サイズ) に応じた動作をします。

あらゆる条件を指定して、ビューやデータ、振る舞いを対応させることができます。

Traditional Web Design with CSSによる伝統的なウェブデザイン: 表示が実行時に環境に応じた動きをします。

どのように動作するか: How it works: 以前からのレスポンシブ ウェブ デザインを使うこともできます。 ビューの単純なエレメントのスタイル設定に使えます。

まとめ

この記事では、Ext JS のユニバーサル アプリケーションについて説明しました。 私がどれほどユニバーサル アプリのアプローチを気に入っていて、 なぜアプリをコンバートしようと思ったのかを説明しました。 パート2 では、私が実際に音楽アプリをユニバーサル アプリにコンバートした方法をご覧に入れます。

これで、Part 2 も翻訳しなきゃならくなってしまった。(;´д｀)