CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.
圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.
今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/
除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:
基本上, iframe 的 RWD 方法有很多種, 不過都需要在外層有個 div 來包裝出比例的尺寸, 才能達成 RWD化, 可以參考:
若只有 iframe tag 本身的話, 不在外層加裝 div 時, 如何達成呢? 可以利用這個 css 屬性: aspect-ratio
以 Youtube 的 embed code 為例:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JtFI8dtPvxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
我們將 iframe 設定以下屬性:
iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
即可順利在不外加 div tag 的條件下, 將 iframe 本身保持指定比例(如 16:9)的 RWD化.
來看看範例吧:
https://codepen.io/timhuang/pen/BaYdMmN
至於這個 CSS 屬性 aspect-ratio 的支援性如何呢? 可以看一下 can i use 網站的資料囉:
https://caniuse.com/mdn-css_properties_aspect-ratio
看起來除了 IE 外, 其他主流瀏覽器都有支援呢.
先回答文章標題, 無法達成, 不過我們可以利用其他方式來實際這個需求, 就是利用另外的 Data Connector, 讓我們繼續看下去吧:
之前的COVID-19 Taiwan統計-使用Google Data Studio (https://diary.tw/archives/2207)介紹了使用Google Data Studio來展示每日的COVID-19的個案數量, 十分方便好用, 由於是一次性上傳CSV檔案, 但這個資料是每日更新的, 所以若是有需要自動化這個更新, 要如何進行呢?
在Google Data Studio中, 資料的連接器共有以下這些:
https://datastudio.google.com/data
之前使用的是 File Upload (Connect to CSV files), 由於是自行上傳的檔案, 更新也得再次上傳才能達成, 所以資料是無法自動化更新(當然也和這個File Upload連接器沒有API所以無法進行).
然而要如何達成這個自動化更新的資料來源呢? 上面連結的連結器有許多是資料庫的, 如: MySQL, PostgreSQL, Microsoft SQL Server 等, 還有許多 Google 自己的資料來源, 其中有一項可以利用的是 Google Sheets (也就是 Google Drive 中的像 Excel 的表格資料檔案).
這樣一來, 只需要更新 Google Sheets 的內容, 就可以順利更新 Google Data Studio 中的報表資料了, 所以這次我們就選用這個資料連接器來進行操作囉.
一樣從前一篇的資料來源開始:
這個是利用 Google Data Studio 進行展示的功能:
https://diary.tw/s/cov19tw (COVID-19/新冠肺炎/武漢肺炎台灣地區確診統計資料, 每日下午3~4點更新, 預設日期區間為一個月, 本土個案; 報表可依縣市、鄉鎮、是否境外移入、性別、年齡層區分, 可自訂日期區間為2020/1起至今的資料統計)
利用資料來源-地區年齡性別統計表-嚴重特殊傳染性肺炎-依個案研判日統計:
https://data.gov.tw/dataset/120711
這個資料集來產生的.
Google Data Studio 是個很方便的資料展示報表工具, 我們可以很容易地利用這個工具來實現大量資料的互動式報表展示, 並且方便與其他使用者共用.
這裡介紹如何進行這個報表的建立, 首先至上面的資料集下來對應的 csv 檔, 連結為:
https://od.cdc.gov.tw/eic/Day_Confirmation_Age_County_Gender_19CoV.csv
再到 Google Data Studio 建立一個新的資料來源, 如下圖:
從 Google Connectors 中找到最後一個[上傳檔案],
這個是依附在 akismet 下的透過網址可以成生網站的縮圖, API的語法如下:
https://s0.wp.com/mshots/v1/https%3A%2F%2Fdiary.tw%2F?w=800
其中有兩個部分, API為: https://s0.wp.com/mshots/v1/ 後面直接加上 urlencode 後的網址, 另外有個參數是 w 為指定寬度.
以上面的網址來看, 就是本站的首頁 https://diary.tw/ , 而 urlencode 後就是 https%3A%2F%2Fdiary.tw%2F , 並加上 ?w=800 來產出圖檔囉.
像是
這個專案的 GitHub 連結: https://github.com/Automattic/mShots/
PS: 在 WordPress後台留言管理介面會用到這組 API, 若要停用可以參考這篇: https://wordpress.org/support/topic/how-to-disable-mshots-service/
繼續閱讀:
https://shkspr.mobi/blog/2018/12/using-the-wordpress-mshots-screenshot-api/
這個是 2000/2/26 時的 apple.com 網站:
當時的重點商品是 Power Mac G4, 下方還有 iBook 與 PowerBook 耶, 而 EarthLink 則是上網服務的公司.
這個畫面是利用 https://web.archive.org/ 這個網站服務來取得, 上面的畫面可以由這裡查看:
http://web.archive.org/web/20000226101337/http://apple.com/
這個服務忠實地記錄著各個網站的歷史(其實就是當時, 現在看是歷史)畫面, 有興趣了解的朋友們, 可以自行使用看看.
Cloudflare 有個功能, 就是在 edge 端的 worker, 可以參考:
https://developers.cloudflare.com/workers/
我們可以利用這個 worker 來做許多功能, 把它想成小型的在邊緣的處理器, 先來看一些 example 好了:
https://developers.cloudflare.com/workers/examples/
理解可以在這個 worker 處理不少事情後, 接下來實做一個簡單的功能, 像是這種取客戶端 IP 的功能:
早期也有利用 PHP 寫過取 IP 功能的小程式, 可以參考:
不過這裡要介紹的是利用 cloudflare 的 worker 來進行.
今天來介紹安裝 PHP 8.1.3 於 windows 環境下.
首先至 PHP Windows版本下載的連結:
https://windows.php.net/download
可以安裝 VS16 x64 Non Thread Safe (2022-Feb-16 08:50:36) 這個版本即可, 至於 Thread Safe 與 Non Thread Safe 有什麼不同可以參考: https://stackoverflow.com/questions/1623914/what-is-thread-safe-or-non-thread-safe-in-php, 原則上是與 Apache Web Server 應用時會需要 Thread Safe 版本, 其他不需要.
解開後放在自己想放的資料夾中, 例如 c:\php (預設也會是這個, 若不是也沒關係), 例如 c:\tools\php813, 然後將這個路徑加入環境變數 PATH 中, 供執行時, 可以執行 php.exe 這個執行命令.
在 console 下, 可以利用以下指令:
C:\Users\tim> PATH %PATH%;C:\tools\php813
接下來的步驟很重要, 先將目錄下的 php.ini-production 或 php.ini-development 複製一份為 php.ini , 調整兩個重要的內容:
這兩行前面的註解 “;” (分號) 要拿掉.
以上都完成後, 你就可以在 console 下執行 php -v 來看 php 是否可執行, 與版本資訊:
C:\Users\tim>php -v PHP 8.1.3 (cli) (built: Feb 16 2022 08:20:53) (NTS Visual C++ 2019 x64) Copyright (c) The PHP Group Zend Engine v4.1.3, Copyright (c) Zend Technologies
繼上次台灣寺廟地圖(https://diary.tw/archives/1915)後, 想做個台灣教堂地圖, 不過查了一下, 只有法人教會, 沒有教堂, 看起來一樣是教堂的資料, 所以就會來用囉, 來看看資料來源:
全國宗教資訊系統資料-法人教會: https://data.gov.tw/dataset/8204
連結重導至: https://religion.moi.gov.tw/Report/church.xml
一樣和寺廟資料相同, 使用 xml 格式.
以下為台灣教會(教堂)地圖:
https://sample.diary.tw/churchmaps/
不過可能與實際上有落差的是這份資料集為”法人教會”, 非法人登記的也還有一定的資料量, 不過目前沒有其他資料源可供應用.
這個工具是 Table view, FooTable:
https://fooplugins.github.io/FooTable/
很適合快速地將資料利用 table 的方式呈現出來, 這個工具的特點是同時可以分頁、搜尋、排序與編輯, 尤其在 mobile view (responsive) 時, 可以摺疊內容, 不用橫向捲動, 十分方便.
這裡將利用財金公司的國內銀行分行代碼表來進行示範, 原始資料在這裡:
https://www.fisc.com.tw/TC/Service?CAID=51254999-5d15-4ddf-8e54-4b2cdb2a8399
其中的”下載完整對照表”, “台幣匯款”, 可以下載完整的國內銀行總分支機構代碼(7碼)與名稱, 連結如下:
https://www.fisc.com.tw/tc/download/twd.txt
內容如上, 純文字檔, 不過請注意右下角的 Big5 編碼, 若要實作為 web 程式碼, 需要轉換為 UTF-8 (下面的程式碼使用 mb_convert_encoding 進行轉換).
接下來利用 FooTable 進行實作囉, 基礎程式碼如下:
$(document).ready(function() {
$('.table').footable({
"paging": {
"enabled": true,
},
"filtering": {
"enabled": true
},
"sorting": {
"enabled": true
},
"columns": [{
"name": "id",
"title": "id"
},
{
"name": "branch",
"title": "branch",
"breakpoints": "xs"
},
{
"name": "abbr",
"title": "abbr"
}
],
"rows": $.get("twd.php"),
});
});
簡單說明, paging, filtering, sorting 要設為 true, 而 columns 有三欄, 所以分別給定對應的欄位名(name)與欄位顯示(title), 其中 branch 有多加了 breakpoints: xs 代表著在 xs 時要摺疊, 也就是小畫面時, 會將此欄位收納起來. 而 rows 則為實際的資料, 這裡簡單使用一支 php 程式進行, 程式碼如下: