難スマートフォン開発時の課題スマートフォン開発には、以下の課題がある。Mobile」というモバイル用JavaScriptライブラリについて発表しました。Touch』というモバイル用JavaScriptライブラリについて説明していきます。初版0.9ベータ公開。初の安定版である1.0が公開。1.1でBlackBerry対応2012年3月2.0が公開。License(Free)無料で商用利用可能。License開発したソースを一般公開する義務がある。License商用可能な有料ライセンス。Archtectなど製品一式を利用可能。MVCパターンを利用した開発が可能WebKitとは?アップルが中心となって作成しているオープンソースのHTMLレンダリングエンジン群の総称で、HTML、CSS、JavaScriptなどを解釈し、画面描画や動きなどを提供する。Explorer)などがある。MVCパターンとは?名称の由来はModel、View、Controllerの頭文字を示す。プログラムを3つの要素で分け、それぞれの役割を持つ。Touchの開発を行う為には、以下の準備が必要。Touchアプリケーションの開発キット。ソースコード、画像ファイル、CSS、ドキュメントなどが含まれる。3.0開発補助を行うコマンドラインツール。プロジェクトの雛形作成、ソースコードの生成・圧縮、アプリケーションのビルドを行う。Java実行環境(jre6以降)が必要。ApacheやNginxなどのWebサーバが必要となる。開発の流れ以下の流れで、開発を進めていく。');}});実行するとgreet関数を実行するには以下のようにする。);hoge.greet('こんにちは');実行すると以下のアラートが表示されます。こんにちは、私の名前は笹○、26才です。SenchaでできることSenchaでは、以下の事ができる。-シングルトン指定クラスの継承メソッドのオーバーライド型概念の導入バリデーションMixin(ミックスイン)アソシエーション(モデル間の関連、hasOne/hasMany)Mixin1全部を紹介するのは大変なので、便利な機能を紹介。■Mixin(ミックスイン)オブジェクト指向言語において、サブクラスによって継承されることにより機能を提供する。多重継承の欠点を最小にして利点を生かすテクニック。ボートクラスのsail()を使用したい。どのように解決する?Mixin3・水上飛行機クラスにも同じfly()とseal()関数を用意する?⇒ムダ(メンテナンスが大変だし、今後似たような機能増やす場合もそうするの?)・水上飛行機クラス内から飛行機、ボートクラスの関数を呼び出す?(処理の委譲)⇒処理が煩雑になるし、コード量も多くなる。いずれも問題がありますよね?Mixinを使うと以下のようにして解決できます。Cmdコマンドを実行。Touchをインストールしたディレクトリ内で実施。└src├app.js├app.json├build.xml├index.html└packager.jsonここにMVCパターンに沿ったソースを記述イメージファイルやCSSなど基本的にはこのままSenchaのソースがコピーされる基本的にこのままapp.jsに起点となる画面(view)を指定する。他はビルド時の設定ファイルなど。したプロジェクト上で実施。'store-memo'}}});メモアプリを作成4proxyオプションのtypeを切り替える事でデータの転送先を切り替える事ができる。localstrageでは、データ識別用にidが必要。'store-memo'}typeには、以下を指定できる。オプション説明LocalstorageWebストレージであるLocalStorageにロード保存/保存。SessionstorageWebストレージであるSessionStorageにロード/保存。Memoryメモリに格納。リロードするとデータが消える。Databaseにロード/保存。AjaxXMLHttpRequestを使用し、サーバへロード/保管。HTTPを使用し、サーバへロード/保管。Webストレージとは?データをクライアント側に保存する仕組みでHTML5からサポートされた仕様。Cookieとの違いは以下の通り。Cmdには、View作成コマンドがないので手動で作成。Cmdコマンドを実行。'データを保存しました。'データを消去しました。');}});メモアプリを作成10(5)初回起動するViewを指定app.jsのlaunch関数に、以下のコードを記述。初回に起動したViewを指定Ext.Viewport.add(Ext.create('sample.view.MemoForm'));}});メモアプリを作成11(6)アプリのビルドアプリケーションのビルドでは、以下の事ができる。Sass/Compassファイルのコンパイル・iOS、Android用のネイティブアプリケーションの作成ネイティブAPIでは、以下の機能が利用できる。Cmdコマンドで配布用アプリケーションの作成し、生成したファイルを公開用フォルダへコピーする。要なファイルもダウンロードされてしまう為、非常に重たい。productionモードでビルドすると、10数MB⇒1MB以下になる。起動後のHTMLソースを確認してみる。LocalStorageを確認データを保存後のLocalStorageを情報を確認してみる。TouchのデザインはHTML+JavaScript+CSSで作られている為、通常のWebページと同様にCSSでカスタマイズできる。CSSの変更には、Sass/Compass環境と、Sassの文法理解が必要となる。■SassとはCSSを拡張したCSSメタ言語で、CSSだけでは表現できなかった、変数やMixin、関数などを利用し、再利用性が高められた言語。CSSはコンパイルして作成する。コンパイルには、Rubyの実行環境が必要となる。■CompassとはSassの機能を拡張するフレームワーク。Mobileと違ったアプローチで面白さがあると思います。デザインとロジックが分離がされているとはいえ、レイアウトが複雑化していくと、オブジェクトリテラルのネストが深くなる(コードの見通しが悪くなり、デバッグしずらくなる)、従来のHTMLに慣れ親しんでいるウェブデザイナでも扱えるのか?などデメリットもある。リリースの頻度の多さ、日本語ドキュメントや書籍が少なく、多言語化(ローカライズ)が貧弱な為、まだまだ発展途上なフレームワークで、プロジェクトへの適用には十分な検討が必要となり、まだまだ敷居が高いと感じました。性が十分ありえるフレームワークだと思います。Touchの説明は終了となります。issue?Send。