HOME > 開発者向けBLOG > Sencha Blog >  Sencha カスタマースポットライト – pixx.io

Technology Note 開発者向けBLOG

Sencha Blog

Sencha カスタマースポットライト – pixx.io

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

この記事は、US Sencha社ブログ Ext JS and Sencha Touch Customer Spotlight – pixx.io を翻訳したものです。

pixx.io pixx.io は簡単に使えるモダンなメディア管理アプリケーションです。主にセミプロからプロのカメラマン、クリエイティブエイジェンシー、操業開始したばかりの企業や中小企業のニーズに応えるためのアプリです。ソフトウェアは Ext JS 5 と Sencha Touch 2.4 で作られています。それに加え、PHP と Perl を MySQL データベースと組み合わせて使用しています。pixx.io はユーザーが様々な種類のメディアを集め、管理できるアプリです。最先端のユーザーインターフェース、直感的な検索フィールド、様々なフィルター(GPS、日付、作者、オリエンテーション、など)は、ユーザーが必要とするファイルを簡単に瞬時に見つけることができます。他にも pixx.io はファイルを仲間やお客様と安全な環境でシェアすることもできます。ユーザーはどのようなサイズで、どれくらいの期間データをアクセス可能にするかを設定することができます。また、イメージに自由にウォーターマークを埋め込むことも可能となっております。

The Media View

Ext JS を選んだ理由

pixx.io のインターフェースを魅力的にするため、そしてカスタマーフレンドリーにするために Ext JS を選びました。それは、うちのデザイナーが全てのスタイルを自由に変えられ、全てのデスクトップエレメントを思い通りに設定することができたからです。また、お客様に最高のパフォーマンスを約束するために、素早くスムーズに動くバックエンドプロセスを構築することを、フロントエンドフレームワークが制限しなかったことも重要でした。また3つ目の目標は、アプリケーションを市場に間に合うようにデリバリーすることでした。

我々は Ext JS を 5年以上使用していますが、様々なソフトウェア開発プロジェクトで素晴らしい結果を得ました。それ故に、pixx.io. を作る上で最高のフレームワークだと決めました。Ext JS を長期間使用している主な理由は以下の通りです。

  • Ext JS コンポーネントは我々が作ろうとしているソフトウェアと相性がものすごく良いです。Ext JS コンポーネントが我々のニーズに応えられないことはほぼありません。
  • Ext JS を使えばコンポーネントを拡張したりテーマ付けするのが簡単です。
  • Ext JS はお客様が期待しているクロスブラウザ互換を提供してくれます。
  • Sencha の提供する個別サポートとトレーニングは素晴らしいです。
  • Sencha コミュニティと、使用できるユーザーエクステンションは創造性を刺激してくれます。
  • Ext JS と Sencha Touch の完全な連携により、作業はより簡単になり、アプリケーションにとって新しい、幅広い可能性が生まれます。

pixx.io を作るのに以下の Ext JS コンポーネントを使用しました。

DataViews

pixx.io の主要なページはデータビューを使って作りました。描写されるものによって、様々なテンプレートを使用し、それぞれのページの見た目を調整しました。テンプレートの数は無限に存在するので、データビューの見た目を変えるのは非常に簡単でした。また、同じモデルのストアもアプリケーションで使用しました。これは、各ビューが別のコンテンツで埋められるということでもあります。このオプションは主に Media View (上記)や Collections View (下記)で使用されています。

それに加え、ボタンやパネルをテンプレートに混ぜ入れ、各ページで正しい機能性を提供しています。

Collections View

複数のファイルを選択してエディット、ダウンロード、リロケート、そしてグループする場合も同じデータビューが使用されています。唯一違うのは、データビューのスタイリングです。そして、データビューはボタン、タブパネル、フォームやグルーピンググリッドとも結合されています。

私たちは DataView.DragSelector を使用することでデータビューの使用性と可能性を広げています。

ビルトインなドラッグ&ドロップ機能により、ユーザーがスタンダードなデスクトップアプリケーションでの体験から期待する機能を統合することが実現できました。例えば、ユーザーが複数のデータビューアイテム(pixx.io では画像やファイルのサムネイル)をマウスオーバーイベントで選択できることなどです。そして 「Explorer」 で Finder のように複数のデータビューアイテムをシフトキーや Ctrl キーを押すことで操作することができます。

Windows

ユーザーがどこかのページの画像をクリックした場合、pixx.io はウィンドウを開き、その画像を実際のサイズで表示し、詳しい情報も提供します。これには様々なレイアウトが使用されています。ボタン、タブパネル、フォーム、そしてグルーピンググリッドはここでも登場します。このコンビネーションにより、たくさんのユーザーアクションを提供し関連するデータの概要を同時に表示することができます。

