2014年3月21日（金）に実施される Android Bazaar and Conference 2014 Spring の ライトニングトーク（LT）資料です。

1. Android Bazaar and Conference
2014 Spring LT
AngularJS で
WEBアプリ開発
hkusu
2014/3/21

2. ABC 2014 Spring自己紹介
hkusu (久須 裕之)
所属：株式会社ゆめみ
（http://yumemi.co.jp）
仕事：スマホ向けアプリ/API/
WEB/サーバ構築 全般
http://qiita.com/hkusu
hiroyuki.kusu
@h_ku_su
https://github.com/hkusu

3. ABC 2014 Spring
AngularJS × スマホWEBサイト
• AngularJS？
.. Google製のJavaSrciptフレームワーク
.. AndroidもGoogle製
• 今回のスマホWEBサイトの定義
.. HTML、CSS、JavaScript で実現したサイト
.. for Android/iOS
本日の内容

4. ABC 2014 Spring
WEBの技術(HTML/CSS/JavaScript)の活
用
... Android/iOS 向けのクラスプラット
フォーム開発
… PhoneGap、Monaca 等と連携すれば
ネィティブにも
… 運用フェーズでの更新が容易
大規模WEB開発
… アプリケーションの大きさ
… 開発人数
なぜAngularJS？

5. ABC 2014 Springデモ
飽きちゃうとあれなのでここでデモ
■UIライブラリに ionic（後述）を使った例
http://hkusu.github.io/AngularJS_ionicjs_demo/
（公式で用意されてるサンプル）
■UIライブラリに onsen ui（後述）を使った例
• iOSテーマ《タブ版》
http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-tab.html
• iOSテーマ《スライドメニュー版》
http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-sd.html
• Androidテーマ《タブ版》
http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-tab.html
• Androidテーマ《スライドメニュー版》
http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-sd.html
■スワイプ（ngTouch）
http://hkusu.github.io/AngularJS_ngTouch_demo/

6. ABC 2014 SpringなぜAngularJS？
リッチなスマホWEBサイトって？
… 演出？ 機能が多いこと？
→ NO。UX(ユーザ体験)が大事、
だと思う
つまり、ユーザアクションに対する反
応をいかに向上させるか

7. ABC 2014 Spring
従来のページ遷移型のスマホサイトでなくて、シン
グルページアプリケーションへ
なぜAngularJS？
index.html
ダウンロードされたロジック
ファイルが端末側で動作。
従来のようにユーザアクション毎に
HTML丸ごとを取得しにいかない
サーバ
ユーザアクション
HTML(変更分のみ)、
JSON(P)
変更分のみ DOM を更新

8. ABC 2014 Spring
将来的には
こういう構成のとき、AngularJSいいよねっていう話
HTML
CSS
JavaScript
クライアントブラウザ サーバ
マルチデバイス化
API
表示に関わるものは
ブラウザで処理
（マルチデバイス対応
もここで）
サーバ機能はSaaSな
どでAPIで提供される
なぜAngularJS？

9. ABC 2014 Springモバイル対応
■METAタグ http://getbootstrap.com/css/ から引用
■PC等も対応するならBootstrapいれる(レスポンシブ)
■タッチイベントの最適化とスワイプ対応
→ ngTouchを導入
■必要あらば UIライブラリ導入
→ ionic、onsen ui など。この２つはそれ自体が AngularJSベース
■遅延読み込み（画像の Lazy Load）を導入

10. ABC 2014 Springモバイル対応
■AngularJSのファイルサイズが大きいことへの対応
− minifyする .. Gruntで
− gzipで圧縮
− 手作業で圧縮 and .htaccess等で振り分け
− または Grunt で
− または mod_deflateなど（Apacheモジュール）
− 端末側にキャッシュさせる
− HTTPレスポンスの Cache-Control ヘッダ、
Expires ヘッダ
− CDNを使う（AWSでいうと CroudFront）

11. ABC 2014 Spring
http://qiita.com/hkusu
時間が足りないので後はQiitaみてください^^;
AngularJSとモバイルについてもろもろ書きました。
ほか詳しくは
■Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築
http://qiita.com/hkusu/items/7d748b55ba73cc8a3675
■AngularJS で ngTouchとngAnimate を導入したメモ
http://qiita.com/hkusu/items/6a2d5c19691442e3d731
■ionic（AngularJSベース）のアプリケーション開発環境を構築
http://qiita.com/hkusu/items/a9d5908ede11110acb88
■onsen ui（AngularJSベース）のアプリケーション開発環境を構築
http://qiita.com/hkusu/items/664d025eec9f316d7270
■AngularJSのアプリケーションで画像の遅延読み込み(レイジーロード)を導入したメモ
http://qiita.com/hkusu/items/3b7c474726bd0b4a4c1f

12. ABC 2014 Springほか詳しくは
■ブラウザのキャッシュコントロールを正しく理解する
http://qiita.com/hkusu/items/d40aa8a70bacd2015dfa
■静的リソース(HTML,JS,CSS,画像)のブラウザキャッシュを制御
http://qiita.com/hkusu/items/468cc0ee0d767e7cc790

13. ABC 2014 Spring
https://itunes.apple.com/jp/app/id432831907
エンジニア(フロントエンド/サーバ)募集！
デザイナー/WEB制作者 募集！ お仕事も募集！
世界中で使われるO2Oサービスの実現
ネイルブック
ゆめみについて

14. ABC 2014 Spring
http://yumemi-inc.github.io
ゆめみのTEC情報配信サイト。いま準備中。
ゆめみについて

15. ABC 2014 Spring参考URLほか
■参考URL（公式系）
• http://angularjs.org
• https://github.com/angular/angular.js
• http://docs.angularjs.org/api
• http://angular-ui.github.io/bootstrap/
■参考URL（学習）
• http://js.studio-kingdom.com/angularjs/guide
• http://d.hatena.ne.jp/Kazzz/20131207/p2
• http://www.walbrix.com/jp/blog/2014-01-angularjs-bootstrap.html
• http://8th713.github.io/LearnAngularJS/#/
• http://dev.classmethod.jp/tool/angularjs_getting_started/
• http://angularjsninja.com
• http://blog.asial.co.jp
■参考書籍
• WEB+DB vol.79 特集
• はじめてのAnglarJS（http://www.amazon.co.jp/dp/4777518086）

16. ABC 2014 Spring
モバイル対応が強化される？
AngularJS 2.0