Zespia

HTML5 audio實驗

2012-02-04T13:29:00+08:00

寒假即將結束，不巧膝蓋突然中了一箭，便決定實驗HTML5 audio標籤的效果，雖然已有jPlayer這款輕便好用的播放器，但不折騰一下就沒辦法消磨時間了，所以本次的實驗品完全由我操刀。

開始之前

首先必須了解audio標籤的使用方式：

<audio controls>
  <source src="music.mp3">
  <source src="music.ogg">
</audio>

輸入以上代碼後，便可在網頁中看到瀏覽器內建的播放器。每種瀏覽器支援的播放類型不一，最保險的方法是備妥mp3、ogg。

為了浪費時間，當然不可能用瀏覽器的預設介面，所以刪除controls屬性，透過JavaScript操作：

var audio = document.getElementsByTagName('audio')[0];
// 播放
audio.play();
// 暫停
audio.pause();

只需要懂這兩個函數，就可製作最基礎的播放器了，其他複雜的指令可參閱文末的參考出處。

介面

寫網頁時，比起最重要的JavaScript，我習慣先寫CSS，最初的參考範本是Mac的CoverFlow。

經過一連串絞盡腦汁，寫了一堆亂七八糟的CSS之後，成品如下。

無論是倒影、中間的圓圈進度表都與CoverFlow非常相像，但這種樣式實在 ~~太麻煩了~~ 不便使用者操作，所以從Premium Pixels偷點子過來，稍微加油添醋一下，完成了播放器介面Ver. 2。

核心

介面完成自爽一下之後，就得面對麻煩的JavaScript了，播放、暫停非常簡單，按鈕按下去執行鄉對應的動作即可，然而音量調整與進度條該如何處理呢？

雖然本次的重點是消磨時間，但再去造一個輪子實在他媽的太累了，於是 ~~聰明如我~~ 請到了jQuery UI，Slider功能壓縮後需要約20KB的空間，有點龐大不過方便就好。

時間的控制方式如下，單位為秒數，例如跳至第100秒的位置：

audio.currentTime = 100;

音量的控制方式如下，範圍為0~1，例如將音量調整至一半大小：

audio.volume = 0.5;

audio可綁定play, pause, ended, progress, canplay, timeupdate等事件。play與pause如字面上意思，分別為播放、暫停後生效。

audio.addEventListener('play', function(){
  play.title = 'pause';
}, false);

audio.addEventListener('pause', function(){
  play.title = 'play';
}, false);

ended為結束後生效，當音樂結束後，可透過此事件讓時間歸零。

audio.addEventListener('ended', function(){
  this.currentTime = 0;
}, false);

當音樂檔案開始載入後，便會啟動progress事件，可透過此事件監測下載進度。Firefox可能會發生問題，建議搭配durationchange事件使用。

audio.addEventListener('progress', function(){
  var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
  buffer.style.width = (100 / (this.duration || 1) * endVal) + '%';
}, false);

當音樂下載到一定程度後，canplay事件便會生效，一般會透過此事件初始化播放器。相同類型的事件還有很多，依照啟動順序分別為：loadstart, durationchange, loadeddata, progress, canplay, canplaythrough。

timeupdate會在音樂播放時不斷生效，可透過此事件更新時間。

audio.addEventListener('timeupdate', function(){
  progress.style.width = (this.currentTime / this.duration) * 100 + '%';
}, false);

播放列表

一個播放器的基礎功能就此完成，能夠播放、暫停、調整音量、調整時間。但這顯然還不夠，播放列表對於播放器而言相當重要。（大概啦）

與自己的邏輯奮戰大約一晚後，有播放列表、隨機播放、重複播放（單首、全部）功能的播放器於焉完成。只需要214行、約6KB的代碼（未壓縮）即可完成，應該能算是輕便簡易了。

後記

播放列表的製作過程有點髒，中途還重構了幾次，所以直接看範例應該會比較快，若對於範例內的程式碼感到疑惑，可在下方留言。

範例內已設定了一些參數，可在js/script.js內更改。第5行的continous參數為連續播放，第6行的autoplay參數為自動播放，第7行的playlist陣列請自行設定，壓縮檔內不會附帶範例內的音樂檔案。playlist陣列的格式如下：

var playlist = [
  {
      title: 'Tell Your World',
      artist: 'livetune feat.初音ミク',
      album: 'Tell Your World',
      cover: 'cover/tell_your_world.jpg',
      mp3: 'music/tell_your_world.mp3',
      ogg: 'music/tell_your_world.ogg'
  }
];

title為標題，artist為演出者，album為專輯名稱，cover為專輯封面的路徑，mp3、ogg分別為音樂檔案的路徑，建議備妥兩種格式的檔案，~~要不然Firefox和Opera不就只能去死了嗎？~~

因為做到最後頭腦快爆炸了，懶得做Flash fallback，~~IE請去死一死吧。~~

範例｜下載

參考出處

Slash — 專為 Octopress 設計的極簡主題

2012-01-25T16:27:00+08:00

Octopress雖然預設主題相當漂亮，支援眾多HTML5的新特性，但每個網誌都是同一個主題，令人有些厭煩。在決定轉移到Octopress的第一刻起，我就開始著手設計適用於Octopress的主題，在今天終於把檔案整理完畢，集合成一個獨立的repo。

做為一個Octopress主題，當然不能輸給原本的預設主題，Slash擁有以下特性：

自動讀取圖片的alt屬性，並在圖片下方顯示註解。
內建Fancybox，讓您輕鬆展示您的作品。
自動將HTML5 video、iframe、object等嵌入式影片縮放至頁面寬度。
支援responsive layouts，無論電腦、手機、平板都能獲得極佳的使用體驗。
更多介紹…

安裝

只需在終端機輸入以下指令，即可完成安裝：

$ cd octopress
$ git clone git@github.com:tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

使用zsh時發生問題嗎？試試看rake install\['slash'\]。

Q&A

如何顯示右上角的Facebook連結？

在_config.yml新增facebook_user參數，並填入您的Facebook ID。

如何編輯選單？

編輯slash→source→_includes→custom→navigation.html。

如何隱藏頁首的Twitter訊息串？

刪除slash→source→_layouts→default.html的第6行。

如何關閉Fancybox？

刪除slash→source→_includes→after_footer.html的第4行。
刪除slash→source→javascripts→caption.js第14行。

如果還有其他問題或建議，歡迎在以下留言。

如何利用CSS製作多級選單？

2012-01-24T00:00:00+08:00

選單常見於我們的生活當中，通常用於整理一系列的指令，簡化複雜的程序，使介面看起來更加友善。當應用程式愈複雜，功能愈多時，通常會利用多級選單將類似的指令組織成一個子選單。

一般網頁常見到二級選單，利用CSS即可達成，有些會透過JavaScript增加更多效果，例如動畫、延遲等。多級選單一般常使用JavaScript達成，不過透過CSS也能做出簡單的多級選單。

HTML

<nav>
  <ul>
      <li><a href="">選單 1</a></li>
      <li>
          <a href="">選單 2</a>
          <ul>
              <li>
                  <a href="">選單 2-1</a>
                  <ul>
                      <li><a href="">選單 2-1-1</a></li>
                      <li><a href="">選單 2-1-2</a></li>
                  </ul>
              </li>
              <li><a href="">選單 2-2</a></li>
              <li><a href="">選單 2-3</a></li>
          </ul>
      </li>
      <li><a href="">選單 3</a></li>
      <li><a href="">選單 4</a></li>
  </ul>
</nav>

選單的HTML如上，所有的選單物件都是可點選的連結，理論上無限層級。

CSS

ul li {
  position: relative; /* 使子選單依照母選單的座標顯示 */
}
/* 設定母選單的連結樣式 */
ul li a{
  background: url(detail.png);
}
/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏detail.png */
ul li a:only-child{
  background: none;
}
ul li:hover > ul {
  display: block; /* 滑鼠滑入母選單後，顯示子選單 */
}
/* 二級選單顯示於一級選單的正下方 */
ul ul {
  position: absolute;
  top: 100%;
  list-style: none;
  display: none;
}
/* 三級選單則顯示於二級選單的右方 */
ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

這樣就完成了所有步驟，不需要繁複的JavaScript，是不是很簡單呢？

範例｜下載

後記

寫到最後反而發現詞窮，看來我真不是寫文章的料。總而言之，這是「大概很簡單」教學系列的第二彈，感謝你的收看！

如何利用jQuery製作頁籤？

2012-01-21T18:10:00+08:00

最近花了一週的時間，終於完成Octopress的佈景主題，並搬移舊站（zespia.twbbs.org）的文章及留言，發現自已以前的文章實在有夠中二，看得連自己都想揍螢幕，於是偷偷撤下了部分文章。

