免安裝Javascript版Apple Store iPhone 6 開賣Bot

唔洗講大家都知聽日係iPhone 6開賣日，高登討論區已經淪陷為Bot散貨場，當中是真是假我都唔知。
因為直至寫文呢個時間，Apple Store只更新iPhone 6訂購頁，但之後要填寫什麼都未知是否跟iPhone 5是一樣。
所以自動落單，自動填表的等媽媽餵奶流程是不是真的有用，我個人就很保留態度。



其實兩年前，我寫的Windows版 炒iPhone必備 Apple Store Checker - 開賣喇免費版，當時已經講過十個所謂監察App，相信九個都沒有太高深技術，純粹偵測一下Apple Store回應的Json就知道是否開賣。當時已經有一些無良開發者，竟然以如此低技術的程式，去收取$39.99的價錢，甚至比一些Office Apps或遊戲還要貴。

近日有人留言問我是否會更新那時的程式，其實程式的Source Code，我都好像刪除了。
不過今天看見網站流量突然爆升，全部都是衝著這個程式而來。
反正重寫都不會花太多時間，一個Lunch時間已經搞定，所以我就再重新寫一個。


不過這一次我為了快快搞掂，我以Javascript去實現，工作原理都是一樣，以GET方式檢查Json，有就出Alert，沒有就繼續StandBy，就是這麼簡單。
最簡單使用方法可以使用Browser上的Javascript Console如

• Firefox的Firebug
• Chrome的Developer Tools

除了Firefox之外，Chrome都已經內建。搞不懂就問問朋友或留言問我。

使用方法:

1. 打開Browser先去 http://store.apple.com/hk-zh/buy-iphone/iphone6
2. 按鍵盤F12，前往Console，把整段程式碼貼上執行就OK，之後程式每20秒就會對18個iPhone 6組合進行一次查詢。
3. 想停止的話，可以輸入 stop()再按Enter就會停止(或者最直接就是重開瀏覽器)，再開始就輸入run()按Enter。

當然我不能保証什麼，但在技術上或理論上，都是可靠的。
可惜近期我在工作上都很忙，恕我未能做到更好或解釋更多。m(~_~)m

下載Javascript檔
[開啟連結後，你會見到很長很嚇人的火星文，總之就直接按下Ctrl+A (全選), Ctrl+C (複製) , 再去Console Ctrl+V (貼上) , Enter, 右下角有提示出現就証明運作緊.]
https://dl.dropboxusercontent.com/u/19160547/Files/ip6.txt

Update#1 - 2014-09-12 00:16

呢段Script放左上網一發不可收拾，主要都是我Facebook的朋友用Chrome出現問題，
我自己都被訊息轟炸。而且他們執行上都覺得很困難，現在修正了一點地方，請重新再試。

Update#2 - 2014-09-12 01:40

程式原本設計是，任何一個組合開賣，就會出alert()提示，程式亦會停止(因為我怕同時彈出18個alert()視窗... )，但不能告之是什麼組合開賣(因程式已停止，餘下的組合不會再檢查)，而且一不留神就會Miss左。
所以我再下苦功加入兩樣功能 -
1. 調用HTML5的Audio API做通知，開賣時，會有20秒的長Beep。
但不支援IE，即使是IE12，已查Mozilla文件証實。
2. 於Console Window顯示什麼組合開賣。

Update#3 - 2014-09-12 12:18

第三次更新，因為有人話自己在Office返工，唔可以打開Speaker，有聲都聽唔到。
所以我最後用了Chrome/Firefox的Notification功能去做提示，同時亦放棄支援IE。
記得第一次使用時，批准Browser的Permission，如下圖。

Chrome:

Firefox:

Update#4 - 2014-09-12 17:00

岩岩開賣時，好多人都不停Click個綠色選取制。
但我想講下，我都俾果個綠色制Fake左。
其實今次Apple果版做得好差，第一次按，有反應，但買唔到彈返轉頭果時，果個綠色制係會變到冇用的，
你再click佢，佢唔會send任何資料俾Apple，亦唔會做任何野動作。
一定要全版reload至得。
但今次我試左，自己呢段Script係Work的，再做左優化，大家一定要更新最新版本。

有很多人都說運行本Script後出現錯誤，最大原因是你的Firefox或Chrome沒有先前往http://store.apple.com/hk-zh/buy-iphone/iphone6就運行本Script。
若不懂用Chrome Developer Tool，有一段Youtube 上的Tutorial很簡單地教你怎用，由4:00開始睇就可以。

Feedly Duplicate Filter 2014

轉至Feedly後，依然還要經常應付Google Reader時的1000+問題，即時超過1000條Feed未看，這還是最常出現在Delicious當中。

之前介紹過Feedly Duplicate Remover以及後來的Chrome Extension - Reader Filter。

前者已經失效而且沒有更新，後者有效但只限Chrome，而且hidden後的feeds，會保留空白，很愚蠢的設計。

持續多個月，實在忍無可忍，還是又要自己出手寫個小品程式去一己私慾。

