Quantcast
Channel: WFU BLOG
Viewing all 784 articles
Browse latest View live

ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

$
0
0
當初發佈「CC0 免費圖庫搜尋引擎」後,有讀者及朋友都建議加入素材圖庫。當時的想法是,這些素材網都不是 CC0 圖庫,因此不適合放在一起,否則授權規定一定十分混淆、容易引起爭端。

不過既然需求還不少,那麼另外做一個專門找素材圖片的搜尋引擎,也是滿有必要的。

這些年來「CC0 免費圖庫搜尋引擎」多次改版及更新,累積了不少調校的技術,讓搜尋成效更完善。現在將這些經驗用來製作「免費素材搜尋引擎」,得以一開始就具備相當不錯的性能,那麼推出日期雖然晚了幾年,但也不算壞事。




一、以顏色及形狀分類


進入搜尋引擎頁面後,如果沒用過 CC0 搜尋引擎的話,使用上請參照以下說明:


1. 橢圓形

free-icon-vector-search-engine-manaul-1.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

所有橢圓形的分頁,按下後就能直接在站內搜尋該圖庫的圖片。


2. 長方形

free-icon-vector-search-engine-manaul-2.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

而所有長方形的分頁,無論是什麼顏色,按下後都會另開視窗,連到外部圖庫時不需另外輸入原本的搜尋字串,仍然可直接顯示搜尋結果

會使用外部圖庫連結的原因是:

  • 使用站內搜尋時發現,某些圖庫 Google 索引的狀態不佳,使用上不便利,故必須割捨這些圖庫
  • 但該圖庫的索引量很大,仍有使用價值,故保留使用站外搜尋的權利


3. 紅色

free-icon-vector-search-engine-manaul-3.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

由於中文搜尋的需求不小,如果能夠讓使用者一眼就看出哪些圖庫可以搜尋中文,將會是非常體貼的設計。

因此特別將可以搜尋中文的圖庫使用紅色標示,無論形狀是橢圓形、或長方形,上圖可看到目前有 7 個使用紅底的分頁。


4. 綠色

free-icon-vector-search-engine-manaul-4.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

CC0 是最方便、不需特別研究的使用條款,上圖可看到目前有 5 個使用綠色的分頁,無論是使用綠底或綠框,都屬於 CC0 圖庫


5. 切換其他圖庫

free-icon-vector-search-engine-manaul-5.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

為了節省空間,預設隱藏第二行的分頁,請按上圖按鈕,可以打開或收合其餘的分頁按鈕。


6. 行動版

free-icon-vector-search-engine-manaul-6.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

手機的寬度有限,為了版面美觀,將每個站內搜尋的圖庫,減少顯示的字元數。

雖無法一眼知道圖庫名稱,不過跟網頁版比對一下就大致能瞭解。


free-icon-vector-search-engine-manaul-7.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

而外部圖庫連結,則需要盡量保持全名,以免跑錯網站。


7. 基本操作

如第一次使用的話,可參考「高畫質免費圖庫搜尋引擎﹍2015 版」,瞭解這個工具的運作原理、及基本操作。



二、圖庫篩選


1. 圖庫記錄

這個搜尋引擎索引的各種圖片,理論上數量會隨著時間而越來越豐富。

而收錄的圖庫、以及索引數量,最新狀態會紀錄在「各大免費素材、圖示、插畫、向量圖庫整理」。


2. 圖庫篩選原則

製作這個搜尋引擎幾天下來,發現難度比「CC0 免費圖庫搜尋引擎」高,原因為:

  • CC0 圖片大部分的索引準確度很高
  • 素材、圖示類的圖片多半很小,因而頁面上會被該網站塞了許多其他圖片
  • 導致 Google 索引時,常常同一個頁面可能索引了不相干的圖片、或是廣告圖片
  • 因此必須一一測試每個圖庫的收尋結果、測試各種 keyword
  • 如果某圖庫的搜尋結果良率不夠高,就必須淘汰該圖庫,無論該圖庫是否索引量很高、是否很知名

因此可能隔一段時間就必須重新測試所有圖庫的搜尋結果,評測搜尋良率,決定哪些圖庫需要移除,然後從候補圖庫拉上來填補。



三、圖庫分類


如果覺得很難從圖庫名稱,一眼就看出該圖庫的主題,以下做個簡單分類,要搜尋該分類的圖案時,直接點選這些分頁:

1. 透明去背圖

判別很簡單,看到圖庫名稱有 png 就是了:

  • PngTree
  • StickPng
  • PngImg
  • PngMart


2. 小圖示

判別很簡單,看到圖庫名稱有 icon 就是了:

  • EasyIcon
  • FlatIcon
  • IconArchive

3. 向量圖

  • vectorportal
  • Pixabay向量
  • VectorMe
  • illustAC → 向量美術圖
  • silhouetteAC → 向量剪影圖
  • Vecteezy


4. 其他

  • Pixabay插畫
  • FreePik → 綜合



四、圖片使用條款


雖然是免費圖庫,但不代表可以隨心所欲使用圖片,下載圖片之前請務必在該頁面的圖片前後左右找找,看看授權使用條款是如何描述的。

以下簡略舉例幾種狀況,但不代表含括所有案例:

1. CC0 圖庫

只要沒有拿 CC0 圖片商用,基本上要怎麼使用都可以。如果要商用的話,請務必閱讀這篇「CC0 圖片商業使用注意事項」。


2. 只可個人使用

free-icon-vector-search-engine-manaul-8.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

上圖為 easyicon 的某張貓咪圖示,標示了「Free for personal use only」,也就是個人使用免費,不得商用的意思。


3. 允許商業使用、有但書

free-icon-vector-search-engine-manaul-9.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

上圖為「Freepik 某張圖案」,標示了「Free for personal and commercial purpose with attribution」,代表可以個人及商用,但必須署名。

而商用如何進行署名的作法,則必須點進「How to attribute the author?」這個連結,請詳實照做,以免侵權。


4. 需要署名、禁止印刷銷售

free-icon-vector-search-engine-manaul-10.png-ICON 免費素材搜尋引擎﹍一次找齊各大素材圖庫

上圖為「pngtree 某張圖案」,標示了「需要標註來源. 禁止印刷銷售.」。

而標註來源的作法,通常下載圖片時就會自動附上連結語法,只要複製貼上即可。



五、整合式服務


最後介紹一下這個搜尋引擎的優點,跟其他同質的圖庫、搜尋引擎比起來,「免費素材搜尋引擎」最方便、快速:

  • 第一階段可使用這個工具的橢圓形分頁
  • 若是找不到滿意的圖片,第二階段再使用方形分頁,另開視窗可直接顯示搜尋結果,做個別的搜尋。
  • 這個工具無論是進行搜尋、切換圖庫、或是切換數字分頁,都是使用動態載入,速度非常快
  • 其他任何圖庫網站,做任何搜尋動作、切換分頁,都要重新載入頁面,多個動作累積操作下來,速度慢很多

相信這整合式的服務,可以讓搜尋素材的流程更加順暢,在同一個頁面就能搜尋完所有圖庫。

P.S. 目前此工具剛開始上線,如對您有所幫助,那麼操作上若發生任何錯誤、或是哪裡覺得可以設計的更好,歡迎隨時回報。相信這個搜尋引擎如果可以改的更好,您使用起來也能更順暢!


更多「免費圖庫」相關文章:

讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

$
0
0
nanogallery2-mosaic-layout.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛這是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第二篇,本篇將會介紹非常具有藝術感的「Mosaic 拼貼式」版型,如同觀賞美術館(gallery)畫作一般。



一、官方說明書


首先有必要瞭解一下「Mosaic 拼貼式」的版型製作原理,在「官方說明書」頁面,往下捲到「Mosaic layout」這個區塊,提供一個簡單的範例說明:

nanogallery2-mosaic-layout-1.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

參照上圖,將版面切割成九宮格後,需要設定的參數有以下四種:

  • c:代表 column,也可看做 X 軸(直向)座標
  • r:代表 row,也可看做 Y 軸(橫向)座標
  • w:代表 width,也就是寬度
  • h:代表 height,也就是高度

每張圖片都需要設定以上 4 組參數,上圖 Mosaic 版面一共使用了 5 張圖,這些圖片的參數如下:

galleryMosaic : [
{ c: 1, r: 1, w: 2, h: 2 },
{ c: 3, r: 1, w: 1, h: 1 },
{ c: 3, r: 2, w: 1, h: 1 },
{ c: 1, r: 3, w: 1, h: 1 },
{ c: 3, r: 3, w: 2, h: 1 }
]


第一張圖的 { c: 1, r: 1, w: 2, h: 2 }代表:

  • 起始座標從左上開始計算
  • c: 1, r: 1 就是左上角那一格
  • w: 2, h: 2 代表這張圖的寬、高都是 2 個單位
  • 這張圖的面積將佔據從左上角延伸出來 2 x 2 的大小


第二張圖的 { c: 3, r: 1, w: 1, h: 1 }代表:

  • c: 3, r: 1 就是右上角那一格
  • w: 1, h: 1 代表這張圖的寬、高都是 1 個單位
  • 這張圖的面積將佔據從右上角延伸出來 1 x 1 的大小


接下來以此類推,就能讓程式知道每張圖佔據哪個位置、佔用多少面積,從而拼貼出自己想要的 Mosaic 版面。

只要發揮想像力,你的畫廊將能呈現各種天馬行空的效果,以下直接來看範例。



二、抽象效果


nanogallery2-mosaic-layout-2.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的不規則拼貼展示效果,出自官網「nanogallery2 demonstrations」。

以下提供範例程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 300,
thumbnailWidth: 300,
galleryMosaic: [
{ "w": 5, "h": 3, "c": 2, "r": 1 },
{ "w": 2, "h": 2, "c": 1, "r": 2 },
{ "w": 2, "h": 2, "c": 7, "r": 2 },
{ "w": 2, "h": 2, "c": 2, "r": 4 },
{ "w": 3, "h": 4, "c": 4, "r": 4 },
{ "w": 3, "h": 4, "c": 7, "r": 4 },
{ "w": 2, "h": 2, "c": 10, "r": 5 },
{ "w": 4, "h": 2, "c": 11, "r": 6 }
],
thumbnailGutterWidth: 0,
thumbnailGutterHeight: 0,
thumbnailBorderHorizontal: 5,
thumbnailBorderVertical: 5,
thumbnailHoverEffect2: "imageGrayOn|scale120",
thumbnailLabel: {
display: false
},
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>
#nanogallery1.nGY2 .nGY2GThumbnail {background:#fff; border-color: #f8f8f8; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; }
</style>


這個根據官方提供的範例程式碼,展示效果如下:






三、整齊拼貼效果


nanogallery2-mosaic-layout-3.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的整齊拼貼展示效果,出自「官網首頁」→ 往下找到並點擊 「MOSAIC example 2」。

以下提供範例程式碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 1, h: 1, c: 1, r: 1 },
{ w: 1, h: 1, c: 2, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 4, r: 1 },
{ w: 1, h: 1, c: 5, r: 1 },
{ w: 1, h: 1, c: 6, r: 1 },
{ w: 1, h: 2, c: 1, r: 2 },
{ w: 2, h: 2, c: 2, r: 2 },
{ w: 2, h: 2, c: 4, r: 2 },
{ w: 1, h: 2, c: 6, r: 2 },
{ w: 1, h: 1, c: 1, r: 4 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 1, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 4, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: 'scaled',
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: 'flipDown',
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: 'rows',
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: '.nGY2GThumbnailAlbumTitle_border-left_5px solid #23CB99|.nGY2GThumbnailAlbumTitle_margin_20px|title_backgroundColor_rgba(200,200,200,0.8)|title_color_#000',
thumbnailL1HoverEffect2: 'image_scale_1.00_1.15_500_bounce|image_rotateZ_0deg_05deg',
galleryBuildInit2: 'perspective_900px|perspective-origin_50% 150%',
thumbnailHoverEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#000_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: 'onBottomOverImage',
hideIcons: true,
titleFontSize: '1em',
align: 'left',
titleMultiLine: true,
displayDescription: false
},
gallerySorting: 'random',
galleryTheme: {
thumbnail: {
titleShadow: 'none',
descriptionShadow: 'none',
titleColor: '#fff'
},
navigationBreadcrumb: {
background: '#3C4B5B'
},
navigationFilter: {
background: '#2E7C7F',
backgroundSelected: '#19676B',
color: '#eee'
}
},
XviewerTheme: {
barBackground: 'rgba(35, 203, 153, 0.7)'
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: 'label',
topRight: 'shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton'
},

touchAnimation: false,
locationHash: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
},{
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>


這個根據官方提供的範例程式碼,展示效果如下:






四、不規則拼貼效果


nanogallery2-mosaic-layout-4.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的不規則拼貼展示效果,出自官網首頁 → 往下找到並點擊 「MOSAIC example 1」。

以下提供範例程式碼:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery3"></div>
<script>
$("#nanogallery3").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 2, h: 2, c: 1, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 3, r: 2 },
{ w: 1, h: 2, c: 4, r: 1 },
{ w: 2, h: 1, c: 5, r: 1 },
{ w: 2, h: 2, c: 5, r: 2 },
{ w: 1, h: 1, c: 4, r: 3 },
{ w: 2, h: 1, c: 2, r: 3 },
{ w: 1, h: 2, c: 1, r: 3 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 2, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: "scaled",
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: "slideLeft",
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: "rows",
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: "image_scale_1.20",
thumbnailL1HoverEffect2: "thumbnail_scale_1.00_1.05_300|image_translateX_-20px_20px",
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: "onBottomOverImage",
hideIcons: true,
titleFontSize: "1em",
align: "left",
titleMultiLine: true,
displayDescription: false
},
gallerySorting: "random",
galleryTheme: {
thumbnail: {
titleShadow: "none",
descriptionShadow: "none",
titleColor: "#fff"
},
navigationBreadcrumb: {
background: "#3C4B5B"
},
navigationFilter: {
background: "#2E7C7F",
backgroundSelected: "#19676B",
color: "#eee"
}
},
XviewerTheme: {
barBackground: "rgba(35, 203, 153, 0.7)"
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: "label",
topRight: "shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton"
},
touchAnimation: false,
locationHash: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>


