Android Bazaar and Conference

2014 Spring LT

AngularJS でWEB アプリ開発

hkusu

2014/3/21

ABC 2014 Spring自己紹介

hkusu ( 久須 裕之 )

所属：株式会社ゆめみ （ http://yumemi.co.jp）

仕事：スマホ向けアプリ /API/ WEB/ サーバ構築 全般

http://qiita.com/hkusu

hiroyuki.kusu

@h_ku_su

https://github.com/hkusu

ABC 2014 Spring

AngularJS × スマホ WEB サイト

• AngularJS ？ .. Google 製の JavaSrcipt フレームワーク .. Android も Google 製

• 今回のスマホ WEB サイトの定義 .. HTML 、 CSS 、 JavaScript で実現したサイト .. for Android/iOS

本日の内容

ABC 2014 Spring

WEB の技術 (HTML/CSS/JavaScript)の活用　 ... Android/iOS 向けのクラスプラット フォーム開発 … PhoneGap 、 Monaca 等と連携すれば ネィティブにも … 運用フェーズでの更新が容易

大規模 WEB 開発 … アプリケーションの大きさ … 開発人数

なぜ AngularJS ？

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/

ABC 2014 Springなぜ AngularJS ？

リッチなスマホ WEB サイトって？ … 演出？ 機能が多いこと？

→ NO 。 UX( ユーザ体験 ) が大事、 だと思う

つまり、ユーザアクションに対する反応をいかに向上させるか

ABC 2014 Spring

従来のページ遷移型のスマホサイトでなくて、シングルページアプリケーションへ

なぜ AngularJS ？

index.html

ダウンロードされたロジックファイルが端末側で動作。

従来のようにユーザアクション毎にHTML 丸ごとを取得しにいかない

サーバ

ユーザアクション

HTML( 変更分のみ ) 、

JSON(P)

変更分のみ DOM を更新

ABC 2014 Spring

将来的には

こういう構成のとき、 AngularJS いいよねっていう話

HTMLCSS

JavaScript

クライアントブラウザ サーバ

マルチデバイス化

API

表示に関わるものはブラウザで処理

（マルチデバイス対応もここで）

サーバ機能は SaaSなどで API で提供さ

れる

なぜ AngularJS ？

ABC 2014 Springモバイル対応

■META タグ http://getbootstrap.com/css/ から引用

■ PC 等も対応するなら Bootstrap いれる ( レスポンシブ )

■ タッチイベントの最適化とスワイプ対応 → ngTouch を導入

■必要あらば UI ライブラリ導入 → ionic 、 onsen ui など。この２つはそれ自体が AngularJS ベース

■遅延読み込み（画像の Lazy Load ）を導入

ABC 2014 Springモバイル対応

■AngularJS のファイルサイズが大きいことへの対応

　− minify する .. Grunt で

　− gzip で圧縮 − 手作業で圧縮 and .htaccess 等で振り分け − または Grunt で − または mod_deflate など（ Apache モジュール）

− 端末側にキャッシュさせる − HTTP レスポンスの Cache-Control ヘッダ、 Expires ヘッダ

− CDN を使う（ AWS でいうと CroudFront ）

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

ABC 2014 Springほか詳しくは

■ ブラウザのキャッシュコントロールを正しく理解する http://qiita.com/hkusu/items/d40aa8a70bacd2015dfa

■ 静的リソース (HTML,JS,CSS, 画像 ) のブラウザキャッシュを制御 http://qiita.com/hkusu/items/468cc0ee0d767e7cc790

ABC 2014 Spring

https://itunes.apple.com/jp/app/id432831907

エンジニア ( フロントエンド / サーバ ) 募集！デザイナー /WEB 制作者 募集！ お仕事も募集！

世界中で使われる O2O サービスの実現

ネイルブック

ゆめみについて

ABC 2014 Spring

http://yumemi-inc.github.io

ゆめみの TEC情報配信サイト。いま準備中。

ゆめみについて

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）

ABC 2014 Spring

モバイル対応が強化される？

AngularJS 2.0