分類
程式技術

Google Maps Style

Google Maps 大家很常用吧. 在做一些結合 Google Maps 的應用時, 有時會希望能把上面的圖示簡化, 或是一些圖示的顏色改變, 要如何進行呢?

可以使用 Google Maps API Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

這個 Wizard 可以快速的開關與調整圖示的顯示與否與改變顏色, 設定好後, 再產生出 JSON 格式的描述檔, 就可以自訂 Sytle 的 Google Maps.

例如要所有的水都消失:

[ { “featureType”: “water”, “stylers”: [ { “visibility”: “off” } ] } ]

以此類推, 一方面預覽一方面快速產出對應的描述檔, 很快速地建立自訂的 Google Maps.

不過若是想要找一些現成的, 可以利用這個服務:
https://snazzymaps.com/

上面已經有現成的許多格式可供套出, 一樣是產生 JSON 格式的描述檔供應用.

需要更詳細的自訂Google Maps Style可以參考Google 的官方文件:
https://developers.google.com/maps/documentation/javascript/styling

分類
Javascript

CSS寬度問題

今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.

分類
Database

MySQL資料表不存在的資料就新增-存在就忽略(或異動)的語法

在新增資料於資料表時, 有個需求, 是不存在的資料就新增, 存在的資料就不動作(或是要處理一些異動), 這樣的需求如何操作呢?

可以使用 INSERT IGNORE INTO [table] ….. 的語法,

若是要異動則使用

INSERT INTO [table]….. ON DUPLICATE KEY UPDATE col=expr …..

可以參考以下語法:
http://cain19811028.blogspot.tw/2015/01/mysql-insert-ignore-replace-on.html
https://mariadb.com/kb/en/mariadb/insert-on-duplicate-key-update/

分類
程式技術

bootstrap的datetime picker

在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:

http://www.malot.fr/bootstrap-datetimepicker/

主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.

若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)

github: https://github.com/smalot/bootstrap-datetimepicker

分類
Javascript

可愛的ClockPicker-用時鐘方式來選取時間

這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.

有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.

有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html

分類
程式技術

在bootstrap下的影片responsive設定

在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/

分類
PHP

使用PHP上傳圖片至Azure Storage供圖檔應用

使用 PHP 將圖檔上傳至 Microsoft Azure 雲端空間供圖檔應用, 有以下幾個步驟:

1. 建立 Azure 的 Storage Account , 並取得 key 與建立 container (也可以使用程式建立)

2. 安裝 Azure PHP Client: http://azure.microsoft.com/en-us/documentation/articles/storage-php-how-to-use-blobs/

2-1. 先安裝 Git
2-2. 依說明建立 composer.json 與下載 composer.phar (http://getcomposer.org/composer.phar), 並進行安裝: php composer.phar install
2-3. 完成程式下載

3. 在 php 程式碼中引入對應程式碼, 以上傳圖檔為例, 程式碼如下:

require_once 'vendor/autoload.php';
use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\Common\ServiceException;
use WindowsAzure\Blob\Models\CreateBlobOptions;

$connectionString = "DefaultEndpointsProtocol=https;AccountName=[storage account name];AccountKey=[storage access key]";

$blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);

$content = fopen("myfile.jpg", "r");
$blob_name = "myfile.jpg";
$createBlobOptions = new CreateBlobOptions();
$createBlobOptions->setBlobContentType("image/jpeg");

try {
    //Upload blob
    $blobRestProxy->createBlockBlob("[container name]", $blob_name, $content, $createBlobOptions);
    echo "ok";
    echo "<img src='http://[storage account name].blob.core.windows.net/[container name]/".$blob_name."' />";
}
catch(ServiceException $e){
    // Handle exception based on error codes and messages.
    // Error codes and messages are here: 
    // http://msdn.microsoft.com/library/azure/dd179439.aspx
    $code = $e->getCode();
    $error_message = $e->getMessage();
    echo $code.": ".$error_message."<br />";
}

其中範例中的程式, 並沒有指定對應 blob 中的 Content-Type, 會使用預設的 application/octet-stream , 其實在網頁使用並無影響, 但若是直接連結會變成是下載的狀況, 比較不適合, 而且也應該是指定為正確的 Content-Type 較佳.

若有需要使用到 php 上傳圖檔至 Azure storage, 可以參考上面做法進行上傳應用.

相關資料:
Put Blob: https://msdn.microsoft.com/library/azure/dd179451.aspx

使用 ASP.NET 版本參考這篇:
http://blogs.msdn.com/b/ericsk/archive/2013/12/18/php-on-windows-azure-windows-azure-blob-storage.aspx

分類
系統技術

DigitalOcean便宜大碗的雲端主機服務

