カテゴリー: HTML 5

日経Linux 2011-03 に連載として掲載されている
HTML5 でつくるAndroid アプリというのを実践しています
今回、行うにあたって気をつけるのは
Webサーバーがないと実験できないということです
とはいっても、本格的にサーバーを構築する必要性はありません
いつものように。XAMPP を起動すれば問題なくできます
ただ、今回の雑誌のページ構成だと
HTMLのコードが分かりにくい構成だと思います
サンプルは、付録DVDについていて、ソースコードも入っていますので
これを参考にしながらみていかないとわかりにくかったです
付録DVDのソースコードの収録先は
/media/LIN201103/article/rensai_html5
となります
また、サンプルそのものは配布されていませんが
http://dev.c-lis.co.jp/html5/nikkeilinux201103/
にサンプルの実行できるページが載っています
ある程度のプログラミングの経験があれば
わかるのですが
初心者には向かないかな、という内容ですが
今後のためにも勉強してみます
fedora13 で cp コマンドでソースをコピーし
じっくり行おうと考えたのですが
なぜかエラーになるため、
ubuntu 10.10 を使って
scp コマンドを使って転送することにしました

Application cache は
Webアプリの実行に必要なファイルをあらかじめダウンロードしてローカルの環境に保存しておき
インターネットにつながらない環境でも実行を可能にできるようです
今回は、前回作成した
webworkers のサンプルページにいく前に通るトップページという
Application cache を適用します
htmlタグにmanifest属性を追加
manifest ファイルの名前
sample.manifest を指定します
そして、sample.manifestでキャッシュすうファイルの名前を指定します
こうしておくことで
トップページにアクセスしたときに
sample.manifest で指定したファイルがキャッシュされ
ネットが切断されても
まだリンクしていないファイルを表示することもできるようです
今回も、XAMPPを使って実験します
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
からダウンロードしたファイルを
unzip all.zip
で解凍
さらに、
sudo cp -p ~/ダウンロード/applicationcache/* /opt/lampp/htdocs/
でコピー
これで実験できます
日本語の部分が文字化けしているため
UTF-8で文字コードを指定したのですが
ダメでした
手打ちで自分で打ち込めば、文字化けはしないようです
改行コードが原因なのかもしれません

Web workersを使うことで
java script の処理を並列化できます
これによ複数の処理が可能になり
サーバから画像データを受信しながら画像解析することも可能になります
今回もサンプルはダウンロードできるのですが
このサンプルを実行するには
サーバへのアップロードが必要とのことです
このため、簡易的にサーバーを容易するため
XAMPP を使用します
XAMPPがインストールされている場合
ubuntu なら
sudo /opt/lampp/lampp start
で起動します
今回、設置するファイルの場所は
/opt/lampp/htdocs/
へ設置します
日経Linux 2011-02を参考にしているのですが
どうやら、記述されている内容の java script のところで
記述ミス？があり、そのままタイプしても実行できません
このため
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
からダウンロードしたファイルを
unzip all.zip
で解凍し
解凍したディレクトリに移動
そして
cp -p webworkers/* /opt/lampp/htdocs/
で移動
これで
Google Chrome を起動し
http://localhost/sample.html
でアクセスすると
実行できます
（私の環境では、ボタンのラベルが文字化けしました）
実行結果には以上がありませんでした
興味がある方は
どう違うのかを
一度書籍を購入し、diff コマンドを使って
違いをみてみるとわかります

ようやく環境も整ってきたので
さっそくHTML５の実験を開始してみます
まず、今回実験したのが
HTML５のAPI
WebStorage API です
これをつかうことで
ブラウザ側でデータを保存し、サーバーと通信せずに参照するということができます
WebStorage API には
localStorage
と
sessionStorage
があり
localStorage は
保存したデータが削除を命令しないと消えない
sessionStorage は
ブラウザを終了すると、データも消える
という仕組みになっています
このため
ユーザ情報などは
localStorage
サーバーから送られたデータの一時保存などには
sessionStorage
というように使い分けます
今回は掲載されていたサンプルが
http://dev.c-lis.co.jp/html5/nikkeilinux201102/
に掲載されています