★網站前端技術發展太快, 新手很難抉擇要學的東西, 大家學了什麼

CSS:https://colorlib.com/wp/free-css3-frameworks/
JS:https://colorlib.com/wp/javascript-frameworks/
HYBRID APP:https://blog.jscrambler.com/10-frameworks-for-mobile-hybrid-apps/
2d/3d Game:https://www.diycode.cc/topics/16
Desktop:https://electron.atom.io/
IOT:https://webduino.io/

上述只是冰山一角, UI/UX視覺整合, 前端資安, 後端node.js, Social Plugin, SEO, 自動化測試, 大數據分析, 資料視覺化, RWD, AI, Google Map, 語音辨識, 文字轉發音, 影像辨識, VR/AR, Webphone, WebRTC, midi, GrouthHacker, 程式混淆壓縮加密, 程式編譯如Typescript/Kotlin編譯成js, 版控只能git了,讓你玩不完....老實說有點噁心, 而且沒談到各框架生態系與外掛....哈哈 Orz

後端工作如後台開發, 金流, 後台資安, 大數據分析, 自動化測試, 排程, BOT, 轉檔, 檔案管理, RESTFUL API撰寫, 伺服器調教維運, 資料庫調教維運, LOG管理, 種類相較較少, 當然不是說比前端簡單, 後端工作需要深度學習與經驗. 個人推薦python作為後端開發程式會很省力, 因為投資報酬率還不錯. 或者想省掉後端管理的工就用firebase也是不錯選擇

2016年3月3日 星期四

Chrome Console 應用 - 以 FB Fan Page Hot Analytics 臉書粉絲專頁熱度分析為例

隨著巨量時代到來,資料分析與探勘成為科技顯學,尤其透過數據分析可做到商業決策與精準行銷。作者寫了一個臉書粉絲專頁熱度分析工具,我想對於網路行銷領域的人或是粉絲專頁經營者都有幫助,所以公開這套報表小軟體讓大家使用。

先看這個軟體可以可以做到什麼?下圖為軟體輸出結果(字有點小,主要是輸出粉專文章id,粉專文章上稿時間,粉專文章讚數,粉專文章分享數,粉專文章留言數,粉專文章網址,粉專文章內容的報表)

下面有2個報表範例 A,B 可下載
A.正妹俱樂部 2016年 [pdf]粉絲互動資料183筆(依讚數排序)-點擊下載
B.谷阿莫 AmoGood 2016年 [pdf]粉絲互動資料32筆(依讚數排序)-點擊下載

由A,B報表可知,正妹俱樂部粉絲專頁今年度至今有183篇PO文,而正妹排名讚數最多的正妹是;而谷阿莫粉絲專頁今年度至今有32篇PO文,讚數最多的影片是【#227】5分鐘看完2015創造生物的電影《怪物 》

透過報表我們可能可以分析出:
1.讚數最高文章排序
2.分享數最高文章排序
3.留言數最高文章排序
4.經營粉絲專頁熱門圖文撰寫模式
5.經營粉絲專頁發文速度(譬如一個月發文幾篇)
6.最有價值的文章挖掘
7.同業競爭粉絲專頁分析
8.最佳貼文時間評估

如何生成報表(本軟體功能為擷取本年度至今粉絲專頁互動資料)
1.請先到想要分析的粉絲專頁
2.打開 Console (網頁任意處點選滑鼠右鍵選檢查,再選console)輸入 v0.21程式碼(請點此),別懷疑全部拷貝貼在 Console 再按 Enter 執行程式。會跳出工具面板,請點選啟動(關閉面板只要重整網頁即可)。(版本更新至0.21,若有再改版,工具面板最下方會顯示藍色版本更新連結)

3.擷取資料中請不要動畫面

4.擷取資料完畢會出現下載按鈕

5.請點選下載按鈕會下載報表,檔案格式為 .csv

如果是在mac開啟.csv會用內建Numbers開啟

如果要用Office開啟.csv請開新檔案從文字檔輸入資料

選擇『分隔符號』按下一步

選擇『逗點』按下一步

選擇『文字』按下一步

選擇『確定』

資料會倒入到excel


★FB分析不只可以做到文章分析,還可以挖掘粉絲專頁黃金TA(與粉絲專頁互動數最高的使用者),作者寫出分析TA程式輸出如下圖(本範例目前不提供請見諒):