為了慶祝新站落成，便決定寫一篇超級簡易（大概啦）的jQuery頁籤製作教學，~~懷著感恩的心看吧！~~

本文以jQuery 1.7.1為例。

基礎

HTML

<ul id="tabs">
  <li class="enable">頁籤 1</li>
  <li>頁籤 2</li>
  <li>頁籤 3</li>
  <li>頁籤 4</li>
</ul>
<div id="contents">
  <div>頁籤 1 的內容</div>
  <div>頁籤 2 的內容</div>
  <div>頁籤 3 的內容</div>
  <div>頁籤 4 的內容</div>
</div>

以ul#tabs當作標籤，而#contents內則是頁籤內容。我盡可能簡化HTML中不必要的欄位，其他功能都將在JS中實現。

CSS

#tabs li{
  background: #ddd;
  border: 1px solid #ccc;
  border-bottom: none;
  display: inline-block;
  margin-right: 5px;
  padding: 5px 10px;
  color: #999;
  cursor: pointer;
}
#tabs li:hover{
  color: #666;
}
#tabs li.enable{
  border-bottom: 1px solid #ddd;
  margin-bottom: -1px;
  color: #333;
}
#contents{
  background: #ddd;
  border: 1px solid #ccc;
  box-shadow: 0 0 16px #ccc;
}
#contents > div{
  display: none;
  text-align: justify;
  padding: 10px 15px;
}
#contents > div:first-of-type{
  display: block;
}

JS

(function($){
  // 用each遍歷頁籤
  $('#tabs li').each(function(i){
      var _i = i;

      // 綁定click事件到頁籤上，若要改為滑鼠移入切換頁籤的話，將click改為mouseenter
      $(this).click(function(){
          // 移除其他頁籤的class，並將class新增至所選頁籤
          $(this).parent().children().removeClass('enable').eq(_i).addClass('enable');
          // 隱藏其他頁籤的內容，並顯示所選頁籤的內容
          $('#contents').children('div').hide().eq(_i).show();
      });
  });
})(jQuery);

首先透過each遍歷所有頁籤（#tabs li），並在所有頁籤上綁定事件。

當事件觸發時，移除其它頁籤的class，隱藏其他頁籤的內容，並將class新增至所選頁籤，顯示所選頁籤的內容。

建議把JS放在頁尾（footer），可使頁面載入完成後才載入JS，避免出現錯誤。

範例｜下載

進階

只有單純的顯示隱藏似乎太無趣了？那就加點動畫吧！只要稍微變更基礎結構，就能讓頁籤看起來更加華麗！

HTML

<ul id="tabs">
  <li class="enable">頁籤 1</li>
  <li>頁籤 2</li>
  <li>頁籤 3</li>
  <li>頁籤 4</li>
</ul>
<div id="container">
  <div id="contents">
      <div>頁籤 1 的內容</div>
      <div>頁籤 2 的內容</div>
      <div>頁籤 3 的內容</div>
      <div>頁籤 4 的內容</div>
  </div>
</div>

進階篇的HTML結構與基礎篇只有一點小差別，僅在原本的#contents的區塊外又包了一層#container。

CSS

#tabs{
  position: relative;
  z-index: 1;
}
#tabs li{
  background: #ddd;
  border: 1px solid #ccc;
  border-bottom: none;
  display: inline-block;
  margin-right: 5px;
  padding: 5px 10px;
  color: #999;
  cursor: pointer;
}
#tabs li:hover{
  color: #666;
}
#tabs li.enable{
  border-bottom: 1px solid #ddd;
  margin-bottom: -1px;
  color: #333;
}
#container{
  background: #ddd;
  border: 1px solid #ccc;
  box-shadow: 0 0 16px #ccc;
  width: 500px;
  position: relative;
  overflow: hidden;
}
#contents{
  position: absolute;
  left: 0;
  width: 2000px; /* 內容寬度 * 頁籤數 */
}
#contents > div{
  padding: 10px 15px;
  text-align: justify;
  float: left;
  width: 470px; /* 內容寬度 - 左右padding */
}

#contents改為absolute（絕對定位），並設定寬度為「內容寬度 × 頁籤數量」。#contents內的div別忘了加上float: left;，如此一來頁籤內容才會排成一橫列，將寬度設為「內容寬度－左右padding」。

進階篇若少了JS的輔助，則無法正常顯示，除非事先設定#container的高度。

JS

(function($){
  var trigger = false;

  // 使內容高度等於第一頁籤內容高度 + 上下padding
  $('#container').css('height', $('#contents div').eq(0).height() + 20);

  // 用each遍歷頁籤
  var tabs = $('#tabs li').each(function(i){
      var _i = i;

      // 為每個頁籤新增tabid屬性
      // 綁定click事件到頁籤上，若要改為滑鼠移入切換頁籤的話，將click改為mouseenter
      $(this).attr('tabid', i).click(function(){
          // 當trigger為false時才作用，避免重複點按造成瀏覽器crash
          if (trigger == false){
              // 取得目前的tabid，以計算動畫的間距值（內容寬度 * 頁籤間距）
              var now = parseInt($(this).parent().children('.enable').attr('tabid')),
                  gap = 500 * (_i - now);
                  trigger = true;

              // 移除其他頁籤的class，並將class新增至目前頁籤
              $(this).parent().children().removeClass('enable').eq(_i).addClass('enable');
              // 使內容移動一定間距
              $('#contents').animate({left: '-='+gap}, 500);
              // 使內容高度符合所選頁籤內容的高度（所選頁籤內容高度 + 上下padding），動畫全部結束後，使trigger值返回false
              $('#container').animate({height: $('#contents').children().eq(_i).height() + 20}, 500, function(){
                  trigger = false;
              });
          }
      });
  });
})(jQuery);

原理與基礎篇有些差別，必須在頁籤上新增tabid屬性，不過透過JS代勞即可。

首先使#container的高度符合第一頁籤的高度，接著同樣遍歷所有頁籤（#tabs li），在所有頁籤上新增tabid屬性，順便綁定事件。

當事件觸發時，確認使用者是否正在操作頁籤（trigger == false），若頁籤操作速度過於頻繁，可能會使得動畫錯亂。接著計算動畫間距，使內容依照間距左右移動，並使其高度符合所選頁籤內容的高度。

當動畫全部結束後，返回trigger = false，讓使用者能夠再度操作頁籤。

如此一來，平凡樸素的頁籤便多了左右滑動的動畫，如果想要更加華麗的話，可以使用jQuery Easing Plugin。

範例｜下載

後記

最後的成果如上圖，當然細部的樣式、動畫請自行設定。希望這篇文章簡單易懂（？）的文章能夠幫助到你。最近預計再寫一篇CSS Only的多級選單教學，請拭目以待吧！

Hello Octopress!

2012-01-14T15:52:00+08:00

ACSite的空間即將在2012/1/31到期，而我又懶得續約，這時看到愈來愈多部落客都從WordPress轉移到Octopress，便開始試用Octopress。

Octopress與WordPress同樣身為部落格系統，卻有相當大的不同：

WordPress：
- PHP
- 動態網頁
- 外掛多樣
- 速度慢
- 使用簡單
Octopress：
- Ruby
- 靜態網頁
- 剛起步，外掛還很少
- 速度快
- geek才會用

以下將簡單介紹Octopress的安裝與使用。

安裝

Ruby

Octopress的安裝非常簡單，首先你需要準備Ruby的環境，以下以Mac為示範：

請務必照著步驟做。

1.安裝Xcode（建議使用4.1版），或直接安裝OSX GCC Installer。

2.安裝Homebrew

$ ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"
$ brew update

3.安裝Git

$ brew install git

別忘了Mac上有SourceTree和GitX這兩套不錯的Git GUI可以使用！

4.安裝MySQL

5.安裝RVM

$ bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)
$ echo "[[ -s $HOME/.rvm/scripts/rvm ]] && source $HOME/.rvm/scripts/rvm" >> ~/.profile $ . ~/.profile
$ source ~/.profile

6.安裝Ruby（Octopress要求使用1.9.2版）

$ rvm install 1.9.2
$ rvm 1.9.2 --default

若是安裝失敗的話，請試著使用以下方式安裝：

$ rvm remove 1.9.2
$ export CC=/usr/bin/gcc-4.2
$ brew install readline
$ brew link readline
$ rvm install 1.9.2 --with-readline-dir=$rvm_path/usr

7.安裝Pow

$ curl get.pow.cx | sh

（以上安裝步驟參考自我這樣安裝Rails - 佑樣の技術筆記）

Octopress

到目前為止，只不過安裝好Ruby罷了，接著才是重頭戲──Octopress登場！

