[台灣。旅行] 黃色小鴨 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...
Related Posts Plugin for WordPress, Blogger...