透過粉絲互動數我們也可以辦一些活動給鐵粉們一些折扣或優惠,達到真正精準行銷。
相信各位對 Console 應用有一些興趣。

更多 Chrome Console 應用範例請參考 Chrome Console 應用實戰,用 jQuery 批量下載正妹圖

2016年2月25日 星期四

Corona SDK Lua OOP 設計

了解OOP之前先了解 Metatables 與 Metamethods。Lua 中的 table 由於定義的行為,我們可以遍歷所有的 key-value,但是我們不可以對兩個 table 進行相加,也不可以比較兩個表的大小。Metatables 允許我們改變 table 的行為,例如,使用 Metatables 我們可以定義 Lua 如何計算兩個 table 的相加操作 a+b。當 Lua 試圖對兩個表進行相加時,他會檢查兩個表是否有一個表有 Metatable,並且檢查 Metatable 是否有__add方法實作。如果找到則執行這個 __add 函式 ( 所謂的 Metamethod ) 去計算結果。Lua 中的每一個表都有 Metatable 可添加。預設 Lua 新建立的 table 不帶 metatable。任何一個表都可以是其它表的 metatable,一組相關的表可以共享一個 metatable(描述他們共同的行為)。一個表也可以是自身的 metatable ( 描述其私有行為 )。簡單來說我們設置好 metatable 後,可以為該表格定義特殊函示 Metamethod,以雙底線 __ 開頭的函示:

t = {}
print(getmetatable(t)) --> nil
t_mt = {} -- 建立 table 作 metatable 用
setmetatable(t, t_mt) -- 設置 t 的 metatable 是 t_mt

以下我們示範兩個 table 相加

Set = {}
Set.mt = {} -- 建立 metatable 給 Set

function Set.new (t)
    local set = {}
    setmetatable(set, Set.mt) -- 設置 metatable
    for _, l in ipairs(t) do set[l] = true end
    return set
end

s1 = Set.new{10, 20, 30, 50}
s2 = Set.new{30, 1}
print(getmetatable(s1)) --> table: 0x7f953bd03f20
print(getmetatable(s2)) --> table: 0x7f953bd03f20

Set.mt.__add = function (a,b) -- 實作宇集(union) __add metamethod
    local res = Set.new{}
    for k in pairs(a) do res[k] = true end
    for k in pairs(b) do res[k] = true end
    return res
end

print_r(s1 + s2) -- table: 0x7fcc855f2e10 {[1] => true, [30] => true, [10] => true, [50] => true, [20] => true}

print_r 不清楚請參考前一篇 Corona SDK Lua 程式語言基礎
metamethod 不只有 __add 可以實作, 還有 __mul(乘)、__sub(減)、__div(除)、__unm(負)、__pow(冪)、__eq(等於)、__lt(小於)、__le(小於等於)...等,較常使用應該是__tostring 跟物件導向設計要使用的 __index。下面先介紹 __tostring,隱含物件轉字串實作:

Set.mt.__tostring = function (set)
    return "[Set Object]"
end

print(s1,s2) --> [Set Object] [Set Object]

接下來介紹 __index。當我們存取一個表不存在的變數時,返回結果應為nil,這是正確的,但並不完全正確。實際上,這種存取變數時會觸發 lua 解釋器去查找 __index metamethod:如果不存在,返回結果為nil;如果存在則由__index metamethod 返回結果。延續上面範例:

print(s1.width) --> nil (其實有觸發預設 __index,且回傳 nil)
Set.mt.__index = function() -- 覆寫 __index 方法
    return "觸發__index"
end
print(s1.width) -->觸發__index (建立預設值的概念)
--所以無論如何存取 table 未定義變數時都一定會隱含執行 __index metamethod

我們可以發現 __index 可以用來作為物件導向的繼承概念,給予繼承物件預設值(子物件屬性會繼承父物件屬性)。假設我們想建立一些表來描述窗戶物件。每一個表必須描述窗戶物件的一些參數,比如:位置,大小,顏色風格等等。所有的這些參數都有預設的值,當我們想要建立窗戶物件的時候只需要給出非預設值的參數即可建立我們需要的窗戶物件。首先,我們實作一個原型和一個構造函數,他們共享一個 metatable:

