Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:HTML

アプリケーションキャッシュとは

HTML/CSS/JavaScriptや画像ファイルなど、Webページの表示に必要な諸々のファイルをユーザーのローカルに保存する仕組み。

なぜ、アプリケーションキャッシュが必要なの?

モバイル端末等の、通信速度が遅かったり、通信品質が低かったりする端末でも、Webサイトを快適に利用できるようにするため。また、アプリケーションキャッシュをフル活用すれば、オフラインでも動作するアプリケーションを作ることができる。

アプリケーションキャッシュの対応ブラウザーは?

Internet Explorer 10以上、主要なモダンブラウザー(Firefox, Chrome, Safari, Opera)の各最新版、Mobile Safari(iOS2.1以上)及びAndroid標準ブラウザー(Android 2.0以上)。

アプリケーションキャッシュの利用方法

キャッシュマニフェストの作成

キャッシュマニフェストとは、各ファイルのキャッシュ方針を示すファイルのこと。以下のような書式で記述する。

CACHE MANIFEST
# rev1
# キャッシュマニフェストにはコメントを書ける

# CACHE: でキャッシュするファイルを指定する
CACHE:
./app.js
./style.css
./logo.png
./not_found.html

# NETWORK: で、常にネットワークから取得するファイルを指定する
# *を使用すると、全てのファイルをネットワークから取得する
NETWORK:
*

# FALLBACK: で、ローカルにキャッシュされたファイルが存在しない場合の代替ファイルを指定する
# 左側のリソース(/以下の全てのファイル)がキャッシュされていない場合は、右側のリソースを表示
FALLBACK:   
/ not_found.html

リビジョン以外のコメントを除去したバージョン:

CACHE MANIFEST
# rev1

CACHE:
./app.js
./style.css
./logo.png
./not_found.html

NETWORK:
*

FALLBACK:   
/ not_found.html

キャッシュマニフェストファイルには、「example.appcache」といった具合に、「.appcache」という拡張子をつけるのが一般的。

キャッシュマニフェストの配信

キャッシュマニフェストは、text/cache-manifestというMIMETypeで配信する必要がある。Apacheの場合は、キャッシュマニフェストの配置ディレクトリに以下のような.htaccessを配置すると、配信できる。

AddType text/cache-manifest .appcache

キャッシュマニフェストの読み込み

HTMLファイルのmanifest属性で読み込むキャッシュマニフェストを指定する。

<!doctype html>
<html manifest="example.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Application Cache Sample</title>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>HTML5 Application Cache Sample</h1>
    <img src="logo.png" alt="logo">
</body>
</html>

キャッシュマニフェストの更新

CHACHEでキャッシュするよう指定されているファイルについて、キャッシュ対象ファイルが更新された場合でも、ブラウザーは新しいファイルを取りに行かない。ブラウザーに再度リソースの取得をさせるためには、必ずキャッシュマニフェストを更新しなければならない。

キャッシュマニフェストの更新を伝えるのはコメント行の更新でもOKなので、コメント行のリビジョン等を更新して更新を伝える。

Application Cache API

キャッシュマニフェストが更新されても、即キャッシュが更新されるわけではない。流れとしては、(1) Webページを読み込む (2) キャッシュマニフェストが更新されていることがわかる (3) 次回アクセス時にキャッシュを破棄して新しいファイルを取りに行く となる。

こういったキャッシュの更新等の処理を、ブラウザー任せではなく自前で制御したい場合は、Application Cache APIを使用する。

たとえば、キャッシュを1時間おきに更新確認したい場合、以下のようなJavaScriptで実装できる。

document.addEventListener("onload", function() {
    setInterval(function() {
        applicationCache.update();
    }, 1000 * 60 * 60);
});

参考文献

参考URL

<meta  name="viewport" content="width=device-width">
↑がHTMLの<head>内に書いてあるかチェック。 これが入っていないと、iPhone等では解像度(960 x 640等)に従って描画されるので、「Bootstrap入れたのに表示がPCのままだ!」となる。 viewport設定を入れてやると、横幅320pxで描画される。

あけましておめでとうございます。2012年に読んだ技術書のまとめ兼、2013年の抱負です。


☆HTML/CSS

HTML/XHTML&amp;スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
HTML/XHTML&amp;スタイルシートレッスンブック

2月に読了。XHTML1.0を使用したマークアップの入門書。CSS2も同時に習得できます。最初からHTML5を学べる入門書も出てきていますが、XHTML1.0のマークアップはHTML5を書く上で基礎となるものです。本書が、HTMLマークアップの優れた入門書である点は現在でも変わりありません。オススメ。


HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

3月に読了。iOSデバイスに対応したサイト構築方法が学べます。「iPhoneサイト」であって「スマホサイト」ではないので、Android対応に関しては一切触れてません。


2013年は、HTMLに関しては「これをやりたい」ってあんまり無いんですよねえ。CSSに関しては、SCSS/LESSあたりには興味があります(やるとは言ってないw)。


☆JavaScript/jQuery

マンガでわかるJavaScript
マンガでわかるJavaScript

3月に読了。11月に再読。3月時点では分からないところは飛ばして読みました。11月時点では、JavaScriptのオブジェクト指向の理解が進みました。漫画はゆるくて面白いものの、サンプルコードが退屈なのが弱点。Webサイトマンガで分かるJavaScriptプログラミング講座の書籍版です。


Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
Web制作の現場で使う jQueryデザイン入門

4月に読了。実践的なサンプルコードが充実しているうえ、商用利用可! 職場に1冊jQuery本を置いとくならコレ。基礎編は入門に適した内容になっているものの、実践編はプログラミング初心者にはツラい(正規表現が登場したりする)。jQuery学習書としてはWebデザイナーのための jQuery入門の方がオススメ。


jQuery ポケットリファレンス (POCKET REFERENCE)
jQuery ポケットリファレンス

調べ物用。jQuery1.4対応。公式リファレンスを見ても分からない、って時に、本書を読んだら解決したりする。


Head First JavaScript ―頭とからだで覚えるJavaScriptの基本
Head First JavaScript ―頭とからだで覚えるJavaScriptの基本

11月に読了。本の構成が初心者に優しくないうえ、邦訳が雑。非推奨。


JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技
JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技

若手IT勉強会のため購入。マニアックなネタが多いので、中級者以上向け。


他に、JavaScript本格入門も買いましたが、未読。JavaScriptはしっかりやりたいなと思いつつも、いまいちやれてない。仕事で全然使ってないのが一因ですね。今年、どの程度やるかも、仕事次第。


☆PHP

PHP公式資格教科書 PHP5技術者認定初級試験対応 (EXPERT EXPASS)
PHP公式資格教科書 PHP5技術者認定初級試験対応

半分ほど読んで積ん読。環境構築は載ってないので、初心者向けではありません。非常に易しい内容と、妙にマニアックな内容(ビット演算とか)が混在しています。資格に関しては、受験料1万2千円と聞いて取るのをやめました。


よくわかるPHPの教科書
よくわかるPHPの教科書

4月に読了。プログラミング初心者でもOK。読みやすくて分かりやすいのですが、ある程度学習が進んでから読み返すと粗の見えてくる本でもあります。

代替となる入門書としては、プリペアードステートメントを使ってて感心したいきなりはじめるPHP(ただし本のレイアウトに難あり)や、「PHPの会社」アシアルのイラストでよくわかるPHPあたりが良いかな、と。

いずれも200ページ前後で、300ページある『よくわかるPHPの教科書』よりも情報量は少ないです。プログラミング未経験者のPHP入門は、「これ1冊でOK」な500ページ以上あるような入門書にいきなり取り組むより、薄い入門書を1冊読んでプログラミングの感じをつかむ → 充実した入門書を1冊読んで知識を本格化する という流れの方が挫折しにくいと思います。

※「充実した」の基準:MySQLは必須、オブジェクト指向まで載っているとbetter


Webサイト制作者のための PHP入門講座
Webサイト制作者のための PHP入門講座

8割ほど読んだところで積ん読。残りはCodeIgniterが必要になったら読む予定。Hello Worldからフレームワークまで一気に駆け抜ける。PHPのコードは、セキュリティにもしっかり気を配っていて好印象です。MySQLを全く扱っていないのが弱点で、オススメには一歩足りず。


Head First PHP &amp; MySQL ―頭とからだで覚えるWebアプリケーション開発の基本
Head First PHP &amp; MySQL ―頭とからだで覚えるWebアプリケーション開発の基本

11月に読了。PHPとMySQLの基礎を固める本。オブジェクト指向が抜けているのは残念だが、HTTP通信の話やDB関係は充実している。2008年の本。MySQLの設定等、現在では通用しない部分もあるので、オススメには一歩足りない。


PHP 逆引きレシピ (PROGRAMMER’S RECiPE)
PHP 逆引きレシピ

調べ物用。「こういう機能はどう作ればいいんだろう」って時に、目的から探せるので便利。オススメ。


パーフェクトPHP (PERFECT SERIES 3)
パーフェクトPHP

現在読書中。実務者向けの本。PHPの基礎も載ってますが、言語仕様のつまづきやすいポイントや、PHPのオブジェクト指向の構文等、他の言語でバリバリ書いてきた人向け。PHP実務者必読! と言いたいくらい素晴らしい内容。オススメ。

ただし、PHPでプログラミングを学んできて、オブジェクト指向は使うほうは出来るけど、クラスの設計とかはちょっと……という私のような人は苦労すると思います。


独習PHP 第2版
独習PHP 第2版

現在読書中。良くも悪くも教科書的。オブジェクト指向プログラミングを初歩からきっちり解説してあるPHPの入門書は少ないので、本書は貴重な存在。難点は、(1) Windows環境を前提とした解説(環境構築はLinux向けも載っているが、本文のコードはWindows環境) (2) 文章やサンプルコードが退屈 の2点。


PHPに関しては、パーフェクトPHPまで読み終えたら一段落つくかな、という印象です。フレームワークに関してはCake PHPを学習していこうと思います。


☆MySQL

基礎からのMySQL 改訂版 (プログラマの種シリーズ SE必修! )
基礎からのMySQL 改訂版

10月に読了。MySQLの解説は分かりやすく、充実している。PHPも載っているのでMySQLを利用したいPHPerには最適。HTMLも載ってるが、10年以上前のスタイルなので真似してはいけない。


SQLは、CRUD文を一応書けるよ、という程度で、セキュリティやスケーラビリティ、MySQLのチューニング等、課題が山積。2013年に力を入れたい分野の一つ。


☆Ruby

たのしい開発 スタートアップRuby
たのしい開発 スタートアップRuby

Rubyのカルチャーに触れる本。Ruby入門者の1冊目にオススメ。


たのしいRuby 第3版
たのしいRuby 第3版

しょっぱなから「メソッド」「オブジェクト」といった用語が説明なしに出てくる等、初歩から載ってる割に初心者向けの配慮が不足している。Rubyの構文の気持ちよさを体験することができたのは良かった。


Rubyに関しては、Railsやりたいなあと思いつつやれずに終わった2012年でした。2013年はRailsやります。


☆Perl

新版Perl言語プログラミングレッスン入門編
新版Perl言語プログラミングレッスン入門編

私にとって、本書は「Perl入門」というより「正規表現入門」です。Perlの構文は今ではすっかり忘れてしまいましたが、本書で学んだ正規表現は毎日のように使ってます。解説が非常に丁寧なので、Perl入門者のみならず、プログラミング初心者にもオススメします。


Perlに関しては、『Perl言語プログラミングレッスン』を再読して、積ん読になっている初めてのPerl 第6版も読んで、手元で動かすスクリプトはPerlで組めるようになりたいな、と思ってます(現在はPHPで組んでます)。


☆ActionScript

Essential ActionScript 3.0
Essential ActionScript 3.0

現在読書中。私は、オブジェクト指向プログラミングの基礎を本書で学びました。基礎からの丁寧な解説と、実際に動く本格的なアプリケーションの作成を並行して行う。私の好みにドンピシャの1冊。ただし、分量が非常に多い(邦訳紙版は900ページ超)。


ActionScriptは「JavaScriptの皮を被ったJava」です。言語も環境もよくできてると思うのだけど、世間的には衰退するという予想が多いんですよね。個人的には、Angry BirdsのようなカジュアルゲームをPC/スマートフォン両対応で出す際には、Flashが現在の最適解、と思ってます。とはいえ、私はFlash制作者になりたいわけではなく、ActionScriptは趣味です。


☆新年の抱負

やりたいことの優先順位をつけると、

SQL(MySQL) > Ruby(Rails) > JavaScript > PHP > その他

って感じですね。SQLは仕事にも関係するし、やってて楽しい分野でもあるので、最重視。Rubyは新しい世界を知るため。JavaScriptは、覇権言語になりそうなのでやっとこうかなと。PHPはライスワーク。

その他としては、正規表現(日常使いの便利ツール)、Perl(YAPCを楽しむため)、Java(オブジェクト指向を学ぶため)、C(プログラマーの一般教養)あたりをやりたいな、と。


また、特定の言語に限らないトピックとしては、自動テストの書き方、走らせ方。現在は、仕事でも(!)、プライベートでも、テストを全く書いてないので。gitに関しても、一度学びの機会を作りたい。

あと、エディタ。PHPはPhpStormで決定だけど、それ以外の言語をどのエディタで書くか。vimはサーバで設定をいじくる時に使うエディタとしては十分だけど、モードが面倒なのでメインとして使うには不安を感じる。一方、emacsはデフォルトのキーバインドがイケてないのと、カスタマイズの敷居の高さが難点。どちらかに決める突破口があれば良いのだけど。

今年もよろしくお願いします。

基礎からのMySQL 改訂版 (プログラマの種シリーズ SE必修! )
基礎からのMySQL 改訂版

500ページ以上ある本ですが、解説が丁寧なのでスムーズに進みました。以下、感想。


MySQLを学ぶうえで最初のハードルとなるのが環境構築です。本書は、WindowsにXAMPP(Apache, PHP, MySQL等がまとめられたソフトウェア)を入れ、文字コードはShift-JIS、という、読者の大多数を占めるであろうWindowsユーザーにとってフレンドリーな環境を作る方針になっています。Macユーザー向けにもMAMPの導入方法が載っています。

が、この点、私は不満です。というのも、MySQLを仕事で使う場合、そのOSはLinuxである可能性が高いからです。そして、WindowsとUnix(Linux、Mac等)では、MySQLの挙動が一部異なります。例えばテーブル名。Windows版MySQLでは大文字と小文字を区別しませんが、Unix版は区別します。「tbUser」と「tbuser」は、Windows版では同じテーブルですが、Unix版では別物です。その他のWindows版とUnix版の相違については、MySQLリファレンスが参考になります。


本書のメインである、データベース言語SQLの解説については、さすがに丁寧で充実しています。本書をやれば、基本的なCRUD文(データベースの作成、データの呼び出し、データの書き込み、データの消去)が書けるようになります。プログラマーにとって必要最低限のSQLは身につきます。また、ビュー、トランザクション、ストアドプロシージャとストアドファンクションについてもさわりだけは学べます。その先、MySQLのチューニングや、高度で複雑なSQLは、本書の守備範囲を超えます。


MySQLとセットで用いられることの多いプログラミング言語PHPについては、MySQLとの組み合わせで必要な最低限の範囲を絞って書いてあります。変数と配列、条件分岐と繰り返しといった、プログラミングの基礎に、MySQLを利用するための関数を加えた内容ですね。

WebページでのMySQL利用で問題となるSQLインジェクション対策等、セキュリティについても触れられています。自分の作ったサイトの脆弱性を自分で攻撃する、という流れが面白かったです。


HTMLに関しては、酷いの一言。本書に載っているHTMLは、10年前のそれです。XHTMLを経た現代のマークアップは、本書とは全く異なった書き方をします。まあ、タグの大文字はHTML5の仕様上はOKだし、<html><head><body>などはHTML5では省略可能とされています。ただし<FONT>、テメーはダメだ。

<FONT>タグのような、スタイル指定のための要素は、HTML5では廃止されています。<B><U><I>も同様です。ブラウザーは下方互換性を保つように作られているので、<FONT>タグを使っても当面問題となることはないでしょう。しかし、スタイル指定のための要素を使うと、HTMLを書くのにも煩雑ですし、後々のメンテナンスが大変になります。Webページのデザインの調整を行いたいなら、CSSを学ぶべきです。HTML/XHTMLスタイルシートレッスンブックのような良書があります。


後半がイケてなかったので、読後感は良くありませんが、前半のSQLの解説は丁寧です。オススメというほどではありませんが、SQLの部分だけでも元は取れるはず。あなたがMySQL初心者なら、買って損はしないでしょう。

ただ、Windows上での環境構築にせよ、HTMLタグの解説にせよ、初心者に理解しやすい内容(裏を返せば、解説の容易な内容)を選択した結果、実務の観点からするとツッコミどころがある、という点には留意すべきかと。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

本書は、HTTP/URI/HTMLといった「Webを支える技術」の解説を通じて、Webサービス(Webアプリケーション)の設計を学ぶ本です。

私が普段仕事でやっているのは、いわゆるWeb制作です。会員制サイトや簡易的なゲームといった、「枯れた」、あるいは、よそのプラットフォームに乗っかる設計のサイトばかりなので、アプリケーションを設計段階から構築する、なんて作業とは無縁です。

本書の前半、HTTPやURI、HTMLといった個別技術の解説は興味深く読むことができましたが、後半、Webアプリケーション設計の実践に入ると、「理屈はわかるが、実装がわからん」という部分が多々ありました。

著者が熱く推す「REST」という設計スタイルについても、はっきり言ってよくわかっていません。いま説明しろと言われても無理。

ですが、前半の個別技術の解説だけでも、十分元は取れると思います。基礎を広く浅く学べる、初心者向けの良書です。

このページのトップヘ