ライブラリ概要

ROCOCOライブラリとROCOCO Google Maps
ROCOCOライブラリを利用するポイント
ファイル構成
ROCOCOオブジェクト
ライブラリ構成
ROCOCOエレメントモデル
ROCOCOパネルモデル
ROCOCO Google Maps

ROCOCOライブラリとROCOCO Google Maps

ROCOCOライブラリは、特に計算結果を表示するようなAjaxコンテンツの開発労力を低減させることを目的としたものです。

ROCOCO Google Maps は、Google Maps API を用いるコンテンツの作成を補助するもので、ROCOCOライブラリを必要とします。

ROCOCOライブラリを利用するポイント

ROCOCOライブラリには、次のような特長があります。

パネルによって、同一コンテンツ内に複数の機能を相互に独立して持つことができます。
DOMによる操作では足りぐるしいところをサポートしてます。
イベントモデルやXMLHTTPオブジェクト等のブラウザごとの差異を吸収します。
selectエレメントとcheckboxエレメントで値の変更・取得が違う、等のエレメントごとの差異を吸収します。
ROCOCO Google Mapsでは、マップ操作に必要なメニューはプリセットで生成することができます。もちろん、生成しないこともできます。
HTMLとJavaScriptが完全に分離されます。たとえば、HTMLに組み込まれた onload属性などイベントハンドラ属性を使わずにイベント処理を行うことができます。

ファイル構成

ROCOCOライブラリ、ROCOCO Google Mapsでは、いくつかの外部ファイルを使用しています。外部ファイルは、ライブラリ本体である JavaScriptファイル、表示スタイルを指定する CSSファイル、および画像ファイルからなります。

ROCOCOライブラリを使うためには、これらのファイルをダウンロードするようにHTMLファイルに記述する必要があります。ただし、画像ファイルはCSSファイルでURLを指定していますので、実質的には JavaScriptファイルと CSSファイルを指定する必要があります。

ROCOCOライブラリのみ用いる場合

ROCOCOライブラリは次のファイルを取り込む必要があります。

http://www.finds.jp/rococo/b2/rococo.js
http://www.finds.jp/rococo/b2/rococo.css

ROCOCO Google Maps を使う場合

ROCOCO Google Maps を使うには、ROCOCOライブラリおよびROCOCO Google Mapsを使用可能にする必要があるので、次のような外部ファイルが必要となります。

http://www.finds.jp/rococo/b2/rococo.js
http://www.finds.jp/rococo/b2/rococo.css
http://www.finds.jp/rococo/b2/rococo_rccgm.js
http://www.finds.jp/rococo/b2/rococo_rccgm.css

Rococoオブジェクト

ROCOCOライブラリは、ロード時に大域変数 Rococo が宣言され、その中にオブジェクトが生成されています。Rococoオブジェクトの中には、機能ごとにサブオブジェクトが作られ、一部のサブオブジェクトはさらにサブオブジェクトを持つようになっているので、ちょうど Rococoオブジェクトをルートとする木構造が成り立っています。

サブオブジェクト内のメソッド等にアクセスするには、"."をJava等の名前空間演算子のように使います。

たとえば、utというネームスペース内にあるisArrayというメソッドを利用するには、次のように記述します。

  if( Rococo.ut.isArray(obj) == true ) {
    alert('これは配列オブジェクトです');
  }
  else {
    alert('これは配列オブジェクトではありません');
  }

ただし、Javaでいうところのimportキーワードはありません。必ず Rococo から始めたフルパスを記述する必要があります。

ROCOCOライブラリ構成

ROCOCOライブラリのセカンドレベル(Rococoオブジェクトが持つオブジェクト)は、以下の通りです。

Rococo.ut: ROCOCOライブラリ内で使われる補助的なユーティリティ関数を納めています。
Rococo.cl: REST系サービスのクライアント機能を持つライブラリです。xml および jsonp の名前空間を持ち、それぞれXML HTTP通信、JSONP通信をサポートします。
Rococo.em: ROCOCOエレメントモデルをサポートするものです。
Rococo.tk: ROCOCOエレメントモデルをサポートするもので、Rococo.emの上位にあたります。
Rococo.pnl: ROCOCOパネルモデルをサポートするものです。
Rococo.eui: ROCOCOエレメントモデルから生成された各種ユーザインタフェースを提供するためのものです。
Rococo.geo: Rococo.geoは、地理関係のライブラリパッケージです。
Rococo.jp: Rococo.jpは、日本ローカルのパッケージです。たとえば、rgeocode.php(緯度経度から、その地点が所属する市区町村を割り出す)にアクセスするための、Rococo.cl.jsonp関連設定が存在します。

