akira the writings http://akr.tw 網路、軟體、網頁設計、程式設計、音樂、翻譯、雜談… Mon, 30 Jan 2012 10:06:55 +0000 en hourly 1 http://wordpress.org/?v= 【譯】Firefox 10 的網站相容性資訊 http://akr.tw/2012/01/firefox-10-site-compatibility/ http://akr.tw/2012/01/firefox-10-site-compatibility/#comments Mon, 30 Jan 2012 08:52:19 +0000 akira http://akr.tw/?p=88 Firefox

（全文譯自：Firefox 10 のサイト互換性情報 – Mozilla Japan）

Firefox 10 正在進行開發，預計在 1 月 31 日釋出。儘管在開發時已盡最大可能維持相容性，但為了與其他瀏覽器的互用、以及符合最新 Web 標準，在 10 版中做了許多有關向下相容的修正。以下整理出這些修正點，在網頁測試時可做參考。

本文僅介紹向下相容所影響的修正。其他新功能和變更請參考以下網頁：

UserAgent 字串的版本號改為兩位數

Firefox 10 是第一個版本號為兩位數的正式版本。若用 UserAgent 字串來判斷瀏覽器而該程式碼的版本判斷不正確，有可能導致瀏覽器判斷錯誤。因此請確認使用 UserAgent 字串判斷瀏覽器的程式碼，或是先在 Firefox 10 Beta 版中測試。

Firefox 的 UserAgent 字串在正式版或測試版中如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0
Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1

正式版除了版本號為兩位數之外，之後若有安全性更新等版本，版本號會從原本由一個小數點區隔的「10.0」，變為有兩個小數點的「10.0.1」。請務必注意。

Firefox 的 Beta 版和正式版有一樣的 UA 字串，但 Nightly 版和 Aurora 版不同，如下所示：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a1) Gecko/20120122 Firefox/12.0a1
Mozilla/5.0 (Windows NT 6.2; rv:12.0a2) Gecko/20120122 Firefox/12.0a2

要注意的是 Gecko/yyyymmdd 的部分並非固定是 20100101、版本號尾端的也會加上 a1 或 a2 。有關 Firefox 的 UserAgent 字串的更多詳細資訊請參考 MDN 文件。

此外，Internet Explorer 的版本號也即將邁入兩位數。因此建議一並做好相對應的解決方案。

<table> 元素的邊界（margin）會正確抵銷

在 CSS 樣式內，前後元素的垂直方向邊界會發生「摺疊（margin collapse）」。也就是說，在兩個元素的垂直方向間的邊界會互相抵銷，只會顯示兩個元素中較大的邊界。

但在 Firefox 9 以前，在 ‘<table>’ 元素前後的元素邊界並不會抵銷，而是和 ‘<table>’ 本身的邊界相加。在 Firefox 10 已經修正為和其他元素一樣正確顯示。若 ‘<table>’ 和前後元素都設定了邊界，邊界會比舊版來得小。在倚賴縱向大小的版面配置上特別要注意 ‘<table>’ 的邊界設定。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 的上下邊界為 1+2=3em、2+3=5em，但在 Firefox 10 之後會變成 Max(1,2) = 2em、Max(2,3) = 3em。

<p style="margin: 1em;">具有 margin-bottom 的元素</p>
<table style="margin: 2em;"><tr><td>table 元素</td></tr></table>
<p style="margin: 3em;">具有 margin-top 的元素</p>

在非靜態位置的 <table> 內的絕對位置基準位置修正

在 CSS 樣式內，指定為絕對位置(position: absolute) 的元素，會以母元素中最靠近的非靜態 (position: static) 的元素(position: relative or absolute or fixed)為基準來設定位置 (top, bottom, left, right) 。

但在 Firefox 9 以前，就算母元素之中的 ‘<table>’ 元素不是靜態位置，子元素的位置會以更上層的非靜態元素為準。在絕對位置、相對位置或是固定位置的 ‘<table>’ 元素內指定絕對位置元素的情況，在新版會改變原先的版面配置。

