Smile Engineering blog ( スマイルエンジニアリング・ブログ )

ジェイエスピーからTipsや技術特集、プロジェクト物語を発信します

HTML5のお勉強 第3回 ~ApplicationCache~

2015-06-29 10:00:00 | 最新技術動向展開
バージョン1.1が公開された1990年代からずっと更新されていなかったHTTPですが、
とうとう重い腰を上げて、より高速な通信を実現すべくHTTP2にアップデートされるようですね。
特徴としてはこんな感じのようです。

1.既存のHTTPとAPIは変わらず
2.ヘッダ情報の圧縮・差分送信およびバイナリフレーム化
3.同時に複数のリクエストを投げられる
4.同一ホストへのリクエストは1コネクションで処理する
5.Webサーバー側からキャッシュすべきデータを送ることができる(サーバープッシュ)
6.リクエストの中断をWebサーバーへ通知できる

サーバープッシュなどは、非常に魅力的な機能ですね。
HTMLファイルをレスポンスしたと同時に、
必要なリソースをWebサーバー側から送ることができます。
ただし、WebSocketのように双方向通信を実現するものではなさそうですね。

蛇足ですが、現在策定中の仕様では「HTTP/2」か「HTTP2」が正式名称となるようです。
2.0じゃないんですね。



さて、今回のHTML5のお勉強はWeb高速化に密接に関わるキャッシュ機能、
「ApplicationCache」についてです。
Webページを表示するとき、一般的にブラウザはCSSや画像などをキャッシュしています。
しかしその仕様はブラウザごとに異なっており、
意図的にキャッシュさせたりさせなかったりということを実現することができませんでした。

そこで登場したのがこの「ApplicationCache」です。
ApplicationCacheを利用することで、オフライン状態でもページを表示したり、
キャッシュ内容が古い場合に確実に更新したりすることができるようになります。

実際に試すことができるデモページがありました。
http://html5demos.com/offlineapp

ApplicationCacheを利用していないサイトでは、
インターネット通信ができない状態でページを更新すると何も表示されなくなると思います。
しかしこのサイトは一度表示してしまえば、
たとえ通信ができなくとも何事もなかったかのように表示されます。


それでは、ApplicationCacheの使い方、キャッシュの更新の仕方、
削除の仕方を簡単に解説したいと思います。



■ApplicationCacheの使い方
ApplicationCacheを使うにはまず、マニフェストファイルを用意します。
次のような形式で書きます。

  CACHE MANIFEST
  # ↑必ずファイルの先頭に記述する
  # シャープで始まる行はコメント

  # CACHE:の下に書かれたファイルはキャッシュされる
  CACHE:
  index.html
  index.css
  images/img1.png
  images/img2.png
  images/img3.png

  # FALLBACK:の下に書かれたファイルは、オフラインの時に代わりに表示される
  # 右に指定されたファイルが自動でキャッシュされ、オフライン時に利用される
  FALLBACK:
  /online.html /offline.html

  # NETWORK:の下に書かれたファイルはキャッシュされず、
  # 必ず通信して取得される
  NETWORK:
  *

※中に記述するファイル名に空白等がある場合はURLエンコードする必要があるようです。
適当なファイル(ここではmanifest.appcacheとします)に保存したら、
HTMLファイルに次のように記述します。

  <html manifest="manifest.appcache"> ... </html>

こうすることで、ページを表示したときにマニフェストファイルを読み込ませることができます。
なお、マニフェストファイルは
必ず「text/cache-manifest」というMIMEタイプで送らなければいけません。
Apacheであれば、httpd.confファイルや.htaccessファイルに

  AddType text/cache-manifest .appcache

と追記する必要があります。

これでApplicationCacheを使用する準備は整いました。
実際に試してみれば、きっちりとキャッシュされていることが
開発者ツールなどで確認できると思います。


■ApplicationCacheの更新方法
キャッシュされたファイルは次のいずれかの方法で更新することができます。

  1.マニフェストファイルを修正する
  2.JavaScriptから更新する

マニフェストファイルの中身を修正することで、自動的にキャッシュが更新されます。
コメント内容の修正でもキャッシュが更新されるため、
日付等をコメントとして書いておくと良いかもしれません。
ただし、マニフェストファイルの修正後は2度ページを更新するまで修正内容が反映されません。
これは、1度目のページ更新でキャッシュファイルを更新し、
2度目のページ更新で修正内容を反映するためです。

なお、キャッシュ対象のファイルを更新しても、
マニフェストファイルを修正しない限りページは一切更新されないので注意が必要です。


■JavaScriptからApplicationCacheを操作する
ApplicationCacheはJavaScriptから操作することができます。
具体的にどんなことができるかというと、次の通りです。

  1.ApplicationCacheの状態確認
  2.ApplicationCacheの手動更新

それぞれ簡単に説明します。

●1.ApplicationCacheの状態確認
次のようにすることでApplicationCacheが現在どのような状態かを確認できます。

  switch(applicationCache.status) {
    case UNCACHED:
      // ApplicationCacheを使用していない
      break;
    case IDLE:
      // 何も処理をしていない
      break;
    case CHECKING:
      // 更新確認中
      break;
    case DOWNLOADING:
      // 更新ファイルのダウンロード中
      break;
    case UPDATEREADY:
      // 更新待機中
      break;
    case OBSOLETE:
      // マニフェストファイルにアクセスできないためキャッシュを削除した
      break;
  }

●2.ApplicationCacheの手動更新
次のように記述することで、更新が必要なときに手動でキャッシュを更新することができます。
あくまでキャッシュが更新されるのみで、
ページ内容はリロードするまで更新されないことに注意してください。

  // キャッシュが更新可能になったら呼ばれる関数
  applicationCache.onupdateready = function() {
    // キャッシュを更新する
    applicationCache.swapCache();

    // 必要に応じてページを更新する
    // location.reload();
  }
  // キャッシュの更新確認
  applicationCache.update();

画像などであれば、キャッシュ更新後に個別にリロード処理を実行することで、
ページをリロードしなくとも動的に更新することもできます。
工夫すれば、JavaScriptやCSSファイルもリロードできるかもしれません。

  applicationCache.onupdateready = function() {
    applicationCache.swapCache();

    // 画像をリロード
    var img = document.getElementById("image");
    img.src = img.src + "?preventCache=" + Math.random();
  }
  applicationCache.update();


■ApplicationCacheを削除する
次のいずれかでキャッシュされたファイルを削除することができます。

  1.ブラウザのキャッシュを削除する
  2.マニフェストファイルを削除・リネームする



ApplicationCacheを利用することで、
オフラインでもWebページが表示可能になるほか、Webサーバーの負荷軽減にも役立ちます。
しかし、キャッシュポイズニング攻撃を受けた場合などは非常に危険な状態となります。
そういったことも考慮してうまく活用できれば、より速いWebページが実現できそうですね。


次回はHTML5から少しはなれて、HTTP2のサーバプッシュとApplicationCacheに関わる「ServiceWorker」について解説する予定です。


monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント
この記事をはてなブックマークに追加

戦術

2015-06-29 09:30:00 | 最新技術動向展開
今月は技術っぽくない話題ですが、
ちょっと箸休め的な視点で書いてみました。

最近では海外のサッカーを見る機会が多くなりましたが、
特に感じる事は、チーム戦術の2極化が進んでいる事です。
それぞれの戦術を簡単に説明すると以下のように整理できます。

◆ポゼッション

 利点
 ・ボールを支配する時間が長いため、主導権を握れる
 ・ボールを失わない限り、失点のリスクが無い
 ・相手を走らせて、体力を消耗させることができる

 欠点
 ・浅い守備陣形のため、最終ラインの裏を突かれるリスクが高い
 ・多数の細かいパスを使うため、パスミスからピンチに陥る可能性がある

◆カウンター

 利点
 ・深い守備陣形のため、最終ラインの裏を突かれるリスクが低い
 ・攻撃に転じた際、スペースを大きく使える

 欠点
 ・守備でボールを追いかける時間が長いため、消耗が激しい
 ・攻撃の際、自陣深い位置からとなるため、相手ゴールまで遠い


どちらが優れているという訳ではなく、それぞれ利点と欠点を持ち合わせており、
相手のパフォーマンスを上回れるかで勝敗が決する気がします。
そして、最近では相手に合わせて使い分けてくるチームも存在します。
戦術理解度も2倍要求されるので、実を結ぶまでの道のりは険しいようです。


ここで恒例の「業務に役立つ発想」に結び付けてみたいと思います。

