blog.Ring.idv.tw

JavaScript

[Chrome擴展套件] Ymedia Downloader 天空部落影音下載器 v0.1

兩年多前筆者曾寫了手動下載天空部落影音」和「音樂」兩篇的po文,不過這都是需要「手動下載」~

然而隨著Google Chrome的發展,根據「Extensions at Google I/O」的說明(2009年5月),我們已經可以自行開發Chrome Extensions(副檔名為crx)。

開發Chrome Extensions必須先將你的Chrome改成Dev版本,可以參考「Early Access Release Channels 」,另外除了參考官方的教學之外,也有「www.chromeextensions.org」提供許多Chrome Extensions的集中地~

由於Chrome Extension的crx檔也是像Adobe AIR的air檔採用zip壓縮,所以可以很方便的解開,如果想學習它人如何開發的話... 不失為一種方式,但還是要尊重它人的智財權:)。

使用Ymedia Downloader 天空部落影音下載器 v0.1

請點擊「ymedia.crx」安裝,完成之後會在瀏覽器下方的工具列上看到下圖:

接下來只要當你瀏覽天空部落的任一個影音網站時,點擊上圖的按鈕就會立即下載您目前所處於瀏覽的影音!!

如果有任何問題的話,歡迎給予建議或回饋,謝謝。

2009-09-22 19:59:48 | Add Comment

Read Later - bookmarklet 分析

去年筆者曾寫了一篇「Instapaper - 網頁暫存器」po文來介紹此工具~ 前陣子發覺它的「Bookmarklet - 書籤小程式」有了改版~

它的Bookmarklet主要利用「Dynamic Script Tag」的方式載入一個外部的js檔,下述是此js檔的原始碼:

var d=document;
d.title = d.title.substring(12);
if (document.location.href == 'http://www.instapaper.com/i4') { alert("The bookmarklet is correctly installed."); throw(0); }
var w=window,
    e=w.getSelection,
    k=d.getSelection,
    x=d.selection,
    s=(e? e(): (k)? k(): (x?x.createRange().text: 0)),
    l=d.location,
    e=encodeURIComponent,
    n=d.getElementsByTagName('html'),
    h=0,    z=d.createElement('scr'+'ipt'),
    p='k=CHN8G1125OCh&u=' + e(l.href) + '&t=' + e(d.title) + '&s=' + e(s.length > 6144 ? s : '');
/* Lauderdale, start your photocopiers! http://bit.ly/NdDJj :) */
i=document.createElement('iframe');
i.setAttribute('name', 'ipb596873');
i.setAttribute('id', 'ipb596873');
    c = 'left:10px;top:10px;width:168px;';
i.setAttribute('style', 'z-index: 2147483647; position: fixed;'+c+'width:168px;height: 100px; border: 3px solid #aaa;');
document.body.appendChild(i);
i.onload = function(){ setTimeout(ipb596873_close, 350); }

function ipb596873_close() 
{ 
    var f = document.getElementById('ipb596873');
    f.style.display = 'none'; 
    f.parentNode.removeChild(f);
}

window['ipb596873'].document.write(
    '<html><body style="color: #555; background-color: #fff; text-align: center; margin: 0px; font-family: Georgia, Times, serif; font-size: 26px;">' +
    '<img style="display: block; position: fixed; bottom: 4px; left: 72px;" src="data:image/gif;base64,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"/>' +
    '<div style="text-align: center; width: 80%; padding-bottom: 1px; margin: 0 auto 15px auto; font-size: 13px; border-bottom: 1px solid #ccc; color: #333;">Instapaper</div>' +
    'Saving...' +
    '<form action="http://www.instapaper.com/bookmarklet/post_v5" method="post" id="f">' +
    '<input type="hidden" name="p" value="'+p+'"/>' +
    '<input type="hidden" name="b" id="b" value=""/>' +
    '</form>' +
    '<scr'+'ipt>setTimeout(function() { document.getElementById("b").value = decodeURIComponent("'+e(h)+'"); document.getElementById("f").submit(); }, 1);</scr'+'ipt>' +
    '</body></html>'
);

從它的原始碼可以發現,它主要採用「iframe」的方式並設定CSS z-index為:2147483647,以及透過「Base64」的編碼方式將GIF圖檔內容直接內嵌在js檔中,最後利用「form」來觸發後端的記錄動作,實在是一個不錯的技巧!!

經由筆者測試之後,透過這樣的方式就算在瀏覽全版面的Flash網站時,仍然可以讓視窗保持在最上層!

2009-07-24 00:55:28 | Add Comment

Comet - The Next Generation Ajax 2.0

Comet - The Next Generation Ajax 2.0」.這個標題看起來似乎很聳動!!! 嗯~ 筆者是從Comet and Reverse Ajax: The Next-Generation Ajax 2.0這本書籍借來的~ (感覺這本書我應該要帶回家了~ XD) ~ 那何謂Comet?

先回顧一下2005年2月18日的那天~ 在Web的領域上出現了一個新的名詞,它叫做「Ajax」,這個名詞是由「Jesse James Garrett」所發表的一篇「Ajax: A New Approach to Web Applications」所提出來的~ 它為整個Web Application帶來了「Asynchronous」的新體驗~ 從那時候學術上就多了很多篇Ajax相關的論文了~ 因為利用「Ajax」我們可以開發「幾乎接近」Desktop Application的操作模式~ 嗯~ 一切聽起來似乎很美妙~ 不過它和本文所提供的「Comet」有何關係?

這裡我們舉一個例子來說明~ 假設我們直接用「XHR」和「setInterval」這樣的「polling」機制來打造一個「Chat Web Application」~ 不過問題來了~ 大多數Web Server所實作的技術不是採用Thread就是Process來處理Client的請求~ 但這樣的「Polling」機制將會造成後端伺服器常常會忙碌於處理無謂的請求~(因為沒有人發言聊天,它還是會持續送請求給後端伺服器,以致於浪費資源),所以我們需要一個「Push」的技術來避免類似這樣無謂的請求~ 但「HTTP」終究是一種「Connectionless」的通訊協定~ 那該如何達成這樣的應用呢?用Flash中的Socket嗎?雖然Flash Player在目前的佔有率達到了99%(Flash Player Statistics),但終究不是百分之百~ 所以在2006年3月3日的這天~ 由領軍「Dojo - JavaScript Toolkiet」Project的「Alex Russell」在他的Blog發表了一篇「Comet: Low Latency Data for the Browser」,這個時候「Comet」就正式被提出來了~ 基本上「Comet」和「Ajax」這兩個名詞都不是代表某一項技術~ 而比較像是代表「某幾項」技術的集合而創造的~ 因為這樣比較好溝通~ 所以像GMail裡面所整合的GTalk功能~ 其實就是採用Comet來達成的~ 想當然這個名詞被提出來了~ 學術上又會開始產生這些相關的論文了~ 比較相關的有「2007 - A Comparison of Push and Pull Techniques for AJAX」、「2008 - XVSMPBayeux A Protocol for Scalable Space Based Computing in the Web」... 先寫到這~ 有空再介紹一個實例及詳細的細節~或者您對Comet有任何心動的話~ 請參考相關資源 :p

最後本文如果有任何謬誤的地方~ 請不吝給予指正,謝謝。

相關資源

HTTP Streaming - Ajax Patterns

Chunked transfer encoding

Comet Architecture

Asynchronous HTTP Architecture

Comet Daily (朝聖之地!!)

Cometd.org

java.net: Developing Applications Using Reverse Ajax

Asynchronous HTTP and Comet architectures - 很讚的資源!

How to implement COMET with PHP

Continuations - Jetty - Codehaus

Server Push and Server Sockets

Ajaxian: IFrame + Script Tags = Portable Comet

Hello Bayeux

Comet: Reverse Ajax for streaming data from the server

Jetty cometd(Continuation)学习笔记

Ajax Dojo Comet Tutorial

Write scalable Comet applications with Jetty and Direct Web Remoting - 詳解

2008-12-22 21:50:56 | Comments (1)

Flash Player 10 - FileReference.browse() 安全限制

這篇不是什麼大新聞~ 早在八月份時Flash Player Developer Center就已經發佈一篇「Understanding the security changes in Flash Player 10」文章來說明了!

因為最近注意到「TransNote」的「開啟舊檔」這個已經失效的功能~ 其實這個功能未來會拿掉,因為我們會撰寫一個後端的服務機制,以供使用者能直接將閱讀後的文章儲存在TransNote之上,所以這個安全限制對我們來說影響不大,不過對於WordPressFlickr原先就使用這樣的Flash檔案上傳機制就影響頗大,因為這樣的限制已經無法透過JavaScript直接利用ExternalInterface來開啟「FileReference.browse()」,而被限制只能使用「User-Event」來觸發,這的確在網頁上會造成不方便。

幸好,也有人提供相關的解決方案,它的作法其實就是利用一些Transparent、CSS的相關設定來處理的,實際的範例:「FancyUpload - Swiff meets Ajax (v2.0)」,從這個範例我們可以知道他的作法就是設定Flash的寬高剛好對應後面超連結文字的寬高,然後將Flash設為Transparent,如此一來,使用者就會誤以為點選這個超連結文字,但實際上點選的卻是Flash,利用這樣的方式來觸發「User-Event」,Bingo! 問題也就解決了。

相關資源

Flash Player 10 FileReference Changes

升級到 Flash Player 10 將會造成無法使用Flash檔案上傳功能

FancyUpload for Flash 10

2008-11-15 23:15:31 | Add Comment

Bookmarklet - 書籤小程式

Bookmarklet.這個名詞是由Steve Kangas在1998年時所創造的,從「Bookmarklet」這個名詞來看,大致上可以猜的出來它意含著「小書籤」的味道,因為只要單字的尾巴挾著「-let」都含帶著「小東西」的意思,所以像「Applet」就是一個很顯明的例子,它代表著「application + let」。

回到本文的主旨,那「Bookmarklet」和「Bookmark」有什麼不同?簡單來說「Bookmark」包含的是「http://」這樣的網址列,而「Bookmarklet」所包含的卻是像「javascript:」這樣的程式,也就是說,只要將這樣的「Bookmarklet」加到自己的「書籤工具列」你就可以擁有「one-click」的方便使用者操作。

所以最近將這個功能實作在目前的計畫上,像這樣諸如此類的應用其實甚為廣泛,像是「Google Translation Browser Buttons」或是筆者曾介紹過的「Instapaper - 網頁暫存器」都是應用「Bookmarklet」的例子,當然在Web 2.0的應用上也常被使用,在學術領域有些論文就直接將這個功能納進來應用,如:Social networking for scientists using tagging and shared bookmarks: a Web 2.0 application

這真是一個不錯的巧思~ 想當然「TransNote 2.0」也有用到這樣的應用~ ^^

2008-11-10 03:02:10 | Add Comment

Next Posts~:::~Previous Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment