HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド

関連サイト

出版社による関連ページが公開されています。

• HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド

内容紹介

Web技術を使って、クロスプラットフォームのモバイルアプリケーションを作成するのは、すばらしいアイデアです。特にWeb開発者にとっては、使い慣れた技術で、効率よく開発を進めることができます。また利用者にとっても、端末にアプリケーションをインストールする必要がなく、常に最新の機能を利用できるので便利です。

いいことづくめに思えるモバイルWebアプリケーションですが、1つ大きな難点があります。それは「実装が難しい」ということです。標準規格があるものの、端末によって、ブラウザの動作には依然違いがあります。また、モバイルWebブラウザ上で、ネイティブアプリケーションのように、満足する性能で動作させることは至難の業です。

昨年、FacebookのCEO、マーク・ザッカーバーグ氏が「HTML5に賭けたのは失敗」と語り、Web業界に大きな波紋を呼びました。発言に対しては賛否両論ですが、モバイルWebアプリケーションの実装に苦労した経験のある開発者に、大きな共感を与えたのは事実でしょう。その後、Facebookは、HTML5ベースのハイブリッド型ネイティブアプリケーションを、純粋なネイティブアプリケーションで作り直し、見違える程の高速化を実現しました。

Facebookでの事例をきっかけに「HTML5は、やはり時期尚早ではないか」というムードが漂うなか、それを打ち破るセンセーショナルなモバイルWebアプリケーションを作成した企業がありました。それがSenchaです。プロモーション用のデモアプリケーションではありますが、Facebookのネイティブアプリケーションと同等の閲覧スピードを、モバイルWebブラウザ上で実現しました。実装は簡単ではないですが、情熱があれば、ネイティブアプリケーションと同等以上のことができると証明したのです。そして、そのアプリケーションを開発するために使われた技術が、本書で解説するSencha Touchでした。

クロスプラットフォームのモバイルWebアプリケーション開発にチャレンジするエンジニアにとって、SenchaTouchは、非常に頼りになるツールです。本書が、そのツールを使いこなすためにお役に立てれば、執筆者一同、何よりの喜びです。

(「はじめに」より抜粋)

書誌情報

• 著者: 大谷弘喜, 稲垣龍一, 川野忍, 土江拓郎, 森本恭平, 高岡大介
• 発行日: 2013-02-27
• 最終更新日: 2013-02-27
• バージョン: 1.0.0
• ページ数: 433ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: KADOKAWA/アスキー・メディアワークス

対象読者

モバイルWebアプリケーションの開発者、とりわけクロスプラットフォームのモバイルWebアプリケーションを開発したい人

著者について

大谷弘喜

@liris
今は亡きロータス株式会社に入社後、Notes/Domino を中心に開発業務に携わる。2001 年、アリエル・ネットワーク株式会社設立に参加し、現在に至る。設立当初は、企業向けP2P アプリケーションの開発に従事する。
その縁で「P2P 教科書」（インプレス）の執筆者の一人になる。その後、現在の主力製品であるグループウェア「アリエル・エンタープライズ」の基本設計や開発に携わると同時に、若手エンジニアの育成にも力を注いでいる。
会社での役割は、プログラマ達が存分に力を発揮できる環境を作り、そのアイデア・技術を製品化していくこと。研究と称して業務時間におもしろそうな技術をつまみ食いして遊んでいる。昔はZope/Plone のCMS に興味があり、多大な影響を受けるが、今はMongoDB に興味の対象が移る。
Sencha Touch の本を執筆しておきながら、JavaScript が大嫌い。仕事でも必要に迫られないとJavaScript を書かない。普段は、Java やPython を書いている。

稲垣龍一