ROCOCOエレメントモデル

ROCOCOエレメント

JavaScript等からXML(HTMLページももちろん含みます)の文書構造にアクセスするには、API群のブラウザを超えた統一仕様であるDOM(Document Object Model)が一般に使われています。

しかし、統一仕様であるはずなのですが、ブラウザごとに独自仕様を持っている場合がしばしばあります。特に顕著なのは、イベントモデルです。FireFoxやOperaはDOMイベントモデルをサポートしていますが、Internet Explorer は別の方法でイベント処理を行います。また、FireFoxとOperaでは、マウスホイールイベントのイベント名が異なります。

また、DOMはXML文書へのアクセスのためにあるので、XML文書の仕様を前提としているため、JavaScriptプログラミングから見れば、歯がゆいと感じることがあります。たとえば、DOMでは、idは文書内で一意である必要がありますが、JavaScriptサイドから見たら、文書(ページ)内の全要素のid衝突チェックを行いたくありません。

そこで、ROCOCOライブラリでは、DOMエレメントに対してメソッド、プロパティ等を挿入して、イベントを統一的に扱ったり、DOMでは足り苦しい機能を補ったりできるようにしました。このようなROCOCOライブラリによって改造されたエレメントを、ROCOCOライブラリでは、ROCOCOエレメントと呼んでいます。

一般的なROCOCOエレメントの作成方法は2種類あります。ひとつは、Rococo.em.crateElementを使って、DOMエレメントを生成したうえでROCOCOエレメントを挿入する方法、もうひとつはRococo.em.recrateElement(メソッド名に "re" がついています)を使って、既に存在するDOMエレメントにプロパティ等を挿入する方法です。

詳しくはリファレンスのRococo.em.recreateElementをご覧下さい。

ROCOCO ToolKitエレメント

ROCOCO ToolKitエレメントは、Rococo.tk.em.createElementやRococo.tk.em.recreateElementで作成されるエレメントで、ROCOCOエレメントをさらに改造します。

ROCOCO ToolKitエレメントの目的は、HTML要素の抽象化です。

ひとつは、inputエレメントの省略化です。createElementでtagnameを指定しますが、ここにcheckboxなどの、本来ならinputエレメントである名前を指定しても、inputエレメントが生成されるようにしています。

また、現在のところdateエレメントのみですが「複合エレメント」を用意しています。tagnameをdateにすると、自動的に年・月・日の入力エレメントを作成して、 "date"エレメントが持つ setValue, getValue メソッド用いて、年・月・日の各エレメントのデータの変更・取得を一発でできるようにしています。

詳しくはリファレンスのRococo.tk.em.recreateElementをご覧下さい。

ROCOCOパネルモデル

ROCOCOパネルモデルは、ROCOCO ToolKitエレメントの上位にあって、エレメントをまとめてひとくくりにした「箱」を実現するためのものです。

ROCOCOパネルモデルは、「見出し」と「本体」「メッセージ」「ヘルプ」の各エレメントを持ち、見出しをクリックすると、本体エレメントまたはヘルプエレメントの表示/非表示を切り替えられます。本体は、さらに子エレメントを持つことができます。

ホルダは見出しを持ちませんが、パネルを生成することができ、パネルエレメントのCSSクラス名を、ホルダごとに変更するとができます。

ROCOCOパネルモデルに沿うエレメントに「メニュー」「コンソール」等がありますが、これらは本体の子要素およびCSSクラス名が相異なるだけで同じものです。

ROCOCO Google Maps

ROCOCO Google Maps は、Google Maps API コンテンツ開発を補助するためのものです。

コンストラクタ関数 Rococo.rccgm.Rccgm によって、エレメントの中に自動的に、メニュー、マップ、コンソール、システムメッセージ、アラート、フリーパネルが作成されます。

メニュー: パネルホルダの一種で、マップの上部にあり、マップサイズ変更等の基本機能を置きます。
マップ: GMap2オブジェクトを作成するエレメントです。
コンソール: パネルホルダの一種で、マップの右側にあり、そのコンテンツ独特の機能を置きます。
システムメッセージ: メッセージ表示部があるコンソールでのエラー以外のエラーを表示するためのエレメントです。
アラート: 開始時に、使用に関する注意等のアラートを表示したい場合に利用します。
フリーパネル: パネルホルダの一種で、マップの下部にあり、コンソールの結果表示部でまにあわないグラフの表示等に利用することを想定しています。

ROCOCOライブラリのみ用いる場合

ROCOCO Google Maps を使う場合

ROCOCOエレメント

ROCOCO ToolKitエレメント

Finds Menu