1.安裝rbenv

$ brew install rbenv
$ brew install ruby-build

2.下載Octopress

$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

3.安裝相關套件

$ gem install bundler
$ rbenv rehash
$ bundle install

4.安裝預設佈景主題

$ rake install

如此一來就安裝好Octopress了，你可以輸入rake preview從localhost:4000預覽，或是透過Pow預覽：

$ cd ~/.pow
$ ln -s /path-to-octopress

發佈

1.在GitHub建立名為http://yourname.github.com的repository，yourname必須與你的使用者名稱相同，否則會建立專案頁面。

2.設定GitHub資料，並依照指示輸入GitHub頁面的repository網址。

$ rake setup_github_pages

3.建立網誌資料

$ rake generate

4.發佈至GitHub

$ rake deploy

5.建立commit

$ git add .
$ git commit -m 'your message'
$ git push origin source

過幾分鐘後GitHub就會寄信通知你專業建立完成，連上yourname.github.com就能見到你的Octopress囉！

若要進一步設定，請編輯Octopress根目錄中的_config.yml。

自定網域

在source/CNAME輸入網域名稱

$ echo 'your-domain.com' >> source/CNAME

若網域名稱如www.example.com，只需要新增CNAME記錄yourname.github.com即可；若如example.com，則必須加入A記錄207.97.227.245，請勿使用CNAME記錄。

（以上安裝步驟參考自Octopress Documentation）

寫作

雖然安裝看起來很麻煩，不過寫作文章相當簡單！

文章

$ rake new_post['title']

輸入以上代碼後，就可在source/_posts見到yyyy-mm-dd-title.markdown格式的文件，以及以下內容：

---
layout: post
title: "Post Title"
date: 2012-01-14 15:52
comments: true
categories:
---

你可透過以下幾種方式來編輯分類：

# 單一分類
categories: Sass

# 多重分類 (1)
categories: [CSS3, Sass, Media Queries]

# 多重分類 (2)
categories:
- CSS3
- Sass
- Media Queries

Octopress完整支援Markdown語法，另外可利用達成「詳閱全文」的效果。

分頁

# 一般分頁  
$ rake new_page[your-page]

# 子分頁
$ rake new_page[your-page/sub-page.html]

輸入以上代碼後，就可在source/your-page中見到index.markdown，以及以下內容：

---
layout: page
title: "Page Title"
date: 2012-01-14 15:52
comments: true
sharing: true
footer: true    
---

操作方法與文章大同小異，同樣完整支援Markdown語法。

建立

輸入rake generate即可建立文章或分頁，輸入rake deploy就會將文章pull到GitHub上。

結論

經過這幾天的試用結果，老實說Octopress實在有夠難用，沒有如WordPress的強大管理介面，所有操作（包括新增文章、分頁）都必須透過終端；然而撰寫文章比WordPress快多了，不需忍耐WordPress慢吞吞的編輯器，在local用Markdown寫完就能直接deploy到GitHub上。

如果你是個geek，Octopress或許是不錯的選擇；如果不是的話，請繼續使用WordPress吧！

Google+ Motionless & Filter

2011-09-17T00:00:00+08:00

最近課業繁重，無法抽出時間撰寫網誌，於是 ~~寫這篇文章來騙人氣~~ 再介紹一次之前寫的2個Google+腳本。上圖與本文毫無關係，純粹是在Pixiv上隨便抓一張圖片而已。

Google+ Motionless

看圖、影片或閱讀文章時，因為訊息串的快速更新，常會使畫面不斷上下抽動，不只妨礙視覺，有時還會誤按連結，因此當做練功寫了這個腳本，並於1.0.4版新增「自動載入下頁」功能。

下載（Ver. 1.0.4）

Google+ Fxxking Filter

「樹大必有枯枝，人多必有白痴」，有時在訊息串上會看到令人很不爽的發言，透過這腳本可以將不想看到的訊息過濾，還給使用者一片乾淨的訊息串。

下載（Ver. 1.0.1）

HTML5 Storage的使用彙整

2011-08-04T18:01:00+08:00

當初寫Google+ Hover Zoom這腳本時，壓根沒想過可以用Greasemonkey內建的參數來儲存資料，於是就選用HTML5的Storage功能來儲存資料，然而此功能僅能儲存字串（String），讓我花了好些時間上網找資料才能掌握此功能的使用方式。

Storage的功能基本上與cookie大致相同，然而儲存空間比cookie大多了，cookie僅有4KB的空間，Storage卻有5MB的空間，讓開發者能夠好好善用。此功能的使用方式非常簡單，分為：Local Storage與Session Storage，顧名思義，兩者都是將資料儲存於用戶端的功能，然而前者能儲存的時間較長，直到使用者清除快取前都不會被刪除，而後者在使用者關閉分頁後資料就會被刪除；兩者的使用方式完全相同，以下皆以Local Storage作為示範。

下文皆使用jQuery 1.7.1。~~（因為我只會jQuery）~~

基礎

設定資料

以下三種方式擇一即可，下文亦同。

localStorage['test'] = testValue;
localStorage.setItem('test', testValue);
localStorage.test = testValue;

取得資料

localStorage['test'];
localStorage.getItem('test');
localStorage.test;

刪除資料

localStorage.removeItem('test');

資料全部清除

localStorage.clear();

勾選框（checkbox）

設定資料

由於Storage僅支援字串，必須使用toString()函數，將Boolean值轉為字串才可儲存。

localStorage['test'] = $('#test').prop('checked').toString();

// 若jQuery版本低於1.6
localStorage['test'] = $('#test').attr('checked').toString();

取得資料

使用===判斷資料。

if ( localStorage['test'] === 'true' ) {
    // Do something
}

下拉式選單（select）

設定資料

取得選單中:selected的值，並儲存即可。

localStorage['test'] = $('#test').find(':selected').val();

陣列（array）

設定資料

陣列大概是讓我最頭痛的部份，同前文所述，Storage僅支援字串，所以必須先以特殊的分隔符號來隔開每個元素。（如|, $, ;等符號，隨你喜歡）

如果你在下面的陣列中看到德文，那只是我突然中二病發作而已，~~如果你看得懂的話代表你也是個廚二~~。

// 一維陣列
var storage = ['one', 'two', 'three', 'four'];
localStorage['test'] = storage.join('|||');

// 二維陣列（多維陣列亦同）
var storage = {['one', 'eins'], ['two', 'zwei'], ['three', 'drew'], ['four', 'vier']};
for (var i=0; i<storage.length; i++){
  storage[i] = storage[i].join(';');
}
localStorage['test'] = storage.join('|||');

取得資料

利用split函數分割字串。

// 一維陣列
var storage = localStorage['test'].split('|||');
for (var i=0; i<storage.length; i++){
  // do something
}

// 二維陣列（多維陣列亦同）
var storage = localStorage['test'].split('|||');
for (var i=0; i<storage.length; i++){
  var item = storage[i].split(';');
  for (var j=0; j<item.length; j++){
      // do something
  }
}

後記

最近因為課業繁忙，網誌都放著生灰超過一個月了，於是心血來潮將最近寫腳本的心得寫成文章，可能會有錯誤，請多見諒。

Google+ Hide Comments & Hover Zoom

2011-07-13T00:00:00+08:00

大約在兩週前，Google發表了新的社群服務「Google+」，雖然很多人都說Facebook和Google+有很大的不同，不過對我而言Google+就是個宅宅版的Facebook罷了，我懶得去分析什麼社群網站的情勢了，今天的重點也不在這裡。

雖然Google+已經發表了一段時間，針對Firefox所做的擴充元件還是很少，幾乎沒有，反倒是Chrome的擴充套件數量不斷提昇，因此上週六（7/9）我吃飽太閒試著用jQuery寫了生平第一個瀏覽器腳本「Google+ Hide Comments」，一個行數不到40行的簡單腳本，本來想試著研究Firefox擴充套件，但最後太複雜還要先裝一堆擴充套件於是作罷。

Google+ Hide Comments

此腳本的功能如上圖，啟用後會在每篇文章的留言後加入”Toggle comments”的連結，點擊”Toggle comments”連結可以展開、摺疊留言。

已停止更新

Google+ Hover Zoom

滑鼠移入即可顯示原圖，並能從側邊的下載按鈕直接下載原圖。很簡單的功能，不過他媽的正規表達式有夠難寫，根本天書。目前正規表達式與判斷式的問題應該都修正完畢，未來預計擴充設定頁面的功能並改善效能。

下載

我的網誌有種變成雙週刊的趨勢，每兩週才一篇新文章，明後天再發一篇Steins;Gate的文章吧。我的Google+

鍊金術士梅露露～亞蘭德的鍊金術士 3～