@ryu1kn
大学卒業後、イギリスの料理は本当にまずいかを検証するためロンドンに留学。Imperial College London にてComputing Science の修士課程を修了。Imperial では（様相）論理学やProlog（とHaskell）に浸かるが、「イギリス料理であれば必然的においしくない」という命題の証明には失敗する。
帰国後SIer での勤務を経て、論理的な帰結としてアリエル・ネットワークにたどりつく。生来のvi 派を自認するが、大学時代には1 年ほどEmacs に道を踏み外し、アリエル入社後にも数日間Sublime Text に浮気する。しかし、そのつど論理的妥当性をもってvi に立ち返っている。
大学時代にはわかり合えなかったJavaScript とは、Sencha Touch の縁で誤解を解くことに成功。今ではお気に入り言語の1 つに。現在はSencha Touch を使ったモバイルWeb アプリケーションの開発に従事。

川野忍

@kawanoshinobu
旅行会社の添乗員として日本だけでなく世界を渡りあるいた後、いくつかの会社を経てアリエル・ネットワークに流れ着く。Sencha Touch を利用して、自社製品のスマートデバイス対応の開発に従事している。ときどき、Android 爆発しろ、と叫んでいるといううわさも。
アリエル・ネットワーク入社後にCTO に洗脳されてEmacs に宗旨替えするも、viper-mode に目覚め、Emacs陣営からもvi 陣営からも距離を置く異端のプログラマ。ついには、両陣営をみくびって、Sublime Text 2 の布教をはじめ、Emacs に引きずり込んだCTO をあきれさせる。
プログラミング言語はJavaScript とPython がお気に入り。Java？あんなの過去の遺物です。
現在は、Japan Sencha User Group の共同運営者としてSencha Touch の勉強会などを企画・運営しながら、自身も講演活動など行い、普及に尽力している。

土江拓郎

SIer でのエクセル＆パワポ仕事が嫌になり、リーマンショックの最中に会社を飛び出したところ、運良くアリエル・ネットワークに拾ってもらい、現在に至る。アリエル・ネットワークではJava による製品開発を経て、現在はVim を駆使しながらJavaScript とXML による開発に没頭する毎日。
毎日まじめに仕事をしていたのにも関わらず、なんとなく暇そうに見えたのかSencha Touch の本を書けという命令が下った。ひょっとすると、仕事をする振りをしてVim script を書いていたことが見抜かれていたのかもしれない。
Sencah Touch の良い点の1 つに開発スピードが速いことが挙げられるが、本を書くときはこの開発速度についていくのが大変だった。執筆途中でもバージョンは上がったし、執筆が終わった今もまたバージョンが上がりそうだ。このスピードのままどこまで進んでいくのかはわからないが、きっとWeb 技術だけで世界をより良くできる未来に向かっていくのだろう。そんな未来に期待しながら本書を手に取ってもらえると幸いである。

森本恭平

@basara669
NTT レゾナント株式会社に、営業職として入社。「Web 会社に勤務したんだから、Web について学びたい！」との想いから、独学でWeb 技術を学び、いつの間にかフロントエンドエンジニアへと転身した。
ActionScript を使ったインタラクティブなアプリケーションに興味を持ち、現在ではHTML5 を利用したWebアプリケーションやスマートフォン向けネイティブアプリケーションの開発なども行っている。JavaScript が大好物。
NTT レゾナント株式会社では、スマートフォン向けサービスや開発者向けサービスなどに従事し、その開発を通して得た知識や独自に学んだことを若手エンジニアへ伝え、社内の技術力向上に貢献している。
Sencha Touch に初めて触れた当時は「なんて、とっつきづらいフレームワークだ！」と思っていたが、知れば知るほどSencha Touch の深さや完成度の高さにはまり、本書の執筆に携わることとなった。
無類のアップル製品好きで、Apple Store に並ぶのが趣味。

高岡大介

