你是否也遇過這些狀況？

• 想跟海外朋友語音，卻發現對方其實是凌晨三點

• 安排跨國會議，每個人都說「那個時間不太行」

• 玩美版或國際服遊戲，活動時間永遠算不準

Clockwise，就是在這樣的情境下誕生的一款萬國時鐘 App。

為什麼會想做 Clockwise？

市面上的萬國時鐘不少，但在實際使用上，總覺得少了點「順手」。

有些介面資訊過多，有些只能顯示死板的列表，
有些甚至還要點進點出，才能知道「現在到底適不適合找對方」。

Clockwise 的目標很單純：

打開 App，一眼就知道
現在是幾點
時差是多少
適不適合聯絡、開會或一起打遊戲

主要特色一覽

多城市萬國時鐘，一眼掌握全世界

你可以自由加入多個城市，建立自己的「時間儀表板」，
不論是朋友所在地、工作夥伴、遊戲伺服器所在地，都能快速查看。

• 支援全球城市搜尋

• 精準處理時區與夏令時間（DST）

• 顯示與本地的時差（+8 / -5 等）

時鐘卡片可自訂，時間也可以很有個性

Clockwise 不只是功能取向，它也重視視覺體驗。

• 每個城市都可以搭配對應的城市圖片

• 支援自訂背景（甚至可以放你喜歡的遊戲圖）

• 可自由拖曳排序，打造最符合你使用習慣的版面

讓你不是在「看資料」，而是在看一個舒服、好辨識的時間畫面。

Best Meeting Time（最佳會議時間）

這是 Clockwise 最實用、也最受歡迎的功能之一。

系統會根據你選擇的多個城市，自動標示出對大家都相對友善的時段，
不用再自己心算、不用反覆來回確認。

特別適合：

• 跨國團隊會議

• 國際合作專案

• 多地玩家揪團、打活動

• 

Widget 支援，桌面就能看時間

Clockwise 支援桌面 Widget，
不用打開 App，就能直接在桌面看到你最在意的城市時間。

對於需要頻繁確認時差的人來說，這點真的很省心。

免費版與 Pro 版的差異

Clockwise 提供免費版，讓你先體驗核心功能；
如果你是重度使用者，也可以選擇 Pro 版解鎖完整體驗。

免費版

• 最多 3 個城市

• 基本時鐘樣式

• 有廣告顯示

Pro 版

• 無城市數量限制

• 完整自訂背景與樣式

• Best Meeting Time 功能

• 無廣告、一次買斷

適合哪些人使用？

如果你是以下族群之一，Clockwise 會非常適合你：

• 遠端工作者、跨國團隊成員

• 國際服遊戲玩家

• 常出國或與海外親友聯絡的人

• 想要一個「打開就懂、不用思考」的萬國時鐘

結語：這是一個「真的會每天用到」的工具

Clockwise 並不是為了炫技而存在的 App，
而是一個在日常生活中，會被不斷打開的小工具。

它解決的不是什麼偉大的問題，
但卻是你一旦習慣，就回不去的那種方便。

如果你也常常被時差搞得很煩，
不妨試試看 Clockwise，
讓時間重新站在你這一邊。

前往下載: Google Play商店

在Laravel 8 建立專案時直接加上參數

laravel new 專案名稱 --jet

安裝時會詢問要哪種 stack，個人偏好用livewire，接著會詢問是否要teams，獨立開發的選no即可。

安裝完後到專案目錄底下執行

npm install && npm run dev

好了之後記得調整專案下的 .env 檔做資料庫的連線相關設定，記得先建立資料庫。

最後執行

php artisan migrate

完成

接著測試一下專案是否正常 進入 https://localhost/test/public/

一切正常

接著進入登入畫面看看如何， 破破破~~破版了！  =.=|||

接著打開專案下的public/mix-manifest.json

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

在 / 前面加上實際專案的路徑

{
    "/js/app.js": "http://localhost/專案名稱/public/js/app.js",
    "/css/app.css": "http://localhost/專案名稱/public/css/app.css"
}

這樣就正常了

