煎茶タッチ
煎茶タッチ
開発者煎茶
最終リリース
2.4.2 / 2015年6月15日 ( 2015-06-15 )
書かれたJavaScript
オペレーティング·システムAndroid、iOS、BlackBerry、Kindle、Windows Phone、Tizen
入手可能な英語
タイプJavaScriptライブラリ
ライセンスGPLv3または商用
Webサイトwww.sencha.com/products/touch​​​​

Sencha Touch は、モバイルWeb向けに特別に構築されたユーザーインターフェース（UI）JavaScriptライブラリ、またはWebフレームワークです。Web開発者は、Sencha Touchを使用することで、対応モバイルデバイス上でネイティブアプリケーションのようなルックアンドフィールを持つモバイルWebアプリケーションのユーザーインターフェースを開発できます。Sencha Touchは、 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 ]、以下のブラウザとプラットフォームで動作するように設計されています。

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のGridコンポーネントと同様に、 Sencha TouchはTouchGrid機能も提供しています。[ 4 ]

プロフィール

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

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

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

ディレクトリ/ファイル 説明
アプリ アプリのモデル、ビュー、コントローラ、ストア、プロファイルを保持するメインディレクトリ
アプリ.js アプリケーション全体の設定を保持するファイルです。すべてのモデル、ビュー、コントローラー、ストア、プロファイルへの参照がここにあります。これらの参照が読み込まれると、メインのアプリ起動関数が呼び出されます。この関数は最初のビューを読み込むため、アプリケーションの最初のポイントと考えることができます。
インデックス.html アプリの メインHTMLファイル。モバイルアプリでは複数のページや画面にまたがる場合があります。
リソース アプリに必要なすべての画像、CSS、その他の外部ファイルを保持するディレクトリ
アプリ.json アプリの設定ファイル
パッケージャー.json ネイティブ パッケージを作成するために使用されるファイル
ext-touch.js これは Sencha の JavaScript ライブラリです (開発段階では ext-touchdebug.js が推奨されます)
ext-touch.css これはSenchaのCSSライブラリです

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

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

Sencha Architectは、クロスプラットフォームのHTML5アプリを構築するためのビジュアルアプリビルダーです。テーマ設定やコマンドライン統合といった便利な機能を提供します。[ 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アプリケーションはネイティブアプリケーションとほぼ同等にスムーズに動作します。

参照

参考文献

  1. ^ 「BlackBerry 10.3エクスペリエンスが向上したSencha Touch 2.4.2を発表」 sencha.com 2015年6月15日。
  2. ^ a b 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月). 『Sencha Touch 2を使ったモバイルアプリの作成』イギリス・バーミンガム: Packt Publishing. pp. 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 。

参考文献

「 https://en.wikipedia.org/w/index.php?title=Sencha_Touch&oldid=1265937793」から取得