例如以下的原始碼，在 Firefox 9 以前 ‘<table>’ 內的 ‘<div>’ 元素為以更上層的 ‘<div>’ 元素為基準，因此會出現在上方 0+50 = 50px、左 100+50 = 150px 的位置。在 Firefox 10 之後會改以 ‘<table>’ 元素為基準，出現在上方 100+50 = 150px，左方 100+50 = 150px 的位置。

<div style="position: absolute; left: 100px;">絕對位置的母元素
<table style="position: absolute; top: 100px;"><tr><td>
  table 內的靜態位置元素
  <div style="position: absolute; top: 50px; left: 50px;">table 內的絕對位置元素</div>
</td></tr></table>
</div>

以上兩項絕對誤置和邊界抵銷的問題都是針對 CSS 樣式的修正。其他瀏覽器也會做出相同的修正，因此以後不必為 Firefox 特別設計版面，只要讓版面相容於各大瀏覽器即可。詳細資訊請參考這篇文章。

此外，這裡為了簡化所以寫成 ‘<table>’ 元素，事實上只要是設定為 ‘display:table’ 的元素都有修正。

Strict 模式的 E4X 不再適用

Firefox 的 JavaScript 引擎過去支援簡單處理 XML 的語法，稱為「E4X」。但在導入 ECMAScript 5th 的 Strict 模式下，將不能再使用 E4X 語法。

若同時使用 E4X 和 Strict 模式，請放棄 Strict 模式，或是重新改寫原先 E4X 的原始碼。

刪除 DOM4 下不建議的屬性

在 DOM4 中不再建議使用以下的屬性，因此從 Firefox 10 之後刪除。

由於 document.xmlVersion 總是回傳 "1.0″ ，因此以往只能用來判斷 document 是 XML 或 HTML。現在其判斷方法如下：

if (document.createElement("foo").tagName == "FOO") {
  /* 在HTML 模式下 tagName 屬性會轉為大寫 */
}

若使用 node.isSameNode() 方法，請改用同值運算符號 (===) 來比較。

setAttribute() 設定為整數時，尾端的非數字會被省略

在 HTML 定義下，設定屬性為整數時，所設定的字串尾端的非數字會被省略。即 "100fox" 會被當作 "100″。

Firefox 9 以前若屬性值不是數字，會被當成錯誤。但在 Firefox 10 之後修正為讀取字串的數字部分。

例如以下的原始碼，在 Firefox 9 以前 ‘<canvas>’ 的寬度會回到預設值 (300) ，而在 Firefox 10 之後設定為 100 。

document.getElementById("canvasid").setAttribute("width", "100em");

ESC 鍵不再觸發 oninput 事件

在 HTML 定義下，只有元素的值改變時才會觸發 oninput 事件，但在 Firefox 4 到 Firefox 9 為止，使用者按下 ESC 鍵時也會觸發 oninput 事件。

Firefox 10 之後將遵照標準，ESC 鍵不會再觸發事件。

IndexedDB 的實作配合最新標準

Firefox 4 起開始支援當初起草的 IndexedDB 其中一部份 API，但之後支援的 API 經過多次的新增和標準修改。Firefox 10 起 IndexedDB 進行了較多的變更，其中要注意的是版本的指定方式。

以往連接到資料庫之後是用 setVersion() 方法指定版本，但 setVersion() 已經被刪除，改為在連結資料庫時用參數的方式來指定版本。

有關此項 IndexedDB 的更改，可參考由 mzsm 在上個月所撰寫的日文文章「IndexedDBに関する覚書 (2011年12月版)」。

]]> http://akr.tw/2012/01/firefox-10-site-compatibility/feed/ 0 寫一個 HTML5 網頁 － HTML 篇 http://akr.tw/2012/01/html5-tutorial-html/ http://akr.tw/2012/01/html5-tutorial-html/#comments Tue, 24 Jan 2012 14:56:53 +0000 akira http://akr.tw/?p=79 HTML5 是 HTML 標記語言（它不是程式碼！）的下一個主要修訂版本， 儘管現在仍在草稿階段，但許多主流瀏覽器都已開始支援 HTML5 的各種功能， 這篇文章介紹一個基本的 HTML5 網頁如何構成。可能需要一點 HTML 的基本知識才能看懂。