這個Userscript很簡單，以標題對比方法找出重複的，你可以選擇以Hide方式還是Highlight方式去標示。
打開Config方法是在Greasemonkey的圖示下會找到按鈕。
我測試過Chrome+Tampermonkey都可以完美運作的。

大家可以由此下載Feedly Duplicate Filter 2014
https://dl.dropboxusercontent.com/u/19160547/Files/Feedly_Duplicate_Filter.user.js



Source Code:

為你的Blogger加入新式上一篇/下一篇文章連結

其實很多Blog Engine的previous/next->post/page都很不顯眼，即使如WordPress，很多Themes的設計都同樣冷落這兩個連結按鈕。

至於Blogger也不例外，樣式不吸引，而且所在位置是頁面的最下方，就是那麼不起眼。


當然透過CSS，你可以把它改變成大圖案大文字去吸引目光，但其實透過小小的jQuery Plugin就可以做到現在本Blog的效果。


所使用的plugin叫jcLeftRightKeyNav。
可以試試官方的Demo，其中一個特色是支援Keyboard的左右鍵。

官方Demo無論連結和文字都是靜態的，
所以我還作出了少少修改 -
1. 把Blogger的Post Title，Prev/Next連結，Dynamic地連結至該Plugin。
2. 把Post的Thumbnails加上伸展標籤位置。

若覺得有點抽象，或者可以試試本站的實際使用情況，你應該會見到頁面兩旁有Previous/Next的浮動按鈕。

使用方法:
1. 下載jcLeftRightKeyNav，上傳至網絡空間或DropBox。

2.在Blogger的HTML/JavaScript小工具貼上以下Code :

<!-- CDN Hosted jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/></script>
<script type="text/javascript" src="[PathTo]/jcSimpleLeftRightKeyNav.js"></script>
<link href="[PathTo]/jcLeftRightKeyNav.css" rel="stylesheet" type="text/css" />

3. 現在就到Hack的部份。跟上面同一位置，再貼上後儲存，便完成。

