煎茶タッチ

煎茶タッチ
	iOS6テーマのSencha Touchアプリ
開発者	煎茶
最終リリース	2.4.2 / 2015年6月15日; 9年前
書かれた	JavaScript
オペレーティング·システム	Android、iOS、BlackBerry、Kindle、Windows Phone、Tizen
利用可能	英語
タイプ	JavaScript ライブラリ
ライセンス	GPLv3または商用
Webサイト	製品情報

Sencha Touchは、モバイル Web専用に構築されたユーザーインターフェイス(UI) JavaScript ライブラリ、またはWeb フレームワークです。Web開発者はこれを使用して、サポートされているモバイルデバイス上でネイティブアプリケーションのような外観と操作感を持つモバイルWeb アプリケーションのユーザーインターフェイスを開発できます。これは、 HTML5、CSS3、JavaScriptなどのWeb 標準に基づいています。Sencha Touch の目標は、 Android、iOS、Windows、Tizen、BlackBerryデバイスで実行される HTML5 ベースのモバイルアプリを迅速かつ簡単に開発し、同時にアプリにネイティブな外観と操作感を与えることです。

バージョン履歴とサポート

Sencha Touch は、人気の JavaScript ライブラリプロジェクトExt JS、jQTouch、Raphaëlが統合されて誕生した Sencha の製品です。Sencha Touch の最初のリリースであるバージョン 0.90 ベータは、2010 年 7 月 17 日に公開されました。このベータリリースは、Android および iOS ( iPhone、iPod Touch、iPad ) を実行するデバイスをサポートしていました。

その後、最初の安定バージョン 1.0 が 2010 年 11 月にリリースされました。バージョン 1.1.0 では、BlackBerry OS 6.0 を実行するデバイスのサポートが追加されました。

最新リリースのSencha Touch 2.4.2は2015年6月にリリースされ^[1]、以下のブラウザとプラットフォームで動作するように設計されています。

Android ブラウザ、Android 用 Google Chrome
ブラックベリー10
Badaモバイルブラウザ
Kindle Fireブラウザ
ティゼン
Windows Phone 8および Windows 8 IE10
モバイルサファリ

Firefox Mobile をサポートする予定は発表されていません。

特徴

MVCアーキテクチャ

Sencha Touch は、アプリケーションデータ、制御コード、ビューを分離する MVCパターンに従います。この分離により、大規模なアプリケーションを柔軟かつ簡単に保守できるようになります。

ウィジェットコンポーネントとカスタマイズ可能なテーマ

Sencha Touch には、 jQuery などの他のUIフレームワークへの依存を排除する組み込みのDOM操作インターフェイスがあります。モバイル Web アプリケーション内で使用するグラフィカルユーザーインターフェイスGUI ベースのコントロール(またはコンポーネント)のセットが含まれています。これらのコンポーネントはタッチ入力用に最適化されています。コンポーネントは次のとおりです: ^[2]

デバイス固有のテーマと効果を備えたボタン
電子メールのテキストフィールドなどのフォーム要素
日付選択と住所
スライダー、セレクター、コンボボックス
勢いのあるスクロールとインデックスバーを備えたリストコンポーネント
最小限のアイコンセット
ツールバーとメニュー
移動可能なタブ、下部のツールバー
ピンチやズームなどのマルチタッチジェスチャをサポートするマップコンポーネント
カルーセル

すべてのコンポーネントは、対象デバイスに応じてテーマを設定できます。これは、 CSS 上に構築されたスタイルシート言語であるSassを使用して行われます。ネイティブに似たテーマには、Cupertino Classic (iOS6.x 以下用)、Cupertino (iOS 7 用)、Mountain View (Android 用) などがあります。^[3]

トランジション、アニメーション、適応型UI

