小惡魔 - 電腦技術 - 生活日記 - 美食介紹 - AppleBOY » google

Google Chrome 支援超過 40,000 Extensions! with Greasemonkey

appleboy — Wed, 03 Feb 2010 15:33:13 +0000

看到 Google Chrome Blog 發表的Google Chrome 支援超過 40,000 Extensions!，當 Google Chrome 瀏覽器剛出來的時候，造成 Web Developer 一些震撼，因為 Chrome 強調的是擁有快速的 Javascript 引擎，以及快速的啟動，Fast start-up、Fast loading、Fast search，也因此讓很多設計網站的工程師必須把 Chrome 的支援性考慮進去，但是由於剛推出的瀏覽器，沒有任何外掛功能，我本身用 FireFox 瀏覽器很多年了，FireFox 的附加元件讓許多程式設計師投入開發，也製造出很多方便的附加元件來讓大家使用，例如：FireBug、Gmail Manager、Greasemonkey…，然而 FireFox 最方便的就是 Greasemonkey 此附加元件，使用者可以撰寫簡單 Javascript 語言來跟指定網站進行元件控制，現在 Google 工程師聽到我們的聲音了，Google Chrome 4 加入 Greasemonkey user scripts 功能，大家可以到 userscripts.org 下載超過 40,000 script 安裝到 Chrome 瀏覽器。您可以在 blogger 使用 emoticons，大家可以去參考看看。

由於 Chrome 支援了 Greasemonkey，所以趕快把 FireFox 所安裝的 script，也安裝到 Chrome，可是我發現之前 DarkKiller 大神寫的 Wretch Album Expander 已經不能用了，所以我將它實做到 Chrome，可以從這裡下載安裝：Wretch Album Expander for Google Chrome or FireFox，平時自己偶而會看看無名小站，所以也是方便自己觀看照片，此 script 也可以安裝在 FireFox 喔。這樣大家就不用再看圖片還要一張一張慢慢點，只要負責按換頁就可以了 ^^。

來測試看看，隨便找一本無名相簿：馬甲‧小葵，畫面：點我觀看

Related View

Google Chrome 推出 4.0 穩定版 & Mozilla 推出 FireFox 3.6

appleboy — Fri, 29 Jan 2010 04:07:55 +0000

Mozilla 在上禮拜 (2010.01.22) 推出了 FireFox 3.6，大家可以下載測試效能如何，也可以 follow 狐耳摩莎的 Plurk 來收到 MozTW 的最新資訊，這篇重點不是在 FireFox，而是 Google 正式推出 Windows 版本 new Chrome 4.0 stable release，4.0 版本已經可以正式使用 Google Extensions，之前在3.0版本，只能安裝 Chrome Beta 版本才可以使用 extension，現在只要將 Windows Google Chrome 升級成 Stable 版本，就可以全面使用 Extensions，可以使用手動升級，或者是在下禮拜就會自動 update 到最新版本。

最後可以參考 ericsk 大大所寫的從開發者角度看 Chrome 4 的推出

Reference:
Extensibility + new HTML and JavaScript APIs for Google Chrome
More Resources for Developers

Related View

How to install Google Web Toolkit with Eclipse

appleboy — Sun, 17 Jan 2010 11:27:12 +0000

Google Web Toolkit (簡稱：GWT)是先以 Java 語言編寫 AJAX 應用程式網頁，然後在編譯成最佳化 Javascript，不但幫助了剛入門 Javascrit，然後又需要撰寫 AJAX 應用程式的工程師很大的幫助，不僅如此，Google App Engine 也提供了 Java 跟 Python 環境，整合了 GWT，讓您可以上傳到 GAE 的空間進行測試，GWT 目的是產生具有高效能性的 Web 應用程式，您不需要是 Javascript 專家也可以做到，GWT 用在 Google 相當多的服務，例如 Google Wave, 新版的 Google AdWords 可以參考這裡更多實際範例。它是開放姓原始碼(open source)，完全免費，您也可以參與 GWT 的開發。

