続・先取り! Google Chrome Extensions

第8回 Google Chrome拡張とHTML5 #2

この記事を読むのに必要な時間:およそ 4 分

Object.keys

Object.keysはオブジェクトのキーを配列で取得するメソッドです。先述のArray拡張と組み合わせて,オブジェクトを柔軟に処理できるようになる便利なメソッドです。

Object.keys

var data = {
  a:1,
  b:[1,2],
  c:new Date(),
  f:function(a){return a;}
};
console.log(Object.keys(data));
//["a", "b", "c", "f"]

そのオブジェクト自身が持つプロパティのみを列挙し,prototypeは辿りません。

Object.keys(prototypeは無視される)

function Point(x, y){
  this.x = x;
  this.y = y;
}
Point.prototype = {
  clone:function(){
    return new Point(this.x, this.y);
  }
};
var p1 = new Point(1, 2);
console.log(Object.keys(p1));
// ["y", "x"]

Object.keysを従来のJavaScriptで実装すると,下記のようになります。

Object.keysのJavaScript実装

if (!Object.keys){
Object.keys = function(object){
  if (!(object instanceof Object)) {
    throw new TypeError('Object.keys called on non-object')
  }
  var keys = [];
  for (var key in object){
    if(object.hasOwnProperty(key)){
      keys.push(key);
    }
  }
  return keys;
}
}
console.log(Object.keys(data));
//["a", "b", "c", "f"]

なお,Object.keysでは,第1引数にObjectでないものを渡すとTypeErrorになると定義されているので,instanceof Objectでチェックするようにしました。typeofが"object"であるかという点でチェックする方法もありますが,前者ではnullでTypeErrorに,後者ではTypeErrorにならないという違いがあります。

Object.create

※2010年1月にリリースされたGoogle Chrome 4.0.249.78(安定版)はObject.createが実装される前のバージョンとなったため,上記バージョンではObject.createは使用できません。ご了承ください。

Object.createはオブジェクトを定義するためのメソッドです。prototype継承を簡略化し,従来のJavaScriptではできなかった,列挙できないプロパティや変更不可能なプロパティを作ることができます。

Object.createによるpointの定義

var Point = {
  clone:function(){
    return new Point(this.x, this.y);
  }
};
var p1 = Object.create(Point,{
  x:{
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true
  },
  y:{
    value:2,
    writable: true,
    enumerable: true,
    configurable: true
  }
});
console.log(p1);
// ["y", "x"]

Object.createは第1引数でprototypeとなるオブジェクトを渡し,第2引数は省略可能で,そのオブジェクト自身のプロパティを定義します。valueは値,writableは変更可能かどうか,enumerableはfor inなどで列挙されるかどうか,configurableはdelete演算子でプロパティを消せるかどうかとwritable, enumerable, configurableを変更することができるかどうかを決めます(ただし,現在のChrome(V8 2.0.5.5)ではconfigurableプロパティは実質サポートされていません⁠⁠。

Object.createの第2引数で定義するプロパティは,writable,enumerableを省略するとデフォルトでfalseにセットされるため,上記のように冗長な記述が必要になってしまいます。第2引数は書き換えを禁止したい,列挙させたくないプロパティを定義する際に使用するとよいでしょう。

CSS3

Google Chromeは最新のWebKitを採用していますので,CSS3の先行実装を試すことができます。そのなかでも,Chrome拡張ですぐに使えるテクニックをいくつか紹介します。

border-radius

border-radiusはいわゆる角丸を実現します。WebKitでは-webkit-border-radiusのようにプリフィックスが付きます。将来的にはこのプリフィックスは不要になる点に注意が必要です。実際,Chrome 4はプリフィックスなしの記述に対応していますので,Chrome拡張ではプリフィックスなしの記述を使用しても問題ありません。

border-radius

#box{
border:3px solid #0099cc;
border-radius:15px;
}

gradient

gradientは背景などでグラデーションを実現します。

gradient

#box{
background: -webkit-gradient(linear, left top, left bottom,
             from(#99cccc), to(#3399cc));
width:100px;
height:100px;
}

図1 border-radiusとgradient(左が画像,右がCSSを指定した要素)

図1 border-radiusとgradient 

CSSの応用

下記のようなCSSでボタンにスタイルを当てると,画像を使わずにスタイリッシュなインターフェースを作成できます

ボタンのグラデーションと角丸

input[type="button"],
input[type="submit"],
button{
-webkit-appearance: button;
color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom,
             from(#777777), to(#333333));
border: 1px solid #999999;
border-radius: 3px;
height: 1.7em;
padding: 0 0.6em;
vertical-align: middle;
}
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover{
background: -webkit-gradient(linear, left top, left bottom,
             from(#999999), to(#666666));
}
input[type="button"][disabled],
input[type="submit"][disabled],
button[disabled]{
background:#999999;
}
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover,
button[disabled]:hover{
background:#999999;
}

図2 スタイルを適用したボタン(上が画像,下がCSSを指定した要素)

図2 スタイルを適用したボタン

まとめ

今回はChrome拡張で使えるHTML5周辺技術としてECMAScript 5とCSS3を取り上げました。次回はさらにHTML5周辺技術から,CSS transformsや,Web StorageやWeb SQL databaseなどのAPIを取り上げる予定です。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/