Sencha Touch には、現在の要素の上または下へのスライド、ポップ、フリップ、キューブなど、8 つのトランジション効果が組み込まれています。タッチイベントから構築された一般的なタッチジェスチャをサポートしています。タッチイベントはWeb 標準ですが、 Android、iOS 、および一部のタッチ対応デバイスでのみサポートされています。これらのジェスチャは、タップ、ダブルタップ、スワイプ、スクロール、ピンチです。

Sencha touch は HTML5 ベースであるため、提供されるレイアウトは本質的に非常に適応性があります。

チャート作成

Sencha Touchは、説明凡例付きの円グラフ、棒グラフ、折れ線グラフなどのチャートコンポーネントもサポートしています。これらのコンポーネントは、ピンチやズームなどのインタラクティブ機能をサポートしています。ExtJSのグリッドコンポーネントと同様に、Sencha TouchはTouchGrid機能を提供します。^[4]

プロフィール

Sencha Touch のプロファイリングでは、さまざまな画面サイズに合わせて異なるプロファイルを作成できます。アプリケーションがロードされると、フレームワークがデバイスの種類を判別し、対応するプロファイルがどのコンポーネントと機能を交換する必要があるか、および呼び出す必要がある特定のビューとコントローラーを判別します。これにより、開発者はデバイスの種類ごとに異なるアプリケーションを作成する手間が省けます。^[5]

基本的なアプリケーションディレクトリ構造

Sencha Touchアプリケーションの基本的なファイルとディレクトリ構造は次のようになります。^[2]^[6]

開発者ツールとプラグイン

Sencha Touch は、開発を容易にするためのIDEプラグインを提供します。これらのプラグインの利点には、コード生成と自動補完、コードリファクタリング、フレームワークコードベースとカスタムクラスへのナビゲーションの容易さなどがあります。Sencha Touch には、 JetBrains、Visual Studio、Eclipseなどの一般的な IDE 用のプラグインがあります。

クロスプラットフォームのHTML5アプリを構築するためのビジュアルアプリビルダー、Sencha Architectがあります。テーマ設定やコマンドライン統合などの便利な機能を提供します。^[7]

使用例

Sencha Touch では、Ext.Map コンポーネントを使用してアプリケーションでマップを簡単に使用できます。^[8]GoogleMaps API が機能するには、「Google Maps API」JavaScript ファイルの組み込みが不可欠です。^[9]

<!DOCTYPE HTML> 
< html > 
< head > 
< title >タッチテスト</ title >

<!-- Sencha Touch CSS --> 
< link  rel = "stylesheet"  type = "text/css" 
         href = "sencha-touch/resources/css/sencha-touch-debug.css"  />

<!-- Google マップ API --> 
<スクリプト タイプ= "text/javascript" 
              src = "//maps.google.com/maps/api/js?sensor=true" ></スクリプト>

<!-- Sencha Touch JavaScript コード --> 
< script  type = "text/javascript"  src = "sencha-touch/sencha-touch-debug.js" ></ script >


