【ABC2014Spring LT】AngularJSでWEBアプリ開発

3,922 views
3,726 views

Published on

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

Published in: Technology

【ABC2014Spring LT】AngularJSでWEBアプリ開発

  1. 1. Android Bazaar and Conference 2014 Spring LT AngularJS で WEBアプリ開発 hkusu 2014/3/21
  2. 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. 3. ABC 2014 Spring AngularJS × スマホWEBサイト • AngularJS? .. Google製のJavaSrciptフレームワーク .. AndroidもGoogle製 • 今回のスマホWEBサイトの定義 .. HTML、CSS、JavaScript で実現したサイト .. for Android/iOS 本日の内容
  4. 4. ABC 2014 Spring WEBの技術(HTML/CSS/JavaScript)の活 用 ... Android/iOS 向けのクラスプラット フォーム開発 … PhoneGap、Monaca 等と連携すれば ネィティブにも … 運用フェーズでの更新が容易 大規模WEB開発 … アプリケーションの大きさ … 開発人数 なぜAngularJS?
  5. 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. 6. ABC 2014 SpringなぜAngularJS? リッチなスマホWEBサイトって? … 演出? 機能が多いこと? → NO。UX(ユーザ体験)が大事、 だと思う つまり、ユーザアクションに対する反 応をいかに向上させるか
  7. 7. ABC 2014 Spring 従来のページ遷移型のスマホサイトでなくて、シン グルページアプリケーションへ なぜAngularJS? index.html ダウンロードされたロジック ファイルが端末側で動作。 従来のようにユーザアクション毎に HTML丸ごとを取得しにいかない サーバ ユーザアクション HTML(変更分のみ)、 JSON(P) 変更分のみ DOM を更新
  8. 8. ABC 2014 Spring 将来的には こういう構成のとき、AngularJSいいよねっていう話 HTML CSS JavaScript クライアントブラウザ サーバ マルチデバイス化 API 表示に関わるものは ブラウザで処理 (マルチデバイス対応 もここで) サーバ機能はSaaSな どでAPIで提供される なぜAngularJS?
  9. 9. ABC 2014 Springモバイル対応 ■METAタグ http://getbootstrap.com/css/ から引用 ■PC等も対応するならBootstrapいれる(レスポンシブ) ■タッチイベントの最適化とスワイプ対応 → ngTouchを導入 ■必要あらば UIライブラリ導入 → ionic、onsen ui など。この2つはそれ自体が AngularJSベース ■遅延読み込み(画像の Lazy Load)を導入
  10. 10. ABC 2014 Springモバイル対応 ■AngularJSのファイルサイズが大きいことへの対応 − minifyする .. Gruntで − gzipで圧縮 − 手作業で圧縮 and .htaccess等で振り分け − または Grunt で − または mod_deflateなど(Apacheモジュール) − 端末側にキャッシュさせる − HTTPレスポンスの Cache-Control ヘッダ、 Expires ヘッダ − CDNを使う(AWSでいうと CroudFront)
  11. 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. 12. ABC 2014 Springほか詳しくは ■ブラウザのキャッシュコントロールを正しく理解する http://qiita.com/hkusu/items/d40aa8a70bacd2015dfa ■静的リソース(HTML,JS,CSS,画像)のブラウザキャッシュを制御 http://qiita.com/hkusu/items/468cc0ee0d767e7cc790
  13. 13. ABC 2014 Spring https://itunes.apple.com/jp/app/id432831907 エンジニア(フロントエンド/サーバ)募集! デザイナー/WEB制作者 募集! お仕事も募集! 世界中で使われるO2Oサービスの実現 ネイルブック ゆめみについて
  14. 14. ABC 2014 Spring http://yumemi-inc.github.io ゆめみのTEC情報配信サイト。いま準備中。 ゆめみについて
  15. 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. 16. ABC 2014 Spring モバイル対応が強化される? AngularJS 2.0

×