[台灣。旅行] 黃色小鴨 X 高雄光榮碼頭

2013年9月21日

在新聞頻道照三餐瘋狂宣傳下,黃色小鴨將在台灣巡迴展覽的消息相信已經廣為人知。黃色小鴨的展覽規則之一就是,小鴨本體必須由當地團隊製作/策展。為此台灣的工匠們巧手打造了高18公尺,寬25公尺,體重1000公斤,亞洲第一大(全世界第二大)的小鴨。同時為了避免小鴨沈沒的憾事發生,表皮使用特殊材質製作,不僅美工刀割不破,即便是扁鑽也插不進去!("扁鑽"的比喻出自愛之船導覽人員)

高雄光榮碼頭

為了避開洶湧的人潮,我們選在9/19日開幕預演的時候搶拍小鴨。原先說好早上八點預演,但實際上小鴨進港時已經接近中午了(熱~)。 黃色小鴨 黃色小鴨 跟著警告標語一起入鏡的小鴨,產生新的趣味 :) 黃色小鴨 黃色小鴨 黃色小鴨 拍照用小鴨背版 黃色小鴨 防曬準備工作不能少,千萬不能小看南臺灣的豔陽啊! 黃色小鴨 in 光榮碼頭

街拍小鴨

高雄市成為黃色小鴨落腳台灣的首站可是當地的大事,為了迎接小鴨以及遊客們,街上處處可見黃色小壓的裝飾,形成另一道風景: IMG_2957 黃色小鴨 IMG_2978 由於颱風來襲,才展出一天的黃色小鴨就已經泄氣進港避風雨。想親臨現場感受黃色小鴨魅力可得再等等囉!
read more...

[九州。旅行] 渡遊柳川河

2013年9月13日

柳川是九州著名的古都水鄉,著名的是觀光特色是搭乘人力遊船與吃鰻魚飯。從鬧區天神三越搭乘西鐵電車大牟田線到「西鐵柳川站」約40分鐘。西鐵有賣售柳川/天滿宮電車+遊船+鰻魚飯(選購)各種組合的套票,價格比分開購買來得划算一些。
剛出西鐵柳川站閘門,馬上就有接待人員趨前詢問手持套票的旅客是否參加游船行程,確認後很快地來了一台接駁小巴。由於這天不是假日,車上並沒有其他旅客。約莫五分鐘到達目的地「川下り松月乗船場」,此時船夫已經在岸邊等待了。
IMG_2707
接下來是更加尊榮的包船行程。可以選擇走完整條水道再搭車回西鐵柳川車站,或是遊船至中途點折返,為了節省時間我們選擇後者。
船夫是位開朗的大叔,一路上都用單口相聲的風格介紹沿岸風景人文,偶爾夾雜幾首當地的民謠,十足的日式風情。
IMG_2716

沿岸風光

才剛坐穩,迎面而來的是史蹟柳川城崛水門,水門寬度剛好可以容納一艘船,而我們正在航行的河道正是古代的護城河。
IMG_2734
IMG_2739
沿河會遇到很多像這樣很低的橋,乘客必須矮著身子才能安全通過。船夫先生表示,之前有遊客光顧著拍照,結果不小心掉下水裡。幸好河的水位很低,大約在胸部到小腿這樣的高度而已。
IMG_2762
柳川沿岸的風景十分恬靜。此時正值六月天,是繡球花的季節。氣候非常舒適,穿著短袖感覺涼涼的很舒服。如果是夏天來的話,可得租斗笠防曬,冬天船上則是會提供被爐禦寒。
IMG_2781
IMG_2787
IMG_2796 IMG_2733
這排紅磚建築是古蹟「並倉」,很多海報或宣傳品上都有印。可惜聽不懂日語,無法理解船夫先生的介紹,只好先按快門再說。
IMG_2841
IMG_2725
水路四通八達的柳川盛行河童傳說。
IMG_2869
IMG_2892
IMG_2755
這幾隻小水鴨會跟在船旁邊游泳,累了就徑自上岸休息。
IMG_2812

水上市場

船行至中繼站,沿岸出現了幾間商店,不過今天只有一家營業,船夫先生徵得我們同意後將船稍微靠岸。買了店家海報上廣告的抹茶冰淇淋與 Asahi Super Dry 啤酒,價格稍貴但尚可接受。隨後店家遞上一瓶茶飲給船夫(不曉得是不是因為客人消費才有的)。
微風徐徐,大口喝下一口啤酒,伴著船夫爽朗的歌聲,這似乎才是柳川完整的面貌呢!
IMG_2814 IMG_2801

read more...

[九州。旅行] 福岡雅虎巨蛋日職初體驗 - 軟銀鷹 V.S. 阪神虎

2013年9月1日

台灣職棒在2013年經典賽後變得十分火熱,久聞日本人也很熱愛棒球,這次九洲旅行特別查了福岡巨蛋的賽程表,體驗日本道地的職棒應援文化。
福岡巨蛋是日本第二座巨蛋球場,也是唯一的開閉式球場,主場球隊為福岡軟體銀行鷹隊。搭乘福岡地鐵空港線到唐人町站下車,徒步 15-20 分鐘就可以看到氣派的福岡雅虎巨蛋。
P1060503
聽說非假日的球票並不難買,於是我們就不事先預約,隨性地到了現場才買票。這天是軟銀鷹對戰阪神虎系列賽的最後一場,特殊比賽票價比照假日,最便宜的外野指定席1,800日圓。
在購買的過程中,售票阿姨會(用日語)詢問支持的球隊。我用帶日文腔的英文說了幾次 "SoftBank Hawks" 後終於過關,在不懂日文的情況下成功買到票。
Yahoo! Dome 福岡雅虎巨蛋

球場周邊

傳奇球員王貞治是前日本職棒福岡軟體銀行鷹隊監督(總教練)兼球團副社長、總經理。2010年7月王貞治棒球紀念館在福岡巨蛋開館(需另外購票參觀),王貞治的巨幅照片隨處可見。
P1060520
握手廣場有很多名人的等比例手部模型,讓民眾可以近距離體驗跟名人握手的感覺。很多名人的手都比想像的要小很多。
Yahoo! Dome 福岡雅虎巨蛋
P1060511
大部份的球迷都會帶著球隊專屬的加油道具來看球,像下圖這樣全副武裝的球迷其實還蠻多的。迫於社會壓力,我們也入境隨俗地在旁邊的賣場裡買了軟銀鷹的加油棒 :)
Yahoo! Dome 福岡雅虎巨蛋
入場時需要檢查包包,不過當驗票人員發現我們聽不懂日文後就直接放行了。福岡巨蛋是禁帶外食的,裡面的食物售價也偏高,如果時間充裕的話,建議可以在旁邊的 Shopping mall 海鷹城先用餐,不僅價格親民,選擇性也比較豐富。
Yahoo! Dome 福岡雅虎巨蛋

軟銀鷹 V.S. 阪神虎

比賽開打前有介紹球員以及啦啦隊表演等活動炒熱開場氣氛。
Yahoo! Dome 福岡雅虎巨蛋
Yahoo! Dome 福岡雅虎巨蛋

read more...

[教學] Grunt 學習筆記(2) - 打造更順暢的開發流程

2013年7月14日

前文 [教學] Grunt 學習筆記(1) - Getting Started 帶大家認識 Grunt 的基本用法,這裡我們要進一步使用 Grunt 簡化 Web 前端開發流程。
多數前端專案都會引入一些工具如 Node.js, SASS/Less/Stylus, JSHint 以提升專案品質或是可維護性,但這些工具同時也會提高開發流程的複雜度。例如一個 Stylus 專案的開發流程分解動作如下:
  • 第一動:修改 example.styl 檔案並儲存檔案
  • 第二動:執行 stylus 指令以產生 CSS 檔案: stylus [options] [command] [< in [> out]] [file|dir ...]
  • 第三動:切換至瀏覽器視窗,重新整理畫面確認結果
  • 第四動:切換至編輯器視窗,繼續編輯檔案
  • 重複第一動
