HOME > 開発者向けBLOG > Ext JS >  見た目の美しいユニバーサルアプリをExt JS を使って作る方法 パート1

Technology Note 開発者向けBLOG

Ext JS

見た目の美しいユニバーサルアプリをExt JS を使って作る方法 パート1

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

この記事は、US Sencha社ブログHow to Build a Great Looking Universal App with Ext JS – Part 1 (2015年10月21日| Lee Boonstra) を翻訳したものです。

背景

2011年ごろ、アプリを何か作りたいと考えていました。私は音楽が大好きで、Spotifyを愛用していました。巨大な楽曲のデータベースの中から好きな曲を聴けるということが非常に魅力的でした。しかしその中でもいつも気になっていたことは、曲を手動で検索しなければならないということです。これはノートパソコンを使用している時には特に問題はないのですが、歩いている時や自転車に乗っている時にスマートフォンで利用する際には不便でした。バーチャルなキーボードに入力するというのは多少ストレスが溜まります。

そのため私は、LastFm アカウント(聴いた音楽の記録をとるオンラインデータベース) に接続するSencha Touchh アプリを作りました。そのアプリは私が好きな音楽をリストアップし、ワンタップでその曲をSpotify で再生することができます。

Sencha Touch app

このアプリを作るのにSencha Touch は大いに役に立ちました。強力でスムーズなスクロールリストとスタイルシートのおかげで、iPhoneでの見た目も素晴らしく仕上がりました。作り始めてから使えるようになるまでの時間もかなり短く済みました。

私はこのアプリを大変気に入ったため、共有することに決めました。Cordovaでアプリをラップし、Apple App Store にデプロイしました。そしてさらに、私がそのアプリをデスクトップでも使い始めていることに気づきました。曲を選択するのに非常に便利だったからです。そこで私は自分のウェブサーバーにデプロイし、Google Chrome Web Store に公開しました。

その一週間後、Chrome Web Store でレビューをチェックしました。残念なことに評価の低いレビューばかりでした。「なんて見た目の変わっているアプリなんだろう」「なぜマウスを使ってスクロールできないのか」 といったものです。それもそのはずです。なぜならこのアプリは元々iPhone を意識してデザインしていたからです。スタイルシートのせいで見た目はiPhoneアプリっぽく、Sencha Touch のTouchイベントとジェスチャーを使って作っていたのでタッチアプリのような挙動をしていました。楽曲リストをスクロールするためには、リストをタップして上下にドラッグする必要がありました。タッチ端末でそれは普通のことですが、デスクトップではあまりないことです。私は自分のアプリのデスクトップ版が必要だと気づきました。

Ext JS app

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つのコードベースで、アプリをどの端末でも実行することができるようになります。

私のアプリの技術スペック

話を進める前に、私のアプリの技術スペックを紹介します。

  • URLスキームを使って曲をSpotifyで再生しています
  • LastFm からのデータの取得には外部のJavaScript APIを使用しており、これはカスタムプロキシになくてはならず、そしてこれはパッケージの一部になっています
  • LastFm ユーザー名はHTML5ブラウザローカルストレージに保存しています
  • スマートフォンはモダンタッチコンポーネントを認識します。現時点ではiOSビューのみです
  • タブレットとデスクトップはリッチクラシックデスクトップコンポーネントを認識します。これはSpotify風の見た目と印象になっています
  • MVVMパターンに従っています

ユニバーサルアプリ vs レスポンシブウェブデザイン

ユニバーサルアプリがSenchaフレームワークの中でどう動くのかと、ある特定の環境に反応するためにレスポンシブウェブデザインがモバイルウェブサイトにどう利用されているのか、には大きな違いがあります。

レスポンシブウェブデザインは従来スタイルシートの中で行われ、ここで関連ユニットやパーセント値、特定のHTMLエレメントを再オーダしたり表示/非表示を切り替えられるブレイクポイント(メディアクエリ) を使います。

下記のコードスニペットをご覧ください:

@media all and (min-width: 800px) and (max-width: 1024px) {
 ul li.products {
     width: 50%;
    display: inline-block;
 }
}
@media all and (min-width: 1025px) {
 ul li.products {
     width: 25%;
display: inline-block;
 }
}
@media all and (max-width: 799px){
 ul li.products {
     display: none;
 }
}

このコード例にはいくつかのブレイクポイントがあります。ビューポート幅が799px以下の小画面、800pxから1024pxの間の画面、そして1025pxより幅の広いビューポートをもった大画面です。大画面でリストエレメントポジションは、25%幅のサイズで続いて並びます。中画面でこれは50%であり、小画面(スマートフォンなど)ではこのリストは非表示となります。