在Nginx的環境裡面，定時檢視error.log是很重要的事情，這次小編就遇到了這問題。在 /var/log底下的php7.0-fpm.log裡面可以發現下列的錯誤。

定期查看php7.0-fpm.log

WARNING: [pool www] server reached pm.max_children setting (*), consider raising it

在處理php時，是Nginx直接調用php-fpm，如果請求量過高然後又沒有給php-fpm足夠的配置，就會有資源耗盡的可能，一旦找不到php-fpm，就會出現502的錯誤畫面。

這時候需要調整php的www.conf，如果是php7.0，位置會在 /etc/php/7.0/fpm/poo.ld/www.conf，而需要調整的部分如下，

pm.max_children
pm.start_servers
pm.min_spare_servers
pm.max_spare_servers
pm.max_requests

計算要調整的數量，則是需要依據Server上的記憶體進行調配。可以先查看每一個php-fpm使用的記憶體數量，可以用下列方式來查看。

ps -eo size,pid,user,command --sort -size | awk '{ hr=$1/1024 ; printf("%13.2f Mb ",hr) } { for ( x=4 ; x<=NF ; x++ ) { printf("%s ",$x) } print "" }' | grep php-fpm

會跑出每一個php-fpm所需要的記憶體

33.88 Mb php-fpm: pool www
33.83 Mb php-fpm: pool www
33.57 Mb php-fpm: pool www
33.52 Mb php-fpm: pool www
33.28 Mb php-fpm: pool www
32.34 Mb php-fpm: pool www
32.32 Mb php-fpm: pool www
31.88 Mb php-fpm: pool www
31.86 Mb php-fpm: pool www
31.78 Mb php-fpm: pool www
31.38 Mb php-fpm: pool www
30.35 Mb php-fpm: pool www
28.11 Mb php-fpm: pool www
26.17 Mb php-fpm: pool www
24.29 Mb php-fpm: pool www
24.02 Mb php-fpm: pool www
5.90 Mb php-fpm: master process (/etc/php/7.0/fpm/php-fpm.conf)
0.34 Mb grep –color=auto php-fpm

這樣推算平均大概在30MB左右，如果Server的記憶體是4G來看，扣掉系統運作的部分，假設是3G來計算pm.max_children = 3072MB / 30MB = 102，所以每一個參數都要自己進行調整測試才可以找出符合自己Server的數量，別忘記，調整完畢之後記得要重啟服務。

sudo service php7.0-fpm restart

參考來源：https://myshell.co.uk/blog/2012/07/adjusting-child-processes-for-php-fpm-nginx/

本文同步發表在WordPress工具書

前台登入

在前面Part 2有使用到前台上圖的外掛，這款WP User Frontend有Login的功能，可以調整登入的介面，強制使用者登入完畢之後回到特定頁面，下圖如設定的部分，可以在後台的[User Frontend] > [Settings]找到。

設定完成之後將 [wpuf-login] 填入分頁即可，如下顯示

透過外掛的功能快速達到前台登入的功能，不過如果覺得登入介面不夠華麗，不夠漂亮，可以透過CSS來進行美化。或者使用另一款ProfilePress Lite外掛來達到前台搭入的效果，一樣先從官網的外掛進行下載安裝並且啟用，啟用完畢之後在左側選單會出現ProfilePress的功能清單。裡面有兩的部分，第一個部分是Login Form而另一個部分是Registration Form。

進入Login Form之後可以看到如下的畫面，已經有建立好三種登入樣式，可以快速使用。

接下來將上面隨便一個ShortCode貼入登入的頁面即可，每個登入介面都經過設計，可以直接使用喔！

前台註冊

註冊的填入的表單也是一樣，如下所顯示，將註冊表單的ShortCode填入註冊的頁面即可，這樣就大功告成。

以WordPress為基礎來架設社群的服務基本上都是沒有問題，而是取決要用哪一種方式來達成。艾德覺得市場上的變化很快，用WordPress以最快的速度將服務推出來到市場試水溫更為重要。

以WordPress實作imgur.com的系列文章，講解得很快，有不懂的地方可以發問，也請多多指教！

