Zofari は人が世界を体験していく方法を変えようとしているサンフランシスコの小さなチームです。我々が思うには、人がある場所について実際に感じることと、デジタルで表されていることの間に大きなギャップがでてきていると思っています。 Zofari では、そのギャップを埋めるようにしています。

弊社の代表的プロダクトは Zofari モバイルアプリケーションで、これは場所に対する Pandora と呼んでいます (Pandora は無料の音楽サービスです)。ユーザーはお気に入りのレストラン、バー、カフェ、地域に基づいた“tplace stations ”を作成します。我々の独自のおすすめエンジンを使って、現在地付近で雰囲気、体験、目的のような人間的な概念に基づいたユーザーのお気に入りの場所に似ている場所を表示します。我々の目標は 15 秒以内にユーザーが気に入る場所を見つけられるようにアシストすることです。レビューなどのごちゃごちゃしているものを外して、ただ信用できる情報から素晴らしいおすすめをしていくだけです。

なぜSencha Touchを選んだのか

小さなベンチャーが、とても競争の激しい環境において市場シェアを素早く獲得するには、素早く動いて、反復する必要がありました。 Sencha Touch には豊富なライブラリとネイティブのような UI コンポーネントが揃っています。その上、簡単に使えるデータビュー/モデル/ストア/プロキシのワークフローは、新しいインターフェイスのプロトタイプの作成やそれをサービスに連携するのがとても簡単で速くできます。基本のナビゲーションビューとは別に、 Zofari のユーザーインターフェイスは検索結果を見るためにスワイプ可能なカルーセルとグループ化された一覧に大きく依存しています。シンプルな UI ですが、ネイティブな感触で実装するのは意外と難しいです。 Sencha Touch に組み込まれたジェスチャー認識と設定可能な表示のお陰で、ユーザーが使いやすいインターフェイスを簡単に提供することができます。我々のバックエンドにはユーザーインタラクションと統合の基本が用意されており、数週間、数日ではなく、数時間で新しい機能を準備して、テストを始めることができます。

コアな機能性をしっかり完成させることの他に、ブランド付きのとても魅力的なインターフェイスがあることもとても重要でした。Sencha Touch のテーマを設定するための Compass と Sass の利用で、とても簡単にコンポーネントに組み込まれたスタイルを調整し、完全にアプリケーションのルックアンドフィールを変更できました。例えば、我々の初期インターフェイスでユーザーがおすすめのレストランをカルーセルでスワイプしていけます。前後のカードを少しのぞけて、アクティブのカードでいくつかの切り替えのエフェクトを有効にするには、スタイルを変更したカスタムな Ext.Carousel を生成しました。わずかな Sass 変数の変更でツールバーとボタンのスタイルも簡単に変更できました。ハードウェア アクセラレーションされた CSS3 とアイコンのフォントなどの小さいが重要なもののお陰で、我々のアプリケーションがモバイルブラウザでスムーズに動作することを確保しました。その上、 Sencha Touch はモバイルブラウザのレガシーバージョンで発生するおかしな動作にも対応し、古い端末でも動作するのが素晴らしいところです。

最初の時点では Sencha Architect が様々なコンポーネントの微妙なニュアンスを学ぶためにかかる時間を大きく削減してくれて本当に役に立ちました。初期のスケルトン化からデプロイ用のパッケージ化まで、 Cmd に多くの手作業を済ませてもらえたため、これからは他の方法でウェブベースのプロダクトを構築することは考えられません。

Sencha Touchを利用する事業効果

Sencha Touch を利用して、リソースと開発サイクルに関して、大きな節約ができました。費用が少ないベンチャー企業なので、少ないリソースをなるべく活かす必要がありました。 Sencha Touch があると、プラットフォームに依存しない迅速な開発サイクルを利用できて、弊社の三倍の規模がある企業より多くのプロダクトより速く公開できました。 iOS, Android, Kindle, モバイルウェブ上で拡張できることで、いくつか手頃な流通チャネルが開き、弊社の予算が少ないマーケティング部にとっては素晴らしいことでした。

新人の開発者へのアドバイス

• ツールを利用して、ためらわずに、どうぞもっと深く入り込んで下さい。Sencha Touch の利用を開始するにはチュートリアルの内容を超える開発や、複雑なインターフェイスを構築することになる場合は難しいこともあります。 Architect では豊富な UI コンポーネント構造を楽に理解していくことができるので、アプリケーションの構造に関するベストプラクティスを学ぶのに最適です。目指している結果を完全に実現するには、 Sencha フレームワークとその強力なコアを活用し、独自のカスタムコンポーネントを実装する方法が最適です。何をしたいと思っても、 Sencha のドキュメントはとても詳しく、開発者コミュニティも素晴らしいです。
• アプリケーションをスマートにして下さい。モバイルウェブ開発の一つの課題は（特に Touch のような堅牢な UI フレームワークでは）DOM が管理しやすく、パフォーマンスを高い状態に保つことです。アプリケーションの基本的な部分が完成した後に、コンポーネントの入れ子が多すぎたり、メモリに必要以上のビューが格納されたりしていないか確認して下さい。できるなら不要なコンポーネントを破棄して下さい。そして CSS や細かいコンポーネントコンフィグを時間をかけて探検して下さい。理想のユーザーインターフェイスを得るためには、無理やり作成していくより、いくつかシンプルな CSS ルール、または属性を利用すると可能なことが多々あります。
• Sass と Compass を採用してください。ビルトインのコンポーネントのコンフィグで出来ることは様々ですが、アプリケーションにプロらしい仕上げをかけたい場合には、 Touch のテーマの機能を充分利用する必要があります。 Sencha によりデフォルトのスタイルを SCSS でオーバーライドしたり変更したりすることは JavaScript と同じくらい簡単になりましたので、時間をかけて探検することをおすすめします。

最後に

素早い反復と効率的な開発サイクルが重要だと考えている開発者チームにはおすすめです。 今後 Zofari を拡張していくにあたって、弊社にとってとても重要なツールだと思っています。