oshige: 2010年7月アーカイブ

少しだけjsdo.itでSencha Touchを試してみましょう。

  1. jsdo.itにアカウントを作成したならば、画面の右上の[コードを書き始める]をクリックします。

  2. Safari002.jpg

  3. Edit画面になるので、JavaScriptのフィールドの右上にある[Add Library]をクリックし、Select LibraryからSencha Touchを選びます。

  4. Safari006.jpg

    Safari004.jpg

  5. 同様にCSSも右上にある[Add Library]をクリックし、Select LibraryからSencha Touchを選びます。

  6. これで準備完了です。

  7. JavaScriptの入力エリアにSencha Touchを利用するコードを書きます。もっとも簡単な、Hello World!を表示するコードを書いてみましょう。

2010-07-29 1st - jsdo.it - share JavaScript, HTML5 and CSS

これは先のエントリーで紹介した佐竹さんのコードとまるで同じなのでフォークすればいいのですが、ライブラリの指定などのテストのために1から作りました。

KAYACのjsdo.it(wonderflのJavaScript版)でSencha Touchを試せることを知りました。

みんなでフォークしましょう!

佐竹(stake.sus4)さんのチュートリアルから、まずはHello World。
Hello World

Sencha TouchのUIからツールバーとボタンを実装した例。
Hello, World + tbar

twitterを利用した例。
Sencha Twitter Tile


なお、Sencha Touchの開発はHTML5+CSS3+JavaScriptの組み合わせになりますが、jsdo.itではJavaScriptとCSS3はSencha Touchライブラリを指定します。その上で必要に応じてCSS3、JavaScriptを追加します。
通常はJavaScriptとCSSの読み込みをHTMLのheadに記述しますが、jsdo.itでは記述する必要がありません。したがって、Sencha Touchを使う場合にはHTMLは常に空の状態です。たぶんそうでしょう (^^;;

昨日、Ext JS & Sencha Touch勉強会7月に参加してきました。

Secha TouchはWebアプリを作るJavaScriptライブラリですが、Secha Touchで開発したソースを利用してiPhoneやiPadのiOSのネイティブアプリにしてしまうYubizo Engineというプロダクツの紹介がありました。Xcodeで開発するのでクロスコンパイラではありません。

ちょっと注目ですね!

Yubizo Engine

Sencha Touchサンプル

|

次のサンプルは、ぜひiPhoneやiPadで試してください。

http://www.sencha.com/deploy/touch/examples/
SenchaTouchExsamples.jpg


これらのサンプルのソースファイルは、Sencha Touchをダウンロードするとそっくりそのまま入っています。oshige.comにもインストールしてみました。

http://oshige.com/senchatouch/ver_beta/examples/

Sencha Touch API Doc

|
Sencha Touch API のドキュメントです。

http://www.sencha.com/deploy/touch/docs/


Sencha Touch

|

このアーカイブについて

このページには、oshige2010年7月に書いたブログ記事が含まれています。

次のアーカイブはoshige: 2010年8月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。