這個根據官方提供的範例程式碼,展示效果如下:





更多圖片展示工具:

讓 Google 試算表快速跳到指定行號

$
0
0
google-sheet-go-to-specific-row.jpg-讓 Google 試算表快速跳到指定行號當 Google 試算表的資料沒那麼多時,滑鼠捲一下不用花太久時間,總可找到需要的儲存格位置。

但是當累積到數百、數千筆資料時,如果不知道儲存格該搜尋什麼字串的話,那麼往下捲這個動作真的是要人命。而且 Google 試算表並非一次載入所有資料,為了節省網路傳輸量,Google 採取動態載入,大致上捲到 1000 行左右才會載入其餘儲存格。

總之一邊捲一邊找很容易讓自己心累,而且目前 Google 試算表沒有簡單的方法可以直接跳到指定行號。不過研究了一陣子總算有滿意的結果,請見本篇的分享。

(圖片出處: pixabay.com)


一、快速跳到指定行號的原理


1. 寫程式

如果會寫 Google Apps Script 的話,這件事並不困難,需要在 Google 試算表上面做個 UI 介面可以輸入行號,然後執行 script 即可。

可參考這個 stackoverflow 討論串「Google sheets jump to cell


2. 製作索引行號

如果不用動到程式碼,比較簡單的方式是,為每一行加上行號數字,那麼按 Ctrl-F 直接搜尋行號,就能快速跳到該行了。

雖然 Google 試算表最前面就有顯示行號,但不能用來搜尋,必須我們自己找個欄位,該欄專門用來顯示行號才可進行搜尋。


google-sheet-go-to-specific-row-1.jpg-讓 Google 試算表快速跳到指定行號

以本站的「會員系統」表格為例,如上圖在試算表中加個「行號」的欄位,就能直接搜尋行號。

由於會員系統一定有會員編號,搜尋這件事不用另外花功夫。但沒編號的試算表,就必須另外利用「行號」的欄位充當索引來搜尋,以下來看看如何實現。



二、自動產生行號數字的方法


1. 手動拉儲存格

最簡單、大家都會的試算表操作技巧,手動填入 1、2 前兩個數字後,就能用拖曳的方式,拉出一整欄的行號數字。

但這方法有兩個很大的缺點:

  • 有上百、數千行時,要拉很久的時間
  • 而且將來只要試算表每新增一行,就得手動再拉一次來產生行號數字

總之這不會是一勞永逸的方法,最好能利用 Google 試算表提供的函數自動產生行號。


2. 用函數自動產生行號

經研究後,有 2 個函數可實現這個功能:

  • ROW:使用方法參考官方文件「ROW」,這函數可傳回行號數字。
  • ARRAYFORMULA:使用方法參考官方文件「ARRAYFORMULA」,這個函數可以一次處理多個儲存格,利用正確的語法,可自動產生一整欄的儲存格內容。

在想要開始產生行號的儲存格,例如想從第一行就開始產生行號,使用以下的語法即可產生一整欄的行號,會自動產生到最後一行:

=arrayformula(ROW(A1:A))


google-sheet-go-to-specific-row-2.jpg-讓 Google 試算表快速跳到指定行號

直接來看範例,上圖想要從 H2 的位置開始產生行號,在該儲存格填入圖中的語法即可 (把前面的 A1 改成 A2,其他都一樣)。


google-sheet-go-to-specific-row-3.jpg-讓 Google 試算表快速跳到指定行號

按下 Enter 後,行號瞬間全部填滿,是不是很省事呢?將來每次新增資料也會自動補上行號,完全不必再手動操作。



三、快速跳到某行


google-sheet-go-to-specific-row-1.jpg-讓 Google 試算表快速跳到指定行號

自動建立好行號後,將來要快速跳到指定行號就很方便了,按 Ctrl-F 直接搜尋行號,就能快速跳到該行了。


2019.8.30 補充:留言 #1 Darrent 提供了一個密技「網址列的尾端加上 &range= 再加上儲存格位址,例如: &range=A100 就可以跳到 A100」,如果搜尋次數不多時,用這招滿方便快速的。


更多「Google 試算表」相關技巧:

珍惜免費資源,才能長久使用﹍沒使用 Blogger 請避免拿來當圖床

$
0
0
前陣子在某個非 Blogger 社團被 cue 到有關 Blogger 的問題,原來是有 WordPress 站長可能接到詢問,要如何減輕 WP 圖片的流量使用。

該站長找到的解決方案與 WP 無關,其分享文章介紹的免費圖床是 Blogger,建議其他 WP 使用者開個 Blogger 網站,上傳圖片後取得連結,再放到 WP 文章。如此可省下大量 WP 傳輸的流量,節省主機費用。

被這樣的事 cue 到有些哭笑不得,不過很多網路新手的確因為不了解,無論是網路、或商業世界的背後運作原理,而看到有免費的資源就用了再說,導致產生日後對自己或整個生態的悲劇,所以本篇藉這個機會說明,看似免費的網路世界要如何運作比較能夠長久。

(圖片出處: pxhere)


一、WP 平台的用途


首先我想先談談 WP,這件事應該是哪裡產生了誤會,很可能會有圖床困擾的 WP 站長,一開始選擇平台時就做了錯誤的決定,原因有可能是接觸到錯誤觀念,或是跟風跟錯朋友,或是誤信主機商的話。

在「Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清」我有說明過,部落格經營分三階段,當該階段的需求已經無法被滿足時,就適合搬到下個階段的平台。

基本上如果只是架「部落格」網站的話,Blogger 已經可以滿足所有能想像的需求。如果覺得還有部落格該有的功能,但自己用 Blogger 做不出來、改不出來,請找 WFU 一定可以處理。

當然也不是只有 Blogger 可以拿來架部落格,只要財力夠想用 WP 架也是個人自由。通常我推薦需要開始用網站營利、有商業需求,必須串金流、物流時,這方面 Blogger 缺乏現成的整套解決方案,那麼搬到 WP 就是適合的時機。

既然已經開始營利、有賺錢,我想不會付不起 WP 主機流量的費用。那麼如果對圖床費用感到拮据,以致於將腦筋動到 Blogger 或免費圖床的 WP 站長,要嘛表示其實沒賺到錢,有可能是選錯行業;要嘛有必要想想,其實你可能只是部落格網站,真正需要的是 Blogger 平台就好,一切都免費、有 Google 撐腰沒煩惱。



二、部落格只建議使用原生圖床


幾年前曾寫過「Blogger 使用 Flickr 當圖床,可能違規被停權 + 圖片消失的所有案例整理」,提醒站長們最好只用部落格原生圖床,避免使用任何外部免費圖床。這篇文章舉了許多例子,例如曾經 Xuite 整個網域被 Flickr 封鎖,也有個別網域因違規被封鎖。

這件事告訴我們,使用外部免費圖床時,永遠不知道何時圖片會被封鎖。因為是免費,主控權掌握在外部圖床手上,他們可以輕易地封鎖任何網域,無論是我們違規、或是同網域有人違規導致我們被牽連。

而今年更是發生「為何 Flickr 會刪除免費圖片額度?」,一大堆站長急著趕快搬圖片,若是網站有上千篇文章的話更是頭痛,沒找專業人士是無法處理的。搬圖床不是一件簡單的事,搞到甚至要搬家都有可能。

回頭來看文章開頭的事件,Blogger 上傳的圖片,原意並不是給其他部落格平台拿來當圖床用,就像痞客邦相簿也不是要給 Blogger 當圖床用。

若哪天 Google 偵測到怎麼有大量 WP 網站都是使用 Blogger 圖片,或是痞客邦發現相簿的圖片大量出現在不是痞客邦的網站,讀者覺得 Google 或是痞客邦,會不會想幫其他部落格出流量的錢?

Google 或痞客邦工程師要封鎖、限制圖床出現的網域,是非常簡單的事,就跟 Flickr 對付違規的網域一樣。到時這些站長就會很頭痛了,當圖片一被封鎖、全部打不開,屆時真的就很難搶救了。



三、免費資源請珍惜


再來看免費資源這件事,過去 10 年我也經歷不少網路大事件:


這些免費資源一一關閉,很大一部份的原因,是使用方式超出了免費資源其設計的原意,也就是不正常的用途。例如把以上兩者的空間拿來放各種影音檔,進行無本營利。

我想多數人其實不會濫用免費資源,但不可否認會固定有一些族群,四處尋找免費資源,想盡各種方式進行無本生意,進而榨光免費資源

我們當然不是這樣的族群,但也無法阻止這類族群的存在。而對於免費資源我們能做到的,就是盡量約束自己、避免做出超出免費資源原始用途的事。只有這樣,才能盡量延長免費資源的期限。



四、有所分享,有所不分享


除了約束自己,我想到更深一層的作法,從源頭就阻斷濫用族群,讓他們找不到免費資源

當年 Google Drive 停止外連後,我必須為網站的 js/css 檔外連找出路,最後找到了「免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案」。雖然我寫了這篇文章,但決心不公開使用 Github 的秘訣,關鍵資訊放在免費會員看不到、讀取不了的地方。這麼做得以保存資訊,卻又不流通,只有少數人能知道如何使用免費資源。

今年寫的這篇「讓 Google Photo 實現各種相簿畫廊或輪播效果」,其實我已經知道如何程式化取得 Google Photo 外連,但最終決定只簡單描述,不公開技術,因為只有這樣,才能保全「Google 相簿」這個免費資源。

那麼最後給讀者一點小小建議,分享是好事也是我們的天性,不過分享免費資源使用方式之前請先三思,先衡量一下內容有沒有可能違背開發者的原意。如果會抵觸的話,請避免放在公開流通的地方,這份心意是出自對免費資源的珍惜,讓自己及他人可以用得長久,才不會成為網路蝗蟲的食物。


更多「免費空間」相關文章:

在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡

$
0
0
fb-messenger-online-chat-without-plugin.jpg-在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡前陣子在「CC0 免費圖庫搜尋引擎」右下角,放了一個「錯誤回報」的按鈕,讓放可以即時留言回報站方。

這類的浮動按鈕很醒目,效果會比導覽列或頁尾的「聯絡站長」這類連結好一些。如果是熟悉網站動線的訪客,一般會知道去哪找留言板,但可惜很多使用者不一定熟悉網路或網站的通用設計。

(圖片出處: pxhere.com)


一、Facebook 即時通外掛


所以 FB 即時通這類外掛,有效地成為線上聯絡的一種方案,常駐於頁面右下角,使用者想一對一談話時不需再翻遍整個網站、尋找留言的地方。

這個外掛的安裝教學可參考「為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人」。

而即時通外掛對站長而言,有可能成為缺點的情況是,如果網頁原本載入速度就不快,例如裝了太多外掛,或是網站各處的廣告擺太多,那麼每多裝一個外掛對於效能而言都是負擔。

本篇將提供的替代方案是,如何在不安裝外掛的情況下,也能使用 FB 即時通。



二、FB 即時通網址


使用 FB 即時通必須先建立一個 FB 粉絲團,然後即時通外掛會與粉絲團「聊天室」連結,所有談話記錄都儲存在聊天室。

以本站為例,粉絲團的網址為:

https://www.facebook.com/WFU.BLOG

取出自己的粉絲團紅色字串後,前面加上 "m.me/" 就成了 FB 聊天室網址:

m.me/WFU.BLOG

有了這個 FB 即時通網址後,接下來就能自製不需外掛的即時通按鈕。



三、範例程式碼


1. 範例效果

請見本頁面右下角的浮動 FB 即時通圖示效果,點擊後會另開新頁,前往本站粉絲團即時通頁面。
messenger.png-在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡

2. 安裝程式碼

使用以下簡單的範例程式碼即可做出此效果:

<!--FB 即時通-->
<a href="https://m.me/WFU.BLOG" target="_blank"><img id="messenger" src="https://4.bp.blogspot.com/-g2z0IaIWe2g/XVpo-En_p6I/AAAAAAAAhgM/L3u57b4FweojgU_D1d05EqHZnU-S-t6TQCLcBGAs/w150/messenger.png" title="FB 即時通"/></a>
<style>
#messenger {
position: fixed;
bottom: 15px; /* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 15px; /* 與右方的距離 */
width: 60px; /* 按鈕寬度 */
height: 60px; /* 按鈕高度 */
opacity: 0.6; /* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
}
#messenger:hover { /* 滑鼠經過按鈕時 */
opacity: 1; /* 透明度 */
}
</style>
<!--Designed by WFU BLOG-->

  • 紅色字串請改為自己粉絲團專屬字串
  • 藍色即時通圖片網址可改為自訂的圖片網址
  • 其餘的部分,如果對 CSS 熟悉可自行修改參數


3. 圖示使用須知

messenger.png-在網頁擺放 FB 即時通按鈕(免裝外掛),讓訪客線上即時聯絡

這個工具使用了上面這個即時通圖示,如果讀者有找小圖示的需求,建議可使用本站開發的這個工具,能一次搜尋各大免費圖庫:



但若圖片來自非 CC0 圖庫,請注意個別使用條款,通常會要求署名,下載圖片時會出現署名的連結語法,例如下面是上圖的署名範例:

圖片由 cesarstringsPixabay上發佈


四、上下浮動的按鈕


右下角的 demo 按鈕還會上下浮動,由於此功能非必要效果,未列在範例程式碼之中,如需要這樣的動畫效果,請參考這篇「製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧」。


更多相關網站工具:

「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

$
0
0
tv-online.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整去年(2018)跟「第四台解約」後,為了方便能隨時看新聞,做了一個方便切換電視頻道的網頁小工具,能隨選隨看 Youtube 上所有直播新聞的頻道,可說是最方便的線上看新聞解決方案。


tv-online.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

一開始這只是個自己用的陽春新聞播放器,不過這段期間以來,各家電視台在 Youtube 頻道上傳的各種類型節目越來越齊全,「線上看電視」彙整的分類也越來越豐富,目前收錄的節目頻道已經多到看不完,而且還會自動播放最新一集的內容,從實用性來看已經可以當成相當完整的服務,因此決定公開釋出。



(圖片出處: pexels.com)



一、特點介紹


因為這工具原本是自用,在設計上以最方便自己操作的介面、流程為原則,同時也只篩選擁有版權的節目。

1. 載入速度最快

使用 Ajax 動態載入的方式,所有分類、頻道、節目切換播放的操作都不會重整頁面,執行速度非常快。


2. 分類完整

tv-online-1.png-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

畫面上方可看到依照不同節目性質,完整的十多項分類群組。


tv-online-2.png-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

如果分類群組的節目太多,還會使用小標籤進行細分,點擊小標籤即可開合節目頻道列表。

如上圖是數量龐大的「綜藝」群組,利用節目名稱首字的注音符號進行分類。

其他如「戲劇」群組,依照 "偶像劇"、"古裝劇"、"鄉土劇" 等進行分類;例如「網紅」群組也十分龐大,使用了 "趣味搞笑"、"知識"、"生活" 等等標籤。


3. 影片不會中斷

  • Youtube 官網播放影片預設會插入廣告中斷,需要手動跳過廣告。
  • 此工具利用 Youtube API 播放,官方預設不會插入此類廣告,所以不需手動跳過。
  • 因此清單影片也能連續自動播放,不會被廣告中斷。


4. 隨選隨看

喜歡的節目隨時可播放最新的一集,也可挑選任意一集,不受時間限制。也能任意前進、後退跳轉,不怕上廁所漏掉精彩片段。


5. 注重版權

網路有許多可線上看節目的資源,但內容不一定合法、擁有版權。本站所有節目內容都來自 Youtube,雖然 Youtube 上也有許多未經授權的節目,但本站會嚴格篩選,不列入個人上傳的節目內容,因為無法判讀是否擁有版權。

tv-online-3.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

播放本站任何影片時,都會附上原始連結、及版權所有人資訊,如上圖的影片,可看到紅框處標示「三立華劇 SET Drama」,代表這是官方釋出的影片,所以版權沒有問題。


6. 各種裝置都能播放

行動裝置無論是手機、平板,不需再安裝任何 APP,只要有瀏覽器都能打開本站看電視。



二、網頁版操作說明


1. 尋找節目技巧(排列順序)

  • 收看受眾很多的「新聞」、「政論」分組,依照第四台頻道的順序排列。
  • 其他分組則依照分類標籤排序,若無分類標籤則盡量將性質相近的節目放在一起。
  • 若將來某分組的節目越來越多時,會視情況重新進行分類。


2. 播放節目基本操作

先點擊上方的分類群組,例如「政論」、「綜藝」,再點擊左側列表的節目名稱即可。

tv-online-4.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

如果左側節目列表太長不好捲動,可參考上圖點擊左上方紅框處的「分類標籤」收合該分類的節目列表。

同時「分類標籤」的開合狀態會自動記憶,下次開啟網站時仍會維持之前的操作結果,對於選擇常看的節目頻道而言非常方便。

影片下方紅框的控制按鈕,分別可以執行「上一集」、「播放/暫停」、「下一集」、「全螢幕」。



3. 切換集數

tv-online-5.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

播放戲劇、動漫卡通等節目時,若該 Youtube 播放清單已經按照順序排列好,如上圖紅框,影片下方會出現集數,除了可按上、下集切換按鈕,也可直接點擊集數跳到該集影片。


tv-online-6.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

但多數的帶狀節目沒有集數,只能看到該集的節目名稱、標題摘要,此時如上圖右上角紅框,可以點擊影片右上角的播放清單──


tv-online-7.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

會立即出現播放清單的所有節目列表,有的節目會標注播放日期,方便判斷要選擇哪一集來看。


4. 直播節目

如果該節目為「直播」的話,會在節目名稱後面加註 "(直播)",例如大部分的新聞頻道,以及「音樂」群組等。


5. 節目、清單連結

每個影片下方都會附上節目完整名稱及連結,除了代表尊重出處之外,有時也可點擊該連結以獲得更多資訊。例如「非凡大探索」的連結除了標示時間點、節目內容,還詳細整理了店家資訊,是非常用心的節目,比光看電視還值得。

而如果是播放清單的節目,每個影片上方都有清單的連結,這個設計也非常重要,因為使用 API 產生的 Youtube 清單最多只能顯示 200 或 101 集,如想看超過的集數,則可點擊這個清單連結,到 Youtube 觀看


6. 切換畫質

Youtube 去年變更政策,API 不再能控制畫質的切換,因此只能手動從播放器自行切換畫質。在網路連線狀況正常時,畫質預設多半 720P,但有時這樣的畫質切換頻道要等待較久的時間。

那麼操作上提供一個小技巧,如果是切換不需一直盯著螢幕的節目,例如「新聞」、「音樂」群組,可手動切換為畫質最低的 144P,這樣切換頻道速度會很快,也不需花費較大的網路傳輸量。



三、行動版操作說明


基本上大部分的操作跟網頁版一樣,但由於行動版設計的介面略有不同,以下為重點說明:

1. 選擇分類群組

tv-online-10.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

手機由於寬度不夠,無法顯示所有群組,那麼上圖紅框處的群組,請用觸控方式「左右滑動」,來拖曳顯示所有群組。


2. 切換節目清單與播放器

由於手機寬度限制,只能將節目清單與播放器個別呈現在螢幕上,那麼要如何切換這兩個畫面呢?

tv-online-11.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

tv-online-12.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

請分別看上面兩張圖的左下角與右下角紅框處,設計了兩個翻頁按鈕,直接點擊就能切換到另一個畫面。

同時由於按鈕的位置在角落算是有點遠,因此另外設計了「手勢滑動」的操作方式,直接在手機上滑左、滑右,也能快速切換節目清單與播放器的畫面喔!



四、注意事項


1. 禁止營業使用的節目

本站提供的節目頻道,如自己觀賞都不會有問題,但部分頻道若拿來公開放映的話可能會產生侵權。

tv-online-8.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

例如「中天」的大部分節目頻道都會有上圖紅框的版權聲明:「如有任何營業使用,必須事先取得書面同意」,因此若要拿 Youtube 影片在營業場所公開放映,請務必先閱讀該影片的版權聲明。


2. 無法播放的節目頻道

眼尖的訪客可能會發現,「新聞」群組怎麼沒有看到 "台視"、"民視" 這兩台呢?

tv-online-9.jpg-「線上看電視」網頁版﹍沒看第四台後的選擇,除了 Youtube 直播新聞還有「隨選隨看」完整節目頻道彙整

這是沒有辦法的事,如上圖,"民視" 不允許在 Youtube 以外的網站播放影片,而 "台視" 也是一樣,所以無論是「政論」、「戲劇」等等所有這兩台的節目,只能全部下架了。



五、推薦節目頻道


除了本站篩選的這些分類群組、節目頻道,如果您還有什麼想看的節目,歡迎留言告知,我會找找有沒有官方提供、符合版權的影片。

如果已經知道官方有新推出的優質節目,而想進行推薦的話也非常歡迎留言告知喔。




更多「網路線上工具」:

Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣(各種案例整理)

$
0
0
google-search-result-title-thumbnail-snippet.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣Blogger 社團有幾個提問跟「搜尋結果顯示的文字、圖片」不如預期有關,例如:

  • 縮圖相關:「用手機google搜尋時發現到blog文章的縮圖並不是封面的照片,而且用不同手機搜尋出現的縮圖還會不一樣,想問是否有方法可以指定某張圖來當搜尋的縮圖圖片嗎?」
  • 標題相關:Kelsey 留言詢問「部分文章在Google Blogger文章設定中的標題與發佈後的顯示標題不同,例如我設定的標題為"XXXXXABCDE",但Google搜尋後顯示為"ABCDEXXXXX"。不知道是否有什麼方式可以讓Google搜尋顯示正確的呢?」

這兩個狀況其實是同一種現象,Google 向我們展示在「搜尋不同關鍵字」時,提供當下最貼切的搜尋結果,而非總是單一結果,也可說是 AI 智慧搜尋的能力。


(圖片出處: pexels.com)


一、原理說明


根據「Google 各種搜尋結果不如預期的疑難雜症整理」→「Q4」:

1. Google 為了防止操作 SEO 的人,在文章標題塞滿關鍵字,會自動根據文章的內容與標題的關連性,來調整 "文章標題" 的字串,那麼就可能在搜尋結果看到 Google 判定的文章標題。

2. 另一種情況是 Google 會根據使用者搜尋的 "關鍵字",自動調整顯示出來的 "文章標題"。因此同樣的一篇文章,搜尋的字串不同,搜尋結果的標題也可能不一樣,這是為了讓「搜尋結果符合關鍵字」產生的現象。

這兩點可以完美解釋為何 Google 針對不同的關鍵字,會給與完全不同的搜尋結果。代表 Google 有能力從搜尋的關鍵字進行解讀,「使用者真正想要問的問題是什麼」,就算找的是同一篇文章,也能「根據不同問題給與對應的回答」。

一方面 Google 對於「文字語意」的分析能力已經十分強大無庸置疑,一方面 Google 對於「圖片」的解析能力到達什麼程度?



二、手機搜尋結果不同縮圖範例


其實 WFU 不常注意手機搜尋的結果,只知道網頁版一般搜尋結果不會有縮圖,若不是文章開頭 FB 社團成員詢問搜尋結果縮圖的問題,還真不知道原來手機搜尋有可能會附上縮圖,因此特別針對這個案例進行研究。

1. 什麼文章不會有縮圖

直接整理分析我測試的各種搜尋結果:

  • 大部分文章都不會有縮圖,例如本站屬性為資訊、知識類的文章
  • 美食旅遊類有可能會出現縮圖
  • 如果美食旅遊類的文章,沒有正確設定 FB meta 標記、或是「結構性資料」,Google 會找不到縮圖資料來呈現在搜尋結果。
  • Blogger 平台基本上範本已幫我們設定好了,可參考「Blogger 開始支援分享到 FB 顯示縮圖」,不必擔心縮圖不會出現這件事。

所以非 Blogger 平台的美食旅遊類文章需要注意,手機上搜尋結果想出現縮圖的話,需要檢查文章的網頁原始碼有沒有 og:image相關資料。


2. 預設縮圖為首圖

基本上 og:image抓的就是文章的第一張圖,所以把中意的圖放在文章最前面就對了。

以案主這篇文章「奧地利薩爾茨堡主教座堂」為例,在手機搜尋完整文章標題時,顯示的就會是文章中第一張圖:

google-search-result-title-thumbnail-snippet-1.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣


3. 根據不同關鍵字顯示不同縮圖

而當在手機搜尋關鍵字「薩爾斯堡 大教堂」時,搜尋結果如下:

google-search-result-title-thumbnail-snippet-2.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣


這個結果讓 WFU 非常驚訝,顯示的圖片完全不一樣,而且找了一下,這張圖位於該篇文章似乎是第十幾還是二十幾張圖的位置,非常後面。

但是以關鍵字「薩爾斯堡 大教堂」而言,這張圖的確是非常精確的選擇,能從外觀看出教堂的明顯特徵,會比首圖來得恰當。

這樣的技術讓 WFU 十分震驚,Google 除了會分析整篇文章的文字語意,也會分析所有圖片,還能精確識別個別圖片的意涵,提供給不同的關鍵字使用

那麼我想站長們不必擔心縮圖的問題,Google 自然會提供給搜尋者最好的選擇。



三、搜尋結果不同文章標題範例


以下提供根據不同關鍵字,同一篇文章在搜尋結果顯示不同文章標題的案例。

例如本站這篇「Blogger 諮詢 | 架站 | 行動版 | 網頁設計 | 提案合作 」,搜尋關鍵字「Blogger 網頁設計」時,效果如下:

google-search-result-title-thumbnail-snippet-3.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣


而當搜尋「WFU BLOG」時,額外出現的 6 個 sitelink 赫然發現了一篇「網頁設計」:

google-search-result-title-thumbnail-snippet-4.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣


但我並沒有寫過「網頁設計」這樣的文章啊?點進去才發現就是前面那篇文章,代表 Google 自動將標題改成「網頁設計」這 4 個字了。

會有這樣的結果不是一天形成的,因為我以前沒看過這個標題,也許 Google 曾經為這篇文章顯示了各種不同的標題字串過,最後發現顯示「網頁設計」的點擊效果最好,代表來 WFU BLOG 的訪客有一部份是想要尋找「網頁設計」的資訊,而 Google 偵測到了這樣的需求,自動幫我改了標題。

所以我們也不需擔心網站的搜尋結果會出現什麼樣的文章標題,Goolge 自動會幫我們找出效果最佳的一種排列組合。我們需要費心的,只剩下如何在標題裡面放入各種使用者可能會搜尋的關鍵字。但請不要堆砌關鍵字,標題請放給 "人" 看的文字敘述。