< ! -- アプリケーション スクリプト --> < script  type = "text/javascript" > 
Ext.setup ( { onReady : function () { // ルート パネルを作成するnew Ext.Panel ( { fullscreen : true , items : [ { xtype : " map " } ] } ); } }); </ script >   
      
      
       
         
         
          
               
          
        
      
    
  


</ヘッド>

<本文> 
< /本文> 
</html>

Ext.setup()は、アプリケーションを初期化し、ビューポートとイベントシステムを設定するための出発点です。^[10]

ネイティブアプリケーションとの比較

Sencha Touchは、以前はネイティブアプリケーションでのみアクセス可能だった加速度計、カメラ、コンパス、位置情報、キャプチャ、^[12] InAppBrowser、メディア、通知、スプラッシュスクリーン、ストレージ（SQLite）などのPhoneGap ^[11]とApache Cordova APIをサポートしています。Sencha TouchはJavaScriptを利用してほとんどのUIコンポーネントを作成し、 DOM要素のCSSをオンザフライで変更します。JavaScriptエンジンは以前よりも効率的で高速になったため、Webアプリはネイティブアプリとほぼ同じようにスムーズに動作します。

参照

参考文献

^ 「BlackBerry 10.3 エクスペリエンスが向上した Sencha Touch 2.4.2 を発表」。sencha.com。2015年 6 月 15 日。
^ ab Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Pro Smartphone Cross-Platform Development . アメリカ合衆国: APress. p. 226. ISBN 978-1-4302-2869-1。
^ 「Sencha Touch 2 リリースノート」。cdn.sencha.com。
^ 「Sencha Touch 2.3 を発表 – タッチグリッド、Cordova サポート、新しいテーマ」。sencha.com。2013年10 月 1 日。
^ Clark, John Earl; Johnson, Bryan P. (2013 年 4 月)。Creating Mobile Apps with Sencha Touch 2。バーミンガム、イギリス: Packt Publishing。233、234 ページ。ISBN 978-1-84951-890-1。
^ 「タッチガイド - Sencha Touch を使い始める」。docs.sencha.com。
^ 「Sencha Architect」。sencha.com。2015年3月25日。
^ “タッチ - Sencha Docs”. docs.sencha.com。
^ 「IBM Developer Works - Sencha Touch でモバイル Web アプリケーションを構築する」IBM。
^ 「タッチガイド - イベント」。docs.sencha.com。
^ 「Sencha Touch 内で PhoneGap を活用する」。phonegap.com。
^ 「タッチガイド - ネイティブ API の使用」。docs.sencha.com。

文献

ジーザス・ガルシアとアンソニー・デモス、ミッチェル・シモエンス、Sencha Touch in Action、ISBN 978-1-61729-037-4
Ajit Kumar、Sencha Touch Cookbook、ISBN 978-1-84951-544-3。
Hiren J. Dave、Instant Sencha Touch、ISBN 9781782165996。
Ajit Kumar、『Sencha Touch Cookbook - 第 2 版』、ISBN 978-1-78216-918-5。
Lee Boonstra、『Hands-On Sencha Touch 2: A Real-World App Approach』第 1 版、ISBN 978-1-44936-652-0。
Ajit Kumar、Sencha MVC アーキテクチャ、ISBN 978-1-84951-888-8。
Matthew David、HTML5 モバイルウェブサイト、jQuery、Sencha Touch、その他のフレームワークによる HTML5 の高速化、ISBN 978-0-24081-814-6。
https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch

外部リンク

公式サイト

[Announcing_Sencha_Touch_2.4.2_with_Improved_BlackBerry_10.3_Experience-1] 「BlackBerry 10.3 エクスペリエンスが向上した Sencha Touch 2.4.2 を発表」。sencha.com。2015年 6 月 15 日。

[:0-2] Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Pro Smartphone Cross-Platform Development . アメリカ合衆国: APress. p. 226. ISBN 978-1-4302-2869-1。

[3] 「Sencha Touch 2 リリースノート」。cdn.sencha.com。

[4] 「Sencha Touch 2.3 を発表 – タッチグリッド、Cordova サポート、新しいテーマ」。sencha.com。2013年10 月 1 日。

[5] Clark, John Earl; Johnson, Bryan P. (2013 年 4 月)。Creating Mobile Apps with Sencha Touch 2。バーミンガム、イギリス: Packt Publishing。233、234 ページ。ISBN 978-1-84951-890-1。

[6] 「タッチガイド - Sencha Touch を使い始める」。docs.sencha.com。

[7] 「Sencha Architect」。sencha.com。2015年3月25日。

[8] “タッチ - Sencha Docs”. docs.sencha.com。

[9] 「IBM Developer Works - Sencha Touch でモバイル Web アプリケーションを構築する」IBM。

[10] 「タッチガイド - イベント」。docs.sencha.com。

[11] 「Sencha Touch 内で PhoneGap を活用する」。phonegap.com。

[12] 「タッチガイド - ネイティブ API の使用」。docs.sencha.com。