先週の火曜日、Sencha Touch のバージョン 2.2 が正式リリースされました。2.2 では、これまでの WebKit 前提で記述されていたスタイルシートが改修され、Windows Phone 8 上でもアプリが動作するようになりました。今後、さらに対応プラットフォームが広がるものと期待しています :)
2.2 リリースを機に Sencha Touch を本格的に始める方もいるはず！ということで、今回から数回に分けて、実践的な Sencha Touch アプリを開発するチュートリアルを連載します。
Sencha Touch をほとんど触ったことがない方は、まずは以下のチュートリアルをおすすめします。2.2 になってテーマシステムが変わりましたが、それ以外の内容は 2.2 でも問題なく通用します。
Sencha Touch 2.1 のチュートリアルを書きました！:
http://dev.ariel-networks.com/wp/archives/2791
JDI
先日、Sencha 社主催の Sencha Touch アプリコンテスト「HTML5 is Ready App Contest」が行われました。今回のチュートリアルでは、そのコンテストで 1位を獲得したアプリ「JDI」を作成します。JDI はいわゆる ToDo アプリです。タスクを管理する機能の他に、隙間時間を使ったタスク消化を支援するユニークな機能が備わっています。また、バックエンドに Sencha 社が提供する BaaS「Sencha.io」を使っている点も興味深いところです。
JDI はソースコードが公開されているのですが、Sencha Touch 2.1 ベースで実装されています。でも、これから始めるなら 2.2 を使いたいですよね。ということで、私の方で 2.2 に対応する改修を行いました。
jdi:
https://github.com/kawanoshinobu/jdi
2.2 では、テーマシステムの $font-family 変数が使えないバグがあるので、フレームワークのコードを一部変更する必要があります。。フォーラムにバグ報告して修正してもらえたので、次のバージョンでは問題ないと思いますが、Touch 2.2.0 では、_Class.scss ファイルを以下のように書き換えて下さい。
|
1 2 3 4 5 6 7 8 9 10 |
application/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss line:1 html, body { - font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif; + font-family: $font-family; font-weight: normal; -webkit-text-size-adjust: none; margin: 0; jcursor: default; } |
上記のリポジトリを clone すれば、ローカルで 2.2 対応の JDI を動作させることができます。また、以下の URL で 2.2 対応の JDI を実際に試すことができます。
JDI with Touch 2.2.0:
http://kawanoshinobu.github.io/jdi
Just Do it!
実際の開発は次回から行うことにして、今回は、これから作成するアプリの機能について紹介します。
ユーザー登録
メールアドレスとパスワードを入力して、新規にユーザーを作成する機能です。データは Sencha.io のストレージに保存します。メールアドレスが Gravatar に登録されている場合、そのアバターをアプリで利用します。
ログイン認証
メールアドレスとパスワードを利用して、ログインの認証を行う機能です。認証は Sencha.io が提供する API を利用します。
タスク作成
作成フォームに「タスク名」「期限日」「所要時間」を入力してタスクを新規作成する機能です。タスクのデータも Sencha.io のストレージに保存します。
タスク一覧
タスクを期限日毎に「Late」「Today」「Soon」「Someday」の 4つに分類して一覧表示する機能です。完了したタスクはグレイアウトして表示します。削除されたタスクは表示しません。一覧の項目を、右にスワイプしてタスクを完了する、左にスワイプして未完了にする、完了したタスクを右にスワイプして削除する、といった操作を行えます。
タスク詳細
タスクの詳細を表示する機能です。一覧の項目を選択すると、右側からパネルが表示されます。×ボタン、もしくは右にスワイプすることで、パネルを閉じることができます。また、パネルのツールバーからタスクの完了、編集画面の表示、タスクの削除ができます。
タスク編集
タスクの「タスク名」「期限日」「所要時間」を変更する機能です。
JDI セッション
隙間時間を利用して、タスクの消化を支援する機能です。使える時間を指定してスタートボタンを押すと、その時間内に収まる所要時間のタスクが一覧表示されます。一覧では、タスクは「Active（未完了タスク）」「Done（完了タスク）」「Postponed（後で行うことにしたタスク）」「Out of time（残り時間内では完了できない所要時間のタスク）」の 4つに分類されて表示されます。一覧の項目を、左にスワイプしてタスクを延期する、右にスワイプしてタスクを完了する、左にスワイプして未完了にする、完了したタスクを右にスワイプして削除する、といった操作を行えます。
ヘルプ
JDI には、機能毎にヘルプが備わっています。画面各所にある「?」アイコンが該当のヘルプページにリンクされています。また、アプリの情報やサンプルデータを自動生成する機能があります。
サインアウト
アプリからサインアウトする機能です。
スマートフォン・タブレットの表示最適化
アクセスしたデバイスに応じて画面のレイアウトを切り替えます。スマートフォン以外のデバイスからアクセスした場合は、ツーペイン表示になります。
これから開発するアプリのイメージが掴めたでしょうか？JDI、かっこいいですよね。私はとても気に入っています。それでは次回から、開発プロジェクトをスタートしましょう！
See Also
jdi (Original):
https://github.com/simonbrunel/jdi
最近のコメント