四、搜尋結果不同文章摘要範例


以這篇「部落格網站是否加強 SEO 就能帶來流量?」進行舉例,搜尋「部落格 SEO 流量 關係」的結果:

google-search-result-title-thumbnail-snippet-5.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣

上圖搜尋結果的摘要,其實並不在文章本文之中,而是 Blogger 後台文章編輯器中「搜尋說明」所設定的內容,操作說明可參考「Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名」→「三、文章優化」→「2. 文章說明」。

建議讀者每篇文章一定要不辭辛勞設定這些「搜尋說明」,內容不要複製貼上某段文章內容,另外用心寫一段可以增加關鍵字的說明,那麼如同上圖的搜尋結果,可增加文章被搜尋到的機會。


google-search-result-title-thumbnail-snippet-6.jpg-Google 搜尋結果顯示的文章標題、摘要、縮圖,跟你想的不一樣

當把搜尋關鍵字改成「部落格 SEO 流量 關鍵」時,結果如上圖,Google 的摘要敘述另外抓到了一段「三、簡化經營要素 四、SEO 與流量的關係 五、提升流量的關鍵」,這是該篇文章的副標題。

因為我使用了「Blogger 文章自動產生大綱索引錨點區塊」,自動將文章所有副標題用 js 產生一個大綱區塊,而 Google 現在會索引 js 內容(不保證每個網站都會索引),這些提前出現的大綱若有關鍵字,也會增加不少被搜尋到的機會。

以上簡單整理各種搜尋結果的範例,讀者可以清楚看出在不同關鍵字下,搜尋結果的變化,相信對 SEO 的原理可以更瞭解幾分。


更多 SEO 相關文章:

Line 無法傳未讀訊息給自己後,待辦事項改用 FB Messenger 發給自己

$
0
0
line-to-do-list-fb-messenger.jpg-Line 無法傳未讀訊息給自己後,待辦事項改用 FB messenger 發給自己去年寫過這篇「用 Line 傳未讀訊息給自己,成為待辦事項﹍不用擔心已讀訊息忘了處理」,利用在手機上安裝兩個 Line,可以用第二個 Line 帳號發未讀訊息給主帳號,成為待辦事項。這個方法非常方便,出門在外用手機發的待辦事項,回到 PC 上只要打開 Line,看到有未讀訊息就知道還有事要處理。同時也不需要急著點開,可留著等進入工作狀態時再點開批次處理。

但是很可惜的是,最近 Line 強制所有帳號都需要更新到最新版本才能執行,不旦導致我的第二個 Line 帳號來不及進行搬移就報銷(使用 clone 產生的 Line 更新到最新版後會產生錯誤,完全無法使用,可參考去年那篇文章),同時原本發待辦給自己的流程也無效了。

(圖片出處: pexels.com)


一、為何原本流程失效


去年用來複製 Line 的 APP 是「App Cloner」,已經無法成功雙開最新版 Line。我找遍所有 Andriod APP、也試過所有能雙開 Line 的 APP,有的不能複製最新版 Line,有的可以。

少數能夠成功雙開 Line 的 APP,沒有一個能夠像原本的「App Cloner」那麼棒,可以產生一個獨立運作的 Line。


line-to-self-to-do-1.jpg-Line 無法傳未讀訊息給自己後,待辦事項改用 FB messenger 發給自己

如上圖藍色的「Line 2」是原本的「App Cloner」所產生,可獨立運作的第二個 Line。


line-to-do-fb-list-messenger-1.jpg-Line 無法傳未讀訊息給自己後,待辦事項改用 FB messenger 發給自己

在手機上各種 APP 進行分享時,會出現類似上圖的畫面,列出所有可分享的 APP。之前藍色的「Line 2」可以出現在這個分享列表之中,我便可以從「Line 2」發未讀訊息給自己的 Line 主帳號。

現在所有最新的雙開 APP 所產生的第二個 Line,完全無法出現在上面的分享列表,所以也就無法分享未讀資訊給自己了

這樣子會非常不方便,看到不錯的文章、任何資訊,只能手動操作例如複製網址到第二個 Line,無法像以前那麼方便,按分享就能選擇第二個 Line 帳號進行傳送



二、手機安裝 FB messenger 及操作


最終找到的完美解決方案,是改用另一個即時通軟體「FB messenger」:

  • FB 即時通不像 Line 一個帳號綁定一支手機、或一個帳號,所以不需要雙開、複製兩個 FB 帳號
  • FB 即時通允許同時使用最多 5 個帳號,而且切換帳號非常方便
  • 所以只要切換到一個不常用的 FB 帳號,發訊息給 FB 主帳號即可


line-to-do-fb-list-messenger-2.jpg-Line 無法傳未讀訊息給自己後,待辦事項改用 FB messenger 發給自己

瞭解以上的操作與原理後,出門在外用手機發待辦事項就非常簡單了,例如:

  • 使用 RSS 閱讀器「gReader」看到不錯的文章
  • 直接按分享,選擇「Messenger」
  • 上圖畫面可看到,分享內容的文章標題、網址會自動產生,不用手動輸入
  • 下方有太陽 Logo 的是 FB 非主要帳號,記得 Messenger 切成這個帳號
  • Wayne Fu 才是主帳號,按「發送」就可將訊息傳給主帳號,成為未讀訊息



三、電腦上處理待辦事項


接下來的問題會是,如何在電腦上知道有 FB 傳來的未讀訊息、以及數量?可安裝這個 Chrome 套件:


安裝後這個外掛會常駐在 Chrome 右上角,登入 FB 後這個外掛會即時顯示是否有通知訊息。


line-to-do-fb-list-messenger-3.jpg-Line 無法傳未讀訊息給自己後,待辦事項改用 FB messenger 發給自己

如上圖,比對 FB 與紅框處的外掛圖示,訊息與通知會分別顯示數量,因此不會混淆。

將來外出發完待辦事項,回到電腦前打開 Chrome 就可看到通知。



四、與其他方案的比較


每個人都會有自己的一套發待辦事項的方式,對我而言本篇的流程是最方便、直覺的,最後順便整理一下其他方案的優劣:

  • 建立私人 Line 群組:
    • 這是最早期流通的作法,對著私人群組傳訊息成為待辦事項。
    • 不方便的地方在於無法顯示未讀訊息,所以無從判別是否有新的任務
    • 必須定期檢視群組的內容,並重新判斷每個訊息是否已經處理過
  • 使用「Line 待辦小精靈」:
    • 這算是個不錯的設計,安裝方便,把他加入好友就完成安裝
    • 不過使用數量有限制,也無法預期將來是否會收費
    • 我習慣有「未讀訊息」的顯示數量來提醒自己,而這方案沒有,因此不適合我
  • 分享到 Evernote:
    • 在手機上分享到 Evernote 是很方便的
    • 但 evernote 一樣無法顯示未讀記事
    • 所以無法很直覺地從 evernote 收件匣,看出現在有沒有待辦事項
  • 分享到 Email:
    • 這也是發待辦事項很簡便的作法,但缺點是分享時要輸入 email 帳號,流程沒那麼方便
    • 收件匣可以顯示未讀訊息
    • 其他不方便的地方是,必須逐則打開郵件看待辦事項
    • 跟即時通軟體相較之下,無法一眼看完全部的待辦事項,稍微麻煩一些


更多 Line 使用技巧:

更多 FB 使用技巧:

文章更新速度與 Google 索引頻率、及 SEO 的關係

$
0
0
幾個月前寫了這篇「網站管理員提交文章時,出現 "網址不在 Google 服務中" 訊息怎麼辦?」,說明為何 Google Search Console 檢索的速度比較慢,導致出現錯誤訊息。沒想到這件事還有後續,而且發展出乎意料。

雖然已經寫了專文解釋,不過案主還是不斷詢問 Search Console 的相關問題。對話了許久才知道,原來她發現網站最新發佈的文章,Google 搜尋不到,懷疑是否網站管理員有哪裡設定不對,導致新文章無法被索引。

(圖片出處: pexels.com)


一、為何文章收錄時間變慢了?


1. 事發經過

事情發展大概是這樣:

  • E:大哥~抱歉又有事情想請問~我的網站目前又出現檢索問題,提交sitemap顯示一切正常,但是輸入個別文章網址卻顯示不在索引內,即使重新申請檢索也沒有用~不知道您能否協助解決呢?感恩
    • W:沒有什麼關係 可參考我這篇即可(文章開頭的連結)
  • E:文章中提到的我都重新照做了一遍,但就是沒辦法改善...因為這次連搜尋也搜尋不到,完全看不出問題在哪裡,所以才又來請您幫忙~有一些奇怪的錯誤我看不懂(傳來 search console 圖)
  • E:最新的兩篇都完全搜尋不到~目前唯一覺得比較有可能產生問題的是這個 (傳來 ads.txt 錯誤訊息的圖)
    • W:我看可以搜尋到喔(傳給她 "site:文章網址" 的圖) 不用那麼著急~ 只是時間晚了一點而已 可以放心了
  • E:不是那篇...是9/22後發佈的文章喔~
    • W:今天也才 9/23 別那麼急呀
  • E:該怎麼說,這個問題之前從來沒有過,所以我才想是不是有什麼問題,及早發生及早解決 用site方式完全搜不到文章還是第一次

後面的對話先省略,原來經過這麼多回合的對話後,才終於知道案主的真正意圖,她以前發佈新文章後,都能很快地在 Google 搜尋到(也許是一天之內),而現在往往要好幾天後才能搜尋到。所以開始懷疑是哪裡設定錯,但是自行辦案卻又找不到兇手。案主真正想知道的,就是要如何做,文章才能被 Google 迅速收錄

所以從上一篇文章,一直到上面這段對話的最後一句為止,我們都在錯誤的線索上打轉。如果她能直接帶我到案發現場,就可省下這段時間了。


2. 文章收錄速度

其實我最近一年來也有發現同樣的現象,搜尋自己的最新文章時,往往要好幾天後才能看到,這在以前是沒有發生過的事。

所以我過去的認知其實跟案主類似:「權重比較大的網站,Google 索引的速度比較快,我的文章常常幾分鐘內就會被收錄」。

以前沒發生過的事,不代表以後也不會發生;以前 Google 的工作量,也不等於現在 Google 的工作量。所以雖然發現文章被 Google 收錄速度變慢了,但並不會有不舒服的感覺。

我非常能體會,現在每天網站增加的速度有多快,也能想像每天全世界文章增加的數量,跟以前比絕對是天文數字。那麼 Google 伺服器一定得有所取捨,才有辦法處理這麼大的資料量



二、部落格平台是否有影響?


那麼 Google 伺服器的取捨原則是什麼呢?什麼樣的網站會優先進行索引呢?


案主後來提出疑問:「我用WP的部落客朋友是沒有這個問題,所以我覺得很怪。」

我:「這跟 WP 沒什麼關係吧,你需要舉證所有 WP 網站都能搜尋到,而不是將一個 WP 網站的狀況,視為所有 WP 網站。」

案主:「我這裡問過五個」

我:「這五個網站的流量 跟你的比起來呢」

案主:「有兩個比我高」


看來事情有點蹊蹺,因為我不清楚案主朋友的 WP 網站狀況,所以無從置喙,而且 5 個網站終究是小樣本,說不定她朋友有做了什麼基本動作是她沒做的。除此之外唯一能想到的,大概是 WP 可能有自動提交文章給 Google 的外掛,也就是平常我們要到 Google 手動提交單篇文章的動作,WP 網站可自動執行。

但撇開外掛的因素,Google 索引網站文章的速度,不可能因為不同部落格平台而有所不同。首先要怎麼判斷哪個平台有資格優先索引呢?這種事若被公開來 Google 還不被罵翻。其次世界上平台那麼多,索引時從原始碼就一定看得出是什麼平台嗎?



三、文章更新速度的影響


其實只要瞭解 Google 搜尋引擎運作的原理,就可以知道爬蟲會多久來拜訪網站、進行索引。

  • 如果一個網站平均一個禮拜會有一篇新文章,那麼爬蟲就不可能常常來檢查是否有新文章,也許到了差不多平均值的日子,才會派出爬蟲來。
  • 如果網站久久才寫一篇,也許一個月,那麼爬蟲自然也不需浪費伺服器工作量,久久再來檢查一次就好
  • 如果網站天天都有新文章,爬蟲也會怕錯過新文章,一定會天天報到,檢查是否有新文章
  • 新聞媒體這種幾分鐘就有新文章的網站,爬蟲更是無時無刻都在檢查,一有新文章絕對秒收


以上原理相當簡單易懂,想要文章被一天內快速收錄,就得做到天天有新文章,吸引 Google 前來索引。這樣的概念網路上很多,簡單舉兩篇文章:



本站更新文章的速度相當緩慢,目前將近一個禮拜才會有一篇文章,所以我也不會強求文章要被 Google 馬上收錄。而檢查過案主網站後台更新文章的速度後,發現近期的確比以往緩慢,難怪會發生本文的狀況



四、有沒有必要刻意頻繁更新


1. SEO 顯著提升

本站的更新速度並非從以前到現在都一樣,也曾有某段時間更新比較頻繁,例如 2~3 天就有新文章。

由於本站的流量來源以 SEO 為主,那麼如果流量有變動時,很明顯就是 SEO 權重被 Google 調整,無論是往上或是往下。

而在更新頻繁的時期我也可以明顯感受到,網站流量有明顯的上升。這代表網站更新比較快時,除了 Google 索引的速度變快,還會提供網站額外的 SEO Bonus 獎勵,帶來平均值以上的流量


2. SEO 提升只是短期現象

