atom.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><![CDATA[Zespia]]></title>
  <link href="http://zespia.tw/atom.xml" rel="self"/>
  <link href="http://zespia.tw"/>
  <updated>2013-11-10T09:37:18.639Z</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 type="html"><![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>2013-11-10T09:32:36.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>系統</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>劇情</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>結語</h2>
<p>雖然主線劇情本身還算有趣，但是真的太短了，而且沒有角色專屬劇情，6 種職業都是相同的劇情，實在令人乏味，主線劇情結束後，就只有壓力摳米的混沌迷宮和收集藝廊 CG，希望日後能開放新地圖或劇情的 DLC。</p>
<p>下集預告：<a href="http://atelier-ps3.jp/escha-logy/" target="_blank">《愛絲卡 &amp; 羅吉的煉金工房》</a></p>
]]></content>
    <category scheme="http://zespia.tw/tags/遊戲/" term="遊戲"/>
    <category scheme="http://zespia.tw/tags/PS Vita/" term="PS Vita"/>
  </entry>
  <entry>
    <title type="html"><![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>安裝</h2>
<p>Octopress 版本：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="title">cd</span> octopress
<span class="title">git</span> clone git://github.com/tommy351/octopress-theme-phase.git .themes/phase
<span class="title">rake</span> install['phase']
<span class="title">rake</span> 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><span class="title">cd</span> hexo
git clone <span class="url">git://github.com/tommy351/hexo-theme-phase.git</span> themes/phase
</pre></td></tr></table></figure>

<p>Hexo 版本安裝後別忘了將<code>_config.yml</code>內的<code>theme</code>參數調整為<code>phase</code>。</p>
<h2>FAQ</h2>
<h3>Octopress 版和 Hexo 版有什麼差別？</h3>
<ul>
<li>Octopress 版沒有相簿（photo）和連結（link）兩種布局</li>
<li>部分樣式的微妙差別</li>
<li><del>Octopress 速度比較慢</del></li>
</ul>
<h3>如何編輯選單？</h3>
<ul>
<li>Octopress 版本：編輯<code>source/_includes/custom/navigation.html</code>。</li>
<li>Phase 版本：編輯<code>_config.yml</code>的<code>menu</code>參數。</li>
</ul>
<h3>如何關閉 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>如何關閉 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>
    <category scheme="http://zespia.tw/tags/Hexo/" term="Hexo"/>
    <category scheme="http://zespia.tw/tags/Octopress/" term="Octopress"/>
    <category scheme="http://zespia.tw/tags/Node.js/" term="Node.js"/>
  </entry>
  <entry>
    <title type="html"><![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="keyword">function</span>(err, file){
    <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>
  var rs = <span class="transposed_variable">fs.</span>createReadStream(source),
    ws = <span class="transposed_variable">fs.</span>createWriteStream(destination);
    
  <span class="transposed_variable">rs.</span>pipe(ws).on(<span class="string">'error'</span>, <span class="keyword">function</span>(err)<span class="cell">{
    if (err) throw err;
  }</span>);
  
  <span class="transposed_variable">ws.</span>on(<span class="string">'close'</span>, callback).on(<span class="string">'error'</span>, <span class="keyword">function</span>(err)<span class="cell">{
    if (err) throw err;
  }</span>);
}
</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>
    <category scheme="http://zespia.tw/tags/Node.js/" term="Node.js"/>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
  </entry>
  <entry>
    <title type="html"><![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>外觀</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>內容</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>結語</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>
    <category scheme="http://zespia.tw/tags/PS3/" term="PS3"/>
    <category scheme="http://zespia.tw/tags/遊戲/" term="遊戲"/>
  </entry>
  <entry>
    <title type="html"><![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>優點</h2>
<h3>相機</h3>
<p>1200 萬畫素應該足以應付一般的照片拍攝了，而且這支手機附有快門鍵，可以像一般的數位相機一樣半按對焦、全按拍攝，不過缺點就是對焦的速度有點慢，而且有些過度修飾。</p>
<h3>螢幕超讚</h3>
<p>不得不說，這螢幕真他媽的讚，342 dpi 根本看不到半點鋸齒或顆粒，真希望我的電腦螢幕也有這麼高的 dpi。（窮學生可買不起 Macbook Pro with Retina Display 啊！）</p>
<h3>喇叭很大聲 <del>你在大聲什麼啦</del></h3>
<p><img src="http://i.minus.com/i76S8YXKlmHM1.jpg" alt=""></p>
<p>上一支手機的喇叭很小聲，震動也很小，<del>根本不能拿來當按摩器用</del>，害我常常漏接電話。</p>
<p>Xperia S 的鈴聲就非常大聲了，大概是因為有 xLOUD 技術加持的地步。</p>
<h2>缺點</h2>
<h3>透明光帶</h3>
<p><img src="http://i.minus.com/idbYLZD3wdZIt.jpg" alt=""></p>
<p>這是優點也是缺點，當初就是被透明光帶的外觀所吸引，然而 Xperia S 的按鍵卻不是放在透明光帶上，也不是放在透明光帶上的那三個小點，而是這兩者之間一個非常曖昧的位置，所以要按這三個按鍵最好的方式就是──從光帶的位置往上滑動。</p>
<h3>不能插記憶卡</h3>
<p><img src="http://i.minus.com/iJFQWYEGu8zoa.png" alt="32GB 中有 2GB 可用來安裝應用程式，其他使用者可用的部份為 25.8GB"></p>
<p>雖然這是個缺點，不過並不會對我帶來太大麻煩，內建的 32GB 對我而言已經非常足夠了。</p>
<h3>不能換電池</h3>
<p><img src="http://i.minus.com/ibuURr9UHsmu42.png" alt=""></p>
<p>雖然用到目前尚未出現非得更換電池的狀況，不過這的確是一個滿機車的設定，現在的手機怎麼都學起 iPhone 來了。</p>
<p>而智慧型手機這種東西，令人懷疑是不是設有漏電裝置之類的，只是用網路看漫畫而已，就能在一小時內減少 10% 電力。</p>
<h2>結論</h2>
<p>雖然有些缺點，不過依然瑕不掩瑜，空機價只要不到 13000 元，真的是一支 CP 值很高的手機。</p>
]]></content>
    <category scheme="http://zespia.tw/tags/Android/" term="Android"/>
  </entry>
  <entry>
    <title type="html"><![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>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</code></pre>
</li>
<li><p>升級內建的 <a href="https://github.com/tommy351/hexo-theme-light" target="_blank">Light</a> 主題。</p>
<pre><code> cd themes/<span class="shader"><span class="keyword">light</span>
 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>新功能</h2>
<p>0.1 當然不是白升級的，我加入了一些 <del>無關緊要的</del> 新功能。</p>
<h3>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> <span class="title">hexo</span> 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> <span class="title">hexo</span> deploy</code></pre>
<p>然後就可以去泡杯咖啡等佈署完成了！</p>
</li>
</ol>
<h3>附加元件</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>小改變</h2>
<h3>伺服器新增記錄功能</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 lang-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:
</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>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>改進</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>結論</h2>
<p>0.1 似乎僅完成了上篇文章中開發目標的其中三項，看來未來仍有一段路要走。我最近發現，Render 似乎占了 Generate 很大一部分的時間，如果把模版改為 <a href="http://paularmstrong.github.com/swig/" target="_blank">Swig</a> 不知道會不會好些。</p>
]]></content>
    <category scheme="http://zespia.tw/tags/Node.js/" term="Node.js"/>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
    <category scheme="http://zespia.tw/tags/Hexo/" term="Hexo"/>
  </entry>
  <entry>
    <title type="html"><![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>尋覓</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>造輪子</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>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>安裝</h3>
<p>前提是必須先安裝 Node.js，至於怎麼安裝自己 Google 吧</p>
<figure class="highlight lang-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>初始化</h3>
<figure class="highlight lang-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>佈署</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>建立文章、分頁</h3>
<figure class="highlight lang-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>生成檔案</h3>
<figure class="highlight lang-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>伺服器</h3>
<figure class="highlight lang-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 lang-bash"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre>cd ~/.pow
ln -s /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>結論</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>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
    <category scheme="http://zespia.tw/tags/Node.js/" term="Node.js"/>
    <category scheme="http://zespia.tw/tags/Hexo/" term="Hexo"/>
  </entry>
  <entry>
    <title type="html"><![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>2013-03-17T10:29:35.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>結局</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>
    <category scheme="http://zespia.tw/tags/PS3/" term="PS3"/>
    <category scheme="http://zespia.tw/tags/遊戲/" term="遊戲"/>
  </entry>
  <entry>
    <title type="html"><![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>序章</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>安裝</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="variable">.nvm</span>/nvm<span class="variable">.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>模組</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>存放空間</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>外觀</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>未來</h2>
<p>目前 0.0.7 版已經完成，不過尚未 deploy 至 <a href="http://heroku.com/" target="_blank">Heroku</a>，主要是強化快取的部分，事先儲存已渲染過的網頁，就不用在每次瀏覽時都讀取資料庫。</p>
<p>等到 Bug 都除完之後，大概就會發佈原始碼了，我能看到那一天的到來嗎……？</p>
<h2>後記</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>
    <category scheme="http://zespia.tw/tags/Node.js/" term="Node.js"/>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
  </entry>
  <entry>
    <title type="html"><![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>背景</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>參考資料</h3>
<ul>
<li><a href="https://developer.mozilla.org/en/Canvas_tutorial" target="_blank">Canvas tutorial - MDN</a></li>
</ul>
<h2>字體</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>後記</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>
    <category scheme="http://zespia.tw/tags/Octopress/" term="Octopress"/>
    <category scheme="http://zespia.tw/tags/主題/" term="主題"/>
  </entry>
  <entry>
    <title type="html"><![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>設計</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>開始</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>套版</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>後記</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>
    <category scheme="http://zespia.tw/tags/WordPress/" term="WordPress"/>
    <category scheme="http://zespia.tw/tags/主題/" term="主題"/>
  </entry>
  <entry>
    <title type="html"><![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"><a href="http://windows.microsoft.com/en-US/windows-8/iso">http://windows.microsoft.com/en-US/windows-8/iso</a></a></li>
<li>序號：<code>DNJXJ-7XBW8-2378T-X22TX-BKG7J</code></li>
</ul>
<p>身為一名無聊高中生的我，ISO 檔一釋出便立刻下載，然而 Windows 8 並沒有符合我的期待。（軟粉不要打我）</p>
<a id="more"></a>

<h2>安裝</h2>
<p><img src="http://i.minus.com/iTEEu9lwJJUIR.png" alt=""></p>
<p>因為懶得切硬碟，所以這次使用虛擬機安裝 Windows 8，安裝過程非常順利，從初始化、設定 Windows Live 帳號到進入桌面，總共僅需花費 20 分鐘，與過去安裝作業系統至少得花費一小時的經驗截然不同。</p>
<h2>操作</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>使用體驗</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>結論</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>
    <category scheme="http://zespia.tw/tags/Windows/" term="Windows"/>
  </entry>
  <entry>
    <title type="html"><![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>開始之前</h2>
<p>首先必須了解<code>audio</code>標籤的使用方式：</p>
<figure class="highlight lang-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 lang-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>介面</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>核心</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 lang-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 lang-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 lang-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="keyword">function</span>(){
  play.title = <span class="string">'pause'</span>;
}, <span class="literal">false</span>);

audio.addEventListener(<span class="string">'pause'</span>, <span class="keyword">function</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 lang-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="keyword">function</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 lang-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="keyword">function</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 lang-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="keyword">function</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>播放列表</h2>
<p>一個播放器的基礎功能就此完成，能夠播放、暫停、調整音量、調整時間。但這顯然還不夠，播放列表對於播放器而言相當重要。<em>（大概啦）</em></p>
<p><img src="http://i.minus.com/inE9d4C1xPbYD.png" alt=" 不要吐槽為啥播放列表裡全是動漫歌，林北就是宅啦..."></p>
<p>與自己的邏輯奮戰大約一晚後，有播放列表、隨機播放、重複播放（單首、全部）功能的播放器於焉完成。只需要 214 行、約 6KB 的代碼<em>（未壓縮）</em>即可完成，應該能算是輕便簡易了。</p>
<h2>後記</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 lang-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>參考出處</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>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
    <category scheme="http://zespia.tw/tags/HTML5/" term="HTML5"/>
  </entry>
  <entry>
    <title type="html"><![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>安裝</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>Q&amp;A</h2>
<h3>如何顯示右上角的 Facebook 連結？</h3>
<p>在<code>_config.yml</code>新增<code>facebook_user</code>參數，並填入您的 Facebook ID。</p>
<h3>如何編輯選單？</h3>
<p>編輯<code>slash</code>→<code>source</code>→<code>_includes</code>→<code>custom</code>→<code>navigation.html</code>。</p>
<h3>如何隱藏頁首的 Twitter 訊息串？</h3>
<p>刪除<code>slash</code>→<code>source</code>→<code>_layouts</code>→<code>default.html</code>的第 6 行。</p>
<h3>如何關閉 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>
    <category scheme="http://zespia.tw/tags/主題/" term="主題"/>
    <category scheme="http://zespia.tw/tags/Octopress/" term="Octopress"/>
  </entry>
  <entry>
    <title type="html"><![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>HTML</h3>
<figure class="highlight lang-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>CSS</h3>
<figure class="highlight lang-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>後記</h2>
<p><img src="http://i.minus.com/ibbaIEKvPdl6Pc.jpg" alt=""></p>
<p>寫到最後反而發現詞窮，看來我真不是寫文章的料。總而言之，這是「大概很簡單」教學系列的第二彈，感謝你的收看！</p>
]]></content>
    <category scheme="http://zespia.tw/tags/CSS/" term="CSS"/>
  </entry>
  <entry>
    <title type="html"><![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>基礎</h2>
<h3>HTML</h3>
<figure class="highlight lang-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>CSS</h3>
<figure class="highlight lang-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>JS</h3>
<figure class="highlight lang-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="keyword">function</span>($){
  <span class="comment">// 用 each 遍歷頁籤</span>
  $(<span class="string">'#tabs li'</span>).each(<span class="keyword">function</span>(i){
    <span class="keyword">var</span> _i = i;

    <span class="comment">// 綁定 click 事件到頁籤上，若要改為滑鼠移入切換頁籤的話，將 click 改為 mouseenter</span>
    $(<span class="keyword">this</span>).click(<span class="keyword">function</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>進階</h2>
<p>只有單純的顯示隱藏似乎太無趣了？那就加點動畫吧！只要稍微變更基礎結構，就能讓頁籤看起來更加華麗！</p>
<h3>HTML</h3>
<figure class="highlight lang-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>CSS</h3>
<figure class="highlight lang-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>JS</h3>
<figure class="highlight lang-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="keyword">function</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="keyword">function</span>(i){
    <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="keyword">function</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 = parseInt($(<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="keyword">function</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>後記</h2>
<p><img src="http://i.minus.com/ibiEDX70iCDveF.PNG" alt=""></p>
<p>最後的成果如上圖，當然細部的樣式、動畫請自行設定。希望這篇文章簡單易懂（？）的文章能夠幫助到你。最近預計再寫一篇 CSS Only 的多級選單教學，請拭目以待吧！</p>
]]></content>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
  </entry>
  <entry>
    <title type="html"><![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>安裝</h2>
<h3>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><span class="comment">$</span> <span class="comment">ruby</span> <span class="literal">-</span><span class="comment">e</span> <span class="comment">"$(curl</span> <span class="literal">-</span><span class="comment">fsSL</span> <span class="comment">https://raw</span>.<span class="comment">github</span>.<span class="comment">com/gist/323731)"</span>
<span class="comment">$</span> <span class="comment">brew</span> <span class="comment">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><span class="char">$ </span>bash &lt; &lt;(curl -s <span class="method">https:</span>//rvm.beginrescueend.com/install/rvm)
<span class="char">$ </span>echo <span class="comment">"[[ -s $HOME/.rvm/scripts/rvm ]] &amp;&amp; source $HOME/.rvm/scripts/rvm"</span> &gt;&gt; ~/.profile <span class="char">$ </span>. ~/.profile
<span class="char">$ </span>source ~/.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="comment">$</span> <span class="comment">rvm</span> <span class="comment">install</span> <span class="comment">1</span>.<span class="comment">9</span>.<span class="comment">2</span>
<span class="comment">$</span> <span class="comment">rvm</span> <span class="comment">1</span>.<span class="comment">9</span>.<span class="comment">2</span> <span class="literal">-</span><span class="literal">-</span><span class="comment">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="variable">.pow</span><span class="variable">.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>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><span class="char">$ </span>git clone <span class="method">git:</span>//github.com/imathis/octopress.git octopress
<span class="char">$ </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><span class="char">$ </span>cd ~/.pow
<span class="char">$ </span>ln -s /path-to-octopress</code></pre>
<h2>發佈</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>自定網域</h3>
<p>在<code>source/CNAME</code>輸入網域名稱</p>
<pre><code>$ <span class="keyword">echo</span> <span class="string">'your-domain.com'</span> &gt;&gt; source/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>寫作</h2>
<p>雖然安裝看起來很麻煩，不過寫作文章相當簡單！</p>
<h3>文章</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="comment">---</span>
<span class="title">layout</span>: post
<span class="title">title</span>: <span class="string">"Post Title"</span>
<span class="title">date</span>: <span class="number">2012</span>-<span class="number">01</span>-<span class="number">14</span> <span class="number">15</span>:<span class="number">52</span>
<span class="title">comments</span>: true
<span class="title">categories</span>:
<span class="comment">---</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>分頁</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="method">layout:</span> page
<span class="method">title:</span> <span class="comment">"Page Title"</span>
<span class="method">date:</span> <span class="number">2012</span>-<span class="number">01</span>-<span class="number">14</span> <span class="number">15</span>:<span class="number">52</span>
<span class="method">comments:</span> <span class="keyword">true</span>
<span class="method">sharing:</span> <span class="keyword">true</span>
<span class="method">footer:</span> <span class="keyword">true</span>    
---</code></pre>
<p>操作方法與文章大同小異，同樣完整支援 <a href="http://markdown.tw/" target="_blank">Markdown</a> 語法。</p>
<h3>建立</h3>
<p>輸入<code>rake generate</code>即可建立文章或分頁，輸入<code>rake deploy</code>就會將文章 pull 到<a href="https://github.com/" target="_blank">GitHub</a>上。</p>
<h2>結論</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>
    <category scheme="http://zespia.tw/tags/Octopress/" term="Octopress"/>
    <category scheme="http://zespia.tw/tags/Ruby/" term="Ruby"/>
  </entry>
  <entry>
    <title type="html"><![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>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>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 scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
  </entry>
  <entry>
    <title type="html"><![CDATA[HTML5 Storage 的使用彙整]]></title>
    <link href="http://zespia.tw/blog/2011/08/04/html5-storage/"/>
    <id>http://zespia.tw/blog/2011/08/04/html5-storage/</id>
    <published>2011-08-04T10:01:00.000Z</published>
    <updated>2012-10-10T16:36:49.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ich1TucSOe08P.jpg" alt=" 找不到相關的圖，各位就把小惡魔胸前的脂肪塊當做 Storage 吧！（id=21000433）"></p>
<p>當初寫 Google+ Hover Zoom 這腳本時，壓根沒想過可以用 Greasemonkey 內建的參數來儲存資料，於是就選用 HTML5 的 Storage 功能來儲存資料，然而此功能僅能儲存字串（String），讓我花了好些時間上網找資料才能掌握此功能的使用方式。</p>
<a id="more"></a>

<p>Storage 的功能基本上與 cookie 大致相同，然而儲存空間比 cookie 大多了，cookie 僅有 4KB 的空間，Storage 卻有 5MB 的空間，讓開發者能夠好好善用。此功能的使用方式非常簡單，分為：Local Storage 與 Session Storage，顧名思義，兩者都是將資料儲存於用戶端的功能，然而前者能儲存的時間較長，直到使用者清除快取前都不會被刪除，而後者在使用者關閉分頁後資料就會被刪除；兩者的使用方式完全相同，以下皆以 Local Storage 作為示範。</p>
<p>下文皆使用 jQuery 1.7.1。<del>（因為我只會 jQuery）</del></p>
<h2>基礎</h2>
<h3>設定資料</h3>
<p>以下三種方式擇一即可，下文亦同。</p>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>localStorage[<span class="string">'test'</span>] = testValue;
localStorage.setItem(<span class="string">'test'</span>, testValue);
localStorage.test = testValue;
</pre></td></tr></table></figure>

<h3>取得資料</h3>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre>localStorage[<span class="string">'test'</span>];
localStorage.getItem(<span class="string">'test'</span>);
localStorage.test;
</pre></td></tr></table></figure>

<h3>刪除資料</h3>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>localStorage.removeItem(<span class="string">'test'</span>);
</pre></td></tr></table></figure>

<h3>資料全部清除</h3>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>localStorage.clear();
</pre></td></tr></table></figure>

<h2>勾選框（checkbox）</h2>
<h3>設定資料</h3>
<p>由於 Storage 僅支援字串，必須使用<code>toString()</code>函數，將 Boolean 值轉為字串才可儲存。</p>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre>localStorage[<span class="string">'test'</span>] = $(<span class="string">'#test'</span>).prop(<span class="string">'checked'</span>).toString();

<span class="comment">// 若 jQuery 版本低於 1.6</span>
localStorage[<span class="string">'test'</span>] = $(<span class="string">'#test'</span>).attr(<span class="string">'checked'</span>).toString();
</pre></td></tr></table></figure>

<h3>取得資料</h3>
<p>使用<code>===</code>判斷資料。</p>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre><span class="keyword">if</span> ( localStorage[<span class="string">'test'</span>] === <span class="string">'true'</span> ) {
    <span class="comment">// Do something</span>
}
</pre></td></tr></table></figure>

<h2>下拉式選單（select）</h2>
<h3>設定資料</h3>
<p>取得選單中<code>:selected</code>的值，並儲存即可。</p>
<figure class="highlight lang-js"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>localStorage[<span class="string">'test'</span>] = $(<span class="string">'#test'</span>).find(<span class="string">':selected'</span>).val();
</pre></td></tr></table></figure>

<h2>陣列（array）</h2>
<h3>設定資料</h3>
<p>陣列大概是讓我最頭痛的部份，同前文所述，Storage 僅支援字串，所以必須先以特殊的分隔符號來隔開每個元素。<em>（如|, $, ; 等符號，隨你喜歡）</em></p>
<p>如果你在下面的陣列中看到德文，那只是我突然中二病發作而已，<del>如果你看得懂的話代表你也是個廚二</del>。</p>
<figure class="highlight lang-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="comment">// 一維陣列</span>
<span class="keyword">var</span> storage = [<span class="string">'one'</span>, <span class="string">'two'</span>, <span class="string">'three'</span>, <span class="string">'four'</span>];
localStorage[<span class="string">'test'</span>] = storage.join(<span class="string">'|||'</span>);

<span class="comment">// 二維陣列（多維陣列亦同）</span>
<span class="keyword">var</span> storage = {[<span class="string">'one'</span>, <span class="string">'eins'</span>], [<span class="string">'two'</span>, <span class="string">'zwei'</span>], [<span class="string">'three'</span>, <span class="string">'drew'</span>], [<span class="string">'four'</span>, <span class="string">'vier'</span>]};
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;storage.length; i++){
  storage[i] = storage[i].join(<span class="string">';'</span>);
}
localStorage[<span class="string">'test'</span>] = storage.join(<span class="string">'|||'</span>);
</pre></td></tr></table></figure>

<h3>取得資料</h3>
<p>利用<code>split</code>函數分割字串。</p>
<figure class="highlight lang-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="comment">// 一維陣列</span>
<span class="keyword">var</span> storage = localStorage[<span class="string">'test'</span>].split(<span class="string">'|||'</span>);
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;storage.length; i++){
  <span class="comment">// do something</span>
}

<span class="comment">// 二維陣列（多維陣列亦同）</span>
<span class="keyword">var</span> storage = localStorage[<span class="string">'test'</span>].split(<span class="string">'|||'</span>);
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i&lt;storage.length; i++){
  <span class="keyword">var</span> item = storage[i].split(<span class="string">';'</span>);
  <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>; j&lt;item.length; j++){
    <span class="comment">// do something</span>
  }
}
</pre></td></tr></table></figure>

<h2>後記</h2>
<p>最近因為課業繁忙，網誌都放著生灰超過一個月了，於是心血來潮將最近寫腳本的心得寫成文章，可能會有錯誤，請多見諒。</p>
]]></content>
    <category scheme="http://zespia.tw/tags/HTML5/" term="HTML5"/>
  </entry>
  <entry>
    <title type="html"><![CDATA[Google+ Hide Comments & Hover Zoom]]></title>
    <link href="http://zespia.tw/blog/2011/07/13/firefox-google-plus-plugins/"/>
    <id>http://zespia.tw/blog/2011/07/13/firefox-google-plus-plugins/</id>
    <published>2011-07-13T00:00:00.000Z</published>
    <updated>2012-09-22T01:21:32.000Z</updated>
    <content type="html"><![CDATA[<p><img src="http://i.minus.com/ihQ0s0iWJDgNU.jpeg" alt=""></p>
<p>大約在兩週前，Google 發表了新的社群服務「Google+」，雖然很多人都說 Facebook 和 Google+ 有很大的不同，不過對我而言 Google+ 就是個宅宅版的 Facebook 罷了，我懶得去分析什麼社群網站的情勢了，今天的重點也不在這裡。</p>
<p>雖然 Google+ 已經發表了一段時間，針對 Firefox 所做的擴充元件還是很少，幾乎沒有，反倒是 Chrome 的擴充套件數量不斷提昇，因此上週六（7/9）我吃飽太閒試著用 jQuery 寫了生平第一個瀏覽器腳本「Google+ Hide Comments」，一個行數不到 40 行的簡單腳本，本來想試著研究 Firefox 擴充套件，但最後太複雜還要先裝一堆擴充套件於是作罷。</p>
<a id="more"></a>

<h2>Google+ Hide Comments</h2>
<p><img src="http://i.minus.com/ibezLR2xu8BKlc.jpg" alt=""></p>
<p>此腳本的功能如上圖，啟用後會在每篇文章的留言後加入“Toggle comments”的連結，點擊“Toggle comments”連結可以展開、摺疊留言。</p>
<blockquote><p>已停止更新</p>
</blockquote>


<h2>Google+ Hover Zoom</h2>
<p><img src="http://i.minus.com/i4Xjzr8VGpgHM.jpg" alt=""></p>
<p>滑鼠移入即可顯示原圖，並能從側邊的下載按鈕直接下載原圖。很簡單的功能，不過他媽的正規表達式有夠難寫，根本天書。目前正規表達式與判斷式的問題應該都修正完畢，未來預計擴充設定頁面的功能並改善效能。</p>
<p><a href="http://userscripts.org/scripts/show/106681" target="_blank">下載</a></p>
<p>我的網誌有種變成雙週刊的趨勢，每兩週才一篇新文章，明後天再發一篇 Steins;Gate 的文章吧。<a href="http://gplus.to/SkyArrow" target="_blank">我的 Google+</a></p>
]]></content>
    <category scheme="http://zespia.tw/tags/JavaScript/" term="JavaScript"/>
  </entry>
</feed>