一張基本的 HTML5 網頁

首先從最基本的 HTML 檔案開始看起。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8">

    <title></title>

    <!-- META -->
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- 行動裝置顯示設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS 樣式表 -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Modernizr 函式庫 -->
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

    <!-- 網頁內容 -->
    <div id="container">
        <header>
        </header>

        <div id="main" role="main">
        </div>

        <footer>
        </footer>
    </div>

    <!-- JavaScript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>

    <script src="js/plugins.js"></script>
    <script src="js/script.js"></script>

    <!-- Google Analytics 追蹤程式碼 -->
    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!-- 針對 IE6 使用者顯示 Chrome Frame 安裝提示 -->
    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

</body>
</html>

以下開始將這張網頁從頭開始一行一行解說起。

Doctype

以往在 XHTML 的標準下，需要寫的 Doctype 可能是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 等等一長串的文件類型宣告，而在 HTML5 底下，只需要 <!DOCTYPE html>’，15個字元，簡潔有力。

要注意的是 Doctype 前面不能有任何字元，包含空格或是換行符號，否則某些瀏覽器可能會無視這個 Doctype。

<html lang="zh-TW">

在 HTML 的根元素下，可以指定網頁的語言，如 ‘en’、’zh-TW’ 等。至於以前 XHTML 的 ‘xmlns="http://www.w3.org/1999/xhtml"‘ 屬性當然也不再需要了。

網頁編碼

<meta charset="utf-8">

這一行指定了這個網頁的編碼是 UTF-8。事實上這是從 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ /> 這種寫法簡化而來的。這在所有瀏覽器內都行得通。

編碼的指定最好放在 <head> 裡的第一行，甚至在 <title> 之上。

META 資訊

<meta name="description" content="">
<meta name="author" content="">

設定這個網頁的描述和作者名稱，這對於搜尋引擎或社群網站在抓取資料時非常有用。

<meta name="viewport" content="width=device-width, initial-scale=1">

設定行動裝置（手機、平板電腦）上的預設縮放大小和寬度。

Favicon

對，這裡沒有宣告 <link rel="favicon" … >’，瀏覽器也會自動去抓取網站根目錄下的 favicon.ico ，所以不需要特別寫出來。但當 favicon.ico 的位置不是在根目錄、或檔名不叫做 favicon.ico 的時候，就需要加個 <link> 標籤來告訴瀏覽器。

CSS

和以前一樣，使用 <link rel="stylesheet" href="css/style.css"> 來加入 CSS 樣式表檔案。

其中 type="css" 的屬性值已經不需要再寫了，因為目前這世上的樣式表只有一種格式，就是CSS。

Modernizr 函示庫

<script src="js/libs/modernizr-2.0.6.min.js"></script>

Modernizr 是個很好用的函示庫，原先是用來檢測瀏覽器是否支援各種 HTML5 的功能。但發展到現在已經包山包海，包進了許多好用的函示庫。

其中一個重要的功能是 HTML Shim，這能讓不支援 HTML5 標籤的瀏覽器（對，就是IE）認得新的標籤。

要下載 Modernizr，請到官方網站的下載頁面，自訂想要的功能。

Modernizr 必須在 <head> 內就先載入。其餘的 JavaScript 則放在 </body> 之前，這樣能加快網頁載入的速度。

<body>

進入網頁的主要內容。HTML5 新增了語意元素（如範例中的 <header> 等等）。這裡先跳過…。

JavaScript

將所有的 JavaScript 放在網頁最底端可以節省網頁開啟的時間。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>