然而讀者不要誤會了,網站更新頻繁所帶來的流量,只是暫時現象,並不代表網站的 SEO 權重被永久提升。

舉個簡單的例子,在公司上班因為表現佳,老闆有兩種獎勵方式:

  • 加薪:這是永久性的獎勵,每個月都會增加收入。單次金額可能較少,但長期來看總收入會增加很多。
  • 給獎金:這是一次性的獎勵,雖然單次金額看起來很大,但長期來看對總收入增加不大。

對於「網站頻繁更新」這件事,Google 給予的只是獎金(Bonus),你要持續做,才能持續拿到獎金,只要一停滯獎金就沒了

網站真正需要努力的目標是獲得「加薪」,這得從實質加強文章含金量才有辦法做到,過去針對這個主題曾論述過一篇「部落格網站是否加強 SEO 就能帶來流量?」,各種 SEO 小技巧都不是長遠之計。


3. 追著紅蘿蔔的驢子

最後做個總結吧,雖然知道了「網站頻繁更新」可以獲得的好處,那麼我會鼓勵讀者做這件事嗎?分幾個方向作結論:

  • 以部落格維生:如果吃穿靠寫部落格,那麼為了填飽肚子當然得真刀真槍,文章寫得多又寫得好是基本要求,任何 SEO 技巧也都需要用上,所以網站當然要更新得比別人快,文章也要比別人棒。
  • 部落格是寫身體健康:如果寫部落格只是興趣,不影響正職工作,那麼 SEO 技巧不關注當然沒什麼關係,不必為了流量硬擠文章出來
  • 想要多少賺一些廣告錢:我覺得這是最尷尬的一個族群,流量越多就代表廣告收入越多,雖然不以網站維生,但這族群也會想辦法鑽研各種 SEO 技巧,期待有任何增加外快的可能。那麼這個族群正好落入 Google 的圈套,Google 拿著各種短期增加 SEO 流量的紅蘿蔔在面前晃呀晃,如果追得越快、網站更新得越頻繁、文章寫得越多,自然而然幫 Google 帶來更多他想收集的索引內容,增加 Google 的營收。但是付出的時間、健康成本,跟獲得的廣告收益是否成正比,能否拿到基本時薪,我就不得而知了


更多 SEO 相關文章:

讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

$
0
0
nanogallery2-justified-cascading-layout.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛這篇是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第三篇,前兩篇分別介紹了:


接下來介紹剩餘的兩種版面效果,但是標題 "自適應版型" 中文的字面跟英文原用語 "justified" 比較難做連結,主要是網路上找不到相關的用詞,比較正確的描述是 "左右對齊" 版型。

以文字來說 "左右對齊" 很好理解,但圖片 "左右對齊" 究竟是什麼狀況我想很難想像得出來,或許 "自適應" 還比較能理解,不過沒關係後面會圖解說明。



一、版型效果


1. Justified 對齊式(自適應)

nanogallery2-justified-cascading-layout-1.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

如上圖,雖然每張圖片大小比例不一、參差不齊,但很神奇的是,每一行的左右邊界圖片都能剛好切齊,因此整個版面看起來並不突兀,如同文字排版 justified 的左右對齊一般。

那麼作為畫廊(gallery)展示效果,Justified 對齊式是不錯的選擇,不必把每張圖片的尺寸比例調整一致,又能維持版面美觀。


2. Cascading 瀑布式

nanogallery2-justified-cascading-layout-2.jpg-讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

這個畫廊展示效果跟網頁版型中所謂的「瀑布流」很像,一方面圖片還沒全部顯示完之前,會以「無限捲動」的方式載入圖片,就像滑 FB 一樣,只要後面還有資訊就會不斷地載入。

一方面圖片往下產生的效果也很像瀑布流,左右根據圖片不同的比例,各自冒出來、下落的距離也不同。

如上圖,最終圖片完全載入後,底部是長短不一的,可能沒有那麼整齊畫一,但也是有人喜愛這種不落俗套的美感。


3. 其他相關外掛

我個人比較喜歡「nanogallery2」這個外掛,因為含括了所有常見排版方式。如果只需要特定版型的畫廊外掛,也是可考慮使用特定的外掛,以下推薦的兩個都滿不錯的:




二、Justifed 對齊式版型


官網提供了範例效果及程式碼,操作流程如下:

  • 進入網頁「nanogallery2 demonstrations
  • 1. Select a demo family → 選擇「Gallery layouts」
  • 2. Select demonstration → 按下「Justified gallery」


提供範例程式碼如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 200,
thumbnailWidth: "auto",
galleryLastRowFull: true,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下:





三、Cascading 瀑布式版型


官網提供了範例效果及程式碼,操作流程如下:

  • 進入網頁「nanogallery2 demonstrations
  • 1. Select a demo family → 選擇「Gallery layouts」
  • 2. Select demonstration → 按下「Cascading gallery」