Google Plugin for Eclipse 支援 Google Web Toolkit 跟 Google App Engine 開發，我們可以直接安裝此 Plugin 就可以開始上手 GWT，當製作完成之後，就可以上傳到 GAE，直接打開提供的網址就可以看到成果了。

首先安裝 Google Plugin for Eclipse，先去下載 Eclipse 3.5 (Galileo) 最新版，打開 Eclipse

1. 選擇 Help -> Install New Software

2. 在 Work With: 填入 http://dl.google.com/eclipse/plugin/3.5

3. 將 Plugin 跟 SDKS 全部選取，接下來按下一步就可以完成

Related View

[Gmail] 最近發布的功能：進階搜尋，預覽收件夾，郵件內容語言轉換

appleboy — Sat, 06 Jun 2009 03:08:32 +0000

最近在 Gmail Lab 看到發布了許多新功能，都蠻好用的，加速搜尋郵件內容，收件者，寄件者，郵件內容語言轉換，匯入其他郵件的通訊名單…等，進階搜尋是這之前就開發好得功能，可以在 search operators 這篇裡面找到相關的用法，簡單來說底下有個例子：

“to:me is:starred” 搜尋寄信給您所標記的郵件
“is:chat from:heather” 搜尋與heather使用者對話的內容
“is:starred -in:inbox” 搜尋所有信件夾內未標記郵件
“from:elliot filename:pdf” 搜尋 elliot 寄來信件附件檔帶有 pdf 檔案

上面例子看了很複雜吧，因為你還要記的很多相關的語法，才可以正確搜尋到，所以 google 很貼心的設計了 Search Autocomplete，之前我有寫一篇：New in Labs:Gmail search autocomplete 快速找尋使用者 email 跟附件檔案，造福了使用 Gmail 的大眾。

預覽收件夾這功能可以參考：New in Labs: Inbox preview，這功能用在當開啟 gmail 網頁時，會有 loading 的畫面，那針對速度慢得使用者，可以預先看到新的郵件標題，而不需要整個載入之後才看的到，目前還沒有遇到這種狀況，不過大家可以試試看。

郵件內容語言轉換(New in Labs: Automatic message translation)，這功能相當不錯，可以利用 google translate tool 進行轉換您所想要的語言，如下圖：

蠻多好玩的功能，都可以去 Gmail Lab 去開起來喔，大家試試看吧

Related View

New in Labs:Gmail search autocomplete 快速找尋使用者 email 跟附件檔案

appleboy — Sun, 05 Apr 2009 02:24:13 +0000

Gmail 又推出一個 Lab 功能了，這個功能我想是大家所期待許久的，可以直接對於搜尋使用者跟附件有相當大的幫助，可以針對附件，郵件裡面的 vedio，圖片副檔名 .jpg、.png、.doc 下去做搜尋的動作，很方便的，也可以針對郵件的 email 或者是姓名搜尋，提供了 autocomplete 的作用，您只需要打入兩個關鍵字，就會出現相關的使用者姓名或者是 email 喔，方便的，可以參考：New in Labs: Gmail search made easier (and lazier)。

使用方法只要去 Settings -> Labs 把功能打開即可

在 search 欄位輸入 at 兩個字，就會出現搜尋附件檔案的動作：

也可以輸入中文姓名，就會幫忙找到相關的部份了：

Related View

[PHP] Zend 使用 Google Calendar API – 瀏覽事件

appleboy — Fri, 27 Mar 2009 04:09:30 +0000

昨天寫了一篇 [PHP] Zend 使用 Google Calendar API – 環境建立架設，相信應該是非常簡單才對，那今天來介紹一下實做 Google Calendar API 的瀏覽、新增、刪除、修改事件的功能，在官方網站都有詳細的 API 功能介紹，我只不過把功能整合完整一點，詳細請看 Google Calendar API With PHP。

1. 瀏覽功能：建立 index.php

/*

* include 昨天新增的config.inc.php 檔案

*/