• 以WordPress實作imgur.com網站為例 (Part 5 – 前台登入)
• 以WordPress實作imgur.com網站為例 (Part 4 – 圖片管理及選單權限)
• 以WordPress實作imgur.com網站為例 (Part 3 – 圖片網址)
• 以WordPress實作imgur.com網站為例 (Part 2 – 前台上圖)
• 以WordPress實作imgur.com網站為例 (Part 1 – 淺談架構)

若對於WordPress有興趣的可以與我聯繫。

edl2000(小老鼠)gmail達康

W4 Post List外掛使用

首先，要建立個人資料的頁面，也就是顯示已經登入的使用者，可以查看自己上傳過的圖片。本次要使用的外掛是W4 Post List，這外掛是免費的，可以在WordPress官方的Plugin找到，一樣先下載進行外掛安裝並且啟用外掛。啟用之後可以在左側選單找到

點選Add New之後開始新增列表。這邊要注意的是，目前是使用Divi內建的Post Type，所以選擇第一個Post的部分，Preset選擇Post with Thumbnail，也就是有使用縮圖做顯示。

再來切換到List Type下方的Posts，因為使用內建的Post Type，所以就要選擇對應的名稱，請將Projects打勾。Post Status為文章狀態，將Publish(發佈)的打勾，好了之後發佈即可。

接下來再W4 Post List的列表頁上面可以取得ShortCode

複製ShortCode的內容，然後點選左側的[頁面] > [新增頁面]，再內容的部分填入剛剛複製的ShortCode。

如此一來就完成囉！前台的頁面您可以透過CSS定義樣式即可。

接下來要處理主選單的部分，這裡講到的權限是有登入的情況下可以看到我的圖片，也就是剛剛透過W4 Post List做的頁面。基本上那一個頁面已經有判斷是否有登入狀態了，所以未登入的情況下點進去是顯示全部的圖片，有登入的情況下則是顯示自己的圖片。不過在選單上我們還做些處理，接下來將使用if Menu這套外掛來進行設定。

if Menu外掛使用

介紹一下這款外掛，外掛名稱看起來大概就知道這功能是甚麼，if 在程式裡面都是做判斷用的，menu就是要顯示的選單(廢話 XD)。一樣到WordPress的官網外掛區進行下載，再進行外掛安裝並且啟用外掛。

外掛啟用之後在外觀裡面可以找到設定，這邊設定是調整管理者是否要看到隱藏的選項。打勾，那麼管理者就會在前台看的到隱藏項目，不打勾則無法看到，就只是測試用而已。

接下來就是主要的部份，直接到[外觀] > [選單 ]，下方用imgnow.cc的做展示設定。

可以看到我的圖片這個選單，有一個Change menu item visibility，也就是改變選單項目的可見度，點選之後可以有不同的條件搭配。

第一個下拉選單有Show 跟 Hide

第二個下拉選單有很多，可以參考畫面顯示。

這邊設定Show > User is logged in，也就是只有在登入狀況下才會顯示這個選項。

好了存檔即可，接下來測試看看前台畫面，上方為登入情況下顯示，下方為未登入的時候顯示。

這樣就完成了查詢使用者上傳圖片的功能以及選單判斷登入顯示！

Part 5: 以WordPress實作imgur.com網站為例 (Part 5 – 前台登入)

調整圖片網址結構：

以WordPress的架構來看，上傳圖片到媒體(Media Library)後取得的圖片路徑一般都是看的出來為WordPress的路徑，如下顯示：

https://網域/wp-content/uploads/2018/03/xxxxxxx.png

如果提供使用者過長的圖片網址，在使用上較為不便，因此可以透過 wp-config.php 的設定進行媒體庫的路徑調整。

打開WordPress根目錄的wp-config.php，新增下列語法

define(‘UPLOADS’, ‘go’);

修改完成後存檔，再來到[設定] > [媒體] > 上傳檔案，請不要將這個設定打勾，若已經打勾請取消掉，並按下儲存變更。

完成之後可以看到圖片網址變短啦！少掉了 wp-content/upload/年/月 這串落落長的部分。

https://網域/go/xxxxxxx.jpg

隨機命名檔案名稱：

縮短完圖片位置的長度之後，再來要將上傳的圖片進行亂數命名，以避免使用者上傳奇怪的圖片檔名。也能更貼近imgur.com XD。這部分在不寫程式的情下可以找到外掛進行處理，目前找到一款WP Upload Rename ，雖然已經三年多沒有更新，不過實際在 WordPress 4.9.5的版本上進行測試也沒有問題的，當然也可以找其他外掛代替。

上傳外掛並啟用。接著到[設定] > [Upload Rename] > 來進行設定，可以參考艾德設定的方式，命名方式是隨機的英文字母，長度為八個字，好了就存檔完成。

實測結果：

實際上傳一張圖片到媒體庫，可以取得實際的圖片路徑。

https://imgnow.cc/go/9U6mTtlz.jpg

這樣Part 3的部分先到這邊啦！

Part 4 : 以WordPress實作imgur.com網站為例 (Part 4 – 圖片管理及選單權限)

事前作業準備：

1. 主機架設
2. SSL憑證安裝
3. WordPress安裝
4. 佈景主題選擇
5. 外掛選擇
6. 佈景設定及修改
7. 發佈內容測試
8. 完成

主機架設：

其實這部分我並不專業，但是在做類似的圖片免空這種服務建議使用VPS，一般的虛擬主機Share Hosting頂多拿來做試驗用，請不要在Share Hosting上面經營，很容易會被主機商因為各種理由給停權。至於要挑選哪一間VPS可以多找幾間，最低規格就可以，未來可以慢慢在提高規格應付需求，這邊艾德就不多說了。

SSL憑證安裝：

免費的憑證服務商有很多，目前 imgnow.cc 是採用Let’s Encrypt，主要讓網站可以使用https及http 2 的架構，加快讀取。

安裝WordPress：

請自行解決 XD，如果您不會安裝WordPress，建議您先從頭開熟悉WordPress會比較適合一些。

佈景主題選擇：

降低開發時間，減少Coding的部分，建議可以挑選一些付費優質的佈景主題，這次艾德使用DIVI這個主題作為imgnow.cc的佈景，另外DIVI也有不少好用的外掛可以使用，也加速網站的開發時程。

接下來開始實作的部分

調整背景顏色：

DIVI主題啟用之後，佈景主題會是白色的，先調整成按灰色，可以透過[外觀] > [自訂] > [General Settings] > [Background] > 設定想要的Background Color，存檔即可。這邊設定深灰色 #202020

選單的部分目前只用到Primary Menu，所以請到[外觀] > [自訂] > [Header & Navigation] > [Primary Menu Bar] > 設定想要的Background Color，這邊設定#404040，淺色一點。

新增Post Type：

DIVI主題內建Projects的Post Type，這對於製作免費圖片空間來說再好不過了，這樣就省去了自己去新增Post Type的部分，當然也可以自行新增Post Type，詳細的Post Type用法可以參閱WordPress官網上的設定。解決了Post Type之後接下就是要處理前台上傳圖片的部分。

前台上傳圖片：

前台讓使用者新增文章及上傳圖片的部分，採用了外掛來WP User Frontend來製作，可以從WordPress官網所提供的外掛服務進行下載，安裝外掛後直接啟用即可。啟用後出現了WPUF的設定的畫面，可以直接點選Not Right Now直接略過。

好了之後會使用到的部分是Post Form，達到客製化發文的介面。

點選Post Form之後，這邊目前完全沒有表單，所以要點選Add Form來進行製作。

新增之後會出現讓你選擇的部分，這邊選擇Blank Form

接下來就會看到設定的畫面，這功能支援拖曳，可以從右邊的選項拖曳到左邊的區塊，也可以直接點選。這邊會使用到的部分有三個Post title、Feature Image、Tags。點選後新增至左側的區塊，在來針對每一個選項進行設定，可以設定是否為必填，Advanced Options裡面還能夠設定輸入的字串長度，設定輸入框內的預設字樣。

好了之後切換到第二個Tab Settings的部分進行設定，Post Type選擇剛剛自行新增的選項，或者選擇主題內建的Project。底下還有Post Status / Post Format 及 Default Post Category 等設定選項，依照個人需求進行調整即可。

再來切換到左側的Submission Restriction，這邊因為之後要考量到不登入的情況下也可以上傳圖片，所以可以透過此功能進行設定。Guest Post，將Enable Guest Post打勾即可啟用。其他英文的顯示內容可以自行成中文。

譬如: This page is restricted. Please Log in / Register to view this page.

設定完成之後記得要點 Save Form 的按鈕

回到Form List的地方可以看到剛剛新增的表單，然後最右邊有一個Shortcode可以使用，請複製這個ShortCode。

然後新增一個頁面，標題命名為上傳圖片，在文章內容輸入Shortcode即可，接下來就可以在前台上傳圖片了！

Part 2的部分先到這邊~~~~

Part 3 : 以WordPress實作imgur.com網站為例 (Part 3 – 圖片網址)

imgnow.cc 是目前以WordPress為架構做出來的免費圖片空間服務，從有這個idea到網站上線，實際的工作時間大約為一週左右，每天以8小時計算。當然有使用一些付費外掛，來減少寫Code的時間，這部分可以隨自己高興來使用，當然能力夠的其實可以少用外掛。

目前 imgnow.cc上面的功能有

1. 社群登入 (Facebook / Google)
2. 前端上傳圖片 (免登入/登入均可上傳)
3. 訪客留言
4. 社群分享
5. 一鍵複製網址

目前這些功能看起來大概符合imgur.com上的了。

不過還是先回過頭來分析一下imgur.com上面有那些功能

首頁：

• 登入
  帳號密碼、社群帳號登入
• 註冊
  帳號密碼、社群帳號登入
• 圖片列表
  一排五張圖片
• 上傳圖片
  登入後可上傳、訪客也可以匿名上傳
• 搜尋功能
  關鍵字搜尋(作者/標題/標籤等等)

單篇圖片頁：

• 圖片顯示
• 社群分享 (Facebook / Twitter等等)
• 圖片網址取得 (Embed Post)
• 下載圖片 (Download Post)
• 上下一則圖片

以上是初步分析，當然imgur.com不只有這些功能，我們先以這些功能透過WordPress來實作。當然會先建議架設一台VPS或者有虛擬主機可以執行，架設主機的部分不多說，艾德是使用DigitalOcean的VPS服務，採用LEMP進行架設。

以上是Part 1的初步分析，接下的Part 2將會開始講解實作的部分。

先到這邊囉~

Part 2 : 以WordPress實作imgur.com網站為例 (Part 2 – 前台上圖)

2017/09/04 賣場購物

桃園南崁特力屋

十點多前往桃園南崁特力屋逛逛，想說這邊的品牌多，應該可以選到符合的尺寸。到現場詢問了服務大使，問了一些問題之後就選定了一組，也順便問了安裝的事情，服務大使說想要自己安裝的話要另外買一個專門拆卸水龍頭的工具，當下覺得麻煩，所以就決定多花500元請特力屋的人員安裝。

前往服務台結帳順便加購500元的安裝服務，在結帳時服務人員說，如果現場有需要額外的材料費用會報價直接處理，可以接受嗎？我說沒問題！買完之後大約當天下午就有接到派工的電話，要安排派工的時間，所以選在9/6 18:00安裝。

2017/09/06 安裝廚房水龍頭

廚房水龍頭

當天來安裝時是老婆來處理，畢竟還在公司，六點絕對無法趕到。安裝人員到現場後先將舊的拆下，在將新的水龍頭安裝上去，卻在最後安裝水管時發現水管不夠長、不夠長、不夠長。

怎麼會不夠長？有沒有這麼剛好，真是恰巧就是不夠長，特力屋賣的是1.5尺的規格，家裡的需要2尺。這個當初沒想到，既然是安裝服務，當初也有說如果需要額外材料的話會報價，但是這時安裝人員說我沒有帶備用材料來，所以準備離開了(最好安裝冷氣也可以發生類似狀況啦！怒~~~~)。