第一行是 jQuery 函示庫。使用 Google CDN 上的檔案。 第二行是當 Google CDN 連不上、找不到 jQuery 時，可以改為載入放在伺服器上的檔案。 接著就是自己的 JavaScript 檔案了。 不需要 type="text/javascript 屬性值，瀏覽器也會當作是 JavaScript 來處理。

Google Analytics

<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
  load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>

載入 Google Analytics 的追蹤程式碼。其中 UAXXXXXXXX1 要改為自己的 ID。

這裡使用的是 Modernizr 裡的「yepnope.js」功能來載入。

Chrome Frame

<!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

一起來終止 IE6 吧，這幾行程式碼可以在使用 IE6 瀏覽時顯示 Google 推出的 Chrome Frame 外掛安裝提示，Chrome Frame 可以讓使用者在 IE 下直接使用 Chorme 的網頁引擎。

以上就是一個基本的 HTML5 網頁。

]]> http://akr.tw/2012/01/html5-tutorial-html/feed/ 0 AKB48 Google+ 留言過濾 Userscript「48 Comments Only」 http://akr.tw/2011/12/greasemonkey-akb48-googleplus-comment-filter/ http://akr.tw/2011/12/greasemonkey-akb48-googleplus-comment-filter/#comments Sat, 10 Dec 2011 13:27:23 +0000 akira http://akr.tw/?p=58 48 Comments Only。 一個 Userscript 能在 Google+ 上快速取出 AKB48 成員的留言。

下載

http://userscripts.org/scripts/show/120097（Userscripts.org）

或

http://akr.tw/files/48-comments-only.user.js

安裝

Firefox

請先確定 Firefox 上已經安裝「Greasemonkey」這個附加元件，再到上述連結內按下右上方的「Install」下載。

Google Chrome

Google Chrome 可以直接將 Userscript 安裝成擴充功能，直接到上述連結內按下右上方的「Install」下載就可以了。

使用方法

將滑鼠游標移到成員的文章上就會自動顯示出這篇文章下其他成員的留言回應，另外若是自己曾經留過言，也會一併顯示在下方。

【Greasemonkey】AKB48 Google+ 留言過濾 Userscript 【Greasemonkey】AKB48 Google+ 留言過濾 Userscript

註

  • 需要登入 Google+
  • 取出的留言不會自動更新，要重新讀取留言請將滑鼠游標移到訊息上面動一動就可以了。
  • 更新完之後要等 10 秒才能執行下一次的更新（頻率太高會被 Google 擋掉）。
  • 已知無法透過 Chrome 的 Blank Canvas Script Handler 套件安裝。

v0.85 更新

  • 新增：新增成員時可使用姓名搜尋。
  • 修正：「DownloadSupport for Google+」按鈕相衝的問題。
  • 修正：Google+ 修改了 CSS Class name 之後的失效問題。

TODO

  • 從 Google 試算表讀取資料。
  • 成員群組分類。
  • 成員和自訂名單分開。
  • 留言的編輯功能。
  • 更多的自訂選項。（顏色、特效等。）
  • 修正與其他擴充功能的相容性問題。

原理

（寫給看得懂的人看…）

腳本流程基本上就是利用 Google+ 的 API（不是 Developer 文件裡正規的 API，所以需要登入。）取出文章底下的所有留言，再一一比對留言的作者 ID 是不是 48 成員。

比對的模式是用正規表達式（Regular Expression），比起跑迴圈檢查 Array 速度要快上非常多。用 AJAX 取回 JSON 資料之後再拿出想要的資料顯示出來就行了。

抓回來的 JSON 也包含自己的 ID，所以可以拿來比對自己的留言。

這東西是 MIT License，想要拿回去研究修改的人請便。

追蹤

要追蹤更新或回報問題，歡迎到 48 Comments Only 的 Google+ 專頁－https://plus.google.com/109999375227357958670。

]]> http://akr.tw/2011/12/greasemonkey-akb48-googleplus-comment-filter/feed/ 7 Google App Engine SDK 1.6.0 發布。支援 Python 2.7 http://akr.tw/2011/11/google-app-engine-sdk-160/ http://akr.tw/2011/11/google-app-engine-sdk-160/#comments Thu, 17 Nov 2011 09:34:12 +0000 akira http://akr.tw/?p=53 Google App Engine 在前幾天（11/7）發布了 1.6.0 的 SDK。

主要的改進有：

（一）新的（更貴的）收費模式（http://www.google.com/enterprise/cloud/appengine/pricing.html）

（二）可以使用 Python 2.7 了。

其實在上一版就已經加入 2.7 的測試，但是 SDK 等到這次的 1.6.0 才開始支援本機端的 2.7。

要使用 Python 2.7 作為 runtime，首先要確認你的應用程式必須是 High Replication Datastore（HRD）模式才行。

現在建立新的應用程式的話，預設都是在 HRD 模式，如果是很古早前的程式，要先經過 Migration 程序轉換到 HRD 模式。（從後台「Application Settings」裡的「Migrate Application」）

接著在 app.yaml 中修改：

runtime: **python27**
threadsafe: **true**

URL 的對應也要修改為：

- url: /.*
  main.**app**

這樣就能在 Python 2.7 中開發你的應用程式了。（當然本機端也別忘了也要升級到 2.7。）

（三）支援各種 Python 2.7 的 Threading library。

（四）支援一些 C 語言的模組：‘ctypes, sqlite, ssl, _ssl, fcntl, spwd, pwd, grp, syslog, select, _socket’

（五）支援 Python 原生的 JSON 函示庫。

以往要在 GAE 裡使用 JSON 得靠 Django 的 simplejson， Python 2.7 開始支援原生的 JSON library，速度會快上很多。

（六）支援許多第三方的函示庫。

在新的 Python 2.7 runtime 可以使用 Django、lxml、jinja2、MarkupSafe、NumPy、PIL、PyCrypto、setuptools、WebOb、YAML、zipimport 這些 third-party libraries。

要在應用程式裡匯入這些 libraries，得先在 app.yaml 中設定好，以 lxml 來說：

libraries:
- name: lxml
  version: "2.3"

其中 name 是 library 的名稱，version 是要使用的版本，也可以指定「latest」來使用伺服器上最新的版本。詳細的名稱和版本對應表可以在官方文件裡找到。

接著就可以在程式裡直接 ‘import lxml’ 匯入了。（當然要在本機上測試的話，也得先安裝好相對應的版本囉。）

（七）webapp 框架升級到 webapp2。

簡單的「Hello, World!」範例：

import webapp2

class MainPage(webapp2.RequestHandler):
    def get(self):
        self.response.headers['Content-Type'] = 'text/plain'
        self.response.out.write('Hello, WebApp World!')

app = webapp2.WSGIApplication([('/', MainPage)])
]]> http://akr.tw/2011/11/google-app-engine-sdk-160/feed/ 0 CSS Reset 的另一種選擇－Normalize CSS http://akr.tw/2011/08/normalize-css/ http://akr.tw/2011/08/normalize-css/#comments Thu, 18 Aug 2011 15:25:41 +0000 akira http://akr.tw/?p=50 一般在網頁設計時，都會使用 CSS Reset 來清除各種瀏覽器的預設樣式，接著再設定想要的樣式時就會排除掉很多在不同瀏覽器上詭異的情況。

而現在，除了以往常見 Eric Meyer 版本、YUI 版本的 CSS Reset 之外，還有另一種選擇－ Normalize CSS

Normalize CSS 和 CSS Reset 最大的不同在於，CSS Reset 是清除所有預設的樣式；而 Normalize CSS 則是賦予各種 HTML 元素一個預設的樣式，譬如 <h1>、<h2>、<h3> 等標題字型大小、<ul> 的預設該有的 padding 等等。也增加了一些可用性（如在 <button> 元素上游標會變成手指狀，告訴使用者可以按）。有了這些預設的樣式，在寫我們自己的 CSS 時，可以減少許多屬性設定。