include('config.inc.php');

/*

* 提供Calendar 的服務名稱

*/

$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;

/*

* 登入帳號密碼

*/

$client = Zend_Gdata_ClientLogin::getHttpClient($googleAccount, $googlePassword, $service);

登入帳號密碼部份，請開啟 PHP 的 module：php_openssl.so，不然會出現底下錯誤訊息：

Fatal error: Uncaught exception ‘Zend_Gdata_App_HttpException’ with message ‘Unable to Connect to ssl://www.google.com:443. Error #46482968: Unable to find the socket transport “ssl” – did you forget to enable it when you configured PHP?’ in C:\AppServ\www\Zend\library\Zend\Gdata\ClientLogin.php:140 Stack trace: #0 C:\AppServ\www\Zend\GClab\index.php(5): Zend_Gdata_ClientLogin::getHttpClient(’xxxxx@gma…’, ”, ‘cl’) #1

解決方法就是修改 php.ini 檔案，打開 extension=php_openssl.dll 這個 module 就可以了，參考網站：[PHP] Unable to find the socket transport “ssl”，接下來在 config.inc.php 加入底下的 function
參數：
$client = 認證通過的變數
$startDate = 選擇起始時間
$endDate = 選擇結束時間

function outputCalendarByDateRange($client, $startDate='2009-01-01',  $endDate='2009-12-31') 

{

  $gdataCal = new Zend_Gdata_Calendar($client);

  $query = $gdataCal->newEventQuery();

  $query->setUser('default');

  $query->setVisibility('private');

  $query->setProjection('full');

  /*

  * 可以指定 order by starttime or lastmodified 

  * starttime 起始時間

  * lastmodified 最後修改    

  */  

  $query->setOrderby('starttime');

  $query->setStartMin($startDate);

  $query->setStartMax($endDate);

  $eventFeed = $gdataCal->getCalendarEventFeed($query);

  foreach ($eventFeed as $event) {

    echo "\"event.php?id=".basename($event->id->text)."\">" . $event->title->text .  "\n";

    echo "\n";

    echo "\t內容:".$event->content->text."
\n";

    foreach ($event->where as $where) {

      echo "\t地點:" . $where->valueString . "
\n";

    }  

    foreach ($event->when as $when) {

      echo "\t起始時間: " . $when->startTime . "
\n";

      echo "\t結束時間: " . $when->endTime . "
\n";

    } 

    echo "\t\t\n";

    echo "\t\n";

    echo "\n";

  }

}

這樣我們就可以整個輸出 index.php 檔案了喔，那原始檔案如下：

include('config.inc.php');

$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME; // 提供Calendar 的服務名稱

$client = Zend_Gdata_ClientLogin::getHttpClient($googleAccount, $googlePassword, $service);

?>

資策會 Appleboy 讀取 Google 行事曆

outputCalendarByDateRange($client,'2009-01-01','2009-12-01');

?>

上一篇：[PHP] Zend 使用 Google Calendar API – 環境建立架設
下一篇：[PHP] Zend 使用 Google Calendar API – 編輯事件

Related View

[PHP] Zend 使用 Google Calendar API – 環境建立架設

appleboy — Thu, 26 Mar 2009 13:15:02 +0000

最近又玩了 Googl 的 API：Google Calendar APIs and Tools，這個 API 可以讓 PHP 開發者對於使用 Google Canledar 有很大的幫助，可以新增事件，刪除事件，修改事件，或者是更改事件，相信在 Google 的 API 裡面都寫的很詳細，這 API 是由 Zend 底下所開發出來的，在 Zend Framework 底下是小 API 模組，大家可以在這裡下載到最新的版本 Zend Gdata 1.7.7，大家也可以直接在 Zend Framework 底下做開發，目前支援 PHP5，如果對 Google 月曆不會用的，可以上網找一下，很多教學的喔，底下是要針對開發環境建立做介紹。