2011-07-01T15:44:00+08:00

當初聽到這款遊戲的發售消息時，還有點猶豫自己到底該不該買，因為同一系列的托托莉我玩了將近一個月，還是摸不熟系統，最後只得來了「BAD END」的結局，但當我回神之時，手中的滑鼠已經不自覺地按下了「訂購」連結，於是乎就有你眼前的這篇文章了。

本作襲承托托莉的True End而來。亞蘭德共和國西北方的一處小國「阿路斯王國」，是個比亞蘭德還有更多發展空間的邊境國家。在5年後，阿路斯將與亞蘭德合併，於是亞蘭德派遣了煉金術士「托托莉」，協助發展這個國家成為大都市，淘氣調皮的公主「梅露露」對煉金術產生了興趣，因此決定成為托托莉的弟子，然而遭到了父王的反對。不過父王最後還是心軟，決定給梅露露3年的時間，使這個小國的人口從100人提升到3萬人，如果達成就會繼續讓梅露露研究煉金術。

我操，你這爸爸好歹也進行一下開發吧，人口只有100人連稱為「國家」都有點困難了啊！

這代的畫面相較於前兩代又進步了一些，光影的處理做得更棒了，~~精美的3D模組也讓人感到讚嘆~~；在介面上，提供了更貼心的服務，可以直接從「開拓」和「依賴」頁面連結到調和選單，特殊的道具也做了清楚的標示。此外，這一代女主角的聲音大概是我最喜歡的，沒有前兩代過嗲的感覺。

結局

目前已解出了6種結局，獎盃進度70％：

城での生活（條件：無）
阿路斯與亞蘭德合併後，梅露露放棄了煉金術的研究，在家裡頹廢的不知道該做什麼，這或許是梅露露第一次在行動前思考吧？梅露露認為不能再這樣下去，決定為了「尋找目標」向未來邁進一步。（這怎麼有點像BAD END的感覺？）

てんやわんや（條件：人口突破10萬人）
阿路斯成為了亞蘭德國內數一數二的大都市，雖然梅露露每天工作都很忙碌，但感到相當開心。

豊かな国（條件：打倒エアトシャッター）
梅露露利用煉金知識，使阿路斯成為了亞蘭德國內的第一大農業城市。

エアトシャッター還挺好打的，然而真‧エアトシャッター的血比前者多了足足一倍，就算武器和防具升級到最高等級也打不贏，只好下一輪做出頂級飾品和藥品跟它拼了

おとこぶろ（條件：建設健康ランド）
梅露露意外的在火山發現泉源，利用煉金知識，使阿路斯成為了亞蘭德國內的溫泉觀光景點。

這結局可真麻煩，必須要有足夠的時間和インゴット才有辦法達到，光是收集就要花一個月，煉成就要花兩～三個月的時間，幸好中途的福利還挺不錯的，這就是所謂的CERO A嗎～

人気者の今日（條件：每位角色的好感度大於80）
與每位朋友的好感度大於80。~~梅露露成功建立後宮。~~

托托莉x咪咪太棒了！諸君，我愛百合！我愛百合！

やっと計画通り（條件：作成「若返りの薬」且煉金等級小於50）
雖然成功作成了返老還童藥，然而蘿樂娜卻因師匠的私心而停留在14歲，且14歲後的記憶完全消失。

可惡的GUST啊！明明某個40歲歐巴桑看起來還這麼年輕，30歲的蘿樂娜又會差多少呢！（被雙刀砍死）

連結

全CG 下載｜相簿
 メルルのアトリエ～アーランドの錬金術士3～攻略Wiki – Lostgamer

Corner 1.0 正式版推出！

2011-05-27T00:00:00+08:00

日前在法雅客時，碰巧看到了展示中的Windows Phone 7，雖然我個人不是很喜歡微軟，不過WP7看來真的擺脫了前代的束縛，順暢又簡潔的介面不輸iPhone。於是我便想依照WP7的風格來設計一個佈景主題，起初還摸不著頭緒，直到開學之後才突然靈感迸發，果然人類都必須直到開學後才會開始努力嗎…orz。

這次相較於Pixiv Custom，大幅簡化了部分語法，本來也想試著嘗試簡化後者的語法，不過之前我做得太混亂了，連我都有點看不懂XD，於是便放棄了。

此佈景支援WordPress 3.0功能，「自定選單」以及「自定背景」，可支援Banner聯播，只需將「700x200px」的圖片放入/headers資料夾內，頁面重新整理時便會隨機顯示圖片。1.0正式版已新增以下功能：

AJAX頁面導覽
分享按鈕
留言功能按鈕提示
重新改版佈景設定頁面

瀏覽器支援

完整支援 Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer 8，但 Internet Explorer 7&6 有部分留言列表問題。

下載

正式版 (Ver. 1.0.9)
預覽

更新記錄

1.0.9
- 修改 - 修復圖片與文字中沒有留白的問題
- 修改 - 將$content_width更改為660
- 修改 - 修復後台重設按鈕的問題
- 移除 - 分頁中「留言已停用」的提示
1.0.8
- 修改 – 使用Settings API完成較安全的後台頁面
1.0.7
- 修改 – 修復文章浮動（float）問題
- 修改 – 變更背景圖片以符合較大的螢幕解析度
- 移除 – 因為WordPress 3.0內建automatic_feed_links()函數，故移除<head>標籤內的RSS連結
1.0.6
- 新增 - 定義置頂文章的樣式
- 新增 - 在404頁面中新增搜尋欄與標籤雲供訪客使用
- 新增 - 後台頁面使用cookie記憶上一次開啟的分頁（時效一天）
- 新增 - 「繼續閱讀」連結
- 修改 - 搜尋欄改採search_form()函數
- 修改 - 更改字元編碼宣告
- 修改 - 後台頁面改採checked()與selected()函數簡化代碼
1.0.5
- 修改 - 重新設計搜尋欄的動畫
- 修改 - 棄用不安全的AJAX頁面導覽方式，改為呼叫函數的方式，缺點是修改後僅能使用於首頁
- 修改 - 修復後台頁面Undefined Index的問題
- 修改 - 新增search-failed.php，為搜尋失敗的訪客提供更詳細的說明
- 修改 - 簡化並加強comment.js
1.0.4
- 修改 - 某些伺服器會有Cannot modify header information的PHP問題，將function.php中的函數修改後排除
1.0.2
- 新增 - 首頁的其他布局（概要與縮圖、僅標題）
- 新增 - 在首頁及彙整頁面中顯示日期
- 新增 - 標記留言為「管理員」或「審核中」
- 新增 - TinyMCE 編輯器的自定樣式表
- 新增 - WordPress 預設的自定頁首圖片
- 修改 - 置頂文章的樣式
- 修改 - 修復無法列印字元
- 修改 - 部分管理頁面的翻譯
- 修改 - 使用get_template_part()函數縮減代碼
- 修改 - 重新設計搜尋欄的動畫
1.0.1
- 新增 - 可調整標題大小
- 新增 - 副標題顯示
- 修改 - 將選單深度增至無限
1.0
- 新增 - AJAX頁面導覽
- 新增 - 留言功能按鈕提示
- 新增 - 文章分享按鈕
- 新增 - 回覆留言前增加「@使用者名稱」連結
- 修改 - 佈景設定頁面
- 修改 - 簡化CSS與Javascript代碼

如何使用Settings API製作佈景後台選項？

2011-05-22T16:02:00+08:00

隨著WordPress版本號的推進，不只系統越變越肥大，外掛、佈景主題的條件也越來越嚴苛，全部規定必須使用官方的現有函數製作，雖然WordPress的函數庫真的很豐富很好用，不過這麼獨裁的規定著實讓人很不爽。

因此，由於官方要求，我必須使用Settings API來製作主題選項，但官方文件的資料的資訊實在太少了，在下沒慧根實在看不懂，經過Google百般尋覓後，將我較喜歡的幾篇文章（見參考出處）整合寫成了這篇文章，我沒有PHP底子，只有在圖書館翻過幾本書，內文可能會有些錯誤，請見諒。

基礎架構

首先，建立一個空白的php檔案，以下以function-admin.php為例，實際情況依個人設定而有差異。然後，在function.php寫入下列程式碼，以引入function-admin.php這個外部檔案。

if ( file_exists( TEMPLATEPATH.'/function-admin.php' ) ) {
  require_once( TEMPLATEPATH.'/function-admin.php' );
  $theme_option = new theme_option();
}

接著在function-admin.php建立class，以下以theme_option為例：

<?php
class theme_option {
  // 建立選項區段
  private $sections;