另外 Normalize CSS 是針對 HTML5 的 CSS 框架，所以支援 HTML5 中新的標籤，包括 video、canvas 等等。如果要做 HTML5 的網頁的話，會非常方便。Normalize CSS 的專案頁面上提供了一個 Demo 的網頁。可以看看各種元素經過 Normalize CSS 標準化之後的模樣。

Normalize CSS on GitHub：https://github.com/necolas/normalize.css/
CSS 檔案：https://github.com/necolas/normalize.css/blob/master/normalize.css

]]> http://akr.tw/2011/08/normalize-css/feed/ 0 在 WordPress 的管理列上顯示頁面產生時間等資訊 http://akr.tw/2011/08/display-performance-in-wp-admin-bar/ http://akr.tw/2011/08/display-performance-in-wp-admin-bar/#comments Wed, 17 Aug 2011 15:14:42 +0000 akira http://akr.tw/?p=46 在 WordPress 的工具列（網站管理員登入之後最上面那條黑黑的）上， 顯示網頁的資料庫查詢次數、頁面產生時間、記憶體使用狀態等資訊。

在 WordPress 的管理列上顯示頁面產生時間等資訊

在佈景主題裡的 functions.php 裡加入這個函數。

function display_performance_admin_bar() {
    global $wp_admin_bar;

    // 只對網站管理員顯示。
    if ( !is_super_admin() || !is_admin_bar_showing() )
        return;

    // 取得資料庫查詢次數、頁面產生時間、記憶體使用狀態。
    $status = sprintf(
        '&lt;strong&gt;%d&lt;/strong&gt; queries | &lt;strong&gt;%.2f&lt;/strong&gt; seconds | &lt;strong&gt;%.2fMB&lt;/strong&gt; memory',
        get_num_queries(),
        timer_stop( 0, 3 ),
        memory_get_peak_usage() / 1024 / 1024
    );

    // 新增到管理列上。
    $wp_admin_bar->add_menu( array(
        'id' => 'status',
        'title' => $status,
        'href' => false,
    ) );
}
add_action( 'admin_bar_menu', 'display_performance_admin_bar', 1000 );

當然也可以運用這個函數，讓這些資訊顯示在其他地方，不過我是認為一般使用者不太需要知道這些資訊，所以就放在只有管理員能看到的工具列上。

]]> http://akr.tw/2011/08/display-performance-in-wp-admin-bar/feed/ 3 【Greasemonkey 腳本】Google Light Navbar 自訂Google導覽列顏色 http://akr.tw/2011/06/greasemonkey-google-light-navbar/ http://akr.tw/2011/06/greasemonkey-google-light-navbar/#comments Wed, 29 Jun 2011 12:51:01 +0000 akira http://akr.tw/?p=43 最近 Google 的改版，讓原先雪白的 Google 頁面上多出了條黑色的導覽列，在網路上也引起不少討論。有人認為好看，有人拚命想改回白色。於是就試著寫了個把導覽列修改回舊式白色的 GM 腳本…

安裝

安裝腳本：http://userscripts.org/scripts/show/105735（點選右上方綠色的［Install］安裝。）

說明

Google Light Navbar

原先的功能很簡單，就是把黑底變白底而已，不過後來想想，Google 的新介面遲早都是要適應的，屆時這腳本就無用了，所以幾個小時後延伸出讓使用者自訂顏色的功能。 只要點擊右上方的小齒輪就可以自訂三種顏色（背景、前景文字、邊框和淺色底）。而且除了 Firefox 之外，Google Chrome、Opera 也可以直接使用。

PS. 其實我覺得新版黑色介面蠻好看的…。

補注

Google 即將要釋出新樣式的 Google Bar（參考以下的介紹影片），因此這個腳本也即將無用武之地了…。

]]> http://akr.tw/2011/06/greasemonkey-google-light-navbar/feed/ 5 美少女生日貼紙 http://akr.tw/2010/06/girls-birthday/ http://akr.tw/2010/06/girls-birthday/#comments Sun, 13 Jun 2010 11:36:11 +0000 akira http://akr.tw/?p=31 2011/12 – 由於 Google App Engine 更改計費模式，免費的流量額度已無法負荷，因此關閉該網站。

【美少女生日貼紙】http://girls-birthday.appspot.com/

說明

可張貼在個人部落格側欄、論壇簽名檔的圖片型小貼紙，自動顯示生日倒數天數並且每天更新。

其實之前就寫過一模一樣的東西了，只不過是放在自己的伺服器上。舊版雖然只開放在私設上面使用，但是流量對於小伺服器來說真是個沉重的負擔，只好限制每小時的 request 次數，所以常常會看到破圖的現象，那是正常的。

後來發現 Google App Engine 這東西，也有相對應的 Image API 可用，索性來研究一下如何「移植」到 GAE 上。

說是移植，但是 GAE 目前還不能跑 PHP（可以的話就不用這麼累了…），其實是整個砍掉重練用 Python 重寫過一遍，最大的難題是 GAE 上的 Image API 不支援 PIL 的 DrawString，也就是在圖上繪出文字，最後解決之道是把所有文字部分做成 PNG 圖檔再加在底圖上…（感謝 GAE 有支援全彩 PNG 的透明背景…）。

總之大致上是完工了，新版的也多做了一個入口頁面，直接複製 HTML 或 BBCode 就可以了，也可貼在任何網站上（希望流量夠用…）。

更新紀錄

2010/7/27 更新

貼紙的背景顏色按照不同的團體分色，也補上了 AKB48 研究生和 SKE48。

2010/9/8 更新

加上了意見回報功能。

2010/9/20 更新

應要求新增了 AKB48 研究生、SKE48 Team KII 成員。另外新增的「早安家族前成員」類別，替龜純琳的畢業預留空間。 不過流量快達到上限了…。

2011/2/23 更新

新增 RSS Feed。能訂閱最近的 Changelog。 另外流量吃緊，近期要來改寫了。

2011/4/6

大改。更新貼紙式樣和快取設定。

]]> http://akr.tw/2010/06/girls-birthday/feed/ 16 如何使用PC參與AKB48總選舉投票活動 http://akr.tw/2010/05/akb48-sousenkyo-pc/ http://akr.tw/2010/05/akb48-sousenkyo-pc/#comments Sun, 30 May 2010 10:17:15 +0000 akira http://akr.tw/blog/2010/05/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8pc%e5%8f%83%e8%88%87akb48%e7%b8%bd%e9%81%b8%e8%88%89%e6%8a%95%e7%a5%a8%e6%b4%bb%e5%8b%95/ 註：自 2010 年起 PC 也能直接投票，本篇方式已不適用。

AKB48 17th 單曲總選舉開始了～，這裡介紹如何使用電腦就可以投票的方法。 是說在這裡寫 IDOL 文章還真跳 TONE… 算了w

要做的事情很簡單，就是把電腦偽裝成手機，進入網站去投票這樣。

首先需要的是 Firefox 瀏覽器，可以到 Firefox 網站（http://moztw.org/firefox/）下載。 下載 Firefox

再來要下載 User Agent Switcher 這個擴充套件。下載網址：https://addons.mozilla.org/zh-TW/firefox/addon/59/。 下載 User Agent Switcher

（雖然這裡是用 Firefox，不過像 Google Chrome 等瀏覽器都有類似 User-Agent 的外掛可以用，照理說也是可以如法泡製，不過我沒測試過就是了ｗ）

接下來是最重要的關鍵，要把瀏覽器偽裝成手機。安裝好擴充套件之後，點選 Firefox 的「工具」→「Default User Agent」→「iPhone 3.0」。 設定 User Agent

