Firefox記憶體設定

參考 : http://forum.moztw.org/viewtopic.php?f=2&t=11431&view=previous
限制一下Firefox記憶體使用量
步驟
1. about:config
2. browser.sessionhistory.max_total_viewers 30 //30個頁面會cache
3. browser.cache.memory.capacity 20480 //記憶體限制

iphone safari 多點觸控實作

參考一
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html
參考二
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW1

來製作一個二指劃開後圖片隨二指距離而變化

製作多點觸控，為避免瀏覽器的zoom in zoom out干擾所以要先將zoom的功能關閉

實作範例教學：
<meta name="viewport" content="width=device-width,height=420, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>   



圖片替換用的 div
<div id="img"><img src="1.png" width="320"></div>



加上感應觸控的 div
<div id="touch" ontouchstart="touchStart(event);" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);" ontouchcancel="touchCancel(event);"></div>



css

html body{
    overflow: hidden;
}
#touch{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#AAAAAA;
    opacity: 0;
}
#img{
    position:absolute;
    top:0;
    left:0;
}

javascript

//預先載入五張圖片
var img1 = new Image(); img1.src = '1.png';
var img2 = new Image(); img2.src = '2.png';
var img3 = new Image(); img3.src = '3.png';
var img4 = new Image(); img4.src = '4.png';
var img5 = new Image(); img5.src = '5.png';

var x_percent = 1; //二點距離指數
//加入觸控event
element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

function touchStart(event){
//event 開時換第一張圖
    x_percent = 1;
    changeImg(x_percent);
}
function touchMove(event){
//依二指距離替換五張圖
    var x1 = event.touches[0].pageX;
    var y1 = event.touches[0].pageY;
    var x2 = event.touches[1].pageX;
    var y2 = event.touches[1].pageY;
    var x_diff = Math.abs(x1-x2);
    x_percent = Math.ceil((x_diff/32)/2);
    changeImg(x_percent);
}
function touchEnd(event){
//結束換回第一張圖
    x_percent = 1;
    changeImg(x_percent);
}
function touchCancel(event){
//取消也是換回第一張圖
    x_percent = 1;
    changeImg(x_percent);
}
function changeImg(screen){
    if(screen > 5){
        screen = 5;
    }
    if(screen < 1){
        screen = 1;
    }
    document.getElementById("img").innerHTML = '<img src="'+screen+'.png" width="320">';
}


結果展示：http://excite.978.tw/iphone/mtouch.php
(要用iphone的Safari開啟)
然後二指左右劃開就可以看到效果

facebook check in API (graph) 實作範例教學

facebook在台灣開放打卡後，graph裡的checkin API可以來玩玩
搭配手機定位來做應用 (手機瀏覽器取得geolocation)
以下為使用facebook php SDK 的實作範例教學

include('inc/facebook.php');
$facebook = new Facebook(
    array(
        'appId'  => $facebook_app_key,
        'secret' => $facebook_app_secret,
        'cookie' => true,
    )
);

$lat = filter_input(INPUT_GET, 'lat', FILTER_VALIDATE_FLOAT);
$long = filter_input(INPUT_GET, 'long', FILTER_VALIDATE_FLOAT);
$fb_id = $facebook->getUser();
//檢查登入
if( !$fb_id ){
    echo 'Please login facebook.'; exit;
}
//檢查經緯度
if( !$lat || !$long ){
    echo 'latitude or longitude is null'; exit;
}
//search place
try{
    $place = $facebook->api('/search?type=place¢er='.$lat.','.$long.'&distance=1000');
}catch(Exception $e){ var_dump($e); }
//checkin
try{
    $checkin_res = $facebook->api('/me/checkins'
              ,'post'
              ,array(
                   'message' => '手機綁app來check in,除了阿賢其他人都可以被tag'
                  ,'coordinates' => '{"latitude":"'.$lat.'", "longitude": "'.$long.'"}'
                  ,'place' => $place['data'][0]['id']
                  ,'application' => '{"name":"bruce test","id":"'.$facebook_app_id.'"}'
                  ,'tags' => '朋友id1,朋友id2,朋友id3,朋友id4,朋友id5'
               )
            );
    echo 'check in success.';
}catch(Exception $e){ var_dump($e); }

vim 去除多餘的空白

複製貼上程式碼時，尤其由ssh client複製時會有多餘的空白在每一行後面
這時用vim可簡單快速將空白移除
1. 按 : 進入命令模式
2. 在命令模式裡輸入 % s/\ *$//g
3. 按下enter

手機瀏覽器取得geolocation

多數智慧手機都有gps，內建的瀏覽器也大多支援html5 navigator.geolocation
以下為簡單的javascript code來取得手機裝置目前的經緯度
實作範例教學：

if( navigator.geolocation == undefined ){
    alert('裝置不支援');
}else{
    navigator.geolocation.getCurrentPosition(successCallback,errorCallback,{maximumAge:60});
}
function successCallback(position) {
    lat = position.coords.latitude;
    long = position.coords.longitude;
    alert('lat:'+lat+' long:'+long);
}
function errorCallback(error) {
    alert('無法取得位置');
}

facebook php sdk "SSL certificate problem" 解法

使用 facebook php sdk時
有些機器會出現
SSL certificate problem 的錯誤訊息
只要加上以下二行即可
Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYPEER] = false;
Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYHOST] = 2;

範例:

include('inc/facebook.php');
$facebook = new Facebook(
    array(
    'appId'  => $facebook_app_key,
    'secret' => $facebook_app_secret,
    'cookie' => true,
    )
);
Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYPEER] = false;
Facebook::$CURL_OPTS[CURLOPT_SSL_VERIFYHOST] = 2;

手機瀏覽器上使用facebook登入與請求權限

手機瀏覽器畫面大小與一般螢幕不同
只要在login上傳入 display=touch 就可以換成手機版的頁面
display=wap 也可以，以下的code專給大螢幕的手機使用，像iphone
實作範例教學：

include('inc/facebook.php');
$facebook = new Facebook(
    array(
        'appId'  => $facebook_app_key, //appid
        'secret' => $facebook_app_secret, //appsecret
        'cookie' => true,
    )
);

$aLoginParam = array(
    'display' => 'touch' //手機模式畫面
    ,'req_perms' => 'user_checkins' //打卡權限
    ,'cancel_url' => 'http://'.$server.'/facebook/index.php'
);

if( $session = $facebook->getSession() ){
    $fb_id = $facebook->getUser();
    //檢查權限
    try{
        $perm = $facebook->api(array(
        'method' => 'fql.query',
        'query' => 'select user_checkins from permissions where uid='.$fb_id
    ));
    if( $perm[0]['user_checkins'] != '1' ){ //有權限
        $url = $facebook->getLoginUrl($aLoginParam);
        header('Location: '.$url); exit;
    }
    }catch (Exception $e) { }
}else{
    $url = $facebook->getLoginUrl($aLoginParam);
    header('Location: '.$url); exit;
}