クラスの命名規則は、
『テンプレート作成者識別文字列』+"_(アンダーバー)"+"『テンプレート名(キャメルケース)』"
であり、『テンプレート作成者識別文字列』は
『uriを"."で分割し、それぞれの先頭を大文字に変換し"_(アンダーバー)"で連結』
となる。
特に、『テンプレート作成者識別文字列』は名前衝突を防ぐためのものであるため、推奨であって必須ではない。例えば、「kanasansoft」が作成したテンプレート「Plain Text」の場合、uriは「kanasansoft.com」であるので
Com_Kanasansoft_PlainText
となる。また、このルールは出力するHTMLのclass要素や、入力欄のid要素にも使用している。テンプレートはJavaScriptのクラスとして記述されており、次のような構成になっている。
『テンプレート作成者識別文字列』+"_(アンダーバー)"+"『テンプレート名(キャメルケース)』"
であり、『テンプレート作成者識別文字列』は
『uriを"."で分割し、それぞれの先頭を大文字に変換し"_(アンダーバー)"で連結』
となる。
特に、『テンプレート作成者識別文字列』は名前衝突を防ぐためのものであるため、推奨であって必須ではない。例えば、「kanasansoft」が作成したテンプレート「Plain Text」の場合、uriは「kanasansoft.com」であるので
Com_Kanasansoft_PlainText
となる。また、このルールは出力するHTMLのclass要素や、入力欄のid要素にも使用している。テンプレートはJavaScriptのクラスとして記述されており、次のような構成になっている。
コンストラクタ
[インスタンスメソッド]データ取得
[インスタンスメソッド]データ設定
[インスタンスメソッド]編集領域出力
[インスタンスメソッド]編集領域からデータ取得
[インスタンスメソッド]編集領域にデータ設定
[インスタンスメソッド]HTML作成
[インスタンスメソッド]テンプレート名取得
[インスタンスメソッド]テンプレートID取得
テンプレート追加処理
[インスタンスメソッド]データ取得
[インスタンスメソッド]データ設定
[インスタンスメソッド]編集領域出力
[インスタンスメソッド]編集領域からデータ取得
[インスタンスメソッド]編集領域にデータ設定
[インスタンスメソッド]HTML作成
[インスタンスメソッド]テンプレート名取得
[インスタンスメソッド]テンプレートID取得
テンプレート追加処理
では、その内部構造を、テンプレート「Plain Text」を例にその構造を見ていこう。
コンストラクタ
function Com_Kanasansoft_PlainText(){
this._Title = "";
this._PlainText = "";
}
this._Title = "";
this._PlainText = "";
}
テンプレート内部で使用するインスタンス変数を初期化している。
(内部変数であるため"_"ではじまる。)
「Plain Text」では、タイトルと本文が入力可能なため、「_Title」「_PlainText」を初期化している。
(内部変数であるため"_"ではじまる。)
「Plain Text」では、タイトルと本文が入力可能なため、「_Title」「_PlainText」を初期化している。
データ取得
Com_Kanasansoft_PlainText.prototype.getData
= function(){
return { "Title" : this._Title ,
"PlainText" : this._PlainText };
}
= function(){
return { "Title" : this._Title ,
"PlainText" : this._PlainText };
}
テンプレート内部で使用している変数で、情報を再現するために必要なデータをオブジェクトで返している。返すデータは必ずObject型とするが、その内部構造はテンプレート作成者の考え方に依存する。ただ、後にJSONに変換を行うため、Functionオブジェクトや独自に作成したオブジェクトは用いることはできない。
データ設定
Com_Kanasansoft_PlainText.prototype.setData
= function(obj){
this._Title = obj["Title"];
this._PlainText = obj["PlainText"];
}
= function(obj){
this._Title = obj["Title"];
this._PlainText = obj["PlainText"];
}
インスタンスメソッド「データ取得」で返した値が引数で渡される。引数のオブジェクトから、内部情報の再現を行なっている。
編集領域出力
Com_Kanasansoft_PlainText.getEditAreaHTML
= function(){
var html = "";
html += "<div>";
html += "<div>";
html += "Title";
html += "</div>";
html += "<div>";
html += "<input type=\"text\" id=\"Com_Kanasansoft_PlainText_Title\" />";
html += "</div>";
html += "</div>";
html += "<div>";
html += "<div>";
html += "Plain Text";
html += "</div>";
html += "<div>";
html += "<textarea cols=\"60\" rows=\"20\" id=\"Com_Kanasansoft_PlainText_Text\">";
html += "</textarea>";
html += "</div>";
html += "</div>";
return html;
}
= function(){
var html = "";
html += "<div>";
html += "<div>";
html += "Title";
html += "</div>";
html += "<div>";
html += "<input type=\"text\" id=\"Com_Kanasansoft_PlainText_Title\" />";
html += "</div>";
html += "</div>";
html += "<div>";
html += "<div>";
html += "Plain Text";
html += "</div>";
html += "<div>";
html += "<textarea cols=\"60\" rows=\"20\" id=\"Com_Kanasansoft_PlainText_Text\">";
html += "</textarea>";
html += "</div>";
html += "</div>";
return html;
}
情報を入力するための入力欄HTMLを文字列で返す。入力されているデータの出力は行なわれない。つまり「Plain Text」ではインスタンス変数の「_Title」「_PlainText」の値を出力や判定に一切用いない。データの反映はインスタンスメソッド「編集領域にデータ設定」で行なう。フォーム部品のidには入力された値を取得するためにid要素を定義している。
編集領域からデータ取得
Com_Kanasansoft_PlainText.prototype.getEditAreaData
= function(){
var obj = document.getElementById("Com_Kanasansoft_PlainText_Title");
this._Title = obj.value;
var obj = document.getElementById("Com_Kanasansoft_PlainText_Text");
this._PlainText = obj.value;
}
= function(){
var obj = document.getElementById("Com_Kanasansoft_PlainText_Title");
this._Title = obj.value;
var obj = document.getElementById("Com_Kanasansoft_PlainText_Text");
this._PlainText = obj.value;
}
インスタンスメソッド「編集領域出力」で出力した入力欄に、入力されているデータを取得する。
編集領域にデータ設定
Com_Kanasansoft_PlainText.prototype.setEditAreaData
= function(){
var obj = document.getElementById("Com_Kanasansoft_PlainText_Title");
obj.value = this._Title;
var obj = document.getElementById("Com_Kanasansoft_PlainText_Text");
obj.value = this._PlainText;
}
= function(){
var obj = document.getElementById("Com_Kanasansoft_PlainText_Title");
obj.value = this._Title;
var obj = document.getElementById("Com_Kanasansoft_PlainText_Text");
obj.value = this._PlainText;
}
インスタンスメソッド「編集領域出力」で出力した入力欄に、インスタンスのデータを反映する。
HTML作成
Com_Kanasansoft_PlainText.prototype.getHTML
= function(){
var html = "";
html += "<div class=\"Com_Kanasansoft_PlainText\">";
if(this._Title!=""){
html += "<div class=\"Title\">";
html += "<h5>";
html += StringUtility.Encode.HTML(this._Title);
html += "</h5>";
html += "</div>";
}
html += "<div class=\"PlainText\">";
html += StringUtility.Convert.NewLineCodeToTag(
StringUtility.Encode.HTML(this._PlainText)
);
html += "</div>";
html += "</div>";
return html;
}
= function(){
var html = "";
html += "<div class=\"Com_Kanasansoft_PlainText\">";
if(this._Title!=""){
html += "<div class=\"Title\">";
html += "<h5>";
html += StringUtility.Encode.HTML(this._Title);
html += "</h5>";
html += "</div>";
}
html += "<div class=\"PlainText\">";
html += StringUtility.Convert.NewLineCodeToTag(
StringUtility.Encode.HTML(this._PlainText)
);
html += "</div>";
html += "</div>";
return html;
}
BlogEditorが出力するためのHTMLを文字列で返す。「Plain Text」ではタイトルは入力必須ではないため、入力されなかった場合はdiv要素そのものを出力しない。タイトル・本文ともにエンコードされている点に注意してほしい。本文は改行処理も行なわれている。これらの処理には「Kanasansoft/Library」配下のライブラリ群を使用している。
(ライブラリはテンプレート内部のどこからでも使用可能。)
(ライブラリはテンプレート内部のどこからでも使用可能。)
テンプレート名取得
Com_Kanasansoft_PlainText.getName
= function(){
return "Plain Text";
}
= function(){
return "Plain Text";
}
テンプレートの名称を返す。主にテンプレート一覧およびアイテム一覧で使用するためのもの。一意となるようなものでなくてもよい。ただ、一見して内容のわかる名称が望ましい。
テンプレートID取得
Com_Kanasansoft_PlainText.getId
= function(){
return "Com_Kanasansoft_PlainText";
}
= function(){
return "Com_Kanasansoft_PlainText";
}
テンプレートを識別するための固有のIDを返す。「BlogEditor」はこの戻り値をもとに処理を行なうため、仮にテンプレートのバージョンがあがったとしても、名称を変更したとしても、戻り値を変更してはならない。今後、テンプレートのバージョンアップや上位互換性を意識するのであれば、戻り値に何を返すのかしっかりと考えた方がよい。
(内部で下位バージョンのデータコンバートを行なう場合も含む。)
逆に、バージョンアップにより、テンプレートに互換性が全くなくなったのであれば、戻り値を変更したほうがよい。
(内部で下位バージョンのデータコンバートを行なう場合も含む。)
逆に、バージョンアップにより、テンプレートに互換性が全くなくなったのであれば、戻り値を変更したほうがよい。
テンプレートを追加
addTemplate(Com_Kanasansoft_PlainText);
最後に、テンプレートの読み込みが完了したことを「BlogEditor」に通知する。引数にテンプレートを定義しているクラス(Functionオブジェクト)を指定し、グローバルな関数「addTemplate」を呼び出している。