タブパネルを使用することで、ユーザーはタグカタログを開くことができ、手動でファイルをタグ付けすることができ、自動的に pixx.io によって設定されたタグを編集したり削除することもできます(メタデータを読み取ったり、EXIF や IPTC などの詳細を読み取ることで)。この機能性を実装するには、コンボボックスとスプリットボタンを使用しました。

結合されたコンボボックスフィルター、そして特にコンボボックスなどの機能は、ユーザー体験を格段に向上させます。これはユーザーがメディアデータベースで手動で画像やファイルをタグ付けする手間を最小限に留めるからです。Ext JS を使うことでプリセットキーワードのカタログを実装しました。これは csv ファイルをアップロードすることで簡単にアップデートできるものです。このキーワードカタログを使用することで、コンボボックスはユーザーが打ち込んだ最初の数文字から適切なキーワードを表示し、変換候補を文字が入力される度に瞬時に表示します。

ユーザーによって選択、もしくは入力されたキーワードはスプリットボタンとして表示されます。スプリットボタンを使用することで簡単にキーワードを使用することができます。特にユーザーが後でキーワードの一つを削除もしくは変更したい場合に有効です。この機能の開発は非常に簡単でした。なぜなら buttontext がキーボードを表示するために使われているため、コンポーネントを変更する必要もありませんでした。

Sencha Touch を選んだ理由

最初のベータテスト中、60%以上のベータテスターがシェアされた画像コレクションをモバイルデバイス(スマホやタブレット)で表示させようとしていた事に気付きました。当時は モバイルに最適化された pixx.io がリリースされていませんでした。私たちは Sencha Touch を既に使ったことがあったので、それを使ってアプリケーションのユーザーインターフェースをモバイルユーザーが使用できるように拡張し最適化しました。

一番の利点は時間がセーブできたことです。Sencha Touch を使う事で、なんと開発初日にモバイルアプリケーションの最初のバージョンを作成することに成功しました。これは、シェアされた画像がデータビューに表示されるため実現可能でした。pixx.io のモバイルバージョン内のナビゲーションは、スワイプ、スライド&ピンチ、などの一般的なジェスチャーを使用して作りました。これらのジェスチャーを使うことで、ユーザーはシングルフォトビューに表示を簡単に切り替えることができます。もし Sencha Touch フレームワークを使わずにこのアプリのプログラミングをゼロから始めていたら、おそらく同じ結果を得るには数週間は必要だったと思います。

新しい開発者へのアドバイス

Sencha を愛する理由の1つは、継続的にパフォーマンスが改良されることと、様々なフレームワークの開発へのビジョンや専門知識の豊富です。最新の機能は非常に簡単に使用できます。製品の基本的な理解と、より複雑な使用用途のための徹底したトレーニングも提供しています。Ext JS を使い始めた開発者全てにオンラインでも教室でもコースに参加することをお勧めします。受けることで Sencha フレームワークを使用してアプリを作るということがどれくらい可能性があるかを知ることができます。

Sencha 製品が好きなもう1つの理由は、ドキュメンテーションフォーラムやコミュニティがが優れているため、開発中どこかで迷ってしまってもすぐに助けてくれる環境があります。そして、それらにより創造性も刺激され複雑な顧客問題も解決してくれます。

また Sencha Support も非常にお勧めしています。Google search や Ext JS コミュニティーにとっては具体的すぎる質問があったのでサポートチームをコンタクトした所、非常に早い対応で質問や問題を解決してくれました。

最後に

Ext JS はチーム開発を促進し、繰り返しの多い無駄な作業を開発者から取り除くためソフトウェアプロジェクトを届けるスピードも格段に早くなります。それと同時に、コンポーネントを自分のニーズに合わせてカスタマイズをできる無限の可能性も示してくれます。

そして、Sencha Touch などの Sencha ポートフォリオ内にある幅広い他の製品も非常に役立ちます。そしてそれらは簡単に組み合わせて使うこともできます。

pixx.io の機能を強化するために、私たちはアプリにビデオとサウンドアーカーイブを組み込むために開発を進めております。Ext JS を使う事でプログラミングプロセスの面倒な部分はフレームワークが担ってくれるので、デザインワークに集中することができています。

pixx.io を試してみたければ、独立したサーバーソリューションとして、もしくはハードウェア & ソフトウェアバンドルでもある pixx.io box があります。pixx.io box はカメラマンや小さなチームのために必要なもの全てを備えた一体型です。スタイリッシュでハイパフォーマンスなミニサーバーと pixx.io ソフトウェアが含まれています。

PAGETOP