Strings of Life

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

タグ:JavaScript

// ==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

JavaScriptではじめるプログラミング入門

とある場所で、プログラミング初心者向けのハンズオンセミナーを開催しました。初心者に教えるというのは、やはり難しい。今回は知識レベルもまちまちで、人によってはHTMLも知らなかったので、スライドには無いけどHTML基礎講座をやったりしました。

また、受講者の方にはあらかじめChromeのインストールをお願いしたのですが、PCにインストールされているソフトウェアの影響で、こちらの想定した動作とは異なる動作をするPCがあったりして、なかなかに悩ましい。

環境構築が簡単なJavaScriptでさえこれなのだから、他の言語は推して知るべし、ですね。

内容としては、結構詳細に(ある程度本気でプログラミングを覚えたい人向けに)説明してしまったのですが、もっとプログラミングの楽しさをダイジェスト的に感じられるような課題だと良かったかな、と思いました。

ちなみに、今回はreveal.jsでスライドを作成し、GitHub Pagesにアップロードして公開しました。reveal.jsは簡単にスライドが作れるし、GitHubにgh-pagesブランチを切ってpushすればGitHub Pagesとして公開できるので、とても楽。この組み合わせは今後も使っていきたいですね。






山田祥寛氏の本はいつもそうなのだけど、「初級者と中級者の橋渡し」という意味では非常に良く出来ている一方、若干粗がある。本書もその例に漏れない。

本書の良いところは、JavaScriptのコアの部分について、丁寧に解説しているところ。特にChapter4とChapter5に載っている、関数定義とJavaScriptのオブジェクト指向構文については、丁寧でわかりやすい。

また、実務上はChapter6、7のブラウザオブジェクト及びDOMも重要。jQueryを紹介している点もポイントが高い。

一方、本書の瑕疵では無いものの、2010年の本なので若干情報が古い。本書で紹介しているテスティングフレームワークのJsUnitは、既に開発終了している(後継プロジェクトにJasmineがある。また、jQueryで使用されているQUnitが、導入が簡単で個人的にはおすすめ)。また、YahooのAPIも現在では利用できない。

また、コード例に、JavaScriptのベストプラクティスから若干外れているものが散見されるのもマイナスポイント。
例:
// 悪い例
var flag = (1 == 1);
if (flag) document.writeln("hoeg");

// マシな例
var flag = (1 === 1); // 比較は===を使うべき
if (flag) { // if文の中括弧({})は省略すべきではない
    document.writeln("hoge");
    // Chapter5までのサンプルは console.log() でも実行できる
}
コーディングスタイルに関しては、別途、JavaScriptパターン等の書籍を参照したほうがいい。

レベル感としては、「jQueryは一応使えるけど…」とか、「JavaScriptの入門書は1冊読んだけど、クロージャとかプロトタイプとかはよくわからん」とかいった人であればジャストフィット。

現在、JavaScriptの書籍は数多く出てるけど、「初心者向けに簡単な事だけを説明した本」や「中上級者向けに高度なトピックを説明した本」が主で、初級者から中級者への橋渡しを上手にやってくれる本はそう多くない。その点、本書は2014年現在でも希少な存在。


オブジェクトの生成

new Object()は使わない。代わりにオブジェクトリテラルを使う。
→ コンストラクタに渡す値によって、呼び出されるコンストラクタが変わるため。

配列かどうかの検査

Array.isArray()は、引数が配列のときtrueを返す。

// Array.isArray()が未定義の場合は定義する
if (typeof Array.isArray === "undefined") {
    Array.isArray = function (arg) {
        return Object.prototype.toString.call(arg) === "[object Array]";
    }
}

var ary = [1, 2, 3];
var obj = {"key": "value"};

console.log(Array.isArray(ary)); // true
console.log(Array.isArray(obj)); // false

正規表現

  • 正規表現パターンが事前に分かっている場合、正規表現リテラルを使う
  • 正規表現パターンを実行時に決定する場合、RegExp()の引数にパターンを渡す

エラーの投げ方

try {
    throw {
        name: "MyErrorType",
        message: "oops",
        extra: "This was rather embarrassing",
        remedy: genericErrorHandler
    };
} catch (e) {
    alert(e.message);
    e.remedy();
}

このページのトップヘ