  // 各個選項的預設值
  private $defaults = array(
      'test_checkbox' => '0', // 0 為停用，1 為啟用
      'test_text' => '',
      'test_select' => 'one',
      'test_radio' => 'one',
      'test_textarea' => ''
  );

  // checkbox的陣列，如果選項類型是 checkbox 的話，可能會出一些 "Undefined Index" 的問題，所以需要特別處理
  private $checkboxes;

  // 初始化
  public function __construct() {
      $this->checkboxes = array();

      $this->sections['general'] = 'General';
      $this->sections['reading'] = 'Reading';
      $this->sections['other'] = 'Other';

      // 將各個選項的預設值寫入資料庫
      $DBOptions = get_option('pixiv_options');
      $defaults = $this->defaults;

      if ( !is_array($DBOptions) ) $DBOptions = array();

      foreach ( $DBOptions as $key => $value ) {
          if ( isset($DBOptions[$key]) )
              $defaults[$key] = $DBOptions[$key];
      }
      update_option('pixiv_options', $defaults);

      add_action( 'admin_menu', array( &$this, 'add_pages' ) );
      add_action( 'admin_init', array( &$this, 'register_settings' ) );
  }
}
?>

初始化完成後，接著就可邁入下一個步驟「註冊設定」。

註冊設定

為了要讓佈景選項出現在選單上，新增一個名為add_pages的函數：

public function add_pages() {
  $admin_page = add_theme_page( 'Theme Options', 'Theme Options', 'edit_theme_options', 'test-settings', array( &$this, 'display_page' ) );
}

Settings API的設計雖然提供了一個更簡單的註冊設定的方式，但那僅限於選項很少的時候，若是Pixiv Custom這種選項數高達51項的主題就不可能一項一項編寫、呼叫個別的函數了，所以我們建立名為create_setting的函數，以精簡、整齊代碼。

public function create_setting( $args = array() ) {
  $defaults = array(
      'id'        => '', // 選項 id
      'title'     => '', // 選項標題
      'desc'      => '', // 選項敘述
      'type'      => 'text', // 選項類型
      'section'   => 'general', // 選項區段（__construct函數中所設定的參數）
      'choices'   => array(), // 選項分支（供radio, select用）
      'class'     => '', // 選項 class
      'before'    => '', // 選項前的文字
      'after'     => '' // 選項後的文字
  );
 
  extract( wp_parse_args( $args, $defaults ) );
 
  $field_args = array(
      'type'      => $type,
      'id'        => $id,
      'desc'      => $desc,
      'choices'   => $choices,
      'label_for' => $id,
      'class'     => $class,
      'before'    => $before,
      'after'     => $after
  );
 
  add_settings_field( $id, $title, array( $this, 'display_settings' ), 'test-settings', $section, $field_args );
 
  // 若選項類型為checkbox，將其加入checkboxes陣列
  if ( $type = 'checkbox' )
      $this->checkboxes[] = $id;
}

若陣列內容為空白，則會依照defaults來建立選項。可依個人使用的不同，加入或刪除變數。

接著就得分別填入每個選項的參數了，建立一個名為register_settings的函數。

public function register_settings() {
  register_setting( 'test_options', 'test_options', array( &$this, 'validate_settings' ) );
 
  // 新增選項區段
  foreach ( $this->sections as $slug => $title )
      add_settings_section( $slug, '', array( &$this, 'display_section' ), 'test-settings' );
 
  // checkbox 設定
  $this->create_setting( array (
      'id'        => 'test_checkbox',
      'title'     => 'Test Checkbox',
      'desc'      => 'Test Checkbox',
      'type'      => 'checkbox',
      'section'   => 'general'
  ) );
  // text 設定
  $this->create_setting( array (
      'id'        => 'test_text',
      'title'     => 'Test Text',
      'desc'      => 'Test Text',
      'type'      => 'text',
      'section'   => 'general'
  ) );
  // select 設定
  $this->create_setting( array (
      'id'        => 'test_select',
      'title'     => 'Test Select',
      'desc'      => 'Test Select',
      'type'      => 'select',
      'section'   => 'general',
      'choices'   => array(
          'one'   => 'Option One',
          'two'   => 'Option Two'
      )
  ) );
  // radio 設定
  $this->create_setting( array (
      'id'        => 'test_radio',
      'title'     => 'Test Radio',
      'desc'      => 'Test Raio',
      'type'      => 'radio',
      'section'   => 'general',
      'choices'   => array(
          'one'   => 'Option One',
          'two'   => 'Option Two'
      )
  ) );
  // textarea 設定
  $this->create_setting( array (
      'id'        => 'test_textarea',
      'title'     => 'Test Textarea',
      'desc'      => 'Test Textarea',
      'type'      => 'textarea',
      'section'   => 'general'
  ) );
}

到了這裡，只不過是設定了各個選項的數值罷了，選項頁面還是一片空白，喝點水休息一下，下一步就要正式設定選項頁面的內容了。

顯示頁面

首先，新增一個名為display_page的函數。

public function display_page() { ?>
  <div class="wrap">
      <div class="icon32" id="icon-themes"></div>
      <h2>Theme Options</h2>
      <form action="options.php" method="post" id="test_admin" enctype="multipart/form-data">
          <?php
          if ( isset( $_GET['settings-updated'] ) )
              echo '<div class="updated fade"><p><strong>Settings saved.</strong></p>';
          ?>
          <?php
          settings_fields('test_options');
          do_settings_sections( $_GET['page'] );
          ?>
          <input type="submit" name="test_options[submit]" class="button-primary" value="<?php esc_attr_e('Save Changes', 'test'); ?>" />
          <input type="submit" name="test_options[reset]" class="button-secondary" onclick="if(confirm('Are you Sure?')) return true; else return false;" value="<?php esc_attr_e('Reset to Deafults', 'test'); ?>" />
      </form>
  </div>
<?php }

接著新增一個名為display_section的函數，該函數內容可以為空，也可以設定一些文字、HTML內容等，輸出的內容會顯示在每個區段的最上方。

public function display_section() {
  // whatever
}

顯示選項

到目前為止，主題選項頁面還是一片白，加入display_settings函數後，主題選項頁面就擁有最基礎的樣貌了。

public function display_settings( $args = array() ) {
  extract( $args );
 
  // 取得資料庫內的現有選項
  $options = get_option('test_options');
 
  // 以下顯示 register_settings 內所設定的選項參數
 
  // 如果設定了 class 參數，顯示 class 參數
  if ( $class != '' )
      echo '<div class="' . $class . '">';
 
  // 如果設定了選項敘述，顯示選項敘述
  if ( $desc != '' )
      echo $desc . '<br />';
 
  // 如果設定了 before 參數，在選項前顯示 before 參數
  if ( $before != '' )
      echo '<label for="' . $id . '">' . $before . '</label>';
 
  // 偵測選項類型，以下內容可依個人喜好自行設定
  switch ( $type ) {
      case 'checkbox':
          echo '<input type="checkbox" id="' . $id . '" name="test_options[' . $id . ']" value="1"'.checked( $options[$id], 1, false ) . ' />';
 
          break;
 
      case 'select':
          echo '<select name="test_options[' . $id . ']">';
 
          foreach ( $choices as $value => $label )
              echo '<option value="' . $value . '"' . selected( $options[$id], $value, false ) . '>' . $label . '</option>';
 
          echo '</select>';
 
          break;
 
      case 'radio':
          $i = 0;
          foreach ( $choices as $value => $label ) {
              echo '<input type="radio" name="test_options[' . $id . ']" id="' . $id . $i . '" value="' . $value . '"'. checked( $options[$id], $value, false ) . ' /><label for="' . $id . '">' . $label . '</label>';
              if( $i < count($options) - 1 )
                  echo '<br />';
              $i++;
          }
 
          break;
 
      case 'textarea':
          echo '<textarea id="' . $id . '" name="test_options[' . $id . ']" cols="95%" rows="10">' . $options[$id] . '</textarea>';
 
          break;
 
      case 'text':
      default:
          echo '<input type="text" id="' . $id . '" name="test_options[' . $id . ']" value="' . $options[$id] . '" maxlength="' . $maxlength . '" />';
 
          break;
  }
 
  // 如果設定了 after 參數，在選項後顯示 after 參數
  if ( $after != '' )
      echo '<label for="' . $id . '">' . $after . '</label>';
 
  // 如果設定了 class 參數，以 div 包含選項
  if ( $class != '' )
      echo '</div>';
}

設定完成後，主題選項頁面就不再孤寥無幾了，但儲存似乎有些問題？沒錯，因為Settings API在checkbox的處理上有些問題，checkbox若停用就不會將數值寫入資料庫了，所以我們必須在選項儲存前先進行驗證，把停用的checkbox值補上0，此外，目前重設按鈕也沒有反應，也必須透過同樣的方式，事先偵測輸入值，若使用者按下重設按鈕，則拋棄現有設定，將開頭所設定的defaults變數寫入資料庫。

public function validate_settings( $input ) {
 
  $options = get_option('test_options');
  $valid_input = $options;
 
  $submit = ( ! empty( $input['submit'] ) ? true : false );
  $reset = ( ! empty( $input['reset'] ) ? true : false );
 
  if ( $submit ) {
      // 若 checkbox 停用，補 "0" 儲存至資料庫
      foreach ( $this->checkboxes as $id ) {
          if ( isset( $options[$id] ) && ! isset( $input[$id] ) )
              $input[$id] = '0';
      }
 
      $valid_input = $input;
 
  } elseif ( $reset ) {
      // 使用事先設定的預設值寫入資料庫
      $valid_input = $this->defaults;
  }
 
  return $valid_input;
}

自定 JavaScript 與 CSS 樣式

如果只是基本的主題選項的話，第四步便可以宣告結束了，但如果想要進一步的設定 Javascript 與 CSS 樣式呢？你可以加入以下的函數，直接引入外部檔案，或是直接寫在 PHP 檔案也可以。
※ 附註：若直接使用 $ 當作 jQuery 標籤的話，可能會有衝突問題，請使用其他字串代替，或改為jQuery(document).ready(function($){...});

public function styles() {
  wp_enqueue_style('testAdminCSS', get_template_directory_uri().'/admin/admin.css');
}
 
// 引入 Javascript
public function scripts() {
  wp_enqueue_script('testAdminJS', get_template_directory_uri().'/admin/admin.js');
}

然後在add_pages函數中，加入以下程式碼，就可成功引入 CSS 與 Javascript 了。

add_action( 'admin_print_scripts-' . $admin_page, array( &$this, 'scripts' ) );
add_action( 'admin_print_styles-' . $admin_page, array( &$this, 'styles' ) );

那麼該如何做出Pixiv Custom式樣的分頁呢？因為我PHP功力差，所以主要透過Javascript來包裝，你或許會有更好的方法也說不定。首先，修改display_page函數，在你喜歡的地方加入以下程式碼：

<div id="test_switch">
<a id="tab0">分頁 1</a>
<a id="tab1">分頁 2</a>
<!-- 依此類推... -->
</div>

這樣選項頁面就會出現各個區段的連結文字了，接下來只要透過Javascript包裝表格，搭配CSS控制表格顯示即可。
※ ID必須符合__construct函數中的參數，前面再加上上述程式碼的前綴字元。

jQuery(document).ready(function($){
  var cookie = $.cookie('pixiv_tabs') || 0;
  showTab(cookie);

  $("#pixiv_switch a").click(function(){
      var tab = $(this).prop('id').replace(/tab/,'');
      showTab(tab);
  });
});
function showTab(id){
  jQuery('#test_switch a').removeClass('current');
  jQuery('#test_switch a').eq(id).addClass('current');
  jQuery('form#test table').hide();
  jQuery('form#test table').eq(id).fadeIn();
  jQuery.cookie('test_tabs',id,{expires: 0.5});
}

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') {
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

套用

這個步驟相對而言就比較簡單了，首先在想要套用選項的位置加入以下程式碼，並設定

$option = get_options('test_options');
 
// checkbox 的情況
if ( $options['test_checkbox'] ) {
  ...
} else {
  ...
}
// 也可使用以下寫法
$options['test_checkbox'] ? ... : ...;
 
// text, textarea 的情況
if ( $options['test_text'] ) {
  echo $options['test_text'];
  ...
}
 
// select, radio 的情況
if ( $options['test_select'] == 'one' ) {
  ...
} elseif ( $options['test_select'] == 'two' ) {
  ...
} else {
  ...
}

參考出處

Extended WordPress Settings API Tutorial
Incorporating the Settings API in WordPress Themes
WordPress Codex
jQuery cookie plugin

後記

這大概是我寫過最長的一篇文章，內容可能會有點枯燥乏味、充滿錯誤，~~而且一張萌圖都沒有~~，各位客倌就把這當成一篇筆記文章吧！

Pixiv Custom 2.0 更新！代碼更精簡，功能更豐富！

2011-04-12T00:00:00+08:00

這次的更新主要就只有四個字，「精簡代碼」，讓檔案保持在上一版的大小外又新增了一些更為詳細的後台設定，廢話不多說，以下就是本次的更新內容：

更新記錄

2.1.5
- 修改 - 搜尋建議的寬度
2.1.4
- 修改 - 修復XSS漏洞
- 移除 - 自定分享連結的代碼
2.1.3
- 新增 - 搜尋取消按鈕
- 新增 - 文章側邊欄也能調整至與首頁側邊欄相同的寬度
- 修改 - 修復後台textarea選項，前台顯示已編碼資料的問題
- 修改 - 「更多分享」的動畫
2.1.2
- 新增 - Google +1按鈕
- 修改 - Chrome現在也能使用自動載入功能了！
- 修改 - 修復XSS漏洞，使用esc_attr編碼每個選項資料
- 修改 - 修復留言回覆通知的內容設定無法生效的問題
- 修改 - 引用樣式
2.1.1
- 新增 - 自動載入功能 (實驗中，目前僅限Firefox, Opera能使用)
- 新增 - Google +1按鈕
2.1.0
- 新增 - HTML5
- 新增 - 頁首選單中新增了一些預設的圖片可供使用
- 修改 - 簡化留言的AJAX程式碼，重新設計動畫，並加入了AJAX留言導覽
- 修改 - AJAX導覽現在也能適用於彙整、分類、標籤、搜尋頁面
- 移除 - 自定Logo功能
2.0.7
- 新增 - 後台頁面新增「重設至預設值」功能
- 修改 - 改採用Settings API製作後台頁面，以增進安全性
2.0.4
- 修改 - 選單項目過多時樣式錯誤的問題
2.0.2
- 修改 - 增進AJAX導覽功能的安全性，但因此只限用於首頁導覽
2.0
- 新增 - AJAX導覽功能
- 新增 - 選單無限深度
- 新增 - 新增style-editor.css，使用者可在後台文章編輯頁面中檢視文章的實際樣貌（調整中）
- 新增 - 搜尋建議開關
- 新增 - 連結顏色預覽
- 新增 - 更細部的分享按鈕設定
- 新增 - 留言回覆通知的設定預覽
- 新增 - 後台自動隱藏停用的子選項
- 新增 - 首頁 / 彙整頁面的文章預覽布局（完整 / 概要與縮圖 / 僅標題）
- 修改 - 重新編寫3欄式布局的結構，以優先載入主欄內容、加強SEO效能
- 修改 - 更改側邊欄的行為，側邊欄2尚未設定的情況下會先套用側邊欄1的內容，文章側邊欄尚未設定的情況下會先套用首頁側邊欄的內容
- 修改 - 文章的分類頁籤以及後台分頁頁籤的外觀
- 修改 - 後台英文翻譯、排版
- 移除 - 為了配合官方，原本的Logo設定功能改為進入「主題」→「頁首」設定

聽起來似乎沒什麼，事實上新增的功能也沒幾個，大部分的更動都是精簡代碼，所以為了增加霸氣，一次將版本號躍升到2.0。（毆）相容性尚未測試，不過應該能夠完美支援除IE外的所有瀏覽器，如果有任何問題的話，請在下方留言吧。

凱薩琳（キャサリン）

2011-04-10T00:00:00+08:00

文森特（Vincent）是個32歲的系統工程師，希望能夠一個人自由自在的生活。最近，凱薩琳（Katherine，簡稱K子）的不斷逼婚，讓文森特開始深思自己的未來，是否該找個安定的工作養活家庭？是否該停止漂泊與她共度下半輩子？

正當文森特在酒吧買醉，一名妙齡女子，凱薩琳（Catherine，簡稱C子）走進了酒吧，文森特的眼球馬上就被C子所吸引，不小心共度了激情的一夜，優柔寡斷的文森特不知該怎麼辦，只能兩邊繼續隱瞞下去。他每夜陷入可怕的惡夢，一個懲罰對愛情不忠者的地獄，只能不斷往上爬尋求倖存，而這就是遊戲的主軸。

隨著時間的推進，身邊同樣的遭遇者漸漸犧牲，而K子也發現了文森特不忠的事實，文森特越來越焦慮，好不容易終於進入了第7夜，理論上應該是惡夢的盡頭，然而醒來卻發現，C子拿出刀子脅迫，打算殺害K子，然而卻不幸失手身亡，K子感到徬徨，決定與文森特分手。

文森特體認到自己不能沒有K子的存在，回想過去一週，發現根本沒有人知道C子的存在，原來她只不過是文森特心中的理想投影，一切都是店長的陰謀！文森特與店長立了約定，一旦文森特逃出惡夢，就得釋放所有人，並給文森特的戀情一個機會。

終於從惡夢歸來，K子重新接納了文森特，兩人成為了戀人。（K子 NORMAL END）

以上是花了11小時以EASY難度完成的好人結局，老實說光是EASY模式就讓人有夠累了，不過身為一名神經病的自虐系玩家（ゝω・）u，目前正在以NORMAL模式進行人渣路線，沒有UNDO功能真的讓人很惱羞。

XLD - Mac的無損格式解碼器

2011-03-27T13:54:00+08:00

這是一個專門解碼無損格式的軟體，可應用於：

(Ogg) FLAC (.flac/oga)
Monkey’s Audio (.ape)
Wavpack (.wv)
TTA (.tta)
Apple Lossless (.m4a) [10.4 以上版本]
TAK (.tak) [需安裝 Wine]
Shorten (.shn) [僅限於 SHN v3]
AIFF, WAV……等等

也可以將CD打包成Cue格式，自動連接到網路上的資料庫獲取音軌名稱，直接編輯音軌的Metadata（中繼資料），只是目前還不支援Tak格式。

官方網站

程式擷圖

軟體使用方式

重要：若要分離 ape(flac,wav,etc) + cue 檔案，請從「檔案」→「開啟…」中開啟 .cue 檔。「開啟原始 PCM (bin/cue)」只能開啟原始 PCM 處理檔 (無標頭 wav) 檔案。

GUI版本的使用方式已包含在壓縮檔中的讀我檔案，以下是Command Line版本的使用方式：

% xld [-c cuesheet] [-e] [-f format] [-o outpath] [-t track] file

XLD 預設為解碼 WAVE 檔案，輸出檔案的副檔名為.wav，您可使用下列參數指定編碼：

-c cuesheet: 使用cue檔案分離音軌，若標題或演出者已包含於cue檔案中，將會應用於輸出檔案的名稱。
-e：從輸出檔案中排除音軌間隙。音軌間隙預設會放在音軌的最後，當-c未指定時，此參數會被忽略。
-f 格式：指定輸出檔案的格式，您可使用wav. aif, raw_big, raw_little。
-o 輸出路徑：指定輸出檔案的路徑或名稱。若輸出路徑為一資料夾，輸出檔案將會儲存於該資料夾中。
-t 音軌：若您指定1，那麼只會解碼第 1 個音軌，同樣，若指定2,4 只會解碼第 2, 4 個音軌。
--raw：以原始 PCM 讀取輸入檔案，您可使用以下 4 個參數。
- --取樣頻率 n：設定輸入檔案的取樣頻率 (Hz)，預設為 44100 Hz。
- --位元數 n：設定輸入檔案的位元深度 (bit)，預設為 16 位元。
- --聲道 n：設定輸入檔案的聲道數量：預設為 2 聲道。
- --endian little/big：設定輸入檔案的 endian，預設為little。

舉例：

將hoge.flac解碼為 AIFF 格式，並輸出於~/Music。

% xld -o ~/Music hoge.flac -f aif

使用 hoge.cue 分割 hoge.flac，並解碼第 1 和第 3 個音軌。

% xld -c hoge.cue -t 1,3 hoge.flac

教學

把下載的壓縮檔解壓縮。
在XLD按右鍵，選擇「顯示套件內容」。
將壓縮檔內的zh_TW.iproj放入Content→Resources內。
將壓縮檔內的PlugIns資料夾放入Content內。
重新開啟XLD即可。

或者，也可以直接下載完整檔案。

下載

僅本地化套件 (Ver. 0.2) [ MediaFire｜MegaUpload ]

完整應用程式 (Ver. 0.2) [ MediaFire｜MegaUpload ]

更新記錄

2011/3/27 XLD 20110312 (130.0) 中文化版本 Ver. 0.2 發佈，使用全新的Cocoa UI設計音軌列表視窗
2010/6/6 XLD 20100518 (120.3) 中文化版本 Ver. 0.1 發佈

絕命異次元 2

2011-03-08T13:37:00+08:00

石村號（USG Ishimura）事件的三年後，主角艾薩克（Issac）不斷受到已故女友妮可（Nicole）的精神侵擾，艾薩克對於一切起源「Marker」的記憶感到模糊──或者該說是不願想起。

故事一開始，艾薩克就受困於一艘名為「Sprawl」的廢棄太空船上的醫院，眼前充滿了驚悚可怕的怪物「Necromorph」。幸運的是，艾薩克得到了暫時的救贖，自稱黛安娜（Diana）的指引他逃出的方向，還與另一個病人斯特羅斯（Stross）聯繫上了，斯特羅斯不斷對艾薩克說：「我們能摧毀Marker。」

然而艾薩克卻遭到了黛安娜的背叛，她的目的是為了建造Marker，突然，一架太空船使所有的窗戶破裂，黛安娜被吸進了太空，死狀慘烈，艾薩克雖然重獲自由，卻失去了方向。

斯特羅斯再度與艾薩克聯絡，說明現在唯一的終極目標就是──摧毀Marker。為了達成這個目標，艾薩克往政府前進，途中遇到了警戒心強烈的女主角艾莉（Eilie），也遇到了斯特羅斯。然而好景不常，斯特羅斯的精神狀況愈來愈差，甚至強行挖下了艾莉的右眼，而艾薩克也沒多好，仍然不斷受到妮可的精神侵擾。

艾薩克不得不殺害斯特羅斯，艾莉與艾薩克終於到達政府區，那裡已是一片殘破，艾薩克為了艾莉的安全，用僅剩的安全艙將艾莉送往安全的地方，而自己留在充滿怪物的政府區孤軍奮戰。途中，艾薩克終於對妮可的死亡感到釋懷，妮可的死亡早已成定局，無法改變──妮可第一次在遊戲中展露了笑容，溫柔的為艾薩克指示Marker的方向。

然而妮可的終極目標就是讓Marker更為完整（Make us whole，老實說這句話在遊戲中不斷出現，我也不清楚到底什麼意思，以我的破英文來理解的話，姑且就差不多這樣吧？），經過了一段奮戰後，艾薩克成功了擺脫了妮可的糾纏，也成功破壞了Marker。

※劇情大部分都是參考自英文維基和個人的模糊記憶，可能有部分錯誤。上面的圖片都是隨便找的，和遊戲劇情沒有直接關係，應該沒有人會邊玩恐怖遊戲邊拿著相機拍照吧？
本作雖然是老梗的殭屍題材，不過劇情卻脫俗而不會乏味，遊戲性也相當十足，充滿了各種解謎要素以及不斷出來嚇人的可怕前女友，就算是和朋友一起在大白天玩也會被嚇到！

時空幻境：美德傳奇f

2011-02-10T00:00:00+08:00

上週終於用自己存了半年的零用錢購入了PS3，連續玩了一週的情況下，使得網誌長達三週沒有文章更新，本來正在進行的網誌佈景更新也荒廢了，IS輕小說的介紹文章人氣還莫名其妙的衝破1000。

與主機一併購入了《時空幻境：美德傳奇f》，劇情上有點老梗的作品，男主角「阿斯貝爾」與同伴偶然發現了人形兵器「蘇菲」，似乎失憶想不起自己的過去，因而啟發了男主角的同情心，想要幫助她找回記憶，即使得花上一輩子也在所不惜。（不管是動漫或是遊戲，為啥只會忘記名字與過去，而不會忘記語言與基礎知識之類的？我長年以來一直抱持著這種疑問）。一行人偶然在一次的冒險中，遭到惡魔「拉姆達」的襲擊，蘇菲奉獻自己的生命而擊敗了拉姆達，從此消失，阿斯貝爾下定決心守護身邊的一切。

很抱歉沒有拍遊戲畫面，我總不可能像個白痴一樣邊拿相機邊玩遊戲吧，如果PS3有啥擷圖的外掛就好了

一開始還有點不習慣這遊戲的系統，不能隨便無腦攻擊，而是攻擊與防禦不斷往復。後期讓人有點脫力，因為每個小怪都得打半分鐘，還要解一堆有夠機掰的機關，明明眼前有這麼緊急的危難，我個堂堂男主角還要在這玩魔術方塊，這些看起來根本跳得過去的路徑最好一個18歲成人過不去啦！蘭斯洛特借你，直接給林北突破天際啦！

撇開這些機掰的迷宮不談，劇情與遊戲性都還算不錯，唯一的缺憾就是畫面太差吧。解完這遊戲的所有要素之後，想玩的遊戲還有絕命異次元（自虐用）、托托莉、征服者、凱薩琳，PS3真是一個榨光打工錢的鬼機器…。