提供範例程式碼如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
"thumbnailLabel": {
"position": "onBottom"
},
"thumbnailHeight": "auto",
"thumbnailWidth": 200,
items: [{
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w400-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w100-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w200-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w300-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w100-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w400-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/w100-h200-n/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/w200-h200-n/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/w300-h200-n/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/w400-h200-n/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/w200-h200-n/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/w400-h200-n/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/w100-h200-n/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/w300-h200-n/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>


以上程式碼展示效果如下:




更多圖片展示工具:

Javascript 產生偽隨機數字的方法及應用

$
0
0
最近接到一個需求,想在網站顯示虛構的線上人數。一般來說,顯示線上訪客數有很多免費的第三方服務,不過案主會有這樣的需求,代表網頁顯示的數字想要膨風一點。

用 JS 產生隨機數字其實很簡單,但如果隨機產生的線上人數太離譜,一眼就被看穿的話,對網站聲譽其實不太好,所以這功能也不是那麼簡單就做得出來。

(圖片出處: pixabay.com)


一、設計原理


本篇說明大致的實現原理,未包含實作細節,不過提供的範例已經相當足夠了。

1. 隨機數字必須依照規則產生

首先頁面上顯示的線上人數,不可每次重新載入頁面就產生隨機數字。例如訪客進入首頁後,點進了一篇文章,相差不過幾秒,結果線上人數差異太大,很容易就被抓包。

若有人刻意測試連續重整頁面 5 次,結果看到 5 個不一樣的數字,一看就知道是造假。

所以這些隨機數字必須有個規則,例如在某特定時間內都是同樣的數字,假設能做到 5 分鐘內是同一個數字、下個 5 分鐘是另一個數字,這樣就成功了。


2. 限定數字區間

產生的數字也要有所限制,不能前 5 分鐘是 10 個人,下 5 分鐘是 1000 人,再來又變成 150 人,如此的劇烈變化。

能夠限定數字在某個小區間移動,例如 50 ~ 100,或是 25 ~ 50,都是相對比較合理的。



二、如何產生偽隨機數字


1. 偽隨機原理

原本隨機產生的數字每次都會不同,不過這篇「JS生成相同的随机数(伪随机数)」利用數學演算法,如果每次隨機數字的產生,是基於固定的一個「隨機種子」(seed),就有辦法產生相同的隨機數。

原理這篇有詳細的說明,數學上使用的方法稱為「線性同餘方法」,不過我們可以不用瞭解這麼多,直接拿公式來套就好了。


2. 偽隨機範例

以下修改自前述教學網頁提供的範例程式碼:

var seed = 5,
rnd;

function seededRandom(max, min) {
max = max || 1;
min = min || 0;
seed = (seed * 9301 + 49297) % 233280;
rnd = seed / 233280;
return min + rnd * (max - min);
}

for (var i = 0; i < 10; i++) {
console.log(seededRandom());
}

使用 seededRandom 函數可產生 0~1 之間的隨機數字,最後用一個迴圈連續跑 10 次隨機結果,你會發現無論執行多少次,這 10 個隨機數永遠一模一樣。

而當 seed 的值改變時,就會產生另外 10 組隨機數,這也代表隨機數永遠與 seed 數值連動。



三、隨機線上人數範例


以下提供一個簡單的範例:

var maxVisitors = 100, // 最大訪客數
minVisitors = 50, // 最小訪客數
today = new Date(),
year = today.getFullYear(),
month = today.getMonth() + 1,
hour = today.getHours(),
minute = today.getMinutes(),
second = today.getSeconds(),
seed, visitors;

// 每 30 秒產生一個線上人數
if (second >= 0 && second < 30) {
seed = year * month * hour * minute * 1;
} else {
seed = year * month * hour * minute * 31;
}
visitors = seededRandom(maxVisitors, minVisitors);
alert(visitors);
function seededRandom(max, min) {
seed = (seed * 9301 + 49297) % 233280;
var rnd = seed / 233280;
return Math.round(min + rnd * (max - min));
}

參數修改請見註解說明,大致說明一下程式碼做了什麼事:
  • 限定產生 50 ~ 100 之間的隨機數
  • 每分鐘 0 ~ 29 秒之間產生的隨機數一樣,每分鐘 30 ~ 59 秒之間產生的隨機數也一樣。
  • 可以快速不斷執行這段程式碼,會發現每過 30 秒才產生新的隨機數


更多 Javascript 相關文章:

讓 Blogger 文章標題及文末都出現編輯圖示,方便修改文章

$
0
0
blogger-post-edit-button-location.jpg-讓 Blogger 文章標題及文末都出現編輯圖示,方便修改文章為了方便站長們編修文章,Blogger 官方在後台提供了設定方法,可在文末指定位置顯示編輯文章的小工具圖示,點擊後可直接編輯文章,省下在後台搜尋指定文章再編輯的時間。

這功能算是很貼心了,但對我來說還不夠,因為捲到文末仍需要花一些時間,如果要做到最方便的話,我想在文章標題附近也放一個編輯圖示就很完美了。

(圖片出處: pixabay.com)


一、有需要常常編輯文章嗎?


或許有的讀者會覺得編輯文章的機會不多,偶爾花時間捲一下螢幕沒什麼,不過對於具備工程師特質的人來說,若常重複無謂的動作及時間,就會想辦法進行簡化、或批次化處理。

而且對我而言,其實修改文章的機會非常多,例如:

  • 剛寫完一篇文章後:
    • 這是機會最多的時刻,我會從頭到尾念個幾次,反覆感覺是否有需要去除贅字、修改用詞的地方
    • 通常也會看到一些錯字要改
    • 反覆檢視之後,也比較能感覺出,哪幾段話需要特別上紅字
  • 某些文章、或是懶人包,都是需要定期更新的,例如「Blogger 工具整理」、「作品集
  • 另外,一篇新文章產出後,文中若有部分內容與過去的某些文章關連,就必須找出舊文章,在適當的段落加入新文章的連結、補充相關內容。

以上這些動作做久了之後,會希望能按 Home鍵(或 go top 按鈕)跳到網頁開頭處,在文章標題旁有個按鈕可直接編輯文章。

以下就來看看如何同時在 Blogger 文末、及標題處,同時顯示文章編輯按鈕。



二、如何正常顯示文章編輯按鈕


1. 後台設定

首先進入 Blogger 後台 → 版面配置 → 網誌文章 → 編輯:

blogger-post-edit-button-location-1.jpg-讓 Blogger 文章標題及文末都出現編輯圖示,方便修改文章

  • 上方紅框處的「顯示快速編輯」一定要勾選,否則就算直接改範本也不會顯示出來
  • 下方預覽圖可看到預設位置會出現在文末分享按鈕旁邊
  • 可自行拖曳編輯圖示到其他位置,例如文章標題下方

雖然擺放位置很自由,但是只能出現在一個地方,有一好沒有兩好。

如果想要同時出現在文章標頭、以及文末,就必須修改範本才行。


2. 按鈕並非一定會出現

需要注意的是,就算按照以上說明正確設定,按鈕也不一定會出現:

  • 如果是使用乾淨的官方範本,出現按鈕比較沒問題
  • 如果使用非官方範本,由於範本內容被大改,則不一定會出現文章編輯按鈕
  • 如果使用官方範本,但自己常常修改範本,也可能不小心覆蓋了相關的程式碼,導致按鈕無法出現

那麼請繼續參考後續的說明,來修改範本讓按鈕出現在指定位置。



三、修改範本


在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。


1. 首先按照前面的說明,在後台版面配置設定完畢。


2. 接下來的內容全部出自「Blogger 範本﹍文章區塊的程式碼 」,請隨時參閱。


3. 在「三、文章區塊」→「8. 快速編輯圖示」可找到,編輯圖示的程式碼為:

<b:include data='post' name='postQuickEdit'/>
接下來需要將以上程式碼,複製到文章標題、文末的位置。


4. 在「三、文章區塊」→「1. 文章標題」可找到文章標題的相關程式碼,可將編輯圖示的程式碼貼在這段程式碼後面、或自訂位置。


5. 在「三、文章區塊」→「3. 繼續閱讀」這段程式碼的後面,就是文末的開始之處。如果已經滿意後台版面配置預覽的編輯圖示位置,這裡不需重複貼編輯圖示的程式碼。


最後提醒一下,在「Blogger 推出全新自適應 RWD 官方範本」曾提及,官方 RWD 範本不建議任何修改,所以要修改範本的話,最好只改官方 RWD 範本以外的模版


更多 Blogger 小技巧:

解析中華電信電話行銷技巧

$
0
0
最近家人接到中華電信行銷電話,表示只要 xxx 元,上網速率就可以提升到 16M/3M。由於現在行銷電話太多,而碰巧我也很熟悉這個行業,因此那些行銷話術對我沒有任何作用。

聽起來再怎麼美好的電話行銷產品,記得別當下在電話中做決定就對了,一定要掛掉電話後仔細研究,真的有需要時日後再回電就是。

(圖片出處: pixabay.com)


一、進行光世代試算


查了一下家中目前的費率與速率:

  • 目前的速率為 6M/2M,實際上是很久以前中華電信一路自動升上來的 (3M/768K → 4M/1M → 6M/2M)
  • 目前 2019 對應的費率為一個月 621(網路+電路費)


而電話行銷中告知的內容為:

  • 可升級到 16M/3M
  • 一個月 617~627 (忘了確切數字是多少,總之在 621 的上下 10 元之間)
  • 要綁約 2 年


這個方案一定是划算的,因為比目前 16M/3M 的牌告費率 673 少了約 50 元,只不過我的考量是:

  • 中華電信的意圖是什麼?為何要提供比較優惠的方案?
  • 6M/2M 是否已經不敷使用?是否一定要升等?


在行銷電話中有請家人詢問,2 年後 16M/3M 的費用怎麼算,得到的回覆是「以當時的優惠費率計算」,這是一個含糊不清的回答與話術,也代表此事需要仔細思考



二、實際電話升等案例


我想到幾年前親戚被中華電信擺一道的事件,一開始大概是十多年前吧,由於具有教師資格,親戚可以用很便宜的費率申請某個教職員專案,跟我一樣使用最低等級的光世代速率,但是只要五百出頭的費用,印象中當年比我少了兩百多元吧,當時滿羨慕的。

過了好幾年後某一天,他拿到中華電信帳單後打開後大叫,怎麼變成七百多塊,那時還忙著跟他一起查是怎麼回事,也安慰他說如果錢算錯了趕快打中華電信 0800 電話,一定可以退回來的。

怎知他想了半天,結果說應該不用打電話,會有這樣的狀況主要是他平常收到帳單根本不會打開看,是這次特別打開看才發現的。他說道:

  • 之前有一天好像有接到中華電信的行銷電話,說不用增加費用,就可以直接升到 20M/5M,問要不要升等
  • 他想說不用錢當然好,就同意升等了

但我覺得事情不對勁,問他說電話裡面有沒有提到要綁 2 年約?綁完約後的價錢怎麼算?結果他說也沒什麼印象了,好像要綁約吧,也沒問 2 年後的費用。

實際上他跟我一樣沒有 20M/5M 的需求,日常使用量絕不會超過最低的 6M/2M,純粹聽到不用錢就可以升等,也沒想過之後會變成 20M/5M 的牌告價,不知道自己的教師優惠資格這麼輕易就不見了。

看來事情差不多要水落石出了,叫他把過去 2~3 年的帳單都找出來比對,最後果然是 2 年期間帳單是優惠費率,而期滿後就自動成為 20M/5M 的牌告費用



三、中華電信的策略


回想起這件事後,發現中華電信非常有一套:

  • 不但可以在特定時期,為了特殊目的祭出永久優惠專案,來籠絡特定族群、人士
  • 之後還可以很巧妙、不漏痕跡地將這些永久優惠專案收回(利用電話行銷)
  • 當電話行銷的 2 年綁約(口頭承諾)成立後,代表中華電信過去提供的爛合約(永久優惠專案)就一筆勾消
  • 當 2 年綁約到期後,自動轉為市價的牌告費率,中華電信將來可永久賺到之間的價差
  • 原本消費者永久可享受的優惠價差,因為電話中不加思索的「好」,2 年後就移轉為中華電信永久賺到的價差,過去幾年享受到的優惠很快就會被要回去並倒貼

當然,這招數不代表是中華電信發明的,所有電話行銷業者都有辦法套用這個思路。消費者永遠站在弱勢的一方,業者有專家、法律顧問可以針對民眾心理來設計話術,一般民眾也不清楚電話行銷這一塊的相關法律規定,不知道自己在電話中說的每個字語有什麼樣的效力。

同時總有一定比例的民眾不會每個月看帳單,畢竟每個月都是差不多的金額沒什麼好看的,而往往要很久之後才會發現帳單暴增的數字。



四、電話行銷產業


查了中華電信的光世代官網後,發現 6M/2M 已經下架了,速率最低的方案是 16M/3M,那麼我想這通電話行銷的企圖,大概是想把市面上殘餘的 6M/2M 清光吧!綁 2 年約後,我就不可能退回 6M/2M 了,因為這個產品早就不存在。

以文書處理的需求而言 6M/2M 已經足夠,上網看 720P、1080P 影片也不是問題,既然我沒有 2K、4K 螢幕來看更高端的影片,的確升 16M/3M 沒有那麼樣的急迫性。

以價性比而言,一個月多花不到 50 元可以用將近 3 倍的速率也不是不可以,不會負擔不起,但實際上現在不想升等,其實是其他的理由。

就我的角度看來,電話行銷產業主要利用資訊落差、知識落差、心理學理解落差,站在制高點與民眾角力,這是一場不公平的交易,跟詐騙集團的執行原理相同,利用心理學優勢、貪念及利益引誘人心,差別在於電話行銷是合法的

當然,如果特別寫這篇文章針對電話行銷產業是不公平的,因為合法的詐騙產業中,電話行銷的毛利沒有其他的大,至於哪些領域是合法的、利潤更大更可怕的詐騙就不明說了,日常生活中很多都看得到,只是一般人察覺不出來

而既然我察覺出中華電信的意圖了,那就很抱歉,並不想助長這樣的產業。

如果想清掉我的 6M/2M 方案,就直接幫我升等為 16M/3M 吧,跟以前 3M/768K 與 4M/1M 時升速一樣,反正目前我有沒有升等都沒差~


更多數位生活相關心得:

可練習英文聽力的 YouTube 經典卡通詳細整理

$
0
0
youtube-english-cartoon-improve-hearing.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理學習英文時,選擇適合自己程度的教材是最重要的,程度過低、過高都會事倍功半,甚至無法進步。

例如以前有人說多看歐美影集、電影、聽 ICRT 等等,長時間下來可以增進聽力,但實情是,當字彙不夠、根基不足時,這些再怎麼聽都不會進步,因為跟本聽不懂。

必須從聽力速度跟得上,內容、字彙能理解的教材開始,一步步建立聽力的基礎才行。幸運的是當前這個世代,YouTube 上有符合各種程度的英聽資源,免費就能循序漸進建立聽力的基礎。



一、為何要看英文卡通


以前的年代找適合程度的聽力教材不容易,不過現在 YouTube 就有許多官方釋出的英文卡通影片:

  • 除了高畫質、不用擔心版權合法性
  • 還附有英文字幕開關幫助學習
  • 也可隨時按左、右方向鍵,快速跳轉重複聽某個段落




上面是知名英文教學 YouTuber 哥倫布的影片,他提到看英文卡通是一開始練習聽力最好的管道,同時也說明了理由及練習的方法,可以看一下這部分的內容

那麼本篇就詳細整理目前 YouTube 上符合版權的英文卡通資源,有將近 20 個頻道,還有非常多的經典卡通可回味。

這些卡通全部都在「線上看電視」→「學習」→「英語卡通節目」以及「英語卡通資源」,隨時可切換不同的節目觀看,非常方便。



二、英語卡通節目


以下所有頻道的影片,會根據字彙程度、說話速度、聲音清晰度作大致的分級,一開始若不了解自己程度,建議從初級開始,逐漸往上挑戰。

而分級的程度並非對應實際英檢程度,程度高低只是相對性的,根據我大致的感覺判斷,可斟酌參考。

1. 海綿寶寶(SpongeBob SquarePants)

youtube-english-cartoon-improve-hearing-1.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:海綿寶寶
  • 簡介:非常知名、受歡迎的美國卡通,不光是小朋友,其實很多成人喜歡看,也可以算是成人卡通。
  • 程度:中高,速度快,字彙比較深,不過發音辨識算清楚。


2. 米老鼠(Mickey Mouse)

youtube-english-cartoon-improve-hearing-2.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:米老鼠
  • 簡介:迪士尼的經典卡通,裡面也會看到其他熟悉的角色唐老鴨、高飛狗等等。
  • 程度:初中,速度不快,某些卡通人物發音為了像動物而腔調很刻意,辨識起來比較吃力一些。


3. 佩佩豬(Peppa Pig)

youtube-english-cartoon-improve-hearing-3.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:佩佩豬
  • 簡介:英國知名卡通,非常熱門,在 YouTube 上有全世界各種語言的官網。
  • 程度:初級,說話刻意放慢速度,適合聽力入門


4. 蜘蛛人(Spider-Man)

youtube-english-cartoon-improve-hearing-4.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:蜘蛛人
  • 簡介:Marvel 漫威宇宙的一名超級英雄,卡通裡也會出現許多其他復仇者聯盟的角色,例如鋼鐵人、美國隊長、黑豹、洛基等等。
  • 程度:中級,字彙、速度都算中等,咬字滿清楚的,入門上來之後很適合當聽力進階教材


5. 藍色小精靈(The Smurfs)

youtube-english-cartoon-improve-hearing-5.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:藍色小精靈
  • 簡介:經典美國卡通,這是童年的回憶啊,可以再次回味小精靈與賈不妙。
  • 程度:初中,由於年代比較久遠,音質稍差,有些角色發音比較誇張,辨識比較吃力一些。


6. 泡泡孔雀魚(Bubble Guppies)

youtube-english-cartoon-improve-hearing-6.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:泡泡孔雀魚
  • 簡介:很有名的加拿大卡通,節目各方面都製作地很有水準,不但畫質好、角色設計精緻,內容也非常有教育性,適合小朋友觀看。
  • 程度:中級,語速中等,咬字很清楚,很適合做為聽力進階教材


7. 飛天小女警(The Powerpuff Girls)

youtube-english-cartoon-improve-hearing-7.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:飛天小女警
  • 簡介:美國華納的卡通作品,可愛簡單線條畫風,三個神力小女孩打擊犯罪的故事。
  • 程度:中高,語速滿快的,適合晚點再來挑戰。


8. 碰碰狐(pinkfong)

youtube-english-cartoon-improve-hearing-8.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:碰碰狐
  • 簡介:韓國製作的卡通節目,風格屬於線條簡單畫面乾淨,非常用心的幼兒影片。
  • 程度:初級,語速刻意降慢,發音咬字清晰,自帶英文字幕,故事內容多元,絕佳的入門英聽教材


9. 小豬奧莉薇(Olivia)

youtube-english-cartoon-improve-hearing-9.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:小豬奧莉薇
  • 簡介:另一個以小豬為主角的卡通,畫風奇特,雖然選 HD 畫質,畫面仍刻意營造出有點霧霧的感覺。
  • 程度:中高,語速稍快,有些角色口音辨識比較吃力。


10. 睡衣小英雄(PJ Masks)

youtube-english-cartoon-improve-hearing-10.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:PJ Masks
  • 簡介:英國知名卡通,類似飛天小女警的人設,只是換成三個小男生,但是畫面質感強很多(類 3D)。
  • 程度:中高,語速較快,雖然需要的英聽程度比較高,但是我喜歡英國節目的共通點「咬字很清楚」,所以是適合的高階教材


11. 寶寶巴士(BabyBus)

youtube-english-cartoon-improve-hearing-11.jpg-可練習英文聽力的 YouTube 經典卡通詳細整理

  • 線上觀看:BabyBus
  • 簡介:中國製作的節目,但其實做的非常用心,質感畫質都很棒。
  • 程度:初級,適合給幼兒看的節目,跟其他入門教材相比,唱歌的部分比較多,對話相對少很多。



三、英語卡通資源


這部分大多也是以卡通的方式呈現,但比較不是特定的卡通節目,而是專門經營兒童教學的頻道,或是該頻道製作的影片。

1. 愛麗斯夢遊仙境(Alice's Adventures in Wonderland)

  • 線上觀看:愛麗斯夢遊仙境
  • 簡介:這是知名的「BBC Learning English」所製作的兒童床邊朗讀故事,大部分為靜態畫面。
  • 程度:初中,很輕鬆的聽經典童話故事。


2. 知名童話合集

  • 線上觀看:知名童話合集
  • 簡介:這是一個印度兒童頻道「Geethanjali Kids」製作的床邊故事,一共有這些知名童話:美女與野獸、傑克與豌豆、白雪公主、小紅帽、三隻小豬
  • 程度:中級,咬字清晰,內建字幕,很好的聽力進階教材


3. 芝麻街(Sesame Street)

  • 線上觀看:芝麻街
  • 簡介:從小就非常知名的美國兒童節目,大部分角色使用布偶來扮演。
  • 程度:高級,語速很快,大部分木偶刻意裝出特別的音腔,導致非常難以辨識,可能外國人才容易聽得懂。


4. WOW ENGLISH TV

  • 線上觀看:WOW ENGLISH TV
  • 簡介:英國教兒童英文的頻道,大部分由男主持配合卡通特效演出
  • 程度:初中,男主持的咬字滿清楚,也放慢速度,聽起來不吃力。


5. Treehouse Direct

  • 線上觀看:Treehouse Direct
  • 簡介:加拿大兒童頻道,卡通畫面質感做的很不錯。
  • 程度:中級,發音清楚,不錯的聽力進階教材


6. T-Series Kids Hut

  • 線上觀看:T-Series Kids Hut
  • 簡介:簡介資料看不出哪個國家,但口音聽起來像印度人製作的節目。畫面線條簡單,自帶字幕是優點。
  • 程度:初級,刻意放慢語速,適合聽力入門,除了口音不太標準以外都不錯。


更多 YouTube 相關心得:

忘了備份要如何救回部落格網站文章內容、圖片

$
0
0
web-page-recover-content-image-wayback-machine.jpg-忘了備份要如何救回部落格網站文章內容、圖片最近接到一個比較罕見的需求,案主表示 Blogger 每篇文章設定的「搜尋說明」(可參考「Blogger 文章設定」→「六、搜尋說明」),在今年 5~6 月間的文章都不見了,詢問有沒有辦法可以救回。

以前曾寫過「Blogger 網站消失」、「Blogger 文章誤刪」的案例,這次的案例看起來比較輕微一些,至少文章還在,只是某些資訊消失了。

由於之前的案例發生在 4~5 年前,當時還不知道「Wayback Machine」(網站時光機)這個網路服務,否則的話,這個超強的網路服務有機會可以救回所有不見的網頁內容,可以說是目前最強的網頁救援武器

當然,建立網頁備份的觀念才是終極解決方案,但是網頁會急著需要救援一定都是還沒想到要備份之下發生的憾事,那麼本篇就來看看如何操作這個工具。




一、網站時光機 Wayback Machine


1. 簡介

可參考 Wiki 的介紹「網站時光機」,這是一個非營利組織「網際網路檔案館」提供的服務,創辦人希望為網際網路提供「普遍取得所有知識」的途徑。

構想十分偉大,因為無償需要用來儲存的伺服器空間非常巨大,該網站進入後就有個 DONATE 按鈕,WFU 因為靠這個網站救回一些重要資料,也曾贊助過表達一點心意。


2. 教學文章參考

「免費資源網路社群」曾寫過這篇「Wayback Machine 網站時光機帶你重溫那些年」,除了簡單介紹這個網站,也提供了「網頁備份」的操作步驟教學心得。


3. 優缺點說明

有的站長或許習慣使用 Google 搜尋結果的「庫存頁面」功能來救援網頁,不過「庫存頁面」能做到的其實有限,否則 WFU 也不會對 Wayback Machine 心存感激了。Google 庫存頁面的優缺點在於:

  • 索引速度會比 Wayback Machine 快
  • 但只有一個版本,所以只會保留最新庫存頁面狀態
  • 萬一要救援的網頁內容,最新狀態已經被 Google 索引,也就是錯誤的頁面內容已經被索引,那麼就看不到以前的正確頁面內容了
  • 所以救援網頁要靠「庫存頁面」的話,手腳必須比 Google 還快才行


而 Wayback Machine 雖然是目前最強的工具,也不代表他可以 100% 救回所有頁面,因為:

  • NGO 資源畢竟有限,不會保存世界上所有網頁
  • 越熱門的網頁,Wayback Machine 的更新會越頻繁、保留的版本數也越多
  • 不熱門的網頁,說不定只會有一個版本
  • 也可能某些低流量的網頁,完全不會被 Wayback Machine 收錄



二、如何救回完整網頁內容


首先拿一篇文章當範例,說明如何利用 Wayback Machine 找回文章內容。我從 10 月的文章一路測試到 7 月底,終於找到三個月前有被收錄的文章,代表 Wayback Machine 索引速度很慢。

1. 取得網頁快取內容

範例文章為這篇「Adsense 申請 + 廣告無法顯示的各種疑難雜症整理」,在 Wayback Machine 首頁輸入該篇網址:


web-page-recover-content-image-wayback-machine-1.jpg-忘了備份要如何救回部落格網站文章內容、圖片

  • A:輸入要救回的網址
  • B:如果有被收錄的話,記下這裡的收錄日期
  • C:在月曆找到對應的日期,滑鼠移到日期上
  • D:會出現收錄的時間點,點擊這個連結,會出現快取頁面


2. 取得網頁內容

web-page-recover-content-image-wayback-machine-2.jpg-忘了備份要如何救回部落格網站文章內容、圖片

上圖是快取頁面,如果只是要取得純文字,那麼直接從頁面上選取、複製即可。

如果要取得 HTML 碼的話,有兩種方式:

  • 按滑鼠右鍵 → 檢視網頁原始碼 → 找到文章區塊的段落來複製
  • 使用瀏覽器,例如「Chrome 開發人員工具」,因為可以收合 HTML 內容,處理比較方便


3. 調整 HTML 內容

web-page-recover-content-image-wayback-machine-3.jpg-忘了備份要如何救回部落格網站文章內容、圖片

並不是拿到快取頁面的 HTML 就能直接拿來用,因為裡面的連結全部被加上特定的字串,必須一一去除。請見上圖:

  • 所有紅色底線的地方,可看出圖片網址或連結網址,前面都有 "http://web.archive.org/web/xxxxxxxxx" 這樣的字串
  • 將內容複製到文書處理軟體,用全部取代的方式,一一去除這些字串,留下原始的網址連結。
  • 紅框處可看到 <a name="more"></a>,原本是部落格文章「繼續閱讀」的程式碼,但被轉換成這樣的 HTML
  • 要把紅框處字串改成 <!--more-->才能正確變成繼續閱讀標記

主要修改的地方有這些,改完才能將這些 HTML 碼貼回網站。



三、搭配 Feedly 使用


如果你的網站是部落格,那麼還有另一個救命仙丹「Feedly RSS 閱讀器」,只要有人訂閱過網站,Feedly 就會自動保留文章備份內容。

但 Feedly 不一定有 Wayback Machine 好用,以下是優缺點:

  • Feedly 大致是 2013 年左右接下 Google Reader 的位置
  • 在那個時間點之前的文章,伺服器多半沒有備份資料
  • 所以 Feedly 能保存的資料比較少
  • Feedly 網頁的內容會加料,不容易直接複製 HTML 碼
  • 只適合救回文字及(圖片)連結

因為 Wayback Machine 有可能某些網頁沒有收錄快取,那麼 Feedly 可能就會是那些頁面的救星



四、如何救回 Blogger 搜尋說明


回到開頭的案件,Blogger 每篇文章的「搜尋說明」,在頁面上是看不到這些內容的,那麼要如何找到「搜尋說明」呢?

在 Blogger 範本中,跟搜尋說明有關的 Blogger 語法是 data:blog.metaDescription,需要先到範本中看看,這個語法出現在範本中時的前後字串、段落是什麼,再到快取頁面尋找。

例如前面的範例網頁,網頁原始碼畫面如下:

web-page-recover-content-image-wayback-machine-4.jpg-忘了備份要如何救回部落格網站文章內容、圖片

  • 以這個案例來看,「搜尋說明」的相關語法出現在字串 og:description附近
  • 上圖紅框標起來的字串,正是在 og:description同一行的位置
  • 那麼這些字串就是當初所設定的「搜尋說明」字串



五、補充說明


從本篇的案例來看,如果不是自己手誤、不小心刪除文章的相關資訊,那麼很可能是 Blogger 伺服器的失誤,導致部分資訊消失。這件事告訴我們不可完全信任網路服務,站長們有必要自己執行備份的任務

經由本篇說明,我們可以了解到 Wayback Machine + Feedly 有辦法救回多數的頁面內容,但不一定是 100%。想要萬無一失的話,必須儘早養成備份網頁的習慣,而且是同步異地備份。

可參考「自動備份 Blogger 文章」,同時採取多個自動備份的方案,就比較不用擔心任何天災人禍了。


更多「網站工具」相關文章:

FB 不認識的人要求加好友,是否該同意?正反意見綜合分析

$
0
0
前陣子寫了一篇整理文章,發到 FB 後有不少分享,應該是許多人剛好都有同樣的需求。同時間那一兩天 FB 也收到不少加好友的邀請,由於從他們的個人簡介看不出確切的來歷,例如以往會加我的通常是網路、部落格相關領域,那麼簡介至少會有網站的資訊。這樣的情形一時之間也無法決定要接受或是拒絕,只好暫時先晾著。

其實有幾種類型的好友邀請,很容易判斷決定:

  • 大眼正妹頭像:看一下簡介、最新貼文通常會有色情聯絡訊息
  • 無頭像:免洗帳號
  • 無貼文:沒什麼動態、殭屍帳號

這些我會第一時間刪除邀請並向 FB 檢舉,但如果是正常帳號卻屬於陌生邀請的話,我的考量就比較多了。若同意加好友,跟我的連結性會是什麼?還是對方其實是有問題要問?加了好友會不會有什麼意想不到的壞事發生?

因為過去對 FB 的運作沒有很深入瞭解,這次決定研究一下,也可建立起在 FB 是否加陌生人好友的判斷準則。

(圖片出處: pixabay.com)


一、加陌生人為好友的壞處


基本上非好友傳來的私訊可能會被 FB 封鎖屏蔽,所以有些人可能會先送出好友申請再傳私訊。整理一下不想被加好友可能的想法:

  • 會被推銷:可能被傳私訊進行推銷
  • 會被加社團:FB 允許替好友強制加入社團
  • 會被騷擾:可能被傳私訊聊天、騷擾
  • 被邀請參加遊戲、抽獎:具體作法可參考「FB突然好多人加我朋友?這是怎麼回事?
  • 被詐騙:舉例同上一則連結
  • 被監視一舉一動:有人不喜歡動態被盯著,有某些外掛可偵測到某些動態時自動通知
  • 被用來攀關係(做為背書):有些人會刻意加網路上較有名的人,在外招搖撞騙,或提高自己聲量
  • 被看到私人資訊:有些照片、生日聯絡資訊等等不想被看到
  • 首頁不想看到不相干人等的動態:FB 會用演算法出現不同朋友的動態,加一堆陌生人會導致增加不喜歡的動態的機率

如果同意加陌生人好友的話,需要解決以上所有不舒服的狀況



二、加陌生人為好友的好處


由於本站提供了一些業務,說不定陌生人是有潛在案件要聯絡也說不定。且陌生人不一定都是壞人, 也可能對我們某項特質、技能感到有興趣,想要認識瞭解更多資訊,我們跟陌生人之間可能存在某種連結。

如果加了沒連結性的好友,壞處如前所述;而如果加了有連結性的好友,會有很多優點:

  • 獲得關注:若我們的觀點被認同,可能會分享傳播出去
  • 跟粉絲團原理相同:粉絲越多觸擊數也越多,當好友越多才有辦法增加觸擊數及擴散率
  • 增加留言的機率:連結性好友多了才會增加留言機會,帶動更多留言,而留言是 FB 演算法中增加觸擊率更重要的因素
  • 萬事問臉書:越多好友代表越可能有人幫忙回答、找答案
  • 成為媒合者:我們的共同好友彼此原本可能是陌生人,但透過我們找到了連結性而牽上線,撮合許多事
  • 流通資訊:可協助朋友或自己的資訊流通到不同圈圈

簡而言之也可看成人脈的流通,更多優點就不再贅述。也可參考「加入臉書朋友,不等於人脈!你還需要多做3步驟

還沒加好友之前不容易知道有沒有連結性,加了就能增加可能性。

基於以上的優點,如果是自己主動加別人好友,其實效益更大、效率更好,路老闆的 FB online 遊戲,說明得更詳細:「如何快速增加 fb 優質好友」。



三、實名帳號與特定用途帳號


要不要加陌生人好友,除了分析優缺點,也需要看不同帳號的用途:

  • 實際身份:
    • 一般來說實際的帳號,應該只會想加認識的人,不想加陌生人
    • 除非本身就是業務員,或是從是需要推銷、推廣的職務,才會需要加陌生人
  • 網路身份:
    • 網路身份認識的人跟實際生活應該鮮少重疊,那麼這個帳號的好友應該本來就不是認識的人
    • 所以網路身份加陌生人的容忍度應該比較高
    • 但還是有必要進行過濾,不是阿貓阿狗都加
  • 專門打卡:
    • 有人可能會建立專門用來應付店家打卡的帳號
    • 這類帳號跟殭屍帳號差不多,有沒有加陌生人應該差別不大



四、綜合考量


本站使用的 FB 帳號屬性算是「網路身份」,主要活動範圍在網路、部落格這個圈圈,也可做為接案用途。那麼整篇分析下來,發現「是否加陌生人好友」是很容易做決定的,第一段所有列出的壞處並不難解決:

  • 會被推銷 → 看推銷什麼東西,如果無法產生連結性,直接剔除好友、或封鎖,因為他的目的只是替他自己推銷,不會替你傳播
  • 會被加社團 → 看加什麼社團,如果無法產生連結性,直接剔除好友、或封鎖,因為他只是為了自己的目的
  • 會被騷擾 → 直接剔除好友、或封鎖
  • 被邀請參加遊戲、抽獎 → 直接剔除好友、或封鎖
  • 被詐騙 → 直接剔除好友、或封鎖
  • 被監視一舉一動 → 不是實際帳號,也沒什麼好監視的
  • 被用來攀關係(做為背書) → 如果有人因此被騙,代表被騙的人判斷力待加強,也未跟我們求證,都成年人了,這不該是我們要付的責任
  • 被看到私人資訊 → 不是實際帳號,沒什麼私人資訊,連大頭照都沒有
  • 首頁不想看到不相干的人 → 加好友但取消追蹤就好


所以簡單做個總結:

  • 以我的網路身份狀況,應該要加越多陌生人為好友越好
  • 如果想要傳播個人、網站品牌、觀點,更應該多加好友
  • 但需要過濾掉色情帳號、殭屍免洗帳號,以及純粹向我們推銷的帳號,這類好友對我們沒有幫助


更多 Facebook 相關文章:

Google Apps Script 使用 XmlService 解析 XML 要注意的地方

$
0
0
google-apps-script-xmlservice-problem.jpg-Google Apps Script 使用 XmlService 解析 XML 要注意的地方之前曾記錄使用 Google Apps Script(簡稱 GAS) 爬網頁資料,「解析 HTML 及操作 DOM 的技巧」,主要利用 GAS 的 XmlService 這個官方函數。

而最近爬 XML 頁面時,發現之前記錄的心得不敷使用,沒想到 XML 架構有點難以理解。因此花了點時間解決問題,也另外記錄一下心得。

(圖片出處: pxhere.com)


一、GAS 標準範例


首先看一下官方提供的標準範例,來自官網「XML Service」:

function parseXml() {
var url = 'https://gsuite-developers.googleblog.com/atom.xml';
var xml = UrlFetchApp.fetch(url).getContentText();
var document = XmlService.parse(xml);
var root = document.getRootElement();
var atom = XmlService.getNamespace('http://www.w3.org/2005/Atom');

var entries = root.getChildren('entry', atom);
for (var i = 0; i < entries.length; i++) {
var title = entries[i].getChild('title', atom).getText();
var categoryElements = entries[i].getChildren('category', atom);
var labels = [];
for (var j = 0; j < categoryElements.length; j++) {
labels.push(categoryElements[j].getAttribute('term').getValue());
}
Logger.log('%s (%s)', title, labels.join(', '));
}
}


以上需要注意的是紅字那兩行,getNamespace 是取得「命名空間」(namespace)之意,概念說明可參考 Wiki「XML命名空間」。

不是每個 HTML 頁面都有設定命名空間,同樣也不是每個 XML 頁面都有命名空間。之前解析 HTML 網頁時,剛好沒處理命名空間同樣可以正常執行,但這次解析 XML 頁面就踢到鐵板,所以如果 XML 頁面無法正常解析時,就必須注意紅字內容,檢查該頁面是否設定了命名空間:

  • 先用 getNamespace 取得該 XML 頁面的命名空間
  • 接著取得頁面任何元素,例如使用 getChildren 時,都需要加入命名空間的參數
  • 否則可能什麼東西都取不出來



二、YouTube 播放清單 feed 頁面


直接以實際範例說明比較容易理解,例如下面是 YouTube 提供的影片播放清單 RSS Feed,公視「有話好說」XML 頁面:

https://www.youtube.com/feeds/videos.xml?playlist_id=UUgxXuXHJ4VwovSTvDiWlzZQ

google-apps-script-xmlservice-problem-1.jpg-Google Apps Script 使用 XmlService 解析 XML 要注意的地方

從這個頁面可以爬到的資料相當多,例如影片 id、標題、作者資訊等等:

  • A:紅色底線這裡,就是這個 XML 頁面的 namespace 命名空間
  • B:此處的紅色底線是另一個困難的概念,這裡是 yt 這個命名空間
  • C:如果要從此處的 videoId 元素取得影片 id 字串,請注意到有個前綴字串 yt,這就是該元素命名空間

以上就是使用 XmlService 會卡關的地方,以下來看範例程式碼。



三、爬取 XML 頁面範例程式碼


同樣以公視「有話好說」的 RSS Feed 當範例,嘗試以 GAS 來爬取 XML 頁面內容,取得每個影片的 id、標題:

(function() {
// 取得清單 feed 內容, 解析 xml 格式
var xmlUrl = "https://www.youtube.com/feeds/videos.xml?playlist_id=UUgxXuXHJ4VwovSTvDiWlzZQ",
xml = UrlFetchApp.fetch(xmlUrl).getContentText(),
doc = XmlService.parse(xml),
root = doc.getRootElement(),
atom = XmlService.getNamespace('http://www.w3.org/2005/Atom'), // 這個 feed 一定要有 namespace 才能讀取
yt = XmlService.getNamespace('http://www.youtube.com/xml/schemas/2015'), // 有 prefix 前綴 yt 一定要有 namespace 才能讀取
entries = root.getChildren("entry", atom), // 一定要加上 atom namespace 才能取得
i, videoId, programTitle;

// loop 所有影片
for (i in entries) {
// 取得影片 id, 影片標題
videoId = entries[i].getChildText("videoId", yt); // 一定要加上 yt namespace 才能取得
programTitle = entries[i].getChildText("title", atom); // 一定要加上 atom namespace 才能取得

Logger.log("影片 id = "+videoId);
Logger.log("影片標題 = "+programTitle);
}
})();

所有注意事項請直接看註解字串,並參照前面「二、YouTube 播放清單 feed 頁面」的說明即可理解。

參照此範例後,要取得此頁面其他欄位的資料,按相同邏輯加入參數即可抓到。


更多 相關文章:

合法線上第四台直播頻道 + 隨選隨看(VOD)戲劇電影動畫整理

$
0
0
製作「線上看電視」之後,整合了多數 YouTube 上可合法收看的直播頻道、節目,不過仍有一些合法、擁有版權的第四台直播節目節目,並沒有放在 YouTube。不時有使用者詢問能否新增某些知名的卡通動畫、台日韓劇等節目,由於版權的關係那些節目很難放上 YouTube,不過倒是可以在這些外部網站看到。

因此「線上看電視」特別在選單新增一個群組「外部」,用來存放這些外部網站的網址連結,方便愛用者找不到特定節目時,可以連到其他網站收看。

本篇整理列出許多外部合法資源,也包含了許多免費的隨選隨看(VOD)戲劇、電影、動畫節目,並依照性質分類,也會大致介紹該頻道有什麼熱門節目,也就是 YouTube 無法上架的內容。



以下所有頻道名稱即為外部連結,點擊即可前往觀看。不過不需要一一加入書籤,只要進入「線上看電視」後,點擊選單上的「外部」分類,即可顯示所有頻道資訊,可當成現成書籤使用。


一、綜合





二、新聞





三、綜藝





四、戲劇





五、電影





六、體育





七、兒少





八、食旅





九、知性





十、學習





十一、宗教




更多「網路電視」相關文章:

擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

$
0
0
blogger-contact-form-customization.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息Blogger 官方「聯絡表單」是很棒的工具,提供了訪客傳送私密訊息的簡易管道。可惜的是制式版面只有三個欄位可以填寫(稱呼、郵件、訊息),當然這已能滿足多數用途,但要客製就相當不容易。

過去寫了這篇「使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單」,結合 Google 試算表與後端 Google Apps Script(簡稱 GAS),利用後端寄出郵件給自己,流程相對複雜,比較適合前端工程師實作。

前陣子有留言表示這個方案失效,但如果是熟悉 GAS 的工程師,我相信還是有辦法可以實現這個流程,瞭解原理就寫得出來。不過本篇要展示的方案,倒是與 Google 試算表或 GAS 都無關。

(圖片出處: pexels.com)


一、純前端擴充官方聯絡表單


要動到後端總是繁雜一些,如果能直接用官方聯絡表單來處理複雜表單、表格,就再好不過了。

前陣子處理一個購物車網站時,遇到這兩種需求:

  • 聯絡表單需要加入「電話」欄位
  • 購物車訂單內容需要傳送郵件通知站長

於是開始研究如何擴充官方聯絡表單,而想通原理後也不算困難,只要把自製表單的內容塞到官方聯絡表單,再進行傳送就完成了。



二、新增電話欄位


blogger-contact-form-customization-1.png-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

上圖範例直接修改 Blogger 官方聯絡表單的 HTML/CSS,除了新增一行「電話」欄位,也美化了整個表單。

來看看傳送表單之後,接收到的郵件:

blogger-contact-form-customization-2.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

郵件最下方可看到,這是一封來自「聯絡表單」工具的訊息,除了訪客填寫的內容,還多了電話資訊。



三、傳送購物車內容


前面是個比較簡單的修改,接下來是極為複雜的範例。

blogger-contact-form-customization-3.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

上圖是購物車結帳後的頁面,除了顧客下單後需要填寫的聯絡資訊,例如電話、地址之外,也需要將顧客的訂單細節記錄在郵件之內,例如:

  • 品項名稱
  • 數量、單價
  • 總金額

來看看按下「送出訂單」會收到什麼內容。


blogger-contact-form-customization-4.jpg-擴充 Blogger 官方聯絡表單,讓任何自製版面的表格或內容都能傳送訊息

一樣可看到這是一封來自「聯絡表單」工具的訊息,包含了所有顧客聯絡資訊,以及訂單詳細內容。



四、總結


由於本篇是極為客製的需求,因此無法提供通用的程式碼範例,但從範例可以看出,只需要有前端的 HTML/CSS/JS 技術,就可以改造 Blogger 官方聯絡表單工具,做出功能強大、比美「Google 表單」的功能,而且不需動到後端技術。

比內嵌「Google 表單」更好的地方是,客製聯絡表單不會破壞網站風格的整體性,可以讓網站看起來更有質感、更為專業。

那麼如有需要客製官方聯絡表單需求的站長,請再發案給本站即可。


更多 Blogger 官方工具使用技巧:

Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML

$
0
0
google-apps-script-parse-html-cheerio.jpg-Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML之前用 Google Apps Script(簡稱 GAS)製作網頁爬蟲程式,為了解析 HTML 與 XML 分別寫了兩篇心得:


其實前端環境用 jQuery 等函式庫處理 DOM 非常方便快速,習慣之後在後端處理 DOM 架構就會覺得很痛苦,要嘛想辦法自己做輪子,要嘛得學習駕馭別人另外做的變形輪子,如果後端也有 jQuery 可以用就好了。

有讀者留言提到 jsdom、cheerio 等關鍵字,這些都是 node.js 環境下用來處理 DOM 的 jQuery-like(仿 jQiery)模組。找了一下發現有國外網友做出用於 GAS 的 cheerio 版本,用了之後簡直是雨過天晴,後端也可以跟前端一樣輕鬆了,請見本篇 cheerio 的使用心得整理。



一、Cheerio 使用說明


1. 官網

首先這是 cheerio 的 node.js 官網:


這裡有官方詳細的介紹、操作說明,以及 Github 網址。

由於全部都是英文,而且跟本篇主旨 GAS 環境沒有任何關係,可以隨意看看就好。


2. 說明書

如果是英文苦手,可以閱讀這篇的簡中翻譯:


基本上如果會 jQuery 的話,不用看說明也會操作,基本常用的指令是一模一樣的。

但 cheerio 畢竟不等於 jQuery,如果有哪些 jQuery 操作方式不確定 cheerio 是否也有,就可以來這個網頁搜尋一下用法。



二、GAS 安裝 Cheerio


1. GAS 的 Cheerio 模組

在網路上找到 2 個 GAS 的 Cheerio 模組:

  1. cheerio-gasify
  2. cheeriogs

基本上第 1 個是原始版本,第 2 個是被 fork 之後的衍生版本,從 readme 說明來看也許功能比較強。

第 1 個 GAS 安裝說明完全沒有,第 2 個有 GAS 的安裝說明。然而結論是,測試的結果 2 個安裝後都無法直接使用。

經過多方測試後,第 1 個有找到解決方法,第 2 個找不出來,以下來看我怎麼調整第 1 個原始模組。


2. 安裝 cheerio-gasify

google-apps-script-parse-html-cheerio-1.png-Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML

首先按照第 2 個的安裝說明,先在 Google Drive 新增一個 GAS 專案,然後點選單上的「資源」→「程式庫」


google-apps-script-parse-html-cheerio-2.jpg-Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML

  • A:貼上前面第 1 個版本提供的 project key 字串 MU756IKHJ2hAYP1glQmzgA4ZBvzIux02r
  • B:版本選擇 cheerio@0.19.0
  • 按「儲存」即可


3. 修改呼叫函數字串

google-apps-script-parse-html-cheerio-3.jpg-Google Apps Script 網頁爬蟲麻煩事交給 Cheerio 解決,輕鬆解析 HTML 與 XML

上圖是官網提供的範例程式碼,但怎麼樣都無法執行,使用除錯模式後找到了原因,官網呼叫的函數 "cheerio_gasify" 並不存在,從偵錯畫面可看到只有 "cheeriogasify" 這個函數,所以應該是官網說明書的誤植。

把呼叫函數改成 cheeriogasify後果然就能正常執行了!



三、操作範例


1. HTML

直接拿第 2 個版本的程式碼,但改用原始版本的模組,來當作 HTML 範例程式碼:

function html_test() {
var cheerio = cheeriogasify.require('cheerio'),
response = UrlFetchApp.fetch("https://en.wikipedia.org"),
$ = cheerio.load(response.getContentText());

Logger.log($('#mp-right').text());
Logger.log($('p').first().text());
}

可自行測試看看,很方便就能用 jQuery 取得需要的 HTML 內容字串。


2. XML

之前這篇「Google Apps Script 使用 XmlService 解析 XML 要注意的地方」可看到,為了解析 XML 得瞭解一些複雜概念,現在使用 cheerio 什麼都不用懂,就像在操作 HTML 一般。

以下把之前 XmlService 的操作程式碼,直接改用 cheerio,真是簡單太多了:

function xml_test() {
var cheerio = cheeriogasify.require('cheerio'),
response = UrlFetchApp.fetch("https://www.youtube.com/feeds/videos.xml?playlist_id=UUgxXuXHJ4VwovSTvDiWlzZQ"),
$ = cheerio.load(response.getContentText()),
entries = $("entry"),
entry1 = entries.eq(0);

Logger.log(entry1.children("yt\\:videoId").text());
Logger.log(entry1.find("author name").text());
}

很方便就取得第一則影片的 id 以及標題,不過紅字這裡需要特別說明一下:

  • yt:videoId這個元素使用了命名空間(namespace) "yt",不能直接用 jQuery 直覺的作法
  • 例如 $("yt:videoId") 會取不到東西,因為冒號 ":" 有特別的含意
  • 解決方法參考這篇「Explain \\: escaping colon for xml namespace pseudo」,有說明原理
  • 在冒號前面加上轉譯符號 "\\" 兩個斜線,就可以把冒號 ":" 視為字串了


更多 Google Apps Script 相關技巧:
Viewing all 784 articles
Browse latest View live