Categories: Lang-JP | JP S60 3rd Edition, Feature Pack 2 | JP Web Runtime (WRT)

This page was last modified 06:58, 6 June 2008.

From Forum Nokia Wiki

原文（英語）: Use prototype javascript library : Object Creation in WRT application

概論

ご存知かもしれませんが、Prototypeは、クロスWebブラウザ対応の有名なJavaScriptライブラリです。Firefox, Safari, IE, Operaなどといった、現在よく知られたWebブラウザの大半をサポートします。また、最新バージョン(Prototype 1.6.0)では、Appleが提供するオープンソースWebエンジンのAppleWebKitもサポートします。

Nokia Web Browserは、S60プラットフォームのオープンソースWebKitの一部であるS60WebKit上で動いています。Nokia WRT(Web Runtime)は、このS60WebKitをベースにしています。

本トピックでは、prototype.jsライブラリを使用してクラスとそのサブクラスを定義する方法を確認することができます。

prototype.jsのインストール

Protptype JavaScript Libraryをインストールする方法については、こちらをご参照ください。

オブジェクトの作成

クラスとサブクラスを定義する文法には、新しい文法と古い文法があります。ここでは、比較のためにその両方でクラスを定義します。また、インスタンスメソッドとクラスメソッドを追加する方法についても示します。

新しい文法でクラスを定義する

例として、Animalクラスを定義します。次に示す通り、Class.createメソッドを呼出し、各プロパティをそのメソッドに渡します。

// properties are directly passed to `create` method
var Animal = Class.create({
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
});

Animalクラスからサブクラスを得る(ここではCatクラス)ため、再びClass.create関数を呼出し、最初のパラメータにAnimalクラスを使用し、2番目のパラメータに新しいクラスのメソッドを追加します。注意事項：Class.createメソッドは、任意数の引数を使用することができます。

// when subclassing, specify the class you want to inherit from
var Cat = Class.create(Animal, {
  // redefine the eat method
  eat: function($super, food) {
    return $super(food) + ' or sth.!';
  }
});

Catクラスでは、親クラスが同じメソッドを持つeatメソッドをオーバライドします。

「新しい文法」を使ったテスト例のソースコード：

function testNewSyntax()
{
  var cat1 = new Cat('Mimi');
  alert(cat1.eat('fish'));
  // ->; "Mini is eating fish or sth!"
}

古い文法でクラスを定義する

例として、Animal0クラスを定義します(グローバルネームスペースでは、各自異なるクラス名を使用する必要があります)。

/** obsolete syntax **/
var Animal0 = Class.create();
Animal0.prototype = {
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
};

サブクラスの例として、Cat0クラスを定義します(ここでも、異なるクラス名を使用します)。

var Cat0 = Class.create();
// inherit from Person class:
Cat0.prototype = Object.extend(new Animal0(), {
  // redefine the eat method
  eat: function(food) {
    return this.name + ' is eating ' + food + ' or sth.!';
  }
});

「古い文法」を使ったテスト例のソースコード：

function testOldSyntax()
{
  var cat1 = new Cat0('Mimi');
  alert(cat1.eat('fish'));
  // -> "Mini is eating fish and sth.!"
}

既存クラスに、一時的に新たなメソッドを追加する

Animalクラスに新たにメソッドを追加すると、派生クラスのインスタンスもそのメソッドを呼出すことができます。

function testAddMethods()
{
  var cat1 = new Cat('Mimi');
  
  // every animal should be able to drink. But here we just let it "eat water"
  Animal.addMethods({
    drink: function() {
      return this.eat('water');
    }
  });
 
  alert(cat1.drink()); // -> "Mimi is eating water or sth.!"
}

新たにクラスを定義する時に、ミックスインモジュールを使用する

最初に、ミックスインモジュール(Tunable)を定義します。

// define a module
var Tunable = {
  down: function(hp) {
    this.volume -= hp;
    if (this.volume < 0) this.mute();
  },
  mute: function() {
    this.isMute = true;
  }
};

次に、ミックスインモジュールをベースにしたクラスを作成します。

var Tuner = Class.create(Tunable, {
  initialize: function() {
    this.volume = 100;
    this.isMute = false;
  }
});

そして、クラスをテストします。テスト例のソースコードを下記に示します。

function testMixin()
{
  var tuner = new Tuner;
  tuner.down(30);
  alert(tuner.volume); //-> 70
}

クラスメソッドを追加する

ここで、Catクラスに"allEstSth"という名前のクラスメソッドを定義します。すると、関数を直接Cat.allEatSth()として呼ぶことができます。

function testClassMethods()
{
  Cat.allEatSth = function(n) {
    var items = [];
    n.times(function(i) {
      items.push(new Cat('Teddy').eat( i + 1));
    });
    return items;
  }
 
  alert(Cat.allEatSth(3));
  // -> ["Teddy is eating 1 or sth.!", "Teddy is eating 2 or sth.!", "Teddy is eating 3 or sth.!"]
}

それに加えて、新たにメソッドを定義する方法が他にもいくつかあります。詳細情報は、下記の参照リンクをご覧ください。

サンプルアプリケーションをダウンロードする

本トピックのサンプルアプリケーションのダウンロード：Image:PrototypeObject.zip

端末やエミュレータにインストールする際は、拡張子.zipを.wgzに変更します。

Prototypeの最新バージョンについては、Webサイト http://code.google.com/p/prototypewrt/downloads/list でご確認ください。

関連トピック

• WRTアプリケーションでPrototype JavaScript Libraryを使用する
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおける基本操作(ユーティリティ機能など)
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおける文字列操作
• Prototype JavaScript Libraryの使用：WRTアプリケーション中でのオブジェクト作成
• Prototype JavaScript Libraryの使用：WRTアプリケーション中でのPrototype UIの使用
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおけるFormとAJAX(JSON)

参照リンク

• Prototype Webサイト[1]
• サンプルWRTアプリケーションのダウンロード [2]