【ABC2014Spring LT】AngularJSでWEBアプリ開発
Download as PPTX, PDF11 likes5,168 views
2014年3月21日（金）に実施される Android Bazaar and Conference 2014 Spring の ライトニングトーク（LT）資料です。
【ABC2014Spring LT】AngularJSでWEBアプリ開発
- 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(ユーザ体験)が大事、 だと思う つまり、ユーザアクションに対する反 応をいかに向上させるか
- 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
- 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）