イマドキのwebアプリの作り方
TRANSCRIPT
イマドキのWEBアプリの作り方
日本Androidの会 大分支部本田 克己
日本Androidの会 大分支部
2010年2月6日に設立
Androidアプリ開発の勉強会などをやっています
http://goo.gl/VKyYNhttp://groups.google.com/group/android-group-japan-oita
Facebookページなんかもあったりします。
http://goo.gl/vKmlchttps://www.facebook.com/android.oita
ここ数年、AndroidやiPhoneのアプリ開発ばかりしていたらWeb界隈がすごいことになっていました！
まだまだ勉強中なので、間違っている部分とかツッコミお願いします。
Web開発の今と昔
WEBアプリ WEBページ≠
おことわり
WEBサーバ
初期のCGI
プログラム
データファイル
キリ番ゲットした人は記念カキコお願いします！
WEB＋DB
WEBサーバ
プログラム
DBサーバ
データベース
APサーバ？
WEBサーバ
プログラム
DBサーバ
データベース
ストアドプロシージャ
ストアドプロシージャでHTML生成してたり
APサーバ
WEBサーバ
プログラム
DBサーバ
ページテンプレート
データベース
ストアドプロシージャ
MVCモデル２
APサーバ
コントローラ
DBサーバ
ビュー（ページ
テンプレート）
モデル
データベース
ストアドプロシージャ
ORマッピング
APサーバ
コントローラ DBサーバ
データベース
ビュー（ページ
テンプレート）
モデル ORマッパー
Webサービス / マッシュアップ
WEBサーバ
コントローラ
ビュー（ページ
テンプレート）
モデル
外部Webサーバ
WEBサービス
DBサーバ
データベース
ケータイ対応
WEBサーバ
パソコン用プログラム
ケータイ用プログラム
DBサーバや
WEBサービス
AJAX
WEBサーバ
WEBページ生成プログラム
DBサーバや
WEBサービス
AJAX用プログラム
XMLとかJSON
ブラウザ
JavaScriptプログラム
HTML
アプリのバックエンド
WEBサーバ
DBサーバや
WEBサービスアプリ連携用プログラム
XMLとかJSON
スマートフォン
アプリ
コントローラ
ビュー
モデル
WEBアプリ
WEBサーバ
DBサーバや
WEBサービスアプリ連携用プログラムXMLとか
JSON
ブラウザ
JavaScript
コントローラ
ビュー
モデル
現在ありがちな
WEBサーバ
Webページ生成プログラム
DBサーバや
WEBサービス
アプリ連携用プログラム
AJAX用プログラム
スマートフォン
ネイティブアプリ
WEBアプリ
パソコン
デスクトップアプリ
WEBアプリ
これから
WEBサーバ
DBサーバや
WEBサービスアプリ連携用プログラム
HTML JavaScript
スマートフォン
ネイティブアプリ
WEBアプリ
パソコン
デスクトップアプリ
WEBアプリ
BAAS(Backend As A Service)
https://developers.google.com/appengine/docs/java/endpoints/Basic Endpoints architectureより引用
Web開発の重点:サーバ→クライアント
Webアプリの開発 = JavaScript
膨れ上がるJavaScriptコード
WEBブラウザ
初期？のWebアプリ
肥大化するJavaScript
DOM
このままじゃコントロールできません！
JavaScriptでMVC
有名どころ
http://backbonejs.org/ http://angularjs.org/
http://emberjs.com/http://knockoutjs.com/
Backbone.js
BackboneRouter
BackboneView
BackboneModel
データソース(database、WebAPI)
DOM
リクエスト
BackboneCollection
DOM(HTML)の更新
DOMイベント
モデルの更新 データの同期(sync)
モデルイベント
オブザーバパターンを基本とする本来のMVC
MVCモデル2
フロントコントローラ
コントローラー モデル データソース
リクエスト
ビューレスポンス
MVCとMVCモデル2は別物
コンパイラ？
JavaScriptにコンパイルする
JavaScriptをより簡素に、効率よく記述できるコードブロックを｛｝じゃなくて、インデントで構成するPythonと一緒に使うと気持ちいい
JavaScriptに静的型付けの機能を加える。変数の型が気になって夜も眠れない人にオススメ
JavaScriptに変わるプログラミング言語として開発ブラウザで直接実行できるようになるのが理想像とりあえずJavaScriptにコンパイルして実行
http://coffeescript.org/
http://www.typescriptlang.org/
https://www.dartlang.org/
CSSにコンパイルする
CSSで使えない変数や、セレクタのネスト・継承、ミックスイン等の機能が使える。HAMLという書式を使うコードブロックを{}じゃなくてインデントで構成するPythonと一緒に使うと気持ちいいhttp://sass-lang.com/
SCSSHAMLの書式が変態すぎてついていけません！という人が多かったのか、SASSをよりCSSチックに記述できる。（機能的にはSASSと同じ）
SCSSと同じような感じですが、違いが分かってません。誰か教えてください。
http://sass-lang.com/
http://lesscss.org/
必要なJavaScriptファイルを色々とダウンロードCoffeeScript変更してコンパイル
SASSを変更してコンパイル
やること増えて大変なんですけど・・・
助けて！◯◯マン
プロジェクトのひな形を生成
GRUNTやBOWERの設定をやってくれる
http://bower.io/http://gruntjs.com/
コンパイルやテスト等のタスクを実行
ファイルを修正すると、自動的にコンパイルしてページのリロードとかやってくれる
依存関係の管理を行なう。プロジェクトに必要なファイルを、自動的にダウンロードしてくれたりする
勉強しないといけないことが沢山あります！
ということで
予告さらに
2013年11月2,3,4日
由布院で
温泉合宿
場所は由布院にある、日本文理大学の研修施設です。
http://atnd.org/events/43357
お子様連れも大歓迎！