HOME > 開発者向けBLOG > Ext JS >  The Atlantic Wire: Building for iPad on HTML5 and Sencha Touch

Technology Note 開発者向けBLOG

Ext JS

The Atlantic Wire: Building for iPad on HTML5 and Sencha Touch

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

この記事は、US Sencha社ブログ The Atlantic Wire: Building for iPad on HTML5 and Sencha Touchを翻訳したものです。
atlantic-wire-hero

ニューヨーク・タイムズ、スポーツ・イラストレーテッド、そして今やジ・アトランティックが、HTML5とSenchaフレームワークを利用して、パワフルでユーザーフレンドリーなアプリケーションを作っています。 なぜでしょう?このような一流パブリシャにとって、アプリケーションを作る方法を選ぶ事はテクノロジーの選択と同じ位のビジネス上の選択です。 彼らが気づいている事はHTML5に基づいたフレームワークを利用すればアプリケーション上でとても素晴らしいユーザーエクスペリエンスを提供しつつ、彼らのビジネスに最も重要となる流通、価格や広告のコントロールを確保できることです。 多くの場合出版社は、読者とともにあるので、新しいテクノロジーやビジネスモデルを採用する先駆けとなります。HTML5はその両面で革新する事が可能となります。

我々が思うには、今後のデジタル出版にはユーザーがアトランティックのコンテンツをいつでも、どのようにでもアクセス出来るように、オープン技術を使ったマルチプラットフォーム、マルチプロダクトの戦略が必要となる。
ジ・アトランティック

Sencha Touchで作ったジ・アトランティックのiPadのアプリケーションによって、ジ・アトランティックが出版の新たな高いバーをセットしました。 彼らの新しいWireタブレットアプリケーション(Sencha Touchで作られたtouch.theatlanticwire.com)は出版社がネイティブなアプリケーションを作らずに、HTML5の最新テクノロジーを生かしながら新しい革新的なメディア・エクスペリエンスを生み出す方法の素晴らしい例となります。 その上、広告などのツールでコンテンツの収益を保つことが出来ます。 その新しいWebアプリケーションでは、ジ・アトランティックがアップルストアからダウンロードの必要がない、とてもパワフルな情報を伝えるプラットフォームを提供できます。 ジ・アトランティックのような出版社は、HTML5やSenchaなどのフレームワークを使うことで、プラットフォームのベンダーに支配されずにコンテンツを自由に分配でき、彼らのユーザーをすでにいる場所(つまりWeb上で)で見つけることができます。

我々はこのアプリケーションに非常に興奮しています。 というのも155年の歴史を持つジ・アトランティックと直接仕事ができ、 また我々のエキスパートなコンサルティングパートナー『モーダス・クリエート』と 今回のアプリケーションを実現できたのですから。 彼らのビジョンはTheAtlanticWire.comジ・アトランティックの姉妹Webサイト)の最善のコンテンツとSenchaの一流のWebアプリケーションテクノロジーとを合わせて、どのデバイスでも素晴らしいユーザーエクスペリエンスを提供するアプリケーションを開発することでした。

「我々が思うには、今後のデジタル出版にはユーザーがアトランティックのコンテンツをいつでも、どのようにでもアクセス出来るように、オープン技術を使ったマルチプラットフォーム、マルチプロダクトの戦略が必要となる。 この新しいWireアプリケーションはそれを実現している」とキンバリー・ラオ(アトランティック・デジタルの副社長でゼネラルマネージャー)は言います。

The Atrantic Wireは、現時点で最も重要となるニュースと意見の権威ある指針です。 その記者はニュースメーカーやメディア全体(新聞、Webサイト、テレビ、ラジオ、雑誌)の意見をモニタリングしています。 タブレット用に開発されたこのアプリケーションは、Sencha Touchのコンポーネントとレイアウトを使い、読者がブラウザーの記事の見出しをスワイプしたり、記事をお気に入りに登録したり、色々な記事をブラウズできます。 その読者が色々な見出しをブラウズしながら、広告ポッドがシームレスで混ざってくるため、The Atrantic Wireが新しいタブレットのWebアプリケーションの一部として広告を売る事も出来ます。

atlantic-wire-2

HTML5のlocalStorage機能を使ってThe Atrantic Wireの読者が記事を簡単にオフラインで閲覧できるようになっています。

atlantic-wire-3

読者が興味あるタグを選択しながらMyWireのエクスペリアンスをカスタマイズできます。

atlantic-wire-1

オープンなHTML5プラットフォームを使って、出版社があらゆる収益モデルを活用できます。

独創的に、Senchaは多様な機能を提供しており、その多くの機能はThe Atrantic Wireのアプリケーションを開発する為に利用されました。 モデル・ビュー・コントローラーのアーキテクチャを採用して作られ、読者がニュースを見渡せるようにこのアプリケーションはコンテンツをカルーセルに表示しています。 localStorageプロキシーを使ってお気に入りの記事が保存されます。 The Atrantic Wireのアプリケーションが利用する独特な機能の一つはSencha Touchのマイクロローダーです。 この機能を使ってジ・アトランティックがアプリケーションを変更することができ、クライアントのブラウザーはただアプリケーションのパッチをダウンロードするだけで十分になります。 このお陰で、The Atrantic Wireの読者にとって、もっと速い起動時間を確保しながら、ユーザーエクスペリアンスに影響しないで開発者がアプリケーションを改変することができます。

その上、読者がブラウザの進むと戻るのボタンを使用して前に読んでいた記事に戻れるように、HTML5のヒストリーAPIを利用しながらこのアプリケーションに(どのメディアパブリッシングにも必要となる)ディープ・リンキングが含まれています。 これは広告を使って収益化しているどのWebサイトにも必要となります。 もしお客さんが広告をクリックしてページを移動すると、ユーザーが簡単に元のページに戻れるようにWebアプリケーションが元のページを保存するべきです。 これは我々のパートナーモーダスにとって、Sencha TouchとHTML5 History APIを使って簡単に実装できる機能でした。

The Atrantic WireFastbookのようなプロジェクトは本当にHTML5で可能な事やオープン基準で作るユニバーサルアプリケーションの多くの利点のショーケースとなります。 ジ・アトランティックのようなパブリシャはHTML5を利用してApp Storeの拘束に従わくてもすむアプリケーションを開発でき、彼らのビジネスモデルや技術配信を革新できるようになります。 HTML5を使えば、その会社は制限が無いユニバーサルアプリケーションを開発する技能を持ちます。

もしこのアプリケーションについて技術的な詳細についてもっと興味があれば、モーダス・クリエートはThe Atrantic Wireのアプリケーションのビジョンを実現する為に行った作業について技術情報を書きました。

もしHTML5の力を証明する応援をしたかったら、Sencha Touchを使用して素晴らしいアプリケーションを開発して我々の HTML5 Is Ready contest コンペに応募してください。 合計2万ドル以上の賞品の一部が当たるかもしれません!

PAGETOP