-- 建立名稱空間
Window = {}
-- 建立 prototype 變數
Window.prototype = {x=0, y=0, width=100, height=100}
-- 建立 metatable
Window.mt = {}
-- 宣告建構子
function Window.new (o)
    setmetatable(o, Window.mt)
    return o
end
-- 建立預設值來自 prototype 變數
Window.mt.__index = function (table, key)
    return Window.prototype[key]
end
-- 創造 Window 物件
w = Window.new{x=10, y=20}
print(w.width) --> 100 (來自 prototype 的變數)

特殊用法:Window.mt.__index,當他是一個表的時候,Lua 將在這個表中看是否有缺少的變數。所以,上面的那個例子可以使用第二種方式簡單的改寫為

Window.mt.__index = Window.prototype --跟用函示意思一樣但寫法簡潔
w = Window.new{x=10, y=20}
print(w.width) --> 100 (相當執行 Window.prototype["width"])

接下來進入我們正式主題物件導向設計
首先我們要改變 table 中函示的宣告方式:

T = {val=1}

function T.func(v)
    return T.val + v
end

--第一次改寫,用 self 程式更有彈性
function T.func(self, v)
    return self.val + v
end

--第二次改寫,隱藏第一個函示參數 self 用:
function T:func(v)
    return self.val + v
end

在Lua中,使用前面我們介紹過的繼承的思想,很容易實現prototypes。更明確的來說,如果我們有兩個對象 a 和 b,我們想讓 b 作為 a 的 prototype 只需要

setmetatable(a, {__index = b})

這樣,當對象 a 使用任何不存在的成員都會到對象 b 中查找。術語上,可以將 b 看作類別,a 看作物件。我們來設計建構子:

function T:new (o)
    o = o or {}
    setmetatable(o, self) --優化程式,讓本身 T 作為 metatable
    self.__index = self --讓本身 T 表內所有參數被 o 繼承。這樣子的話,一個類不僅提供方法,也提供了他的實例成員的預設值
    return o
end

嘗試建立物件:

local t = T:new({val=2})
print(t.val) -- 2,因為直接設 val,不會再去找 __index 表的 val
print(t:func(10)) -- 12,t 未定義 func 屬性,但是解析器會找查 metatable 的 __index 表,所以使用了 getmetatable(t).__index.func(T,v) 意即 T:func(v)

所以類的設計跟使用方法長這樣:

--MyOOP.lua

--成員屬性設定
MyOOP = {
    a = 1,
    b = 2
}

--私有函示設定
local function privateFunc()
    print("123")
end

--公開函示設定
function MyOOP:new(o)
    o = o or {}
    setmetatable(o, self)
    self.__index = self
    return o
end

function MyOOP:func1()
    print("func1")
end

function MyOOP:func2()
    print("func2")
    --privateFunc()
end

return MyOOP

--main.lua
local MyOOP = require("MyOOP")
local oop = MyOOP:new()
oop:func1()

呈上例,接下來談繼承,很簡單,設置變數 ExtendMyOOP 實例化 MyOOP:new(),再定義子類 ExtendMyOOP 新方法或覆寫函示即可。

ExtendMyOOP = MyOOP:new()

function ExtendMyOOP:func1()
    print("extend func1")
end

local e = ExtendMyOOP:new{b=1000.00} --當 new 執行的時候,self 參數指向 ExtendMyOOP。所以,e 的 metatable 是 ExtendMyOOP,__index 也是 ExtendMyOOP。
e:func1() --> extend func1 (直接使用覆寫方法,不會再找 __index)
e:func2() --> func2 (Lua 在 e 中找不到 func2 函示,它會到 ExtendMyOOP 中查找,在 ExtendMyOOP 中找不到,會到 MyOOP 中查找)
print(e.a) --> 1 (Lua 在 e 中找不到 a 變數,它會到 ExtendMyOOP 中查找,在 ExtendMyOOP 中找不到,會到 MyOOP 中查找)
print(e.b) --> 1000 (直接使用覆寫變數,不會再找 __index)

有任何問題歡迎留言~
官方範例

2016年2月24日 星期三

Corona SDK Lua 程式語言基礎

全域變數不需要宣告,給一個變量賦值後即建立了這個全域變數,而全域變數未初始化得到的值是 nil

print(b) --> nil
b = 1
print(b) --> 1

如果你想删除一個全域變數,只需要將變數賦值 nil

b = nil

保留字

and break do else elseif
end false for function if
in local nil not or
repeat return then true until
while