針對 Google Calendar PHP API 教學大家可以先看看，今天先教大家建置環境，環境用在 Zend Framework 底下的作法，那架設 Zend Framework 可以參考我上一篇文章：[PHP] Zend Framework 安裝筆記教學 Appserv + Zend Framework (一)，如果是在 Zend Framwork 底下安裝的話，那必須把 .htaccess 裡面的導向 index.php 的功能 mark 起來，不然就跑不過去喔，不然就是另開一個資料夾，就不需要搭配 Zend Framework，那就在 (www 或者是 data)資料夾，多開一個 GClab 資料夾，把檔案解壓縮到裡面。

1. 新增 google 帳號的設定檔案 config.inc.php

/*

* Google 帳號密碼，以及 calendar ID

*/

$googleAccount = 'xxxxxxx@gmail.com';

$googlePassword = '';   

$calendarID = 'xxxxxxxx@gmail.com';

2. 設定 include_path 的相關性

/*

* 這邊是在設定程式把Zend Gdata Library 載入程式碼中

*/

define ('P_S', PATH_SEPARATOR);

/* Zend_framework 請寫下面這行 */

set_include_path('.' .P_S . '../library' . P_S . '../application/models/' . P_S . get_include_path());

/* 非 Zend_framework 請 copy 下面 */

set_include_path('.' .P_S . './library' . P_S . get_include_path());

require_once 'Zend/Loader.php';

Zend_Loader::loadClass('Zend_Gdata');

Zend_Loader::loadClass('Zend_Gdata_AuthSub');

Zend_Loader::loadClass('Zend_Gdata_ClientLogin');

Zend_Loader::loadClass('Zend_Gdata_HttpClient');

Zend_Loader::loadClass('Zend_Gdata_Calendar');

3. 加入兩個 function

/*

* 取得 event 資訊

*/

function getEvent($client, $eventId) 

{

  $gdataCal = new Zend_Gdata_Calendar($client);

  $query = $gdataCal->newEventQuery();

  $query->setUser('default');

  $query->setVisibility('private');

  $query->setProjection('full');

  $query->setEvent($eventId);

  try {

    $eventEntry = $gdataCal->getCalendarEventEntry($query);

    return $eventEntry;

  } catch (Zend_Gdata_App_Exception $e) {

    var_dump($e);

    return null;

  }

}

/*

* 更新 event 資訊，title 名稱，地點，內容

*/

function updateEvent ($client, $eventId, $newTitle, $where, $desc) 

{

  $gdataCal = new Zend_Gdata_Calendar($client);

  if ($eventOld = getEvent($client, $eventId)) {

    echo "Old title: " . $eventOld->title->text . "
";

    $eventOld->title = $gdataCal->newTitle($newTitle);

    $eventOld->where = array($gdataCal->newWhere($where));

    $eventOld->content = $gdataCal->newContent($desc);

    try {

      $eventOld->save();

    } catch (Zend_Gdata_App_Exception $e) {

      var_dump($e);

      return null;

    }

    $eventNew = getEvent($client, $eventId);

    echo "New title: " . $eventNew->title->text . "
";

    return $eventNew;

  } else {

    return null;

  }

}

整個 config.inc.php 檔案如下

/*

* Google 帳號密碼，以及 calendar ID

*/

$googleAccount = 'xxxxx@gmail.com';

$googlePassword = '';   

$calendarID = 'xxxxxx@gmail.com';

//這邊是在設定程式把Zend Gdata Library 載入程式碼中

define ('P_S', PATH_SEPARATOR);

set_include_path('.' .P_S . '../library' . P_S . '../application/models/' . P_S . get_include_path());

require_once 'Zend/Loader.php';

Zend_Loader::loadClass('Zend_Gdata');

Zend_Loader::loadClass('Zend_Gdata_AuthSub');

Zend_Loader::loadClass('Zend_Gdata_ClientLogin');

Zend_Loader::loadClass('Zend_Gdata_HttpClient');

Zend_Loader::loadClass('Zend_Gdata_Calendar');

function getEvent($client, $eventId) 

