Más contenido relacionado
La actualidad más candente (20)
Similar a 【ABC2014Spring LT】AngularJSでWEBアプリ開発 (20)
【ABC2014Spring LT】AngularJSでWEBアプリ開発
- 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
本日の内容
- 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/
- 9. ABC 2014 Springモバイル対応
■METAタグ http://getbootstrap.com/css/ から引用
■PC等も対応するならBootstrapいれる(レスポンシブ)
■タッチイベントの最適化とスワイプ対応
→ ngTouchを導入
■必要あらば UIライブラリ導入
→ ionic、onsen ui など。この2つはそれ自体が AngularJSベース
■遅延読み込み(画像の Lazy Load)を導入
- 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
- 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)