我々IT業界の業務形態にも様々ありますが、
常に問題や課題と向き合いながら、チームとして動いています。

自分たちから能動的に対処した方が良い問題もありますし、
一歩引いた位置で、状況を確認してから行動した方が良い場合もあります。

強いチームを作るには、置かれている状況を分析し、
効果的な戦術を選択して遂行する。
という事をくり返し、練度を上げて行く事が近道だと思います。

サッカーで、みんながポゼッション戦術で動いているのに、
一人だけカウンター戦術で動いていたら・・・
そこからパスミスが続出して主導権を失いピンチに陥る可能性があります。

業務でもチームの進捗を進めるために、何をすべきか考えながら作業するのと
何も考えずに作業をするのでは、すぐに差は出ないかもしれません。
が、長い時間を掛けてチーム力は熟成されていくと思います。

常日頃から、戦術理解度を高める事と、周囲とのコミュニケーションが
重要であることを改めて再認識できました。

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント
この記事をはてなブックマークに追加

Cyber Physical Systems(CPS)

2015-06-08 19:57:53 | 最新技術動向展開
今回はCyber Physical Systems(CPS)を紹介致します。

実世界(Physical空間)にある多様なデータをセンサーネットワーク等で収集し、
IT(サイバー空間)で大規模データ処理技術等を駆使して分析/知識化を行い、
そこで創出した情報/価値によって、産業の活性化や社会問題の解決を図り、
実世界とITが緊密に結合された相互関係を作りだすシステムがCPSです。
とても難しいですね。何の事やら、、、

CPSについて、ゆっくり理解していきたいと思います。

近年のIT技術の発展はめざましく、これにともないIoTの取り組みが進んでいます。
IoTの進化により、いままでデジタル化されることの無かったデータが、
大量にインターネットに流通されるようになってきました。

例えばバイタルデータ。血圧計でシュポ、シュポ。とても古い話ですね。
最近は、手首に巻くスマートなバンドとスマートフォンですかね。
計測したバイタルデータはデジタル化され、スマートフォンやクラウドへ。
これは「すごい最新技術!」ではなく、今や当たり前ですね。
このようにIT技術の発展により、データはデジタル化されています。

このデジタル化されたデータも当初は各々のデータとして扱われていました。
最近では(最近といっても少し昔のことですが)
デジタル化されたデータはビッグデータとして集積された状態になっています。
これらデータを解析、分析することで得られる情報は多く、
これら情報を実世界で利活用する事は、高度で快適な実世界を創ることに役立ちます。
ビッグデータ等を活用して得られた情報を実世界に利活用する事で、
実世界は高度で快適になると考えられます。
これを実現するために必要なシステムがCPSです。

CPSを活用することで実世界には今までにない付加価値が生まれ、
いまは当たり前の事がCPSを活用した世界では変わってくると考えられます。

どのように変わるのでしょうか。
健康や医療というキーワードで少しイメージしてみましょう。

いまは、
体調の不調を感じると病院へ行き治すといった『治療』という考えが当たり前ですが、
CPSを活用すると『治療』という意識が『予防』にシフトすると考えられます。

日々のバイタルデータ等は集積されるでしょう。
老若男女あらゆるタイプのデータがビッグデータとして。
ある特定の人のデータを時系列に見るだけでも得られる情報はあるでしょうが、
さまざまなデータを組み合わせて分析する事で、予測が可能となります。
「喉が痛い。風邪の兆候」というレベルのものではなく、
「何十年後にかかる風邪」というレベルでの予測が可能になるのかもしれません。
このような世界では、病気になる前に対策ができるため、
『治療』という意識よりは『予防』へと意識が変わるのです。

健康や医療というキーワードを用いて、想像しやすい例で考えてみました。


そもそもCPSという言葉が注目され出したのは、2009年のことです。
米国の科学財団がCPSに関するワークショップを開催し、CPSの可能性や課題などを議論しています。

日本のWEBサイトを検索してみると、あるWEBサイトでは2010年11月ごろから2011年2月にかけて、
CPSに関する連載が行われているものもありました。

IoTの発展とともに再度CPSが注目されています。

国を挙げての取り組みはIoTの発展と共に加速し、
今後私たちの暮らしに改革をもたらすことでしょう。


monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント
この記事をはてなブックマークに追加