變數是大小寫有區分,不要數字開頭
單行註解

--這是單行註解

多行註解

--[[
    這是多行註解
    這是多行註解
    這是多行註解
--]]

Lua 中有 6 個基本類型分別為:nil、boolean、number、string、function、table

print(type("Hello world")) --> string
print(type(10.4*3)) --> number
print(type(print)) --> function
print(type(type)) --> function
print(type(true)) --> boolean
print(type(nil)) --> nil
print(type(type(X))) --> string
print({}) --> table

變數可隨時切換型態

print(type(a)) --> nil (未初始化)
a = 10
print(type(a)) --> number
a = "a string!!"
print(type(a)) --> string
a = print
a(type(a)) --> function

Booleans - false 和 nil 為假,其它值為真,所以 Lua 中的 0 與空字串都為真
Numbers - 數值呈現方式 4、0.4、4.57e-3、0.3e12、5e+20
Strings - 可用單引號與雙引號與多行字串[[...]]表示如 "test"、'test'、[[test]]
數值字串轉換

print("11"+1) --> 12 (number)
print("11"..1) --> 111 (string)
print(tonumber("11")) --> 11 (number)
print(tostring(11)) --> 11 (string)

Functions - 可做參數與函示返回值,在函示裡可以做動態生成的函示(安全運行環境的隐藏函数,如下)

function outside()
    function inside() print("inside called") end -- 動態生成隱藏函數
    inside() -- outside 函示外部環境不能呼叫 outside 函示內部 inside 函示,因此稱為安全環境
end

Tables -

days = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"}
days[2] --> Monday
a = {x=0, y=0} --> 意同 a = {}; a.x=0; a.y=0 或 a = {["x"]=0, ["y"]=0}
a.x = nil --移除 a.x
--在構造函数中域分隔符逗号(",")可以用分號(";")替代,通常我們使用分號来分割不同類型的表元素。
local a = {x=10, y=45; "one", "two", "three"}

一元運算符:- (負值)
二元運算符:+ - * / ^ (次方)
關係運算符:< > <= >= == ~= (不等於)
邏輯運算符:and or not
a and b -- 如果 a 為 false,則返回 a ,否則返回 b
a or b -- 如果 a 為 true,則返回 a,否則返回 b
★如果為 false 或者 nil 則给 x 赋初始值 v:

x = x or v --意同 if not x then x = v end

and 的優先级比 or 高。
lua 模擬三元運算 (a and b) or c
not 的结果只返回 false 或者 true
優先级高低

^
not - (unary)
* /
+ -
..
< > <= >= ~= ==
and
or

優先级範例

a+i < b/2+1 --> (a+i) < ((b/2)+1)
5+x^2*8 --> 5+((x^2)*8)
a < y and y <= z --> (a < y) and (y <= z)
-x^2 --> -(x^2)
x^y^z --> x^(y^z)

多參數設定

a, b = 10, 2 --> a=10; b=2
x, y = y, x -- x, y 交換值
a[i], a[j] = a[j], a[i] -- 'a[i]', 'a[i]' 交換值

a, b, c = 0, 1
print(a,b,c) --> 0 1 nil
a, b = a+1, b+1, b+2 -- b+2 會被忽略
print(a,b) --> 1 2
a, b, c = 0
print(a,b,c) --> 0 nil nil
a, b = f() --> f return 兩個值如 function f() return 1,2 end

區域變數
使用local建立一個區域變數,與全域變數不同,區域變數只在被宣告的程式區塊內有效。
應該盡可能使用區域變數,有兩個好處:
1. 避免命名衝突
2. 訪問區域變數的速度比全域變數更快

x = 10
local i = 1
if i > 20 then
    local x -- 此 x 為區域變數,存活範圍 then - else 之間
    x = 20
    print(x + 2) --> 22
else
    print(x) --> 10 此 x 為全域變數
end

條件式

if conditions then
    then-part
end

if conditions then
    then-part
else
    else-part
end

if conditions then
    then-part
elseif conditions then
    elseif-part
..  --->多個 elseif
else
    else-part
end

while condition do
    statements
end

repeat
    statements
until conditions

for var=exp1,exp2,exp3 do
    loop-part
end

for 將用 exp3 作為 step 從 exp1(初始值)到 exp2(终止值),執行 loop-part。其中 exp3 可以省略,預設 step = 1。exp1, exp2, exp3 只會被計算一次,在循環前,且為區域變數