<script type="text/javascript">
$(document).ready(function(){
  //If the current page is posts list, exit. The script should run when viewing post.
  if ($('div.date-outer').length > 1)
   return;
  
  //variables
  var prevtitle = '', prevmeta = '', previmg = '',nexttitle = '', nextmeta = '', nextimg = '';
  //Use your favor image when the post is no thumbnail.
  var noimage = 'http://ultraimg.com/images/t36d6d.png';
  //Get the prev/next href src.
  var prevsrc = $('#Blog1_blog-pager-newer-link').attr('href');
  var nextsrc = $('#Blog1_blog-pager-older-link').attr('href');
  
  //Perform jQuery ajax to blogger mobile version and get the title and thumbnail.
  $.ajaxSetup({ cache: false, global: false,async: false });
  if (prevsrc != null)
  {
   //Append "?m=1" to blogger url to visit mobile version.
   $.get(prevsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     prevtitle = $('h3.post-title.entry-title' , data).text();
     prevmeta = $("meta[itemprop='image_url']" , data);
     if ($(prevmeta).html() == undefined)
     previmg = noimage;
     else if ($(prevmeta).attr('content').indexOf('-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(prevmeta).attr('content').indexOf('-c-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
     
   });
  }
  if (nextsrc != null)
  {
   $.get(nextsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     nexttitle = $('h3.post-title.entry-title' , data).text();
     nextmeta = $("meta[itemprop='image_url']" , data);
     if ($(nextmeta).html() == undefined)
     nextimg = noimage;
     else if ($(nextmeta).attr('content').indexOf('-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(nextmeta).attr('content').indexOf('-c-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
   });
  }
  
  //Finally, run jcLeftRightKeyNav.
  jQuery().jcNextPrev({
       prevLink: prevsrc,
       prevLinkText: "<img src='" + previmg + "' />" + "<br />" + prevtitle,
       nextLink: nextsrc,
       nextLinkText: "<img src='" + nextimg + "' />" + "<br />" + nexttitle
  });

});
</script>

其實沒有太複雜的地方，應該看comment都已經足夠說明。
唯Thumbnail(預覽圖)可以解說一下。

若你跟我都是用Picasa Web或Blogger內建的上傳做圖片連結，
Blogger的預覽圖是會自動產生，Blogger會自動抓取你Post文中第一張圖片做預覽圖Url。
故為什麼要設置NoImage，因為有機會Post中沒有圖片可抓。

若果圖片都是其他網域的話，很遺憾就沒有預覽圖了。
例如這個Post是用Facebook的，當你View Source時，你會找不到任何有關預覽圖的資料。

畫鬼腳 Javascript

因為公司春茗，要整一個遊戲....畫鬼腳...
老實說，這樣無聊的東西，我真的懶得去自己整。
上網找一找，發現用英文"Amidakuji "還是中文"畫鬼腳"都找不到，莫說是Javascript，Flash都沒有。

用日文"あみだくじ"搜尋，找到兩個，雖然最後都不合我用。
但記錄一下，或者其他人有用。

• あみだくじ
• JavaScriptであみだくじを自動生成して自動トレース

用Javascript整RPG遊戲

中學時的自己絕對是超任，PS時代的RPG迷，什麼FF,DQ,SD英雄戰記,四狂神,Metal Max,Chrono Trigger,Live a Live,Saga系列到PS昤代的Arc The Lad，武藏傳等等你講得出的，我幾乎都有玩過。
細個時候很崇拜寫遊戲的人，現在都是，曾經很希望有一天可以寫一隻遊戲，不過對長大後的我來說並不現實。

記得曾經出過一隻叫RPG製作大師的東西，現在還找得到。

不過到今天HTML5+JS的時代，可以用JS的Framework寫RPG了。
這個叫RPGJS的東西就是一個Framework給你製作RPG遊戲。
http://rpgjs.com/

我玩過它的Demo，以小遊戲來說，效果不錯喇。

JavaScript Stuff

Detecting ‘Idle’ and ‘Away’ Timeouts in Javascript
Code & Demo @ bedroomlan

10 Small Things You May Not Know About Javascript

JavaScript 奇怪錯誤
Top 10 Things that JavaScript Got Wrong
What the Fuck JavaScript

Javascript - Array difference

以下Function用途是比對兩段Array，找出不同的元素。

function diffArrays(arr1, arr2, returnUnion) {
    var ret = [];
    var test = {};
    var bigArray, smallArray, key;
    if (arr1.length >= arr2.length) {
        bigArray = arr1;
        smallArray = arr2;
    } else {
        bigArray = arr2;
        smallArray = arr1;
    }
    for (var i = 0; i < bigArray.length; i++) {
        key = bigArray[i];
        test[key] = true;
    }
    if (!returnUnion) {
        //diffing
        for (var i = 0; i < smallArray.length; i++) {
            key = smallArray[i];
            if (!test[key]) {
                test[key] = null;
            }
        }
    } else {
        //union
        for (var i = 0; i < smallArray.length; i++) {
            key = smallArray[i];
            if (!test[key]) {
                test[key] = true;
            }
        }
    }
    for (var i in test) {
        ret.push(i);
    }
    return ret;
} 
array1 = "test1", "test2", "test3", "test4", "test7"
array2 = "test1", "test2", "test3", "test4", "test5", "test6"
diffArray = diffArrays(array1, array2);
//returns ["test5","test6","test7"]
 
diffArray = diffArrays(array1, array2, true);
//returns ["test1", "test2","test3","test4", "test5", "test6","test7"]

Javascript - Passing arguments as Function

在Javascript中，Call Function絕對不會陌生，但如果有若干數量的Function因應不同的情況才Call怎麼辦呢?
當然有很多可能性，其中最常見的亦是傳統做法不外乎

if..(condition)..then...
function1();
function2();
function3();
...

而我的做法就是自行寫一個Helper，用Array以arguments型式去呼叫Function。

function SayGoodBye()
{
   $('#hello').html('GoodBye');
}

function SeeYou()
{
   $('#hello').html($('#hello').html() + ',' + 'See you next time!');
}

function caller(aryfunc)
{
   $.each(aryfunc,function(i,n) //用jQuery的each
     {  Function.call(n());  }
   );
}

$(document).ready(function() { 
  //if..(condition)..then...
  var myFunc = new Array(SayGoodBye,SeeYou); //and more...
  caller(myFunc); //Print out : GoodBye,See you next time!
}); 
<div id="hello"></div>

這就可以把 condition 移至外部，用Helper去呼叫Function更加靈活。而且Array中的項目,Function的arguments不只是資料型態(String,Int...)，更可以是function()吧。

niftyPlayer 1.7

一個輕量的JavaScript + Flash 的MP3 Player,好易用~

http://varal.org/media/mp3player/sample.html

難得的JavaScript TreeGrid / TreeList

Programming經驗較淺的朋友或者對TreeGrid / TreeList很陌生，DataGrid / GridView / Treeview 就聽得多，但什麼是TreeGrid / TreeList呢?

其實TreeGrid / TreeList是一樣的東西，不同叫法，後期Java和Flex也有Control命名做TreeGrid。
最常見的，就是Outlook Express中的文章列表，可摺合的Row，承繼Column，可包含多個節點的，就算是TreeGrid了。

在Microsoft的開發世界裡，要找免費的TreeGrid不容易，

Winform 有很多TreeGrid Controls都是商業性質。
Web Form的，可以找找Script型式的，但我找遍整個Google實在找不到。

好彩最後在CodeProject找到JScript Tree Grid Control，
用JavaScript編寫，很簡潔，雖然沒有Sorting等功能，但只此一家。

用法大概是用Print型式Dynamic地做出Item，都算是又簡單又實用，這個TreeGrid 包含的Sample只有一個節點(nodes)，
如果你想擴張節點，只需要再新建一個iItem就可以了。



JScript Tree Grid Control
http://www.codeproject.com/KB/scripting/wsGridCtrl.aspx