タグ ‘勉強会’ 一覧
7月のExt JS勉強会(東京)「Sencha Touchのはじめかた 」まとめ
7月の勉強会(東京)のまとめになります。
開発環境
→ 好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。
検証機(タッチパネルデバイス)
→ iPhone 3GS以降 or iPad が無難。Mac があるならiPhone シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。
APIリファレンス
→ 発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/
本家フォーラム
→ Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/
Sencha Touch 入門:Sencha Touchのはじめかた(Ext JS & Sencha Touch勉強会7月@東京)のサンプルコード
2010/7/25のExt JS & Sencha Touch勉強会7月@東京でのsus4 佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に2,3つしか紹介できないと思います。
勉強会のアジェンダはこちらです。
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月@東京(2010/7/25 )のアジェンダ
Sencha Touchのはじめかたサンプルコード
Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS
Read the rest of this entry »
Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月@東京(2010/7/25 )のアジェンダ
2010/7/25のExt JS & Sencha Touch勉強会7月@東京でのsus4 佐竹の担当箇所のSencha Touch入門篇アジェンダです。
時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載
日時:2010年7月28日(水)19:00~21:00(18:45開場)
募集人数:45名
場所:東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内(今回はいつもと会場が違いますので、ご注意ください。)
参加費:無料
アジェンダ:
Senchaへのブランド変更について(直鳥)
Sencha Touch入門(株式会社sus4 佐竹様)
Sencha TouchとYubizoで作るネイティブアプリ(株式会社アイキューブドシステムズ 佐々木様)
SpreadOfficeとSencha Touch(小堤)
ホワイトクラウド シェアードHaaSのご紹介(ソフトバンクテレコム株式会社 加藤様)
—–
Sencha Touch入門:Sencha Touchのはじめかた 佐竹裕行 – 株式会社sus4
・Sencha TouchでつくるiPhone/iPadアプリ
・Sencha Touchの環境
エディタ等
デバッグコンソール
・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など
・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/
—–
時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。
事前の準備しておくと良いもの:
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/
・iPhone、iPad、Androidでバイスの実機 もしくは XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。
・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
sus4 Ext JSブログ内Sencha Touchの記事
ExtJS入門39 ファイルをアップロードするフォームフィールド
ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。
フォーム関連の過去の記事はこちらからです。
ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する
今回はExtJSのフォーム(フィールド)をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて(基本編)
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.TextFieldクラス
http://extdocs.xenophy.com/?class=Ext.form.TextField
ExtJS入門35 Tableレイアウトのフォーム
今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて(基本編)
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.layout.TableLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.TableLayout
ExtJS入門34 ComboBoxの基本
今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。
グリッド関連の記事
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox
ExtJS入門33 Columnレイアウトのフォーム
フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス
http://extdocs.xenophy.com/?class=Ext.form.FormPanel
ExtJS -3.0 日本語APIドキュメント – Ext.form.FieldSetクラス
http://extdocs.xenophy.com/?class=Ext.form.FieldSet
ExtJS -3.0 日本語APIドキュメント – Ext.layout.ColumnLayoutクラス
http://extdocs.xenophy.com/?class=Ext.layout.ColumnLayout
ExtJS入門32 フォームパネルとフィールド(基本編)
今回からExtJSのフォームに関するサンプルコードを紹介していきます。フォームに関しては以前簡単なサンプルを紹介しているので、まずは以前紹介した基本的なフォームの修正版からはじめてみたいと思います。
フォーム関連の過去の記事はこちらからです。
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.form.FormPanelクラス
http://extdocs.xenophy.com/?class=Ext.form.FormPanel
ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する その2
前回のサンプルのおまけです。前回のサンプルコードExt.DataViewを使ってTwitter Search APIの情報を表示していました。今回はダブルクリックイベントとホバリング時のCSSクラスの設定を行ってもう少し使えるアプリっぽく修正しました。
ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する
関連の記事はこちらからです。
- ExJS入門29 JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
- ExJS入門30 Twitter Search APIを使ったグリッドパネル
- ExtJS入門 JSONP経由でTwitterの情報をDataViewに表示する
リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.DataViewクラス
http://extdocs.xenophy.com/?class=Ext.DataView