この技術はウェブサイトでは非常に効果がありますが、実際のアプリケーションではそうとも限りません。なぜでしょうか。

  • スマートフォンを使っている場合、回線速度の遅いモバイルネットワークであったり、もしくは高額なデータプランであったりします。これではリストエレメントやデータを見ていなくとも高価な通信となってしまいます
  • また、画面が小さい場合にはテキストを変えたいかもしれません。私はコピーライターの方々と数多くの仕事をしてきましたが、スマートフォンに表示する文字はデスクトップとは異なるものにすべきという意見はよく聞きました。大量の文字を小さい画面で読みたいとは誰も思わないからです
  • レスポンシブウェブデザインのみを使っているだけでは、コンテンツをより良くしたり端末の機能を活用する機会を恐らく失ってしまいます。これは一つのコードベースで動かしているからです。例えばフローティング表示のカレンダーコンポーネントはデスクトップでの見た目は素晴らしいですが、スマートフォンでは上手く扱うことができません。テキストのハイパーリンクはマウスでアプリをコントロールしている場合は何の問題もありませんが、小さなタッチ端末ではタップするのに一苦労かかります。ユーザーはiPhoneに組み込まれているdatepickerやリンクとして機能する大きいボタンなどのネイティブアプリの動きに慣れています。多くの場合、レスポンシブなモバイルウェブサイトはネイティブアプリと同様の体験を用意することができません

以上の点で、Senchaを利用したアプローチは他と異なり優れています。Ext JS 6 のユニバーサルアプリはただレスポンシブデザインであるものに比べると圧倒的です。皆さんはエレメントの再オーダや表示/非表示にとどまらずにUIをコントロールされたいことでしょう。アプローチの仕方はいくつもあり、これらの多くはビューに限定されません。データやふるまいを制御することもできます。

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

仕組み:タッチ(モダンツールキット)またはデスクトップ(クラシックツールキット)のコンポーネントセットで別々のビューを作成することができます。マイクロローダが端末、やOS、ブラウザを探知し、ビルドプロフィールをロードすることで正しいコンポーネントセットを選択してくれます。そのビルドプロフィールに特定のテーマを紐づけることもできます。ビルドプロフィールに数の制限はなく、またこれはビューに限定していません。別々のデータストアやふるまいのコードも用意することができます。

以下のスクリーンショットで、私のアプリケーションがデスクトップとiPhoneでそれぞれどのように見えるか確認していただけます。

App UI on desktop and phone

端末に合わせたスタイルシート: フレームワークをダウンロードする前にスタイルシートが選択されます

仕組み: Ext JS 6 には、クラシックツールキットやタッチインターフェース(見た目や操作感がiOS、Android、Windows Phoneと同様) に適したテーマ(Sass スタイルシート) や、両方のツールキットに適したスタイルシートが付属しています。マイクロローダが実行環境を判別し、正しいテーマを動かします。

Device specific stylesheets

端末のプロフィール: アプリケーションの起動時に各ユーザのプロフィールが選択されます

仕組み: デバイスプロフィールを作成することも可能です。異なったコードや異なったコンポーネントポジショニングがここに含まれます。例えば電話でメールアプリを開いた場合、全てのメールのリストが表示され、アイテムをタップするとそのメールが開かれます。一方、タブレットでメールアプリを開いた場合はリストは左側に固定され、メール本文は画面の右側に表示されます。デバイスプロフィールによりこのようなレイアウトを実現することができます。特定のコンポーネントをただ再配置するだけではありません(リストを固定するかどうかなど)。内部のふるまいも異なります(メールをタップした場合に別画面を開設するか、リストの横でロードするか)。

Device profiles

JavaScriptを使ったレスポンシブデザイン: コードがランタイムの基準に反応します

仕組み: JavaScript がプログラム実行環境の状態(画面サイズなど) に反応します。どのようなカスタムコンディションでも作成することは可能で、ビューやデータ、ふるまいをそこに反応させることができます。

Responsive Design with JavaScript

従来のウェブデザインと CSS: ビューがランタイムの環境に反応します

仕組み: 従来のレスポンシブウェブデザインを使うこともできます。ビューのシンプルなエレメントをスタイリングする際にこれを利用できます。

まとめ

この記事では、Ext JS 6 ユニバーサルアプリとは何であるかを解説し、ユニバーサルアプリのアプローチについて何が好きか、そしてなぜ私がアプリを移行したかをご説明しました。パート2ではどのようにして音楽アプリをユニバーサルアプリに移行したかを具体的に解説いたします。

PAGETOP