重新審視這個流程後,我們發現除了編輯/存檔以外的動作其實都能交給 Grunt 自動化處理。有了 Grunt 以後,開發者就可以專心寫程式,省下不斷地切換視窗重新整理的時間與力氣。

範例專案 hello-grunt

範例專案 hello-grunt 公開在 Github 上,本文將重點放在解釋如何讓專案跑起來,對細節有興趣的人歡迎自行參考 Gruntfile.js 的寫法。

1. 下載範例專案 hello-grunt
$ git clone git@github.com:clayliao/hello-grunt.git

2. 將專案放到本地端開發目錄下,確保能使用 http://localhost/hello-grunt/ 開啓 index.html 檔。例如在 Mac 下可以使用 Symbolic link:
$ cd /Library/WebServer/Documents/
$ sudo ln -s ~/hello-grunt hello-grunt

3. 回到專案目錄下,安裝 Node.js 相依檔案:
$ cd hello-grunt
$ npm install

4. 執行 Grunt,此時 Grunt 會監控 lib/*.styl 檔案與 *.html 檔案,一旦這些檔案被修改過就會作出相對應的動作(例如執行 stylus command)並且通知瀏覽器重新整理。
$ grunt

安裝 Livereload 瀏覽器外掛

Livereload 的主要功能是通知瀏覽器重新整理畫面 ,這個方便的功能已經被整合在 grunt-contrib-watch plugin 中。
Livereload 支援多數主流瀏覽器。以 Chrome 瀏覽器為例,下載並安裝完成後右上角會出現 Livereload 的小圖示,滑鼠點擊小圖示即可啓動 Livereload(請再次確認 $ grunt 正在執行 中,否則會出現錯誤訊息)

體驗全新的開發流程

準備工作就緒後,就讓我們來親身體驗 Grunt 帶來的好處。首先使用編輯器開啓 example.styl 並且試著改變網頁中 <h1> 標題的顏色。起初 <h1> 標題預設是黑色的:

接下來我們試著將顏色改為紅色(存檔後請務必讓雙手離開鍵盤,用心感受一下這個 moment)。此時 Grunt 偵測到了 lib/example.styl 檔案被修改過,於是自動執行 stylus command 編譯新的 CSS 檔案:

編譯成功後,瀏覽器馬上自動重新整理,並且 <h1> 標題也被改成紅色了!另外也可以修改 index.html 的文字內容,您會發現瀏覽器幾乎能夠同步更新內容:


小結

專案 hello-grunt 是簡化過的範例,目的是要展示如何使用 Grunt 將重複的動作自動化,讓開發流程變得更流暢。您可以視需求將 Stylus 換成 SASS/Less,也可以發掘更多的 Grunt 外掛讓自己更上一層樓。

read more...

[教學] 分享照片到 Yahoo! 氣象 App

2013年7月6日

榮獲2013年蘋果設計獎(Apple Design Awards)的 Yahoo! 氣象 App (iOS / Android) 是我最常用的天氣應用程式。除了豐富的氣象訊息外,其漂亮的動態氣象背景圖也是一大特色,查詢氣象資訊之餘還能順便欣賞世界各地的照片。
這些高品質的天氣照片都是 Flickr 用戶提供的。也就是說,每個人都有機會讓自己的照片登上 Yahoo! 氣象 App。只要將您的 Flickr 天氣照片加上地理資訊後提交至 Project Weather 社團,經審核通過就可以在天氣 App 上讓大家都看到囉!(詳見官方說明
經過一段時間的募集後,現在 Flickr Project Weather熱門城市的照片水準都已經高不可攀。專業攝影水準的人當然可以正面對決,但是普通鄉民想登上Yahoo! 氣象 App 的話,就只能靠「開發處女地戰略」了。這次我投稿的地點(日本的熊本市佐世保市以及柳川市)都還在使用系統預設照片,猜想這些地點應該都還沒有人投稿。實際測試後,果然只要符合規定的照片都很有機會通過審核。

照片登上氣象 App 後的畫面如下,其右下角會標示作者 Flickr id:



截至目前小弟共有四張照片上榜,拍攝地點都在日本九州:

熊本城/九州熊本縣(day/cloudy)

柳川/九州柳川市(day/clear)

千陽號/九州佐世保市(day/cloudy)

豪斯登堡/九州佐世保市(day/cloudy)


read more...

[教學] Grunt 學習筆記(1) - Getting Started

2013年6月26日

一般來說,網站上線前都要經過壓縮、測試、打包 package 等佈署動作,在 Linux/Unix 環境下,我們通常將這些指令 (shell script) 寫在 Makefile 裡方便自動化執行。不過很可惜地,這些指令並不具備跨平台的能力,也就是說,在 Windows 與 Linux/Unix 各有不同的寫法。 
Grunt 是一套基於 NodeJS 的 JavaScript Task Runner 工具,它可以跨平台(Windows 系統也能用)、沿用 JavaScript 語法(免學 shell script),還有眾多的 Plugins 支援 CoffeeScript、Handlebars、JSHint、Less、Sass、Compass 等常用工具。

Getting Started

學習 Grunt 最快的方法就是建立一個可執行的範例 。本文的範例將會建立一個 Grunt Task ,完成後就可以讓 Grunt 利用 uglify 工具自動化壓縮 JavaScript 檔案,以後上線部署再也不用純手工壓縮了!
首先我們依照 Getting Started 教學新開了 Gruntfile.js 以及 package.json 兩個檔案,接著在專案目錄下執行命令 grunt ,但是迎面而來的卻是令初學者傻眼的錯誤畫面:

錯誤訊息回報 ugligy:build 這個 Task 出錯了。為了找出原因,我們回過頭來檢查 Gruntfile.js ,看看這個 Task 做了什麼事情。
ugligy:build Task 會將 /src 目錄下的原始檔 helloworld.js (變數 pkg.name 即為範例中的 "my-project-name",這裡我們將它改為 "helloworld" 方便說明)壓縮處理後,放到 /build 目錄下並且命名為 helloworld.min.js("helloworld" 即變數 pkg.name )。
為了順利執行 grunt,我們在專案目錄下建立一個空的 src 目錄,並且在裡面新增一個名為 helloword.js 的 JavaScript 檔案,此外,再新建一個空的 build 目錄用來放置壓縮處理過的結果。完成後的目錄結構如下所示:

回到專案目錄下重新執行指令 grunt,此時取而代之的是是令人放心的成功訊息!(撒花)壓縮處理過的新檔案如預期地新增到 build 目錄下:


更多 Grunt 功能

到這邊我們也算是略懂 Grunt 了,那麼除了 uglify 外,Grunt 還能做些什麼呢?官方網站的 Plugins 頁面列出了所有 Grunt 支援的功能,幾乎所有常見的開發工具都在列表中了。如果這些還不夠的話,Grunt Task 也支援 Shell 指令,如此一來,幾乎沒有什麼是 Grunt 辦不到呢!
回到開發流程,我認為 Grunt 特別適用於混用 Node.js, Livereload, SASS 等工具的開發環境,這些工具都依賴特定的執行環境,此時專案需要並存 Makefile 以及 Rakefile (Ruby) 等,非常複雜且不易維護。使用 Grunt 可以整合這些 Task,讓開發/部署工作變得更單純,這也是除了跨平台外, Grunt 優於 Shell Script / Makefile 的一大優勢。


read more...
Related Posts Plugin for WordPress, Blogger...