1. イマドキのWEBアプリの
作り方
日本Androidの会 大分支部
本田 克己

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

4. ここ数年、AndroidやiPhoneのアプリ開発ばかりし
ていたらWeb界隈がすごいことになっていました！
まだまだ勉強中なので、間違っている部分とか
ツッコミお願いします。

5. Web開発の今と昔

6. WEBアプリ WEBページ
≠
おことわり

7. WEBサーバ
初期のCGI
プログラム
データファイル
キリ番ゲットした人は記念カキコお願いします！

8. WEB＋DB
WEBサーバ
プログラム
DBサーバ
データベース

9. APサーバ？
WEBサーバ
プログラム
DBサーバ
データベース
ストアド
プロシージャ
ストアドプロシージャでHTML生成してたり

10. APサーバ
WEBサーバ
プログラム
DBサーバ
ページ
テンプレート
データベース
ストアド
プロシージャ

11. MVCモデル２
APサーバ
コントローラ
DBサーバ
ビュー
（ページ
テンプレート）
モデル
データベース
ストアド
プロシージャ

12. ORマッピング
APサーバ
コントローラ DBサーバ
データベース
ビュー
（ページ
テンプレート）
モデル O
R
マ
ッ
パ
ー

13. Webサービス / マッシュアップ
WEBサーバ
コントローラ
ビュー
（ページ
テンプレート）
モデル
外部Webサーバ
WEBサービス
DBサーバ
データベース

14. ケータイ対応
WEBサーバ
パソコン用
プログラム
ケータイ用
プログラム
DBサーバ
や
WEBサービス

15. AJAX
WEBサーバ
WEBページ生成
プログラム
DBサーバ
や
WEBサービス
AJAX用
プログラム
XMLとか
JSON
ブラウザ
JavaScript
プログラム
HTML

16. アプリのバックエンド
WEBサーバ
DBサーバ
や
WEBサービス
アプリ連携用
プログラム
XMLとか
JSON
スマートフォン
アプリ
コントローラ
ビュー
モデル

17. WEBアプリ
WEBサーバ
DBサーバ
や
WEBサービス
アプリ連携用
プログラムXMLとか
JSON
ブラウザ
JavaScript
コントローラ
ビュー
モデル

18. 現在ありがちな
WEBサーバ
Webページ生成
プログラム
DBサーバ
や
WEBサービス
アプリ連携用
プログラム
AJAX用
プログラム
スマートフォン
ネイティブ
アプリ
WEBアプリ
パソコン
デスクトップ
アプリ
WEBアプリ

19. これから
WEBサーバ
DBサーバ
や
WEBサービス
アプリ連携用
プログラム
HTML JavaScript
スマートフォン
ネイティブ
アプリ
WEBアプリ
パソコン
デスクトップ
アプリ
WEBアプリ

20. BAAS(Backend As A Service)
https://developers.google.com/appengine/docs/java/endpoints/
Basic Endpoints architectureより引用

21. Web開発の重点:
サーバ→クライアント
Webアプリの開発 = JavaScript
膨れ上がるJavaScriptコード

22. WEBブラウザ
初期？のWebアプリ
肥大化するJavaScript
DOM

23. このままじゃコントロール
できません！

24. JavaScriptでMVC

25. 有名どころ
http://backbonejs.org/ http://angularjs.org/
http://emberjs.com/
http://knockoutjs.com/

26. Backbone.js
Backbone
Router
Backbone
View
Backbone
Model
データソース
(database、WebAPI)
DOM
リクエスト
Backbone
Collection
DOM(HTML)の更新
DOMイベント
モデルの更新 データの同期(sync)
モデルイベント
オブザーバパターンを基本とする本来のMVC

27. MVCモデル2
フロントコントローラ
コントローラー モデル データソース
リクエスト
ビューレスポンス
MVCとMVCモデル2は別物

28. コンパイラ？

29. JavaScriptにコンパイルする
JavaScriptをより簡素に、効率よく記述できる
コードブロックを｛｝じゃなくて、インデントで構成する
Pythonと一緒に使うと気持ちいい
JavaScriptに静的型付けの機能を加える。
変数の型が気になって夜も眠れない人にオススメ
JavaScriptに変わるプログラミング言語として開発
ブラウザで直接実行できるようになるのが理想像
とりあえずJavaScriptにコンパイルして実行
http://coffeescript.org/
http://www.typescriptlang.org/
https://www.dartlang.org/

30. CSSにコンパイルする
CSSで使えない変数や、セレクタのネスト・継承、
ミックスイン等の機能が使える。
HAMLという書式を使う
コードブロックを{}じゃなくてインデントで構成する
Pythonと一緒に使うと気持ちいいhttp://sass-lang.com/
SCSS
HAMLの書式が変態すぎてついていけません！
という人が多かったのか、SASSをよりCSSチックに
記述できる。（機能的にはSASSと同じ）
SCSSと同じような感じですが、違いが分かってません。
誰か教えてください。
http://sass-lang.com/
http://lesscss.org/

31. 必要なJavaScriptファイルを色々とダウンロード
CoffeeScript変更してコンパイル
SASSを変更してコンパイル
やること増えて大変なんですけど・・・

32. 助けて！◯◯マン

34. YEOMAN
http://yeoman.io/

35. プロジェクトのひな形
を生成
GRUNTやBOWERの設定を
やってくれる
http://bower.io/http://gruntjs.com/
コンパイルやテスト等
のタスクを実行
ファイルを修正する
と、自動的にコンパイ
ルしてページのリロー
ドとかやってくれる
依存関係の管理を行な
う。プロジェクトに必
要なファイルを、自動
的にダウンロードして
くれたりする

36. 勉強しないといけないことが沢山あります！
ということで

37. 第20回Android勉強会を開催します
http://atnd.org/events/43355

38. 予告
さらに

39. 2013年11月2,3,4日
由布院
で
温泉合宿
場所は由布院にある、日本文理大学の研修施設です。
http://atnd.org/events/43357
お子様連れも大歓迎！