tanaka's Programming Memo

プログラミングについてのメモ。

パーフェクトJavaScript勉強メモ(13)(14)

JavaScript Web 書籍

前へ | 次へ

13章 HTML5概要

HTML5の歴史

HTML5の登場の経緯
  • p339 HTML5を推進するためにApple,Mozilla,OperaがWHATWGというコミュニティを設立。Web技術の仕様を策定し、W3Cへフィードバックをする
HTML5の現状
  • p339 2011年当時のHTML5の状況。当時はまだIEに不安があった
  • スマホから普及した
  • p340 TV端末はまだだった
Webアプリケーションとネイティブアプリケーション
  • パフォーマンスとしては、ネイティブアプリケーションに勝てない
  • Webアプリケーションの強みはクロスプラットフォーム

HTML5の概要

  • p341 W3Cは、HTML5の対応状況を示すロゴを提供 http://www.w3.org/html/logo/
  • 通信関連、CSS3・Web Fontsなど、位置情報・加速度センサなど、グラフィック表現、音声・画像再生、非同期処理や通信など、microdata・microformats・アウトライン要素の追加など、オフライン・ストレージなど
  • API一覧

p342 ブラウザベンダーのHTML5情報ポータル

14章 Webアプリケーション

HistoryAPI

History APIとは(書籍のリンクはNot Found)
  • p343 JavaScriptからブラウザのURLや履歴情報を操作するためのAPI
  • AJAX的にコンテンツを更新するとページのURLが変化しない。ページの状態と対応する操作を本APIで行う
  • ページの遷移を発生させずに、URLや履歴を操作する
ハッシュフラグメント
  • URLはWeb上のコンテンツを一意に識別するためのものだが、AJAXでページを書き換えるとURLがページ内容を示さなくなる
  • p344 ハッシュフラグメントはURLに付加する#から始まる文字列
  • これはページの遷移が発生しないので、これを利用してページの状態を表す
  • #!(hashbang,shebang) とする慣例がある。Googleも提案
  • ハッシュフラグメントでは、検索エンジンなどのクローラとの相性が悪い。クローラは通常、JavaScriptの実行結果まで追わない
    • p345 クローラは#!を含むURLをAJAXアプリケーションと判断して、「#!」を「?_escaped_fragment_」というパラメータに置換してサーバへアクセスする
    • サーバは、_escaped_fragment_パラメータを含むリクエストには、静的なページを返す
インターフェース
  • historyオブジェクトはwindowオブジェクトのプロパティ。履歴情報の操作ができる
  • popstateイベントは、ページ履歴を辿ったときに発火する
  • ページ履歴の保存
    • JavaScriptを用いて特定のページへ遷移するにはlocation.hrefへURLを代入して書き換える
    • ページ遷移を発生させずに特定のコンテンツを表示する場合は、ハッシュフラグメントを利用してURLにページの状態を保持させる。location.hashに「#!」から始まる状態を書く
    • p346 上記をせずにURLを更新するには、history.pushState()メソッドを利用
    • 第３引数にURLを指定すると、サーバにリクエストせずにURLを変更。フルパスの場合は同一オリジンポリシーを守ること
    • 第１引数にはページ状態の詳細を示すオブジェクト、第２引数にはページタイトル
  • ページ履歴の移動
    • ブラウザの戻るはhistory.back()、進むはhistory.forward()、指定した分だけ前後に移動はhistory.go()
  • ページ状態の復元
    • pushStateで追加したページ履歴を辿る場合はページ遷移が発生しないので、自前で処理をする
    • 移動の監視にpopstateイベントを利用
    • p347 location.pathname.substring(1).split('/');で、パスを分解する
    • 描画を高速化したり、アニメさせることで自前で実装する意味がある
  • より詳細なページ状態の復元
    • pushStateの第１引数に、その状態に必要なデータを持たせることができる
    • history.stateプロパティで参照可能
    • （補足：書籍の時点では、Firefox4以降に実装。Chrome13には未実装。2015年現在は、Operamini以外の主要なブラウザで利用可能)
  • ページ履歴の差し替え
    • 細かい状態をページ履歴に残すと戻る操作が煩わしくなる
    • p349 表示中の情報を更新するだけで対応可能。replaceStateメソッドを利用。引数はpushState()と同じで、新しくページ履歴は追加せず、現在の履歴情報を上書きする
  • historyオブジェクトのプロパティ一覧

ApplicationCache

キャッシュ管理
  • p350 スマホなどで通信量を減らすために、キャッシュをコントロールすることができる
  • 2015年現在、OperaMini以外の主要ブラウザには対応
キャッシュマニフェスト
  • キャッシュマニフェストというファイルを作成することで、キャッシュするファイルかどうかを設定できる
  • キャッシュマニフェストの作成
    • キャッシュマニフェストのパスをhtmlタグのmanifest属性に指定
    • 拡張子は.appcacheとする慣例がある
    • text/cache-manifestというMIME Typeで配信する
    • Apacheの場合、.htaccessファイルをキャッシュマニフェストと同じディレクトリに作成して、AddTypeで.appcacheにMIME Typeを設定する
    • manifest属性を指定したファイルは自動的にキャッシュされる
    • キャッシュマニフェストの最初は"CACHE MANIFEST"
    • #はコメント行
    • CACHE:以降の行は、CACHEセクションとなり、記述したファイルがキャッシュされる
    • Google Chromeはキャッシュしたらコンソールにログを表示するので確認しやすい
  • p352 キャッシュの更新
    • キャッシュマニフェストが更新されたら、キャッシュしたファイルを更新する
    • コメントにリビジョン番号や更新日時を挿入しておくとよい
    • その上で、ブラウザを２回リロードする。これを解決するには、後述のApplicationCacheAPIを利用する
  • p353 NETWORKセクション
    • キャッシュマニフェストのNETWORD:以降の行はキャッシュされない
    • 前方一致なので、１行で複数のリソースを一括指定できる
    • ここで指定した外部ドメインのリソースにアクセスできるようになる
    • *で全ての外部リソースへのアクセスを許可する
  • FALLBACKセクション
    • FALLBACK:以降の行は、あるリソースにアクセスできなかった場合の代替リソース指定ができる
    • URLは前方一致
    • p354 以下で、notfound.htmlがアプリケーションキャッシュに格納される。リソースが見つからなかったり、オフラインで接続できなかった場合、それがキャッシュマニフェストからの相対パスでcontents/から始まるリソースであれば、notfound.htmlを表示
FALLBACK:
contents/    notfound.html
ApplicationCache API
  • キャッシュの更新タイミングを細かく制御
  • キャッシュの更新確認
  • キャッシュの反映
    • updatereadyイベントの発生後に、applicationCache.swapCache()メソッドを実行すると、バックグラウンドでキャッシュを更新する。ただし、すでに参照されているリソースはそのまま
    • 全体を更新するにはリロードが必要だが、事前にユーザに通知するのが適切
オンラインとオフライン
  • オフライン中の作業内容をデータベースに保存して、オンラインになったら送信するなどすると、より便利
  • NETWORK状態はnavigator.onLineを参照
  • 接続状態の切り替えにはonline/offlineイベントを監視。document.bodyで発火し、document,windowへ伝播。windowでの挙動は怪しいらしい
  • ハッシュフラグメントと、サーバの「?_escaped_fragment」アクセスへの対応を検討する
  • キャッシュマニフェストで、地図画像をキャッシュできないか
  • バージョンアップはキャッシュで可能そう
  • オフライン、オンラインの検出で地図やライブラリを切り替えるなど

前へ | 次へ