{

  $gdataCal = new Zend_Gdata_Calendar($client);

  $query = $gdataCal->newEventQuery();

  $query->setUser('default');

  $query->setVisibility('private');

  $query->setProjection('full');

  $query->setEvent($eventId);

  try {

    $eventEntry = $gdataCal->getCalendarEventEntry($query);

    return $eventEntry;

  } catch (Zend_Gdata_App_Exception $e) {

    var_dump($e);

    return null;

  }

}

function updateEvent ($client, $eventId, $newTitle, $where, $desc) 

{

  $gdataCal = new Zend_Gdata_Calendar($client);

  if ($eventOld = getEvent($client, $eventId)) {

    echo "Old title: " . $eventOld->title->text . "
";

    $eventOld->title = $gdataCal->newTitle($newTitle);

    $eventOld->where = array($gdataCal->newWhere($where));

    $eventOld->content = $gdataCal->newContent($desc);

    try {

      $eventOld->save();

    } catch (Zend_Gdata_App_Exception $e) {

      var_dump($e);

      return null;

    }

    $eventNew = getEvent($client, $eventId);

    echo "New title: " . $eventNew->title->text . "
";

    return $eventNew;

  } else {

    return null;

  }

}

?>

打開瀏覽器，輸入：http://localhost/資料夾/config.inc.php，如果沒有錯誤訊息，那就是成功了喔，看看明天可不可以來寫新增修改刪除範例，還有可以瀏覽整個 Google Calendar 畫面。

下一篇：[PHP] Zend 使用 Google Calendar API – 瀏覽事件

Related View

Google App Engine SDK：python 基本教學安裝

appleboy — Sat, 07 Mar 2009 04:41:30 +0000

Google App Engine 利用 python 程式語言所組成，可以利用 Google 背後的技術來開發您的 Web application，後端就交給 Google 的強大雲端運算能力，前端就可以利用 SDK 來開發您的 Web 介面，後端儲存可以用 Google Bigtable 及 GFS 的儲存方式，那現在就不多說了，花了一點時間把環境建立起來，遇到一些問題，現在來筆記一下，目前我在 FreeBSD 7.1 Release 來當作 Google App Engine 開發平台，在安裝方面有遇到一些小問題，底下來看看：

在 FreeBSD 安裝方法還蠻簡單的，首先把 python 環境弄好

# cd /usr/ports/lang/python25/

# make install clean

底下這張圖就是安裝好的結果：

安裝好之後就是下載開發環境 SDK Downloads，目前支援 Mac OS、Linux、Windows 都可以安裝：

當然我就選擇 Linux 的 zip 檔案，下載好解壓縮就可以了，接下來介紹怎麼使用，其實網路上說明文件都寫的還蠻詳細的，解壓縮產生一個資料夾 google_appengine，裡面兩個檔案是大家都會用到的：

dev_appserver.py：這個檔案用來編譯您寫的 Web application
appcfg.py：用來上傳您寫好的檔案到 App Engine 系統

再來寫測試檔案，測試看看喔，寫一個 Hello, World! 來看看

先建立一個 hello 的資料夾

# mkdir hello

裡面放入兩個檔案，分別是：hello.py 跟 app.yaml，hello.py 就是您的程式檔案，app.yaml 就是網站設定檔，檔案內容分別如下：

hello.py：

print 'Content-Type: text/plain'

print ''

print 'Hello, world!'

app.yaml：

application: hello

version: 1

runtime: python

api_version: 1

handlers:

- url: /.*

script: hello.py

接下來開始編譯：利用 dev_appserver.py 這隻 python 程式編譯

google_appengine/dev_appserver.py hello

這樣預設編譯 8080 port，這樣就可以利用 http://localhost:8080 來看到網站，不過底下會出現一些問題：

WARNING  2009-03-07 03:09:14,371 dev_appserver.py] 

Could not initialize images API; you are likely missing the Python "PIL" module. ImportError: No module named _imaging