不裝回去嗎？

安裝人員：要付200元才會裝回去。

挖靠！這當初沒講啊，老婆只好答應他裝回去！不然要怎洗菜洗碗啊 …………安裝回去之後安裝人員說他裝20位會遇到1~2位發生這種長度不夠的狀況。!@#!@$#@$%@#$@#$!#!@#!@!#!

一個多小時後我知道狀況馬上打電話去特力屋的客服中心詢問狀況，一線客服其實也沒辦法解決問題，只能說會在確認狀況。但是有說車馬費200元的一定會收的，聽到這我其實已經怒了。過了大概半個多小時候特力屋南崁店的主管打過來，背景有點吵雜，說明狀況之後他們再次強調會收200元的車馬費，卻沒有解決我的問題，這位主管跟我說可以到外面買長一點的管線再後打電話安排時間安裝，或者退費。

掛完電話後想要退費了，根本沒辦法解決問題。

2017/09/09 退貨

十點多前往南崁店退貨，一到現場我就再次將過程跟服務人員說明一次。現場人員竟然跟我說可以去外面買2尺的管線！！！！！我也不客氣的說，我來特力屋買就是希望可以在這邊一次都買到想要的東西，如果我買了A還要再去其他地方買Β才能使用，那我就直接去其他店家買就好了啊，何必來這裡呢？被我這樣說之後她也無話可說。

然後老婆說有沒有客戶意見表，要向貴公司反應這次的狀況。

服務人員說我們沒有這種表？？？

好吧，先退貨再說，結果沒多久就遞上了一張客戶意見表(心理OS: 靠北，剛剛不是說沒有嗎？)

確定退款完成後就離開了！

當天下午大概三點多，一位特力屋南崁店的值班經理打來了解狀況，我把整個過程說明一次。

值班經理一直跟我說不好意思，也表明歉意，說到最後問我要怎麼處理家裡的水龍頭。我說如果貴公司有賣或者可以幫我把水龍頭的不夠的部分搞定的話，我願意到現場再付費。但這位經理表示真的沒有賣2尺的規格，並說明一般規格都是1.5尺，我的需求很特殊(所以我們家社區都是特殊規格就是了)，講到最後也是說不好意思而已，200元的費用當然也不可能退，真不知道特力屋的安裝服務可以如此的糟糕。

我願意再掏錢一次，你們也不願意準備耗材來把長度不夠的問題給解決。

以下是我提出的問題：

1. 安裝服務說明不清
   購買安裝服務時並沒有說跟我說安裝失敗會要再收200元。特力屋網站也沒有註明這點，其實也反應兩週了，網站上也沒看到說明文字，再去審視特力屋的會員條款也沒有寫到這個。
   安裝服務網頁截圖  會員條款網頁截圖
2. 施工流程不夠專業
   可以先看要安裝的商品規格服不符合現場的尺寸，不符合就不用拆掉舊的。在那邊拆了將近半小時，暈倒！
3. 施工的專業度不足
   安裝人員沒有帶耗材來，所以無法施做安裝。難道安裝冷氣會這樣嗎？會跟顧客說不好意思冷媒管不夠長不裝了嗎？真的需要加強專業度。
4. 教育訓練需再加強
   現場人員安裝失敗後要直接閃人，說要付200元才願意裝回去。不知道特力屋是怎麼教育訓練員工的，收費的理由說法不一，實在很難接受，我也可以理解來一趟會有所謂的車馬費，但是裝回去的理由實在很ＯＸ。

後來找了家裡附近的水電行處理，價格差不多，十分鐘就裝好，跟特力屋的安裝人員速度實在差太多。真不知道特力屋到底是怎麼一回事！

E: dpkg was interrupted, you must manually run ‘sudo dpkg –configure -a’ to correct the problem.

從網路上找到解法，如下：

到dpkg更新的目錄下，將底下的資料都刪除，從新更新一次。更新完畢之後再執行更新憑證的指令就可以囉！更新完畢別忘了重啟Server。

cd /var/lib/dpkg/updates
sudo rm *

sudo apt-get update