DashCode Public Beta - Dashboard de OTN-J #5 Tweet

前回は、WidgetのフロントUI変更の様子をQuickTimeムービーでお見せしたのだが、どのように変更を加えたのか解りづらいと思うので少々解説しておくことにした。

尚、DashboardのWidgetは、他のMacOSXのアプリケーションと同様にアプリケーションパッケージ（バンドルとか、ファイルパッケージとも呼ばれる）になっている。
Widgetを「右クリック」し、ポップアップメニューの「パッケージ内容を表示」を選択すればパッケージ内容にアクセスできるので、どのようなjavascriptなのか、cssはどうなっているか等、確認することができる。
変更前のパッケージ内容の差分を確認したり、javascript,css等のdiffを取れば、変更部分は容易に確認できると思う。

[an error occurred while processing this directive]
　

まず、次の２つのWidgetを見比べてもらいたい。（左がオリジナル、右がカスタマイズしたもの。）

　

・(A)の部分

オリジナルでは、javascriptコードに問題があるようで、FEEDから<title>要素を取得できず、"Untitled"と表示されている。（DashCode正式版では改善されているでしょうけど。）
カスタマイズ版では、<title>要素を取得できるよう修正し、タイトルは元ネタへのリンクに変更。

・(B)の部分

これはカスタマイズで追加した部分だ。RSS2.0の<author>要素は、OTN-JのRSSでは省略されており、替わりに、拡張された<jf:author>要素が設定されていため、<jf:author>要素値を取り出し、設定すればOK。

・(C)の部分

この部分は本来、エントリの投稿日が表示されるのだが、OTN-JのRSSでは、<item>要素以下の<pubDate>や<dc:date>要素は省略され、替わりに、<jf:createDate>要素が設定されているため、オリジナルでは投稿日が表示されないという状況になっている。
<jf:creationDate>要素値を取り出し設定すればOK.

以下、dashboard_de_otn.js　の変更部分から一部抜粋
（DashCodeで新規プロジェクトを作成すると、プロジェクト名称の付いた .jsファイルが作成される。
例えば、dashboard_de_otnというプロジェクト名称を付けた場合、メインの javascriptファイルは、dashboard_de_otn.js　というファイルになる。）

尚、OTN-JのRSS2.0向けにカスタマイズしているため、概要部分が長く、スクロールの必要な場合や、ATOMは正しく動作しない場合がりますのでご注意ください。（OTN-JのFEEDでのみ、テストしたため。）

また、オリジナルのコードがRDFには対応していないため、RDFを扱う場合には、さらにコードを追加する必要あり。　
==> XSLTスタイルシートを使って変換後に処理するようにすればもっと楽かも。。
後で調べよう。==>（メモメモ）

変更前（テンプレートを選択すると自動生成？されるjavascriptコード)

// Namespace URLs
var NS_DC = "http://purl.org/dc/elements/1.1/";
var NS_CONTENT = "http://purl.org/rss/1.0/modules/content/";

・・・・・中略・・・・・

function parseRSSFeed(doc)
{
	var items = doc.getElementsByTagName("item");
	for (var i = 0; i < items.length; i++) {
		var thisItem = items[i];

		var title = getLocalizedString("Untitled");
		var titleElt = getFirstElementByTagName(thisItem, "title", "*");
		if (titleElt && titleElt.firstChild) {
			title = allData(titleElt);
		}

		var description;
		var descElt = getFirstElementByTagName(thisItem, "encoded", NS_CONTENT);
		if (!descElt) {
			descElt = getFirstElementByTagName(thisItem, "description", "*");
		}
		if (descElt && descElt.firstChild) {
			description = allData(descElt);
		}

		var pubDate = getFirstElementByTagName(thisItem, "pubDate", "*");
		// If there's a pubDate element, use it
		if (pubDate) {
			pubDate = new Date(Date.parse(allData(pubDate)));
		}
		// If not, maybe they're using the Dublin Core date element
		if (pubDate == null) {
			pubDate = getFirstElementByTagName(thisItem, "date", NS_DC);
			if (pubDate) {
				var isoDate = allData(pubDate);
				pubDate = parseISODate(isoDate);
			}
		}

		if (+attributes.feedType == DFFeedTypeHTML) {
			// HTML feed
			if (description) {
				entries.unshift({ title: title, description: description, date: pubDate });
			}
		}
		else if (+attributes.feedType == DFFeedTypeImage) {
			// Photo feed
			var image = getFirstImage(description);
			if (image) {
				entries.unshift({ title: title, image: image, date: pubDate });
			}
		}
	}
}

・・・・・中略・・・・

function setHTMLContent(title, description, date)
{
	var content = document.getElementById("content");
	if (content) {
		clearContent();

		if (title != null) {
			var titleDiv = document.createElement("div");
			titleDiv.setAttribute("id", "entryTitle");
			titleDiv.innerHTML = title;
			fixLinks(titleDiv);
			content.appendChild(titleDiv);
		}

		if (description != null) {
			var descDiv = document.createElement("div");
			descDiv.setAttribute("id", "entryDescription");
			descDiv.innerHTML = description;
			fixLinks(descDiv);
			content.appendChild(descDiv);
		}
		
		setDateText(date);
	}
}

