application cache の使いかたを覚えて
オフラインでも動くアプリがつくれるようになると
必要なのが
現在、オンラインなのか、それともオフラインなのか
という判定
これはオンライン判定のためのプロパティの
window.navigator.onLine
を使うことで判定できます
これを if で判別すれば
オンラインなら true
オフラインなら false
が帰ってくるのでこれで分岐させます
ソースにすると
if(window.navigator.onLine){
オンラインのときの処理
}else{
オフラインのときの処理
}
というようになります
オフラインなら以前ダウンロードしたデータを
利用して
オンラインなら最新のデータをとってくるようにすれば
オフラインで遊べるものができます
月別: 2013年3月
機内モードでオフライン環境作成
スマートフォンのテストで
オフライン環境をつくるには
一番簡単な方法としては
機内モードにすること
これを行うことでオフラインにできるため
アプリケーションキャッシュの実験もできるようになります
あと、アプリケーションキャッシュのメリットは
サーバーとの通信をおさえて
端末のローカル環境に保存したものを使うため、パケット節約にもなります
ssh の鍵ファイルのパーミッション
AWSの鍵をコピーして新しいマシンで動かそうとしたら
It is required that your private key files are NOT accessible by others.This private key will be ignored.
とエラーがでて接続拒否されました
このため、エラーメッセージから検索して
MacでSSH公開鍵・秘密鍵ファイルをコピーして使ったら警告がでた
を参考に
chmod 0600 ~/.ssh/鍵ファイル名
で権限変更することで、無事に接続できるようになりました
キャッシュしたくないファイルの設定
キャッシュしたくないファイルの設定
マニュフェストファイルに
キャッシュしたくないファイルを指定することもある
例えば
WebAPIやCGIの利用結果
頻繁に更新されるRSSなど
これらは、キャッシュしないほうがいいため
指定することになる
この場合、キャッシュしたいファイルは
CACHE:
のセクションへ記述
キャッシュしたくないファイルは
NETWORK:
のセクションへ記述する
わかりにくいのでソース
CACHE MANIFEST
#ver1.0
CACHE:
test.html
test.png
test.css
NETWORK:
test.php
というかんじになる
ubuntu で HTML 編集に便利な bluefish
ubuntu でHTMLファイルの編集をしたいので
HTMLエディタになるものをインストールしました
もともと Eclipse で補完機能がべんりだったため
もっと軽量で使いやすいものがないか調べてみました
インストールは簡単で
端末から
sudo apt-get install bluefish
でインストールできます
一番楽だと思うが
HTML5 などの勉強するときに、
bluefish を起動して
ファイル >テンプレートから新規ファイルを開く
を選択すれば
PHP
HTML5
のファイルを簡単に作成できるというものです
HTMLを記述するときに面倒なのがタグうちですが
この bluefish を使えば簡単にできます
<
を入力すると、候補のタグがでてきます
これができるだけで
作業速度もあがりますし、なによりタグの間違いでバグや
エラーにならずにすむようになります
キャッシュしたファイルのアップデート
キャッシュしたファイルのアップデート
キャッシュしたファイルをアップデートするときは
マニュフェストファイルの内容を書き換える
このとき、ファイルの構成の変更は必要なく
コメントアウトした文字やバージョン番号など
1文字でも変更すれば！更新したと見なされ
キャッシュの内容が更新される
テストのため、任意で更新したり
常時稼働しているWebアプリの内容を強制変換するには、
キャッシュ制御のためのAPIを使う
以下はキャッシュ制御メソッド
update()
マニュフェストファイルを明示的にチェックし
新しいファイルをダウンロード
swapCache()
update()てダウンロードしたファイルと差し替える
update()を実行し
アップデート状態が整うと
updatereadyイベントが発生
このイベントを処理する中で、
swapCache()
を実行すれば、Webアプリを最新版に差し替えることごできる
Application Cache利用の注目点
Application Cache利用の注意点
注意点は2つ
マニュフェストファイルのMIME typeが
text/cache-manifestでないと機能しない
次に、キャッシュファイルのアップデート
マニュフェストファイルを更新すれば
キャッシュの内容も更新されるけど
タイミングや実装によっては
すぐに反映されないことがあるということ
それぞれの対処は、下記に記述
まずほ、MIME Typeから
MIME typeは
Webサーバーとブラウザーの間でやりとりされる
データ形式の値のこと
Webサーバーで、このMIME typeが有効になっていないと
Application Cacheが有効にならない
このときには、
Webサーバーで
.appcacheのMIME typeを定義する
使っているWebサーバーがApacheなら
Webアプリと同じディレクトリの中へ
.htaccessファイルを作成し対処する
この.htaccessファイルの中へ
AddType text/cache-manifest .appcache
を記述する
もし、キャッシュが有効になっていないと思ったら
パソコンのGoogle chromeでも確認可能
Webページを右クリック->要素を検証
で
Networkタブを開き、ページをリロード
これで、TypeのところにMIME typeが表示される
残念ながら
Nexus7にインストールしたchromeブラウザーでは
この方法での確認ができなかった
application Cacheの利用の手順
Application Cacheの利用の手順
まず、オフラインで動かしたいアプリで使うファイルを準備
次に
準備したファイルをもとに、マニュフェストファイルを作成
ちなみに、マニュフェストファイルはテキストファイルで
拡張子は
.appcache
以前は.manifestだったけど、Windowsで存在していたため
現在は、
.appcacheになったらしい
マニュフェストファイルは
最初の一行目は
CACHE MANIFEST
となる
Linuxとかで、シェルスクリプトで
最初に
#!/bin/sh
と書くようなお約束
そして、あとはキャッシュしておきたいファイルの
URL一覧を記述していく
もし、キャッシュしておきたいファイルが
test.html test.png test.js
なら
ファイルの中身は
CACHE MANIFEST
test.html
test.png
test.js
というようになる
あと、マニュフェストファイルでコメントアウトしたいときには、
最初に#をつける
たとえば
バージョン1とコメントしたいなら
CACHE MANIFEST
#バージョン1
test.html
test.png
test.js
となる
コメントアウトは、JavascriptやJava
PHPなどで、コードをわかりやすくするときに使われる
ちなみに、#をつけるのはLinuxサーバーの
設定ファイルを変更するときにも使われる
たいていはvi もしくはvimでの操作になるけど
覚えておくとかなり楽になる
マニュフェストファイルの作成ができたら
HTMLファイルの中の
htmlタグの
manifest属性へ
マニュフェストファイルのURL(パス)を記述する
たとえば、マニュフェストファイルが同じディレクトリの中にあり
ファイル名が
test.appcache
なら
<html manifest=”test.appcache”>
となる
Application Cacheというもの
Application Cache
Application Cacheを使うことで、オフラインでも
動くWebアプリができる
従来のWebアプリは、ネットにつながっていないと
使えない
Application Cacheにより
Webアプリがオフラインでも動くのは
オンラインのときに
必要なファイルをダウンロードしておき
それをブラウザーが覚えているから
これがキャッシュというもの
Application Cacheを使うと
二回目からのアクセスは
インターネットのWebサーバーからファイルを取得せずに
保存してあるキャッシュファイルから
データ読み出しをする
Application Cacheを使う場合
ローカル領域内に
キャッシュしておきたいファイル一覧を
マニュフェストファイルへ記述し
これをHTMLファイルから参照することで
キャッシュが有効になる
jQueryでタッチイベント
jQueryでタッチイベント
jQueryでタッチイベントを利用するには
jQueryに合わせてタッチイベントを利用する
ポイントは２つ
jQueryのbind()を使いイベントを設定すること
イベントハンドラの中で
タッチ情報を得るために
jQueryが用意した
event.changedTouchesプロパティを使うこと
このプロパティは、配列形式であり
各指のタッチポイントの情報か入っている