イマドキのWEBアプリの
作り方
日本Androidの会 大分支部
本田 克己
日本Androidの会 大分支部
2010年2月6日に設立
Androidアプリ開発の勉強会などをやっています
http://goo.gl/VKyYN
http://groups.google.com/group/android-group-j...
ここ数年、AndroidやiPhoneのアプリ開発ばかりし
ていたらWeb界隈がすごいことになっていました!
まだまだ勉強中なので、間違っている部分とか
ツッコミお願いします。
Web開発の今と昔
WEBアプリ WEBページ
≠
おことわり
WEBサーバ
初期のCGI
プログラム
データファイル
キリ番ゲットした人は記念カキコお願いします!
WEB+DB
WEBサーバ
プログラム
DBサーバ
データベース
APサーバ?
WEBサーバ
プログラム
DBサーバ
データベース
ストアド
プロシージャ
ストアドプロシージャでHTML生成してたり
APサーバ
WEBサーバ
プログラム
DBサーバ
ページ
テンプレート
データベース
ストアド
プロシージャ
MVCモデル2
APサーバ
コントローラ
DBサーバ
ビュー
(ページ
テンプレート)
モデル
データベース
ストアド
プロシージャ
ORマッピング
APサーバ
コントローラ DBサーバ
データベース
ビュー
(ページ
テンプレート)
モデル O
R
マ
ッ
パ
ー
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
Backbone
Router
Backbone
View
Backbone
Model
データソース
(database、WebAPI)
DOM
リクエスト
Backbone
Collection
DOM(HTML)の...
MVCモデル2
フロントコントローラ
コントローラー モデル データソース
リクエスト
ビューレスポンス
MVCとMVCモデル2は別物
コンパイラ?
JavaScriptにコンパイルする
JavaScriptをより簡素に、効率よく記述できる
コードブロックを{}じゃなくて、インデントで構成する
Pythonと一緒に使うと気持ちいい
JavaScriptに静的型付けの機能を加える。
変数の型が...
CSSにコンパイルする
CSSで使えない変数や、セレクタのネスト・継承、
ミックスイン等の機能が使える。
HAMLという書式を使う
コードブロックを{}じゃなくてインデントで構成する
Pythonと一緒に使うと気持ちいいhttp://sass-...
必要なJavaScriptファイルを色々とダウンロード
CoffeeScript変更してコンパイル
SASSを変更してコンパイル
やること増えて大変なんですけど・・・
助けて!◯◯マン
YEOMAN
http://yeoman.io/
プロジェクトのひな形
を生成
GRUNTやBOWERの設定を
やってくれる
http://bower.io/http://gruntjs.com/
コンパイルやテスト等
のタスクを実行
ファイルを修正する
と、自動的にコンパイ
ルしてページのリ...
勉強しないといけないことが沢山あります!
ということで
第20回Android勉強会を開催します
http://atnd.org/events/43355
予告
さらに
2013年11月2,3,4日
由布院
で
温泉合宿
場所は由布院にある、日本文理大学の研修施設です。
http://atnd.org/events/43357
お子様連れも大歓迎!
イマドキのWebアプリの作り方
イマドキのWebアプリの作り方
Upcoming SlideShare
Loading in …5
×

イマドキのWebアプリの作り方

6,281 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,281
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
19
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

イマドキのWebアプリの作り方

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

×