atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><![CDATA[Zespia]]></title>
  
  <link href="/atom.xml" rel="self"/>
  <link href="http://zespia.tw/"/>
  <updated>2014-04-22T05:39:19.648Z</updated>
  <id>http://zespia.tw/</id>
  
  <author>
    <name><![CDATA[SkyArrow]]></name>
    <email><![CDATA[tommy351@gmail.com]]></email>
  </author>
  
  <generator uri="http://zespia.tw/hexo/">Hexo</generator>
  
  <entry>
    <title><![CDATA[E-Hentai 閱讀器 for Android]]></title>
    <link href="http://zespia.tw/blog/2014/04/19/ehreader-android/"/>
    <id>http://zespia.tw/blog/2014/04/19/ehreader-android/</id>
    <published>2014-04-19T10:14:10.000Z</published>
    <updated>2014-04-20T13:10:41.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iXV0rlAP1H4xI.jpg" alt=""></p>
<p>想必許多紳士都是 <a href="http://e-hentai.org/" target="_blank">E-Hentai</a> 的常客，我這邊就不細談這網站的內容了，這篇文章是久違的技術文，主要是來說明 <a href="https://github.com/tommy351/ehreader-android" target="_blank">E-Hentai 閱讀器</a> 的 <del>發牢騷</del> 製作過程。</p>
<a id="more"></a>

<h2 id=" 編輯器 ">編輯器</h2>
<p><img src="http://i.minus.com/iJ3U8oypGWdoA.png" alt=""></p>
<p>Android 開發實在不是件簡單的事，一開始開發時使用 <a href="https://www.eclipse.org/" target="_blank">Eclipse</a>，恰好時逢 Android SDK 推出，結果一更新 SDK，林北的專案就爆炸惹，我也不知道到底該怎麼救，於是一氣之下怒換到 <a href="http://developer.android.com/sdk/installing/studio.html" target="_blank">Android Studio</a>，<a href="http://developer.android.com/sdk/installing/studio.html" target="_blank">Android Studio</a> 基於 <a href="http://www.jetbrains.com/idea/" target="_blank">IntelliJ IDEA</a>，速度比 <a href="https://www.eclipse.org/" target="_blank">Eclipse</a> 快多了，介面也比 <a href="https://www.eclipse.org/" target="_blank">Eclipse</a> 美觀許多，而且預設採用 <a href="http://www.gradle.org/" target="_blank">Gradle</a> 做為建置工具。</p>
<p><img src="http://i.minus.com/iimYRbRDx23to.png" alt=" 使用 Genymotion 運行 Android 4.4.2"></p>
<p>之前就聽說過 iOS 開發友善許多，實際體驗後深深了解此言絕非虛假，Android 模擬器的效能實在不是一般的慢，光開機就需要數分鐘，而且一切的操作都比實機慢上許多倍，根本無法使用，根本逼人買一台 Nexus，後來改用 <a href="http://www.genymotion.com/" target="_blank">Genymotion</a>，才終於找回正常模擬器該有的速度，iOS 的開發環境就好多了，從 Build 到 Deploy 只要半分鐘即可在模擬器上操作。</p>
<p>一般來說，開發專案絕對會用到很多 Library，因此需要有個 Dependency Manager 來管理套件之間的相依性問題，Java 因為歷史悠久，因此有許多選擇，使用 <a href="https://www.eclipse.org/" target="_blank">Eclipse</a> 時，我本來選用 <a href="http://maven.apache.org/" target="_blank">Maven</a>，但是它使用 XML 檔實在令人討厭，舉例來說：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">dependencies</span>&gt;</span>
    <span class="tag">&lt;<span class="title">dependency</span>&gt;</span>
        <span class="tag">&lt;<span class="title">groupId</span>&gt;</span>com.jakewharton<span class="tag">&lt;/<span class="title">groupId</span>&gt;</span>
        <span class="tag">&lt;<span class="title">artifactId</span>&gt;</span>butterknife<span class="tag">&lt;/<span class="title">artifactId</span>&gt;</span>
        <span class="tag">&lt;<span class="title">version</span>&gt;</span>4.0.1<span class="tag">&lt;/<span class="title">version</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">dependency</span>&gt;</span>
<span class="tag">&lt;/<span class="title">dependencies</span>&gt;</span>
</pre></td></tr></table></figure>

<p>倒也不是討厭 XML 本身，我認為 XML 是一個規範良好的標記語言，但在上面的程式碼中，僅僅要引入一個套件就得寫這麼長的代碼也未免太囉嗦了，而 <a href="http://www.gradle.org/" target="_blank">Gradle</a> 採用 <a href="http://groovy.codehaus.org/" target="_blank">Groovy</a>，讓一切變得更簡單：</p>
<figure class="highlight groovy"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>dependencies <span class="cell">{
    compile <span class="string">'com.jakewharton:butterknife:4.0.1'</span>
}</span>
</pre></td></tr></table></figure>

<p>如上，只要寫一行代碼就能引入一個套件，再也不用寫一長串的 XML，而且 Gradle 也能支援 <a href="http://search.maven.org/" target="_blank">Maven Central</a>，因此不用擔心沒有 Library 能用。</p>
<h2 id="E-Hentai_API">E-Hentai API</h2>
<p>一開始我根本不知道有 API 的存在，所以使用 <a href="http://jsoup.org/" target="_blank">jsoup</a> 來爬網站，<a href="http://jsoup.org/" target="_blank">jsoup</a> 能在 Java 上用類似 <a href="http://jquery.com/" target="_blank">jQuery</a> 的語法來遍歷資料，但是效能實在不佳。我曾有想過用 Node.js 做為後端伺服器，但為了避免流量過大被 E-Hentai 封鎖，放棄了這個想法。</p>
<p>之後某天，在瀏覽時偶然開啟 Firebug，發現到瀏覽圖片時會使用 Ajax 與伺服器取得資料，才了解到原來有 <a href="http://ehwiki.org/wiki/API" target="_blank">E-Hentai API</a>。雖然有 API 是好事，但這 API 實在寫得太爛了，舉例來說，若要取得一個相簿的資料，我們必須先了解 E-Hentai 的網址結構：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>http://g.e-hentai.org/g/{gallery_id}/{gallery_token}/
</pre></td></tr></table></figure>

<p><code>gallery_id</code> 代表 Gallery ID，是一個唯一的有序整數，而 <code>gallery_token</code> 是一個隨機的字串。若要取得相簿資料，這兩個欄位是必須的。但是在一開始，根本無從得知 <code>gallery_token</code>，只能從首頁中把網址抓出來。</p>
<p>接下來是圖片資料，E-Hentai API 並沒有提供「相片列表」的 API，因此，我們又必須利用從相簿頁面中把圖片網址抓出來，而圖片的網址結構如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>http://g.e-hentai.org/s/{page_token}/{gallery_id}-{pagenumber}
</pre></td></tr></table></figure>

<p><code>page_token</code> 代表相片的 token，推測是原始檔案 SHA1 checksum 的前 10 碼，<code>gallery_id</code> 是相簿 ID，<code>pagenumber</code> 則是頁數。<strong>注意</strong>，<code>page_token</code> <strong>不等於</strong> <code>gallery_token</code>，使得取得相片資料變得更加困難。</p>
<p>在 <a href="http://ehwiki.org/wiki/API" target="_blank">wiki</a> 中，並沒有提到如何透過 API 取得圖片網址，我們無法單從 <code>page_token</code> 推測出圖片網址，只能從圖片頁面中找到蛛絲馬跡，後來我發現到圖片頁面中會使用如下指令取得資料：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre>{
  "<span class="attribute">method</span>": <span class="value"><span class="string">"showpage"</span></span>,
  "<span class="attribute">gid</span>": <span class="value"><span class="number">618395</span></span>,
  "<span class="attribute">page</span>": <span class="value"><span class="number">1</span></span>,
  "<span class="attribute">imgkey</span>": <span class="value"><span class="string">"1463dfbc16"</span></span>,
  "<span class="attribute">showkey</span>": <span class="value"><span class="string">"387132-43f9269494"</span>
</span>}
</pre></td></tr></table></figure>

<p><code>gid</code> 等於 <code>gallery_id</code>，<code>page</code> 等於 <code>pagenumber</code>，<code>imgkey</code> 等於 <code>page_token</code>，但是 <code>showkey</code> 呢？<code>showkey</code> 是每 24 小時就會隨機變換的 token，同樣藏在圖片頁面中，只能自己爬資料。</p>
<p>綜上所述，這個 API 真的么壽難用，有很多資料是無法從 API 取得的，只能自己爬資料，令我覺得 Android 開發與之相比簡單多了，各位如果想知道更多關於 <a href="http://ehwiki.org/wiki/API" target="_blank">E-Hentai API</a> 的資料的話，可參考我做的 <a href="https://github.com/tommy351/ehreader-android/wiki/E-Hentai-JSON-API" target="_blank">整理</a>。</p>
<h2 id=" 介面 ">介面</h2>
<p><img src="http://i.minus.com/igtO6Z5Tg3EmS.png" alt=""></p>
<p>Android 雖然提供了所見即所得的介面編輯器，但若要進行進一步的調整還是得自己編輯 XML 檔，更不用說預覽畫面常與實際畫面不符，根本所見非所得。</p>
<p>網頁開發與 Android 的介面設計有很多相似之處，但是有些介面元素在 CSS 上很容易實現，在 Android 上卻麻煩許多，例如：圓角、陰影等，在 CSS 中分別只要透過 <code>border-radius</code>, <code>box-shadow</code> 即可達成，在 Android 上卻麻煩許多。</p>
<h2 id=" 結語 ">結語</h2>
<p><img src="http://i.minus.com/iKXI5aMhSXYFB.PNG" alt=""></p>
<p>其實這專案從去年 5 月就已經開始計畫了，不過因為 <del>中途一直碰壁很不爽</del> 時間不夠，所以直到今年，才用了春節兩週的時間將舊有程式碼完全翻新，開發出了 0.1.0 版。雖然現在已經 0.4.0 版了，還是很多 bug，每天仍有 400 多名活躍使用者實在太感謝了。</p>
<p>如果各位在使用時發現任何問題或建議，請到 <a href="https://github.com/tommy351/ehreader-android/issues" target="_blank">GitHub</a> 發表，也歡迎各位加入開發讓這個程式變得更加好用。</p>
<ul>
<li><a href="https://github.com/tommy351/ehreader-android" target="_blank">GitHub</a></li>
</ul>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iXV0rlAP1H4xI.jpg" alt=""></p>
<p>想必許多紳士都是 <a href="http://e-hentai.org/" target="_blank">E-Hentai</a> 的常客，我這邊就不細談這網站的內容了，這篇文章是久違的技術文，主要是來說明 <a href="https://github.com/tommy351/ehreader-android" target="_blank">E-Hentai 閱讀器</a> 的 <del>發牢騷</del> 製作過程。</p>
]]></summary>
    
      <category term="Android" scheme="http://zespia.tw/tags/Android/"/>
    
      <category term="E-Hentai" scheme="http://zespia.tw/tags/E-Hentai/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[愛絲卡＆羅吉的鍊金工房 ─ 黃昏天空之鍊金術士]]></title>
    <link href="http://zespia.tw/blog/2014/04/13/atelier-escha-logy/"/>
    <id>http://zespia.tw/blog/2014/04/13/atelier-escha-logy/</id>
    <published>2014-04-13T01:29:57.000Z</published>
    <updated>2014-04-19T10:13:23.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i3.minus.com/jbxXf34379Jbtl.jpg" alt=""></p>
<p>《愛絲卡＆羅吉的鍊金工房》（エスカ＆ロジーのアトリエ）是黃昏系列的第二作，<del>簡稱為「スカトロのアトリエ」</del>，繼承了前作的世界觀，時間經過了四年，這次的舞台在偏僻的「柯爾賽特」。</p>
<a id="more"></a>

<h2 id=" 系統 ">系統</h2>
<div class="video-container"><iframe src="//www.youtube.com/embed/m0Cj5l7W6lo" frameborder="0" allowfullscreen></iframe></div>


<p>這次再度採用了雙主角制，女主角「<strong>愛絲卡</strong>」是當地的鍊金術士，而男主角「<strong>羅吉</strong>」則是因為某些特殊原因，自願從中央來到偏鄉的鍊金術士，愛絲卡使用的是傳統的鍊金釜，專門負責生產除了武器、防具以外的物品，根本黑科技；而羅吉則是因為鍊金釜這種古早器具在中央早就沒人使用了，因此完全不會使用鍊金釜，第一次看到愛絲卡從鍊金釜生產出蘋果塔時還嚇了一跳 www。</p>
<p><img src="http://i.minus.com/ibhaoYDNXitLgP.jpg" alt=""></p>
<p>戰鬥系統進步許多，原本僅限 3 人的戰鬥模式變成了前後排共 6 人，當 Support 點數大於 0 時，無論前後排都能進行支援，到了後期，雙主角更能使出連攜技能，讓攻擊力極大化，使得這代鍊金術士變得非常威能，凡人根本就是來湊傷害倍率的。</p>
<p><img src="http://i.minus.com/ibwPsVOdCjfN48.jpg" alt=""></p>
<p>在上一代《愛夏的鍊金工房》中，武器、防具是從怪物身上取得的，強化非常方便，只要生產出砥石存放在商店中，就能夠無限取用；而本作中，所有的武器、防具皆由羅吉生產，存放想要的屬性變得比較麻煩。不過好在這代新增了超強的「人工生命體」（ホムンクルス），只要給甜點就能夠無限複製道具，所有使用道具（藥水、炸藥等）都會在回城時自動補給，非常方便。</p>
<h2 id=" 劇情 ">劇情</h2>
<p><img src="http://i.minus.com/iyy3x0WTjQInA.png" alt=""></p>
<p>本作出現了很多前作的角色，例如妮歐、小魔女、哈利等，不過愛夏倒是沒有出場，因為在探險時摧毀遺跡，成為了通緝犯 www。</p>
<p><img src="http://i.minus.com/ibwzQqahjZyMCl.jpg" alt=""></p>
<p>這代的劇情步調慢了許多，因為不像前作有一種想要快點救出妹妹的急迫性，只要每四個月完成課題即可，在大部分情況下，都能在時限前一個月就能完成所有課題。到了最後，甚至有一年的空白時間能讓玩家隨便玩。</p>
<p><img src="http://i.minus.com/it3GLpHLWtfvv.png" alt=""></p>
<p>雖然本作是雙主角制，不過兩位主角的劇情大部分都是重複的，只有部分劇情不同，愛絲卡比較正面，而羅吉則比較負面。本作的終極目標，就是前往遠在天邊的未探索遺跡 <del>救蘿莉</del>，中途的劇情大部分都不重要。</p>
<h2 id=" 動畫 ">動畫</h2>
<div class="video-container"><iframe src="//www.youtube.com/embed/DubvKF2OOrk" frameborder="0" allowfullscreen></iframe></div>


<p>為了紀念 Gust 成立 20 週年，Gust 在去年發佈了動畫化的消息，在前幾天已經開播，除了遠景作畫崩壞這種正常現象以外，由製作過「<a href="http://kinmosa.com/" target="_blank">黃金拼圖</a>」和「<a href="http://saki-anime.com/" target="_blank">天才麻將少女</a>」的 <a href="http://www.gokumi.co.jp/" target="_blank">Studio 五組</a> 來製作應該沒什麼問題，只是不知為何愛絲卡和羅吉表現得比遊戲還要親密 www。</p>
<h2 id=" 結語 ">結語</h2>
<p>沒想到又拖了這麼久才生出這篇文章，拖到我的 PS3 都壞掉了，這樣就必須得在 <a href="http://atelier-ps3.jp/shallie/" target="_blank">A16</a> 發售前收購一台二手機了。接下來還有兩篇文章要寫，分別是 <a href="https://github.com/tommy351/ehreader-android" target="_blank">EH 閱讀器</a> 和剛出爐的 <a href="https://github.com/tommy351/sprite.styl" target="_blank">sprite.styl</a>，希望期中考後能趕快發佈。</p>
<ul>
<li><a href="http://tommy351.minus.com/mTHCacia6Bvw5" target="_blank">CG set</a> (<a href="http://bbs.duowan.com/thread-33305347-1-1.html" target="_blank">Source</a>)</li>
</ul>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i3.minus.com/jbxXf34379Jbtl.jpg" alt=""></p>
<p>《愛絲卡＆羅吉的鍊金工房》（エスカ＆ロジーのアトリエ）是黃昏系列的第二作，<del>簡稱為「スカトロのアトリエ」</del>，繼承了前作的世界觀，時間經過了四年，這次的舞台在偏僻的「柯爾賽特」。</p>
]]></summary>
    
      <category term="PS3" scheme="http://zespia.tw/tags/PS3/"/>
    
      <category term="遊戲" scheme="http://zespia.tw/tags/%E9%81%8A%E6%88%B2/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[魔龍寶冠]]></title>
    <link href="http://zespia.tw/blog/2013/11/10/dragons-crown/"/>
    <id>http://zespia.tw/blog/2013/11/10/dragons-crown/</id>
    <published>2013-11-10T09:32:36.000Z</published>
    <updated>2014-04-13T09:49:21.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ibtrnhwgpr0qD5.png" alt=""></p>
<p>本站已經將近一年沒更新了，身為 Hexo 的作者卻不常使用 Hexo，這樣好像有點不太對勁？因此我在 10 月時決定再度提筆撰寫新文，可惜諸事繁忙，<del>加上每次寫文時都會手癢想改佈景主題</del>，導致這篇文章直到 11 月才正式動筆。</p>
<p>《魔龍寶冠》是一部非常細緻的 2D 橫向 RPG，由 VanillaWare 製作，在 PS3 和 PSV 平台上發行，為了能夠在通勤時遊玩，我選擇 PSV 版本。</p>
<a id="more"></a>

<p>去年看到宣傳影片時，並沒有引起我的共鳴，所以當日文版於今年 7 月發售時我沒有入手。得知中文版即將在 10 月發行時，為了支持中文版，加上手邊的《Persona 4》和《重力異想世界》都玩膩了，便決定入手中文版。</p>
<p><img src="http://i.minus.com/iKjGavqV77i77.jpg" alt=""></p>
<p>雖無日文版對照，不過中文版的翻譯看起來沒什麼毛病，平常的字體使用粗明體，而較小的字體則使用細黑體。</p>
<h2 id=" 系統 ">系統</h2>
<p>本作的系統十分容易上手，地圖間的切換速度十分迅速，可惜的是 PSV 版本的優化不良，戰鬥場景中若有大量魔法特效會有明顯 Lag。</p>
<p><img src="http://i.minus.com/iTGIpB6cO9G1z.jpg" alt=""></p>
<p>遊戲中共分為六種職業：</p>
<ul>
<li>戰士（Warrior）</li>
<li>亞馬遜女戰士（Amazon）</li>
<li>矮人（Dwarf）</li>
<li>精靈（Elf）</li>
<li>巫師（Wizard）</li>
<li>女法師（Sorceress）</li>
</ul>
<p><img src="http://i.minus.com/ibwcCzcJbKUnv0.png" alt=""></p>
<p>其中我已玩過戰士和精靈。戰士屬於近戰角色，使用單手劍進行攻擊，速度快、攻擊力不錯，另外可使用盾防禦，是遊戲中防禦力最高的角色，遊戲中只要適時的使用攻擊和防禦就能輕鬆過關，適合初心者使用。</p>
<p><img src="http://i.minus.com/iGZGN2il7Wr8L.png" alt=""></p>
<p>選擇精靈則是因為精靈的聲音超可愛，雖然在女法師的魔乳以及亞馬遜女戰士的豐臀中身材稍顯遜色，不過這種苗條的身材也很不錯！撇開這個不談，精靈是遊戲中最靈活的角色，攻擊及閃避速度都非常快，弓箭的攻擊力也相當可觀，缺點是箭矢存量少，一開始只能攜帶 10 支，用盡後僅能一邊使用攻擊力超弱的普通攻擊，在怪物群中來回穿梭撿拾地上的箭矢使用。</p>
<p><img src="http://i.minus.com/iWPuPDEKdG3k6.png" alt=""></p>
<p>目前已經開始遊玩女法師和亞馬遜女戰士這兩種職業，雖然都還練不到 10 等，不過稍微說明一下到目前為止的感想吧。女法師使用魔法進行攻擊，切換不同法杖可使用不同屬性的魔法。初期的 MP 量僅有 300，與精靈相同的窘境，魔力耗盡後就必須長按正方形鍵回魔，因為瞬移需要消耗少量 MP，一旦深陷怪物群中就只能用走的慢慢逃出去。女法師在奔跑時胸部會激烈晃動，看起來十分養眼。</p>
<p><img src="http://i.minus.com/ibeBhwuliSW3ds.png" alt=""></p>
<p>亞馬遜女戰士使用雙手斧做為武器，斧頭兼具攻擊和防禦的效果，攻擊及移動速度很慢，然而狂化後攻擊力提昇、移動速度大幅增加。奔跑時的動作十分有勁，翹臀真是他媽的太棒了，胸部什麼的只不過是屁股的山寨品罷了。</p>
<p>戰鬥時由 1~4 人組成小隊出征，可連線與朋友共同遊玩，或是從路邊撿拾骨頭至教堂復活。AI 隊友的智商非常低，眼前即便有陷阱還是會直接走過去，因為 AI 只會跟著主角走，導致受傷扣血，閃避技巧也非常差，打王時常常不知不覺的就只剩下我一人了。</p>
<h2 id=" 劇情 ">劇情</h2>
<p>本作的劇情很短，跑完 9 張地圖後主線劇情就幾乎完成了，所有地圖會開啟 B 路線，B 路線較 A 路線困難許多，玩家必須打敗所有 B 路線的 Boss，取得 9 顆寶石後，<del>就能達成願望</del>，就能前往虛幻之境，打敗上古巨龍。</p>
<p>主線劇情完成後：</p>
<ul>
<li>開啟更困難的難度</li>
<li>等級上限提昇</li>
<li>開啟混沌迷宮</li>
<li>可以購買該角色的解說語音（要價 100 萬元）</li>
<li>獲得該角色的藝廊 CG</li>
</ul>
<p>難度提昇後，9 張地圖的路線相同，怪物完全沒有改變，只是等級提昇罷了，一樣需要打敗所有 B 路線的 Boss，集齊 9 顆寶石打敗上古巨龍。</p>
<p>在普通難度下，等級上限是 35 級，一旦到達等級上限後就無法再繼續累積經驗值，提升到困難難度後，等級上限會提升到 65 級，地獄難度則是 99 級。</p>
<p>混沌迷宮是由 9 張地圖隨機混搭的區域，一共有 99 層，通關後可獲得獎勵，整體來說並不困難，唯一需要的是耐心。</p>
<h2 id=" 結語 ">結語</h2>
<p>雖然主線劇情本身還算有趣，但是真的太短了，而且沒有角色專屬劇情，6 種職業都是相同的劇情，實在令人乏味，主線劇情結束後，就只有壓力摳米的混沌迷宮和收集藝廊 CG，希望日後能開放新地圖或劇情的 DLC。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/ibtrnhwgpr0qD5.png" alt=""></p>
<p>本站已經將近一年沒更新了，身為 Hexo 的作者卻不常使用 Hexo，這樣好像有點不太對勁？因此我在 10 月時決定再度提筆撰寫新文，可惜諸事繁忙，<del>加上每次寫文時都會手癢想改佈景主題</del>，導致這篇文章直到 11 月才正式動筆。</p>
<p>《魔龍寶冠》是一部非常細緻的 2D 橫向 RPG，由 VanillaWare 製作，在 PS3 和 PSV 平台上發行，為了能夠在通勤時遊玩，我選擇 PSV 版本。</p>
]]></summary>
    
      <category term="遊戲" scheme="http://zespia.tw/tags/%E9%81%8A%E6%88%B2/"/>
    
      <category term="PS Vita" scheme="http://zespia.tw/tags/PS%20Vita/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Phase — 史上最漂亮也最吃資源的主題]]></title>
    <link href="http://zespia.tw/blog/2012/12/07/hexo-theme-phase/"/>
    <id>http://zespia.tw/blog/2012/12/07/hexo-theme-phase/</id>
    <published>2012-12-07T10:36:03.000Z</published>
    <updated>2013-01-12T16:52:33.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/icsKsGRjMpstw.png" alt=""></p>
<p>在轉到 Hexo 之前，我一直都在使用這個<a href="http://zespia.tw/blog/2012/05/02/new-theme-phase/">私用主題 Phase</a>，曾經承諾過我用膩了就公開發佈，於是今天就有這篇文章了。</p>
<p>這個主題是以 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 為基礎開發的，所以大部分的特性都繼承下來了，除了 Responsive Design 和 Twitter Live Stream 以外。</p>
<ul>
<li>Phase Beam 動態背景</li>
<li>自動讀取圖片的<code>alt</code>屬性，並在圖片下方顯示註解。</li>
<li>內建 <a href="http://fancyapps.com/fancybox/" target="_blank">Fancybox</a>，讓您輕鬆展示您的作品。</li>
<li>自動將 HTML5 video、iframe、object 等嵌入式影片縮放至頁面寬度。</li>
<li><a href="http://zespia.tw/hexo-theme-phase">預覽…</a></li>
</ul>
<p>Phase Beam 動態背景的效果非常絢麗，但是也非常吃資源，電腦或瀏覽器效能不佳的使用者開啟時可能會當機，至於 IE8，<del>你何時產生了我曾經積極支援過它的錯覺？</del></p>
<a id="more"></a>

<h2 id=" 安裝 ">安裝</h2>
<p>Octopress 版本：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre>cd octopress
git <span class="keyword">clone</span> git:<span class="comment">//github.com/tommy351/octopress-theme-phase.git .themes/phase</span>
rake install[<span class="string">'phase'</span>]
rake generate
</pre></td></tr></table></figure>

<p>為了推廣 Hexo，順便把主題移植過去了，往後的主題開發都會以 Hexo 為主，但仍會以 MIT License 開放原始碼，想要在 Octopress 使用的人可以自行開發移植版本。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre>cd hexo
git <span class="keyword">clone</span> git:<span class="comment">//github.com/tommy351/hexo-theme-phase.git themes/phase</span>
</pre></td></tr></table></figure>

<p>Hexo 版本安裝後別忘了將<code>_config.yml</code>內的<code>theme</code>參數調整為<code>phase</code>。</p>
<h2 id="FAQ">FAQ</h2>
<h3 id="Octopress 版和 Hexo 版有什麼差別？">Octopress 版和 Hexo 版有什麼差別？</h3>
<ul>
<li>Octopress 版沒有相簿（photo）和連結（link）兩種布局</li>
<li>部分樣式的微妙差別</li>
<li><del>Octopress 速度比較慢</del></li>
</ul>
<h3 id=" 如何編輯選單？">如何編輯選單？</h3>
<ul>
<li>Octopress 版本：編輯<code>source/_includes/custom/navigation.html</code>。</li>
<li>Phase 版本：編輯<code>_config.yml</code>的<code>menu</code>參數。</li>
</ul>
<h3 id=" 如何關閉 Fancybox？">如何關閉 Fancybox？</h3>
<p>對於 Chrome 來說，同時執行 Phase Beam 和 Fancybox 的動畫似乎是一件很吃力的事情，所以你也可以選擇關閉 Fancybox 功能。</p>
<ul>
<li>Octopress 版本：刪除<code>source/_includes/after_footer.html</code>的第 1 行。</li>
<li>Hexo 版本：<code>_config.yml</code>的<code>fancybox</code>參數調整為<code>false</code>。</li>
</ul>
<h3 id=" 如何關閉 Phase_Beam？">如何關閉 Phase Beam？</h3>
<p>我覺得用 Phase 還關閉 Phase Beam 實在是一件很沒有意義的事情，關閉了 Phase Beam 的 Phase 就只是一個背景黑漆漆的 Slash 而已，沒有任何特色，相較於 Slash 還少了一些功能，但是我還是稍微說明吧。</p>
<ul>
<li>Octopress 版本：刪除<code>source/_includes/after_footer.html</code>的第 2 行。</li>
<li>Hexo 版本：刪除<code>layout/_partial/after_footer.ejs</code>的最後一行。</li>
</ul>
<p>如果還有其他問題或想法，歡迎在下方留言。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/icsKsGRjMpstw.png" alt=""></p>
<p>在轉到 Hexo 之前，我一直都在使用這個<a href="http://zespia.tw/blog/2012/05/02/new-theme-phase/">私用主題 Phase</a>，曾經承諾過我用膩了就公開發佈，於是今天就有這篇文章了。</p>
<p>這個主題是以 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 為基礎開發的，所以大部分的特性都繼承下來了，除了 Responsive Design 和 Twitter Live Stream 以外。</p>
<ul>
<li>Phase Beam 動態背景</li>
<li>自動讀取圖片的<code>alt</code>屬性，並在圖片下方顯示註解。</li>
<li>內建 <a href="http://fancyapps.com/fancybox/" target="_blank">Fancybox</a>，讓您輕鬆展示您的作品。</li>
<li>自動將 HTML5 video、iframe、object 等嵌入式影片縮放至頁面寬度。</li>
<li><a href="http://zespia.tw/hexo-theme-phase">預覽…</a></li>
</ul>
<p>Phase Beam 動態背景的效果非常絢麗，但是也非常吃資源，電腦或瀏覽器效能不佳的使用者開啟時可能會當機，至於 IE8，<del>你何時產生了我曾經積極支援過它的錯覺？</del></p>
]]></summary>
    
      <category term="Hexo" scheme="http://zespia.tw/tags/Hexo/"/>
    
      <category term="Octopress" scheme="http://zespia.tw/tags/Octopress/"/>
    
      <category term="Node.js" scheme="http://zespia.tw/tags/Node.js/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[使用 Stream 來拷貝檔案]]></title>
    <link href="http://zespia.tw/blog/2012/12/06/nodejs-stream-copy-files/"/>
    <id>http://zespia.tw/blog/2012/12/06/nodejs-stream-copy-files/</id>
    <published>2012-12-05T16:14:46.000Z</published>
    <updated>2012-12-05T16:14:30.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iFFlrSnC6IrC8.jpg" alt="K 子 - ぬれ早苗 (id=16398495)"></p>
<blockquote>
<p><strong>Stream</strong> [strim] n. [C] 小河、溪流</p>
</blockquote>
<p>因為 Stream 有這樣的意思，所以找了一張有溪流的圖片當做頁首圖片，<del>要在 Pixiv 上找一張非 R-18 的濕身圖片真難</del>。</p>
<p>雖然 <a href="http://zespia.tw/hexo">Hexo</a> 本來就很快了，不過在 <a href="https://github.com/tommy351/hexo/commit/1bfc6324285d7cadeb30f2c4bf4e8ea5fc451d5e" target="_blank">0.1.8</a> 使用 <a href="http://nodejs.org/api/stream.html" target="_blank">Stream</a> 代替原本的檔案複製方法，使靜態檔案的生成速度更加快速。</p>
<a id="more"></a>

<p>原本的檔案複製方式是：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="function"><span class="keyword">function</span> <span class="title">copy</span><span class="params">(source, destination, callback)</span>{</span>
  fs.readFile(source, <span class="function"><span class="keyword">function</span><span class="params">(err, file)</span>{</span>
    <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;
    fs.writeFile(destination, file, callback);
  });
}
</pre></td></tr></table></figure>

<p>非常簡單，就是檔案讀取完後再將檔案寫入到目的地。這種方法必須將所有檔案讀取完成後才能寫入，將對地沒有效率多了，使用 <a href="http://nodejs.org/api/stream.html" target="_blank">Stream</a> 則是邊讀取邊寫入，當讀取完成後，寫入也差不多完成了，在處理大檔案時，差別更加明顯。</p>
<p>除了檔案讀寫以外，<a href="http://nodejs.org/api/stream.html" target="_blank">Stream</a> 也常用於靜態檔案伺服器，例如 <a href="http://www.senchalabs.org/connect/" target="_blank">Connect</a> 就是用這種方式來處理靜態檔案的。</p>
<p>用 <a href="http://nodejs.org/api/stream.html" target="_blank">Stream</a> 的方式來複製檔案，相較於原本的方式，也只不過是多了幾行程式碼而已，如下：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="function"><span class="keyword">function</span> <span class="title">copy</span><span class="params">(source, destination, callback)</span>{</span>
  <span class="keyword">var</span> rs = fs.createReadStream(source),
    ws = fs.createWriteStream(destination);
    
  rs.pipe(ws).on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span><span class="params">(err)</span>{</span>
    <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;
  });
  
  ws.on(<span class="string">'close'</span>, callback).on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span><span class="params">(err)</span>{</span>
    <span class="keyword">if</span> (err) <span class="keyword">throw</span> err;
  });
}
</pre></td></tr></table></figure>

<p>首先建立讀取 Stream <code>rs</code> 和寫入 Stream <code>ws</code>，使用 <code>rs.pipe</code> 讀取資料同時將資料寫入至 <code>ws</code>。</p>
<p>Stream 使用 <a href="http://nodejs.org/api/events.html" target="_blank">EventEmitter</a>，當結束或發生錯誤時會觸發事件，必須利用 <code>rs.on</code> 和 <code>ws.on</code> 來監聽事件。</p>
<p>這種方式實在有點麻煩，如果能寫成 <code>rs.pipe(ws, function(err, callback){})</code> 的形式就好了。</p>
<p><img src="http://i.minus.com/iwucHChl9EUD0.png" alt=""></p>
<p>根據這種方式實作的 Hexo 0.1.8，實測出來的速度是 1007 ms，而舊版為 2038 ms，平均大約快了 1.5~2 倍左右，只要改寫一點程式碼就能獲得這麼高的效能提昇，非常值得。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iFFlrSnC6IrC8.jpg" alt="K 子 - ぬれ早苗 (id=16398495)"></p>
<blockquote>
<p><strong>Stream</strong> [strim] n. [C] 小河、溪流</p>
</blockquote>
<p>因為 Stream 有這樣的意思，所以找了一張有溪流的圖片當做頁首圖片，<del>要在 Pixiv 上找一張非 R-18 的濕身圖片真難</del>。</p>
<p>雖然 <a href="http://zespia.tw/hexo">Hexo</a> 本來就很快了，不過在 <a href="https://github.com/tommy351/hexo/commit/1bfc6324285d7cadeb30f2c4bf4e8ea5fc451d5e" target="_blank">0.1.8</a> 使用 <a href="http://nodejs.org/api/stream.html" target="_blank">Stream</a> 代替原本的檔案複製方法，使靜態檔案的生成速度更加快速。</p>
]]></summary>
    
      <category term="Node.js" scheme="http://zespia.tw/tags/Node.js/"/>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[命運石之門（Steins;Gate）中文版]]></title>
    <link href="http://zespia.tw/blog/2012/11/19/steins-gate/"/>
    <id>http://zespia.tw/blog/2012/11/19/steins-gate/</id>
    <published>2012-11-18T16:36:38.000Z</published>
    <updated>2013-02-23T17:35:26.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iFsuGusXg32tv.jpg" alt=""></p>
<p>各位可還記得，5pb 的社長在去年的 FF18 宣布 Steins;Gate 即將推出中文化的<a href="http://gnn.gamer.com.tw/9/56049.html" target="_blank">消息</a>，然而說好的 2012 年春季到了，令人望眼欲穿的中文版依然沒有任何消息。</p>
<p>直到前幾個月，官方突然發佈了一個簡陋的<a href="http://www.gamecity.com.tw/steinsgate/" target="_blank">官方網站</a>，這才確定了中文版的發售日期──11 月 15 日，而且 PS3 版也將有中文版。</p>
<p>也許是因為 PS3 版的原因造成了中文版的延誤，然而 Xbox 360 的不幸可不僅止於此，發售前夕，Xbox 360 版因為日本生產進度延誤，導致遊戲發售日延後至 11 月底（<a href="http://xboxlife.tw/show.php?fid=2&amp;tid=3417" target="_blank">來源</a>）。</p>
<a id="more"></a>

<h2 id=" 外觀 ">外觀</h2>
<p>我購買的是 PS3 一般版，雖然換了新手機，不過照相技術還是一樣爛，有什麼好方法可以減少噪點？</p>
<p><img src="http://i.minus.com/ieXCDLObbv4Be.jpg" alt=""></p>
<p>正面和日版差不了多少，只是 Logo 稍微換了位置和上面加了「命運石之門」五個中文字而已。</p>
<p><img src="http://i.minus.com/iZcaSJ02gYrws.jpg" alt=""></p>
<p>背面的解說文理所當然的全中文化了。</p>
<p><img src="http://i.minus.com/iVP40V4XKbRWR.jpg" alt=""></p>
<p><img src="http://i.minus.com/ib1nYxaR7RS0Lp.jpg" alt=""></p>
<p>光碟的外觀沒有什麼差別，內附一本非常薄的中文說明書以及「命運石之門 感謝台灣」演唱會的資訊和光榮代理遊戲一貫會有的意見表。</p>
<h2 id=" 內容 ">內容</h2>
<p>比起外觀，內容更加重要，命運石之門的中文化非常徹底，也非常的在地化。</p>
<p><img src="http://i.minus.com/ifRU1iaiiFNgB.jpg" alt=""></p>
<p>TIPS 內的用語說明全中文化，而且還特別做了注音索引，可以用注音來查找用語。日本鄉民的常用語也被翻譯成台灣鄉民的常用語，令人遊玩時不禁會心一笑。</p>
<p><img src="http://i.minus.com/ijvONwlfUupOZ.jpg" alt=""></p>
<p>除了些許錯字以外，大部分的中文化都沒什麼問題，然而最讓人感到不習慣的大概就是人物名字的翻譯了，「桶子（ダル）」被翻成了「達魯」，「菲莉絲（フェイリス）」則是被翻成了「菲伊麗絲」，大概是為了配合麻由里常常把菲伊麗絲的名字唸成「非麗絲（フェリス）」而這樣翻譯。</p>
<p>雖然這兩個名字都沒有翻譯錯誤，但剛遊玩時讓我感到非常不習慣。</p>
<div class="video-container"><iframe src="//www.youtube.com/embed/OFHt2SJpiF4" frameborder="0" allowfullscreen></iframe></div>


<p>至於中文版獨家的中文 OP，在遊戲標題畫面中，會先播放日文 OP 再播放中文 OP；遊戲內則是播放日文 OP，比我想的好多了。</p>
<h2 id=" 結語 ">結語</h2>
<p><img src="http://i.minus.com/i7CuYrSU6Ou2m.jpg" alt=" あっきー人 - シュタインズゲート記念 (id=26694282)"></p>
<p>雖然等待了這麼久中文版才終於發售，不過中文化的翻譯品質讓人覺得這段等待時間非常值得，要是外傳《比翼雙飛的戀人（比翼恋理のだーりん）》也能中文化就好了。</p>
<p>經過 14 小時的奮鬥後，目前已經解出鈴羽結局了，剩餘的五個結局感覺還需要好些時間才能破完。</p>
<p><a href="http://masterwiki.net/steinsgate/index.php" target="_blank">Steins;Gate/ シュタインズ・ゲート 攻略・考察 Wiki</a></p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iFsuGusXg32tv.jpg" alt=""></p>
<p>各位可還記得，5pb 的社長在去年的 FF18 宣布 Steins;Gate 即將推出中文化的<a href="http://gnn.gamer.com.tw/9/56049.html" target="_blank">消息</a>，然而說好的 2012 年春季到了，令人望眼欲穿的中文版依然沒有任何消息。</p>
<p>直到前幾個月，官方突然發佈了一個簡陋的<a href="http://www.gamecity.com.tw/steinsgate/" target="_blank">官方網站</a>，這才確定了中文版的發售日期──11 月 15 日，而且 PS3 版也將有中文版。</p>
<p>也許是因為 PS3 版的原因造成了中文版的延誤，然而 Xbox 360 的不幸可不僅止於此，發售前夕，Xbox 360 版因為日本生產進度延誤，導致遊戲發售日延後至 11 月底（<a href="http://xboxlife.tw/show.php?fid=2&amp;tid=3417" target="_blank">來源</a>）。</p>
]]></summary>
    
      <category term="PS3" scheme="http://zespia.tw/tags/PS3/"/>
    
      <category term="遊戲" scheme="http://zespia.tw/tags/%E9%81%8A%E6%88%B2/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[新手機 Xperia S]]></title>
    <link href="http://zespia.tw/blog/2012/11/12/xperia-s/"/>
    <id>http://zespia.tw/blog/2012/11/12/xperia-s/</id>
    <published>2012-11-12T05:48:14.000Z</published>
    <updated>2013-02-28T15:00:55.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iZPlBKqBYIzo4.jpg" alt=" 因為手邊沒相機，所以拿網路上的照片代替 "></p>
<p>經過我三年的摧殘，上一支手機 <a href="http://www.sogi.com.tw/product/productInfo.aspx?pno=6621" target="_blank">Sony Ericsson S312</a> 終於壽終正寢，因為 <a href="http://en.wikipedia.org/wiki/FastPort" target="_blank">FastPort</a> 接觸不良而無法充電，這好像是 SE 社的手機很常發生的問題？</p>
<a id="more"></a>

<p><img src="http://i.minus.com/irvYgwAjPSI4N.jpg" alt=""></p>
<p>從這張照片可以看出上一支手機螢幕有好幾處刮傷，按鍵上的漆也有部分剝落了，不過還是能夠正常開機使用。</p>
<p>身為窮學生的我當然不可能去買什麼唉鳳 5、萬叉或淫河 S3 之類的天龍人手機，所以只能退而求其次，買一年前 Sony 推出的手機 <a href="http://www.sonymobile.com/global-zh/products/phones/xperia-s/" target="_blank">Xperia S</a>。</p>
<p>雖然是一年前的手機，不過以現今的觀點而言 CP 值挺高的。</p>
<ul>
<li>CPU：1.5GHz 雙核心 (Qualcomm MSM8260)</li>
<li>RAM：1G</li>
<li>ROM：32GB</li>
<li>螢幕：1280x720，342 dpi</li>
<li>相機：後鏡頭 12MP，前鏡頭 1.3MP</li>
<li>重量：144g</li>
<li>電池：1750mAh</li>
</ul>
<p>性能看起來不算差，不過 Sony 的調校有點廢就是了，目前正在考慮要不要刷機。</p>
<h2 id=" 優點 ">優點</h2>
<h3 id=" 相機 ">相機</h3>
<p>1200 萬畫素應該足以應付一般的照片拍攝了，而且這支手機附有快門鍵，可以像一般的數位相機一樣半按對焦、全按拍攝，不過缺點就是對焦的速度有點慢，而且有些過度修飾。</p>
<h3 id=" 螢幕超讚 ">螢幕超讚</h3>
<p>不得不說，這螢幕真他媽的讚，342 dpi 根本看不到半點鋸齒或顆粒，真希望我的電腦螢幕也有這麼高的 dpi。（窮學生可買不起 Macbook Pro with Retina Display 啊！）</p>
<h3 id=" 喇叭很大聲 _ 你在大聲什麼啦 ">喇叭很大聲 <del>你在大聲什麼啦</del></h3>
<p><img src="http://i.minus.com/i76S8YXKlmHM1.jpg" alt=""></p>
<p>上一支手機的喇叭很小聲，震動也很小，<del>根本不能拿來當按摩器用</del>，害我常常漏接電話。</p>
<p>Xperia S 的鈴聲就非常大聲了，大概是因為有 xLOUD 技術加持的地步。</p>
<h2 id=" 缺點 ">缺點</h2>
<h3 id=" 透明光帶 ">透明光帶</h3>
<p><img src="http://i.minus.com/idbYLZD3wdZIt.jpg" alt=""></p>
<p>這是優點也是缺點，當初就是被透明光帶的外觀所吸引，然而 Xperia S 的按鍵卻不是放在透明光帶上，也不是放在透明光帶上的那三個小點，而是這兩者之間一個非常曖昧的位置，所以要按這三個按鍵最好的方式就是──從光帶的位置往上滑動。</p>
<h3 id=" 不能插記憶卡 ">不能插記憶卡</h3>
<p><img src="http://i.minus.com/iJFQWYEGu8zoa.png" alt="32GB 中有 2GB 可用來安裝應用程式，其他使用者可用的部份為 25.8GB"></p>
<p>雖然這是個缺點，不過並不會對我帶來太大麻煩，內建的 32GB 對我而言已經非常足夠了。</p>
<h3 id=" 不能換電池 ">不能換電池</h3>
<p><img src="http://i.minus.com/ibuURr9UHsmu42.png" alt=""></p>
<p>雖然用到目前尚未出現非得更換電池的狀況，不過這的確是一個滿機車的設定，現在的手機怎麼都學起 iPhone 來了。</p>
<p>而智慧型手機這種東西，令人懷疑是不是設有漏電裝置之類的，只是用網路看漫畫而已，就能在一小時內減少 10% 電力。</p>
<h2 id=" 結論 ">結論</h2>
<p>雖然有些缺點，不過依然瑕不掩瑜，空機價只要不到 13000 元，真的是一支 CP 值很高的手機。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iZPlBKqBYIzo4.jpg" alt=" 因為手邊沒相機，所以拿網路上的照片代替 "></p>
<p>經過我三年的摧殘，上一支手機 <a href="http://www.sogi.com.tw/product/productInfo.aspx?pno=6621" target="_blank">Sony Ericsson S312</a> 終於壽終正寢，因為 <a href="http://en.wikipedia.org/wiki/FastPort" target="_blank">FastPort</a> 接觸不良而無法充電，這好像是 SE 社的手機很常發生的問題？</p>
]]></summary>
    
      <category term="Android" scheme="http://zespia.tw/tags/Android/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Hexo 更新至 0.1]]></title>
    <link href="http://zespia.tw/blog/2012/10/29/hexo-update-0.1/"/>
    <id>http://zespia.tw/blog/2012/10/29/hexo-update-0.1/</id>
    <published>2012-10-28T16:25:37.000Z</published>
    <updated>2013-03-02T10:23:49.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ibn0sBufi4xK4S.jpg" alt=" らぐほのえりか - モリサマー (id=31068919)"></p>
<p><strong>森夏的ㄋㄟㄋㄟ讚！</strong><del>有沒有最近作者都用圖片來騙人的八卦</del></p>
<p>Hexo 發佈大約兩週之後，你可能會懷疑 Hexo 怎麼都沒有任何新消息，說好要補完的文件也毫無動靜。</p>
<p>其實是因為這兩週我都在製作 0.1 版的更新，主要是為了修改之前的 bug，並增加擴充性。</p>
<a id="more"></a>

<h2 id="0-0_→_0-1">0.0 → 0.1</h2>
<p>我盡量不讓使用方式的變更幅度太大，不過為了擴充性，還是得稍微改變一下，那麼，該如何從 0.0.6 升級到 0.1 呢？</p>
<ol>
<li><p>透過 <a href="https://npmjs.org/" target="_blank">npm</a> 將 Hexo 升級至 0.1。</p>
<pre><code> npm <span class="operator"><span class="keyword">update</span> -g</span>
</code></pre></li>
<li><p>升級內建的 <a href="https://github.com/tommy351/hexo-theme-light" target="_blank">Light</a> 主題。</p>
<pre><code> <span class="built_in">cd</span> themes/light
 git pull
</code></pre></li>
<li><p>更新 <code>_config.yml</code>，以下是 0.1 版的預設配置，請依照個人需求自行調整。</p>
</li>
<li><p>修改 <code>package.json</code>。</p>
</li>
<li><p>若你之前有設定過佈署的話，請調整 <code>_config.yml</code> 中 <code>deploy</code> 的設定。</p>
</li>
</ol>
<p><strong>以上步驟完成後，即可使用 0.1 的 Hexo 了！</strong></p>
<h2 id=" 新功能 ">新功能</h2>
<p>0.1 當然不是白升級的，我加入了一些 <del>無關緊要的</del> 新功能。</p>
<h3 id="Heroku_ 佈署 ">Heroku 佈署</h3>
<p>除了 <a href="https://github.com" target="_blank">GitHub</a> 之外，0.1 新增了 <a href="http://www.heroku.com/" target="_blank">Heroku</a> 的支援，雖然 <a href="http://www.heroku.com/" target="_blank">Heroku</a> 的使用本來就非常簡易，但身為一名 <del>懶人</del>，能夠輕鬆設定當然是再好也不過了。</p>
<p>我將佈署寫成了附加元件（Extension）的形式，因此日後所有的佈署方式應該都只需要三個步驟便能完成設定。</p>
<ol>
<li><p>設定</p>
<p>修改 <code>_config.yml</code> 中 <code>deploy</code> 的設定，<code>repository</code> 填入 Heroku repo 的連結。</p>
</li>
<li><p>建立</p>
<p>執行以下指令。</p>
<pre><code> hexo setup_deploy
</code></pre><p>Hexo 便會在資料夾中建立 <code>Procfile</code> 和 <code>app.js</code> 兩個檔案。Hexo 使用 <a href="http://www.senchalabs.org/connect/" target="_blank">Connect</a> 處理靜態檔案。</p>
</li>
<li><p>佈署</p>
<p>執行以下指令。</p>
<pre><code> hexo deploy
</code></pre><p>然後就可以去泡杯咖啡等佈署完成了！</p>
</li>
</ol>
<h3 id=" 附加元件 ">附加元件</h3>
<p>0.1 新增了更多種的附加元件（Extension），所有能夠分離的模組幾乎都成為了附加元件，目前總共有 7 種附加元件，分別是：</p>
<ul>
<li><strong>Generator</strong>：負責建立靜態檔案</li>
<li><strong>Renderer</strong>：負責處理模版檔案</li>
<li><strong>Helper</strong>：模版檔案內的函數</li>
<li><strong>Deployer</strong>：負責佈署靜態檔案</li>
<li><strong>Processor</strong>：負責處理原始檔案</li>
<li><strong>Tag</strong>：文章檔案內的函數</li>
<li><strong>Console</strong>：命令列介面（CLI）</li>
</ul>
<p>Hexo 使用以上的附加元件來建立靜態檔案，而執行步驟大致上為：</p>
<p>Processor (with Tag) → Renderer (with Helper) → Generator</p>
<p>Hexo 已事先內建了一些必須的附加元件：</p>
<ul>
<li><strong>Generator</strong>：負責建立靜態檔案<ul>
<li>home：首頁</li>
<li>post：文章</li>
<li>page：分頁</li>
<li>category：分類彙整</li>
<li>tag：標籤彙整</li>
<li>archive：文章彙整（所有文章、每年文章、每月文章）</li>
</ul>
</li>
<li><strong>Renderer</strong>：負責處理模版檔案<ul>
<li>ejs：處理 <a href="https://github.com/visionmedia/ejs" target="_blank">EJS</a> 檔案（.ejs）</li>
<li>markdown：處理 <a href="http://daringfireball.net/projects/markdown/" target="_blank">Markdown</a> 檔案（.md, .markdown, .mkd, .mkdn, .mdwn, .mdtxt, .mdtext）</li>
<li>stylus：處理 <a href="http://learnboost.github.com/stylus/" target="_blank">Stylus</a> 檔案，內含 <a href="http://visionmedia.github.com/nib/" target="_blank">nib</a>（.styl, .stylus）</li>
<li>swig：處理 <a href="http://paularmstrong.github.com/swig/" target="_blank">Swig</a> 檔案（.swig）</li>
<li>yaml：處理 <a href="http://www.yaml.org/" target="_blank">Yaml</a> 檔案（.yml, .yaml）</li>
</ul>
</li>
<li><strong>Helper</strong>：模版檔案內的函數<ul>
<li>css：快速加入 CSS 檔案</li>
<li>js：快速加入 JS 檔案</li>
<li>escape：過濾 <code>&lt;</code>, <code>&gt;</code>, <code>&#39;</code>, <code>&quot;</code> 等符號</li>
<li>trim：過濾空白</li>
<li>strip：過濾 HTML 標籤</li>
<li>partial：載入其他模版檔案（使用方式與 <a href="https://github.com/publicclass/express-partials" target="_blank">express-partials</a> 相同）</li>
<li>titlecase：將標題轉為合適的大小寫</li>
<li>tagcloud：標籤雲</li>
</ul>
</li>
<li><strong>Deployer</strong>：負責佈署靜態檔案<ul>
<li>github</li>
<li>heroku</li>
</ul>
</li>
<li><strong>Processor</strong>：負責處理原始檔案<ul>
<li>clear：清理上次建立的靜態檔案（清理 <code>public</code> 資料夾）</li>
<li>load：載入原始檔案</li>
<li>analyze：分析原始檔案</li>
<li>theme：安裝主題</li>
</ul>
</li>
<li><strong>Tag</strong>：文章檔案內的函數（使用方式都和 <a href="http://octopress.org" target="_blank">Octopress</a> 差不多）<ul>
<li>blockquote：插入 Block quote。</li>
<li>code：插入程式碼。</li>
<li>gist：插入 <a href="https://gist.github.com/" target="_blank">Gist</a> 程式碼。</li>
<li>jsfiddle：插入 <a href="http://jsfiddle.net/" target="_blank">jsFiddle</a> 程式碼。</li>
<li>pullquote：插入 <a href="http://en.wikipedia.org/wiki/Pull_quote" target="_blank">Pull quote</a></li>
<li>youtube：插入 <a href="https://www.youtube.com/" target="_blank">Youtube</a> 影片</li>
<li>vimeo：插入 <a href="http://vimeo.com/" target="_blank">Vimeo</a> 影片 </li>
</ul>
</li>
<li><strong>Console</strong>：命令列介面（CLI）<ul>
<li>init：初始化</li>
<li>config：顯示 <code>_config.yml</code> 的內容</li>
<li>generate：建立靜態檔案</li>
<li>server：開啟伺服器</li>
<li>deploy：佈署</li>
<li>new：建立新的文章</li>
</ul>
</li>
</ul>
<p>有些附加元件因為需要另外安裝模組，所以沒有放進主程式內：</p>
<ul>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/generator/feed" target="_blank">hexo-generator-feed</a>：建立 RSS Feed</li>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/generator/sitemap" target="_blank">hexo-generator-sitemap</a>：建立 Sitemap</li>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/renderer/coffeescript" target="_blank">hexo-renderer-coffeescript</a>：處理 <a href="http://coffeescript.org/" target="_blank">CoffeeScript</a> 檔案（.coffee）</li>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/renderer/haml" target="_blank">hexo-renderer-haml</a>：處理 <a href="http://haml.info/" target="_blank">Haml</a> 檔案（.haml）</li>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/renderer/jade" target="_blank">hexo-renderer-jade</a>：處理 <a href="http://jade-lang.com/" target="_blank">Jade</a> 檔案（.jade）</li>
<li><a href="https://github.com/tommy351/hexo-plugins/tree/master/renderer/less" target="_blank">hexo-renderer-less</a>：處理 <a href="http://lesscss.org/" target="_blank">Less</a> 檔案（.less）</li>
</ul>
<p>使用 <code>npm install &lt;plugin&gt;</code> 安裝完畢之後，在 <code>_config.yml</code> 的 <code>plugins</code> 新增外掛名稱即可使用。</p>
<p>附加元件的寫法可以參照 <a href="https://github.com/tommy351/hexo/tree/master/lib" target="_blank">原始碼</a>。</p>
<h2 id=" 小改變 ">小改變</h2>
<h3 id=" 伺服器新增記錄功能 ">伺服器新增記錄功能</h3>
<p>Hexo 利用 <a href="http://www.senchalabs.org/connect/" target="_blank">Connect</a> 內建的 <a href="http://www.senchalabs.org/connect/logger.html" target="_blank">logger</a> 功能來顯示記錄，使用方式非常簡單，修改 <code>_config.yml</code> 即可開啟。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre><span class="attribute">logger</span>: <span class="string">true</span>
<span class="attribute">logger_format:</span>
</pre></td></tr></table></figure>

<p>記錄的格式 <code>logger_format</code> 可參考 Connect 的 <a href="http://www.senchalabs.org/connect/logger.html" target="_blank">文件</a> 自行修改。</p>
<h3 id="i18n">i18n</h3>
<p>雖然相關的程式碼已經寫好了，不過還沒有寫出「載入語言檔」的功能，目前僅能套用於 <a href="http://momentjs.com/" target="_blank">Moment.js</a>，也就是 Hexo 用來解析、顯示時間的模組上。修改 <code>_config.yml</code> 中的 <code>language</code> 即可使用此功能（請使用 <a href="http://www.w3.org/International/articles/language-tags/" target="_blank">IETF 格式</a>，例如正體中文即為 <code>zh-TW</code>）。</p>
<h2 id=" 改進 ">改進</h2>
<p>Hexo 發佈後，立刻就有很多評論指出我沒有發現到的 Bug，非常感謝各位 <del>白老鼠</del> 大大的支持，0.1 修復了以下的問題。</p>
<ul>
<li>無文章時無法建立檔案</li>
<li>有時執行 <code>hexo generate</code> 會莫名其妙中斷的情況</li>
<li>以字串當作文章標籤會導致誤判的問題</li>
<li>在 Windows 環境下，路徑的分隔字元從 <code>/</code> 改為 <code>\</code></li>
<li>以及一些修到一半忘記了的 Bug…</li>
</ul>
<p>如果還有任何問題的話，歡迎在 GitHub 上開 <a href="https://github.com/tommy351/hexo/issues" target="_blank">issue</a> 或提交 <a href="https://github.com/tommy351/hexo/pulls" target="_blank">pull request</a>。</p>
<h2 id=" 結論 ">結論</h2>
<p>0.1 似乎僅完成了上篇文章中開發目標的其中三項，看來未來仍有一段路要走。我最近發現，Render 似乎占了 Generate 很大一部分的時間，如果把模版改為 <a href="http://paularmstrong.github.com/swig/" target="_blank">Swig</a> 不知道會不會好些。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/ibn0sBufi4xK4S.jpg" alt=" らぐほのえりか - モリサマー (id=31068919)"></p>
<p><strong>森夏的ㄋㄟㄋㄟ讚！</strong><del>有沒有最近作者都用圖片來騙人的八卦</del></p>
<p>Hexo 發佈大約兩週之後，你可能會懷疑 Hexo 怎麼都沒有任何新消息，說好要補完的文件也毫無動靜。</p>
<p>其實是因為這兩週我都在製作 0.1 版的更新，主要是為了修改之前的 bug，並增加擴充性。</p>
]]></summary>
    
      <category term="Node.js" scheme="http://zespia.tw/tags/Node.js/"/>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
      <category term="Hexo" scheme="http://zespia.tw/tags/Hexo/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Hexo 颯爽登場！]]></title>
    <link href="http://zespia.tw/blog/2012/10/11/hexo-debut/"/>
    <id>http://zespia.tw/blog/2012/10/11/hexo-debut/</id>
    <published>2012-10-11T07:22:47.000Z</published>
    <updated>2012-10-29T14:31:15.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ibpMKNkpRxVwsK.jpg" alt=" ちり - Super sonic Child (id=29663134)"></p>
<p>我想每個 <a href="http://octopress.org/" target="_blank">Octopress</a> 的使用者一定都有這樣的煩惱──隨著文章數量愈來愈多，檔案建立的速度愈來愈慢。本站目前已累積至 54 篇文章，每次建立檔案時，至少都需要花費一分鐘以上的時間。</p>
<p>或許是因為 Ruby 天生就比較慢，而這種問題未來似乎也不會改善，<a href="https://github.com/mojombo/jekyll" target="_blank">Jekyll</a> 和 <a href="http://octopress.org/" target="_blank">Octopress</a> 已經一段時間沒有更新，那麼唯一的解決方案只有另覓其他 Blog Framework 了。</p>
<a id="more"></a>

<h2 id=" 尋覓 ">尋覓</h2>
<p>由於最近都在玩 Node.js，便決定從它開始下手，我試著在網路上找了一下，然而現有的 Blog Framework 看來都過於簡單；只有一個除外：<a href="https://github.com/bevry/docpad" target="_blank">DocPad</a>。</p>
<p><a href="https://github.com/bevry/docpad" target="_blank">DocPad</a> 擴充性十足，而且一直有在更新，但是 <a href="https://github.com/bevry/docpad" target="_blank">DocPad</a> 又令人感覺過於複雜，難以上手。</p>
<p><strong>參考資料</strong>：<a href="http://blog.bmannconsulting.com/node-static-site-generators/" target="_blank">Node based static site generators - Boris Mann</a></p>
<h2 id=" 造輪子 ">造輪子</h2>
<p><img src="http://i.minus.com/iUuOEU0Yw0JbB.png" alt=""></p>
<p>那麼唯一的方式，大概只剩自造輪子了。</p>
<p>Prototype 的速度相當不錯，在 2 秒內即可將全站的資料都建立完成。之後的一個月，便以此為基礎擴充、加強，最後的成品即是──Hexo！</p>
<p>你或許會好奇這篇文章的開頭為何要放一張與內容毫不相關的圖片，雖然放不相關圖片是傳統，不過這次的開頭圖片可是有關聯性的！</p>
<p>我想 <a href="http://octopress.org/" target="_blank">Octopress</a> 的名稱來源也許是 Octal<em>（八進制）</em> + Press，因此我便以十六進制<em>（hexadecimal，縮寫為 hex）</em>來取名。</p>
<p>而為啥會扯上這張圖片呢？因為 Hexo 的發音很類似於へそ<em>（肚臍）</em>。</p>
<h2 id="Hexo">Hexo</h2>
<p>前面扯了那麼多廢話，該來談談 Hexo 的細節了。</p>
<p>Hexo 和 <a href="https://github.com/mojombo/jekyll" target="_blank">Jekyll</a>、<a href="http://octopress.org/" target="_blank">Octopress</a> 有許多相似點，大部分的使用都和其無異。</p>
<h3 id=" 安裝 ">安裝</h3>
<p>前提是必須先安裝 Node.js，至於怎麼安裝自己 Google 吧</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>npm install hexo -g
</pre></td></tr></table></figure>

<p>僅需一步就把 Hexo 本體和所有相依套件安裝完畢，很簡單吧？</p>
<h3 id=" 初始化 ">初始化</h3>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>hexo init &lt;folder&gt;
</pre></td></tr></table></figure>

<p>如果指定 <code>&lt;folder&gt;</code>，便會在目前的資料夾建立一個名為 <code>&lt;folder&gt;</code> 的新資料夾；否則會在目前資料夾初始化。</p>
<p>設定請參閱 <a href="https://github.com/tommy351/hexo/wiki/Configure" target="_blank">Wiki</a>，我還不太會寫文件，如果看不懂的話請不要鞭太大力。</p>
<h3 id=" 佈署 ">佈署</h3>
<p>0.1.0 版後，佈署方式有所調整，請參見 <a href="https://github.com/tommy351/hexo/wiki/Deploy" target="_blank">https://github.com/tommy351/hexo/wiki/Deploy</a>。</p>
<h3 id=" 建立文章、分頁 ">建立文章、分頁</h3>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre>hexo new_post &lt;title&gt;
hexo new_page &lt;title&gt;
</pre></td></tr></table></figure>

<p>Hexo 已經內建一些外掛了，你可以用這些外掛快速插入元素：</p>
<ul>
<li>Block Quote</li>
<li>Code Block</li>
<li>Gist</li>
<li>jsFiddle</li>
<li>Pull Quote</li>
<li>Vimeo</li>
<li>Youtube</li>
</ul>
<p>外掛的詳細使用方式之後會在 <a href="https://github.com/tommy351/hexo/wiki" target="_blank">Wiki</a> 補完。</p>
<h3 id=" 生成檔案 ">生成檔案</h3>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>hexo generate
</pre></td></tr></table></figure>

<p>依照環境不同，速度可能會有差別，在我的電腦上需要大約 4 秒鐘。</p>
<h3 id=" 伺服器 ">伺服器</h3>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>hexo server
</pre></td></tr></table></figure>

<p>伺服器會跑在 <code>http://localhost:port</code> （<code>port</code> 預設為 <code>4000</code>，可在 <code>_config.yml</code> 設定），也可以搭配 <a href="http://pow.cx/" target="_blank">Pow</a> 使用：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre><span class="built_in">cd</span> ~/.pow
ln <span class="operator">-s</span> /path/to/myapp
</pre></td></tr></table></figure>

<p>基本使用差不多就是這樣子，非常簡單。至於外掛和主題的撰寫方法，我之後會在 <a href="https://github.com/tommy351/hexo/wiki" target="_blank">Wiki</a> 補完，你也可以嘗試看看<a href="https://github.com/tommy351/hexo" target="_blank">原始碼</a>。</p>
<h2 id=" 結論 ">結論</h2>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 還是很棒，只是速度不夠快，我未來將會轉換到 Hexo，以下是未來的開發目標：</p>
<ul>
<li>Windows 測試（我現在只有在 Mac 上使用過，其他平台壓根不知道能不能運作）</li>
<li>完成 <a href="https://github.com/tommy351/hexo-theme-light" target="_blank">Light</a> 主題（就是你目前看到的這個主題，之後我會把 Phase 移植過來並順便釋出）</li>
<li>FTP Deploy</li>
<li>後台管理功能</li>
<li>預覽伺服器</li>
<li>檔案監看</li>
<li>增加擴充性（目前僅有三種外掛：Generator、Helper 和 Renderer，未來將會增加 Preprocessor 和 Tag）</li>
</ul>
<p>如果你有興趣的話，歡迎試用看看，有任何問題的話歡迎留言。</p>
<iframe src="http://ghbtns.com/github-btn.html?user=tommy351&repo=hexo&type=watch&count=true"
  allowtransparency="true" frameborder="0" scrolling="0" width="62px" height="20px"></iframe>

]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/ibpMKNkpRxVwsK.jpg" alt=" ちり - Super sonic Child (id=29663134)"></p>
<p>我想每個 <a href="http://octopress.org/" target="_blank">Octopress</a> 的使用者一定都有這樣的煩惱──隨著文章數量愈來愈多，檔案建立的速度愈來愈慢。本站目前已累積至 54 篇文章，每次建立檔案時，至少都需要花費一分鐘以上的時間。</p>
<p>或許是因為 Ruby 天生就比較慢，而這種問題未來似乎也不會改善，<a href="https://github.com/mojombo/jekyll" target="_blank">Jekyll</a> 和 <a href="http://octopress.org/" target="_blank">Octopress</a> 已經一段時間沒有更新，那麼唯一的解決方案只有另覓其他 Blog Framework 了。</p>
]]></summary>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
      <category term="Node.js" scheme="http://zespia.tw/tags/Node.js/"/>
    
      <category term="Hexo" scheme="http://zespia.tw/tags/Hexo/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[愛夏的煉金工房 ─ 黃昏大地之煉金術士]]></title>
    <link href="http://zespia.tw/blog/2012/09/05/atelier-ayesha/"/>
    <id>http://zespia.tw/blog/2012/09/05/atelier-ayesha/</id>
    <published>2012-09-05T10:39:00.000Z</published>
    <updated>2014-04-13T08:58:04.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ibobbTlfxZgITW.jpg" alt=" 阿霞的鍊金工房 ─ 黃昏市場之煉金術士 "></p>
<p>當初看到煉金術士系列新作的名稱時，便不禁噗哧笑了出來，這名稱實在太具有台灣風味，<del>如果主角是一位提著菜籃的歐巴桑的話絕對會變神作</del>。</p>
<a id="more"></a>

<div class="video-container"><br><iframe width="560" height="315" src="http://www.youtube.com/embed/MQNuGj8cbKs" frameborder="0" allowfullscreen></iframe><br></div>

<p>本作的世界觀為即將步向毀滅的世界，所有的物資都將消耗殆盡，能稱作國家的統治組織早已瓦解，人類的繁榮時代已經落幕，過去由煉金術打造的世界，如今只剩斷垣殘壁。</p>
<p>而主角「<strong>愛夏</strong>」居住於偏僻的遺跡旁，一個人以賣藥維生。數年前，妹妹「<strong>妮歐</strong>」在出外採集藥草的過程中失蹤了。</p>
<p>某天，愛夏一如往常的去附近的藥草園採集時，耳中突然響起妮歐的呼喚，但是一瞬間便消失了。此時，<del>愉悅叔叔</del>「<strong>奇斯葛里夫</strong>」登場，要求愛夏學習煉金術，唯有這樣才能找回妮歐。</p>
<p>故事從此展開，系統沒有多大變化，新增了一個日記系統，必須集得一定的點數才能寫日記（為何愛夏不直接寫就好了，這筆記是有結界嗎）。裝備煉成取消，所有的裝備都必須從魔物或任務取得，若要強化武器則是自己煉成砥石（武器） / 染料（防具），並在物品欄使用。</p>
<p>相較於前作，這代的畫面真的變得很讚，人物模組更加精細，畫面也變得流暢許多，然而缺點就是取消了立繪、說話時的嘴型非常詭異，<del>以及闇榮的併購使得價錢提昇了一些</del>。</p>
<p>這篇文章本來在 7 月時就該寫好了，不過一時發懶所以乾脆等到中文版推出時再發佈。中文版的品質很不錯，看起來似乎沒有什麼嚴重的問題。</p>
<p><img src="http://i.minus.com/ib29BrsOQgfTkJ.jpg" alt=""></p>
<p>原本日文版隨附的 World Guide CD 是奇斯，中文版幸好不再是奇斯而是琳卡了，要不然我大概會愉悅到炸。</p>
<p>目前只玩了一輪，已經破出三種結局，但還沒掌握出製造最佳裝備的秘訣。之前買的遊戲有一些都還沒玩，所以決定先把那些遊戲破完，目前正在很努力的玩戰鬥系統爛到爆的 TOV。</p>
<h2 id=" 結局 ">結局</h2>
<p>因為目前找不到 CG，所以先寫出結局列表吧。</p>
<ul>
<li>✓ 旅の終わり：第三年 3/30 時沒有滿足其他結局條件（BAD END）</li>
<li>✓ 魔法使いと錬金術士：★ベルちゃんのお手伝い★達成（貝兒 END）</li>
<li>✓ 女性発掘屋の未来：完成★レジナさんのお手伝い★達成（瑞吉娜 END）</li>
<li>そして三人で：★リンカさんのお手伝い★達成（琳卡 END）</li>
<li>ハンターライフ：★ユーリスさんのお手伝い★達成（尤利斯 END）</li>
<li>真実の探求：★2 つの揺り籠★達成（奇斯 END）</li>
<li>働くおねえさん：達成一定數量任務</li>
<li>秘宝ハンター：品評會 6 次優勝</li>
<li>女子会！：「★ベルちゃんのお手伝い★」「★未来の美少女★」「★牛飼いの秘密★」「★ニオとの新たな約束★」達成</li>
<li>賢者の庵：「真実の探求」「働くおねえさん」「秘宝ハンター」「女子会！」の条件を達成</li>
</ul>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/ibobbTlfxZgITW.jpg" alt=" 阿霞的鍊金工房 ─ 黃昏市場之煉金術士 "></p>
<p>當初看到煉金術士系列新作的名稱時，便不禁噗哧笑了出來，這名稱實在太具有台灣風味，<del>如果主角是一位提著菜籃的歐巴桑的話絕對會變神作</del>。</p>
]]></summary>
    
      <category term="PS3" scheme="http://zespia.tw/tags/PS3/"/>
    
      <category term="遊戲" scheme="http://zespia.tw/tags/%E9%81%8A%E6%88%B2/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Node.js 初試 ─ Nyanko]]></title>
    <link href="http://zespia.tw/blog/2012/07/14/nodejs-nyanko/"/>
    <id>http://zespia.tw/blog/2012/07/14/nodejs-nyanko/</id>
    <published>2012-07-13T16:14:00.000Z</published>
    <updated>2012-10-10T16:37:31.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iKst8nFEGcU8A.png" alt=""></p>
<p>數個月前，接到了來自 <a href="http://caramel623.k2-ani.com/" target="_blank">卡梅爾 Anime</a> 的委託，請我重新設計一個 <a href="http://wordpress.org/" target="_blank">WordPress</a> 主題，因為我當時正忙著準備備審資料，因此而暫時擱置了一段時間。</p>
<p>又過了一個月，我加入了畢籌會（畢業典禮籌劃會），忙著 <del>和妹子聊天</del> 製作畢業影片，而完全忽略了這回事。</p>
<p>直到畢業後，我突然想起這件事，便決定開始著手進行；然而因為去年提交 <a href="http://wordpress.org/" target="_blank">WordPress</a> 主題一直被退件令我一直懷恨在心，我毅然決定捨棄 <a href="http://wordpress.org/" target="_blank">WordPress</a>，自己從頭打造一個類似於 <a href="http://wordpress.org/" target="_blank">WordPress</a> 的 CMS 系統。</p>
<a id="more"></a>

<h2 id=" 序章 ">序章</h2>
<p><img src="http://i.minus.com/iEfVZ8aIjqOKG.png" alt=""></p>
<p>在進入本文之前，先說明一下何謂 <a href="http://nodejs.org/" target="_blank">Node.js</a> 吧：</p>
<p><a href="http://nodejs.org/" target="_blank">Node.js</a> 是一個 JavaScript 函式庫，使用了 <a href="http://zh.wikipedia.org/wiki/V8_%28JavaScript%E5%BC%95%E6%93%8E%29" target="_blank">V8 引擎</a> 讓 JavaScript 能在伺服器上執行，其事件驅動、非阻塞式 I/O 的形式使 <a href="http://nodejs.org/" target="_blank">Node.js</a> 能夠高效運作，模組化的規格使其便於開發。（有錯請鞭）</p>
<p>總而言之，<strong><a href="http://nodejs.org/" target="_blank">Node.js</a> 很好用</strong>。</p>
<h2 id=" 安裝 ">安裝</h2>
<p><a href="http://nodejs.org/" target="_blank">Node.js</a> 的安裝非常簡單，只要安裝 <a href="https://github.com/creationix/nvm/" target="_blank">nvm</a> 及 <a href="http://npmjs.org/" target="_blank">npm</a> 即可。（以下以 Mac 為例）</p>
<p><a href="https://github.com/creationix/nvm/" target="_blank">nvm</a> 就是類似於 <a href="https://rvm.io/" target="_blank">rvm</a> 的版本管理工具，可隨意安裝、替換不同的 <a href="http://nodejs.org/" target="_blank">Node.js</a> 版本。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre><span class="variable">$ </span>git clone <span class="symbol">git:</span>/<span class="regexp">/github.com/creationix</span><span class="regexp">/nvm.git ~/nvm</span>
</pre></td></tr></table></figure>

<p>安裝完後必須在 <code>.bash_profile</code> 加入以下內容才可直接使用。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>. ~/<span class="preprocessor">.nvm</span>/nvm<span class="preprocessor">.sh</span>
</pre></td></tr></table></figure>

<p>而 <a href="http://npmjs.org/" target="_blank">npm</a> 則是類似於 <a href="http://rubygems.org/" target="_blank">gem</a> 的模組管理工具，只要安裝 <a href="http://nodejs.org/" target="_blank">Node.js</a> 就會附贈，不需要另外安裝。</p>
<h2 id=" 模組 ">模組</h2>
<p><a href="http://nodejs.org/" target="_blank">Node.js</a> 雖然還是個剛起步的應用，不過已有很多的現成模組可供使用。以下是我用到的模組：</p>
<ul>
<li><a href="http://expressjs.com/" target="_blank">Express</a>：處理瀏覽器請求，用它做出 <a href="http://zh.wikipedia.org/wiki/REST" target="_blank">REST</a> 架構簡直小菜一碟。</li>
<li><a href="http://www.senchalabs.org/connect/" target="_blank">Connect</a>：<a href="http://expressjs.com/" target="_blank">Express</a> 的基礎，<a href="http://expressjs.com/" target="_blank">Express</a> 的許多功能都是從 <a href="http://www.senchalabs.org/connect/" target="_blank">Connect</a> 借來的，不過我只是要用它的 Gzip middleware 而已。</li>
<li><a href="https://github.com/visionmedia/ejs" target="_blank">EJS</a>：模版引擎之一，<a href="http://nodejs.org/" target="_blank">Node.js</a> 預設使用 <a href="http://jade-lang.com/" target="_blank">Jade</a>，但是 <a href="http://jade-lang.com/" target="_blank">Jade</a> 實在簡潔到讓人看不懂，所以決定使用 <a href="https://github.com/visionmedia/ejs" target="_blank">EJS</a>。</li>
<li><a href="https://github.com/LearnBoost/stylus" target="_blank">Stylus</a>：本來想繼續使用 <a href="http://sass-lang.com/" target="_blank">Sass</a>，後來發現 <a href="https://github.com/LearnBoost/stylus" target="_blank">Stylus</a> 的語法更加簡潔，而且與 <a href="http://expressjs.com/" target="_blank">Express</a> 的配合度極加！</li>
<li><a href="https://github.com/visionmedia/nib" target="_blank">Nib</a>：<a href="https://github.com/LearnBoost/stylus" target="_blank">Stylus</a> 之於 <a href="https://github.com/visionmedia/nib" target="_blank">Nib</a> 猶如 <a href="http://sass-lang.com/" target="_blank">Sass</a> 之於 <a href="http://compass-style.org/" target="_blank">Compass</a>，<a href="https://github.com/visionmedia/nib" target="_blank">Nib</a> 內建許多方便的 CSS3 工具。</li>
<li><a href="https://github.com/kissjs/node-mongoskin" target="_blank">Mongoskin</a>：使用簡易的 <a href="http://www.mongodb.org/" target="_blank">MongoDB</a> 工具，大部分的函數都和原本的 <a href="http://www.mongodb.org/" target="_blank">MongoDB</a> 很像，但是可以省掉開啟和關閉連結這些麻煩的動作。原本要用 <a href="https://github.com/LearnBoost/mongoose" target="_blank">Mongoose</a>，但是發現它還得先設定 Scheme，這實在有夠麻煩，而且完全與 <a href="http://www.mongodb.org/" target="_blank">MongoDB</a> 的設計相違背，所以果斷放棄。</li>
<li><a href="https://github.com/chjj/marked/" target="_blank">Marked</a>：Markdown 解析器。</li>
<li><a href="https://github.com/ncb000gt/node.bcrypt.js/" target="_blank">Bcrypt</a>：聽說 <a href="https://github.com/ncb000gt/node.bcrypt.js/" target="_blank">Bcrypt</a> 是目前最安全的密碼儲存方式。</li>
<li><a href="https://github.com/andris9/Nodemailer/" target="_blank">Nodemailer</a>：能夠輕鬆與 Gmail 整合的寄信模組。</li>
<li><a href="https://github.com/caolan/async/" target="_blank">Async</a>：<a href="http://nodejs.org/" target="_blank">Node.js</a> 中有很多工作都是異步進行，因此造成嵌套嵌不完的窘境，我程式寫了一週才發現有這麼好用的模組 orz。</li>
<li><a href="http://momentjs.com/" target="_blank">Moment</a>：日期解析模組。</li>
<li><a href="https://github.com/mishoo/UglifyJS" target="_blank">UglifyJS</a>：JavaScript 壓縮 / 美化模組，效能和 <a href="https://developers.google.com/closure/compiler/" target="_blank">Google Closure Compiler</a> 有得拼。</li>
<li><a href="http://socket.io/" target="_blank">Socket.io</a>：超讚的 WebSocket 模組，瀏覽器支援度超讚！</li>
<li><a href="https://github.com/kcbanner/connect-mongo/" target="_blank">connect-mongo</a>：本來 Session 我都儲存在記憶體，但這樣似乎不適合 production 環境，所以改把 Session 儲存在 <a href="http://www.mongodb.org/" target="_blank">MongoDB</a>。</li>
</ul>
<p>另外附贈超好用除錯工具：</p>
<ul>
<li><a href="https://github.com/fgnass/node-dev" target="_blank">node-dev</a>：偵測檔案更改，自動重啟伺服器。</li>
</ul>
<h2 id=" 存放空間 ">存放空間</h2>
<p>基本上寫程式還是和之前一樣，都是 SAN 值不斷乘著雲霄飛車高低起伏的過程，隨著 Bug 愈來愈多，愈來愈厭惡過去的自己怎麼笨到會犯這種智障級的錯誤。</p>
<p><strong>不過這些都不是重點。</strong></p>
<p>網站寫好了重點就是要有地方存放。</p>
<p>PHP 遍地都有等著你蹂躪的免費空間。</p>
<p>但是 Node 能用的就只有這些啊！<a href="https://github.com/joyent/node/wiki/Node-Hosting" target="_blank">https://github.com/joyent/node/wiki/Node-Hosting</a></p>
<ul>
<li><a href="http://nodester.com/" target="_blank">Nodester</a>：雖然免費但是一直 deploy 失敗，沒辦法安裝 <a href="https://github.com/ncb000gt/node.bcrypt.js/" target="_blank">bcrypt</a>。</li>
<li><a href="http://cnodejs.net/" target="_blank">NAE</a>：速度好慢，而且很常掛點。</li>
<li><a href="http://www.cloudfoundry.com/" target="_blank">Cloud Foundry</a>：沒辦法安裝 <a href="https://github.com/ncb000gt/node.bcrypt.js/" target="_blank">bcrypt</a>。</li>
<li><a href="http://www.dotcloud.com/" target="_blank">DotCloud</a>：不知道為啥總是 deploy 失敗。</li>
<li><a href="http://nodejitsu.com/" target="_blank">Nodejitsu</a>：只要一行 <code>jitsu deploy</code> 就能 deploy 了，但是下個月就要收費了哭哭。</li>
<li><a href="http://heroku.com/" target="_blank">Heroku</a>：雖然沒辦法玩 WebSocket（30 秒連線限制），但是最穩定。</li>
</ul>
<p>身為窮學生的我只能選慢吞吞的 <a href="http://heroku.com/" target="_blank">Heroku</a> 哭哭喔！</p>
<blockquote>
<p>截稿前發現了 <a href="http://www.appfog.com/" target="_blank">AppFog</a>，是一個建構於 <a href="http://www.cloudfoundry.com/" target="_blank">Cloud Foundry</a> 的服務，介面很漂亮，不過還沒試用。</p>
</blockquote>
<p>相較於 Node 而言，MongoDB 就不用煩惱了，目前我所知有兩個免費的服務。</p>
<ul>
<li><a href="https://mongohq.com/" target="_blank">MongoHQ</a>：免費 16 MB</li>
<li><a href="https://mongolab.com/" target="_blank">MongoLab</a>：免費 240 MB</li>
</ul>
<p>明眼人都知道要選 <a href="https://mongolab.com/" target="_blank">MongoLab</a> 啊啊啊啊啊！！！！<del>就像胸部一樣，大一點的總是比較好啊啊啊啊啊！！！！</del></p>
<h2 id=" 外觀 ">外觀</h2>
<p>因為代碼很髒而且 Bug 一堆，所以就不在這裡獻醜了。</p>
<p><img src="http://i.minus.com/icykBz9L04Ydf.png" alt=""></p>
<p>後台很普通，很明顯就是抄襲 <a href="http://wordpress.org/" target="_blank">WordPress</a> 的沒特色主題。</p>
<p><img src="http://i.minus.com/iiCgTOcyLp2Km.png" alt=""></p>
<p>前台本來想做成這樣，但圖片處理實在太麻煩，這種也許比較適合平板使用？</p>
<p><img src="http://i.minus.com/iCuLiRAi4Birx.png" alt=""></p>
<p>因此只能改成這個樣子了，可以很明顯的看出，就跟 <a href="https://plus.google.com/" target="_blank">Google+</a> 一樣，頁面主體很明顯的往左偏，右邊一大片空白什麼也沒有，<del>以後可以拿來放廣告</del>。</p>
<p><img src="http://i.minus.com/illxd31CdxXIq.png" alt=""></p>
<p>不過這也是有原因的，搜尋列和聊天室都會從左邊滑出。</p>
<h2 id=" 未來 ">未來</h2>
<p>目前 0.0.7 版已經完成，不過尚未 deploy 至 <a href="http://heroku.com/" target="_blank">Heroku</a>，主要是強化快取的部分，事先儲存已渲染過的網頁，就不用在每次瀏覽時都讀取資料庫。</p>
<p>等到 Bug 都除完之後，大概就會發佈原始碼了，我能看到那一天的到來嗎……？</p>
<h2 id=" 後記 ">後記</h2>
<p><img src="http://i.minus.com/ibqU7BQBnIPo5u.png" alt=" 對不起，圖片下載不完全，想看紗羽ㄋㄟㄋㄟ的請自己找吧。(id=28562767)"></p>
<p>因為最近一個月都在忙這東西，所以網誌都放到生菇了，之後還會在寫一篇愛夏的文章，敬請期待！</p>
<p><a href="http://nyanko.herokuapp.com/" target="_blank">Nyanko</a> 目前正在封測中，也許會有很多 Bug，如果找到 Bug 的話麻煩透過左側工具列上的「意見反饋」向我回報。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iKst8nFEGcU8A.png" alt=""></p>
<p>數個月前，接到了來自 <a href="http://caramel623.k2-ani.com/" target="_blank">卡梅爾 Anime</a> 的委託，請我重新設計一個 <a href="http://wordpress.org/" target="_blank">WordPress</a> 主題，因為我當時正忙著準備備審資料，因此而暫時擱置了一段時間。</p>
<p>又過了一個月，我加入了畢籌會（畢業典禮籌劃會），忙著 <del>和妹子聊天</del> 製作畢業影片，而完全忽略了這回事。</p>
<p>直到畢業後，我突然想起這件事，便決定開始著手進行；然而因為去年提交 <a href="http://wordpress.org/" target="_blank">WordPress</a> 主題一直被退件令我一直懷恨在心，我毅然決定捨棄 <a href="http://wordpress.org/" target="_blank">WordPress</a>，自己從頭打造一個類似於 <a href="http://wordpress.org/" target="_blank">WordPress</a> 的 CMS 系統。</p>
]]></summary>
    
      <category term="Node.js" scheme="http://zespia.tw/tags/Node.js/"/>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[私用主題 Phase]]></title>
    <link href="http://zespia.tw/blog/2012/05/02/new-theme-phase/"/>
    <id>http://zespia.tw/blog/2012/05/02/new-theme-phase/</id>
    <published>2012-05-02T01:35:00.000Z</published>
    <updated>2012-09-22T01:18:51.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iMujOkELjjcra.png" alt=""></p>
<p>一段時間沒更新網誌了，最近大學有了著落之後，便決定抽空寫篇文章。自從 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 發佈之後，使用者日漸增多，不時會有 Pull Request，大概已經有數十個網誌都選用 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 作為佈景主題，雖然獲得了極大的成就感，不過林北不爽「撞主題」的感覺，所以決定再製作一個屬於自己的佈景主題。</p>
<a id="more"></a>

<p><img src="http://i.minus.com/iYr8rVrPO07gr.jpg" alt=""></p>
<p>起初決定以星辰、銀河作為主題，但就是找不到想要的那種感覺，而我又是 Photoshop 苦手，要我自己用 Photoshop 畫出想要的那種感覺實在有點困難。</p>
<div class="video-container"><iframe width="420" height="315" src="http://www.youtube.com/embed/RiekCHOivVE" frameborder="0" allowfullscreen></iframe></div>

<p>之後，偶然發現了一套 Android Live Wallpaper「Phase Beam」，這配色，這流暢滑順的動畫，就是我要的感覺，但是網路上只能找到 1440x1080 的圖片，作為背景圖片有點太迷你了，於是我便決定利用 HTML5 Canvas 來繪製類似 Phase Beam 的背景。</p>
<h2 id=" 背景 ">背景</h2>
<p>HTML5 Canvas 的運作方式不如想像中簡單，我花了好幾小時才勉強用得上來，特別是輻射漸層（Radial Gradient），我搞了好久才終於搞懂這鬼東西的運作方式，天殺的是哪個傢伙想出<code>createRadialGradient(x1,y1,r1,x2,y2,r2)</code>這種奇怪的鬼函數的。</p>
<p><img src="http://i.minus.com/ibnLcNP2voPZTx.png" alt=""></p>
<p>使用方法搞定之後，其他便簡單許多了，只要記得繪製下一格動畫前，必須先使用<code>clearRect(x,y,width,height)</code>清空 Canvas，否則便會出現如上圖的慘狀。</p>
<h3 id=" 參考資料 ">參考資料</h3>
<ul>
<li><a href="https://developer.mozilla.org/en/Canvas_tutorial" target="_blank">Canvas tutorial - MDN</a></li>
</ul>
<h2 id=" 字體 ">字體</h2>
<p><img src="http://i.minus.com/iizFaxHHCWTjT.png" alt="Pontano Sans v.s. Helvetica Neue v.s. Helvetica Neue Light"></p>
<p>整個佈景主題全都是 <a href="http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.281983.29" target="_blank">Helvetica Neue Light</a> 似乎會讓人有些視覺疲勞，於是這次加入了 <a href="http://www.google.com/webfonts/specimen/Pontano+Sans" target="_blank">Pontano Sans</a> 作為標題字體，<a href="http://www.google.com/webfonts/specimen/Pontano+Sans" target="_blank">Pontano Sans</a> 的粗細與 <a href="http://en.wikipedia.org/wiki/Helvetica#Neue_Helvetica_.281983.29" target="_blank">Helvetica Neue Light</a> 大致相同，不過小寫字母更窄了些。</p>
<p><img src="http://i.minus.com/ibf2JncEj5mdzJ.png" alt=""></p>
<p>這次除了 Logo 以外，完全改用 <a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">Font Awesome</a> 字體作為圖示，相容性什麼的我也沒在管了，反正能支援到 IE 8+ 就夠了。</p>
<h2 id=" 後記 ">後記</h2>
<div class="video-container"><iframe width="560" height="315" src="http://www.youtube.com/embed/ZMhwixvwMUs" frameborder="0" allowfullscreen></iframe></div>

<p>Phase 還有一些部分尚未完成，不過我已經迫不及待想用了，餘下的部份就等之後慢慢補完吧。</p>
<p>最近大學終於有了著落，空閒的時間變得更多了，也許該找份兼職來做，如果想找我設計佈景主題的話，可透過 Twitter 或 tommy351[at]gmail.com 與我洽談。最後就來一部氷菓 ED 吧，可見京阿尼砸了很多錢在賣肉上，明明只是兩位高中女生在滾床而已，卻能這麼嫵媚……。える好胸，摩耶花好腋啊。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iMujOkELjjcra.png" alt=""></p>
<p>一段時間沒更新網誌了，最近大學有了著落之後，便決定抽空寫篇文章。自從 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 發佈之後，使用者日漸增多，不時會有 Pull Request，大概已經有數十個網誌都選用 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 作為佈景主題，雖然獲得了極大的成就感，不過林北不爽「撞主題」的感覺，所以決定再製作一個屬於自己的佈景主題。</p>
]]></summary>
    
      <category term="Octopress" scheme="http://zespia.tw/tags/Octopress/"/>
    
      <category term="主題" scheme="http://zespia.tw/tags/%E4%B8%BB%E9%A1%8C/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[First Order]]></title>
    <link href="http://zespia.tw/blog/2012/03/16/first-order/"/>
    <id>http://zespia.tw/blog/2012/03/16/first-order/</id>
    <published>2012-03-16T13:06:00.000Z</published>
    <updated>2012-10-10T16:39:05.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iNmV7aO65tXdE.jpg" alt=" ユイザキ - ミサカとおしゃべりしよ (id=22543726)"></p>
<p>雖然標題名為 First Order，但請不要誤會，內容與 Last Order 毫無關係，如果你還對下文抱持任何的期待的話，就 <del>當作被騙</del> 看完這篇文章吧！</p>
<p><del>很久很久以前</del>，一位名為<strong>新堂楓</strong>的紳士向我提出了主題製作的<a href="http://zespia.tw/blog/2011/05/27/corner-theme/#comment-418034559">委託</a>，然而因學測前 <del>打混</del> 用功念書很忙所以暫時推辭掉了。事隔 2 個月後，當我正沈醉於學測後混到不行的頹廢生活時，一則私訊闖進了我的生活，使我再度啟動塵封已久的 <a href="http://wordpress.org/" target="_blank">WordPress</a>。</p>
<a id="more"></a>

<h2 id=" 設計 ">設計</h2>
<p>這次的設計主題有三大要求：</p>
<ul>
<li><strong>加強相片呈現效果</strong>：這點在最近發佈的 <a href="http://octopress.org/" target="_blank">Octopress</a> 主題 <a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">Slash</a> 已經提供了一個不錯的解決方法，<a href="http://fancyapps.com/fancybox/" target="_blank">Fancybox</a>，這個使用簡易、特效華麗的 <a href="http://jquery.com/" target="_blank">jQuery</a> 外掛大概會成為我日後製作佈景主題的必備工具。</li>
<li><strong>一眼就能看出是圈內人</strong>：雖然我也同為圈內人，但是適合圈內人的網站設計還真沒看過幾個，令我印象最深刻的大概非 <a href="http://www.dannychoo.com/" target="_blank">Dannychoo</a> 莫屬，然而敝人能力不足，腦袋裡的點子差不多快枯竭了，我應該找個時間翻一翻圖書館的設計雜誌。</li>
<li><strong>Key&amp;minori style</strong>：這點更加靠北了，無論是 key 社還是 minori 社的 galgame 我都沒玩過，更遑論這兩家公司的設計風格了。</li>
</ul>
<p>雖然委託人提出了上述的三大要求，不過看看就好，下文的設計風格與要求大相逕庭。</p>
<h2 id=" 開始 ">開始</h2>
<p>看完了這篇<a href="http://www.slideshare.net/EvenWu/middleman" target="_blank">投影片</a>後，便決定利用 <a href="http://middlemanapp.com/" target="_blank">Middleman</a> 這個超神速的 mockup 工具設計主題大綱，不消兩小時便做出了兩個 mockup，思索設計的過程說不定比製作 mockup 的時間還多。</p>
<p><img src="http://i.minus.com/ibqWCsFFdSTBI.jpg" alt=""></p>
<p>第一個主題以 <a href="https://github.com" target="_blank">GitHub</a> 為設計範本，從標題的銀邊應該能很明顯的看出來。</p>
<p><img src="http://i.minus.com/iSv0ev3PogS6w.jpg" alt=""></p>
<p>第二個主題以 <a href="http://dribbble.com/" target="_blank">Dribbble</a> 上的某個<a href="http://dribbble.com/shots/438559-Pointz-Map-based-service?list=tags&amp;tag=web" target="_blank">點子</a>為範本，搭配部分 <a href="http://www.production-ig.co.jp/" target="_blank">Production I.G</a> 官網的元素（雖然看不大出來）。</p>
<p><img src="http://i.minus.com/ind9tU2HtpOTz.jpg" alt=""></p>
<p>我曾經認真思索過如何符合「<strong>一眼就能看出是圈內人</strong>」的要求，因此參考了<a href="http://www.kyotoanimation.co.jp/" target="_blank">京都アニメーション</a>與 <a href="http://www.production-ig.co.jp/" target="_blank">Production I.G</a> 的網站，現今的動畫官網真是做得愈來愈棒了，特別是 <a href="http://www.guilty-crown.jp/" target="_blank">Guilty Crown</a> 的官網，華麗之餘還能包含許多 HTML5 要素。（不過那毫無章法的劇情是另一回事）</p>
<h2 id=" 套版 ">套版</h2>
<p>最後委託人底定第二個主題為設計大綱，套版相對於設計簡單多了，只要將過去私用的「Corner 2G」（之後或許會釋出）稍微修改即可使用。</p>
<p><img src="http://i.minus.com/ibirM2wk04UGpk.jpg" alt=" 少數派鍵っ子系學園の新堂楓 - keyfans.net"></p>
<p>「Linor」至此終於製作完成，除了支援所有 WordPress 3.0 的功能以外，還附帶以下功能：</p>
<ul>
<li>頁數切換</li>
<li>Comment Quicktags</li>
<li>留言引用</li>
<li><a href="http://fancyapps.com/fancybox/" target="_blank">Fancybox</a>（委託人使用的是<a href="http://floatboxjs.com/" target="_blank">Floatbox</a>）</li>
<li>Responsive Design</li>
</ul>
<p>經過委託人同意後，決定將本主題公開發佈：<a href="http://zespia.tw/themes/linor/linor-1.0.5.zip">Linor (1.0.5)</a></p>
<h2 id=" 後記 ">後記</h2>
<p>再度接觸 <a href="http://wordpress.org/" target="_blank">WordPress</a>，發現 <a href="http://wordpress.org/" target="_blank">WordPress</a> 比起 <a href="http://octopress.org/" target="_blank">Octopress</a>，實在臃腫許多，就算架在本機也讓人感覺速度很慢，不過內建了很多方便的函數，使得開發速度大幅提昇。</p>
<p>製作他人委託的主題並不像自己創作一樣容易，必須考慮到委託人的要求、感受，我覺得這次的成品並不夠完美，希望未來的合作能夠更加完美！</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iNmV7aO65tXdE.jpg" alt=" ユイザキ - ミサカとおしゃべりしよ (id=22543726)"></p>
<p>雖然標題名為 First Order，但請不要誤會，內容與 Last Order 毫無關係，如果你還對下文抱持任何的期待的話，就 <del>當作被騙</del> 看完這篇文章吧！</p>
<p><del>很久很久以前</del>，一位名為<strong>新堂楓</strong>的紳士向我提出了主題製作的<a href="http://zespia.tw/blog/2011/05/27/corner-theme/#comment-418034559">委託</a>，然而因學測前 <del>打混</del> 用功念書很忙所以暫時推辭掉了。事隔 2 個月後，當我正沈醉於學測後混到不行的頹廢生活時，一則私訊闖進了我的生活，使我再度啟動塵封已久的 <a href="http://wordpress.org/" target="_blank">WordPress</a>。</p>
]]></summary>
    
      <category term="WordPress" scheme="http://zespia.tw/tags/WordPress/"/>
    
      <category term="主題" scheme="http://zespia.tw/tags/%E4%B8%BB%E9%A1%8C/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Windows 8 Consumer Preview 試玩]]></title>
    <link href="http://zespia.tw/blog/2012/03/03/windows-8-preview/"/>
    <id>http://zespia.tw/blog/2012/03/03/windows-8-preview/</id>
    <published>2012-03-03T11:54:00.000Z</published>
    <updated>2012-10-10T16:36:09.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/iQ6n16BPfbQc.jpg" alt=""></p>
<p>前些日子，微軟發佈了 <a href="http://windows.microsoft.com/en-US/windows-8/iso" target="_blank">Windows 8 Consumer Preview</a>，雖然名稱有點冗長，不過內容和以往一樣，是給無聊人專用的測試版。</p>
<ul>
<li>下載：<a href="http://windows.microsoft.com/en-US/windows-8/iso" target="_blank">http://windows.microsoft.com/en-US/windows-8/iso</a></li>
<li>序號：<code>DNJXJ-7XBW8-2378T-X22TX-BKG7J</code></li>
</ul>
<p>身為一名無聊高中生的我，ISO 檔一釋出便立刻下載，然而 Windows 8 並沒有符合我的期待。（軟粉不要打我）</p>
<a id="more"></a>

<h2 id=" 安裝 ">安裝</h2>
<p><img src="http://i.minus.com/iTEEu9lwJJUIR.png" alt=""></p>
<p>因為懶得切硬碟，所以這次使用虛擬機安裝 Windows 8，安裝過程非常順利，從初始化、設定 Windows Live 帳號到進入桌面，總共僅需花費 20 分鐘，與過去安裝作業系統至少得花費一小時的經驗截然不同。</p>
<h2 id=" 操作 ">操作</h2>
<p>Windows 8 為了進軍平板，因此預設了許多手勢操作，不過我沒有平板電腦，所以下文僅說明滑鼠操作。</p>
<p><img src="http://i.minus.com/igXOsyXp5ijuN.jpg" alt=" 滑鼠移入左上角向下滑（或左下角向上滑），可檢視最近開啟的應用程式，點擊右鍵可關閉程式 "></p>
<p>滑鼠沒有手勢操作，取而代之的是四個角落的「熱點」（類似 Mac），滑鼠移到四個角落就可觸發動作：</p>
<ul>
<li>右上角、右下角：Charms Bar</li>
<li>左上角、左下角：最近使用的應用程式</li>
</ul>
<p><img src="http://i.minus.com/ivmhqFbt2vH0J.jpg" alt=" 控制台內的個人化選項仍相當簡陋，Start 頁面只能設定顏色及花樣 "></p>
<p><img src="http://i.minus.com/iMopK01eyddai.jpg" alt=""></p>
<p>Metro UI 的背景圖片無法自由設定，只有預設的幾種顏色及花樣可供選擇，唯一能設定桌布的地方只有傳統介面與鎖定畫面；動態磚（tiles）拖曳可移動位置，點右鍵可選擇取消釘選、移除應用程式、縮小或關閉動態磚上的聯播。</p>
<p><img src="http://i.minus.com/iSauWVBV4u3fy.jpg" alt=""></p>
<p>使用 Metro UI 的應用程式時，點擊右鍵可顯示功能表，透過 Charms Bar 內的 Share 可將目前瀏覽的內容分享至其他應用程式或 SNS，當滑鼠移至畫面上方時，會顯示拖曳圖示：</p>
<ul>
<li>拖曳至兩側：釘選應用程式，可同時使用其他應用程式</li>
<li>拖曳至下方：關閉應用程式</li>
</ul>
<h2 id=" 使用體驗 ">使用體驗</h2>
<p>一進入桌面，映入眼簾的便是與 Developer Preview 大致相同的 Metro UI，以及幾個新的應用程式，大幅簡化的介面看起來相當不錯，然而以滑鼠操作實在不便。</p>
<p><img src="http://i.minus.com/iQsxP5YdP3WKC.jpg" alt=" 熟悉的「開始」選單被右側的 Charms Bar 取而代之 "></p>
<p>Windows Phone 7 上的 Metro UI 非常棒，簡潔、順暢、易操作；然而到了桌面系統就顯然不是如此了，Windows 8 上的 Metro UI 一開始讓人完全摸不著頭緒，我曾經不小心進入 Explorer，之後花了好一段時間才知道如何回到 Start 頁面，微軟應先在進入作業系統前教育使用者如何操作，或是想一個更直覺的點子。</p>
<p>此外，從 Explorer 開啟檔案時，預設應用程式設定為 Metro UI，未事先設定的話，光是看個影片、聽個音樂就必須在兩種介面之前互相切換，比以前麻煩多了。</p>
<p><img src="http://i.minus.com/iMIktqXqEclXn.jpg" alt=" 為啥預設字體還是新細明體啊！"></p>
<p>Windows 8 改了許多東西，然而爛到爆的字體渲染仍原封不動的保留，我不了解微軟到底他奶奶的在想什麼，把預設字體改成微軟正黑體有這麼困難嗎？改進那個渣到爆的<a href="http://zh.wikipedia.org/wiki/ClearType" target="_blank">ClearType</a>有這麼困難嗎？</p>
<p><img src="http://i.minus.com/iWdgrcTVUToVC.jpg" alt=""></p>
<p>唯一令人欣慰的是，IE 10 的分數大幅增加，HTML5 Test 的分數高達 309 分，真是網頁設計者的一大福音！（還是得再罵一次，<strong>去你媽的 IE 6</strong>）</p>
<h2 id=" 結論 ">結論</h2>
<p>Windows 8 Consumer Preview 讓人感覺不太好用，就像是將 Metro UI 故意強加在 Windows 7 上，Metro UI 雖然美觀，卻失去了 Windows 7 的操作直覺性，希望微軟未來能改進傳統介面與 Metro UI 的整合性，<del>讓我們一起期待<a href="http://www.apple.com/macosx/mountain-lion/" target="_blank">Mountain Lion</a>吧</del>！</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/iQ6n16BPfbQc.jpg" alt=""></p>
<p>前些日子，微軟發佈了 <a href="http://windows.microsoft.com/en-US/windows-8/iso" target="_blank">Windows 8 Consumer Preview</a>，雖然名稱有點冗長，不過內容和以往一樣，是給無聊人專用的測試版。</p>
<ul>
<li>下載：<a href="http://windows.microsoft.com/en-US/windows-8/iso" target="_blank">http://windows.microsoft.com/en-US/windows-8/iso</a></li>
<li>序號：<code>DNJXJ-7XBW8-2378T-X22TX-BKG7J</code></li>
</ul>
<p>身為一名無聊高中生的我，ISO 檔一釋出便立刻下載，然而 Windows 8 並沒有符合我的期待。（軟粉不要打我）</p>
]]></summary>
    
      <category term="Windows" scheme="http://zespia.tw/tags/Windows/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[HTML5 audio 實驗]]></title>
    <link href="http://zespia.tw/blog/2012/02/04/lab-html5-audio/"/>
    <id>http://zespia.tw/blog/2012/02/04/lab-html5-audio/</id>
    <published>2012-02-04T05:29:00.000Z</published>
    <updated>2012-11-12T05:56:46.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/inE9d4C1xPbYD.png" alt=""></p>
<p>寒假即將結束，不巧膝蓋突然中了一箭，便決定實驗 HTML5 <code>audio</code>標籤的效果，雖然已有 <a href="http://jplayer.org/" target="_blank">jPlayer</a> 這款輕便好用的播放器，但不折騰一下就沒辦法消磨時間了，所以本次的實驗品完全由我操刀。</p>
<a id="more"></a>

<h2 id=" 開始之前 ">開始之前</h2>
<p>首先必須了解<code>audio</code>標籤的使用方式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">audio</span> <span class="attribute">controls</span>&gt;</span>
  <span class="tag">&lt;<span class="title">source</span> <span class="attribute">src</span>=<span class="value">"music.mp3"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">source</span> <span class="attribute">src</span>=<span class="value">"music.ogg"</span>&gt;</span>
<span class="tag">&lt;/<span class="title">audio</span>&gt;</span>
</pre></td></tr></table></figure>

<p>輸入以上代碼後，便可在網頁中看到瀏覽器內建的播放器。每種瀏覽器支援的播放類型不一，最保險的方法是備妥<code>mp3</code>、<code>ogg</code>。</p>
<p>為了浪費時間，當然不可能用瀏覽器的預設介面，所以刪除<code>controls</code>屬性，透過 JavaScript 操作：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
5
</pre></td><td class="code"><pre><span class="keyword">var</span> audio = document.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>];
<span class="comment">// 播放</span>
audio.play();
<span class="comment">// 暫停</span>
audio.pause();
</pre></td></tr></table></figure>

<p>只需要懂這兩個函數，就可製作最基礎的播放器了，其他複雜的指令可參閱文末的參考出處。</p>
<h2 id=" 介面 ">介面</h2>
<p>寫網頁時，比起最重要的 JavaScript，我習慣先寫 CSS，最初的參考範本是 Mac 的 <a href="http://zh.wikipedia.org/wiki/Cover_Flow" target="_blank">CoverFlow</a>。</p>
<p><img src="http://i.minus.com/ibtVhj6FYs9Hvw.png" alt=""></p>
<p>經過一連串絞盡腦汁，寫了一堆亂七八糟的 CSS 之後，成品如下。</p>
<p><img src="http://i.minus.com/iXoN5AU2JBOHU.png" alt=""></p>
<p>無論是倒影、中間的圓圈進度表都與 <a href="http://zh.wikipedia.org/wiki/Cover_Flow" target="_blank">CoverFlow</a> 非常相像，但這種樣式實在 <del>太麻煩了</del> 不便使用者操作，所以從 <a href="http://www.premiumpixels.com/freebies/compact-music-player-psd/" target="_blank">Premium Pixels</a> 偷點子過來，稍微加油添醋一下，完成了播放器介面 Ver. 2。</p>
<p><img src="http://i.minus.com/imrTH5W7km1vj.png" alt="Ver.2 與 Ver.1 完全不像？這種事情不重要啦！"></p>
<h2 id=" 核心 ">核心</h2>
<p>介面完成自爽一下之後，就得面對麻煩的 JavaScript 了，播放、暫停非常簡單，按鈕按下去執行鄉對應的動作即可，然而音量調整與進度條該如何處理呢？</p>
<p>雖然本次的重點是<strong>消磨時間</strong>，但再去造一個輪子實在他媽的太累了，於是 <del>聰明如我</del> 請到了 <a href="http://jqueryui.com/" target="_blank">jQuery UI</a>，Slider 功能壓縮後需要約 20KB 的空間，有點龐大不過方便就好。</p>
<p>時間的控制方式如下，單位為秒數，例如跳至第 100 秒的位置：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>audio.currentTime = <span class="number">100</span>;
</pre></td></tr></table></figure>

<p>音量的控制方式如下，範圍為 0~1，例如將音量調整至一半大小：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>audio.volume = <span class="number">0.5</span>;
</pre></td></tr></table></figure>

<p><code>audio</code>可綁定<code>play</code>, <code>pause</code>, <code>ended</code>, <code>progress</code>, <code>canplay</code>, <code>timeupdate</code>等事件。<code>play</code>與<code>pause</code>如字面上意思，分別為播放、暫停後生效。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre>audio.addEventListener(<span class="string">'play'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span>{</span>
  play.title = <span class="string">'pause'</span>;
}, <span class="literal">false</span>);

audio.addEventListener(<span class="string">'pause'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span>{</span>
  play.title = <span class="string">'play'</span>;
}, <span class="literal">false</span>);
</pre></td></tr></table></figure>

<p><code>ended</code>為結束後生效，當音樂結束後，可透過此事件讓時間歸零。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>audio.addEventListener(<span class="string">'ended'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span>{</span>
  <span class="keyword">this</span>.currentTime = <span class="number">0</span>;
}, <span class="literal">false</span>);
</pre></td></tr></table></figure>

<p>當音樂檔案開始載入後，便會啟動<code>progress</code>事件，可透過此事件監測下載進度。Firefox 可能會發生問題，建議搭配<code>durationchange</code>事件使用。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre>audio.addEventListener(<span class="string">'progress'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span>{</span>
  <span class="keyword">var</span> endVal = <span class="keyword">this</span>.seekable && <span class="keyword">this</span>.seekable.length ? <span class="keyword">this</span>.seekable.end(<span class="number">0</span>) : <span class="number">0</span>;
  buffer.style.width = (<span class="number">100</span> / (<span class="keyword">this</span>.duration || <span class="number">1</span>) * endVal) + <span class="string">'%'</span>;
}, <span class="literal">false</span>);
</pre></td></tr></table></figure>

<p>當音樂下載到一定程度後，<code>canplay</code>事件便會生效，一般會透過此事件初始化播放器。相同類型的事件還有很多，依照啟動順序分別為：<code>loadstart</code>, <code>durationchange</code>, <code>loadeddata</code>, <code>progress</code>, <code>canplay</code>, <code>canplaythrough</code>。</p>
<p><code>timeupdate</code>會在音樂播放時不斷生效，可透過此事件更新時間。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>audio.addEventListener(<span class="string">'timeupdate'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span>{</span>
  progress.style.width = (<span class="keyword">this</span>.currentTime / <span class="keyword">this</span>.duration) * <span class="number">100</span> + <span class="string">'%'</span>;
}, <span class="literal">false</span>);
</pre></td></tr></table></figure>

<h2 id=" 播放列表 ">播放列表</h2>
<p>一個播放器的基礎功能就此完成，能夠播放、暫停、調整音量、調整時間。但這顯然還不夠，播放列表對於播放器而言相當重要。<em>（大概啦）</em></p>
<p><img src="http://i.minus.com/inE9d4C1xPbYD.png" alt=" 不要吐槽為啥播放列表裡全是動漫歌，林北就是宅啦..."></p>
<p>與自己的邏輯奮戰大約一晚後，有播放列表、隨機播放、重複播放（單首、全部）功能的播放器於焉完成。只需要 214 行、約 6KB 的代碼<em>（未壓縮）</em>即可完成，應該能算是輕便簡易了。</p>
<h2 id=" 後記 ">後記</h2>
<p>播放列表的製作過程有點髒，中途還重構了幾次，所以直接看範例應該會比較快，若對於範例內的程式碼感到疑惑，可在下方留言。</p>
<p>範例內已設定了一些參數，可在<code>js/script.js</code>內更改。第 5 行的<code>continous</code>參數為連續播放，第 6 行的<code>autoplay</code>參數為自動播放，第 7 行的<code>playlist</code>陣列請自行設定，壓縮檔內<strong>不會</strong>附帶範例內的音樂檔案。<code>playlist</code>陣列的格式如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="keyword">var</span> playlist = [
  {
    title: <span class="string">'Tell Your World'</span>,
    artist: <span class="string">'livetune feat. 初音ミク '</span>,
    album: <span class="string">'Tell Your World'</span>,
    cover: <span class="string">'cover/tell_your_world.jpg'</span>,
    mp3: <span class="string">'music/tell_your_world.mp3'</span>,
    ogg: <span class="string">'music/tell_your_world.ogg'</span>
  }
];
</pre></td></tr></table></figure>

<p><code>title</code>為標題，<code>artist</code>為演出者，<code>album</code>為專輯名稱，<code>cover</code>為專輯封面的路徑，<code>mp3</code>、<code>ogg</code>分別為音樂檔案的路徑，建議備妥兩種格式的檔案，<del>要不然 Firefox 和 Opera 不就只能去死了嗎？</del></p>
<p>因為做到最後頭腦快爆炸了，懶得做 Flash fallback，<del>IE 請去死一死吧。</del></p>
<p><a href="http://zespia.tw/lab/coverart">範例</a>｜<a href="http://zespia.tw/lab/coverart/example.zip">下載</a></p>
<h2 id=" 參考出處 ">參考出處</h2>
<ul>
<li><a href="http://jplayer.org/" target="_blank">jPlayer</a></li>
<li><a href="http://blog.darkthread.net/post-2011-05-15-html5-audio.aspx" target="_blank">小試 HTML 5 audio - 黑暗執行緒</a></li>
<li><a href="https://developer.mozilla.org/en/Using_HTML5_audio_and_video" target="_blank">Using HTML5 audio and video - MDN</a></li>
<li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/" target="_blank">HTML5 Audio and Video: What you Must Know | Nettuts+</a></li>
<li><a href="http://www.premiumpixels.com/freebies/compact-music-player-psd/" target="_blank">Free PSD: Compact Music Player | Premium Pixels</a></li>
</ul>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/inE9d4C1xPbYD.png" alt=""></p>
<p>寒假即將結束，不巧膝蓋突然中了一箭，便決定實驗 HTML5 <code>audio</code>標籤的效果，雖然已有 <a href="http://jplayer.org/" target="_blank">jPlayer</a> 這款輕便好用的播放器，但不折騰一下就沒辦法消磨時間了，所以本次的實驗品完全由我操刀。</p>
]]></summary>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
      <category term="HTML5" scheme="http://zespia.tw/tags/HTML5/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Slash — 專為 Octopress 設計的極簡主題]]></title>
    <link href="http://zespia.tw/blog/2012/01/25/slash-theme/"/>
    <id>http://zespia.tw/blog/2012/01/25/slash-theme/</id>
    <published>2012-01-25T08:27:00.000Z</published>
    <updated>2012-10-11T07:07:47.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/i8oyJmY5lRJEJ.png" alt=""></p>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 雖然預設主題相當漂亮，支援眾多 HTML5 的新特性，但每個網誌都是同一個主題，令人有些厭煩。在決定轉移到 <a href="http://octopress.org/" target="_blank">Octopress</a> 的第一刻起，我就開始著手設計適用於 <a href="http://octopress.org/" target="_blank">Octopress</a> 的主題，在今天終於把檔案整理完畢，集合成一個獨立的 repo。</p>
<a id="more"></a>

<p>做為一個 <a href="http://octopress.org/" target="_blank">Octopress</a> 主題，當然不能輸給原本的預設主題，Slash 擁有以下特性：</p>
<ul>
<li>自動讀取圖片的<code>alt</code>屬性，並在圖片下方顯示註解。</li>
<li>內建 <a href="http://fancyapps.com/fancybox/" target="_blank">Fancybox</a>，讓您輕鬆展示您的作品。</li>
<li>自動將 HTML5 <code>video</code>、<code>iframe</code>、<code>object</code>等嵌入式影片縮放至頁面寬度。</li>
<li>支援 responsive layouts，無論電腦、手機、平板都能獲得極佳的使用體驗。</li>
<li><a href="http://zespia.tw/Octopress-Theme-Slash/index_tw.html">更多介紹…</a></li>
</ul>
<h2 id=" 安裝 ">安裝</h2>
<p>只需在終端機輸入以下指令，即可完成安裝：</p>
<pre><code><span class="variable">$ </span>cd octopress
<span class="variable">$ </span>git clone <span class="symbol">git:</span>/<span class="regexp">/github.com/tommy</span>351/<span class="constant">Octopress</span>-<span class="constant">Theme</span>-<span class="constant">Slash</span>.git .themes/slash
<span class="variable">$ </span>rake install[<span class="string">'slash'</span>]
<span class="variable">$ </span>rake generate
</code></pre><p>使用 zsh 時發生問題嗎？試試看<code>rake install\[&#39;slash&#39;\]</code>。</p>
<h2 id="Q&amp;A">Q&amp;A</h2>
<h3 id=" 如何顯示右上角的 Facebook 連結？">如何顯示右上角的 Facebook 連結？</h3>
<p>在<code>_config.yml</code>新增<code>facebook_user</code>參數，並填入您的 Facebook ID。</p>
<h3 id=" 如何編輯選單？">如何編輯選單？</h3>
<p>編輯<code>slash</code>→<code>source</code>→<code>_includes</code>→<code>custom</code>→<code>navigation.html</code>。</p>
<h3 id=" 如何隱藏頁首的 Twitter 訊息串？">如何隱藏頁首的 Twitter 訊息串？</h3>
<p>刪除<code>slash</code>→<code>source</code>→<code>_layouts</code>→<code>default.html</code>的第 6 行。</p>
<h3 id=" 如何關閉 Fancybox？">如何關閉 Fancybox？</h3>
<ol>
<li>刪除<code>slash</code>→<code>source</code>→<code>_includes</code>→<code>after_footer.html</code>的第 4 行。</li>
<li>刪除<code>slash</code>→<code>source</code>→<code>javascripts</code>→<code>caption.js</code>第 14 行。</li>
</ol>
<p>如果還有其他問題或建議，歡迎在以下留言。</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/i8oyJmY5lRJEJ.png" alt=""></p>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 雖然預設主題相當漂亮，支援眾多 HTML5 的新特性，但每個網誌都是同一個主題，令人有些厭煩。在決定轉移到 <a href="http://octopress.org/" target="_blank">Octopress</a> 的第一刻起，我就開始著手設計適用於 <a href="http://octopress.org/" target="_blank">Octopress</a> 的主題，在今天終於把檔案整理完畢，集合成一個獨立的 repo。</p>
]]></summary>
    
      <category term="主題" scheme="http://zespia.tw/tags/%E4%B8%BB%E9%A1%8C/"/>
    
      <category term="Octopress" scheme="http://zespia.tw/tags/Octopress/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[如何利用 CSS 製作多級選單？]]></title>
    <link href="http://zespia.tw/blog/2012/01/24/css-multi-level-menu/"/>
    <id>http://zespia.tw/blog/2012/01/24/css-multi-level-menu/</id>
    <published>2012-01-24T00:00:00.000Z</published>
    <updated>2012-09-22T01:22:59.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ibx37Gknqf5wtK.PNG" alt=" 一般常見的選單 "></p>
<p>選單常見於我們的生活當中，通常用於整理一系列的指令，簡化複雜的程序，使介面看起來更加友善。當應用程式愈複雜，功能愈多時，通常會利用多級選單將類似的指令組織成一個子選單。</p>
<p>一般網頁常見到二級選單，利用 CSS 即可達成，有些會透過 JavaScript 增加更多效果，例如動畫、延遲等。多級選單一般常使用 JavaScript 達成，不過透過 CSS 也能做出簡單的多級選單。</p>
<a id="more"></a>

<h3 id="HTML">HTML</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">nav</span>&gt;</span>
  <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 1<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>
      <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
      <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>
          <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2-1<span class="tag">&lt;/<span class="title">a</span>&gt;</span>
          <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
            <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2-1-1<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
            <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2-1-2<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
          <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2-2<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 2-3<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 3<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>&gt;</span>選單 4<span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
<span class="tag">&lt;/<span class="title">nav</span>&gt;</span>
</pre></td></tr></table></figure>

<p>選單的 HTML 如上，所有的選單物件都是可點選的連結，理論上無限層級。</p>
<h3 id="CSS">CSS</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code"><pre><span class="tag">ul</span> <span class="tag">li</span> <span class="rules">{
  <span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>; <span class="comment">/* 使子選單依照母選單的座標顯示 */</span>
<span class="rule">}</span></span>
<span class="comment">/* 設定母選單的連結樣式 */</span>
<span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="function">url(detail.png)</span></span></span>;
<span class="rule">}</span></span>
<span class="comment">/* 當母選單下沒有子選單時，也就是說只有一個連結時，隱藏 detail.png */</span>
<span class="tag">ul</span> <span class="tag">li</span> <span class="tag">a</span><span class="pseudo">:only-child</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> none</span></span>;
<span class="rule">}</span></span>
<span class="tag">ul</span> <span class="tag">li</span><span class="pseudo">:hover</span> &gt; <span class="tag">ul</span> <span class="rules">{
  <span class="rule"><span class="attribute">display</span>:<span class="value"> block</span></span>; <span class="comment">/* 滑鼠滑入母選單後，顯示子選單 */</span>
<span class="rule">}</span></span>
<span class="comment">/* 二級選單顯示於一級選單的正下方 */</span>
<span class="tag">ul</span> <span class="tag">ul</span> <span class="rules">{
  <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
  <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">100</span>%</span></span>;
  <span class="rule"><span class="attribute">list-style</span>:<span class="value"> none</span></span>;
  <span class="rule"><span class="attribute">display</span>:<span class="value"> none</span></span>;
<span class="rule">}</span></span>
<span class="comment">/* 三級選單則顯示於二級選單的右方 */</span>
<span class="tag">ul</span> <span class="tag">ul</span> <span class="tag">ul</span> <span class="rules">{
  <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
  <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">100</span>%</span></span>;
  <span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">0</span></span></span>;
<span class="rule">}</span></span>
</pre></td></tr></table></figure>

<p>這樣就完成了所有步驟，不需要繁複的 JavaScript，是不是很簡單呢？</p>
<p><a href="http://zespia.tw/demo/css-multi-level-menu/">範例</a>｜<a href="http://zespia.tw/demo/css-multi-level-menu/example.zip">下載</a></p>
<h2 id=" 後記 ">後記</h2>
<p><img src="http://i.minus.com/ibbaIEKvPdl6Pc.jpg" alt=""></p>
<p>寫到最後反而發現詞窮，看來我真不是寫文章的料。總而言之，這是「大概很簡單」教學系列的第二彈，感謝你的收看！</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/ibx37Gknqf5wtK.PNG" alt=" 一般常見的選單 "></p>
<p>選單常見於我們的生活當中，通常用於整理一系列的指令，簡化複雜的程序，使介面看起來更加友善。當應用程式愈複雜，功能愈多時，通常會利用多級選單將類似的指令組織成一個子選單。</p>
<p>一般網頁常見到二級選單，利用 CSS 即可達成，有些會透過 JavaScript 增加更多效果，例如動畫、延遲等。多級選單一般常使用 JavaScript 達成，不過透過 CSS 也能做出簡單的多級選單。</p>
]]></summary>
    
      <category term="CSS" scheme="http://zespia.tw/tags/CSS/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[如何利用 jQuery 製作頁籤？]]></title>
    <link href="http://zespia.tw/blog/2012/01/21/jquery-tabs/"/>
    <id>http://zespia.tw/blog/2012/01/21/jquery-tabs/</id>
    <published>2012-01-21T10:10:00.000Z</published>
    <updated>2012-10-10T16:38:54.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/i3hFGFugcShjF.jpg" alt=" 在文章中放入不相干的圖片好像已經成為定番？隨便啦 "></p>
<p>最近花了一週的時間，終於完成 Octopress 的佈景主題，並搬移舊站（zespia.twbbs.org）的文章及留言，發現自已以前的文章實在有夠中二，看得連自己都想揍螢幕，於是偷偷撤下了部分文章。</p>
<p>為了慶祝新站落成，便決定寫一篇超級簡易（大概啦）的 jQuery 頁籤製作教學，<del>懷著感恩的心看吧！</del></p>
<a id="more"></a>

<p><strong>本文以 jQuery 1.7.1 為例。</strong></p>
<h2 id=" 基礎 ">基礎</h2>
<h3 id="HTML">HTML</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">id</span>=<span class="value">"tabs"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"enable"</span>&gt;</span>頁籤 1<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 2<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 3<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 4<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"contents"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 1 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 2 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 3 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 4 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</pre></td></tr></table></figure>

<p>以<code>ul#tabs</code>當作標籤，而<code>#contents</code>內則是頁籤內容。我盡可能簡化 HTML 中不必要的欄位，其他功能都將在 JS 中實現。</p>
<h3 id="CSS">CSS</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code"><pre><span class="id">#tabs</span> <span class="tag">li</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ccc</span></span></span>;
  <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> none</span></span>;
  <span class="rule"><span class="attribute">display</span>:<span class="value"> inline-block</span></span>;
  <span class="rule"><span class="attribute">margin-right</span>:<span class="value"> <span class="number">5</span>px</span></span>;
  <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">5</span>px <span class="number">10</span>px</span></span>;
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#999</span></span></span>;
  <span class="rule"><span class="attribute">cursor</span>:<span class="value"> pointer</span></span>;
<span class="rule">}</span></span>
<span class="id">#tabs</span> <span class="tag">li</span><span class="pseudo">:hover</span><span class="rules">{
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#666</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#tabs</span> <span class="tag">li</span><span class="class">.enable</span><span class="rules">{
  <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">margin-bottom</span>:<span class="value"> -<span class="number">1</span>px</span></span>;
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#333</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#contents</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ccc</span></span></span>;
  <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"> <span class="number">0</span> <span class="number">0</span> <span class="number">16</span>px <span class="hexcolor">#ccc</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#contents</span> &gt; <span class="tag">div</span><span class="rules">{
  <span class="rule"><span class="attribute">display</span>:<span class="value"> none</span></span>;
  <span class="rule"><span class="attribute">text-align</span>:<span class="value"> justify</span></span>;
  <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">10</span>px <span class="number">15</span>px</span></span>;
<span class="rule">}</span></span>
<span class="id">#contents</span> &gt; <span class="tag">div</span><span class="pseudo">:first-of-type</span><span class="rules">{
  <span class="rule"><span class="attribute">display</span>:<span class="value"> block</span></span>;
<span class="rule">}</span></span>
</pre></td></tr></table></figure>

<h3 id="JS">JS</h3>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre>(<span class="function"><span class="keyword">function</span><span class="params">($)</span>{</span>
  <span class="comment">// 用 each 遍歷頁籤</span>
  $(<span class="string">'#tabs li'</span>).each(<span class="function"><span class="keyword">function</span><span class="params">(i)</span>{</span>
    <span class="keyword">var</span> _i = i;

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

<p>首先透過<code>each</code>遍歷所有頁籤（<code>#tabs li</code>），並在所有頁籤上綁定事件。</p>
<p>當事件觸發時，移除其它頁籤的<code>class</code>，隱藏其他頁籤的內容，並將<code>class</code>新增至所選頁籤，顯示所選頁籤的內容。</p>
<p>建議把 JS 放在頁尾（footer），可使頁面載入完成後才載入 JS，避免出現錯誤。</p>
<p><a href="http://zespia.tw/demo/jquery-tabs/basic/">範例</a>｜<br><a href="http://zespia.tw/demo/jquery-tabs/basic/example.zip">下載</a></p>
<h2 id=" 進階 ">進階</h2>
<p>只有單純的顯示隱藏似乎太無趣了？那就加點動畫吧！只要稍微變更基礎結構，就能讓頁籤看起來更加華麗！</p>
<h3 id="HTML-1">HTML</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">id</span>=<span class="value">"tabs"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"enable"</span>&gt;</span>頁籤 1<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 2<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 3<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
  <span class="tag">&lt;<span class="title">li</span>&gt;</span>頁籤 4<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"container"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"contents"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 1 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 2 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 3 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span>&gt;</span>頁籤 4 的內容<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</pre></td></tr></table></figure>

<p>進階篇的 HTML 結構與基礎篇只有一點小差別，僅在原本的<code>#contents</code>的區塊外又包了一層<code>#container</code>。</p>
<h3 id="CSS-1">CSS</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
</pre></td><td class="code"><pre><span class="id">#tabs</span><span class="rules">{
  <span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>;
  <span class="rule"><span class="attribute">z-index</span>:<span class="value"> <span class="number">1</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#tabs</span> <span class="tag">li</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ccc</span></span></span>;
  <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> none</span></span>;
  <span class="rule"><span class="attribute">display</span>:<span class="value"> inline-block</span></span>;
  <span class="rule"><span class="attribute">margin-right</span>:<span class="value"> <span class="number">5</span>px</span></span>;
  <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">5</span>px <span class="number">10</span>px</span></span>;
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#999</span></span></span>;
  <span class="rule"><span class="attribute">cursor</span>:<span class="value"> pointer</span></span>;
<span class="rule">}</span></span>
<span class="id">#tabs</span> <span class="tag">li</span><span class="pseudo">:hover</span><span class="rules">{
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#666</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#tabs</span> <span class="tag">li</span><span class="class">.enable</span><span class="rules">{
  <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">margin-bottom</span>:<span class="value"> -<span class="number">1</span>px</span></span>;
  <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#333</span></span></span>;
<span class="rule">}</span></span>
<span class="id">#container</span><span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ddd</span></span></span>;
  <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#ccc</span></span></span>;
  <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"> <span class="number">0</span> <span class="number">0</span> <span class="number">16</span>px <span class="hexcolor">#ccc</span></span></span>;
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">500</span>px</span></span>;
  <span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>;
  <span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;
<span class="rule">}</span></span>
<span class="id">#contents</span><span class="rules">{
  <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
  <span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">0</span></span></span>;
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">2000</span>px</span></span>; <span class="comment">/* 內容寬度 * 頁籤數 */</span>
<span class="rule">}</span></span>
<span class="id">#contents</span> &gt; <span class="tag">div</span><span class="rules">{
  <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">10</span>px <span class="number">15</span>px</span></span>;
  <span class="rule"><span class="attribute">text-align</span>:<span class="value"> justify</span></span>;
  <span class="rule"><span class="attribute">float</span>:<span class="value"> left</span></span>;
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">470</span>px</span></span>; <span class="comment">/* 內容寬度 - 左右 padding */</span>
<span class="rule">}</span></span>
</pre></td></tr></table></figure>

<p><code>#contents</code>改為<code>absolute</code>（絕對定位），並設定寬度為「內容寬度 × 頁籤數量」。<code>#contents</code>內的<code>div</code>別忘了加上<code>float: left;</code>，如此一來頁籤內容才會排成一橫列，將寬度設為「內容寬度 － 左右 padding」。</p>
<p>進階篇若少了 JS 的輔助，則無法正常顯示，除非事先設定<code>#container</code>的高度。</p>
<h3 id="JS-1">JS</h3>
<figure class="highlight js"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="code"><pre>(<span class="function"><span class="keyword">function</span><span class="params">($)</span>{</span>
  <span class="keyword">var</span> trigger = <span class="literal">false</span>;

  <span class="comment">// 使內容高度等於第一頁籤內容高度 + 上下 padding</span>
  $(<span class="string">'#container'</span>).css(<span class="string">'height'</span>, $(<span class="string">'#contents div'</span>).eq(<span class="number">0</span>).height() + <span class="number">20</span>);

  <span class="comment">// 用 each 遍歷頁籤</span>
  <span class="keyword">var</span> tabs = $(<span class="string">'#tabs li'</span>).each(<span class="function"><span class="keyword">function</span><span class="params">(i)</span>{</span>
    <span class="keyword">var</span> _i = i;

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

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

<p>原理與基礎篇有些差別，必須在頁籤上新增<code>tabid</code>屬性，不過透過 JS 代勞即可。</p>
<p>首先使<code>#container</code>的高度符合第一頁籤的高度，接著同樣遍歷所有頁籤（<code>#tabs li</code>），在所有頁籤上新增<code>tabid</code>屬性，順便綁定事件。</p>
<p>當事件觸發時，確認使用者是否正在操作頁籤（<code>trigger == false</code>），若頁籤操作速度過於頻繁，可能會使得動畫錯亂。接著計算動畫間距，使內容依照間距左右移動，並使其高度符合所選頁籤內容的高度。</p>
<p>當動畫全部結束後，返回<code>trigger = false</code>，讓使用者能夠再度操作頁籤。</p>
<p>如此一來，平凡樸素的頁籤便多了左右滑動的動畫，如果想要更加華麗的話，可以使用<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing Plugin</a>。</p>
<p><a href="http://zespia.tw/demo/jquery-tabs/advanced/">範例</a>｜<br><a href="http://zespia.tw/demo/jquery-tabs/advanced/example.zip">下載</a></p>
<h2 id=" 後記 ">後記</h2>
<p><img src="http://i.minus.com/ibiEDX70iCDveF.PNG" alt=""></p>
<p>最後的成果如上圖，當然細部的樣式、動畫請自行設定。希望這篇文章簡單易懂（？）的文章能夠幫助到你。最近預計再寫一篇 CSS Only 的多級選單教學，請拭目以待吧！</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/i3hFGFugcShjF.jpg" alt=" 在文章中放入不相干的圖片好像已經成為定番？隨便啦 "></p>
<p>最近花了一週的時間，終於完成 Octopress 的佈景主題，並搬移舊站（zespia.twbbs.org）的文章及留言，發現自已以前的文章實在有夠中二，看得連自己都想揍螢幕，於是偷偷撤下了部分文章。</p>
<p>為了慶祝新站落成，便決定寫一篇超級簡易（大概啦）的 jQuery 頁籤製作教學，<del>懷著感恩的心看吧！</del></p>
]]></summary>
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Hello Octopress!]]></title>
    <link href="http://zespia.tw/blog/2012/01/14/hello-octopress/"/>
    <id>http://zespia.tw/blog/2012/01/14/hello-octopress/</id>
    <published>2012-01-14T07:52:00.000Z</published>
    <updated>2012-09-22T01:20:35.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/i4CFI4qZAFEct.png" alt=""></p>
<p><a href="http://www.acsite.net/tw/" target="_blank">ACSite</a> 的空間即將在 2012/1/31 到期，而我又懶得續約，這時看到愈來愈多部落客都從 <a href="http://wordpress.org/" target="_blank">WordPress</a> 轉移到 <a href="http://octopress.org/" target="_blank">Octopress</a>，便開始試用 <a href="http://octopress.org/" target="_blank">Octopress</a>。</p>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 與 <a href="http://wordpress.org/" target="_blank">WordPress</a> 同樣身為部落格系統，卻有相當大的不同：</p>
<ul>
<li><strong><a href="http://wordpress.org/" target="_blank">WordPress</a>：</strong><ul>
<li>PHP</li>
<li>動態網頁</li>
<li>外掛多樣</li>
<li>速度慢</li>
<li>使用簡單</li>
</ul>
</li>
<li><strong><a href="http://octopress.org/" target="_blank">Octopress</a>：</strong><ul>
<li>Ruby</li>
<li>靜態網頁</li>
<li>剛起步，外掛還很少</li>
<li>速度快</li>
<li>geek 才會用</li>
</ul>
</li>
</ul>
<p>以下將簡單介紹 <a href="http://octopress.org/" target="_blank">Octopress</a> 的安裝與使用。</p>
<a id="more"></a>

<h2 id=" 安裝 ">安裝</h2>
<h3 id="Ruby">Ruby</h3>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 的安裝非常簡單，首先你需要準備 <a href="http://www.ruby-lang.org/zh_TW/" target="_blank">Ruby</a> 的環境，以下以 Mac 為示範：</p>
<p><strong>請務必照著步驟做。</strong></p>
<p>1. 安裝 <a href="http://itunes.apple.com/us/app/xcode/id448457090?mt=12" target="_blank">Xcode</a>（建議使用<strong>4.1</strong>版），或直接安裝 <a href="https://github.com/kennethreitz/osx-gcc-installer" target="_blank">OSX GCC Installer</a>。</p>
<p>2. 安裝 <a href="http://mxcl.github.com/homebrew/" target="_blank">Homebrew</a></p>
<pre><code>$ ruby <span class="operator">-e</span> <span class="string">"<span class="variable">$(curl -fsSL https://raw.github.com/gist/323731)</span>"</span>
$ brew update
</code></pre><p>3. 安裝 <a href="http://git-scm.com/" target="_blank">Git</a></p>
<pre><code><span class="variable">$ </span>brew install git
</code></pre><p>別忘了 Mac 上有 <a href="http://www.sourcetreeapp.com/" target="_blank">SourceTree</a> 和 <a href="http://gitx.laullon.com/" target="_blank">GitX</a> 這兩套不錯的 Git GUI 可以使用！</p>
<p>4. 安裝 <a href="http://beginrescueend.com/" target="_blank">RVM</a></p>
<pre><code>$ bash &lt; &lt;(curl <span class="operator">-s</span> https://rvm.beginrescueend.com/install/rvm)
$ <span class="built_in">echo</span> <span class="string">"[[ -s <span class="variable">$HOME</span>/.rvm/scripts/rvm ]] &amp;&amp; source <span class="variable">$HOME</span>/.rvm/scripts/rvm"</span> &gt;&gt; ~/.profile $ . ~/.profile
$ <span class="built_in">source</span> ~/.profile
</code></pre><p>5. 安裝 <a href="http://www.ruby-lang.org/zh_TW/" target="_blank">Ruby</a>（<a href="http://octopress.org/" target="_blank">Octopress</a> 要求使用<strong>1.9.2</strong>版）</p>
<pre><code><span class="variable">$ </span>rvm install <span class="number">1.9</span>.<span class="number">2</span>
<span class="variable">$ </span>rvm <span class="number">1.9</span>.<span class="number">2</span> --default
</code></pre><p>若是安裝失敗的話，請試著使用以下方式安裝：</p>
<pre><code><span class="char">$ </span>rvm remove <span class="number">1.9</span><span class="number">.2</span>
<span class="char">$ </span>export <span class="class">CC</span>=/usr/bin/gcc-<span class="number">4.2</span>
<span class="char">$ </span>brew install readline
<span class="char">$ </span>brew link readline
<span class="char">$ </span>rvm install <span class="number">1.9</span><span class="number">.2</span> --with-readline-dir=<span class="char">$r</span>vm_path/usr
</code></pre><p>6. 安裝 <a href="http://pow.cx/" target="_blank">Pow</a></p>
<pre><code>$ curl get<span class="preprocessor">.pow</span><span class="preprocessor">.cx</span> | sh
</code></pre><p><em>（以上安裝步驟參考自<a href="http://killtw.k2ds.net/blog/2011/10/29/how-to-install-rails/" target="_blank">我這樣安裝 Rails - 佑樣の技術筆記</a>）</em></p>
<h3 id="Octopress">Octopress</h3>
<p>到目前為止，只不過安裝好 <a href="http://www.ruby-lang.org/zh_TW/" target="_blank">Ruby</a> 罷了，接著才是重頭戲──<a href="http://octopress.org/" target="_blank">Octopress</a> 登場！</p>
<p>1. 安裝 <a href="https://github.com/sstephenson/rbenv" target="_blank">rbenv</a></p>
<pre><code><span class="variable">$ </span>brew install rbenv
<span class="variable">$ </span>brew install ruby-build
</code></pre><p>2. 下載 <a href="http://octopress.org/" target="_blank">Octopress</a></p>
<pre><code>$ git <span class="keyword">clone</span> git:<span class="comment">//github.com/imathis/octopress.git octopress</span>
$ cd octopress
</code></pre><p>3. 安裝相關套件</p>
<pre><code><span class="variable">$ </span>gem install bundler
<span class="variable">$ </span>bundle install
</code></pre><p>4. 安裝預設佈景主題</p>
<pre><code><span class="variable">$ </span>rake install
</code></pre><p>如此一來就安裝好 <a href="http://octopress.org/" target="_blank">Octopress</a> 了，你可以輸入<code>rake preview</code>從<code>localhost:4000</code>預覽，或是透過 <a href="http://pow.cx/" target="_blank">Pow</a> 預覽：</p>
<pre><code>$ cd ~<span class="subst">/</span><span class="built_in">.</span>pow
$ ln <span class="attribute">-s</span> /path<span class="attribute">-to</span><span class="attribute">-octopress</span>
</code></pre><h2 id=" 發佈 ">發佈</h2>
<p>1. 在 <a href="https://github.com/" target="_blank">GitHub</a> 建立名為<code>http://yourname.github.com</code>的 repository，<code>yourname</code>必須與你的使用者名稱相同，否則會建立專案頁面。</p>
<p>2. 設定 <a href="https://github.com/" target="_blank">GitHub</a> 資料，並依照指示輸入 GitHub 頁面的 repository 網址。</p>
<pre><code><span class="variable">$ </span>rake setup_github_pages
</code></pre><p>3. 建立網誌資料</p>
<pre><code><span class="variable">$ </span>rake generate
</code></pre><p>4. 發佈至 <a href="https://github.com/" target="_blank">GitHub</a></p>
<pre><code><span class="variable">$ </span>rake deploy
</code></pre><p>5. 建立 commit</p>
<pre><code><span class="variable">$ </span>git add .
<span class="variable">$ </span>git commit -m <span class="string">'your message'</span>
<span class="variable">$ </span>git push origin source
</code></pre><p>過幾分鐘後 <a href="https://github.com/" target="_blank">GitHub</a> 就會寄信通知你專業建立完成，連上<code>yourname.github.com</code>就能見到你的 <a href="http://octopress.org/" target="_blank">Octopress</a> 囉！</p>
<p>若要進一步設定，請編輯 <a href="http://octopress.org/" target="_blank">Octopress</a> 根目錄中的<code>_config.yml</code>。</p>
<h3 id=" 自定網域 ">自定網域</h3>
<p>在<code>source/CNAME</code>輸入網域名稱</p>
<pre><code>$ <span class="built_in">echo</span> <span class="string">'your-domain.com'</span> &gt;&gt; <span class="built_in">source</span>/CNAME
</code></pre><p>若網域名稱如<code>www.example.com</code>，只需要新增 CNAME 記錄<code>yourname.github.com</code>即可；若如<code>example.com</code>，則必須加入 A 記錄<code>207.97.227.245</code>，請勿使用 CNAME 記錄。</p>
<p><em>（以上安裝步驟參考自 <a href="http://octopress.org/docs/" target="_blank">Octopress Documentation</a>）</em></p>
<h2 id=" 寫作 ">寫作</h2>
<p>雖然安裝看起來很麻煩，不過寫作文章相當簡單！</p>
<h3 id=" 文章 ">文章</h3>
<pre><code><span class="variable">$ </span>rake new_post[<span class="string">'title'</span>]
</code></pre><p>輸入以上代碼後，就可在<code>source/_posts</code>見到<code>yyyy-mm-dd-title.markdown</code>格式的文件，以及以下內容：</p>
<pre><code><span class="bullet">---
</span>layout: post
title: "Post Title"
date: 2012-01-14 15:52
comments: true
<span class="header">categories:
---</span>
</code></pre><p>你可透過以下幾種方式來編輯分類：</p>
<pre><code><span class="header"># 單一分類</span>
categories: Sass

<span class="header"># 多重分類 (1)</span>
categories: [CSS3, Sass, Media Queries]

<span class="header"># 多重分類 (2)</span>
categories:
<span class="bullet">- </span>CSS3
<span class="bullet">- </span>Sass
<span class="bullet">- </span>Media Queries
</code></pre><p><a href="http://octopress.org/" target="_blank">Octopress</a> 完整支援 <a href="http://markdown.tw/" target="_blank">Markdown</a> 語法，另外可利用<code>&lt;!-- more --&gt;</code>達成「詳閱全文」的效果。</p>
<h3 id=" 分頁 ">分頁</h3>
<pre><code><span class="comment"># 一般分頁    </span>
<span class="variable">$ </span>rake new_page[your-page]

<span class="comment"># 子分頁</span>
<span class="variable">$ </span>rake new_page[your-page/sub-page.html]
</code></pre><p>輸入以上代碼後，就可在<code>source/your-page</code>中見到<code>index.markdown</code>，以及以下內容：</p>
<pre><code><span class="bullet">---
</span>layout: page
title: "Page Title"
date: 2012-01-14 15:52
comments: true
sharing: true
<span class="header">footer: true    
---</span>
</code></pre><p>操作方法與文章大同小異，同樣完整支援 <a href="http://markdown.tw/" target="_blank">Markdown</a> 語法。</p>
<h3 id=" 建立 ">建立</h3>
<p>輸入<code>rake generate</code>即可建立文章或分頁，輸入<code>rake deploy</code>就會將文章 pull 到<a href="https://github.com/" target="_blank">GitHub</a>上。</p>
<h2 id=" 結論 ">結論</h2>
<p>經過這幾天的試用結果，老實說 <a href="http://octopress.org/" target="_blank">Octopress</a> 實在有夠難用，沒有如 <a href="http://wordpress.org/" target="_blank">WordPress</a> 的強大管理介面，所有操作<em>（包括新增文章、分頁）</em>都必須透過終端；然而撰寫文章比 <a href="http://wordpress.org/" target="_blank">WordPress</a> 快多了，不需忍耐 <a href="http://wordpress.org/" target="_blank">WordPress</a> 慢吞吞的編輯器，在 local 用 <a href="http://markdown.tw/" target="_blank">Markdown</a> 寫完就能直接 deploy 到 <a href="https://github.com/" target="_blank">GitHub</a> 上。</p>
<p>如果你是個 geek，<a href="http://octopress.org/" target="_blank">Octopress</a> 或許是不錯的選擇；如果不是的話，請繼續使用 <a href="http://wordpress.org/" target="_blank">WordPress</a> 吧！</p>
]]></content>
    <summary type="html"><![CDATA[<p><img src="http://i.minus.com/i4CFI4qZAFEct.png" alt=""></p>
<p><a href="http://www.acsite.net/tw/" target="_blank">ACSite</a> 的空間即將在 2012/1/31 到期，而我又懶得續約，這時看到愈來愈多部落客都從 <a href="http://wordpress.org/" target="_blank">WordPress</a> 轉移到 <a href="http://octopress.org/" target="_blank">Octopress</a>，便開始試用 <a href="http://octopress.org/" target="_blank">Octopress</a>。</p>
<p><a href="http://octopress.org/" target="_blank">Octopress</a> 與 <a href="http://wordpress.org/" target="_blank">WordPress</a> 同樣身為部落格系統，卻有相當大的不同：</p>
<ul>
<li><strong><a href="http://wordpress.org/" target="_blank">WordPress</a>：</strong><ul>
<li>PHP</li>
<li>動態網頁</li>
<li>外掛多樣</li>
<li>速度慢</li>
<li>使用簡單</li>
</ul>
</li>
<li><strong><a href="http://octopress.org/" target="_blank">Octopress</a>：</strong><ul>
<li>Ruby</li>
<li>靜態網頁</li>
<li>剛起步，外掛還很少</li>
<li>速度快</li>
<li>geek 才會用</li>
</ul>
</li>
</ul>
<p>以下將簡單介紹 <a href="http://octopress.org/" target="_blank">Octopress</a> 的安裝與使用。</p>
]]></summary>
    
      <category term="Octopress" scheme="http://zespia.tw/tags/Octopress/"/>
    
      <category term="Ruby" scheme="http://zespia.tw/tags/Ruby/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Google+ Motionless & Filter]]></title>
    <link href="http://zespia.tw/blog/2011/09/17/google-scripts-2/"/>
    <id>http://zespia.tw/blog/2011/09/17/google-scripts-2/</id>
    <published>2011-09-17T00:00:00.000Z</published>
    <updated>2012-10-10T16:39:03.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ieJceSDuuo3RS.png" alt=" サイノウサンプラー | ryosios（id=21795820）"></p>
<p>最近課業繁重，無法抽出時間撰寫網誌，於是 <del>寫這篇文章來騙人氣</del> 再介紹一次之前寫的 2 個 Google+ 腳本。上圖與本文毫無關係，純粹是在 Pixiv 上隨便抓一張圖片而已。</p>
<h2 id="Google+_Motionless">Google+ Motionless</h2>
<p>看圖、影片或閱讀文章時，因為訊息串的快速更新，常會使畫面不斷上下抽動，不只妨礙視覺，有時還會誤按連結，因此當做練功寫了這個腳本，並於 1.0.4 版新增「自動載入下頁」功能。</p>
<p><a href="http://userscripts.org/scripts/show/111484" target="_blank">下載（Ver. 1.0.4）</a></p>
<h2 id="Google+_Fxxking_Filter">Google+ Fxxking Filter</h2>
<p>「樹大必有枯枝，人多必有白痴」，有時在訊息串上會看到令人很不爽的發言，透過這腳本可以將不想看到的訊息過濾，還給使用者一片乾淨的訊息串。</p>
<p><a href="http://userscripts.org/scripts/show/111206" target="_blank">下載（Ver. 1.0.1）</a></p>
]]></content>
    
    
      <category term="JavaScript" scheme="http://zespia.tw/tags/JavaScript/"/>
    
  </entry>
  
</feed>