Strings of Life

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

Phalcon + AngularJSで作る 動画プラットフォーム(クリックでスライド表示)

Phalcon Nightという勉強会で、登壇してきました。↑がスライドです(reveal.js製のスライドをGitHub Pagesで公開してる)。SlideShareにも後で上げると思います。

勉強会に誘われたのはTransifexのPhalcon翻訳チームのディスカッションだったので、オープンソースは参加してみるものだなー、と思いました。

Phalcon + AngularJSというタイトルなんですが、実際はAngular側で特別な何かをする必要はなかったりします(なのでスライドにもAngularの話はほとんど出てきません)。

一方、Phalcon側からすると、VoltというPhalcon組み込みのテンプレートエンジンが、Angularのシンタックスとバッティングする(どちらも「{}」という記法を使う)という問題があります。他の登壇者の方のお話を伺った印象だと、Voltは結構バグがあるみたいなので、全面的にAngularJSを使ったのは(結果的には)正解だったみたいですね。

同行者からは「スライドの文字が小さかった」というフィードバックも貰いました。スライド自体はそれなりに大きなフォントサイズだったんですが、プロジェクタへの写し方がまずかったみたいです…。次に発表する際は、その場での写りもちゃんと確認しようと思います。

// ==UserScript==
// @name        Kindle_yoyaku_disable
// @namespace   ryo_utsunomiya
// @include     http://www.amazon.co.jp/gp/*
// @version     1
// @grant       GM_getValue
// @grant       GM_setValue
// ==/UserScript==

window.addEventListener("load", function () {
    var ele = document.getElementsByClassName("zg_item_compact");
    for (var i = 0; i < ele.length; i++) {
        if (-1 != ele[i].innerHTML.indexOf("近日発売 予約可")) {
            ele[i].style.visibility = "hidden";
        }
    }
},false);

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

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

このページのトップヘ