搞定！開始投票吧！

AKB48 總選舉網站：http://www.akb48-sousenkyo.jp/。點進去就會看到這個畫面↓ 紅框框點進去吧 AKB48總選舉

基本上投票就是滑鼠點一點就好…

上面輸入 CD 裡頭投票券上的數字編號，然後下面打上圖形認證碼 AKB48總選舉

開始選人吧 AKB48總選舉

AKB48總選舉

確定好了就按「投票」，這邊按下去之後，就不能改了 AKB48總選舉 （請不要問我為什麼上面是 Team A，這邊投給板野…）

最後要回答一些問卷問題，依序是年紀、性別、居住地（沒有海外的選項，就…隨便吧）、會參加的握手會場次（基本上也是沒差） AKB48總選舉

投完了，就這樣～。 AKB48總選舉

]]> http://akr.tw/2010/05/akb48-sousenkyo-pc/feed/ 1 【Greasemonkey 腳本】AmePlus（2011/8/24更新） http://akr.tw/2010/04/greasemonkey-ameba-plus/ http://akr.tw/2010/04/greasemonkey-ameba-plus/#comments Tue, 13 Apr 2010 10:38:36 +0000 akira http://akr.tw/blog/?p=28 針對 Ameba、GREE、スタ☆ブロ等日系部落格設計的 Greasemonkey 使用者腳本。

安裝

安裝腳本：http://userscripts.org/scripts/show/103350（點選右上方綠色的［Install］安裝。）

現在的功能

  • 在相簿模式瀏覽部落格相片。
  • 放大、翻轉、上傳、在新視窗開啟相片。
  • 快速拉至留言框。
  • 分享部落格頁面到 Twitter、Google+ 等社群網站。
  • 自動檢查新文章通知。只要開著部落格網頁（任何一頁都可以，不一定要是首頁），每5分鐘會自動check一次新文章。
  • 上一遍、下一篇頁面切換。

功能列

AmePlus Toolbar

關於

AmePlus Information Dialog

燈箱相簿模式

AmePlus Gallery Mode

社群網站分享

AmePlus SNS Share Dialog

新文章更新提示

AmePlus Update Notification

更新紀錄

2011/8/24

  • 1.5 版更新。
  • 修正 Google Chrome 的 Bug。
  • 增加頁面導覽功能。
  • 增加部落格更新通知。

2011/8/22

  • 1.4 版更新。
  • 重建程式碼。
  • 增加相片翻轉功能。

2011/7/28

  • 1.3 版更新。
  • 支援 yaplog!。

2011/7/9

  • 1.2 版更新。

2011/6/15

  • 新增上傳圖片至 imgur.com 功能。

2011/5/23

  • 上傳至 userscripts.org。
  • 使用 GNU GPL v3 license。
  • 在每張圖片下顯示原始圖片網址。
  • 在原始圖片上點兩下可以在新視窗開啟。
  • 移除複製文章內文的功能。

2011/5/9

  • 支援スタ☆ブロ的原始大圖顯示。
  • 修正第二次按下文章內顯示圖片連結時的錯誤。

2011/3/8

  • 新增取得標題橫幅圖片的功能。
  • 新增一鍵跳到留言框（Ameba 和スタ☆ブロ）。
  • 新增 Facebook 的說讚按鈕。

2010/6/4

  • 新增支援 GREE 和 ORICON 的スタ☆ブロ。

2010/4/24

  • 自動瀏覽改成 Ajax，不會卡住了。
  • 加了一些陰影效果
  • Javascript Compressed.

2010/4/15

  • 新增上一頁、下一頁。
  • 新增 顯示文章內所有大圖。
  • 新增 直接推文到 Facebook、Twitter、Plurk。
  • 修正 同一頁有多篇文章的時候可以一起複製內文。

有新功能的建議或錯誤回報歡迎留言告知。

]]> http://akr.tw/2010/04/greasemonkey-ameba-plus/feed/ 8