分類
Javascript

利用Cloudflare worker來進行客戶端IP查找

Cloudflare 有個功能, 就是在 edge 端的 worker, 可以參考:

https://developers.cloudflare.com/workers/

我們可以利用這個 worker 來做許多功能, 把它想成小型的在邊緣的處理器, 先來看一些 example 好了:

https://developers.cloudflare.com/workers/examples/

理解可以在這個 worker 處理不少事情後, 接下來實做一個簡單的功能, 像是這種取客戶端 IP 的功能:

早期也有利用 PHP 寫過取 IP 功能的小程式, 可以參考:

不過這裡要介紹的是利用 cloudflare 的 worker 來進行.

分類
Javascript

台灣教會(教堂)地圖

繼上次台灣寺廟地圖(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/

不過可能與實際上有落差的是這份資料集為”法人教會”, 非法人登記的也還有一定的資料量, 不過目前沒有其他資料源可供應用.

 

 

分類
Javascript

利用FooTable列出可分頁、搜尋、排序的資料檢視

這個工具是 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 程式進行, 程式碼如下:

分類
Javascript

ISO3166 ALPHA2對照

ISO 3166 是國家/地區的代碼, 其中 ALPHA-2 為兩碼國家代碼, 可以由 wikipedia 這裡整理好的資料查得:

https://zh.wikipedia.org/wiki/ISO_3166-1%E4%BA%8C%E4%BD%8D%E5%AD%97%E6%AF%8D%E4%BB%A3%E7%A0%81

將 table 轉成 csv, 再利用 csv to json (https://csvjson.com/csv2json)轉出即可.

利用了兩碼英文字元的國家/地區代碼, 取得對照的中文名稱, 內容如下:

分類
Javascript

[Javascript]Arrow function

在 Javascript 中, 使用 Arrow function 是個十分精簡的方式來呈現函數, 一般使用在匿名函數.

這篇寫得十分詳細:

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions

由於 Arrow function是精簡型函數表示法, 所以有許多限制, 在一般使用時需要留意, 但在匿名函數使用時, 常常可以達成許多更精簡更便利的呈現方式.

這個語法是在 ES6 (EMACScript 6, EMACScript 2015)起開始, 也請參閱這裡:

https://ithelp.ithome.com.tw/articles/10195669

 

分類
Javascript

jQuery選擇特定元素但是不含特定class (反向選擇器)

在實作 jQuery 選擇器時, 有時會用到選擇出的 elements 不含指定的 class, 有兩種方式實現:

  1. not() method ex: $(“div.item”).not(“.red”)
  2. :not() seudo-class ex: $(“div.item:not(.red)”)

其中 2. 為 css 原本 selector 的做法.

來看看範例吧:

其中, item 1 ~5 都有 item class, 但 item 2, 3, 4 有 red class, 兩個 button 分別使用 method 1, method 2 來進行切換沒有 red class 的 item 隱藏與顯示 (toggle method).

程式如下:

$("#m1").click(function(){
  $("div.item").not(".red").toggle();
});

$("#m2").click(function(){
  $("div.item:not(.red)").toggle();  
});

參考資料:

https://stackoverflow.com/questions/2448051/how-can-i-select-all-elements-without-a-given-class-in-jquery

分類
Javascript

台灣寺廟地圖

想做個台灣的寺廟地圖, 我們先來找政府 opendata 資料, 可以看到在這裡有:

https://data.gov.tw/dataset/8203

內容為全國宗教資訊系統資料-寺廟

資料只有一種格式, 就是 XML, 連結在此:

https://data.moi.gov.tw/MoiOD/System/DownloadFile.aspx?DATA=78CA6206-2E8C-4688-AB54-925330B0784B

不過會被重導至一個拿不到資料的連結:

分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.

相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).

hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:

https://hls-js.netlify.app/demo/

(之前的 clappr demo 在這裡: http://clappr.io/demo/)

若需要公開測試的 hls 來源, 可以參考:

相信對於開發實作 hls video player 應用, 能有很大的幫忙.

 

分類
Javascript

bs_grid動態給定filter rule

bs_grid 是一個很方便的 data grid 功能介面, 可惜沒有支援 bootstrap 4, 不過在 bootstrap 3 下, 非常方便好用. github 連結: https://github.com/pontikis/bs_grid

今天遇到的問題是需要動態下 filter rules, 但在官方資料上, 僅能做預設, 如: https://www.pontikis.net/labs/bs_grid/demo/set-rules/

於是研究一下 github 上的 source code, 其實可以透過動態設定 filter rules 並使用 init 方法來進行動態更新介面, 程式如下:

$("#mygrid").bs_grid('getOption', 'filterOptions').filter_rules.push({
    "condition": {
        "filterType": "text",
        "field": "dataid",
        "operator": "equal",
        "filterValue": [
            "2"
        ]
    },
    "logical_operator": "AND"
});
$("#mygrid").bs_grid('init');

 

如此一來便能進行在動態下新增過濾器功能, 達成所需.

 

分類
Javascript

holder.js圖片佔位器

之前介紹過 fakeimg 利用圖片來進行假圖佔位:

http://diary.tw/archives/1266

這裡介紹另一種方式來進行圖片佔位, holder.js 工具:

http://holderjs.com/

使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:

<img src="holder.js/300x200">
<img src="holder.js/300x200?theme=sky">
<img src="holder.js/300x200?bg=2a2025&text=Hello">
<img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">

於 codepen.io 上的 demo 請參考:

https://codepen.io/timhuang/pen/MRdwyO