這個問題，就是沒有安裝 pytho 的 imaging 這隻 ports，我是參考了 FreeBSD ports and Python versions，找到答案的，所以解決方式如下

# cd /usr/ports/graphics/py-imaging

# make install clean

再來就是為甚麼只能在本機端觀看網頁，只要不是用 127.0.0.1 跟 localhost 就不能看，我想要用 domain name 下去看阿，所以只要加上參數就可以了

google_appengine/dev_appserver.py --address=0.0.0.0 --port=9999 hello

這樣就可以利用 host name 下去看了，也可以把預設 8080 port 改成 9999，另外一個問題：

WARNING  2009-03-07 04:27:36,197 datastore_file_stub.py] 

Could not read datastore data from /tmp/dev_appserver.datastore

這問題其實很簡單，這只是提供一個 warning 的訊息，不會造成系統不能啟動，因為如果您是寫 hello 這隻程式，根本不需要用到 data store 自然就會提醒出這個訊息，如果該檔案沒有存在也會出現這個訊息，不過系統會在啟動自動建立，所以也不用擔心，然而如果您 compiler demo 檔案，就是 guest book 這個資料夾

google_appengine/dev_appserver.py --address=0.0.0.0 --port=9999 google_appengine/demos/guestbook

系統因為剛開始找不到 dev_appserver.datastore 這個檔案，所以會有 warning 訊息，然後也會自動建立該檔案，等您下次從新啟動，這個 warning 訊息就會消失了，可以參考此文章，您也可以利用 –datastore_path=/usr/home/hello/datastore 來改變存 data store 的地方。

參考文章：
ericsk 大大文章：
Google App Engine

Related View

[Wordpress] post 文章不能使用 javascript 語法

appleboy — Tue, 03 Mar 2009 12:38:12 +0000

之前寫了一篇讓 wordpress 可以支援 Google Map API 的教學：[AJAX] google map 的應用，不過我將 Wordpress 升級到 WordPress 2.8-bleeding-edge 版本，發現 javascript 語言就不能使用了，因為在寫 javascript 的時候，有利用到
這個 Tag，不過送出後轉出來的 javascript 語言會變成編碼過後，” 會變成 ” Big5 編碼，所以這個問題很困擾我，去找一下，Wordpress 把斷行完全用 wpautop 這個函式下去取代，所以你只要在內容寫入
都會消失，不然就是出現怪問題。

這個問題也不是無解，在網路上找到兩個解法：

1. inline-js – wordpress plugin
您只要在 javascript 語言包一層 tag 就可以了

[inline]

<script type="text/javascript">

document.write("hello world!");

script>

[/inline]

2. Javascript In WordPress Posts 這個外掛，下載點（適用至wordpress2.7）：wp-ayb-javascriptinposts.zip，參考文章：讓wordpress文章(post和page)可以使用javascript
這外掛就是將 wpautop 拿掉，自行寫取代函式，將 javascript 支援，不過目前有一個小 bug，那就是如果 script 裡面有 ‘ 的話，要把他先取代成 “，不然所有的 ‘ 都會變成 \\’，這樣 javascript 就不會動了喔

我個人是利用 2 這個方式，感覺比較容易。

Related View

[Google]Gmail 支援選擇多重檔案上傳跟進度狀況狀態 multi-select and progress bars

appleboy — Fri, 27 Feb 2009 03:43:12 +0000

Gmail 推廣到現在，目前很多人都在使用，Gmail Blog 也開發許多模組讓大家使用，之前 Gmail 都不支援多重檔案選擇上傳，都必需要分別選取檔案，來達到多重上傳，而且每次上傳都不知道進度，也不確定是否上傳成功，現在 Gmail 改變了一些作法，來達到附件檔案上傳進度跟多重檔案選取，如果您要選取多個檔案上傳，您只要按住 Ctrl 加上檔案就可以多重選取了，相當方便，或者是按住 Shift 來達到大量選取檔案，可以參考此篇：Updates to attachments: multi-select and progress bars

底下就是 Gmail 上傳附件檔案的圖示：