Blog (Tumblr) テンプレート デザインメモ

最近、ブログのデザインを変更したので、作業メモを残しておく。

UI デザイン

ページのレイアウトやフォントのサイズなどには、Yahoo UI Library (YUI) を使った。YUIのCSSは次のように読み込んでいる。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&2.7.0/build/base/base-min.css">

その後で、リンクや背景の色などを調整した。レイアウトについては、ページ幅950pxで2カラム、左カラムをページ全体の2/3にした。YUI Gridsを使うと、その辺りの指定が楽にできる。今のデザインでは次のようなタグで指定している。

<div id="doc2"><!-- 950px, centered -->
    <div id="hd">
        <!-- header contents -->
    </div>
    <div id="bd">
        <!-- contents body -->
        <div class="yui-gc"><!-- 2 columns (2/3-1/3) layout -->
            <div class="yui-u first">
                <!-- left column (2/3) -->
            </div>
            <div class="yui-u">
                <!-- right column (1/3) -->
            </div>
        </div>
    </div>
    <div id="ft">
        <!-- footer conetnts -->
    </div>
</div>

ページ内で使っている背景などの画像は、次のオンラインツールを使って作った。

それと、サイト内検索のフォームにあるアイコンは OmniGraffleSeaShore を使って作った。

ページのデザインは、 tmpl.js と次のような内容のファイルを使って確認、調整した。

var htmlContents = {
    h1: '<h1>heading level 1</h1>',
    h2: '<h2>heading level 2</h2>',
    h3: '<h3>heading level 3</h3>',
    h4: '<h4>heading level 4</h4>',
    h5: '<h5>heading level 5</h5>',
    h6: '<h6>heading level 6</h6>',
    p: '<p><em>paragraph</em> - <strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur sint</a> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
    ul: '<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>',
    ol: '<ol><li>Ordered Item 1</li><li>Ordered Item 2</li><li>Ordered Item 3</li></ol>',
    dl: '<dl><dt>Term 1</dt><dd>Definition 1</dd><dt>Term 2</dt><dd>Definition 2</dd></dl>',
    pre: '<pre>preformatted text - Lorem ipsum dolor sit amet, \nconsectetur adipisicing elit, \nsed do eiusmod tempor incididunt \nut labore et dolore magna aliqua. \nUt enim ad minim veniam, \nquis nostrud exercitation ullamco \nlaboris nisi ut aliquip ex ea commodo consequat.</pre>',
    blockquote: '<blockquote>blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>',
    img: '<img src="ph320x240.png" />',
    table: '<table><thead><tr><th>head 1</th><th>head 2</th><th>head 3</th></tr></thead><tbody><tr><td>data 1</td><td>data 2</td><td>data 3</td></tr><tr><td>data 4</td><td>data 5</td><td>data 6</td></tr></tbody></table>',
    code: '<pre><code>var dst = function(placeholder) {\n   var _render = function(str) {\n     return str.replace(/{([A-Za-z0-9_\.]+)}/g, function(mStr, $1){\n            return placeholder[$1] || "";\n     });     \n  };\n    document.title = _render(document.title);\n document.body.innerHTML = _render(document.body.innerHTML);\n};\nwindow.onload = dst(placeholder);</code></pre>'
}

var _placeholder = {};
_placeholder.en = { 
    Title:'STONEDSOUL',
    PostSummary:'an example post',
    Favicon:'http://www.stondsoul.org/fav.ico',
    CustomCSS:'',
    Description:'Quitters never win',
    SearchQuery:'template',
    SearchResultCount:'5',
    RSS:'/rss',
    Permalink:'',
    ShortMonth:'Apr',
    DayOfMonth:'24',
    Year:'2009',
    "12Hour":'10',
    Minutes:'30',
    AmPm:'pm',
    Body:htmlContents.h2 + htmlContents.p
        +htmlContents.h3 + htmlContents.ul + htmlContents.ol
        +htmlContents.h4 + htmlContents.table
        +htmlContents.h5 + htmlContents.pre
        +htmlContents.h6 + htmlContents.code,
    Quote:'Impressive words to quote',
    Source:'Ernest Hemingway',
    "PhotoURL-400":'http://example.com/sample.jpg',
    PhotoAlt:'A good photo',
    Caption:'caption of the embedded content',
    Label:'Steve',
    Line:'Something that Steve said',
    URL:'http://www.yahoo.co.jp/',
    Name:'Destination URL of the link',
    "Video-400":'',
    AudioPlayerBlack:'',
    NextPage:'',
    PreviousPage:'',
    CurrentPage:'2',
    TotalPages:'50'
};

機能デザイン

サイドバーには、サイト内検索、最近のエントリー、Amazonの広告を表示している。これらを作るときは、サーバサイドのスクリプトは使わずに、JavaScriptといくつかのウェブサービスを使った。

最近のエントリー

最初に、最近のエントリーを表示するには、YUI Get utilityを使って、 Tumblr APIが返す内容を読み込んだ。

サイト内検索

Tumblr APIは、キーワード検索がなかったので、YUI AutoCompleteからYahoo search BOSSを使って行っている。

Yahoo search BOSSのID (key)を取得するには “Browser based authentication” を選択する必要がある。そして、指定された内容、名前のHTMLファイルをアップロードして、確認作業を行う(俺は自分のGoogle Appsで使っている Google pagesにアップロードした。ファイルは “BBAuth return URL” にアップロードする必要がある)。

YUI AutoCompleteを使う際に2つ引っかかった点があった。1つは、YAHOO.util.ScriptNodeDataSouceのデフォルトのコールバック関数名が配列になっている (“&callback=YAHOO.util.ScriptNodeDataSource.callbacks[1]”みたいになる)点。このままYahoo search BOSSにリクエストしたら、invalidエラーになった。なので、とりあえず次のような感じに、自分でコールバック関数を定義した。

var dataSource = new YAHOO.util.ScriptNodeDataSource(url, {
    generateRequestCallback: function(){
        return "&callback=myOwnCallbackFunctionName";
    }
});

また、YUI AutoCompleteデフォルトでは、(AutoCompleteの)表示項目を選択すると入力値を更新する。サイト内検索には都合が悪いので、AutoCompleteの設定で “suppressInputUpdate: true” にして、この機能を無効にした。

Amazonの広告

サイドバーには Amazon の広告も追加した。Googleの検索結果から来た場合や、サイト内検索を行った時に表示される。これは Amazon Associates Web ServiceYahoo! Pipes 経由で呼び出し、JSONで受け取っている。Yahoo! Pipesは AWSproxy – ItemSearch のクローンを作って(コピーして)、少し内容を変更して使っている。

それから、referrer をチェックして、Googleの検索結果経由だった場合にキーワードを取得する為に、YUI Browser History Managerの”YAHOO.util.History.getQueryStringParameter” を使って、クエリー文字列から特定のパラメータの値を取得している。

その他、オンラインツール

スクリプトを書く時は、次のツールも使用した。

Advertisements
Blog (Tumblr) テンプレート デザインメモ

Blog (Tumblr) Template Redesign Note

I changed the design of my blog lately. Here is my note of designing the template.

UI design

I’m using Yahoo UI Library (YUI) for page layout, basic font size. The template loads YUI css component with the following tag.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&2.7.0/build/base/base-min.css">

And then I adjusted some styles – link color, background color, etc. Regarding the layout, I set up 2 columns layout with 950px width, and its left column is 2/3 of the page witdh. YUI Grids provide the way to make it easy. I wrote tags for layout as follows.

<div id="doc2"><!-- 950px, centered -->
    <div id="hd">
        <!-- header contents -->
    </div>
    <div id="bd">
        <!-- contents body -->
        <div class="yui-gc"><!-- 2 columns (2/3-1/3) layout -->
            <div class="yui-u first">
                <!-- left column (2/3) -->
            </div>
            <div class="yui-u">
                <!-- right column (1/3) -->
            </div>
        </div>
    </div>
    <div id="ft">
        <!-- footer conetnts -->
    </div>
</div>

I created images with the following online tools.

And I used OmniGraffle and SeaShore to create search icon for site search input.

To check exact image of the page, I used tmpl.js with the following placeholders.

var htmlContents = {
    h1: '<h1>heading level 1</h1>',
    h2: '<h2>heading level 2</h2>',
    h3: '<h3>heading level 3</h3>',
    h4: '<h4>heading level 4</h4>',
    h5: '<h5>heading level 5</h5>',
    h6: '<h6>heading level 6</h6>',
    p: '<p><em>paragraph</em> - <strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur sint</a> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
    ul: '<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>',
    ol: '<ol><li>Ordered Item 1</li><li>Ordered Item 2</li><li>Ordered Item 3</li></ol>',
    dl: '<dl><dt>Term 1</dt><dd>Definition 1</dd><dt>Term 2</dt><dd>Definition 2</dd></dl>',
    pre: '<pre>preformatted text - Lorem ipsum dolor sit amet, nconsectetur adipisicing elit, nsed do eiusmod tempor incididunt nut labore et dolore magna aliqua. nUt enim ad minim veniam, nquis nostrud exercitation ullamco nlaboris nisi ut aliquip ex ea commodo consequat.</pre>',
    blockquote: '<blockquote>blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>',
    img: '<img src="ph320x240.png" />',
    table: '<table><thead><tr><th>head 1</th><th>head 2</th><th>head 3</th></tr></thead><tbody><tr><td>data 1</td><td>data 2</td><td>data 3</td></tr><tr><td>data 4</td><td>data 5</td><td>data 6</td></tr></tbody></table>',
    code: '<pre><code>var dst = function(placeholder) {n   var _render = function(str) {n     return str.replace(/{([A-Za-z0-9_.]+)}/g, function(mStr, $1){n            return placeholder[$1] || "";n     });     n  };n    document.title = _render(document.title);n document.body.innerHTML = _render(document.body.innerHTML);n};nwindow.onload = dst(placeholder);</code></pre>'
}

var _placeholder = {};
_placeholder.en = { 
    Title:'STONEDSOUL',
    PostSummary:'an example post',
    Favicon:'http://www.stondsoul.org/fav.ico',
    CustomCSS:'',
    Description:'Quitters never win',
    SearchQuery:'template',
    SearchResultCount:'5',
    RSS:'/rss',
    Permalink:'',
    ShortMonth:'Apr',
    DayOfMonth:'24',
    Year:'2009',
    "12Hour":'10',
    Minutes:'30',
    AmPm:'pm',
    Body:htmlContents.h2 + htmlContents.p
        +htmlContents.h3 + htmlContents.ul + htmlContents.ol
        +htmlContents.h4 + htmlContents.table
        +htmlContents.h5 + htmlContents.pre
        +htmlContents.h6 + htmlContents.code,
    Quote:'Impressive words to quote',
    Source:'Ernest Hemingway',
    "PhotoURL-400":'http://example.com/sample.jpg',
    PhotoAlt:'A good photo',
    Caption:'caption of the embedded content',
    Label:'Steve',
    Line:'Something that Steve said',
    URL:'http://www.yahoo.co.jp/',
    Name:'Destination URL of the link',
    "Video-400":'',
    AudioPlayerBlack:'',
    NextPage:'',
    PreviousPage:'',
    CurrentPage:'2',
    TotalPages:'50'
};

Functional design

I put site search, recent posts and amazon ads in the side bar. I don’t use any server side script for it. I just used JavaScript and some web services.

Recent posts

At first, displaying recent posts, I get post data from Tumblr API with YUI Get utility.

Site search

Since Tumblr API doesn’t provide keyword search function, I’m using Yahoo search BOSS and YUI AutoComplete.

Note that when you get ID for Yahoo search BOSS, you need to choose “Browser based authentication” and you also need some hosting to upload required html file by Yahoo! to confirmation (I used Google pages on my google apps account. You need to upload the html under “BBAuth return URL”).

There were 2 problems on YUI AutoComplete in my case. The first one is that default callback function name of YAHOO.util.ScriptNodeDataSouce is an array (it looks like “&callback=YAHOO.util.ScriptNodeDataSource.callbacks[1]”). But Yahoo search BOSS counted this callback as invalid. I specified my own callback function name and wrote the function. For example,

var dataSource = new YAHOO.util.ScriptNodeDataSource(url, {
    generateRequestCallback: function(){
        return "&callback=myOwnCallbackFunctionName";
    }
});

By default, YUI AutoComplete updates input text when you select an item in the list. However I use this library for site search, so I needed to disable this feature by its configuration “suppressInputUpdate: true”.

Amazon Ads

I added Amazon ads in side bar. It’s displayed when you come here via Google search or you attempt to search posts. I’m using Amazon Associates Web Service via Yahoo! Pipes as a proxy and XML to JSON converter. I create clone of AWSproxy – ItemSearch and modified it a little.

I used “YAHOO.util.History.getQueryStringParameter” in YUI Browser History Manager to get query parameter from referrer URL of Google search results.

Online tools

I also used the following tools when I wrote the script.

Blog (Tumblr) Template Redesign Note