変更後

// Namespace URLs
var NS_DC = "http://purl.org/dc/elements/1.1/";
var NS_CONTENT = "http://purl.org/rss/1.0/modules/content/";
/*****************************
*** for Oracle Technology
*****************************/
var NS_JF = "http://www.jivesoftware.com/xmlns/jiveforums/rss";

・・・・・中略・・・・・

function parseRSSFeed(doc)
{
	var items = doc.getElementsByTagName("item");
	for (var i = 0; i < items.length; i++) {
		var thisItem = items[i];

		var title = getLocalizedString("Untitled");
		var titleElt = getFirstElementByTagName(thisItem, "title");
		if (titleElt && titleElt.firstChild) {
			title = allData(titleElt);
		}

		var description;
		var descElt = getFirstElementByTagName(thisItem, "encoded", NS_CONTENT);
		if (!descElt) {
			descElt = getFirstElementByTagName(thisItem, "description");
		}
		if (descElt && descElt.firstChild) {
			description = allData(descElt);
		}

		var pubDate = getFirstElementByTagName(thisItem, "pubDate");
		// If there's a pubDate element, use it
		if (pubDate) {
			pubDate = new Date(Date.parse(allData(pubDate)));
		}
		// If not, maybe they're using the Dublin Core date element
		if (pubDate == null) {
			pubDate = getFirstElementByTagName(thisItem, "date", NS_DC);
			if (pubDate) {
				var isoDate = allData(pubDate);
				pubDate = parseISODate(isoDate);
			}
		}

		// OTN only
		if (pubDate == null) {
			pubDate = getFirstElementByTagName(thisItem, "creationDate", NS_JF);
			if (pubDate) {
				var isoDate = allData(pubDate);
				pubDate = parseISODate(isoDate);
			}
		}
		
		// OTN only
		var author;
		var authorElt = getFirstElementByTagName(thisItem, "author", NS_JF);
		if (authorElt && authorElt.firstChild) {
			author = allData(authorElt);
		}

		var link;
		var linkElt = getFirstElementByTagName(thisItem, "link");
		if (linkElt && linkElt.firstChild) {
			link = allData(linkElt);
		}


			if (+attributes.feedType == DFFeedTypeHTML) {
			// HTML feed
			if (description) {
				entries.unshift(
					{ 
						title: title, description: description, 
						date: pubDate, author: author, link: link 
					}
				);
			}
		}
		else if (+attributes.feedType == DFFeedTypeImage) {
			// Photo feed
			var image = getFirstImage(description);
			if (image) {
				entries.unshift(
					{
						title: title, image: image, 
						date: pubDate, author: author, link: link 
					}
				);
			}
		}
	}
}

・・・・・中略・・・・

function setAuthorText(author)
{
	var authorText = document.getElementById("authorText");
	if (authorText) {
		if (author != null) {
			authorText.innerText = author;
		}
		else {
			dateText.innerText = getLocalizedString("Author");
		}
	}
}

function setHTMLContent(title, description, date, author, link)
{
	var content = document.getElementById("content");
	if (content) {
		clearContent();

		if (title != null) {
			var titleDiv = document.createElement("div");
			titleDiv.setAttribute("id", "entryTitle");

			var linkElt = document.createElement("a");
			linkElt.setAttribute("href", link);
			linkElt.innerHTML = title;
			titleDiv.appendChild(linkElt);

			fixLinks(titleDiv);
			content.appendChild(titleDiv);
		}

		if (description != null) {
			var descDiv = document.createElement("div");
			descDiv.setAttribute("id", "entryDescription");
			descDiv.innerHTML = description;
			fixLinks(descDiv);
			content.appendChild(descDiv);
		}

		setDateText(date);
		setAuthorText(author);
	}
}

最後に、以下の(D)と(E)の部分

「Refresh」ボタンについては、単純に、onClickイベントで、自動生成されたコードに定義されている　refreshFeed() を呼んであげればOK。

[an error occurred while processing this directive]


「Refresh」ボタンをクリックすれば、日付が表示される部分に　Loding... と表示され、最新のFEEDが表示されるようになります。

DashCodeのキャンバス上で、「Refresh」ボタンをクリック->「Inspector」パネル->「Behaviors」タブ->　onclickイベントのHandlersに refreshFeed()　を追加してやるだけ！
[an error occurred while processing this directive]

では、次回、裏面のカスタマイズにつづく。（一気にアイコン追加と、さらに見栄えを変更する可能性あり。。。）

---

＃押し入れから、ウチの奥さんの本が、、

これ　１９９９年の本なんですよね。　2000年頃にRubyやってたって聞いていたけど、本気で初期のころだね。
Rubyもやってみたいんだけど。。。奥さん、随分とRubyから遠ざかっているから、奥さんに聞くより、最新の本を買って、遊び始めたほうが早いか。。。。