Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
64
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

『AngularJSでのモバイルフロントエンド開発』というタイトルで発表してきた

はじめに

ITエンジニア勉強会~ Engineer’s Learning Vesper という勉強会で 『AngularJSでのモバイルフロントエンド開発』 というタイトルの発表をしてきました。

スクリーンショット 2014-09-30 17.35.01.png

スライドはこちら⇒http://www.slideshare.net/hiroyukikusu/elvangularjs

要約をこちらにも投稿します。スマホ用のWEBサイトに AngularJS の導入を検討されている方の参考になれば。

AngularJSとは

  • Google製の JavaScript フレームワーク
  • MV*(またはMVW)
  • フルスタック
    • 機能は豊富だが、いわゆる「AngularJS way」

モバイルでAngularJSを使うメリット

  • 純粋にフレームワークとしてのメリットの享受
    • コード量的に 中規模 までは耐えうる
      • 大規模になると性能の問題がでてくる
  • 他の CSSフレームワーク と組み合わせてアプリっぽく
    • Onsen UI、ionic、Famo.us
  • Webの技術 でアプリケーションが作れる
    • 1ソースで iOS/Android 両対応
    • ただし現時点ではネィティブアプリほどのUXは実現できない
  • SPA (シングル•ページ•アプリケーション)
    • モバイルなので通信量は抑える必要があるため

利用するCSSフレームワーク

  • AngularJSをベースとし、また現時点で完成度が高いのは2つ

モバイル利用でのポイント

① 通信頻度/量のチューニング

モバイル環境で AngularJS を利用する際は(AngularJS に限らずフロントエンドは) 通信頻度/量の削減 が不可欠です。

  1. ファイルの数と容量を減らす
    • JavaScript/CSSファイル群の ファイル圧縮(minify) , ファイル結合(concat)
    • 画像ファイルの最適化(縦横サイズ、容量)
      • もしくは CSSスプライト を利用
    • ファイル郡の gzip 圧縮
  2. ブラウザに読み込んだものは使い回す
    • JavaScript/CSS/HTML/画像/連携APIの ブラウザキャッシュ
      • HTTPレスポンスヘッダの最適化(サーバ側)
      • ブラウザからの条件つきリクエストへの対応(サーバ側)
    • メモリ(JavaScriptオブジェクト)
      • モデル をきちんと設計
      • AngularJSに限った話であれば、
        • HTMLは angular-ui-router の テンプレート機構 でメモリへキャッシュ
        • 外部APIは $httpサービス でメモリへキャッシュ
    • ..HTML5の Application Cache は使い勝手が悪い
  3. 遅延ロード(必要になったらロード)
    • JavaScriptファイル群
      • RequireJS (ただし複雑度はあがる)
      • ただしファイル結合の恩恵を受けれなくなるので、都度判断
    • HTMLファイル群
      • angular-ui-router 等の テンプレート機構
    • CSSファイル群の遅延ロードは恐らく推奨されない
    • 画像の遅延ロード(ブラウザの表示領域にはいったら読み込む)
    • ページの作り方として、例えば商品が100件あったら5件づつ表示など
  4. 体感
    • レスポンスを待ってる感が無い UIを考える
    • ユーザが気づかないうちにAPIを叩く
      • 先読み、非同期
  5. ネットワーク
    • 静的リソース群なので CDN (Contents Delivery Network) を利用するのがお手軽。
      • AWS でいえば CroudFront
    • 接続コネクションの keepalive

② そのほかチューニング項目

通信まわり以外でも、下記を気にする必要がある。

  • 動作速度
  • 描写速度
  • メモリ利用量

③ セキュリティ対策

  • ソースはブラウザ側なので 全て解読される 前提で
    • 中間者による改竄を防ぐなら全てSSLページで
    • 重要な処理は、やはりサーバ側にAPIを用意する必要ある
  • フロントエンドで考えるべきは大きく3つ
    1. DOM Based XSS (Cross Site Scripting)
    2. CSRF (Cross Site Request Forgeries)
    3. CSP (Content Security Policy)

④ SEO

  • クローラが JavaScriptを解釈しない? かもなので注意
    • つまり、JavaScriptで動的に描写したHTMLコンテンツを読ませることが出来ない
    • 必要あらば PhantomJS 等のサーバ側JavaScriptでコンテンツ書き出し

⑤ ほか

  • ちゃんとやるなら、例えばネィティアプリのように バージョンアップ通知 を表示する
    • 運営側で新しいソースコードをブラウザ側へ反映したい場合
    • メモリ系はブラウザをリロードさせればOKだが、ブラウザのファイルキャッシュやストレージも対象となるので、ちゃんとやるなら作り込みが必要かも

AngularJSを使ってみての感想

  • きちんと MV*構成 を設計すれば、テスト(コード)が楽
  • モデル/サービス をきちんと設計しないと、色んなところで同じようなものを作る羽目になる
  • モバイルで 大規模なもの には今のところ向かないと思う
    • 前述のファイル容量や性能の問題
  • CSSフレームワーク はなるべくカスタマイズしない方が良い
    • フレームワークの枠を越えると、とたんに複雑になる
  • Android は作り方や端末によってはもっさりするかも
    • 特にネィティブアプリの WebView 経由は注意

ほか

おわりに

導入の際にどのような点に注意するべきかが伝われば幸いです。

また、以前に『HTML5 Japan Cup 2014』というイベント向けに、個人で AngularJS と Onsen UI で作成したものが下記にあります。ライトなものですが、宜しければ参考にしてください。

今のところ、こういうライトなものだったら十分に使えるんじゃないかな、と思います。
(もちろんヘビーなものも、ちゃんと作ればいけるとは思います。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
64
Help us understand the problem. What are the problem?