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

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

From Forum Nokia Wiki

原文（英語）: Use prototype javascript library : string manipulation 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ライブラリを使用した文字列操作の方法について示します。

Stringクラスを使用した文字列操作

prototype.jsライブラリ中のStringクラスには、多くの有用なメソッドがあります。Stringクラスのメソッド一覧を下記に示します。

blank, camelize, capitalize, dasherize, empty, endsWith, escapeHTML, evalJSON, evalScripts, extractScripts, gsub, include, inspect, interpolate, isJSON, parseQuery, scan, startsWith, strip, stripScripts, stripTags, sub, succ, times, toArray, toJSON, toQueryParams, truncate, underscore, unescapeHTML, unfilterJSON

上記の一覧において、次の関数が例題アプリケーションでテスト済です。

• gsub(pattern, replacement) -> string

与えられたパターン文字列(pattern)の出現が全て、通常文字列、関数の戻り値、テンプレート文字列のどれかによって置き換えられた文字列を返します。pattern引数には、文字列または正規表現を使用できます。

• escapeHTML() -> string

HTMLの特殊文字を、等価なHTMLエンティティに変換します(HTMLエスケープ)。

• unescapeHTML() -> string

エンティティ形式のHTML特殊文字を、通常の形式にタグ付け、変換します。

Stringクラスの全リファレンスについては、Webサイト http://www.prototypejs.org/api/string をご覧ください。

本トピックのWeb Runtimeアプリケーションの例に、いくつかテスト事例があります。

• 最初の事例は、正規表現を用いて簡単にgsub関数を使用する方法です。
• 2番目の事例は、コールバック関数を用いてgsub関数を使用する方法を示してます。
• 3番目の事例は、テンプレートクラスを使用して、フォーマット文字列を生成する方法を示してます。
• 最後の事例は、HTMLタグを含む文字列をエスケープ/逆エスケープする方法を示してます。

最初の3事例のコードは、Webサイト http://www.sergiopereira.com/articles/prototype.js.html#Strings の例を流用しています。詳細情報については、こちらでご確認ください。

最後の事例については、テストコードについてここで少々説明します。 この例題WidgetのHTMLファイルでは、JavaScriptコードが生成した結果の表示に使う2つのプレースフォルダがあります。最初のは文字列変数中の元々のコンテンツを表示するために使い、もう一つは変数のエスケーブバージョンを表示するために使います。関連するソースコードを以下に示します。

HTMLコード:

<div id="aholder1">Holder1: <span id="holder1">This data will be replaced.</span></div>
<div id="aholder2">Holder2: <span id="holder2">This data will be replaced also.</span></div>

Javascriptコード:

// test case: escapseHTML
function testEscapeHTML()
{
  var data = "<b>Hello, world!</b>";
 
  $('holder1').innerHTML = data;
  alert ($('holder1').innerHTML);
  $('holder2').innerHTML = data.escapeHTML();
  alert ($('holder2').innerHTML);
}
// test case: unescapseHTML
function testUnescapeHTML()
{
  var data1 = $('holder1').innerHTML;
  alert(data1.unescapeHTML());
  var data2 = $('holder2').innerHTML;
  alert(data2.unescapeHTML());
}

テスト事例は全て通ってます。Stringクラスの他のメソッドについては、各自でテストできます。

この次のトピックはオブジェクト作成の予定です。

サンプルをダウンロードする

本トピックのサンプルWidgetのダウンロード： Image:PrototypeString.zip

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

最新バージョンについては、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 JavaScript Webサイト[1]
• Prototypeの使用[2]
• サンプルWRTアプリケーションのダウンロード [3]