for i=10,1,-1 do -- exp3 為 -1 表示每次迴圈 i-1
    print(i)
end

跳出迴圈

for i=10,1,-1 do
    if i == 5 then break end
end

table 表鍵值輸出

-- print all values of array 'a' 印出 table 所有值
for i,v in ipairs(a) do print(v) end

-- print all keys of table 't' 印出 table 所有鍵
for k in pairs(t) do print(k) end 

當函數只有一個參數並且這個參數是字串或者表的时候,()可有可無

print "Hello World" --> print("Hello World")
dofile 'a.lua' --> dofile ('a.lua')
print [[a multi-line 
message]] --> print([[a multi-line
message]])
f{x=10, y=20} --> f({x=10, y=20})
type{} --> type({})

多返回值

s, e = string.find("hello Lua users", "Lua")
print(s, e) --> 7 9

function foo0 () end -- 沒返回
function foo1 () return 'a' end -- 返回1個值
function foo2 () return 'a','b' end -- 返回2個值

x,y = foo2() -- x='a', y='b'
x = foo2() -- x='a', 'b' 被忽略
x,y,z = 10,foo2() -- x=10, y='a', z='b'
x,y = foo0() -- x=nil, y=nil
x,y = foo1() -- x='a', y=nil
x,y,z = foo2() -- x='a', y='b', z=nil
x,y = foo2(), 20 -- x='a', y=20
x,y = foo0(), 20, 30 -- x='nil', y=20, 30 被忽略

print(foo0()) -->
print(foo1()) --> a
print(foo2()) --> a b
print(foo2(), 1) --> a 1
print(foo2() .. "x") --> ax

a = {foo0()} -- a = {} (空表格)
a = {foo1()} -- a = {'a'}
a = {foo2()} -- a = {'a', 'b'}
a = {foo0(), foo2(), 4} -- a[1] = nil, a[2] = 'a', a[3] = 4

用括號強制函數返回一個值

print((foo0())) --> nil
print((foo1())) --> a
print((foo2())) --> a

多參數函示
arg 為多餘參數且為 table

function g (a, b, ...) 
    print(a,b,arg)
end
g(3) --> a=3, b=nil, arg={n=0}
g(3, 4) --> a=3, b=4, arg={n=0}
g(3, 4, 5, 8) --> a=3, b=4, arg={5, 8; n=2}

如果我們只想要string.find返回的第二個值。一個典型的方法是使用啞元(dummy variable,底線)

local _, x = string.find(s, p)

函示宣告有兩種方式

function foo (x) return 2*x end
foo = function (x) return 2*x end

下面例子中包含在 sortbygrade 函式内部的 sort 中的匿名函数可以訪問 sortbygrade 的參數 grades,在匿名函式内部 grades 不是全域變數也不是區域變數,我們稱做為外部的區域變數( external local variable )或者 upvalue。

function sortbygrade (names, grades)
    table.sort(names, function (n1, n2)
        return grades[n1] > grades[n2] -- compare the grades
    end)
end

table 表中的函示宣告

Lib = {}
Lib.foo = function (x,y) return x + y end
Lib.goo = function (x,y) return x - y end

Lib = {
    foo = function (x,y) return x + y end,
    goo = function (x,y) return x - y end
}

Lib = {}
function Lib.foo (x,y)
    return x + y
end
function Lib.goo (x,y)
    return x - y
end

遞迴函示宣告
如下上面這種方式導致 Lua 編譯時遇到 fact(n-1) 並不知道它是區域變數 fact,Lua 會去查找是否有這樣的全局函示 fact。為了解决這個問題我們必須在定義函式以前先宣告 fact

local fact = function (n)
    if n == 0 then
        return 1
    else
        return n*fact(n-1) --> 編譯器會認為是全域函示
    end
end

--改寫
local fact
fact = function (n)
    if n == 0 then
        return 1
    else
        return n*fact(n-1)
    end
end

函式返回值可以是運算式

function myReturn()
    return x+y-z
end

_G 是 lua 的環境變數,大家可以 print_r(_G) 看看,只要你的main.lua裡有設置全域變數,都會出現在_G全域表裡。或許可以找到官方未公開的函示:)
了解 Lua 程式基礎後可以進入 Corona SDK 精選 API 快速入門 階段