Espresso - Code is Poetry

2011-01-20T00:00:00+08:00

Espresso是一款強大的網頁開發軟體，支援CSS, HTML, JavaScript, PHP,XML, XSL的編輯，還可利用名為「Sugar」的附加套件讓Espresso支援各式各樣的程式語言，諸如CodeIgniter, jQuery, Objective-C, Ruby, etc.，完全不是問題！除此之外，內建簡易方便的網頁發佈功能，可支援FTP, SFTP, FTP/SSL, Amazon S3。簡單的介面下隱藏著強大的擴充性！

官方網站｜第三方 Sugars 套件下載

程式擷圖

教學

把下載的壓縮檔解壓縮。
在Espresso按右鍵，選擇「顯示套件內容」。
刪除應用程式Content→Resources內的所有副檔名為nib的檔案（或者放入English.Iproj），以及刪除CodeFoldingActions.xml, ConnectionActions.xml, FileActions.xml, PublishActions.xml, TabActions.xml這幾個XML檔案。
將壓縮檔內Resource資料夾內的檔案放入應用程式的Content→Resources。
刪除或備份應用程式SharedSupport→Sugars內的所有檔案，放入壓縮檔SharedSupport→Sugars內的所有檔案。
重新開啟Espresso即可。

由於Espresso的程式架構問題，這次的步驟稍顯複雜了些，嫌麻煩的話可以直接下載完整檔案。

下載

僅本地化套件 (Ver 0.1) [ MediaFire｜Megaupload ]

完整應用程式 (Ver 0.1) [ MediaFire｜Megaupload ]

後記

這次的副標實在是沒梗了orz，乾脆直接拿WordPress的副標「Code is Poetry」來用。我從很久以前就想要翻譯Espresso了，不過因為懶得整理散亂的語言檔案，所以一直拖到現在，不過有些地方的字串還是沒辦法收集到，畢竟我沒有Espresso的原始碼實在不方便作業，沒有翻譯到的部份就算了，這次順便翻譯了說明檔案，有些地方翻譯不通順請多指教唄。

更新記錄

2011/1/20 Espresso 1.1.2 中文化版本 Ver 0.1 發佈

MPlayer OSX Extended rev14

2011-01-10T00:00:00+08:00

MPlayer OSX Extended為MPlayer OSX的加強版，新增了多種參數，使用優秀的MPlayer內核，可支援各種影片及音訊格式（MP4, MKV, RM, AVI, FLV, WMV…），當然外掛字幕也不是問題<（SRT, ASS）。此外，更使用支援64位元的多線程解碼器，HD影片播放可更加順暢！

官方網站

介面擷圖

教學

請先將MPlayer OSX Extended更新至rev14，並先讓程式執行完字體快取的安裝。
把下載的壓縮檔解壓縮。
在MPlayer OSX Extended上按右鍵，選擇「顯示套件內容」。
進入Contents→Resources。
使壓縮檔中的zh_TW.lproj覆蓋原檔案，之後重開MPlayer OSX Extended即可。
若要安裝按鈕中文化，重複上述步驟，將圖片覆蓋到Contents→Resources即可。

或者，也可以直接下載完整檔案。
（如果語言檔案仍無法使用，請將zh_TW.lproj更名成English.lproj並取代原本的檔案。）

下載

rev14 Ver. 0.3：

僅本地化套件 [ MediaFire｜Megaupload ]

完整應用程式 [ MediaFire｜Megaupload ]

rev12 Ver. 0.4：（已終止更新，若有rmvb播放問題請使用此版本）

僅本地化套件 [ MediaFire｜Megaupload ]

完整應用程式 [ MediaFire｜Megaupload ]

按鈕中文化 [ MediaFire｜Megaupload ]

後記

這次試著從原始檔抓了一些可以中文化的字串來翻譯，稍微提昇了一點中文化程度，不過我想對使用者而言，最重要的應該還是rmvb的播放問題吧，這次似乎還是沒有解決…？

更新記錄

2011/1/10 程式版本更新至rev14，中文化版本隨之更新至Ver. 0.3

2010/04/11 修正部分字串，更新至ver0.2

Transmission - 啟動你的BT引擎

2011-01-08T00:00:00+08:00

簡潔快速的BT軟體，可完整支援DHT, PEX, Magnet，甚至內建Web UI，讓你在外也能下載BT。

我不喜歡uTorrent for Mac的原因主要是因為資源耗太兇了（CPU佔用率超高），而且介面都是Windows的影子，但功能和WIndows比起來根本是閹割再閹割，RSS, Magnet的功能根本就沒有。而毒蛙…Java寫的軟體就算了吧。

官方網站

程式擷圖

教學

把下載的壓縮檔解壓縮。
在Transmission按右鍵，選擇「顯示套件內容」。
將壓縮檔內的zh_TW.iproj放入Content→Resources內。
重新開啟Transmission即可。

或者，也可以直接下載完整檔案。

下載

僅本地化套件 (Ver 0.2) [ MediaFire｜Megaupload ]

完整應用程式 (Ver 0.2) [ MediaFire｜Megaupload ]

後記

Transmission自從踏入2.0之後就沒有中文化了（原本的中文化作者怎麼了？），而且效能還變得有些差，直到2.0.3之後，差不多回到原本的效能了，才決定自己動手做中文化，改天再去通知官方吧。

話說寒假時一直聯絡XLD的作者都沒有回音，反倒是BetterZip的作者一聯絡就馬上回應了XD。

更新記錄

2011/1/8 Transmission 2.1.3 中文化版本 Ver 0.2 發佈

2010/8/6 Transmission 2.0.3 中文化版本 Ver 0.1 發佈

HandBrake - 來杯濃縮DVD果汁！

2011-01-06T00:00:00+08:00

HandBrake是一款Mac上歷史悠久又相當好用的轉檔程式，支援64bit，讓轉檔效能更加快速，可輸出MP4和MKV檔案，唯一的缺憾大概就是不支援RMVB。

官方網站｜MacUKnow教學

程式擷圖

教學

把下載的壓縮檔解壓縮。
在HandBrake按右鍵，選擇「顯示套件內容」。
將壓縮檔內的zh_TW.iproj放入Content→Resources內。
重新開啟HandBrake即可。

或者，也可以直接下載完整檔案。

下載

僅本地化套件 (Ver. 0.1) [ MediaFire｜Megaupload ]

完整應用程式 (Ver. 0.1) [ MediaFire｜Megaupload ]

※僅提供64bit版本的完整應用程式，若需要32bit，請自行至官網下載，本人不保證中文化套件與32bit程式的相容性。

後記

這次歷經許久，再度接到了委託，本程式因為程式撰寫的限制，部分字串無法翻譯，本人沒有Objective-C的撰寫經驗，也為了避免更新麻煩，所以還是會有部分保留著英文。

話說MegaUpload這免費空間真是越來越棒了，現在連驗證碼都不需要，後台的管理介面也變得更加美觀，更不用提快得要命的速度了。

更新記錄

2011/1/6 HandBrake 0.9.5 中文化版本 Ver. 0.1 發佈

Zespia

HTML5 audio實驗

開始之前

介面

核心

播放列表

後記

參考出處

Slash — 專為 Octopress 設計的極簡主題

安裝

Q&A

如何顯示右上角的Facebook連結？

如何編輯選單？

如何隱藏頁首的Twitter訊息串？

如何關閉Fancybox？

如何利用CSS製作多級選單？

HTML

CSS

後記

如何利用jQuery製作頁籤？

基礎

HTML

CSS

JS

進階

HTML

CSS

JS

後記

Hello Octopress!

安裝

Ruby

Octopress

發佈

自定網域

寫作

文章

分頁

建立

結論

Google+ Motionless & Filter

Google+ Motionless

Google+ Fxxking Filter

HTML5 Storage的使用彙整

基礎

設定資料

取得資料

刪除資料

資料全部清除

勾選框（checkbox）

設定資料

取得資料

下拉式選單（select）

設定資料

陣列（array）

設定資料

取得資料

後記

Google+ Hide Comments & Hover Zoom

Google+ Hide Comments

Google+ Hover Zoom

鍊金術士梅露露 ～亞蘭德的鍊金術士 3～

結局

連結

Corner 1.0 正式版推出！

瀏覽器支援

下載

更新記錄

如何使用Settings API製作佈景後台選項？

基礎架構

註冊設定

顯示頁面

顯示選項

自定 JavaScript 與 CSS 樣式

套用

參考出處

後記

Pixiv Custom 2.0 更新！代碼更精簡，功能更豐富！

更新記錄

凱薩琳（キャサリン）

鍊金術士梅露露～亞蘭德的鍊金術士 3～