@dsuket
大手外資系IT ベンダから独立行政法人の研究所を経て、現在はフリーエージェントとして活動。学術的な研究開発や、テクニカルコンサル、バックからフロントエンドの設計・実装など、幅広く手がけている。要するに何でも屋。
タブレット向けWeb アプリInkpod Web を開発し、そのウィジェットでSencha Touch を使用している。当時はまだ1.0 だったが、その完成度の高さに驚いた。しかし近くに詳しい人もおらず、たまたまSencha Touchについてのありえるえりあ勉強会に参加して発表したのが遠因で、Sencha User Group の立ち上げや運営に関わることになり、本書の執筆にも参加させていただいた。
最近はSencha Touch の日本語の情報も増えてきたが、まだまだ本格的な話は多くない。この本がきっかけとなって1 人でも多くの開発者がSencha Touch のすばらしさに触れ、モバイルWeb アプリケーションの時代がますます盛り上がることを期待している。

目次

はじめに

• モバイルWebアプリケーション
• Sencha Touchとの出会い

第1部 Sencha Touchの概要

第1章 イントロダクション

• 1.1 ネイティブアプリケーションの終焉
• 1.2 はじめよう、Sencha Touch
• 1.3 本書の構成
• 1.4 ソースコードのダウンロード

第2章 開発準備

• 2.1 開発準備
• 2.1.1 Sencha Touch 2.1 SDK
• 2.1.2 Sencha Cmd
• 2.1.3 Webブラウザ
• 2.1.4 Webサーバ
• 2.1.5 テキストエディタ
• 2.1.6 その他
• 2.2 Sencha Cmd
• 2.2.1 コマンドの利用方法
• 2.2.2 コマンドラインヘルプ
• 2.3 Hello, World アプリケーション
• 2.3.1 プロジェクトの雛形を作る
• 2.3.2 Hello, World!

第3章 はじめてのSencha Touch

• 3.1 モデル
• 3.2 ビュー
• 3.3 コントローラ

第2部 Sencha Touchの基本構成

第4章 クラスシステム

• 4.1 クラス定義
• 4.2 コンストラクタ
• 4.3 コンフィグ
• 4.3.1 getterとsetter
• 4.3.2 applier
• 4.3.3 updater
• 4.4 インスタンス化
• 4.4.1 Ext.create
• 4.4.2 Ext.widget
• 4.4.3 Ext.factory
• 4.4.4 new演算子
• 4.5 継承
• 4.5.1 メソッドのオーバーライド
• 4.6 オーバーライド
• 4.7 ミックスイン
• 4.8 シングルトン
• 4.9 静的メンバ
• 4.9.1 statics
• 4.9.2 inheritableStatics
• 4.10 別名
• 4.10.1 xtype
• 4.10.2 alternateClassName
• 4.10.3 alias
• 4.11 依存性管理
• 4.11.1 規約
• 4.12 まとめ

第5章 コンポーネント

• 5.1 コンポーネント概要
• 5.2 配置
• 5.2.1 コンポーネントのネスト
• 5.2.2 レイアウト
• 5.3 検索
• 5.3.1 id による指定
• 5.3.2 コンポーネントセレクタによる指定
• 5.4 生成・描画・破棄
• 5.4.1 生成フェーズ
• 5.4.2 描画フェーズ
• 5.4.3 破棄フェーズ
• 5.5 まとめ

第6章 イベントシステム

• 6.1 イベントシステム概要
• 6.2 イベントリスナ
• 6.2.1 リスナの登録
• 6.2.2 リスナの削除
• 6.3 リスナオプション
• 6.4 独自イベント
• 6.5 タッチイベント
• 6.6 まとめ

第7章 データパッケージ

• 7.1 データパッケージ概要
• 7.2 モデル
• 7.2.1 フィールド
• 7.2.2 アソシエーション
• 7.2.3 バリデーション
• 7.2.4 読み込みと保存
• 7.3 ストア
• 7.3.1 インラインデータ
• 7.3.2 プロキシを使ったデータアクセス
• 7.3.3 フィルタリング
• 7.3.4 ソート
• 7.3.5 グルーピング
• 7.3.6 複雑なデータ
• 7.4 プロキシ
• 7.4.1 LocalStorageプロキシ
• 7.4.2 Ajaxプロキシ
• 7.4.3 ReaderとWriter
• 7.4.4 その他のプロキシ
• 7.5 まとめ

第8章 リストとテンプレート

• 8.1 リスト
• 8.1.1 グルーピングとインデックス
• 8.1.2 ディスクロージャ
• 8.1.3 階層リスト
• 8.1.4 プラグイン
• 8.2 テンプレート
• 8.2.1 テンプレートの記法
• 8.2.2 Ext.XTemplateのメソッド
• 8.3 まとめ

第9章 アプリケーション

• 9.1 アプリケーション
• 9.1.1 初期処理
• 9.2 コントローラ
• 9.2.1 イベントハンドリング
• 9.2.2 refs
• 9.2.3 control
• 9.3 ルーティング
• 9.3.1 ルーティング
• 9.4 プロファイル
• 9.4.1 プロファイルの設定
• 9.4.2 ビューの共有と専用
• 9.4.3 コントローラの共有と専用
• 9.4.4 モデルの共有と専用
• 9.5 まとめ

第10章 Sencha Touchデザイン概論

• 10.1 環境の構築
• 10.1.1 Sassの書き方
• 10.1.2 CUI環境
• 10.1.3 GUIアプリケーション
• 10.1.4 お勧めSassクライアントソフト
• 10.2 Sassの基本文法
• 10.2.1 CSSとの互換性
• 10.2.2 コメント
• 10.2.3 ネスト
• 10.2.4 変数
• 10.2.5 演算
• 10.2.6 制御構文
• 10.2.7 関数
• 10.2.8 @import
• 10.2.9 @mixinと@inclide
• 10.2.10 @extend
• 10.3 Compass について
• 10.3.1 コンパイル
• 10.3.2 Compassの便利な機能
• 10.4 Sencha Touchでのデザイン変更について
• 10.4.1 本章で使用するファイルの作成
• 10.4.2 コンパイル
• 10.4.3 @import
• 10.4.4 CSSの変更と互換性
• 10.4.5 テーマカラーの変更について
• 10.4.6 ミックスイン
• 10.4.7 アイコンの変更
• 10.4.8 最適化
• 10.5 まとめ

第11章 ネイティブパッケージング

• 11.1 パッケージング
• 11.1.1 Java環境のセットアップ
• 11.1.2 パッケージング
• 11.2 ネイティブパッケージングの流れ
• 11.2.1 必要環境について
• 11.2.2 config.jsonについて
• 11.3 iOS アプリケーションの作成について
• 11.3.1 iOS シミュレータへのインストール
• 11.3.2 ネイティブアプリケーション化実践
• 11.3.3 開発用iOS実機の登録（Mac編）
• 11.3.4 開発用iOS実機の登録（Windows編）
• 11.3.5 iOS実機へのインストール
• 11.4 Androidネイティブアプリケーションの作成
• 11.4.1 Android SDKのインストール
• 11.4.2 Androidエミュレータへのインストール
• 11.4.3 Android実機へのインストール
• 11.5 ネイティブAPI
• 11.5.1 端末の電波状況の確認
• 11.5.2 通知
• 11.5.3 位置情報
• 11.5.4 カメラ
• 11.6 まとめ

第3部 実践Sencha Touchアプリケーション開発

第12章 プロジェクト開始

• 12.1 開発するアプリケーション
• 12.1.1 仕様
• 12.1.2 何を学べるのか
• 12.1.3 最初の一歩

第13章 CRUD

• 13.1 表示(Read)
• 13.1.1 モデルとダミーデータの作成
• 13.1.2 一覧と詳細の表示
• 13.2 作成（Create）
• 13.2.1 入力フォーム
• 13.2.2 データ保存
• 13.3 更新（Update）
• 13.3.1 編集画面を開く
• 13.3.2 データ保存の修正
• 13.3.3 詳細画面のデザイン変更
• 13.3.4 リファクタリング
• 13.4 削除（Delete）
• 13.4.1 アクションシートから削除する
• 13.5 ルーティングとヒストリー
• 13.5.1 URLとプロファイル
• 13.5.2 routes
• 13.6 URLの変更
• 13.6.1 コードのルーティング対応