2016年2月18日 星期四

Chrome Console 應用實戰第二發,用 jQuery 取出外部 HTML 有價值資料,像取外部 JSON 與 XML 資料一樣簡單

此課題較為進階請耐心看完,有修正建議請多多指教~謝謝大家!

我們知道流行的資料交換格式就是 json 跟 xml,但是 html 裡面也有寶貴資料可以擷取,我們可以利用
$.post("你想解取資料的網址",function(raw){ // 回傳 raw 是 html 網頁資料, 不是 json 與 xml
  var jqHTML = $($.parseHTML(raw)); // 解析 html 並轉成 jQuery 物件
  var jqHTML.find("css selector").xxx; // 取得想要資料片段
})
來針對結構複雜的 html 網頁資料建立 jQuery 物件並用 css selector 找到我們要的指定資料。

★接觸此範例前建議先閱讀上一篇文章 Chrome Console 應用實戰,用 jQuery 批量下載正妹圖

我們正式進入主題 -
請先到作者朋友網站 http://facemood.grtimed.com/

開新視窗連結到 http://facemood.grtimed.com/?view=facemood&tid=1&page=1,請不要把首頁關掉,等下要切換回去
檢視面板找到 div class="xxx" data-f-text="(*゚∀゚*)",我想要擷取此畫面所有顏文字字串

回到首頁 http://facemood.grtimed.com/ 的頁面動態載入 jQuery
(不了解請先看之前範例了解如何製作動態載入jQuery的標籤)

打開 Console 貼上下面程式

$.post("http://facemood.grtimed.com/?view=facemood&tid=1&page=1",function(raw){
 // 將載入 HTML 解析並轉化成jQuery物件,all_emoji儲存所有顏文字
 var html = $($.parseHTML(raw)),all_emoji=[];
 // 取得指定標籤顏文字
 var emoji = html.find("div[data-f-text]");
 // 將所有顏文字存到 all_emoji 陣列
 emoji.each(function(){all_emoji.push($.trim($(this).html()));});
 // 清空畫面,輸出 all_emoji 陣列轉字串資料
 document.write(all_emoji.join(","));
})

輸出結果如下,我在網站首頁讀取其它頁面資料並輸出

你是否有能力靠程式擷取網站所有顏文字呢?請自行練習tid=x&page=y,x,y為變數,遞迴函示跑資料。作者擷取資料成功範例,抓到近550筆顏文字,下方為擷取成果

2016年2月16日 星期二

Chrome Console 應用實戰,用 jQuery 批量下載正妹圖

jQuery 實在是好物不得不學啊~本範例只是拋磚引玉,希望能看見更多有趣的應用:)

1.我想下載正妹圖,請先到 google 圖片搜尋"正妹"兩個字(本範例用 Chrome 瀏覽器,需對jQuery有一定程度了解)

2.請點擊 jQuery 書籤應該會出現如下圖(前一個範例一定要看過喔!)

3.打開 console 輸入程式碼(可以全部程式碼複製貼上,但建議一行一行輸入console,可以比較清楚執行流程)


//選取指定要下載的圖片(本範例為google圖片搜尋)
var img = $("img[alt='「正妹」的圖片搜尋結果']");
//建立下載連結字串
var temp = "";
img.each(function(index){
 //有些圖片src還沒載入所以跳過
 if($(this).attr("src")!=undefined)
 temp+="<a href='"+$(this).attr("src")+"' download='girl-"+index+".jpg'></a>";
});
temp+="我愛正妹圖 by Angryplay.blogspot.tw";
//清空頁面並建立要下載連結的HTML
document.write(temp);
var a=document.getElementsByTagName("a");
for(var i=0,len=a.length;i<len;i++){
 //建立觸發事件
 var e=document.createEvent('MouseEvents');
 e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 //觸發下載(chrome會跳出視窗請允許大量下載)
 a[i].dispatchEvent(e);
}


多看正妹有益身心健康:),想下載多一點圖片,請在正妹搜尋頁面把 scroll bar 一直往下拉載入多一點圖片

2016年2月15日 星期一

Chrome Bookmarks 書籤列做好用的 Plugins

Chrome 書籤列就是瀏覽器網址列下方水平的超連結按鈕工具條(如下圖應用程式,  jQuery, Closure Compiler...),既然是超連結那我們可以拿來做些有趣的事。

1.請先在工具條上按滑鼠右鍵選 新增網頁

2.我們要做外掛,(1)的地方就取 jQuery,(2)的地方塞入以下程式碼
javascript:(function(){(function(c,b){var a=document.createElement("script");a.type="text/javascript";a.readyState?a.onreadystatechange=function(){if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,b()}:a.onload=function(){b()};a.src=c;document.getElementsByTagName("head")[0].appendChild(a)})("https://code.jquery.com/jquery-1.12.0.min.js",function(){alert("jquery loaded!")})})();

3.因為我加入的程式碼是動態載入 jQuery,所以我們來玩一下 console,請在網頁任意處點選滑鼠右鍵選 檢查 打開 console 面板。

4.請點選剛建立好的書籤按鈕 jQuery,你會發現會跳出 jQuery loaded! 警告視窗

5. 測試 $ 符號是否有變數存在,請在 console 打上 $ 字符再按 enter,會發現$變數是函示物件,表式 jQuery 成功載入。

6. 改一下背景顏色請輸入
$("body").css("background","black");
再按下 enter,你會發現背景顏色都變成黑色的了。

7.結論就是我相信大家都是善心人士~哈

2016年2月14日 星期日

最齊全 Special Text Symbols 特殊標點符號在這!你有看過﷽奇怪文字嗎?

喜歡顏文字創作的朋友不要錯過~隨便抓一些範例文字如下:(ఠ㈈ఠ)


☀☁☂☃☄★☆☇☈☉☊☋☌☍☎☏☐☑☒☓☖☗☘☙☚☛☜☝☞☟☠
☡☢☣☤☥☦☧☨☩☪☫☬☭☮☯☰☱☲☳☴☵☶☷☸☹☺☻☼☽☾☿♀♁
♂♃♄♅♆♇♔♕♖♗♘♙♚♛♜♝♞♟♠♡♢♣♤♥♦♧♨♩♪♫♬♭♮♯
♰♱♲♳♴♵♶♷♸♹♺♻♼♽♾⚀⚁⚂⚃⚄⚅⚆⚇⚈⚉⚊⚋⚌⚍⚎⚏⚐⚑⚒⚔⚕
⚖⚗⚘⚙⚚⚛⚜⚠⚢⚣⚤⚥⚦⚧⚨⚩⚬⚭⚮⚯⚰⚱⚲✁✂✃✄✆✇✈✉
✌✍✎✏✐✑✒✓✔✕✖✗✘✙✚✛✜✝✞✟✠✡✢✣✤✥✦✧✩✪✫✬✭✮✯✰✱✲
✳✴✵✶✷✸✹✺✻✼✽✾✿❀❁❂❃❄❅❆❇❈❉❊❋❍❏❐❑❒❖❘❙❚❛❜❝❞❡❢❣❤
❥❦❧❨❩❪❫❬❭❮❯❰❱❲❳❴❵❶❷❸❹❺❻❼❽❾❿➀➁➂➃➄➅➆➇➈➉


作者選出近12000字可以正常顯示在網頁,完整版在這:
跳出視窗開網頁(檔案小32kb但算圖慢,顯示要一些時間)
䷀䷁䷂䷃䷄䷅䷆䷇䷈䷉䷊䷋䷌䷍䷎䷏䷐䷑䷒䷓䷔䷕䷖䷗䷘䷙䷚䷛䷜䷝䷞䷟䷠䷡䷢䷣䷤䷥䷦䷧䷨䷩䷪䷫䷬䷭䷮䷯䷰䷱䷲
感謝網友提供完整unicode字集

2016年2月13日 星期六

Corona SDK 精選 API 快速入門

想快速開發 ios, android 手機 App 的朋友們不要錯過(還可以輸出 Mac, Windows 桌面應用程式),尤其有 Adobe Flash 的開發經驗人員可以快速上手,對於獨立遊戲開發者來說是非常好的開發工具,當然你如果夠厲害3d美術程式可以自己包,就學 Unity 吧!不過以 2d 遊戲與應用程式開發來說 Corona SDK 絕對是最好選擇,超強兵器。作者花了近2個禮拜時間寫的 Corona SDK 教學,請捧場一下吧:),任何問題歡迎留言喔~

Corona SDK相關資源
Corona SDK 官方網站
台灣可樂娜跨平台開發基地 - Corona SDK
網友介紹 Corona SDK

第一章 String 字串處理
第二章 Table 陣列處理
第三章 Global 全域函式
第四章 Widget-button 按鈕設計
第五章 Display 視覺物件
第六章 Timer 計時器
第七章 Transition 動畫處理
第八章 IO 文件處理
第九章 JSON 資料格式
第十章 SQLite 資料庫
第十一章 Network 網路程式設計
第十二章 Native-Webview 瀏覽器元件
第十三章 Sound 聲音物件(audio)
第十四章 Composer 場景處理

Blogger 也可以有免費資料庫永久無限量存取功能 - 非Cookie (Google Blogger API V3)

大部分人都喜歡用痞客邦、或自己架 Wordpress 來撰寫部落格,其實 Blogger 也是很好的選擇。它的優點是可以自訂或載入外部 css, html, javascript 都沒問題,SEO也幫你優化,幾乎你想要的功能與視覺都能呈現出來;但如果你是網站工程師且熟悉 Blogger,那你一定很了解它唯一缺憾,是沒有像資料庫一樣存取功能來讓網站開發更多互動功能。可能很多人不知道 Google 針對 Blogger 部分也開放 API,讓軟體開發者透過 Blogger API 與 Blogger 互動,做到在網站、手機、其他應用程式可以針對指定文章或網頁新增、修改、刪除等動作。如果你的感覺很敏銳,那你應該知道,我們是否可以透過此功能,在文章或網頁進行修改存取時,放入使用者資訊,變成隨時可以存取的資料庫。用 blogger 開發 Web APP 絕對辦得到~要跳槽嗎?~哈!

官方資源
Blogger API 官方基礎指南
Blogger API 官方範例javascript客戶端程式開發指南
Blogger API 查詢

官方資源有看沒有懂沒關係,照著作者步驟來做:(本網誌左上角login按鈕就是存取實作範例)
1.Google Developers Console建立新專案
2.啟用 Blogger API v3
3.申請 API 金鑰,應該長這樣 AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0 (範例碼)
4.申請 OAuth 用戶端 ID,應該長這樣 800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com (範例碼)
5.新增 Blogger 網頁並進入編輯模式,請把網址列 blogID 跟 postID 記錄下來,blogID 應為 1243191245343241160(範例碼),postID 應為 6160462135247944473(範例碼)。我們將針對此網頁進行程式資料存取,也就是我們的小型資料庫。
6.撰寫程式碼


  <!--增加一個應用程式授權按鈕-->
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script>
  
  //blogger api 小型資料庫存取實作
  var clientId = '800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com';
  var apiKey = 'AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0';
  var scopes = 'https://www.googleapis.com/auth/blogger';
  var blogID = '1243191245343241160';
  var postID = '6160462135247944473';

  function handleClientLoad() {
    // 步驟2: 設定 API 金鑰
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }

  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }

  function handleAuthClick(event) {
    // 步驟3: 通過授權以存取資料
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }

  function makeApiCall() {
    // 步驟4: 讀取 Google blogger API 並執行存取動作
    var request;
    gapi.client.load('blogger', 'v3', function() {
      request = gapi.client.blogger.pages.get({'blogId':blogID,'pageId':postID});
      // 執行讀取
      request.execute(function(response) {
          console.log(response);
          // 執行寫入
          var save_data = {user_name:"test",user_password:"test2"};
          save_data = JSON.stringify(save_data); //以JSON字串存入
          request = gapi.client.blogger.pages.update({'blogId':blogID,'pageId':postID,'content':save_data});
          request.execute(function(response) {
            console.log(response);
          });
      });
    });
  }


  </script>
  <!-- 步驟1: 讀取 JavaScript client library -->
  <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  

2016年2月7日 星期日

2016.02.07 Angryplay 部落格新開張

這邊是技術部落格與日常分享,任何技術上問題都可以跟我討論喔~另外畫面左上方會放一些好玩的東西(音樂播放器比較陽春會改進)。下面是 Prism 提供的的程式碼 highlight 輔助,第一次使用感覺非常棒~

--測試 lua
function factorial(n)
  local x = 1
  for i = 2, n do
    x = x * i
  end
  return x
end


/*測試 css*/
p { color: red }


//測試 javascript
document.write("test");


//測試 actionscript
var test:String = "test";
trace(test);


//測試 php
echo "test".123;


#測試 python
import sys
print(sys.version)