大型的雲端服務廠商, 不用多做介紹, 大家都知道了, 如 Amazon web service, Windows Azure, 等, 今天介紹這家是在海上的 DigitalOcean, 價格真的很便宜, 非常適合用來做 staging 或是 lab, 與開發環境.

記得從我的 ref 連結註冊, 你一開始可以多USD10, https://www.digitalocean.com/?refcode=c5fa03fa1aa6

特別的地方是他只有 VM, 以最低方案來看, 512MB RAM, 1Cores CPU, 20GB SSD, 1TB的資料傳輸, 每個月只需要5美元, 而以小時計是每小時只要 0.007美元, 真的超級划算的.

管理介面可以透過他的 web console 登入主機, 或用自己的 ssh 都可以, 和 aws 差異是沒有外部的防火牆或網管政策, 所以記得要自行用 iptables 或類似的內建防火牆進行保護.

若有線上雲端主機的需求, 尤其又是或測試或是開發應用的朋友們, 可以多加利用.

PS, 它的付款方式除了信用卡外, 還有 Paypal 更方便呢!

分類
好用軟體

免費好用的網站監控-Monitor.us

自己架的網站, 有時候沒有什麼監控, 導致中斷也不知道, 往往到下次自己在使用的時候, 或是檢視 GA報表的時候才發現, 的確很囧.

使用免費的工具來自己監控, 以利能第一時間取得資訊. 這個網站服務提供了免費的監控服務, 大家可以試看看. 早期使用的免費工具, 大多是限制監控點的數量, 只有一個, 十分不便, 當然, 服務也是為了收費, 所以有一些限制很正常, 不過這個 monitor.us 提供的更多, 以下是他的付費與免費的比較:

(以上內容引用自官方網站: http://www.monitor.us/en/about-monitor-us/monitis-premium-product )

主要差異在於監控的頻率與保存的時間, 而沒有監控數量的限制(上面的monitor location指的是測試發起的地點, 不是監控項的數量), 不過若是個人或一般小型商業應用, 應該是很足夠的.

除了 WEB(HTTP、HTTPS) 的監控外還有許多免費監控項目, 如下:
Uptime monitors: Ping、DNS、FTP、TCP、SSH、SIP、UDP、SMTP、POP3、IMAP、MySQL、SOAP
Server/Device monitors: CPU、Memory、Drive、Linux load、Process、Server events、SNMP、Ping、HTTP、HTTPS

其他付費的還有 Application monitors, Cloud monitors 等, 真的很豐富.

而管理介面的圖表也十分易讀好管理, 最棒的地方, 是他還有手機版本可供管理及查詢(還有push notification通知訊息)

Android 版: https://play.google.com/store/apps/details?id=com.monitorus.android.mobile
iOS版: https://itunes.apple.com/us/app/monitor.us-free-web-server/id508012934?mt=8

快來建立一個自己的監控的服務吧.

分類
WebTrend

付費空間無上限-Amazon CloudDrive

個人用雲端空間, 大家都很熟悉了.

像是 Dropbox, Google Drive, OneDrive, Box, Mega, Copy 等, 相信大家都不陌生, 不過有個挑戰者來了, Amazon CloudDrive.

先來看看各家方案:
Dropbox: https://www.dropbox.com/plans
免費 2GB/每月USD9.99 1000GB

Google Drive:
免費 15GB/每月USD1.99 100GB/每月USD9.99 1TB

OneDrive: https://onedrive.live.com/about/zh-tw/plans/
免費 15GB/每月NTD60 100GB/每月NTD219 1TB

Box: https://www.box.com/pricing/
免費 10GB/每月USD10 100GB

Mega: http://mega.and1.tw/zh_tw/
免費 50GB/每月NTD399 500GB/每月NTD799 2TB/每月NTD1199 4TB

Copy: https://www.copy.com/page/home;section:plans
免費 15GB/每月USD4.99 250GB/每月USD9.99 1TB

再來就是有趣的 Amazon CloudDrive: https://www.amazon.com/clouddrive/home
沒有免費/每年USD11.99 5GB+Photo無限/每年USD59.99 無限

真的是很破壞性的價格, 當然還有大陸的許多空間沒有列入, 不過以上面個人使用的狀況來看, Dropbox 和 Google Drive 、One Drive、Box都有方便的同步工具, 而目前 Amazon Cloud Drive 僅有上傳工具, 目前尚沒有好用的同步工具.

但就價格來看, 真的是很破壞性的價格, 但使用在工作上, 似乎又不是那麼便利.

若是後面它能有更棒的同步工具, 相信會有另一番競爭力.

繼續閱讀:
http://www.bnext.com.tw/article/view/id/35767