第14章 カスタムコンポーネント

• 14.1 カスタムコンポーネントとは
• 14.2 Senchaマーケット
• 14.3 カスタムコンポーネントの名前空間
• 14.4 ファイルパス
• 14.5 電卓コンポーネント
• 14.5.1 概要
• 14.5.2 完成イメージ
• 14.5.3 参考にするクラス
• 14.5.4 ファイル構成
• 14.5.5 Ext.ux.filed.Calculatorの実装
• 14.5.6 Ext.ux.calc.Calculatorの実装
• 14.6 Dropboxプロキシ
• 14.6.1 プロキシとは
• 14.6.2 dropbox.js
• 14.6.3 参考にするクラス
• 14.6.4 Dropboxアプリケーションの登録
• 14.6.5 Ext.ux.data.proxy.Dropboxの実装
• 14.6.6 Dropboxプロキシを使う

第15章 Sencha Touch Charts

• 15.1 Sencha Touch Charts概要
• 15.1.1 ライセンス
• 15.2 図形描画の基礎
• 15.2.1 Ext.drawパッケージ
• 15.2.2 図形の種類
• 15.2.3 独自図形
• 15.3 グラフの基礎
• 15.3.1 Ext.chartパッケージ
• 15.3.2 グラフの種類
• 15.3.3 軸
• 15.3.4 インタラクション
• 15.4 家計簿アプリケーションへの組み込み
• 15.4.1 グラフ用コントローラ
• 15.4.2 グラフ用ビュー
• 15.4.3 グラフ用データ

第16章 アプリケーションの仕上げ

• 16.1 タブレット用画面の実装
• 16.1.1 タブレット判定
• 16.1.2 タブレット用クラス
• 16.2 アプリケーションのリリース
• 16.3 まとめ

付録A 標準コンポーネントひとめぐり

• A.1 コンポーネント
• A.1.1 Ext.Component
• A.2 コンテナ
• A.2.1 Ext.Container
• A.2.2 Ext.ToolBar
• A.2.3 Ext.TitleBar
• A.2.4 Ext.Panel
• A.2.5 Ext.ActionSheet
• A.2.6 Ext.picker.Picker
• A.2.7 Ext.picker.Date
• A.2.8 Ext.MessageBox
• A.2.9 Ext.tab.Panel
• A.2.10 Ext.carousel.Carousel
• A.2.11 Ext.form.Panel
• A.2.12 Ext.form.FieldSet
• A.3 リスト
• A.3.1 Ext.dataview.DataView
• A.3.2 Ext.dataview.List
• A.3.3 Ext.NestedList
• A.4 フィールド
• A.4.1 Ext.field.Text
• A.4.2 Ext.field.TextArea
• A.4.3 Ext.field.Checkbox
• A.4.4 Ext.field.DatePicker
• A.4.5 Ext.field.Email
• A.4.6 Ext.field.Hidden
• A.4.7 Ext.field.Number
• A.4.8 Ext.field.Password
• A.4.9 Ext.field.Radio
• A.4.10 Ext.field.Select
• A.4.11 Ext.field.Spinner
• A.4.12 Ext.field.Slider
• A.4.13 Ext.field.Toggle
• A.4.14 Ext.field.Url
• A.4.15 Ext.field.Search
• A.5 その他
• A.5.1 Ext.Button
• A.5.2 Ext.SegmentedButton
• A.5.3 Ext.Spacer
• A.5.4 Ext.Img
• A.5.5 Ext.Label
• A.5.6 Ext.Map
• A.5.7 Ext.Audio
• A.5.8 Ext.Video
• A.5.9 Ext.navigation.View

著者紹介

索引